:root { --ink:#1A1A1A; --blue:#27497E; --setup-bg:#F1F5FA; --note-bg:#F8F5EC;
  --gold:#9C7C3C; --line:#E3E3DE; --muted:#8A8F96;
  --serif:"Source Serif 4", Georgia, serif;
  --sans:system-ui, -apple-system, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#fff; font-family:var(--sans); }
a { color:var(--blue); }
header.site { display:flex; justify-content:space-between; align-items:center;
  padding:.9em 1.2em; border-bottom:1px solid var(--line); }
.wordmark { font-family:var(--serif); font-weight:700; font-size:1.1rem;
  color:var(--ink); text-decoration:none; }
header.site nav a { margin-left:1.2em; text-decoration:none; font-size:.9rem; }
footer.site { border-top:1px solid var(--line); margin-top:3em;
  padding:1.2em; color:var(--muted); font-size:.85rem; }
main { max-width:46em; margin:0 auto; padding:1.5em 1.2em; }
.button { display:inline-block; background:var(--blue); color:#fff;
  padding:.55em 1em; border:none; border-radius:5px; text-decoration:none;
  font-size:.92rem; cursor:pointer; }
.button.ghost { background:#fff; color:var(--blue); border:1px solid var(--blue); }
.narrow { max-width:28em; }
input[type=email], input[type=text] { padding:.5em .6em; border:1px solid var(--line);
  border-radius:5px; font-size:.95rem; min-width:16em; }
.notice { background:var(--setup-bg); padding:.6em .8em; border-radius:5px;
  font-size:.9rem; }
.muted { color:var(--muted); }
/* landing */
.hero h1 { font-family:var(--serif); font-size:1.7rem; max-width:18em; }
.hero .sub { color:var(--muted); max-width:34em; }
.layers { display:grid; grid-template-columns:repeat(auto-fit, minmax(13em,1fr));
  gap:1.2em; margin:2.2em 0; }
.layers h2 { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); }
.layers p { font-size:.92rem; line-height:1.5; }
.math { border-top:1px solid var(--line); padding-top:1.4em; max-width:38em; }
.math h2 { font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold, #9C7C3C); }
.math ul { padding-left:1.2em; } .math li { margin:.4em 0; line-height:1.55; }
.math-close { border-left:3px solid var(--blue); padding-left:.9em; }
.crumbs .crumb-tools { float:right; display:inline-flex; gap:.5em;
  align-items:center; }
.crumbs .step { text-decoration:none; padding:.05em .5em;
  border:1px solid var(--line); border-radius:4px; }
/* library */
.page-title { font-family:var(--serif); }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(11em,1fr));
  gap:1.2em; }
.cover { display:block; text-decoration:none; color:var(--ink); }
.cover .panel { background:var(--accent, var(--blue)); color:#fff;
  border-radius:6px; aspect-ratio:2/3; padding:1em; display:flex;
  flex-direction:column; justify-content:flex-end; }
.cover .c-title { font-family:var(--serif); font-size:1.05rem; line-height:1.25; }
.cover .c-author { font-size:.78rem; opacity:.85; margin-top:.35em; }
.cover .badge { display:inline-block; margin-top:.5em; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.cover .badge.live { color:var(--blue); }
.cover.coming { opacity:.6; cursor:default; }
/* title page */
.title-page h1 { font-family:var(--serif); margin-bottom:.1em; }
.author { color:var(--muted); margin-top:0; }
.pitch { font-family:var(--serif); font-size:1.05rem; line-height:1.6; }
.chapter-list { list-style:none; padding:0; }
.chapter-list li { padding:.45em 0; border-bottom:1px solid var(--line); }
.chapter-list .levels { color:var(--muted); font-size:.78rem; margin-left:.6em; }
.book-facts { color:var(--muted); font-size:.92rem; border-left:3px solid var(--gold);
  padding-left:.8em; }
.book-facts strong { color:var(--ink); }
.toc-group h3 { font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); margin:1.1em 0 .3em; }
.toc-row { line-height:2; }
.toc-row a { margin-right:.7em; text-decoration:none; padding:.1em .45em;
  border:1px solid var(--line); border-radius:4px; }
