/* lofi.today — page-a-day desk calendar. Written fresh for this site. */
@font-face{font-family:Bebas;src:url(/fonts/bebas.woff2) format("woff2");font-display:swap}
@font-face{font-family:Inc;src:url(/fonts/inclusive.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Sono;src:url(/fonts/sono.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{--bg:#EFE7D6;--paper:#FFFDF7;--ink:#1B1A17;--mute:#5D574B;--line:#D9CFBA;--day:#D2462F;--r:6px;color-scheme:light}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 Inc,system-ui,sans-serif;padding-bottom:92px;
 background-image:radial-gradient(rgba(27,26,23,.05) 1px,transparent 1.2px);background-size:22px 22px}
a{color:inherit}img{display:block;max-width:100%}button{font:inherit;color:inherit}
.w{max-width:1160px;margin:0 auto;padding:0 24px}.nar{max-width:720px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--day);outline-offset:3px}
.kicker{font:500 13px/1 Sono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.h1{font:400 clamp(56px,9vw,120px)/.88 Bebas,Impact,sans-serif;margin:0;letter-spacing:.01em}.h1 span{color:var(--day)}
.h2{font:400 clamp(38px,5vw,60px)/.95 Bebas,Impact,sans-serif;margin:0;letter-spacing:.01em}
.lede{font-size:19px;max-width:620px;color:var(--mute);margin:14px 0 0}
/* header */
.hd{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1160px;margin:0 auto;padding:18px 24px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 32px/1 Bebas,sans-serif;letter-spacing:.02em}.mark i{font-style:normal;color:var(--day)}.lg{width:34px;height:34px}
.hd-n{display:flex;gap:4px;font:500 13px/1 Sono,monospace;text-transform:uppercase;letter-spacing:.1em}
.hd-n a{text-decoration:none;padding:10px 12px;border-bottom:3px solid transparent}.hd-n a:hover{border-color:var(--line)}.hd-n a[aria-current]{border-color:var(--day)}
/* buttons: squared, ink-stamped */
.btn{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:var(--r);font:600 15px/1.1 Inc,sans-serif;text-decoration:none;cursor:pointer;box-shadow:3px 3px 0 var(--day);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--day)}.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--day)}
.btn.ln{background:transparent;color:var(--ink);box-shadow:none}.btn.ln:hover{background:var(--paper)}.btn.big{padding:14px 22px;font-size:17px}
.btn.sq{width:46px;height:46px;justify-content:center;padding:0;font-size:20px}.btn[disabled]{opacity:.35;cursor:default}
.btn.now{background:var(--day);border-color:var(--day)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
/* today */
.today{padding:22px 0 64px}.today-g{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:56px;align-items:start}
.sheet-wrap{position:relative;padding-top:14px}
.stack i{position:absolute;inset:14px 0 0 0;background:var(--paper);border:1px solid var(--line);border-radius:4px}.stack i:first-child{transform:rotate(-3deg) translate(-6px,8px)}.stack i:last-child{transform:rotate(2deg) translate(6px,4px)}
.sheet{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px -22px rgba(27,26,23,.45);text-align:center;padding:0 0 30px;
 clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),97% 100%,93% calc(100% - 7px),88% 100%,83% calc(100% - 9px),78% 100%,72% calc(100% - 6px),66% 100%,60% calc(100% - 9px),54% 100%,48% calc(100% - 7px),42% 100%,36% calc(100% - 9px),30% 100%,24% calc(100% - 6px),18% 100%,12% calc(100% - 9px),6% 100%,0 calc(100% - 8px))}
