/* Start With One. Colors and fonts are the get.waypointos.com tokens; the
   signal yellow comes from the book cover and is used on navy only. */
:root{
  --navy:#0C1A2B; --navy-deep:#081320; --navy-panel:#12283F;
  --brass:#C9A15C; --brass-bright:#E0BE7E; --brass-ink:#7A5B1C;
  --paper:#F6F3EC; --paper-warm:#EDE7DB; --ink:#1A1F26; --ink-soft:#4A5561;
  --rule-dark:rgba(26,31,38,.14); --signal:#F2B33D;
  --done:#1F6E4A; --warn-bg:#FBF1DC;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased;}
h1,h2{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.015em;line-height:1.12;margin:0;}
a{color:inherit;}
button{font:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
h1:focus{outline:none;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-9999px;top:8px;background:var(--brass);color:var(--navy-deep);padding:8px 14px;z-index:10;}
.skip:focus{left:12px;}

/* masthead */
.masthead{background:var(--navy);color:var(--paper);}
.masthead-inner{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.mark img{display:block;height:30px;width:auto;}
.masthead-link{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(246,243,236,.7);text-decoration:none;}
.masthead-link:hover{color:var(--brass-bright);}

/* layout: quiet side bar on desktop, a compact bar on phone and tablet */
.layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:270px minmax(0,1fr);gap:56px;padding:0 24px;}
.side{padding:40px 0;position:sticky;top:0;align-self:start;max-height:100vh;overflow:auto;}
.side-title{font-family:'Fraunces',serif;font-weight:600;font-size:20px;margin:0 0 14px;}
.view{padding:48px 0 72px;min-width:0;}
.view:focus{outline:none;}
.mbar,.menu{display:none;}
body.on-cover .side,body.on-cover .mbar{display:none;}
body.on-cover .layout{grid-template-columns:minmax(0,1fr);}

/* chapters */
.chapters{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--rule-dark);}
.chapters > li{border-bottom:1px solid var(--rule-dark);}
.ch-link{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;text-decoration:none;font-size:15px;color:var(--ink-soft);}
.ch-link:hover{color:var(--ink);}
.ch-here > .ch-link{color:var(--ink);font-weight:600;}
.ch-link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--brass);padding-left:12px;}
.ch-meta{flex:none;font-size:12.5px;color:var(--ink-soft);font-weight:500;}
.ch-done{color:var(--done);font-weight:600;}
.steps{list-style:none;margin:0 0 10px;padding:0 0 0 12px;}
.steps a{display:block;padding:5px 8px;font-size:14px;text-decoration:none;color:var(--ink-soft);}
.steps a[aria-current="page"]{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--brass);}

/* progress */
.prog-row{display:flex;align-items:center;gap:10px;}
.prog-line{margin:0;font-weight:600;font-size:15px;}
.prog-sub{margin:2px 0 8px;font-size:13.5px;color:var(--ink-soft);}
.dots{display:flex;gap:6px;margin:8px 0 4px;}
.dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--brass);background:transparent;}
.dot-part{background:linear-gradient(90deg,var(--brass) 50%,transparent 50%);}
.dot-on{background:var(--brass);}
.prog-compact .dots{margin:0;gap:4px;}
.prog-compact .dot{width:10px;height:10px;}
.prog-compact .prog-line{font-size:13.5px;font-weight:500;}

