/* ═══════════════════════════════════════════════════════════
   FANC IT

   Design system taken from fanc-it-lizzy: chalky pastel blocks
   on cream, one slate ink, and a typographic split -
   a big tight sans carries the statements, Georgia italic
   carries the human voice inside them.

   No rounded corners anywhere. No gold. No drop shadows
   except the one on the book cover.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --cream:#F4F0E8;
  --ink:#34434A;
  --blue:#C8D3D5;
  --powder:#E4E7E4;
  --sand:#D8D0C3;
  --stone:#CEC9C1;
  --taupe:#675C56;

  /* contextual tokens - components read these, never the raw palette */
  --bg:var(--cream);
  --fg:var(--ink);
  --fg-2:rgba(52,67,74,.78);
  --fg-3:rgba(52,67,74,.54);
  --accent:var(--taupe);
  --rule-c:rgba(52,67,74,.22);
  --rule-c-2:rgba(52,67,74,.11);
  --field:rgba(52,67,74,.03);

  --sans:"Helvetica Neue","Avenir Next",Avenir,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;

  --gut:clamp(20px,4.4vw,64px);
  --sec-y:clamp(72px,9vw,120px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* the same components on the slate ground */
.on-dark{
  --bg:var(--ink);
  --fg:var(--cream);
  --fg-2:rgba(244,240,232,.76);
  --fg-3:rgba(244,240,232,.52);
  --accent:var(--blue);
  --rule-c:rgba(244,240,232,.26);
  --rule-c-2:rgba(244,240,232,.13);
  --field:rgba(244,240,232,.05);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
}
/* the two pale blocks */
.on-blue { --bg:var(--blue);  background:var(--bg) }
.on-stone{ --bg:var(--stone); background:var(--bg) }
.on-powder{--bg:var(--powder);background:var(--bg) }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(16px,1.02vw,17px);
  line-height:1.6;
}

img{max-width:100%;display:block}
/* the hidden attribute has to beat the display rules above it -
   otherwise a probed image renders as a broken box with its alt text */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── the statements ─────────────────────────────────────── */
h1,h2,h3,h4{
  margin:0;font-family:var(--sans);font-weight:500;
  text-wrap:balance;
}
h1{font-size:clamp(42px,8.2vw,98px);letter-spacing:-.072em;line-height:.88}
h2{font-size:clamp(31px,5.6vw,72px);letter-spacing:-.06em;line-height:.92}
h3{font-size:clamp(23px,2.8vw,36px);letter-spacing:-.04em;line-height:.96}
h4{font-size:clamp(19px,2vw,26px);letter-spacing:-.03em;line-height:1}

/* Georgia italic inside a statement - the voice under the claim */
h1 em,h2 em,h3 em,blockquote em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--taupe);
}
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em,.on-dark blockquote em{color:var(--blue)}

/* ── the quiet voice ────────────────────────────────────── */
.lead,.sec-lead,.hero-q,.post-kicker{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(18px,1.9vw,22.5px);line-height:1.5;
  color:var(--fg);letter-spacing:normal;
  max-width:44ch;margin-top:1.3em;
}
.sec-lead.center{margin-left:auto;margin-right:auto;text-align:center}
.body-lead{color:var(--fg-2);max-width:62ch;margin-top:1.4em;font-size:1.02em}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);margin:0 0 1.5em;line-height:1.5;
}
.fineprint{font-size:12.5px;color:var(--fg-3);margin-top:2em;letter-spacing:.01em}

/* ── wordmark ───────────────────────────────────────────── */
.mark,.cover-mark,.foot-mark{display:inline-flex;align-items:baseline;gap:9px;line-height:1}
.cover-mark{flex-direction:column;align-items:center;gap:5px}
/* the logo proper: quiet, serif, widely spaced */
.mark-word{
  font-family:var(--serif);font-weight:400;
  font-size:21px;letter-spacing:.26em;text-indent:.26em;
}
.mark-sub{
  font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg-3);white-space:nowrap;
}

/* the real wordmark from assets/. The four words stay as live text
   beside it - baked into the image they render about two pixels tall.
   The text wordmark is the fallback if the file ever fails to load. */
.mark-img{height:25px;width:auto;display:block;align-self:center}
.mark.has-img .mark-word{display:none}
@media (max-width:620px){.mark-img{height:21px}}

