@font-face { font-family:"Alte Haas"; src:url("assets/AlteHaasGroteskRegular.ttf") format("truetype"); font-weight:400; }
@font-face { font-family:"Alte Haas"; src:url("assets/AlteHaasGroteskBold.ttf") format("truetype"); font-weight:700; }
@font-face { font-family:"Redaction"; src:url("assets/Redaction-Regular.woff2") format("woff2"); font-weight:400; }
:root { color-scheme:light; --bg:#f4f2ed; --fg:#121212; --muted:#6e6963; --line:#d4d0c9; --empty:#e5e1da; --accent:#8d332e; --one:#d2aaa3; --two:#b66b61; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#121212; --fg:#f4f2ed; --muted:#9a9791; --line:#343230; --empty:#272423; --accent:#e56d64; --one:#63312d; --two:#a44b43; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 "Alte Haas",Helvetica,Arial,sans-serif; }
.page { margin:auto; padding:0 24px; }
main { max-width:980px; margin:38px auto 70px; }
a { color:inherit; text-underline-offset:4px; }
a:hover { color:var(--accent); }
button { font:inherit; color:inherit; cursor:pointer; }
header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:24px 0; }
.wordmark { display:flex; align-items:center; gap:5px; text-decoration:none; min-width:0; }
.wordmark:hover { color:var(--fg); }
.wordmark img { width:42px; height:42px; transform:translateY(-2px); }
:root:not([data-theme="dark"]) .wordmark img { filter:invert(1); mix-blend-mode:multiply; }
.wordmark span { font:400 54.6px/.74 "Redaction",serif; letter-spacing:-.015em; white-space:nowrap; }
header nav { display:flex; align-items:center; gap:22px; flex-shrink:0; font-size:14px; }
.notes-link { color:var(--accent); text-decoration:underline; }
#theme { border:0; background:none; padding:6px 0 6px 12px; font-size:13px; color:var(--muted); }
h1 { font:700 clamp(38px,5.5vw,68px)/1.06 "Alte Haas",Helvetica,Arial,sans-serif; letter-spacing:-.04em; margin:0 0 24px; }
.intro { margin:80px 0 48px; max-width:850px; }
.intro p { color:var(--muted); margin:0; max-width:550px; }
.activity { margin:0 0 46px; }
.activity-heading { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:16px; color:var(--muted); }
.activity-heading strong { font-weight:500; color:var(--fg); }
.calendar-scroll { overflow-x:auto; padding:0 0 8px; }
.calendar { width:100%; min-width:600px; }
.months { display:grid; grid-template-columns:repeat(53,1fr); font:11px/1.4 ui-monospace,monospace; color:var(--muted); height:25px; }
.cells { display:grid; grid-template-rows:repeat(7,10px); grid-auto-flow:column; grid-template-columns:repeat(53,1fr); gap:4px; }
.day { background:var(--empty); border-radius:1px; min-width:0; }
.day[data-count="1"] { background:var(--one); }
.day[data-count="2"] { background:var(--two); }
.day[data-count="3"] { background:var(--accent); }
.day:hover { outline:1px solid var(--muted); outline-offset:1px; }
.activity-caption { display:flex; justify-content:space-between; gap:12px; font-size:11px; color:var(--muted); margin-top:6px; }
.legend { display:flex; gap:4px; align-items:center; }
.legend i { display:inline-block; width:9px; height:9px; background:var(--empty); }
.legend i:nth-of-type(2) { background:var(--one); }.legend i:nth-of-type(3) { background:var(--two); }.legend i:nth-of-type(4) { background:var(--accent); }
.filters { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:8px; }
.filters button { padding:0 0 12px; background:none; border:0; border-bottom:1px solid transparent; font-size:14px; text-transform:lowercase; color:var(--muted); margin-bottom:-1px; }
.filters button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
.entry { padding:24px 0; display:grid; grid-template-columns:105px 150px minmax(0,1fr); gap:20px; align-items:start; }
.publication-time { display:block; margin-top:4px; }
.empty-notes { color:var(--muted); padding:40px 0; min-height:45vh; }
.no-image { display:grid; place-items:center; height:100%; color:var(--accent); font-family:Redaction,serif; font-size:40px; }
.note-body img { max-width:100%; height:auto; }
.note-body pre { overflow:auto; }
.note-body { overflow-wrap:anywhere; }
.entry-meta .category { display:block; margin-bottom:8px; }
.entry-meta time { display:block; }
.read-more { font-size:13px; color:var(--muted); text-decoration:underline; }
#activity-preview .countdown { color:var(--accent); }
.countdown-letter { display:inline-block; white-space:pre; animation:countdown-shake var(--shake-duration) ease-in-out var(--shake-delay) infinite; }
@keyframes countdown-shake { 0%,100% {transform:translate(0,0) rotate(0);} 25% {transform:translate(-.7px,.5px) rotate(-2deg);} 75% {transform:translate(.7px,-.7px) rotate(2deg);} }
@media(prefers-reduced-motion:reduce) { .countdown-letter {animation:none;} }
@media(max-width:760px) { .entry-meta {grid-column:1 / -1;} }
.thumbnail { position:relative; display:block; width:100%; aspect-ratio:1; overflow:hidden; background:#121212; }
.thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.thumbnail .dither { opacity:0; image-rendering:pixelated; transition:opacity 180ms ease; }
.thumbnail .dither.ready { opacity:1; }
.thumbnail:hover .dither, .thumbnail:focus-visible .dither { opacity:0; }
.period { position:relative; border:0; padding:0; border-radius:0; }
.period.incoming::after { content:''; position:absolute; inset:2px; border:1px solid var(--accent); animation:upcoming-pulse 3s ease-in-out infinite; }
@keyframes upcoming-pulse { 0%,100% {opacity:.12;} 50% {opacity:1;} }
#activity-preview { position:fixed; z-index:10; width:min(290px,calc(100vw - 20px)); padding:16px; border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:13px; box-shadow:0 8px 30px #0003; pointer-events:none; }
#activity-preview small { display:block; color:var(--muted); font-size:11px; margin-bottom:8px; }
#activity-preview .category { display:block; margin-bottom:6px; }
#activity-preview strong { display:block; font-size:16px; line-height:1.25; }
#activity-preview p { margin:8px 0 0; color:var(--muted); }
@media(prefers-reduced-motion:reduce) { .period.incoming::after {animation:none;opacity:.7;} .thumbnail .dither{transition:none;} }
.entry time { font:12px/1.8 ui-monospace,monospace; color:var(--muted); padding-top:5px; }
.entry h2 { margin:0 0 9px; font:700 30px/1.15 "Alte Haas",Helvetica,Arial,sans-serif; letter-spacing:-.025em; }
.entry h2 a { text-decoration:none; }
.entry p { margin:0 0 8px; font-size:14px; color:var(--muted); max-width:570px; }
.category { font:11px/1.5 ui-monospace,monospace; color:var(--accent); }
footer { margin-top:64px; padding:22px 0 30px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; }
.article { max-width:760px; margin:64px auto 0; font-size:18px; line-height:1.72; }
.back { display:inline-block; font-size:13px; color:var(--muted); margin-bottom:38px; }
.article .meta { font:12px ui-monospace,monospace; color:var(--accent); margin-bottom:20px; }
.article .lede { font-size:20px; line-height:1.6; color:var(--muted); }
.article h2 { font:700 32px/1.15 "Alte Haas",Helvetica,Arial,sans-serif; margin-top:38px; }
.article p { margin:24px 0; }
.sample { font-size:12px; color:var(--muted); border-left:2px solid var(--line); padding-left:14px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.notes-footer { max-width:980px; margin:64px auto 0; padding:24px 0 30px; align-items:flex-start; }
.notes-footer a { text-decoration:none; }
.notes-footer div { text-align:right; }
.notes-footer p { margin:0 0 4px; }
@media(max-width:760px) { .notes-footer div {text-align:left;} }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.journal-header { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:24px; align-items:center; padding:18px 0; }
.site-return { display:flex; align-items:center; gap:12px; text-decoration:none; white-space:nowrap; font-size:12px; color:var(--muted); }
.site-return img { width:30px; height:30px; }
:root:not([data-theme="dark"]) .site-return img { filter:invert(1); mix-blend-mode:multiply; }
.plain-button, #theme { border:0; background:none; padding:8px 0; font-size:12px; color:var(--muted); white-space:nowrap; }
.plain-button:hover { color:var(--accent); }
#activity { min-width:0; overflow-x:auto; padding:4px; }
@media(max-width:950px) {
  #activity { max-width:100%; overscroll-behavior-x:contain; padding:8px 4px 12px; scrollbar-width:thin; scrollbar-color:var(--muted) var(--bg); }
  #activity .tracker { min-width:1080px; gap:7px 12px; }
  #activity .periods { height:16px; }
  #activity .month-labels { height:18px; font-size:11px; }
  #activity .tracker-label { position:sticky; left:0; z-index:1; background:var(--bg); align-self:stretch; display:flex; align-items:center; font-size:11px; }
}
.tracker { display:grid; grid-template-columns:86px minmax(0,1fr); gap:4px 10px; max-width:800px; min-width:540px; margin:0 auto; align-items:center; }
.tracker-label { font-size:10px; line-height:12px; color:var(--muted); }
.periods { display:grid; grid-template-columns:repeat(365,minmax(0,1fr)); height:10px; }
.period { display:block; background:var(--empty); margin-right:3px; }
.period.filled { background:var(--accent); }
.period:hover { outline:1px solid var(--muted); outline-offset:1px; }
.month-labels { height:14px; color:var(--muted); font-size:9px; line-height:12px; }
dialog { color-scheme:dark; background:#121212; color:#f4f2ed; border:1px solid #343230; border-radius:0; width:min(560px,calc(100% - 40px)); max-height:85dvh; padding:36px; }
dialog::backdrop { background:rgba(0,0,0,.8); }
dialog h2 { margin:0 30px 24px 0; font-size:28px; line-height:1.2; }
dialog p { font-size:16px; line-height:1.65; }
dialog .sample { color:#9a9791; font-size:12px; border-color:#343230; }
#info-close { position:absolute; top:10px; right:16px; border:0; background:none; color:#fff; font-size:30px; line-height:1; padding:4px; }
@media(max-width:950px) { .journal-header { grid-template-columns:1fr auto auto; gap:12px 22px; } #activity { grid-column:1 / -1; grid-row:2; } #theme { justify-self:end; } .tracker { max-width:none; } }
@media(max-width:760px) { .page{padding:0 22px;} header{padding:25px 0;flex-wrap:wrap;gap:24px;} .wordmark span{font-size:clamp(27px,6.5vw,45px);} .wordmark img{width:clamp(22px,5vw,35px);height:auto;} header nav{width:100%;justify-content:space-between;} .intro{margin-top:40px;} .entry{grid-template-columns:95px minmax(0,1fr);gap:12px;} .entry time{font-size:11px;grid-column:1 / -1;} .entry h2{font-size:23px;} .filters{gap:23px;} .activity-heading{flex-wrap:wrap;} footer{flex-direction:column;gap:5px;} .activity-caption{font-size:10px;} }