.toc-row .muted { margin-right:.7em; }
.toc-label { color:var(--gold); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.06em; margin-right:.6em; }
.free-opening { border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:6px; padding:.4em 1.1em 1em; margin:1.4em 0; }
.paywall { border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:6px; padding:.4em 1.1em 1em; }
.drawer-group { font-size:.75rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); margin:.9em 0 .2em; }
.drawer-lock { margin-top:.5em; }
.preview { border-top:1px solid var(--line); margin-top:1.6em; padding-top:1em; }
.preview-text { position:relative; max-height:14em; overflow:hidden; }
.preview-text p { font-family:var(--serif); font-size:1.05rem; line-height:1.65; }
.preview-text .fade { position:absolute; inset:auto 0 0 0; height:7em;
  background:linear-gradient(transparent, #fff); }
.lock { color:var(--muted); }
/* reader */
.reader-chrome .crumbs { font-size:.9rem; }
.drawer-toggle { float:right; font-size:.8rem; background:#fff;
  border:1px solid var(--line); border-radius:5px; padding:.3em .7em; cursor:pointer; }
.drawer { border:1px solid var(--line); border-radius:6px; padding:.8em 1em;
  margin:.6em 0; }
.drawer ul { list-style:none; margin:0; padding:0; }
.drawer li { padding:.25em 0; }
.dot { margin-right:.4em; }
.dot.all { color:var(--blue); } .dot.some { color:var(--gold); }
.dot.none { color:var(--line); }
.dial-row { margin:.8em 0 1em; }
.dial { display:inline-flex; border:1px solid var(--line); border-radius:6px;
  overflow:hidden; }
.dial a { padding:.4em .9em; font-size:.85rem; text-decoration:none;
  color:var(--ink); border-right:1px solid var(--line); }
.dial a:last-child { border-right:none; }
.dial a.active { background:var(--blue); color:#fff; }
.dial a.off { color:var(--muted); }
.explainer { font-size:.78rem; color:var(--muted); margin:.4em 0 0; }
.ladder-link { font-size:.85rem; }
.content-frame { width:100%; border:1px solid var(--line); border-radius:6px;
  min-height:70vh; }
.pager { display:flex; justify-content:space-between; margin:1em 0;
  font-size:.9rem; }
.in-production { color:var(--muted); font-style:italic; padding:3em 0; }
.feedback { border-top:1px solid var(--line); margin-top:1.5em; padding-top:1em; }
.feedback h2 { font-size:1rem; }
.feedback label { margin-right:1em; font-size:.92rem; }
.feedback input[type=text] { display:block; margin:.7em 0; width:100%; }

/* --- landing (§5.4, structure per the locked `landing page copy.html`) ----- */
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.col{max-width:38rem}
.eyebrow{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 1.25rem}
main > section{padding:5.25rem 0;border-top:1px solid var(--line)}
main > section:first-of-type{border-top:0}
.hero{padding-top:3.25rem;padding-bottom:4rem}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1.08;margin:0}
.hero .lede{font-size:1.1875rem;color:#3A3A3A;margin-top:1.5rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:2.25rem}
.fineprint{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin:.9rem 0 0}

.specimen{margin-top:3rem;background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 1px 0 rgba(26,26,26,.03),0 14px 40px -28px rgba(26,26,26,.35)}
.specimen-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:.72rem}
.specimen-src{font-family:var(--serif);font-size:1.0625rem}
.specimen-src span{color:var(--muted)}
.switch{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.switch button{font:inherit;font-size:.72rem;letter-spacing:.05em;padding:.36rem .8rem;
  background:#fff;color:var(--muted);border:0;cursor:pointer}
.switch button+button{border-left:1px solid var(--line)}
.switch button[aria-pressed="true"]{background:var(--blue);color:#fff}
.switch button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.specimen .page{padding:1.9rem 1.6rem 2.1rem}
.is-hidden{display:none}

.hook h2{font-size:clamp(1.75rem,4.2vw,2.6rem);line-height:1.12;max-width:20ch}
.failure+.failure{margin-top:3.25rem;padding-top:3.25rem;border-top:1px solid var(--line)}
.failure .col{margin-top:1.35rem}
.turn{margin-top:3.25rem;padding-top:3.25rem;border-top:1px solid var(--line)}
.turn p{font-size:1.1875rem}

.layers{display:grid;gap:2.75rem;margin-top:2.75rem}
@media(min-width:820px){.layers{grid-template-columns:1fr 1fr;gap:3rem 3.25rem}}
.layer h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;margin:0 0 .45rem}
.layer p{font-size:.98rem;color:#3A3A3A;margin-bottom:1rem}

.scenarios{display:grid;gap:2.75rem;margin-top:2.5rem}
@media(min-width:820px){.scenarios{grid-template-columns:1fr 1fr;gap:3.25rem}}
.scenario-label{font-family:var(--sans);font-size:.82rem;font-weight:600;margin:0}
.sums{margin:1rem 0 0;border-top:1px solid var(--line)}
.sum{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.8rem 0;border-bottom:1px solid var(--line)}
.sum dt{font-size:1rem;color:#3A3A3A}
.sum dd{margin:0;font-family:var(--sans);font-size:.95rem;font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.sum-total dt{color:var(--ink);font-weight:600}
.sum-out dd{color:var(--blue)}
.scenario-note{font-size:.95rem;color:var(--muted);margin:1rem 0 0}
.verdict{margin-top:2.5rem;font-size:1.1875rem}
.assumptions{font-family:var(--sans);font-size:.78rem;color:var(--muted);line-height:1.55}

.shelf{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
@media(min-width:640px){.shelf{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.shelf{grid-template-columns:1fr 1fr 1fr}}
.book{background:#fff;padding:1.1rem 1.15rem;display:flex;justify-content:space-between;
  gap:1rem;align-items:baseline;text-decoration:none;color:inherit}
.book:hover{background:var(--setup-bg)}
.book .t{font-size:1rem;line-height:1.3}
.book .a{display:block;font-size:.85rem;color:var(--muted)}
.book .p{font-family:var(--sans);font-size:.85rem;font-weight:600;white-space:nowrap;color:var(--blue)}
.close h2{max-width:20ch}

/* Specimen panels and glosses: the reader serves published HTML in an iframe
   with its own <style>, so these live only on the landing.  Values mirror §2
   so the specimen looks exactly like the page it is a specimen of. */
.specimen .page p.txt{margin:0 0 .95rem;font-size:1.0625rem;line-height:1.65}
.specimen .page p.txt:last-child{margin-bottom:0}
.specimen .g{color:var(--blue);font-size:85%}
.specimen aside{padding:.95rem 1.05rem;border-radius:4px;margin:0 0 1.35rem}
.specimen aside.setup{background:var(--setup-bg)}
.specimen aside.note{background:var(--note-bg);font-style:italic;margin:1.35rem 0 0}
.specimen aside p{margin:0;font-size:.98rem}
.specimen .tag{font-family:var(--sans);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 .5rem;font-style:normal}
.specimen aside.setup .tag{color:var(--blue)}
.specimen aside.note .tag{color:var(--gold)}

/* Landing typography, scoped: the app's base face is sans (the reading surface
   opts into serif per §2).  The landing is prose, so it opts in too -- without
   touching library, reader or checkout. */
.landing{font-family:var(--serif);font-size:1.0625rem;line-height:1.65}
.landing h1,.landing h2{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}
.landing h2{font-size:clamp(1.55rem,3.4vw,2.25rem);line-height:1.15;margin:0 0 1rem}
.landing p{margin:0 0 1.1rem}
.landing .eyebrow,.landing .layer h3,.landing .scenario-label,
.landing .sum dd,.landing .assumptions,.landing .fineprint,
.landing .specimen-bar,.landing .book .p{font-family:var(--sans)}
/* keep the view switch from being squeezed out by a long chapter title */
.specimen-bar{flex-wrap:wrap}
.specimen-src{min-width:0;flex:1 1 12rem}
.switch{flex:0 0 auto}

/* --- admin: support desk (§5.1) ------------------------------------------- */
.admin{max-width:66rem;margin:0 auto;padding:2rem 1.5rem 4rem;font-family:var(--sans)}
.admin h1{font-family:var(--serif);font-size:1.6rem;margin:0}
.admin h2{font-family:var(--serif);font-size:1.2rem;margin:0 0 .3rem}
.admin h3{font-family:var(--serif);font-size:1.1rem;margin:0 0 .2rem}
.admin h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);margin:1.4rem 0 .4rem}
.a-head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:1rem;border-bottom:1px solid var(--line)}
.a-block{padding:1.9rem 0;border-bottom:1px solid var(--line)}
.a-note{font-size:.85rem;color:var(--muted);margin:.2rem 0 .9rem}
.a-notice{background:var(--setup-bg);color:var(--blue);padding:.7rem .9rem;
  font-size:.88rem;margin:1rem 0 0;border-left:2px solid var(--blue)}
.a-warn{background:var(--note-bg);color:var(--gold);padding:.7rem .9rem;
  font-size:.88rem;border-left:2px solid var(--gold);margin:.9rem 0 0}
.a-error{color:#8C3A2E;font-size:.9rem}

.a-search{display:flex;gap:.6rem;margin:.9rem 0 1.2rem;flex-wrap:wrap}
.a-search input{flex:1 1 18rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:2px;font:inherit;font-size:.95rem}
.a-card{border:1px solid var(--line);border-radius:3px;padding:1.2rem 1.3rem;background:#fff}
.a-meta{font-size:.85rem;color:var(--muted);margin:.15rem 0 1rem}
.a-actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;
  padding-bottom:.4rem}
.a-actions form{display:flex;gap:.45rem;align-items:center}
.a-actions select{padding:.5rem .55rem;border:1px solid var(--line);border-radius:2px;
  font:inherit;font-size:.88rem;max-width:14rem}
.button.ghost{background:#fff;color:var(--blue)}

.a-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.7rem}
.a-table th{text-align:left;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);font-weight:600;
  padding:.45rem .7rem .45rem 0;border-bottom:1px solid var(--line)}
.a-table td{padding:.5rem .7rem .5rem 0;border-bottom:1px solid var(--line);
  vertical-align:middle}
.a-right{text-align:right;padding-right:0!important}
.a-num{font-variant-numeric:tabular-nums;color:var(--muted)}
.a-list{margin:.4rem 0 0;padding-left:1.1rem;font-size:.88rem}
.a-list li{padding:.15rem 0}

.a-stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin:.9rem 0 .4rem}
@media(min-width:620px){.a-stats{grid-template-columns:repeat(6,1fr)}}
.a-stats div{background:#fff;padding:.75rem .8rem}
.a-stats .n{display:block;font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums}
.a-stats .l{font-size:.68rem;color:var(--muted);letter-spacing:.03em}

.pill{display:inline-block;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.16rem .45rem;border-radius:2px;font-weight:600}
.pill.live{background:#EDF3EE;color:#3F6B4F}
.pill.used{background:#F1F1EE;color:var(--muted)}
.pill.warn{background:var(--note-bg);color:var(--gold)}
.a-link{background:none;border:0;font:inherit;font-size:.85rem;color:var(--blue);
  cursor:pointer;padding:0;text-decoration:underline}
.a-link.danger{color:#8C3A2E}

.admin-gate{max-width:22rem;padding-top:5rem}
.admin-gate form{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.admin-gate label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.admin-gate input{padding:.6rem .7rem;border:1px solid var(--line);border-radius:2px;font:inherit}

/* --- signed-in header ------------------------------------------------------ */
header.site nav{display:flex;align-items:center;gap:1rem}
.whoami{font-size:.8rem;color:var(--muted);max-width:14rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
form.signout{display:inline;margin:0}
form.signout button{background:none;border:0;font:inherit;font-size:.85rem;
  color:var(--blue);cursor:pointer;padding:0;text-decoration:underline}

/* --- library: yours first -------------------------------------------------- */
.lib-note{margin:-.4rem 0 1.4rem}
.cover .c-tag{display:block;margin-top:.45rem;font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.cover .c-tag.price{color:var(--blue)}
.cover .c-tag.continue{color:var(--gold);font-weight:600}
.cover.owned{position:relative}
.cover.owned::after{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--accent, var(--blue))}

/* --- my books -------------------------------------------------------------- */
.shelf-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:2.5rem}
.shelf-row{background:#fff;padding:1.05rem 1.15rem;display:flex;gap:1.25rem;
  align-items:center;justify-content:space-between;flex-wrap:wrap;
  border-left:3px solid var(--accent, var(--line))}
.sr-main{flex:1 1 18rem;min-width:0}
.sr-title{font-family:var(--serif);font-size:1.05rem;text-decoration:none;color:var(--ink)}
.sr-title:hover{text-decoration:underline}
.sr-author{display:block;font-size:.85rem;color:var(--muted);margin-top:.1rem}
.sr-bar{height:4px;background:var(--line);border-radius:2px;margin:.6rem 0 .35rem;
  max-width:22rem;overflow:hidden}
.sr-bar span{display:block;height:100%;background:var(--accent, var(--blue))}
.sr-meta{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.sr-action{flex:0 0 auto}
.page-title.receipts{font-size:1.1rem;margin-top:2rem}
.receipts-table{max-width:34rem}

/* header must not wrap: it is one line of chrome, not content */
header.site .wordmark{white-space:nowrap}
header.site nav a,header.site nav button{white-space:nowrap}
header.site nav{flex-wrap:wrap;row-gap:.3rem}
@media(max-width:560px){.whoami{display:none}}   /* keep the actions, drop the address */

/* the cover tag sits ON the accent colour, so it needs light ink, not grey */
.cover .c-tag{color:rgba(255,255,255,.72)}
.cover .c-tag.continue{color:#fff;font-weight:600}
.cover .c-tag.price{color:rgba(255,255,255,.85)}

/* sign-in code entry: big and obvious, it is the only thing on the page */
.code-form input[name="code"]{font-size:1.4rem;letter-spacing:.35em;
  font-variant-numeric:tabular-nums;width:9.5ch;text-align:center;
  padding:.45rem .3rem;border:1px solid var(--line);border-radius:2px}
.code-form{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}

.policy p{max-width:38rem}
footer.site .legal{font-size:.78rem;color:var(--muted);padding:1rem 0}
footer.site .legal a{color:var(--muted)}