/* Decide. Own. Become. */
.tagline{
  font-family:var(--sans);
  font-size:clamp(11px,1.1vw,13px);font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg-2);margin:0;
}
.foot-mark .tagline{margin-top:10px;padding-top:12px;border-top:1px solid var(--rule-c-2);width:100%}

/* the emphasis: loud sans, saved for the sign-off in the footer */
.mark-loud{flex-direction:column;align-items:flex-start;gap:7px}
.mark-loud .mark-word{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(30px,4vw,46px);letter-spacing:-.055em;text-indent:0;
}
@media (max-width:620px){.mark-sub{display:none}}

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:60;
  background:var(--cream);color:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.nav.solid{border-bottom-color:var(--rule-c-2)}
.nav-in{
  max-width:1100px;margin:0 auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:clamp(16px,3.4vw,44px);
}
.nav-links{
  margin-left:auto;display:flex;gap:clamp(16px,2.2vw,32px);
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.nav-links a{opacity:.82;transition:opacity .2s var(--ease)}
.nav-links a:hover{opacity:1}
@media (max-width:900px){.nav-links{display:none}.mark{margin-right:auto}}

/* ── calls to action ────────────────────────────────────── */
.btn{
  display:inline-block;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:0;
  color:var(--fg);background:none;border:0;border-bottom:2px solid var(--fg);
  padding:6px 0;
  transition:opacity .2s var(--ease),border-color .25s var(--ease);
}
.btn::after{content:" ↗";font-weight:900}
.btn:hover{opacity:.62}
.btn-sm{font-size:13px}

/* the one place a real button shape earns its keep: the sign-up field */
.btn-solid{
  border:1px solid var(--fg);border-bottom-width:1px;
  background:var(--fg);color:var(--bg);
  padding:14px 26px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
}
.btn-solid::after{content:""}
.btn-solid:hover{opacity:1;background:transparent;color:var(--fg)}
.btn[disabled]{opacity:.38;pointer-events:none}

.link-arrow{
  font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--fg-2);border-bottom:1px solid var(--rule-c);padding-bottom:3px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.link-arrow::after{content:" ↗"}
.link-arrow:hover{color:var(--fg);border-color:var(--fg)}

/* ── sections ───────────────────────────────────────────── */
.sec{padding:var(--sec-y) 0;background:var(--bg);color:var(--fg)}
.sec-tight{padding:clamp(60px,7vw,92px) 0}
.sec-head{margin-bottom:clamp(40px,5vw,72px)}

/* ── hero ───────────────────────────────────────────────── */
.hero{
  background:var(--blue);color:var(--ink);
  padding:clamp(56px,7vw,92px) 0 clamp(64px,8vw,104px);
}
.hero h1{max-width:15ch}
.hero-q{margin-top:clamp(22px,2.6vw,34px);max-width:40ch}
.hero-body{max-width:58ch;color:var(--fg-2);margin-top:clamp(20px,2.2vw,28px)}
.hero-cta{display:flex;align-items:center;gap:clamp(20px,3vw,38px);flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px)}

/* ── is this you (checklist) ────────────────────────────── */
.check-grid{
  display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(36px,5vw,88px);align-items:start;
}
.check-intro{position:sticky;top:104px}
.check-list{display:grid;border-top:1px solid var(--rule-c-2)}
.ck{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:16px 4px;border-bottom:1px solid var(--rule-c-2);
  cursor:pointer;transition:background .2s var(--ease);
}
.ck:hover{background:var(--field)}
.ck input{position:absolute;opacity:0;width:0;height:0}
.box{
  width:16px;height:16px;margin-top:5px;flex:none;
  border:1px solid var(--rule-c);position:relative;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.box::after{
  content:"";position:absolute;inset:0;margin:auto;margin-top:-2px;
  width:8px;height:4px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:opacity .18s var(--ease),transform .2s var(--ease);
}
.ck input:checked ~ .box{background:var(--blue);border-color:var(--blue)}
.ck input:checked ~ .box::after{opacity:1;transform:rotate(-45deg) scale(1)}
.ck input:focus-visible ~ .box{outline:2px solid var(--accent);outline-offset:3px}
.ck-t{color:var(--fg-2);font-size:.97em;line-height:1.55;transition:color .2s var(--ease)}
.ck input:checked ~ .ck-t{color:var(--fg)}

.check-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:clamp(24px,3vw,36px);flex-wrap:wrap}
.tally{font-family:var(--sans);font-weight:500;font-size:42px;letter-spacing:-.05em;line-height:1;margin:0}
.tally-of{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-left:10px}
.result{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--rule-c)}
.result-band{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(23px,2.6vw,34px);letter-spacing:-.04em;line-height:1;
  margin-bottom:.7em;
}
.result-text{color:var(--fg-2);max-width:54ch;margin-bottom:1.6em}
@media (max-width:900px){.check-grid{grid-template-columns:1fr}.check-intro{position:static}}