.sheet:before{content:"";display:block;height:22px;background:var(--ink);border-radius:4px 4px 0 0;background-image:radial-gradient(circle at 25% 50%,var(--bg) 4px,transparent 5px),radial-gradient(circle at 75% 50%,var(--bg) 4px,transparent 5px)}
.sh-band{display:flex;justify-content:space-between;margin:0;background:var(--day);color:#fff;padding:12px 20px;font:600 14px/1 Sono,monospace;letter-spacing:.12em;text-transform:uppercase;transition:background .4s}
.sh-h{margin:0;font-weight:400}.sh-d{display:block;font:400 clamp(170px,22vw,250px)/.86 Bebas,Impact,sans-serif;margin-top:22px;letter-spacing:-.01em}
.sh-my{display:block;font:500 15px/1 Sono,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--day);margin-top:6px}
.sh-note{margin:22px 26px 0;color:var(--mute);font-size:15px}.sh-note a{color:var(--day);font-weight:600}
.sh-cd{margin:16px 0 0;font:500 13px/1 Sono,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}.sh-cd b{display:block;font:400 40px/1 Bebas,sans-serif;color:var(--ink);letter-spacing:.06em;margin-top:6px;font-variant-numeric:tabular-nums}
.sh-streak{margin:14px 24px 0;font-size:14px;color:var(--mute)}
.totd{padding-top:30px}.td-card{display:grid;grid-template-columns:240px 1fr;grid-template-areas:"c b" "c x" "c r" ". r";grid-template-rows:auto auto 1fr;column-gap:28px;align-items:start}.td-c{grid-area:c}.td-b{grid-area:b}.td-x{grid-area:x;margin-top:22px}.td-cr{grid-area:r}
.td-c{width:240px;height:240px;border-radius:4px;box-shadow:6px 6px 0 var(--ink)}
.td-t{font:400 clamp(48px,6vw,84px)/.9 Bebas,Impact,sans-serif;margin:0;letter-spacing:.01em}
.td-a{margin:10px 0 0;color:var(--mute)}.td-a b{color:var(--ink)}
.td-cr{margin:22px 0 0;font:400 13px/1.5 Sono,monospace;color:var(--mute);background:rgba(255,253,247,.7);border:1px dashed transparent;padding:10px 12px;border-left:4px solid var(--day)}
.cp{border:0;background:none;padding:0 0 0 6px;font:600 13px Sono,monospace;color:var(--ink);text-decoration:underline;cursor:pointer}.cp.ok{color:var(--day)}
/* mix */
.mix{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0}
.mix-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:26px}#mix-name{color:var(--day)}
.mix-side{text-align:right}.mix-m{margin:0 0 12px;font:500 13px/1 Sono,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.mix-f{color:var(--mute);font-size:14px;margin:18px 0 0}
.rs{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.r{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;border-bottom:1px solid var(--line);padding:8px 4px}
.r-n{font:400 26px/1 Bebas,sans-serif;color:var(--mute);width:32px}
.r-p{display:flex;align-items:center;gap:14px;border:0;background:none;text-align:left;cursor:pointer;padding:0;min-width:0}
.r-p img{width:44px;height:44px;border-radius:3px}.r-t{min-width:0}.r-t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.r-t span{font-size:14px;color:var(--mute)}
.r-d{font:400 14px Sono,monospace;color:var(--mute)}.r-dl{font:600 12px/1 Sono,monospace;text-decoration:none;border:1.5px solid var(--ink);padding:6px 8px;border-radius:4px}.r-dl:hover{background:var(--ink);color:var(--paper)}
.r:hover{background:rgba(239,231,214,.5)}.r.on{background:color-mix(in srgb,var(--day) 12%,transparent)}.r.on .r-n{color:var(--day)}.r.on .r-t b{color:var(--day)}
.rs:not(:has(.r-n)) .r{grid-template-columns:1fr auto auto}
/* week */
.week{padding:64px 0}.wk-h{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}.more{font:600 14px Sono,monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.wk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.ws button{width:100%;display:flex;flex-direction:column;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:0 8px 14px;cursor:pointer;text-align:center;transition:transform .15s;height:100%}
.ws button:hover{transform:translateY(-4px) rotate(-1deg)}
.ws-top{align-self:stretch;margin:0 -8px;background:var(--c);color:#fff;font:600 11px/1 Sono,monospace;letter-spacing:.12em;text-transform:uppercase;padding:8px 4px;border-radius:3px 3px 0 0}
.ws-d{font:400 60px/.9 Bebas,sans-serif;margin-top:10px}.ws-m{font:500 11px Sono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.ws img{width:48px;height:48px;border-radius:3px;margin:10px 0 8px}.ws-t{font-size:13px;line-height:1.25;font-weight:600}
.ws-now button{border:2px solid var(--ink);box-shadow:4px 4px 0 var(--c)}.ws.on button{background:color-mix(in srgb,var(--c) 14%,var(--paper))}
/* rules */
.rules{padding:0 0 72px}.rules-g{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;border-top:2px solid var(--ink);padding-top:28px}
.ok{list-style:none;margin:0;padding:0}.ok li{padding:12px 0;border-bottom:1px solid var(--line)}.ok b{font-family:Sono,monospace;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-right:6px;color:var(--day)}
.ok a{font-weight:600}
/* inner pages */
.ph{padding:40px 0 34px}.nf{padding:80px 0}
.cal{padding:0 0 70px}.cal-h{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.cal-w,.cal-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-w li{font:600 12px Sono,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);padding:6px 4px}
.cd{min-height:132px}.cd>button,.cd-f{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--c,var(--line));border-radius:4px;padding:8px;cursor:pointer;text-align:left}
.cd>button:hover{border-color:var(--ink);border-top-color:var(--c)}.cd-x{visibility:hidden}
.cd-n{font:400 28px/1 Bebas,sans-serif}.cd img{width:40px;height:40px;border-radius:3px}.cd-t{font-size:12.5px;line-height:1.25;font-weight:600}
.cd-f{background:transparent;border-style:dashed;cursor:default;color:var(--mute)}.cd-q{font:400 40px/1 Bebas,sans-serif;opacity:.5;margin:auto}
.cd-now>button{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--c)}.cd.on>button{background:color-mix(in srgb,var(--c) 14%,var(--paper))}
.lib{padding:0 0 60px}.al{margin:0 0 48px}.al-h{display:flex;gap:22px;align-items:center;margin-bottom:16px}.al-h img{width:120px;height:120px;border-radius:4px;box-shadow:4px 4px 0 var(--ink)}
.al-h h2{font:400 40px/.95 Bebas,sans-serif;margin:0}.al-h p{margin:4px 0 10px;color:var(--mute);font:500 13px Sono,monospace;letter-spacing:.08em;text-transform:uppercase}.al-h .btn{padding:7px 12px;font-size:14px}
.prose{padding:0 0 70px}.prose h2{font:400 40px/1 Bebas,sans-serif;margin:40px 0 10px}.prose p{margin:0 0 14px}
.faq{margin:0}.faq div{border-top:1px solid var(--line);padding:16px 0}.faq dt{font-weight:700}.faq dd{margin:6px 0 0;color:var(--mute)}
/* footer */
.ft{background:var(--ink);color:#E9E2D2;padding:60px 0 40px}.ft a{color:#fff}
.ft-big{font:400 clamp(56px,8vw,110px)/.9 Bebas,sans-serif;margin:0 0 36px}.ft-big span{color:var(--day)}
.ft-g{display:grid;grid-template-columns:1fr 1fr 2fr;gap:32px}.ft h2{font:600 12px Sono,monospace;letter-spacing:.14em;text-transform:uppercase;color:#A39C8C;margin:0 0 10px}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:6px 0}.ft-bio p{margin:0;max-width:440px}
.fine{margin:36px 0 0;font-size:13.5px;color:#B5AE9E;border-top:1px solid #3A372F;padding-top:20px}
/* player */
.pb{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:2px solid var(--ink);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.pb-seek{position:absolute;left:0;right:0;top:-9px;width:100%;height:16px;margin:0;opacity:0;cursor:pointer;z-index:2}
.pb-pr{position:absolute;left:0;right:0;top:-2px;height:4px;background:transparent}.pb-pr i{display:block;height:100%;background:var(--day);transform-origin:0 50%;transform:scaleX(0)}
.pb-in{max-width:1160px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px;min-height:72px}
.pb-c{width:44px;height:44px;border-radius:3px}.pb-t{margin:0;min-width:0;flex:1}.pb-t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pb-t span{font-size:13px;color:var(--mute)}
.pb-ctl{display:flex;align-items:center;gap:6px}
.pb-b{width:38px;height:38px;border:0;background:none;cursor:pointer;display:grid;place-items:center;border-radius:50%}.pb-b:hover{background:var(--bg)}.pb-b svg{width:18px;height:18px;fill:var(--ink);stroke:var(--ink);stroke-width:2}
.pb-pp{width:50px;height:50px;border-radius:50%;border:0;background:var(--day);cursor:pointer;display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}.pb-pp svg{width:18px;height:18px;fill:#fff}
.pb-tm{font:400 13px Sono,monospace;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}.pb-sl{margin:0 4px}
.pb-dl{font:600 12px/1 Sono,monospace;text-decoration:none;border:1.5px solid var(--ink);padding:7px 9px;border-radius:4px}
.toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:4px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:60}.toast.show{opacity:1;transform:translate(-50%,0)}
/* responsive */
@media (max-width:900px){.today-g{grid-template-columns:1fr;gap:28px}.sheet-wrap{max-width:420px;margin:0 auto;width:100%}.totd{padding-top:0}
 .wk{grid-template-columns:repeat(7,128px);overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}.ws{scroll-snap-align:start}
 .rules-g{grid-template-columns:1fr;gap:16px}.ft-g{grid-template-columns:1fr 1fr}.ft-bio{grid-column:1/-1}}
@media (max-width:640px){body{font-size:16px}.w{padding:0 16px}.hd{padding:12px 16px;flex-wrap:wrap}.hd-n{width:100%;justify-content:space-between}.hd-n a{padding:8px 4px}
 .td-card{grid-template-columns:112px 1fr;grid-template-areas:"c b" "x x" "r r";column-gap:18px}.td-c{width:112px;height:112px;box-shadow:4px 4px 0 var(--ink)}.td-t{font-size:46px}.td-x{margin-top:18px}.td-x .btn{flex:1 1 auto;justify-content:center}
 .today{padding:6px 0 48px}.sheet-wrap{padding-top:8px}.sh-d{font-size:132px;margin-top:14px}.sh-note{display:none}.sh-cd{margin-top:10px}.sh-cd b{font-size:32px}.sheet{padding-bottom:22px}.sh-streak{margin-top:8px}.sh-band{padding:10px 16px;font-size:12px}
 .mix-side{text-align:left}.r{gap:10px}.r-d{display:none}.r-n{width:24px;font-size:22px}
 .cal-g,.cal-w{gap:4px}.cd{min-height:78px}.cd img,.cd-t{display:none}.cd>button,.cd-f{padding:5px}.cd-n{font-size:22px}.cd-q{font-size:24px}
 .pb-in{padding:8px 12px;gap:10px}.pb-tm,.pb-dl,.pb-b[data-pc="prev"]{display:none}.pb-pp{width:44px;height:44px}
 .al-h img{width:84px;height:84px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.td-bio{margin:34px 0 0;max-width:560px;font-size:15px;color:var(--mute);border-top:1px solid var(--line);padding-top:16px}.td-bio b{color:var(--ink)}