/* Unc Mode Notes. Layout: one-column reading journal; masthead with the weekly lineup, a this-week strip of five day tiles, then note cards. Each theme owns a color, used for its chip, bars and tile. */
:root{
  --bg:#F5F4EF; --card:#FFFFFF; --ink:#16181C; --muted:#5D6470; --line:#DEDCD3; --soft:#ECEAE3;
  --fitness:#0E9F6E; --food:#D9482B; --gear:#2463D6; --diy:#B7791F; --boots:#5B4BD6;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121418; --card:#1A1D23; --ink:#ECEDEA; --muted:#9AA1AC; --line:#2A2E36; --soft:#23272F;
  --fitness:#4ADE9B; --food:#FF7A59; --gear:#6FA8FF; --diy:#F2B84B; --boots:#A59BFF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121418; --card:#1A1D23; --ink:#ECEDEA; --muted:#9AA1AC; --line:#2A2E36; --soft:#23272F;
  --fitness:#4ADE9B; --food:#FF7A59; --gear:#6FA8FF; --diy:#F2B84B; --boots:#A59BFF; color-scheme:dark}
.t-fitness{--tc:var(--fitness)}.t-food{--tc:var(--food)}.t-gear{--tc:var(--gear)}.t-diy{--tc:var(--diy)}.t-boots{--tc:var(--boots)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6}
a{color:inherit}
img{max-width:100%;display:block}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.wrap{max-width:760px;margin:0 auto;padding-block:28px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:grid;gap:28px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.01em}

/* Masthead */
.mast{display:grid;gap:10px;padding-bottom:18px;border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none;flex-wrap:wrap}
.brand .unc{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.brand .notes{font-family:var(--display);font-weight:800;font-size:clamp(56px,13vw,104px);line-height:.85;letter-spacing:-.03em}
.mast.small .brand .notes{font-size:40px}
.tag{margin:0;font-size:20px;color:var(--muted);max-width:40ch}
.lineup{margin:0;font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.lineup span{color:var(--tc);font-weight:600}

/* This week */
.week{display:grid;gap:12px}
.wk-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px}
.wk-h h2{font-size:24px}.wk-h p{margin:0;color:var(--muted)}
.days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.day{border:1.5px solid var(--line);border-radius:12px;padding:10px 10px 9px;display:grid;gap:2px;text-decoration:none;background:var(--card);min-width:0}
.day b{font-family:var(--display);font-size:20px}
.day span{font-family:var(--mono);font-size:11.5px;color:var(--tc);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--muted)}
.day.done{border-color:var(--tc);background:color-mix(in srgb,var(--tc) 12%,var(--card))}
.day.done i{color:var(--tc);font-weight:600}
.day.today{border-style:dashed;border-color:var(--tc)}
.day.missed{opacity:.55}
.day.pre{opacity:.35}
.day.next{opacity:.8}

/* Feed */
.feed{display:grid;gap:14px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.f{font-family:var(--mono);font-size:12.5px;font-weight:600;border:1.5px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}
.f.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.f[class*="t-"]:not(.on){color:var(--tc)}
.cards{display:grid;gap:16px}
.card{display:grid;grid-template-columns:160px minmax(0,1fr);gap:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none}
.card:hover{border-color:var(--tc)}
.thumb{background:#000;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
.cbody{padding:16px 18px;display:grid;gap:6px;align-content:start;border-left:4px solid var(--tc)}
.cbody h2{font-size:24px}
.cbody p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.45}
.cbody .statline{color:var(--tc);font-weight:600}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.chip{color:var(--tc);border:1.5px solid var(--tc);border-radius:999px;padding:1px 10px;font-weight:600}
.empty{color:var(--muted);margin:0}

/* Badges */
.badges{display:grid;gap:12px}
.badges h2{font-size:24px}
.badges ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px}
.badges li{border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:2px;background:var(--card)}
.badges li b{font-family:var(--display);font-size:17px}
.badges li span{font-size:14px;color:var(--muted);line-height:1.35}
.badges li.on{border-color:var(--ink)}
.badges li.on b::before{content:"★ ";color:var(--diy)}
.badges li.off{opacity:.5}

/* Post */
.post{display:grid;gap:18px}
.post h1{font-size:clamp(34px,7vw,52px)}
.dek{margin:0;font-size:21px;color:var(--muted);font-style:italic}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:2px;min-width:0}
.stat span{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.stat b{font-family:var(--display);font-size:26px;font-variant-numeric:tabular-nums}
.stat small{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;margin-left:3px}
.chart{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:6px;min-width:0}
.chart h2{font-size:20px}
.hint{margin:0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.scroll{overflow-x:auto}
.chart svg{display:block;width:100%;min-width:480px;height:auto}
.chart .ck{font-family:var(--display);font-weight:800;font-size:14px;fill:var(--ink)}
.chart .cs{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.chart .cv{font-family:var(--mono);font-size:13px;font-weight:600;fill:var(--muted)}
.chart .cv.work{fill:var(--tc)}
.chart .bar.work{fill:var(--tc)}
.chart .bar.easy{fill:var(--soft)}
.sec{display:grid;gap:8px}
.sec h2{font-size:15px;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--tc)}
.sec p{margin:0;max-width:65ch}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
figure{margin:0;display:grid;gap:6px}
figure img{border-radius:12px;border:1px solid var(--line)}
figcaption{font-size:15px;color:var(--muted);font-style:italic}
.tags{margin:0;display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);padding-top:16px}
.pn a{text-decoration:none;font-family:var(--mono);font-size:13px;display:grid;gap:2px}
.pn a span{font-family:var(--display);font-weight:800;font-size:16px}
.pn .r{text-align:right}
.pn .muted{font-family:var(--mono);font-size:13px}
.foot{max-width:760px;margin:0 auto;padding-block:8px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.foot p{margin:0;border-top:1px solid var(--line);padding-top:14px}
:focus-visible{outline:3px solid var(--tc,var(--ink));outline-offset:2px}

@media (max-width:600px){
  body{font-size:17px}
  .card{grid-template-columns:1fr}
  .thumb{height:170px}
  .cbody{border-left:0;border-top:4px solid var(--tc)}
  .days{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .day{padding:8px 6px;border-radius:10px}
  .day b{font-size:16px}.day span{font-size:10px}.day i{font-size:9.5px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery{grid-template-columns:1fr}
}