/* ── the tension ────────────────────────────────────────── */
.stuck .sec-head{text-align:center;margin-bottom:clamp(30px,4vw,52px)}
.stuck h2{margin-inline:auto;max-width:15ch}
.tension-grid{
  display:grid;grid-template-columns:1fr 1px 1fr;
  gap:clamp(24px,3.6vw,56px);align-items:center;
  padding:clamp(26px,3.4vw,48px) 0;
}
.seam{grid-column:2;justify-self:center;width:1px;height:100%;min-height:110px;background:var(--rule-c)}
.pull{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,3.4vw,46px);line-height:1.12;letter-spacing:-.02em;
  margin:0;color:var(--fg);text-wrap:balance;
}
.pull-a{grid-column:1;text-align:right}
.pull-b{grid-column:3;text-align:left}
.tension-body{max-width:58ch;margin:clamp(32px,4vw,56px) auto 0;color:var(--fg-2);text-align:center}
.tension-punch{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(20px,2.2vw,30px);letter-spacing:-.035em;line-height:1.1;
  color:var(--fg);margin-top:1.6em;padding-top:1.4em;border-top:1px solid var(--rule-c);
}
@media (max-width:780px){
  .tension-grid{grid-template-columns:1fr;gap:20px;padding:20px 0}
  .seam{grid-column:1;width:64px;height:1px;min-height:0;justify-self:start}
  .pull-a,.pull-b{grid-column:1;text-align:left}
  .tension-body{text-align:left}
}

/* ── why the usual advice fails ─────────────────────────── */
.myths{display:grid;grid-template-columns:1fr 1fr;gap:0}
.myth{padding:clamp(26px,3vw,40px) clamp(22px,2.8vw,42px);border-top:1px solid var(--rule-c)}
.myth:nth-child(odd){border-right:1px solid var(--rule-c);padding-left:0}
.myth:nth-child(even){padding-right:0}
.myth h3{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(21px,2.3vw,30px);letter-spacing:normal;line-height:1.24;
  margin-bottom:.7em;
}
.myth p{color:var(--fg-2);margin:0}
@media (max-width:760px){
  .myths{grid-template-columns:1fr}
  .myth{padding-left:0;padding-right:0}
  .myth:nth-child(odd){border-right:0}
}

