@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400;0,9..144,300,100;1,9..144,300,100&family=Karla:wght@400;500;600&display=swap');
:root{--paper:#f7f5fb;--ink:#2e2740;--ink-soft:#6f6786;--rule:#e6e1f0;--accent:#7b68ad;--accent-soft:#ebe6f7;--gold:#c48ea2;--card:#ffffff;--done:#7a9c8a;--done-soft:#e4efe8;--now:#b77a93;--now-soft:#f6e6ee;--wash:none;--r:22px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#17141f;--ink:#ebe6f3;--ink-soft:#a79fbd;--rule:#2d2838;--accent:#b8a7e8;--accent-soft:#2b2540;--gold:#d9a5ba;--card:#1f1b2a;--done:#a3c6b3;--done-soft:#223029;--now:#d9a5ba;--now-soft:#3a2733;--wash:none;}}
:root[data-theme="dark"]{--paper:#17141f;--ink:#ebe6f3;--ink-soft:#a79fbd;--rule:#2d2838;--accent:#b8a7e8;--accent-soft:#2b2540;--gold:#d9a5ba;--card:#1f1b2a;--done:#a3c6b3;--done-soft:#223029;--now:#d9a5ba;--now-soft:#3a2733;--wash:none;}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:15.5px/1.65 "Karla","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;background:var(--wash),var(--paper);background-repeat:no-repeat}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--ink)}
.page{max-width:880px;margin:0 auto;padding:30px 20px 80px}

nav.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font:14px/1.4 "Karla","Helvetica Neue",Arial,sans-serif;color:var(--ink-soft);margin-bottom:56px}
nav.top .brand{font-family:"Fraunces",Georgia,serif;font-size:22px;font-style:italic;color:var(--ink);letter-spacing:.01em}
nav.top .links a{margin-left:22px;color:var(--ink-soft);padding:6px 0;border-bottom:1.5px solid transparent;transition:all .2s}
nav.top .links a:hover{color:var(--accent);border-bottom-color:var(--accent-soft)}

header,.hero{padding-bottom:30px;margin-bottom:40px;border:none}
.kicker{font:13px/1.4 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;opacity:.9}
h1{font-family:"Fraunces",Georgia,serif;font-weight:400;font-style:italic;font-size:58px;line-height:1.02;margin:0 0 14px;letter-spacing:-.005em;color:var(--ink)}
.sub{color:var(--ink-soft);font-size:17px;margin:0;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:20px}
.meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px;font:13.5px/1.4 "Karla","Helvetica Neue",Arial,sans-serif;color:var(--ink-soft)}
.meta b{color:var(--ink);font-weight:600}
h2{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:30px;margin:0 0 14px;color:var(--ink)}
h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:22px;margin:22px 0 8px}
.section{margin-bottom:52px}
.section.two{display:grid;grid-template-columns:1fr 1fr;gap:36px}
@media (max-width:620px){.section.two{grid-template-columns:1fr}h1{font-size:44px}}
.lede{color:var(--ink-soft);margin:0 0 20px;font-size:16px}
.about{font-size:17px;margin:-8px 0 40px;color:var(--ink)}
.muted{color:var(--ink-soft)}
.small{font-size:13px}
ol.quiet,ul.quiet{margin:0;padding-left:20px;color:var(--ink);font-size:15px}
ol.quiet li,ul.quiet li{margin-bottom:8px}

.pill{display:inline-block;font:11px/1 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.05em;padding:6px 10px;border-radius:999px;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)}

.wave-group{margin-bottom:30px}
.wave-group h3{margin:0 0 6px;font-size:13px;font-family:"Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.12em;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:center;padding:12px 14px;margin:0 -14px;border-radius:12px;border-bottom:1px solid var(--rule);transition:background .2s}
.wave-item:hover{background:var(--card);border-bottom-color:transparent}
.wave-item .t{font-size:17px;font-family:"Fraunces",Georgia,serif;font-weight:500}
.wave-item .when{font:13px/1.4 "Karla","Helvetica Neue",Arial,sans-serif;color:var(--ink-soft);white-space:nowrap}
.wave-item .open{grid-column:1 / -1;margin:0;font-size:13.5px;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}}

