:root{
  --ground:#FFFFFF; --cream:#FBF7F0; --ink:#0F1115; --rust:#A8350A; --ember:#C25A22;
  --olive:#4F6B2E; --petrol:#1F5A63; --plum:#76365A; --ochre:#96701A; --bronze:#6B4226;
  --stone:#A0978A; --hairline:#D6CABA; --panel:#F3ECDF;
  --font-head: Verdana, "Source Sans 3", system-ui, sans-serif;
  --font-body: Georgia, "Source Serif 4", serif;
  --measure:68ch; --gutter:16px; --radius:0; --max:1180px;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --lift:0 2px 6px rgba(15,17,21,.08);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  overflow-x:hidden;
}
@media(min-width:760px){ body{font-size:19px} }

img,svg{max-width:100%; height:auto; display:block}
a{color:var(--petrol)}
a:focus-visible,button:focus-visible{outline:3px solid var(--rust); outline-offset:2px}

.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter)}
@media(min-width:900px){ .wrap{padding-left:var(--s4); padding-right:var(--s4)} }

.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s2); top:var(--s2); z-index:100; background:var(--rust); color:#fff; padding:var(--s2); font-family:var(--font-head); font-weight:700}

/* ---------- headings ---------- */
h1,h2,h3,h4{font-family:var(--font-head); font-weight:700; letter-spacing:-.01em; line-height:1.15; margin:0}
h2{
  font-size:clamp(24px,3.4vw,34px);
  border-bottom:3px solid var(--rust);
  padding-bottom:.25em; margin-bottom:var(--s3);
}
h3{font-size:clamp(18px,2vw,21px)}
p{margin:0 0 var(--s2)}
.lede{font-size:clamp(19px,2.2vw,23px); line-height:1.5; max-width:34ch}
.measure{max-width:var(--measure)}

.eyebrow{
  font-family:var(--font-head); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--rust);
  margin:0 0 var(--s2);
}

/* ---------- nav ---------- */
.masthead{
  position:sticky; top:0; z-index:50; background:var(--ground);
  border-bottom:2px solid var(--ink);
}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding-top:10px; padding-bottom:10px}
.mark{display:block; text-decoration:none; color:var(--ink); line-height:1}
.mark b{display:block; font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:.06em; color:var(--rust)}
.mark span{display:block; font-family:var(--font-head); font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-top:3px}

.nav ul{display:flex; gap:var(--s3); list-style:none; margin:0; padding:0}
.nav a{
  font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  padding:6px 0; border-bottom:3px solid transparent; display:block;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--rust); border-bottom-color:var(--rust)}

.burger{display:none; background:none; border:2px solid var(--ink); padding:8px 10px; cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
@media(max-width:860px){
  .burger{display:block}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; background:var(--ground); border-bottom:2px solid var(--ink)}
  .nav[data-open="true"]{display:block}
  .nav ul{flex-direction:column; gap:0; padding:var(--s2) var(--gutter)}
  .nav li+li{border-top:1px solid var(--hairline)}
  .nav a{padding:14px 0; border-bottom:none}
  .nav a:hover,.nav a[aria-current="page"]{border-bottom:none}
}

/* ---------- plate ---------- */
.plate{
  position:relative; background:var(--ground); border:2px solid var(--ink);
  padding:var(--s4) var(--s3) var(--s3);
  display:flex; flex-direction:column;
}
.plate > .tab{
  position:absolute; top:-2px; left:-2px;
  background:var(--rust); color:#fff;
  font:700 11px/1 var(--font-head); letter-spacing:.12em; text-transform:uppercase;
  padding:8px 14px;
}
.plate .tab.plum{background:var(--plum)}
.plate h3{margin-bottom:var(--s1)}
.plate .note{color:var(--bronze); font-size:15px; margin:0}
.plate .foot{
  margin-top:auto; padding-top:var(--s2); border-top:1px solid var(--hairline);
  color:var(--bronze); font-family:var(--font-head); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
a.plate{text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease}
a.plate:hover{box-shadow:var(--lift)}
a.plate:hover h3{color:var(--rust)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--rust); color:#fff; text-decoration:none;
  font:700 12px/1 var(--font-head); letter-spacing:.12em; text-transform:uppercase;
  padding:15px 26px; border:2px solid var(--rust); transition:background .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--ember); border-color:var(--ember)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:#fff}

/* ---------- price ---------- */
.price{font-family:var(--font-head); font-weight:700; color:var(--rust); font-size:22px; letter-spacing:-.01em}
.price.big{font-size:30px}

/* ---------- sections & grids ---------- */
section{padding:var(--s5) 0}
@media(min-width:900px){ section{padding:var(--s6) 0} }
.grid{display:grid; gap:var(--s3)}
@media(min-width:680px){
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){ .cols-3{grid-template-columns:repeat(3,1fr)} }
.grid > *{min-width:0}

/* ---------- hero ---------- */
.hero{background:var(--cream); border-bottom:2px solid var(--ink); padding:var(--s5) 0 0}
.hero .wordmark{
  font-family:var(--font-head); font-weight:700; line-height:.94; letter-spacing:-.02em;
  font-size:clamp(46px,11vw,120px); margin:0;
}
.hero .wordmark .the{
  display:block; color:var(--rust);
  background:linear-gradient(90deg,var(--rust),var(--ember));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero .wordmark .wt{display:block; color:var(--ink); font-size:.46em; letter-spacing:.02em; margin-top:.12em}
.hero .promise{font-family:var(--font-body); font-size:clamp(19px,2.3vw,24px); line-height:1.45; max-width:30ch; margin:var(--s3) 0 var(--s4)}
.hero .actions{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4)}
.heroart{border-top:1px solid var(--hairline); padding:var(--s3) 0 var(--s4)}
.heroart figcaption{font-family:var(--font-head); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); margin-top:var(--s2)}