/* ── the four steps ─────────────────────────────────────── */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-c)}
.step{
  display:grid;grid-template-columns:clamp(60px,9vw,120px) 1fr;
  gap:clamp(18px,3vw,48px);align-items:start;
  padding:clamp(28px,3.6vw,48px) 0;
  border-bottom:1px solid var(--rule-c-2);
}
.step-mark{display:grid;justify-items:start;gap:6px}
.step-l{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(34px,4.4vw,58px);line-height:.9;color:var(--taupe);
}
.step-n{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.step-body h3{margin-bottom:.55em}
.step-body p{color:var(--fg-2);max-width:60ch;margin:0}
.steps-close{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(21px,2.6vw,34px);letter-spacing:-.04em;line-height:1.02;
  max-width:22ch;margin-top:clamp(36px,4.4vw,60px);
}
@media (max-width:700px){
  .step{grid-template-columns:1fr;gap:10px}
  .step-mark{grid-template-columns:auto auto;align-items:baseline;gap:14px}
  .step-l{font-size:34px}
}

/* ── ways in ────────────────────────────────────────────── */
.ways{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:1px;background:var(--rule-c-2)}
.way{
  background:var(--bg);
  padding:clamp(26px,3.2vw,44px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.way-lead{background:var(--powder)}
.way-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-bottom:1.6em}
.way h3{margin-bottom:.6em}
.way-d{color:var(--fg-2);margin-bottom:.4em}
.mini-head{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  margin:clamp(24px,2.8vw,34px) 0 1em;padding-bottom:.8em;border-bottom:1px solid var(--rule-c-2);width:100%;
}
.way-list{list-style:none;margin:0 0 clamp(24px,2.8vw,34px);padding:0;display:grid;gap:10px;width:100%}
.way-list li{color:var(--fg-2);padding-left:22px;position:relative;line-height:1.55}
.way-list li::before{content:"";position:absolute;left:0;top:.7em;width:11px;height:1px;background:var(--taupe)}
/* the headline inside each line is the link - the summary after it is not */
.way-list a{color:var(--fg);font-weight:700;border-bottom:1px solid var(--rule-c);transition:border-color .25s var(--ease)}
.way-list a:hover{border-bottom-color:var(--fg)}
.way-note{margin-top:1.1em;font-size:13px;color:var(--fg-3);line-height:1.6}

.pb-mini{display:grid;grid-template-columns:140px 1fr;gap:clamp(16px,2.2vw,26px);align-items:start;width:100%;margin:clamp(20px,2.4vw,30px) 0}
.pb-n{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);margin-bottom:.8em}
.pb-t{color:var(--fg-2);font-size:.95em;margin-bottom:1.3em}
.doors{display:grid;gap:9px}
.door{border:1px solid var(--rule-c);padding:13px 15px;display:grid;gap:2px;transition:border-color .25s var(--ease)}
.door:hover{border-color:var(--fg)}
.door-k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3)}
.door-v{font-size:15px;font-weight:700;letter-spacing:-.02em}
.door-s{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-top:2px}
@media (max-width:980px){.ways{grid-template-columns:1fr}}
@media (max-width:520px){.pb-mini{grid-template-columns:1fr}.cover-sm{max-width:150px}}

/* ── the book cover ─────────────────────────────────────── */
.cover{
  aspect-ratio:1/1.42;background:var(--cream);
  box-shadow:0 2px 3px rgba(52,67,74,.06),0 24px 56px -30px rgba(52,67,74,.5);
  padding:clamp(20px,2.8vw,34px) clamp(16px,2.2vw,28px);
  display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);
}
.cover .mark-sub{color:rgba(52,67,74,.5);display:block}
.cover-title{
  font-family:var(--serif);font-weight:400;letter-spacing:.01em;line-height:1.02;
  font-size:clamp(26px,3.6vw,42px);margin-top:clamp(18px,2.6vw,30px);text-transform:uppercase;
}
.cover-sub{font-family:var(--serif);font-size:clamp(12px,1.4vw,17px);letter-spacing:.12em;text-transform:uppercase;margin:.8em 0 0;line-height:1.4}
.cover-rule{width:40px;height:1px;background:var(--taupe);margin:clamp(16px,2.2vw,28px) 0}
.cover-box{background:var(--ink);color:var(--cream);font-size:clamp(10.5px,1vw,13px);line-height:1.55;padding:clamp(12px,1.6vw,18px);width:100%}
.cover-by{font-family:var(--serif);font-size:clamp(13px,1.3vw,18px);letter-spacing:.03em;margin:auto 0 0;padding-top:clamp(14px,2vw,26px)}

.cover-sm{width:100%;aspect-ratio:auto;padding:13px 10px;box-shadow:0 1px 2px rgba(52,67,74,.06),0 12px 30px -20px rgba(52,67,74,.45)}
.cover-sm .mark-word{font-size:13px;letter-spacing:-.04em}
.cover-sm .mark-sub{font-size:4.2px;letter-spacing:.18em}
.cover-sm .cover-title{font-size:16px;margin-top:11px}
.cover-sm .cover-sub{font-size:7.5px;letter-spacing:.1em;margin-top:.6em}
.cover-sm .cover-rule{width:20px;margin:10px 0}
.cover-sm .cover-box{font-size:6.2px;line-height:1.45;padding:6px 5px}
.cover-sm .cover-by{font-size:8.5px;padding-top:9px}

