/* ledger: white page, lowercase grotesk, dashed rules, highlighter labels.
   yellow = post, green = note, violet = link, peach = happening now. */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #6d6d6d;
  --dash: #b8b8b8;
  --under: #3157ff;
  --hl-post: #fff176;
  --hl-note: #b6f2c2;
  --hl-link: #e3cdff;
  --hl-now: #ffc9a3;
  --code-bg: #f5f5f3;
  --syn-str: #2f7d4a;
  --syn-num: #a3551b;
  --sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light dark;
}

/* dark palette: follows the system unless the header toggle sets data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0c0c;
    --ink: #f1f1f1;
    --muted: #949494;
    --dash: #3d3d3d;
    --under: #7d97ff;
    --hl-post: #5e5610;
    --hl-note: #1d5a2b;
    --hl-link: #4a2c77;
    --hl-now: #6b3414;
    --code-bg: #171717;
    --syn-str: #7fd39a;
    --syn-num: #f0a46b;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0c0c;
  --ink: #f1f1f1;
  --muted: #949494;
  --dash: #3d3d3d;
  --under: #7d97ff;
  --hl-post: #5e5610;
  --hl-note: #1d5a2b;
  --hl-link: #4a2c77;
  --hl-now: #6b3414;
  --code-bg: #171717;
  --syn-str: #7fd39a;
  --syn-num: #f0a46b;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }


*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--under); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px));
  padding-block: 0 48px;
}

.rule { border: 0; border-top: 1px dashed var(--dash); margin: 0; }

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0 14px;
}
.masthead .name { font-weight: 700; font-size: 15px; text-decoration: none; }
.masthead nav { display: flex; gap: 16px; font: 12px var(--mono); }
.masthead nav a,
.nodes a,
.more,
.jump a span:first-child,
details.all summary,
.pager .dir {
  text-decoration: underline;
  text-decoration-color: var(--under);
  text-underline-offset: 3px;
}
.theme-toggle {
  display: inline-flex;
  align-self: center;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle[hidden] { display: none; }
.masthead nav a[aria-current="page"] { background: var(--hl-post); text-decoration: none; padding: 0 3px; }

.ticker {
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  font: 12px var(--mono);
  color: var(--muted);
}
.ticker span { display: inline-block; padding-right: 2rem; animation: ticker 60s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ticker span { animation: none; } }

/* ---------- shared pieces ---------- */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: 56px;
  padding-top: 40px;
}
.grid > main { min-width: 0; }

.aside { font-size: 13px; line-height: 1.55; align-self: start; position: sticky; top: 24px; }
.aside p { margin: 0 0 1em; }

.lbl { font: 400 11px var(--mono); color: var(--muted); margin: 28px 0 8px; }

.nodes { list-style: none; padding: 0; margin: 0; font: 12px/1.9 var(--mono); }
.r { color: var(--muted); }

.h2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.h2 .u {
  text-decoration: underline;
  text-decoration-color: var(--under);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.h2 small { font: 400 12px var(--mono); letter-spacing: 0; color: var(--muted); }
.h2 small a { color: inherit; }

.key { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }

.tag {
  display: inline-block;
  font: 11px/1 var(--mono);
  padding: 3px 5px 2px;
  color: var(--ink);
  white-space: nowrap;
  text-decoration: none;
}
.tag.post { background: var(--hl-post); }
.tag.note { background: var(--hl-note); }
.tag.link { background: var(--hl-link); }
.tag.now { background: var(--hl-now); }
.tag.all { box-shadow: inset 0 0 0 1px var(--dash); }
nav.key .tag { opacity: .55; }
nav.key .tag.on, nav.key .tag:hover { opacity: 1; }
nav.key .tag.on { box-shadow: inset 0 0 0 1px var(--ink); }

.more { display: inline-block; margin-top: 14px; font: 12px var(--mono); }

.foot {
  margin-top: 72px;
  padding-top: 12px;
  border-top: 1px dashed var(--dash);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font: 11px var(--mono);
  color: var(--muted);
}

/* ---------- writing rows ---------- */

.writing { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--dash); }
.writing a {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px dashed var(--dash);
  text-decoration: none;
}
.writing .tag { justify-self: start; }
.writing .t { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; text-transform: lowercase; }
.writing a:hover .t { text-decoration: underline; text-decoration-color: var(--under); text-underline-offset: 4px; }
.writing .d { font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.work { list-style: none; padding: 0; margin: 0; border-top: 1px dashed var(--dash); }
.work li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px dashed var(--dash);
}
.work .co { font-weight: 500; text-decoration: none; }
.work .co:hover { text-decoration: underline; text-decoration-color: var(--under); }
.work .tag { margin-left: 4px; }
.work .yr { grid-row: 1; grid-column: 2; font: 11px var(--mono); color: var(--muted); white-space: nowrap; }
.work .role { grid-column: 1; color: var(--muted); font-size: 12px; }

