:root { --ink:#18201e; --muted:#66716c; --paper:#f5f1e8; --soft:#e8e2d5; --accent:#e9603c; --green:#b7c6a0; --card:#fffdf8; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
.wrap { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:28px 0; }
.brand { color:var(--ink); font-size:24px; font-weight:700; letter-spacing:-1.2px; text-decoration:none; }.brand span { color:var(--accent); }
.nav-link { color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }.nav-link span { color:var(--accent); margin-left:5px; }
.hero { min-height:610px; padding:91px 0 70px; position:relative; }
.eyebrow { color:var(--accent); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:1.2px; margin:0 0 19px; text-transform:uppercase; }
h1,h2 { letter-spacing:-.055em; margin:0; } h1 { font-size:clamp(52px,8.8vw,112px); font-weight:600; line-height:.93; } h1 em { font-family:"Playfair Display",serif; font-weight:600; }
.lede { color:var(--muted); font-size:18px; line-height:1.5; margin:33px 0 29px; max-width:392px; }
.cta { align-items:center; background:var(--ink); border-radius:100px; color:white; display:inline-flex; font-size:14px; font-weight:600; gap:22px; padding:15px 19px 15px 23px; text-decoration:none; transition:transform .18s; }.cta:hover { transform:translateY(-2px); }.cta span { color:#dbe5d2; font-size:17px; }
.hero-note { align-items:center; bottom:76px; color:var(--muted); display:flex; font-family:"DM Mono",monospace; font-size:10px; gap:9px; position:absolute; right:0; }.sun { color:var(--accent); font-size:17px; }
.list-section { background:var(--green); padding:82px 0 91px; }.list-wrap { max-width:760px; }.list-heading-row { align-items:end; display:flex; justify-content:space-between; margin-bottom:26px; }.list-heading-row .eyebrow { color:#435143; margin-bottom:11px; }.list-heading-row h2 { font-size:48px; line-height:1; }.date { color:#465646; font-family:"DM Mono",monospace; font-size:11px; margin:0 0 4px; text-transform:uppercase; }
.todo-card { background:var(--card); box-shadow:0 14px 35px rgba(44,57,40,.11); padding:12px 27px 0; }.add-form { border-bottom:1px solid #e9e5db; display:flex; gap:12px; padding:14px 0; }.add-form input { background:transparent; border:0; color:var(--ink); flex:1; font:16px "DM Sans",sans-serif; min-width:0; outline:none; }.add-form input::placeholder { color:#9a9b91; }.add-form button { background:var(--accent); border:0; border-radius:50px; color:white; cursor:pointer; font:600 13px "DM Sans",sans-serif; padding:9px 14px; }.add-form button span { font-size:17px; line-height:0; margin-left:3px; }
.todos { list-style:none; margin:0; padding:0; }.todo { align-items:center; border-bottom:1px solid #ede9df; display:flex; gap:13px; min-height:59px; }.check { appearance:none; background:white; border:1.5px solid #aeb6a8; border-radius:50%; cursor:pointer; height:19px; margin:0; position:relative; width:19px; }.check:checked { background:var(--ink); border-color:var(--ink); }.check:checked::after { color:white; content:"✓"; font-size:12px; left:3px; position:absolute; top:0px; }.todo-text { flex:1; font-size:15px; line-height:1.3; }.completed .todo-text { color:#8e968d; text-decoration:line-through; }.delete { background:none; border:0; color:#a2a59c; cursor:pointer; font-size:19px; opacity:0; padding:6px; transition:opacity .15s; }.todo:hover .delete,.delete:focus { opacity:1; }.empty-state { color:#788175; padding:48px 0 43px; text-align:center; }.empty-state span { color:var(--accent); font-size:21px; }.empty-state p { font-family:"Playfair Display",serif; font-size:17px; line-height:1.5; margin:12px 0 0; }.list-footer { align-items:center; display:flex; justify-content:space-between; padding:16px 0 18px; }.list-footer p,.clear-btn { color:#7c847b; font-family:"DM Mono",monospace; font-size:10px; margin:0; }.clear-btn { background:none; border:0; cursor:pointer; padding:3px 0; text-decoration:underline; text-underline-offset:3px; }.clear-btn:hover { color:var(--ink); }.hidden { display:none; }
.closing { align-items:center; display:flex; gap:23px; padding:91px 0; }.closing .line { background:#d9d3c7; height:1px; flex:1; }.closing p { font-family:"Playfair Display",serif; font-size:23px; font-style:italic; margin:0; white-space:nowrap; }.closing span { color:var(--accent); }
footer { border-top:1px solid #ded8cd; color:#7b8079; font-family:"DM Mono",monospace; font-size:10px; padding:21px 0 27px; }
.sr-only { height:1px; margin:-1px; overflow:hidden; position:absolute; width:1px; clip:rect(0,0,0,0); }
@media (max-width:600px) { .wrap { width:min(100% - 34px, 1120px); }.nav { padding:21px 0; }.hero { min-height:590px; padding-top:78px; }.hero-note { bottom:40px; left:0; right:auto; }.list-section { padding:61px 0 67px; }.list-heading-row h2 { font-size:41px; }.todo-card { padding-left:18px; padding-right:18px; }.closing { gap:13px; padding:60px 0; }.closing p { font-size:19px; }.date { font-size:9px; } }