/* ── about ──────────────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:start}
.about-quote blockquote{
  margin:0;font-family:var(--sans);font-weight:500;
  font-size:clamp(32px,4.8vw,62px);letter-spacing:-.06em;line-height:.94;
}
.about-body p{color:var(--fg-2)}
.about-body .sig{font-family:var(--serif);font-style:italic;font-size:1.3em;color:var(--fg);margin-top:1.7em}
/* her photo - hard edges like everything else, no frame, no shadow.
   the figure stays collapsed until the file is actually there */
.about-photo{margin:clamp(28px,3.4vw,44px) 0 0;display:none}
.about-photo.has-img{display:block}
.about-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:56% 40%}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-photo img{aspect-ratio:3/2}}

/* ── the list ───────────────────────────────────────────── */
/* The signup form comes from the mailing system, and its own stylesheet
   loads after ours and outranks it - so its colours, font and width are
   set in the form definition instead of here. The three things that
   definition cannot express (text direction, alignment, square corners)
   are forced inline from script.js. This is our wrapper only. */
.wl-embed{max-width:420px;margin:clamp(24px,3vw,34px) auto 0}
.wl-fallback{font-size:14px;color:var(--fg-2);line-height:1.6}
.wl-fallback a{font-weight:700;color:var(--fg);border-bottom:2px solid var(--fg)}


.wl{text-align:center;max-width:720px}
.wl h2{margin-inline:auto}
.wl-alt{border-top:1px solid var(--rule-c);padding-top:clamp(52px,6vw,84px)}
.wl-form{display:flex;gap:9px;margin:clamp(26px,3vw,38px) auto 0;max-width:500px}
.wl-form input{
  flex:1;min-width:0;font-family:var(--sans);font-size:15px;color:var(--fg);
  background:var(--field);border:1px solid var(--rule-c);border-radius:0;padding:14px 16px;
  transition:border-color .2s var(--ease);
}
.wl-form input::placeholder{color:var(--fg-3)}
.wl-form input:focus{outline:none;border-color:var(--fg)}
.wl-note{margin-top:1.2em;font-size:12.5px;color:var(--fg-3);min-height:1.4em}
.wl-note.ok{color:var(--fg)}
@media (max-width:520px){.wl-form{flex-direction:column}}

/* ── footer ─────────────────────────────────────────────── */
.foot{padding:clamp(44px,5vw,68px) 0 clamp(26px,3vw,38px)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:clamp(28px,3.2vw,40px)}
.foot-links{display:flex;gap:clamp(14px,2.2vw,30px);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);flex-wrap:wrap}
.foot-links a:hover{color:var(--fg)}
.foot-social{display:flex;gap:16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.foot-social a{border-bottom:1px solid var(--rule-c);padding-bottom:2px}
.foot-social a:hover{color:var(--fg)}
.foot-legal{border-top:1px solid var(--rule-c-2);padding-top:clamp(20px,2.4vw,30px)}
.foot-legal p{font-size:11.5px;line-height:1.75;color:var(--fg-3);max-width:80ch}
.foot-legal .cr{margin-top:1em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:10.5px}

/* ═══ BLOG ════════════════════════════════════════════════ */

.post-hero{padding:clamp(56px,7vw,96px) 0 clamp(36px,4.6vw,64px)}
.post-hero .wrap{max-width:900px}
.post-hero h1{font-size:clamp(34px,6vw,76px);max-width:17ch}
.post-meta{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--rule-c);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);
}