/* listing pages */
.listing { max-width: 46rem; padding-top: 48px; }
.listing .year { font: 400 12px var(--mono); color: var(--muted); margin: 32px 0 8px; }

/* ---------- article ---------- */

.entry { max-width: 40rem; padding-top: 48px; }
.entry .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  font: 12px var(--mono);
  color: var(--muted);
  margin-bottom: 18px;
}
.entry h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  text-wrap: balance;
  margin: 0 0 22px;
}
.entry h1 a { text-decoration: none; }
.entry h1 a:hover { text-decoration: underline; text-decoration-color: var(--under); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.entry h1 .ext { color: var(--muted); font-weight: 500; }
.entry .dek {
  font-size: 19px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 32px;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--dash);
}

.body { font-size: 17px; line-height: 1.62; }
.body > * { margin: 0 0 1.1em; }
.body h2, .body h3, .body h4 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-transform: lowercase; margin: 1.8em 0 .6em; }
.body h2 { font-size: 26px; }
.body h3 { font-size: 21px; }
.body h4 { font-size: 17px; }
.body a { text-decoration: underline; text-decoration-color: var(--under); text-underline-offset: 3px; }
.body a:hover { text-decoration-thickness: 2px; }
.body strong { font-weight: 700; }
.body ul, .body ol { padding-left: 1.3em; }
.body li { margin: .3em 0; }
.body li::marker { color: var(--muted); }
.body blockquote {
  margin-inline: 0;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--under);
  color: var(--muted);
}
.body blockquote > :last-child { margin-bottom: 0; }
.body hr { border: 0; border-top: 1px dashed var(--dash); margin: 2em 0; }
.body figure { margin-inline: 0; }
.body figure img, .body > p img { display: block; }
.body figcaption, .body figcaption p { font: 12px/1.5 var(--mono); color: var(--muted); margin: 8px 0 0; }
.body code { font: .86em var(--mono); background: var(--code-bg); padding: .1em .3em; }
.body pre { font: 13px/1.6 var(--mono); background: var(--code-bg); padding: 16px; overflow-x: auto; border: 1px dashed var(--dash); }
.body pre code { background: none; padding: 0; font-size: inherit; }
.body table { border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.body th, .body td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px dashed var(--dash); }
.body .footnotes { font-size: 14px; color: var(--muted); border-top: 1px dashed var(--dash); padding-top: 16px; margin-top: 2.5em; }
.body .footnotes hr { display: none; }
.body .footnote-ref, .body .footnote-backref { font: 11px var(--mono); text-decoration: none; }
.body .footnote-ref::before { content: "["; }
.body .footnote-ref::after { content: "]"; }

/* minimal syntax colors, driven by the palette */
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs { color: var(--muted); font-style: italic; }
.chroma .k, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt, .chroma .nt { color: var(--under); }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sr { color: var(--syn-str); }
.chroma .m, .chroma .mi, .chroma .mf { color: var(--syn-num); }
.chroma .ln { color: var(--dash); margin-right: 12px; user-select: none; }

.pager {
  max-width: 40rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  border-top: 1px dashed var(--dash);
  padding-top: 14px;
}
.pager a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.pager .older { text-align: right; }
.pager .dir { font: 11px var(--mono); }
.pager .t { font-weight: 500; text-transform: lowercase; }

/* ---------- activity ---------- */

.jump { list-style: none; padding: 0; margin: 0; font: 12px/2 var(--mono); }
.jump a { display: flex; justify-content: space-between; gap: 12px; text-decoration: none; }
.jump .r { font-variant-numeric: tabular-nums; }

.act section { margin-bottom: 72px; scroll-margin-top: 24px; }
.sub { font: 400 11px var(--mono); color: var(--muted); margin: 28px 0 8px; }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--dash); }
.rows li {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--dash);
}
.rows.thumbs li { grid-template-columns: 4.2rem 1.6rem minmax(0, 1fr) auto; align-items: center; padding: 7px 0; }
.rows .c1, .toot .c1, .season .c1 { font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .t { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; min-width: 0; text-decoration: none; }
a.t:hover { text-decoration: underline; text-decoration-color: var(--under); text-underline-offset: 4px; }
.rows .by, .feature .by { font-weight: 400; color: var(--muted); }
.rows .r { font: 12px var(--mono); white-space: nowrap; text-align: right; }

.cover, .poster, .art, .photos img {
  display: block;
  width: 100%;
  object-fit: cover;
  background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--code-bg) 5px 6px);
}
.cover, .poster { aspect-ratio: 2 / 3; }
.art { aspect-ratio: 1; }
.thumb { width: 1.6rem; }