/* the "i" */
.info-btn{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--brass);background:transparent;color:var(--brass-ink);font:600 12px/20px Georgia,serif;font-style:italic;cursor:pointer;padding:0;}
.info-btn[aria-expanded="true"]{background:var(--brass);color:var(--navy-deep);}
.info-box{margin:10px 0 4px;background:#fff;border:1px solid var(--rule-dark);border-left:3px solid var(--brass);padding:12px 14px;font-size:14.5px;line-height:1.55;color:var(--ink-soft);}
.info-box p{margin:0 0 8px;}
.info-hide{background:none;border:0;padding:0;color:var(--ink);font-weight:600;font-size:13.5px;text-decoration:underline;cursor:pointer;}

/* reading */
.sec{max-width:660px;}
.eyebrow{margin:0 0 10px;font:500 12px/1.4 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);}
.sec h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:28px;}
.sec p{margin:0 0 18px;}
.say{font-family:'Fraunces',Georgia,serif;font-size:21px;font-style:italic;color:var(--ink);padding-left:18px;border-left:2px solid var(--brass);}
.key{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600;line-height:1.3;}
.note{background:#fff;border:1px solid var(--rule-dark);border-left:4px solid var(--brass);padding:16px 18px;margin:26px 0;}
.note p{margin:0;font-size:16.5px;}
.warn{background:var(--warn-bg);border:1px solid rgba(201,161,92,.5);padding:12px 14px;font-size:15.5px;}
.sofar{background:#fff;border:1px solid var(--rule-dark);padding:14px 16px;margin:0 0 26px;}

/* exercise */
.ex{margin-top:34px;background:#fff;border:1px solid var(--rule-dark);border-top:3px solid var(--navy);padding:24px 24px 18px;}
.sec-exercise .sec-only-ex{margin-top:0;}
.ex-title{font-size:22px;margin-bottom:6px;}
.ex-help{font-size:15.5px;color:var(--ink-soft);margin:0 0 14px !important;}
.checkset{border:0;margin:0;padding:0;}
.checks{list-style:none;margin:0;padding:0;}
.checks li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--rule-dark);}
.checks li:last-child{border-bottom:0;}
.checks input,.stop input{flex:none;width:22px;height:22px;margin:3px 0 0;accent-color:var(--navy);cursor:pointer;}
.checks label{cursor:pointer;font-size:17px;}
.ex-count{font-size:14px;color:var(--ink-soft);margin:8px 0 14px !important;}
.notes{border-top:1px solid var(--rule-dark);padding-top:12px;}
.notes > summary,.more > summary,.about-save > summary{cursor:pointer;font-weight:600;font-size:15.5px;padding:6px 0;}
.notes-body{padding:8px 0 4px;}
.field{margin:0 0 14px;}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:5px;}
.field input,.field textarea{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid rgba(26,31,38,.25);border-radius:3px;background:#fff;color:var(--ink);min-height:44px;}
.field textarea{resize:vertical;line-height:1.5;}
.hint{font-size:13px;color:var(--ink-soft);margin:5px 0 0 !important;}
.more{margin:4px 0 12px;}
.stop{display:flex;gap:12px;align-items:flex-start;margin:6px 0 12px;}
.stop label{font-size:15.5px;cursor:pointer;}
.save{margin-top:12px;border-top:1px solid var(--rule-dark);padding-top:10px;}
.save-line{font-size:13.5px;color:var(--ink-soft);margin:0 0 4px !important;}
.save-off{color:#A8341F;font-weight:600;}
.about-save p{font-size:14.5px;color:var(--ink-soft);margin:6px 0 10px !important;}

/* summary */
.records{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:22px 0;}
.rec{background:#fff;border:1px solid var(--rule-dark);padding:16px 18px;}
.rec-title{font-size:20px;overflow-wrap:anywhere;}
.rec-num{font-size:13px;color:var(--ink-soft);margin:2px 0 0 !important;}
.rec dl{margin:12px 0 14px;}
.rec-row{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px;padding:4px 0;font-size:15px;}
.rec dt{color:var(--ink-soft);}
.rec dd{margin:0;overflow-wrap:anywhere;}
.rec-empty{color:var(--ink-soft);font-style:italic;}
.rec-done{color:var(--done);font-weight:600;}
.rec-foot{font-size:14.5px;color:var(--ink-soft);}
.closing{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:600;margin-top:28px !important;}

/* buttons */
.pager{display:flex;justify-content:space-between;align-items:stretch;gap:12px;margin-top:42px;padding-top:22px;border-top:1px solid var(--rule-dark);}
.btn-solid,.btn-line,.btn-signal,.btn-quiet{cursor:pointer;border-radius:2px;font-weight:600;font-size:16px;min-height:46px;padding:11px 22px;}
.btn-solid{background:var(--navy);color:var(--paper);border:1px solid var(--navy);}
.btn-solid:hover{background:var(--navy-panel);}
.btn-next{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;text-align:right;min-width:0;max-width:72%;}
.next-main{font-size:16px;}
.next-sub{font-size:12.5px;font-weight:500;opacity:.78;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.stop-rule{margin:4px 0 14px;padding:12px 14px;background:var(--paper);border-left:3px solid var(--brass);}
.stop-rule p{font-size:15px;margin:0 0 8px !important;}
.stop-rule .stop{margin:0;}
.notes-why{margin:0 0 12px !important;}
.btn-line{background:transparent;color:var(--ink);border:1px solid rgba(26,31,38,.3);}
.btn-line:hover{border-color:var(--brass);}
.btn-quiet{background:transparent;border:1px solid var(--rule-dark);color:var(--ink);font-size:14.5px;min-height:40px;padding:8px 14px;}
.btn-signal{background:var(--signal);color:var(--navy-deep);border:1px solid var(--signal);}

/* cover: after the book cover draft */
.cover{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:56px;align-items:center;padding:24px 0 16px;}
.cover-card{background:var(--navy);color:var(--paper);padding:30px 30px 34px;border-top:2px solid var(--signal);border-bottom:2px solid var(--signal);box-shadow:0 22px 50px rgba(8,19,32,.28);aspect-ratio:2/3;display:flex;flex-direction:column;}
.cover-art{width:62%;margin:6px auto 0;display:block;}
.cover-art .ring{fill:none;stroke:rgba(246,243,236,.14);stroke-width:1;}
.cover-art .pin{fill:var(--signal);}
.cover-art .pin-hole{fill:var(--navy);}
.cover-kicker{margin:auto 0 8px;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.3em;text-transform:uppercase;color:var(--signal);}
.cover-title{font-family:'Archivo',system-ui,sans-serif;font-weight:900;letter-spacing:-.01em;line-height:.95;text-transform:uppercase;}
.cover-the{display:block;font-weight:500;font-size:30px;margin-bottom:6px;}
.cover-big{display:block;font-size:clamp(40px,5.6vw,58px);}
.cover-signal{color:var(--signal);}
.cover-book{margin:18px 0 0;padding-top:14px;border-top:2px solid var(--signal);width:max-content;font:500 13px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;}
.cover-author{margin:8px 0 0;font-weight:800;font-size:14px;letter-spacing:.18em;text-transform:uppercase;}
.cover-lede{font-family:'Fraunces',Georgia,serif;font-size:clamp(24px,2.6vw,32px);line-height:1.25;margin:0 0 24px;max-width:22ch;}
.cover-actions{display:flex;flex-wrap:wrap;gap:12px;}
.cover-actions .btn-signal{background:var(--navy);color:var(--paper);border-color:var(--navy);}
.cover-progress{margin:0 0 22px;font-size:15.5px;color:var(--ink-soft);max-width:46ch;}
.endnote{font-size:13.5px;color:var(--ink-soft);margin-top:-4px !important;}
.cover-fine{margin:16px 0 0;font-size:14.5px;color:var(--ink-soft);}

.foot{background:var(--navy-deep);color:rgba(246,243,236,.62);font-size:14px;padding:26px 24px;text-align:center;}
.foot p{margin:4px 0;}
.foot a{color:var(--brass-bright);}
.noscript{padding:24px;}

/* phone and tablet */
@media (max-width:1023px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0;padding:0 20px;}
  .side{display:none;}
  .mbar{display:flex;align-items:center;gap:12px;padding:6px 20px;background:#fff;border-bottom:1px solid var(--rule-dark);}
  .mbar-btn{min-height:36px;padding:4px 12px;border:1px solid rgba(26,31,38,.3);background:transparent;color:var(--ink);border-radius:2px;font-weight:600;font-size:14px;cursor:pointer;}
  .mbar-prog{flex:1 1 auto;min-width:0;}
  .mbar-prog .prog-row{justify-content:flex-end;gap:8px;}
  .mbar-prog .prog-line{font-size:13px;white-space:nowrap;}
  .mbar-prog .info-box{position:absolute;left:12px;right:12px;z-index:5;box-shadow:0 10px 24px rgba(8,19,32,.18);}
  .mbar{position:relative;}
  .menu:not([hidden]){display:block;background:#fff;border-bottom:1px solid var(--rule-dark);padding:14px 20px 18px;}
  .menu .btn-line{margin-top:12px;}
  .view{padding:28px 0 56px;}
  .cover{grid-template-columns:minmax(0,1fr);gap:28px;}
  .cover-card{max-width:360px;width:100%;margin:0 auto;}
  .cover-side{text-align:left;}
}
@media (max-width:520px){
  body{font-size:16.5px;line-height:1.6;}
  .masthead-inner{padding:10px 20px;}
  .mark img{height:24px;}
  .view{padding:22px 0 44px;}
  .sec h1{font-size:28px;margin-bottom:20px;}
  .sec p{margin-bottom:14px;}
  .eyebrow{font-size:11px;margin-bottom:8px;}
  .say{font-size:19px;}
  .key{font-size:21px;}
  .checks label{font-size:16px;}
  .cover{padding:4px 0 8px;gap:20px;}
  .cover-card{max-width:220px;min-height:0 !important;aspect-ratio:2/3;padding:16px 18px 18px;}
  .cover-art{width:58%;}
  .cover-the{font-size:17px;margin-bottom:3px;}
  .cover-big{font-size:32px;}
  .cover-kicker{font-size:9.5px;margin-bottom:6px;}
  .cover-book{font-size:9.5px;margin-top:10px;padding-top:8px;}
  .cover-author{font-size:10.5px;margin-top:6px;}
  .cover-lede{font-size:21px;margin-bottom:14px;}
  .cover-progress{font-size:14.5px;margin-bottom:16px;}
  .pager{margin-top:30px;padding-top:16px;}
  .masthead-link{display:none;}
  .ex{padding:18px 16px 14px;margin-left:-4px;margin-right:-4px;}
  .pager .btn-line{flex:0 0 auto;padding:10px 16px;}
  .pager .btn-next{flex:1 1 auto;max-width:none;padding:8px 16px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important;}}
/* backup, restore, offline */
.about-h{font-weight:700;color:var(--ink) !important;margin-top:14px !important;}
.save-actions{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px;}
.backup-msg{font-size:14px;color:var(--ink);margin:0 0 4px !important;}
.backup-msg:empty{display:none;}
.offline-link{font-weight:600;}
.print-all{display:none;}

/* print: the whole guide with the reader's checks and notes */
@page{margin:0.75in;}
@media print{
  .masthead,.mbar,.menu,.side,.pager,.foot,.skip,.layout{display:none !important;}
  body{background:#fff;color:#000;font-size:11.5pt;line-height:1.5;}
  .print-all{display:block !important;}
  .pr-kicker{font:600 9pt/1.2 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;margin:0;}
  .pr-title{font-size:26pt;margin:6pt 0 2pt;}
  .pr-by{margin:0 0 6pt;}
  .pr-note{font-size:9.5pt;color:#444;margin:4pt 0 12pt;}
  .pr-sec{break-before:page;}
  .pr-sec:first-of-type{break-before:auto;}
  .pr-sec h2{font-size:17pt;margin:0 0 10pt;}
  .pr-sec p{margin:0 0 7pt;orphans:3;widows:3;}
  .pr-sec .say{font-size:12.5pt;}
  .pr-sec .key{font-size:13.5pt;}
  .pr-sec .note{border:1px solid #999;border-left:3pt solid #999;padding:6pt 8pt;margin:8pt 0;}
  .pr-ex{border:1px solid #999;padding:8pt 10pt;margin-top:10pt;break-inside:avoid;}
  .pr-ex h3{font-size:12.5pt;margin:0 0 6pt;}
  .pr-check{display:flex;gap:6pt;align-items:baseline;}
  .pr-box{display:inline-block;flex:none;width:11pt;height:11pt;border:1px solid #000;text-align:center;line-height:10pt;font-size:10pt;}
  .pr-field{white-space:pre-wrap;overflow-wrap:anywhere;}
  .pr-rec{font-size:10.5pt;overflow-wrap:anywhere;}
  .pr-closing{font-weight:700;margin-top:10pt;}
}