:root { --ink:#17302b; --muted:#61706b; --cream:#fbf8f0; --paper:#fffdf8; --orange:#ee7a38; --yellow:#f6be4a; --line:#d9dfd5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; }
.wrap { width:min(1120px,calc(100% - 48px)); margin:auto; }
.nav { height:94px; display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--ink); font-size:22px; font-weight:700; letter-spacing:-1.2px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.brand span { width:14px; height:14px; background:var(--orange); display:inline-block; border-radius:50% 50% 50% 2px; transform:rotate(-45deg); }
.nav-link { color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.nav-link span { color:var(--orange); margin-left:4px; }
.hero { min-height:600px; display:grid; grid-template-columns:1.12fr .88fr; align-items:center; position:relative; overflow:hidden; }
.hero-copy { padding:65px 0 110px; z-index:1; }
.eyebrow { font:500 11px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; color:#789078; margin:0 0 22px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; }
h1 { font-size:clamp(58px,7.3vw,96px); line-height:.91; font-weight:600; margin-bottom:28px; }
h1 em { font-family:"Instrument Serif",serif; font-weight:400; letter-spacing:-.06em; }
.lede { color:var(--muted); max-width:395px; font-size:17px; line-height:1.55; margin-bottom:32px; }
.button { background:var(--ink); color:white; text-decoration:none; display:inline-flex; align-items:center; gap:34px; padding:15px 18px 15px 20px; font-weight:600; font-size:14px; transition:transform .2s,background .2s; }
.button:hover { transform:translateY(-3px); background:#285146; }.button span { color:var(--yellow); font-size:18px; }
.sun { width:320px; height:320px; position:relative; margin-left:auto; margin-right:58px; animation:float 5s ease-in-out infinite; }
.sun-core { position:absolute; width:178px; height:178px; background:var(--yellow); border-radius:50%; left:71px; top:71px; box-shadow:0 0 0 18px rgba(246,190,74,.12); }
.ray { position:absolute; width:11px; height:52px; background:var(--orange); border-radius:9px; left:154px; transform-origin:5px 160px; }.r1{transform:rotate(0)}.r2{transform:rotate(45deg)}.r3{transform:rotate(90deg)}.r4{transform:rotate(135deg)}.r5{transform:rotate(180deg)}.r6{transform:rotate(225deg)}.r7{transform:rotate(270deg)}.r8{transform:rotate(315deg)}
@keyframes float { 50% { transform:translateY(-13px) rotate(2deg); } }
.today-wrap { padding:2px 24px 115px; }.card { width:min(780px,100%); margin:auto; background:var(--paper); box-shadow:0 17px 48px rgba(44,68,57,.12); border:1px solid rgba(23,48,43,.06); }
.today { padding:40px 46px 25px; }.todo-heading { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:1px solid var(--line); padding-bottom:23px; }.todo-heading .eyebrow { margin-bottom:9px; }.todo-heading h2 { font-size:34px; margin:0; }.date { font:500 11px "DM Mono",monospace; color:#789078; text-align:right; padding-top:5px; line-height:1.55; }
.add-task { margin:24px 0 13px; display:flex; border-bottom:1px solid var(--ink); }.add-task input { min-width:0; flex:1; border:0; outline:0; background:transparent; padding:9px 0 12px; color:var(--ink); font:16px "DM Sans",sans-serif; }.add-task input::placeholder { color:#a2aba2; }.add-task button { border:0; background:none; color:var(--orange); font:400 30px "DM Sans"; line-height:24px; padding:0 3px 10px 18px; cursor:pointer; }
.tasks { list-style:none; padding:0; margin:0; }.task { display:flex; align-items:center; min-height:48px; border-bottom:1px solid #e8ece5; }.task label { display:flex; align-items:center; gap:12px; flex:1; cursor:pointer; font-size:15px; }.task input { position:absolute; opacity:0; }.checkmark { height:19px; width:19px; border:1.5px solid #a7b2a8; color:white; display:grid; place-items:center; font-size:12px; transition:.18s; }.task input:checked + .checkmark { background:var(--orange); border-color:var(--orange); }.task input:checked ~ .task-text { text-decoration:line-through; color:#98a39a; }.delete-task { border:0; background:transparent; color:#9aa59d; font-size:21px; padding:4px 0 4px 16px; opacity:0; cursor:pointer; transition:.15s; }.task:hover .delete-task,.delete-task:focus { opacity:1; }.task-footer { display:flex; align-items:center; justify-content:space-between; padding-top:18px; color:#819087; font:500 11px "DM Mono",monospace; }.clear-completed { background:none; border:0; font:inherit; color:var(--orange); cursor:pointer; padding:0; }
.principles { padding-bottom:118px; }.principles>.eyebrow { margin-bottom:37px; }.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; }.principle-grid article { border-top:1px solid var(--ink); padding-top:16px; }.principle-grid span { color:var(--orange); font:500 11px "DM Mono",monospace; }.principle-grid h3 { font-size:32px; line-height:.97; margin:23px 0 15px; }.principle-grid p { color:var(--muted); max-width:250px; font-size:14px; line-height:1.55; }
footer { border-top:1px solid var(--line); height:112px; display:flex; align-items:center; justify-content:space-between; } footer p { color:#819087; font:500 11px "DM Mono",monospace; margin:0; }.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:700px) { .wrap{width:min(100% - 36px,1120px)}.nav{height:72px}.hero{grid-template-columns:1fr;min-height:620px}.hero-copy{padding:70px 0 20px}.sun{width:230px;height:230px;margin:0 auto 45px}.sun-core{width:128px;height:128px;left:51px;top:51px}.ray{left:110px;transform-origin:5px 115px;height:38px}.today-wrap{padding:0 18px 84px}.today{padding:30px 25px 22px}.date{display:none}.principles{padding-bottom:75px}.principle-grid{grid-template-columns:1fr;gap:31px}.principle-grid h3{margin:17px 0 10px}footer{height:85px}h1{font-size:62px} }