.now{background:linear-gradient(135deg,var(--card),var(--now-soft));border:none;padding:26px 28px 20px;border-radius:var(--r);margin-bottom:52px;box-shadow:0 10px 40px -24px rgba(60,30,50,.35)}
.now h2{font-size:26px;margin-bottom:10px}
.now p{margin:0 0 8px}
.now ul{margin:4px 0 10px;padding-left:18px}
.now li{margin-bottom:4px}
.now .ref{font:13px/1.5 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}

.weeks{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:620px){.weeks{grid-template-columns:1fr}}
.week{background:var(--card);border:1px solid var(--rule);padding:22px 24px 18px;border-radius:var(--r);box-shadow:0 8px 30px -24px rgba(60,30,50,.3)}
.week.is-now{border-color:var(--now);background:linear-gradient(160deg,var(--card),var(--now-soft))}
.week.is-past{opacity:.7}
.week .wk{font:12px/1 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.week.is-now .wk{color:var(--now)}
.week h3{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:24px;margin:0 0 14px}
dl{margin:0;display:grid;grid-template-columns:92px 1fr;row-gap:10px;column-gap:12px}
dt{font:12px/1.6 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);padding-top:2px}
dd{margin:0;font-size:15px}
dd .t,.t{color:var(--ink-soft)}
.total{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-soft)}
.before-list{grid-template-columns:116px 1fr}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{font:11.5px/1.4 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);text-align:left;padding:0 10px 10px 0;border-bottom:1px solid var(--rule)}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
tr:last-child td{border-bottom:none}
td.ref{font:13px/1.5 "Karla","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 "Karla","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:13.5px/1.5 "Karla","Helvetica Neue",Arial,sans-serif;color:var(--ink)}
.theme{font-size:14.5px}
.note{display:block;color:var(--ink-soft);font-size:13px;margin-top:3px;font-style:italic}
.pages{color:var(--ink-soft);font-size:13px;white-space:nowrap}
tr.group td{padding-top:24px;border-bottom:1px solid var(--rule);font:12px/1 "Karla","Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;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{background:var(--now-soft)}
table.cal tr.is-next td.date{color:var(--now);font-weight:600}
.aside{margin:18px 0 0;font-size:13.5px;color:var(--ink-soft);font-style:italic}

ul.shelf{list-style:none;margin:0;padding:0}
ul.shelf li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:16px}

