:root {
  --bg: #FBF8F2; --bg-raised: #FFFDF7; --ink: #232020; --muted: #635C54;
  --teal: #0E7C7B; --teal-strong: #0A5F5E; --gold: #E0A423; --rule: #E6DFD2;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14171A; --bg-raised: #1D2226; --ink: #F1ECE3; --muted: #B8B0A4;
    --teal: #35B7B4; --teal-strong: #57C9C6; --gold: #F0BE50; --rule: #2C3237; color-scheme: dark; }
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.55; margin: 0; }
.shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); max-width: 62rem;
  margin: 0 auto; min-height: 100vh; }
nav.side { border-right: 1px solid var(--rule); padding: 2.2rem 1.25rem; }
nav.side .brand { font-weight: 600; font-size: 1.05rem; margin: 0 0 .2rem; }
nav.side .brand a { color: var(--ink); text-decoration: none; }
nav.side .tag { font-family: system-ui, sans-serif; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 1.6rem; }
nav.side ul { list-style: none; margin: 0; padding: 0; font-family: system-ui, sans-serif; font-size: .92rem; }
nav.side li { margin: 0 0 .35rem; }
nav.side a { color: var(--ink); text-decoration: none; display: block; padding: .35rem .6rem; border-radius: 6px; }
nav.side a:hover { background: var(--bg-raised); }
nav.side a.active { background: var(--bg-raised); border: 1px solid var(--rule); color: var(--teal-strong); font-weight: 600; }
nav.side .ext { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
nav.side .ext a { color: var(--muted); font-size: .84rem; padding: .25rem .6rem; }
main { padding: 2.2rem 2rem 4rem; }
.eyebrow { font-family: system-ui, sans-serif; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); font-weight: 600; margin: 0 0 .5rem; }
h1 { font-size: 1.8rem; font-weight: 600; margin: 0 0 .5rem; letter-spacing: -.01em; text-wrap: balance; }
.lede { color: var(--muted); margin: 0 0 1.5rem; max-width: 38rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 2rem 0 .75rem; }
.card { background: var(--bg-raised); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.25rem 1.35rem; margin: 0 0 1rem; }
.card h3 { margin: 0; font-size: 1.12rem; font-weight: 600; }
.card h3 a { color: var(--ink); text-decoration: none; }
.byline { font-family: system-ui, sans-serif; font-size: .78rem; color: var(--muted); margin: .15rem 0 .5rem; }
.badge { font-family: system-ui, sans-serif; font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-strong); background: color-mix(in srgb, var(--teal) 12%, transparent);
  border-radius: 999px; padding: .18rem .55rem; vertical-align: middle; margin-left: .5rem; }
.swatches { display: flex; gap: .4rem; margin: .6rem 0; }
.swatch { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--rule); }
.desc { margin: .5rem 0; font-size: .96rem; }
.meta { font-family: system-ui, sans-serif; font-size: .82rem; color: var(--muted); margin: .5rem 0 0; }
.meta code, .desc code { background: var(--bg); border: 1px solid var(--rule); border-radius: 4px;
  padding: .05rem .35rem; font-size: .78rem; font-family: ui-monospace, monospace; }
a { color: var(--teal-strong); }
.links { font-family: system-ui, sans-serif; font-size: .85rem; margin-top: .65rem; }
.submit { border-left: 3px solid var(--gold); margin-top: 2.5rem; }
footer.page { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: system-ui, sans-serif; font-size: .82rem; color: var(--muted); }
@media (max-width: 46rem) {
  .shell { grid-template-columns: 1fr; }
  nav.side { border-right: 0; border-bottom: 1px solid var(--rule); padding: 1.4rem 1.25rem 1rem; }
  nav.side ul { display: flex; gap: .4rem; flex-wrap: wrap; }
  nav.side .ext { display: flex; gap: .4rem; margin-top: .8rem; padding-top: .8rem; }
  main { padding: 1.6rem 1.25rem 3rem; }
}