/* nofone: tokens, site chrome and the post grid, shared by every page. Post-specific pieces stay in each post. */
:root {
  --paper:#f1f2f4; --ink:#15171c; --muted:#5f6570; --trace:#6b717c; --rule:#d7dae0; --tint:#e6e8ec;
  --mark:#ffe45c; --mark-ink:#15171c; --quiet:#a9aeb8;
  --f-voice:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --f-text:Literata,Georgia,"Times New Roman",serif;
  --f-mind:"Spline Sans Mono",ui-monospace,Menlo,Consolas,monospace;
  --s1:.25rem; --s2:.5rem; --s3:1rem; --s4:2rem; --s5:4rem; --s6:6.5rem;
  --measure:66ch;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#111317; --ink:#e9ebef; --muted:#9aa1ad; --trace:#8a909a; --rule:#2a2e36; --tint:#1a1d23;
    --mark:#7d6a12; --mark-ink:#fff3b0; --quiet:#4a505b; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#111317; --ink:#e9ebef; --muted:#9aa1ad; --trace:#8a909a; --rule:#2a2e36; --tint:#1a1d23;
  --mark:#7d6a12; --mark-ink:#fff3b0; --quiet:#4a505b; color-scheme:dark;
}
* { box-sizing:border-box; }
body { background:var(--paper); color:var(--ink); font:400 clamp(1.05rem,.3vw + 1rem,1.15rem)/1.65 var(--f-text); padding-inline:clamp(1rem,4vw,3.5rem); padding-block:0 var(--s6); }
a { color:inherit; text-decoration-color:var(--quiet); text-underline-offset:.2em; }
a:hover { text-decoration-color:var(--ink); }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
mark { background:var(--mark); color:var(--mark-ink); padding:0 .15em; }
.meta { font:500 .72rem/1.4 var(--f-mind); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

.site { max-width:82rem; margin-inline:auto; }
.bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:var(--s3); padding-block:var(--s4) 0; }
.bar .name { font:800 1.35rem/1 var(--f-voice); letter-spacing:-.02em; text-decoration:none; }
.bar nav { display:flex; gap:var(--s4); }
.bar nav a { font:500 .8rem var(--f-mind); text-decoration:none; color:var(--muted); }

.post { --margin-col:clamp(9rem,15vw,14rem); display:grid; grid-template-columns:var(--margin-col) minmax(0,var(--measure)) minmax(0,1fr); column-gap:var(--s5); padding-top:var(--s5); }
.post > * { grid-column:2; }
.post > .wide { grid-column:2 / 4; max-width:58rem; }
.post > .aside { grid-column:1; text-align:right; padding-top:.4rem; font:400 .78rem/1.5 var(--f-mind); color:var(--muted); }
.post header { grid-column:1 / 4; display:grid; grid-template-columns:subgrid; padding-bottom:var(--s5); border-bottom:2px solid var(--ink); margin-bottom:var(--s4); }
.post header .meta { grid-column:1; text-align:right; padding-top:1.1rem; }
.post header div { grid-column:2 / 4; max-width:62rem; }
.post h1 { font:800 clamp(2.6rem,6vw + .5rem,6rem)/.95 var(--f-voice); letter-spacing:-.035em; margin:0 0 var(--s3); text-wrap:balance; max-width:14ch; }
.post .dek { font-size:1.3rem; line-height:1.45; margin:0; max-width:44rem; color:var(--muted); font-style:italic; }
.post h2 { font:800 clamp(1.6rem,2vw + 1rem,2.6rem)/1.05 var(--f-voice); letter-spacing:-.025em; margin:var(--s6) 0 var(--s3); text-wrap:balance; }
.post p { margin:0 0 var(--s3); }

/* home: masthead + an index where each post is led by its number */
.mast { padding-block:var(--s5); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem); gap:var(--s3) var(--s5); align-items:end; border-bottom:2px solid var(--ink); }
.mast h1 { font:800 clamp(4.5rem,12vw,13rem)/.78 var(--f-voice); letter-spacing:-.045em; margin:0; }
.mast p { margin:0; font-size:1.15rem; line-height:1.5; }
.mast .meta { display:block; margin-bottom:var(--s3); }

.index { list-style:none; margin:0; padding:0; }
.index li { display:grid; grid-template-columns:minmax(7rem,14rem) minmax(0,46rem) minmax(0,1fr); gap:var(--s2) var(--s4); padding-block:var(--s4); border-bottom:1px solid var(--rule); align-items:baseline; }
.index .num { font:700 clamp(2.4rem,5vw,3.8rem)/1 var(--f-voice); letter-spacing:-.04em; font-variant-numeric:tabular-nums; text-align:right; }
.index .num small { font-size:.45em; letter-spacing:0; color:var(--muted); font-weight:500; }
.index .num mark { padding:0 .08em; }
.index h2 { font:700 clamp(1.3rem,1.6vw + .8rem,1.9rem)/1.12 var(--f-voice); letter-spacing:-.02em; margin:0 0 var(--s2); text-wrap:balance; }
.index h2 a { text-decoration:none; }
.index h2 a:hover { text-decoration:underline; text-decoration-thickness:2px; }
.index p { margin:0; max-width:var(--measure); }
.index .meta { text-align:right; }
.index .first .num { color:var(--ink); }

/* plain pages (sobre) */
.page { max-width:var(--measure); padding-top:var(--s5); }
.page h1 { font:800 clamp(2.6rem,6vw + .5rem,5rem)/.95 var(--f-voice); letter-spacing:-.035em; margin:0 0 var(--s4); }
.page h2 { font:800 clamp(1.6rem,2vw + 1rem,2.6rem)/1.05 var(--f-voice); letter-spacing:-.025em; margin:var(--s5) 0 var(--s3); }
.page p { margin:0 0 var(--s3); font-size:1.15rem; line-height:1.55; }

@media (max-width: 960px) {
  .mast { grid-template-columns:1fr; }
  .mast h1 { font-size:clamp(4.5rem,22vw,10rem); }
}
@media (max-width: 760px) {
  .mast { padding-block:var(--s4); }
  .index li { grid-template-columns:minmax(0,1fr); gap:var(--s1); padding-block:var(--s3); }
  .index .num, .index .meta { text-align:left; }
  .post { display:block; padding-top:var(--s4); }
  .post header { display:block; padding-bottom:var(--s4); }
  .post header .meta { padding-top:0; display:block; margin-bottom:var(--s2); text-align:left; }
  .post > .aside { display:block; text-align:left; border-left:2px solid var(--rule); padding:0 0 0 var(--s2); margin:0 0 var(--s3); }
  .page { padding-top:var(--s4); }
}