/* ---------- cover stand-in ---------- */
.cover{width:100%; border:1px solid var(--hairline); margin-bottom:var(--s3); background:var(--cream)}
.cover-wrap{background:var(--cream); padding:var(--s2); margin-bottom:var(--s3); border:1px solid var(--hairline)}
.cover-wrap .cover{margin:0; border:none; box-shadow:var(--lift)}

/* ---------- quote ---------- */
.quote{border-left:4px solid var(--rust); padding:var(--s1) 0 var(--s1) var(--s3); max-width:46ch}
.quote p{font-style:italic; font-size:clamp(21px,2.6vw,27px); line-height:1.4; margin:0 0 var(--s2)}
.quote cite{font-style:normal; font-family:var(--font-head); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze)}

/* ---------- table ---------- */
table{width:100%; border-collapse:collapse; font-size:16px}
th,td{text-align:left; padding:12px 14px; border:1px solid var(--hairline)}
thead th{background:var(--ink); color:#fff; font-family:var(--font-head); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
tbody tr:nth-child(odd){background:var(--panel)}
td .price{font-size:17px}

/* ---------- footer ---------- */
.siteend{background:var(--ink); color:var(--stone); padding:var(--s5) 0 var(--s4); font-size:16px}
.siteend h4{color:#fff; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s2)}
.siteend ul{list-style:none; margin:0; padding:0}
.siteend li{margin-bottom:10px}
.siteend a{color:var(--stone); text-decoration:none}
.siteend a:hover{color:#fff; text-decoration:underline}
.siteend .cols{display:grid; gap:var(--s4); grid-template-columns:1fr}
@media(min-width:680px){ .siteend .cols{grid-template-columns:repeat(4,1fr)} }
.risk{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid rgba(214,202,186,.25); font-size:14px; line-height:1.6}
.risk p{margin:0 0 var(--s1)}

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

/* ---------- forms: subscribe & contact ---------- */
.subscribe-band{background:var(--panel); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink)}
.subscribe div{margin-bottom:var(--s2)}
.subscribe label{display:block; font-family:var(--font-head); font-weight:700; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); margin-bottom:6px}
.subscribe input,.subscribe select,.subscribe textarea{
  width:100%; padding:13px 14px; border:2px solid var(--ink); border-radius:0;
  background:var(--ground); color:var(--ink); font-family:var(--font-body); font-size:17px}
.subscribe input:focus,.subscribe select:focus,.subscribe textarea:focus{
  outline:3px solid var(--rust); outline-offset:2px}
.subscribe textarea{resize:vertical}
.subscribe .honey{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{font-size:15px; color:var(--bronze); margin:var(--s2) 0 0; min-height:1.2em}
.formnote.good{color:var(--olive); font-weight:bold}
.formnote.bad{color:var(--rust); font-weight:bold}

/* ---------- contents lists ---------- */
ul.contents,ol.contents{list-style:none; margin:0; padding:0; max-width:var(--measure)}
ul.contents li,ol.contents li{padding:10px 0; border-bottom:1px solid var(--hairline); font-size:16px}
ul.contents li:last-child{border-bottom:none}

/* ---------- FAQ accordion ---------- */
details.faq{border-bottom:1px solid var(--hairline); padding:var(--s2) 0}
details.faq summary{cursor:pointer; font-family:var(--font-head); font-weight:700;
  font-size:17px; color:var(--ink); list-style:none; padding-right:32px; position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; position:absolute; right:4px; top:-2px;
  color:var(--rust); font-size:24px; line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq summary:focus-visible{outline:3px solid var(--rust); outline-offset:3px}
details.faq div{padding-top:var(--s2); max-width:var(--measure)}
details.faq p{margin:0; color:var(--ink)}

/* ---------- book page cover ---------- */
.cover{box-shadow:var(--lift)}

/* ---------- exercise plate (diagram + question + reveal) ---------- */
.plate.exercise{background:var(--ground)}
.plate.exercise .ask{font-family:var(--font-head); font-weight:700; font-size:16px;
  line-height:1.35; color:var(--ink); margin:var(--s2) 0 var(--s2)}
details.reveal{border-top:1px solid var(--hairline); padding-top:var(--s2); margin-top:auto}
details.reveal summary{cursor:pointer; list-style:none; font-family:var(--font-head);
  font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rust); position:relative; padding-right:26px}
details.reveal summary::-webkit-details-marker{display:none}
details.reveal summary::after{content:"+"; position:absolute; right:2px; top:-4px; font-size:20px; line-height:1}
details.reveal[open] summary::after{content:"\2013"}
details.reveal summary:focus-visible{outline:3px solid var(--rust); outline-offset:3px}
details.reveal p{margin:var(--s2) 0 0; font-size:16px; color:var(--ink)}


/* ---------- exercise plate ---------- */
.plate.exercise{background:var(--panel)}
.plate.exercise .tab{background:var(--petrol)}
.plate.exercise .q{font-family:var(--font-head); font-weight:700; font-size:16px;
  line-height:1.35; color:var(--ink); margin:var(--s2) 0}
.plate.exercise details{border-top:1px solid var(--hairline); margin-top:auto; padding-top:var(--s2)}
.plate.exercise summary{cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--petrol); list-style:none}
.plate.exercise summary::-webkit-details-marker{display:none}
.plate.exercise summary:focus-visible{outline:3px solid var(--rust); outline-offset:3px}
.plate.exercise details p{margin:var(--s2) 0 0; font-size:16px}

/* ---------- capstone plate ---------- */
.plate.capstone{border-width:3px}
.plate.capstone .tab{background:var(--plum)}