.prose{max-width:66ch;margin:0 auto;padding:clamp(48px,6vw,84px) 0 clamp(36px,4vw,56px)}
.prose > p{font-size:1.04em;line-height:1.72;color:var(--fg-2);margin-bottom:1.45em}
.prose > p:first-of-type{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--fg);
}
.prose h2{
  font-size:clamp(26px,3.4vw,44px);letter-spacing:-.05em;line-height:.96;
  margin:clamp(42px,5vw,70px) 0 .6em;color:var(--fg);
}
.prose h3{
  font-size:clamp(18px,1.6vw,21px);font-weight:800;letter-spacing:-.01em;line-height:1.3;
  margin:2.3em 0 .7em;color:var(--fg);
}
.prose strong{font-weight:700;color:var(--fg)}
.prose em{font-style:italic}
.prose ul{margin:0 0 1.6em;padding:0;list-style:none;display:grid;gap:11px}
.prose ul li{color:var(--fg-2);padding-left:24px;position:relative;line-height:1.6}
.prose ul li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:1px;background:var(--taupe)}
.prose blockquote{
  margin:clamp(34px,4vw,52px) 0;padding-left:clamp(18px,2.2vw,30px);
  border-left:2px solid var(--taupe);
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.4vw,30px);line-height:1.3;color:var(--fg);
}
.prose blockquote p{margin:0}
.prose hr{border:0;border-top:1px solid var(--rule-c);margin:clamp(42px,5vw,70px) 0}
.prose .pull-line{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(21px,2.6vw,32px);letter-spacing:-.045em;line-height:1.02;
  color:var(--fg);margin:clamp(34px,4vw,56px) 0;text-align:center;
  padding:clamp(26px,3.2vw,40px) 0;
  border-top:1px solid var(--rule-c);border-bottom:1px solid var(--rule-c);
}

.post-end{
  max-width:66ch;margin:0 auto;
  border:1px solid var(--rule-c);padding:clamp(26px,3.2vw,42px);
}
.post-end h2{font-size:clamp(23px,2.6vw,32px);letter-spacing:-.04em;line-height:1;margin-bottom:.6em}
.post-end p{color:var(--fg-2);margin-bottom:1.5em}

/* the articles, as blocks you pick from, each one a tone from the palette */
.postgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.8vw,24px);
}
.post-card{
  display:flex;flex-direction:column;
  padding:clamp(28px,3.4vw,46px);
  background:var(--powder);color:var(--ink);
  box-shadow:inset 0 0 0 1px transparent;
  transition:box-shadow .25s var(--ease);
}
.post-card:nth-child(3n+2){background:var(--blue)}
.post-card:nth-child(3n+3){background:var(--stone)}
.post-card:hover{box-shadow:inset 0 0 0 1px rgba(52,67,74,.38)}
.post-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.post-card-date{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(52,67,74,.56);margin:0 0 1.6em;
}
.post-card h2{
  font-family:var(--serif);font-weight:400;letter-spacing:normal;line-height:1.1;
  font-size:clamp(26px,2.6vw,36px);margin:0 0 .55em;
}
.post-card p{color:rgba(52,67,74,.8);margin:0;font-size:.97em}
.post-card .more{
  display:inline-block;margin-top:auto;padding-top:1.8em;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--taupe);
}

.postlist-empty{
  margin-top:clamp(20px,2.4vw,32px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--rule-c);
  color:var(--fg-3);font-family:var(--serif);font-style:italic;
}

/* ── reveal on scroll ───────────────────────────────────── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* hero: the quiet line's own emphasis, and room for the longer headline */
.hero h1{max-width:17ch}
.hero-q em{font-style:normal;color:var(--accent)}
/* footer links: a thumb-sized target on phones */
.foot-links a{display:inline-block;padding:10px 0}

/* ── mobile menu ────────────────────────────────────────── */
.nav-toggle{display:none}
@media (max-width:900px){
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-6px -12px -6px -4px;
    background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
  }
  .nav-toggle span,.nav-toggle span::before{
    display:block;width:22px;height:1.5px;background:currentColor;
    transition:transform .25s var(--ease);
  }
  .nav-toggle span{position:relative;transform:translateY(-3.5px)}
  .nav-toggle span::before{content:"";position:absolute;left:0;top:7px}
  .nav.open .nav-toggle span{transform:translateY(0) rotate(45deg)}
  .nav.open .nav-toggle span::before{transform:translateY(-7px) rotate(-90deg)}

  .nav.open{border-bottom-color:var(--rule-c-2)}
  .nav.open .nav-links{
    display:flex;flex-direction:column;gap:0;margin:0;
    position:absolute;left:0;right:0;top:100%;
    background:var(--cream);border-bottom:1px solid var(--rule-c);
    padding:4px var(--gut) 20px;font-size:14px;
  }
  .nav.open .nav-links a{padding:17px 0;border-bottom:1px solid var(--rule-c-2);opacity:1}
  .nav.open .nav-links a:last-child{border-bottom:0}
}

.cover-sub .lc{text-transform:lowercase}