/* Sodlot shared styles. Tokens match the homepage exactly. */
:root {
  --ground:#F5F8F1; --surface:#FFFFFF; --surface-2:#EAF0E4;
  --ink:#14241A; --ink-soft:#4C5E50; --line:#D6E1CE;
  --turf:#2F6B3C; --turf-deep:#1B4526; --growth:#8FD14F; --on-growth:#14241A;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --measure:68ch; --gutter:clamp(1.1rem,4vw,2.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#0D140F; --surface:#141D17; --surface-2:#1B261E;
    --ink:#E9F1E5; --ink-soft:#9FB2A4; --line:#26332A;
    --turf:#7CC77F; --turf-deep:#A8DCA6; --growth:#A9E05C; --on-growth:#10190F;
  }
}
:root[data-theme="dark"] {
  --ground:#0D140F; --surface:#141D17; --surface-2:#1B261E;
  --ink:#E9F1E5; --ink-soft:#9FB2A4; --line:#26332A;
  --turf:#7CC77F; --turf-deep:#A8DCA6; --growth:#A9E05C; --on-growth:#10190F;
}
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { font-family:var(--display); font-weight:600; line-height:1.12; text-wrap:balance; margin:0; letter-spacing:-.015em; }
h1 { font-size:clamp(2.1rem,4.5vw,3.4rem); }
h2 { font-size:clamp(1.5rem,2.6vw,2rem); }
p { margin:0; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--turf); outline-offset:3px; border-radius:3px; }
.wrap { width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--gutter); }
.narrow { max-width:760px; }
.eyebrow { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--turf); margin:0 0 .75rem; }

/* nav */
.nav { position:sticky; top:0; z-index:50; background:color-mix(in oklab,var(--ground) 88%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.nav-in { display:flex; align-items:center; gap:1.5rem; height:60px; }
.brand { font-family:var(--display); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:.55rem; }
.brand-mark { width:22px; height:22px; border-radius:2px; background:repeating-linear-gradient(100deg,var(--turf-deep) 0 2px,var(--turf) 2px 4px); }
.nav-links { display:none; gap:1.35rem; margin-left:auto; }
.nav-links a { font-size:.9rem; font-weight:500; text-decoration:none; color:var(--ink-soft); }
.nav-links a:hover { color:var(--ink); }
.nav .btn { margin-left:auto; padding:.55rem 1rem; font-size:.85rem; }
.nav-links + .btn { margin-left:0; }
@media (min-width:800px) { .nav-links { display:flex; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--body); font-size:.95rem; font-weight:600; padding:.85rem 1.4rem; border-radius:2px; border:1px solid transparent; cursor:pointer; text-decoration:none; }
.btn-primary { background:var(--growth); color:var(--on-growth); }
.btn-ghost { border-color:currentColor; color:var(--ink); }

/* listing */
.head { padding-block:clamp(2.5rem,6vw,4rem) 1.5rem; }
.lede { color:var(--ink-soft); max-width:var(--measure); font-size:1.06rem; margin-top:.9rem; }
.posts { display:grid; gap:1.15rem; grid-template-columns:1fr; padding-bottom:4rem; }
@media (min-width:700px) { .posts { grid-template-columns:repeat(2,1fr); } }
.post-card { background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:1.4rem; display:flex; flex-direction:column; gap:.7rem; transition:box-shadow .15s ease; }
.post-card:hover { box-shadow:0 6px 22px rgba(20,36,26,.09); }
.post-card h2 { font-size:1.3rem; }
.post-card h2 a { text-decoration:none; }
.post-card h2 a:hover { text-decoration:underline; }
.post-card p { color:var(--ink-soft); font-size:.93rem; flex:1; }
.meta { font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--turf); }
.date { font-family:var(--mono); font-size:.75rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }

/* article */
.crumb { font-size:.85rem; color:var(--ink-soft); text-decoration:none; display:inline-block; margin-block:1.6rem .6rem; }
.crumb:hover { color:var(--ink); }
article { padding-bottom:3rem; }
article .body { margin-top:2rem; }
article .body h2 { margin:2.2rem 0 .7rem; }
article .body p { margin-bottom:1rem; color:var(--ink-soft); max-width:var(--measure); }
article .body ul { margin:1rem 0 1.4rem; padding-left:1.2rem; color:var(--ink-soft); max-width:var(--measure); }
article .body li { margin-bottom:.45rem; }
.byline { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:1rem; }
hr.rule { border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
.cta { background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:1.8rem; text-align:center; }
.cta h2 { font-size:1.4rem; }
.cta p { color:var(--ink-soft); margin:.6rem 0 1.3rem; }

/* footer */
footer.site { background:var(--turf-deep); color:#DDE8D6; padding-block:2.6rem 1.6rem; margin-top:2rem; }
footer.site a { color:#DDE8D6; }
.foot-grid { display:grid; gap:1.6rem; grid-template-columns:1fr; }
@media (min-width:700px) { .foot-grid { grid-template-columns:2fr 1fr 1fr; } }
.foot-grid h3 { font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#A9C6A2; font-weight:400; margin:0; }
.foot-grid ul { list-style:none; margin:.7rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem; font-size:.9rem; }
.foot-note { border-top:1px solid rgba(255,255,255,.14); margin-top:2rem; padding-top:1.1rem; font-size:.8rem; color:#A9C6A2; }
