:root{
  --paper:#f7f3ea; --ink:#23211c; --ink-soft:#5a564d; --rule:#d9d2c3;
  --accent:#4b4a7a; --accent-soft:#e6e4f0; --gold:#9a7b3c; --card:#fffdf8;
  --done:#5c7a5a; --done-soft:#e4ebe2; --now:#9a7b3c; --now-soft:#f1e9d6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1b1a1f; --ink:#ece7dc; --ink-soft:#aaa49a; --rule:#3a3842;
    --accent:#b4b2dc; --accent-soft:#2b2a3c; --gold:#c9a861; --card:#232229;
    --done:#9fbf9a; --done-soft:#26312a; --now:#c9a861; --now-soft:#332d20;
  }
}
:root[data-theme="dark"]{
  --paper:#1b1a1f; --ink:#ece7dc; --ink-soft:#aaa49a; --rule:#3a3842;
  --accent:#b4b2dc; --accent-soft:#2b2a3c; --gold:#c9a861; --card:#232229;
  --done:#9fbf9a; --done-soft:#26312a; --now:#c9a861; --now-soft:#332d20;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:15px/1.5 "Iowan Old Style","Palatino","Charter",Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:var(--accent)}
.page{max-width:860px;margin:0 auto;padding:28px 16px 72px}

nav.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  font:12px/1.4 "Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:40px}
nav.top .brand{color:var(--gold);font-weight:600}
nav.top .links a{margin-left:18px;color:var(--ink-soft)}
nav.top .links a:hover{color:var(--ink);border:none}

header, .hero{border-bottom:1px solid var(--rule);padding-bottom:22px;margin-bottom:34px}
.kicker{font:12px/1.4 "Helvetica Neue",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
h1{font-family:"Baskerville","Iowan Old Style",Georgia,serif;font-weight:400;font-size:44px;line-height:1.05;margin:0 0 12px;letter-spacing:-.01em}
.sub{color:var(--ink-soft);font-size:16px;margin:0;font-style:italic}
.meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;font:12.5px/1.4 "Helvetica Neue",Arial,sans-serif;color:var(--ink-soft)}
.meta b{color:var(--ink);font-weight:600}
h2{font-family:"Baskerville","Iowan Old Style",Georgia,serif;font-weight:400;font-size:24px;margin:0 0 14px}
h3{font-family:"Baskerville","Iowan Old Style",Georgia,serif;font-weight:400;font-size:20px;margin:22px 0 8px}
.section{margin-bottom:42px}
.section.two{display:grid;grid-template-columns:1fr 1fr;gap:32px}
@media (max-width:620px){.section.two{grid-template-columns:1fr}}
.lede{color:var(--ink-soft);margin:0 0 18px}
.about{font-size:16px;margin:-10px 0 36px;color:var(--ink)}
.muted{color:var(--ink-soft)}
.small{font-size:12.5px}
ol.quiet, ul.quiet{margin:0;padding-left:20px;color:var(--ink);font-size:14.5px}
ol.quiet li, ul.quiet li{margin-bottom:6px}

/* pills */
.pill{display:inline-block;font:10px/1 "Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.06em;
  padding:4px 7px;border-radius:9px;background:var(--accent-soft);color:var(--accent);vertical-align:middle}
.pill.st-done{background:var(--done-soft);color:var(--done)}
.pill.st-current{background:var(--now-soft);color:var(--now)}
.pill.st-ahead{background:var(--accent-soft);color:var(--accent)}
.pill.st-beyond,.pill.st-discovery,.pill.st-personal{background:transparent;color:var(--ink-soft);border:1px solid var(--rule)}

/* the wave list */
.wave-group{margin-bottom:26px}
.wave-group h3{margin:0 0 8px;font-size:12px;font-family:"Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
ul.wave{list-style:none;margin:0;padding:0}
.wave-item{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--rule)}
.wave-item .t{font-size:16px}
.wave-item .when{font:12.5px/1.4 "Helvetica Neue",Arial,sans-serif;color:var(--ink-soft);white-space:nowrap}
.wave-item .open{grid-column:1 / -1;margin:0;font-size:13px;color:var(--ink-soft);font-style:italic}
.wave-item.st-done .t{color:var(--ink-soft)}
@media (max-width:520px){.wave-item{grid-template-columns:1fr auto}.wave-item .when{grid-column:1;white-space:normal}}

/* this week */
.now{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:18px 22px 14px;border-radius:3px;margin-bottom:42px}
.now h2{font-size:20px;margin-bottom:8px}
.now p{margin:0 0 8px}
.now ul{margin:4px 0 10px;padding-left:18px}
.now li{margin-bottom:3px}
.now .ref{font:13px/1.5 "Helvetica Neue",Arial,sans-serif;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}

/* weeks */
.weeks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.weeks{grid-template-columns:1fr}}
.week{background:var(--card);border:1px solid var(--rule);border-top:3px solid var(--accent);padding:18px 20px 16px;border-radius:3px}
.week.is-now{border-top-color:var(--gold)}
.week.is-past{opacity:.75}
.week .wk{font:11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 6px}
.week.is-now .wk{color:var(--gold)}
.week h3{font-family:"Baskerville","Iowan Old Style",Georgia,serif;font-weight:400;font-size:22px;margin:0 0 14px}
dl{margin:0;display:grid;grid-template-columns:86px 1fr;row-gap:9px;column-gap:12px}
dt{font:11px/1.6 "Helvetica Neue",Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
dd{margin:0;font-size:14.5px}
dd .t, .t{color:var(--ink-soft)}
.total{margin-top:14px;padding-top:12px;border-top:1px dashed var(--rule);font-size:13px;color:var(--ink-soft)}
.before-list{grid-template-columns:110px 1fr}

/* tables */
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{font:10.5px/1.4 "Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:0 10px 8px 0;border-bottom:1px solid var(--ink)}
td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:none}
td.ref{font:13px/1.5 "Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--accent);font-weight:600;width:56px}
td.type{width:84px;color:var(--ink-soft);font-style:italic;white-space:nowrap}
td.time{font:13px/1.5 "Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;width:58px;color:var(--ink-soft)}
td.wk{width:40px;text-align:center}
td.date{white-space:nowrap;font:13px/1.5 "Helvetica Neue",Arial,sans-serif;color:var(--ink)}
.theme{font-size:14px}
.note{display:block;color:var(--ink-soft);font-size:12.5px;margin-top:3px;font-style:italic}
.pages{color:var(--ink-soft);font-size:12.5px;white-space:nowrap}
tr.group td{padding-top:22px;border-bottom:1px solid var(--ink);font:11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600}
tr.group:first-child td{padding-top:10px}
tr.is-done td.theme, tr.is-done td.ref{color:var(--done)}
table.cal tr.is-past td{color:var(--ink-soft)}
table.cal tr.is-next td.date{color:var(--gold);font-weight:600}
.aside{margin:18px 0 0;font-size:13px;color:var(--ink-soft);font-style:italic}

/* library */
ul.shelf{list-style:none;margin:0;padding:0}
ul.shelf li{padding:9px 0;border-bottom:1px solid var(--rule);font-size:15.5px}

/* my progress */
.me-track{margin-bottom:34px}
.me-track h2{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.me-track h2 .pct{font:12px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.1em;color:var(--ink-soft)}
.bar{height:4px;background:var(--rule);border-radius:2px;overflow:hidden;margin:0 0 14px}
.bar i{display:block;height:100%;background:var(--gold);width:0;transition:width .4s}
.me-week{margin-bottom:12px}
.me-week h3{margin:12px 0 6px;font-size:16px}
.me-week h3 .t{font-size:13px;margin-left:8px}
.me-item{display:grid;grid-template-columns:22px 56px 1fr auto;gap:8px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--rule);font-size:14px}
.me-item:last-child{border-bottom:none}
.me-item input{margin:0;accent-color:var(--gold)}
.me-item .ref{font:12.5px/1.5 "Helvetica Neue",Arial,sans-serif;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.me-item .min{font:12px/1.5 "Helvetica Neue",Arial,sans-serif;color:var(--ink-soft);white-space:nowrap}
.me-item.done .theme{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--rule)}
.me-item.together{opacity:.85}
.me-summary{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--gold);padding:16px 20px;border-radius:3px;margin-bottom:34px}
.me-summary p{margin:0 0 6px}
.milestones{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0;padding:0;list-style:none}
.milestones li{font:11px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border:1px solid var(--rule);border-radius:9px;color:var(--ink-soft)}
.milestones li.hit{border-color:var(--gold);color:var(--gold)}
details.me-track summary{cursor:pointer;list-style:none}
details.me-track summary::-webkit-details-marker{display:none}
details.me-track summary h2{margin-bottom:6px}

footer.foot{margin-top:60px;padding-top:14px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font:11.5px/1.4 "Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

@media print{
  :root{--paper:#fff;--card:#fff;--accent-soft:#ececf4}
  nav.top, footer.foot, .now{display:none}
  body{font-size:12.5px}.page{max-width:none;padding:0}
  h1{font-size:36px}.section{margin-bottom:28px}
  .week{break-inside:avoid}tr{break-inside:avoid}thead{display:table-header-group}
  .track{break-before:page}
}