.feature {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  padding: 16px 0;
  border-top: 1px dashed var(--dash);
  text-decoration: none;
}
.feature + .rows { border-top: 1px dashed var(--dash); }
.feature .ft { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 8px 0 4px; }
.feature:hover .ft { text-decoration: underline; text-decoration-color: var(--under); text-underline-offset: 4px; }
.feature .by { font-size: 15px; }
.feature .r { font: 12px var(--mono); margin-top: 10px; }

.stars { font: 13px/1 var(--mono); letter-spacing: 1px; white-space: nowrap; }
.stars i { font-style: normal; color: var(--dash); }

.dist {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 2rem;
  gap: 4px 10px;
  align-items: center;
  max-width: 26rem;
  margin-bottom: 8px;
  font: 12px var(--mono);
  color: var(--muted);
}
.dist .bar { display: block; height: 9px; background: var(--ink); }
.dist .n { text-align: right; font-variant-numeric: tabular-nums; }

.shelf {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 0 20px;
  border-top: 1px dashed var(--dash);
}
.shelf a { min-width: 0; text-decoration: none; }
.shelf .cap { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; font-weight: 500; }
.shelf .stars { display: block; margin-top: 5px; }
.shelf a:hover .cap { text-decoration: underline; text-decoration-color: var(--under); }

details.all { margin-top: 14px; }
details.all summary { font: 12px var(--mono); cursor: pointer; list-style: none; width: fit-content; }
details.all summary::-webkit-details-marker { display: none; }
details.all[open] summary { margin-bottom: 12px; }

.toots { border-top: 1px dashed var(--dash); }
.toot {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--dash);
}
.toot .c1 { padding-top: 3px; text-decoration: none; }
.toot .c1:hover { color: var(--ink); }
.tb { min-width: 0; max-width: 36rem; }
.tc { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.tc p { margin: 0 0 .7em; }
.tc p:last-child { margin-bottom: 0; }
.tc a { text-decoration: underline; text-decoration-color: var(--under); text-underline-offset: 3px; }
.tc .invisible { display: none; }
.tc .ellipsis::after { content: "…"; }
.tc .hashtag, .tc .mention { text-decoration: none; color: var(--muted); }
.photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 24rem; margin-top: 12px; }
.photos img { aspect-ratio: 1; }
.photos.one { grid-template-columns: minmax(0, 1fr); max-width: 28rem; }
.photos.one img { aspect-ratio: auto; }
details.thread { margin-top: 10px; }
details.thread summary { font: 11px var(--mono); color: var(--muted); cursor: pointer; list-style: none; width: fit-content; }
details.thread summary::-webkit-details-marker { display: none; }
details.thread summary:hover { color: var(--ink); }
.reply { margin-top: 14px; padding-left: 14px; border-left: 1px dashed var(--dash); }

.seasons { border-top: 1px dashed var(--dash); }
.season {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px dashed var(--dash);
}
.tally { display: flex; flex-wrap: wrap; gap: 4px; }
.tally span { width: 12px; height: 18px; border: 1.5px solid var(--ink); }
.tally span.on { background: var(--ink); }
.season .days { font: 11px var(--mono); color: var(--muted); }

/* ---------- small screens ---------- */

@media (max-width: 760px) {
  .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; }
  .aside { position: static; }
  /* phones: bio, then writing, then everything else */
  .home .grid { display: flex; flex-direction: column; }
  .home .aside { display: contents; }
  .home .intro { order: 0; }
  .home .grid > main { order: 1; }
  .home .aside-more { order: 2; font-size: 13px; }
  .writing a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .writing .tag { grid-column: 1 / -1; }
  .rows li { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .rows.thumbs li { grid-template-columns: 3.6rem 1.6rem minmax(0, 1fr); }
  .rows li .r { grid-column: -2; text-align: left; }
  .rows li .r:empty, .rows.thumbs li .r { display: none; }
  .rows.films li { row-gap: 4px; }
  .rows.films .c1, .rows.films .thumb { grid-row: 1 / span 2; }
  .rows.films .t { align-self: end; }
  .rows.films li .r { display: block; grid-column: 3; align-self: start; }
  .toot, .season { grid-template-columns: 3.6rem minmax(0, 1fr); }
  .season .days { grid-column: 2; }
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jump { display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .jump a { gap: 6px; }
  .entry, .listing { padding-top: 32px; }
  .body { font-size: 16.5px; }
}