@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap");

:root {
  --cb-warm-white: #f9f7f4;
  --cb-near-black: #0d0d0d;
  --cb-warm-mid-gray: #6b6560;
  --cb-warm-light: #d8d2c8;
  --cb-terracotta: #a73e26;
  --fg-muted: var(--cb-warm-mid-gray);
  --hairline: 0.5px solid var(--cb-warm-light);
  --font-display: "Freight Display Pro", "Fraunces", "Freight Big Pro", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { font-size: 16px; }
body { margin: 0; background: var(--cb-warm-white); color: var(--cb-near-black); font-family: var(--font-body); font-size: 1rem; line-height: 1.8; font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--cb-near-black); margin: 0; }
p { margin: 0; }
.page { max-width: 960px; margin: 0 auto; padding: 48px 56px 96px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:var(--hairline); }
.mark { display:flex; align-items:center; gap:10px; font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; }
.mark img { width:22px; height:22px; border-radius:3px; display:block; }
.meta { font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-muted); }
.cover { margin-top:64px; }
.eyebrow-stack { font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.28em; text-transform:uppercase; color:var(--fg-muted); }
.eyebrow-stack .sep { margin:0 14px; color:var(--cb-warm-light); }
h1.cover-title { font-size:clamp(2.6rem, 6vw, 4rem); line-height:1.05; letter-spacing:-0.02em; font-weight:500; margin-top:28px; max-width:18ch; }
.cover-lede { font-size:1.125rem; line-height:1.75; font-weight:300; color:var(--cb-near-black); margin-top:28px; max-width:58ch; }
.cover-lede em { font-style:normal; color:var(--cb-terracotta); }
.cover-foot { margin-top:40px; padding-top:24px; border-top:var(--hairline); display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.cover-foot .label { font-family:var(--font-body); font-size:10.5px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--fg-muted); }
.cover-foot p { font-size:0.9375rem; line-height:1.7; font-weight:300; margin-top:8px; max-width:40ch; }
.section { margin-top:80px; }
.section-head { margin-bottom:40px; }
.section-head h2 { font-size:2rem; line-height:1.15; letter-spacing:-0.01em; font-weight:500; max-width:22ch; }
.cb-lede { font-size:1.0625rem; line-height:1.7; font-weight:300; margin-top:16px; max-width:58ch; color:var(--fg-muted); }
.cb-eyebrow { font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-muted); }
.progress { display:flex; align-items:center; gap:20px; margin-top:24px; padding:18px 22px; border:var(--hairline); border-radius:2px; background:var(--cb-warm-white); }
.progress-label { font-size:11px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-muted); flex-shrink:0; }
.progress-bar { flex:1; height:2px; background:var(--cb-warm-light); position:relative; overflow:hidden; border-radius:1px; }
.progress-bar > span { position:absolute; inset:0 auto 0 0; background:var(--cb-near-black); width:0%; transition:width 360ms var(--ease-out); }
.progress-count { font-family:var(--font-display); font-size:1.375rem; font-weight:500; letter-spacing:-0.01em; min-width:64px; text-align:right; }
.progress-count .total { color:var(--fg-muted); font-size:0.95rem; }
.months { border-top:var(--hairline); }
.month { display:grid; grid-template-columns:180px 1fr; gap:48px; padding:36px 0 32px; border-bottom:var(--hairline); position:relative; }
.month-marker { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.month-stage { font-family:var(--font-body); font-size:10.5px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-muted); }
.month-name { font-family:var(--font-display); font-size:1.875rem; font-weight:500; letter-spacing:-0.01em; line-height:1.05; color:var(--cb-near-black); }
.month-num { font-family:var(--font-body); font-size:10.5px; font-weight:500; letter-spacing:0.2em; color:var(--fg-muted); margin-top:4px; }
.month-body { padding-top:2px; }
.month-tasks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; }
.task { display:grid; grid-template-columns:28px 1fr; gap:18px; align-items:start; cursor:pointer; user-select:none; padding:2px 0; }
.task input { position:absolute; opacity:0; pointer-events:none; }
.task .box { width:18px; height:18px; margin-top:4px; border:1px solid var(--cb-near-black); border-radius:1px; background:transparent; position:relative; transition:background 160ms var(--ease-out), border-color 160ms var(--ease-out); flex-shrink:0; }
.task .box::after { content:""; position:absolute; left:4px; top:0; width:6px; height:11px; border-right:1.5px solid var(--cb-warm-white); border-bottom:1.5px solid var(--cb-warm-white); transform:rotate(45deg) scale(0); transform-origin:center; transition:transform 160ms var(--ease-out); }
.task.checked .box { background:var(--cb-near-black); }
.task.checked .box::after { transform:rotate(45deg) scale(1); }
.task .copy { font-size:1rem; line-height:1.6; font-weight:300; color:var(--cb-near-black); }
.task .copy .hint { display:block; margin-top:6px; font-size:0.8125rem; line-height:1.55; color:var(--fg-muted); font-weight:400; }
.task.checked .copy { color:var(--fg-muted); text-decoration:line-through; text-decoration-thickness:0.5px; text-decoration-color:var(--cb-warm-light); }
.critical { margin-top:64px; border:0.5px solid var(--cb-terracotta); padding:32px 36px; border-radius:2px; background:var(--cb-warm-white); display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; }
.critical .marker { font-family:var(--font-display); font-size:2.5rem; font-weight:500; line-height:1; color:var(--cb-terracotta); letter-spacing:-0.02em; }
.critical .kicker { font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--cb-terracotta); }
.critical h3 { font-family:var(--font-display); font-size:1.5rem; line-height:1.2; font-weight:500; letter-spacing:-0.005em; margin-top:10px; max-width:30ch; }
.critical p { margin-top:12px; font-size:1rem; line-height:1.7; font-weight:300; max-width:60ch; }
.thesis { margin:96px -56px 0; padding:80px 56px; background:var(--cb-near-black); color:var(--cb-warm-white); }
.thesis .eyebrow-stack { color:#9a948e; }
.thesis blockquote { margin:24px 0 0; max-width:28ch; font-family:var(--font-display); font-size:clamp(1.75rem, 3.2vw, 2.5rem); line-height:1.2; font-weight:500; letter-spacing:-0.01em; color:var(--cb-warm-white); }
.thesis blockquote em { font-style:normal; color:#e07a5f; }
.thesis .attr { margin-top:28px; font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:#9a948e; }
.footer { margin-top:80px; padding-top:28px; border-top:var(--hairline); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer .brand { font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--fg-muted); }
.footer .next { display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; padding:14px 20px; background:var(--cb-near-black); color:var(--cb-warm-white); border:none; border-radius:2px; transition:opacity 120ms; cursor:pointer; }
.footer .next:hover { opacity:0.88; }
.footer .next .arr { width:14px; height:1px; background:currentColor; position:relative; display:inline-block; }
.footer .next .arr::after { content:""; position:absolute; right:-1px; top:-3px; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }
.reset-row { margin-top:10px; display:flex; justify-content:flex-end; }
.reset-btn { background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:10.5px; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-muted); padding:6px 2px; }
.reset-btn:hover { color:var(--cb-near-black); }

@media (max-width: 720px) {
  .page { padding:32px 24px 72px; }
  .month { grid-template-columns:1fr; gap:16px; padding:28px 0 22px; }
  .thesis { margin:72px -24px 0; padding:64px 24px; }
}

@media (max-width: 640px) {
  .cover-foot { grid-template-columns:1fr; gap:24px; }
  .critical { grid-template-columns:1fr; }
}

@media print {
  body { background:white; }
  .page { padding:0; max-width:none; }
  .thesis { margin:48px 0 0; padding:48px; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .footer .next, .reset-row { display:none; }
  .month, .critical, .progress { break-inside:avoid; }
}