:root{--bg:#faf9f6;--card:#fff;--ink:#1a2330;--muted:#5b6675;--line:#e3e0d8;--accent:#1f6f5c;--accentsoft:#e7f2ee;--sidebar:#f2f0ea}
@media(prefers-color-scheme:dark){:root{--bg:#14181e;--card:#1c222b;--ink:#e8e6e1;--muted:#9aa3af;--line:#2e3641;--accent:#5cb89f;--accentsoft:#1e3129;--sidebar:#181d24}}
*{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;display:flex}
main,article{min-width:0;max-width:100%}
#menu{display:none;position:fixed;top:.6rem;left:.6rem;z-index:20;background:var(--accent);color:#fff;border:0;border-radius:8px;font-size:1.1rem;padding:.3rem .6rem;cursor:pointer}
#sidebar{width:270px;min-width:270px;height:100vh;position:sticky;top:0;overflow-y:auto;background:var(--sidebar);border-right:1px solid var(--line);padding:1.2rem 1rem}
.brand{display:block;font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;margin-bottom:1rem;letter-spacing:-.01em}
.nav{list-style:none;margin:0;padding:0}
.nav .sec{margin:0 0 1rem}
.nav .sec-title{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.3rem;font-weight:700}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.2rem .5rem;border-radius:6px;color:var(--ink);text-decoration:none;font-size:.9rem}
.nav a:hover{background:var(--accentsoft)}
.nav a.active{background:var(--accent);color:#fff}
main{flex:1;min-width:0;max-width:860px;margin:0 auto;padding:2.2rem 2rem 5rem}
article h1{font-size:1.85rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 1rem}
article h2{font-size:1.3rem;margin:2rem 0 .6rem;padding-top:.4rem;border-top:1px solid var(--line)}
article h3{font-size:1.05rem;margin:1.3rem 0 .3rem}
article a{color:var(--accent)}
.lead{font-size:1.1rem;color:var(--muted)}
.note{font-size:.85rem;color:var(--muted)}
code{background:var(--accentsoft);padding:.1rem .35rem;border-radius:4px;font-size:.88em}
pre{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem;overflow-x:auto}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;margin:1rem 0;font-size:.92rem;display:block;overflow-x:auto}
th,td{text-align:left;padding:.45rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
blockquote{margin:1rem 0;padding:.3rem 1rem;border-left:3px solid var(--accent);color:var(--muted)}
.cards{list-style:none;padding:0;margin:1.4rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.8rem}
.cards a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.1rem;text-decoration:none;color:var(--ink)}
.cards a:hover{border-color:var(--accent)}
.ic{display:inline-block;vertical-align:-.13em;stroke:var(--accent)}
.brand .ic,article h1 .ic{stroke:currentColor}
.cards strong{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;margin:1.3rem 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;display:flex;flex-direction:column;gap:.15rem}
.stat .n{font-size:1.3rem;font-weight:700;letter-spacing:-.02em}
.stat .l{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
/* lead subtitle: first paragraph right after the page H1 (but not on the dashboard) */
article:not(.dash)>h1+p{color:var(--muted);font-size:1.05rem;margin-top:.3rem}

/* dashboard */
.todos{list-style:none;padding:0;margin:1rem 0}
.todos li{padding:.4rem .6rem;border-left:3px solid var(--accent);background:var(--accentsoft);border-radius:0 6px 6px 0;margin:.35rem 0}
.todos li.done{opacity:.55;border-left-color:var(--muted);text-decoration:line-through}
.td-date{display:inline-block;min-width:110px;font-family:var(--mono,monospace);font-size:.8rem;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.links{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.4rem}
.links a{display:flex;align-items:center;gap:.5rem;padding:.5rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--card);text-decoration:none;color:var(--ink)}
.links a:hover{border-color:var(--accent)}

/* deliveries */
.deliv{list-style:none;padding:0;margin:1rem 0}
.deliv li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid var(--line)}
.deliv li.done{opacity:.55}
.deliv li.done a{text-decoration:line-through}
.dv-eta{min-width:150px;font-family:var(--mono,monospace);font-size:.8rem;font-weight:700;color:var(--accent)}
.deliv a{color:var(--ink);text-decoration:none;font-weight:600}
.deliv a:hover{color:var(--accent)}
.dv-meta{font-size:.8rem;color:var(--muted)}

/* webcams */
.cams{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem;margin:1rem 0}
.cam{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);text-decoration:none;aspect-ratio:16/9;background:var(--card)}
.cam-img{width:100%;height:100%;object-fit:cover;display:block}
.cam-label{position:absolute;left:0;bottom:0;right:0;padding:.35rem .6rem;font-size:.8rem;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}

/* weather — scoped scroll so only the day-strip scrolls, never the page */
.wx-row{display:flex;gap:.8rem;align-items:flex-start;margin:.6rem 0;padding-bottom:.3rem;min-width:0}
.wx-name{min-width:120px;font-weight:700;padding-top:1.2rem;position:sticky;left:0;background:var(--bg);z-index:1}
.wx-days{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.3rem;scrollbar-width:thin}
.wx-d{display:flex;flex-direction:column;align-items:center;gap:.05rem;min-width:44px;padding:.35rem .2rem;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:.72rem}
.wx-dow{color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.wx-ic{font-size:1.1rem;line-height:1.1}
.wx-hi{font-weight:700}
.wx-lo{color:var(--muted)}
.wx-p{color:var(--accent);font-size:.66rem}
.cards span{font-size:.85rem;color:var(--muted)}
@media(max-width:760px){
  #menu{display:block;box-shadow:0 1px 4px rgba(0,0,0,.2)}
  #sidebar{position:fixed;left:-88%;width:86%;max-width:320px;z-index:15;transition:left .2s;box-shadow:2px 0 12px rgba(0,0,0,.25)}
  #sidebar.open{left:0}
  main{padding:3.4rem 1.1rem 4rem}
  article h1{font-size:1.5rem}
  article h2{font-size:1.2rem}
  /* stack todo/delivery date above text so nothing runs off-screen */
  .todos li,.deliv li{flex-direction:column;gap:.15rem}
  .td-date,.dv-eta{min-width:0}
  .stats,.cards,.links{grid-template-columns:1fr}
  .wx-name{position:static;min-width:0;padding-top:0;margin-bottom:.2rem}
  .wx-row{flex-direction:column;gap:.25rem}
}