.me-track{margin-bottom:36px;background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:18px 22px}
.me-track h2{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:24px}
.me-track h2 .pct{font:12.5px/1 "Karla","Helvetica Neue",Arial,sans-serif;letter-spacing:.08em;color:var(--ink-soft)}
.bar{height:6px;background:var(--rule);border-radius:999px;overflow:hidden;margin:0 0 14px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));width:0;transition:width .4s;border-radius:999px}
.me-week{margin-bottom:12px}
.me-week h3{margin:12px 0 6px;font-size:17px}
.me-week h3 .t{font-size:13px;margin-left:8px;font-family:"Karla","Helvetica Neue",Arial,sans-serif}
.me-item{display:grid;grid-template-columns:22px 56px 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--rule);font-size:14.5px}
.me-item:last-child{border-bottom:none}
.me-item input{margin:0;accent-color:var(--accent);width:16px;height:16px}
.me-item .ref{font:12.5px/1.5 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.me-item .min{font:12.5px/1.5 "Karla","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:linear-gradient(135deg,var(--card),var(--accent-soft));border:none;padding:22px 26px;border-radius:var(--r);margin-bottom:36px}
.me-summary p{margin:0 0 6px}
.milestones{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none}
.milestones li{font:11.5px/1 "Karla","Helvetica Neue",Arial,sans-serif;font-weight:600;letter-spacing:.06em;padding:7px 11px;border:1px solid var(--rule);border-radius:999px;color:var(--ink-soft);background:var(--card)}
.milestones li.hit{border-color:var(--gold);color:var(--gold);background:var(--now-soft)}
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:8px}

footer.foot{margin-top:70px;padding-top:16px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:13px/1.4 "Karla","Helvetica Neue",Arial,sans-serif;color:var(--ink-soft)}

.hero{position:relative;overflow:visible}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(48px);opacity:.75;pointer-events:none}
.hero::before{width:380px;height:300px;left:-120px;top:-120px;background:radial-gradient(circle at 40% 40%,#dcd2f7,#f3c9da 70%,transparent 100%)}
.hero::after{width:320px;height:260px;right:-80px;top:-60px;background:radial-gradient(circle at 50% 50%,#cfe8dc,#e6def7 70%,transparent 100%)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .hero::before{background:radial-gradient(circle at 40% 40%,#3b3160,#4a2a3c 70%,transparent 100%)}
:root:not([data-theme="light"]) .hero::after{background:radial-gradient(circle at 50% 50%,#24413a,#2f2846 70%,transparent 100%)}}

@media print{
  :root{--paper:#fff;--card:#fff;--accent-soft:#f0ecf4;--wash:none}
  nav.top,footer.foot,.now{display:none}
  body{font-size:12.5px;background:#fff}.page{max-width:none;padding:0}
  h1{font-size:36px}.section{margin-bottom:28px}
  .week{break-inside:avoid;box-shadow:none}tr{break-inside:avoid}thead{display:table-header-group}
  .track{break-before:page}
}
.hero::before,.hero::after{opacity:1;filter:blur(36px)}
.hero::before{width:520px;height:380px;left:-160px;top:-150px;background:radial-gradient(circle at 40% 40%,#d9ccf7 0%,#f4c9dc 55%,rgba(244,201,220,0) 100%)}
.hero::after{width:440px;height:340px;right:-120px;top:-40px;background:radial-gradient(circle at 50% 50%,#c9ead9 0%,#e3d8f7 60%,rgba(227,216,247,0) 100%)}
.page{position:relative;z-index:0}
h1{font-weight:300}
.now{background:linear-gradient(135deg,#fff 0%,#f3eefb 60%,#fbe6ef 100%);box-shadow:0 18px 50px -30px rgba(123,104,173,.5)}
nav.top .links a{border-radius:999px;padding:6px 12px;border:none}
nav.top .links a:hover{background:var(--accent-soft)}

/* the path (timeline): dots ride the curve, labels sit in two rows */
.timeline{position:relative;height:330px;margin:24px 0 20px}
.timeline svg{position:absolute;left:0;right:0;top:22%;height:56%;width:100%;overflow:visible}
.timeline ol{list-style:none;margin:0;padding:0}
.tl-node{position:absolute;left:var(--x);top:0;height:100%;width:150px;transform:translateX(-50%)}
.tl-node a{display:block;color:var(--ink);text-align:center;height:100%;position:relative}
.tl-node .dot{position:absolute;left:50%;top:calc(22% + var(--y) * .56);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--card);border:2px solid var(--accent);box-shadow:0 0 0 4px var(--paper);transition:transform .2s}
.tl-node a:hover .dot{transform:scale(1.2)}
.tl-node .lab{position:absolute;left:0;right:0;font:12.5px/1.35 "Karla","Helvetica Neue",Arial,sans-serif}
.tl-node.below .lab{top:82%}
.tl-node.above .lab{bottom:82%}
.tl-node .lab b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:15px;line-height:1.2;margin-bottom:3px}
.tl-node .lab small{display:block;font-size:11.5px;color:var(--ink-soft)}
.tl-node.st-done .dot{background:var(--done);border-color:var(--done)}
.tl-node.st-done .lab b{color:var(--ink-soft);font-weight:400}
.tl-node.st-current .dot,.tl-node.is-now .dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--paper),0 0 0 8px var(--accent-soft),0 0 28px var(--accent)}
.tl-node.st-current .lab b,.tl-node.is-now .lab b{color:var(--accent)}
.tl-node.st-beyond .dot{border-style:dashed;border-color:var(--ink-soft);opacity:.7}
.tl-node.st-beyond .lab{opacity:.7}
@media (max-width:700px){
  .timeline{height:auto;margin:10px 0 30px}
  .timeline svg{display:none}
  .timeline ol{border-left:2px solid var(--rule);margin-left:8px;padding:4px 0}
  .tl-node{position:static;width:auto;height:auto;transform:none}
  .tl-node a{display:flex;align-items:flex-start;text-align:left;gap:14px;padding:9px 0;margin-left:-9px;height:auto}
  .tl-node .dot{position:static;margin:3px 0 0;flex:none}
  .tl-node .lab{position:static}
}
@media (max-width:620px){
  nav.top{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:40px}
  nav.top .links{display:flex;flex-wrap:wrap;gap:4px 16px}
  nav.top .links a{margin-left:0;padding:4px 0}
}
