:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171512;
  background: #f5efe3;
  color-scheme: light;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
html { background: #f5efe3; overscroll-behavior-y: contain; }
body { margin: 0; min-width: 320px; background: #f5efe3; overscroll-behavior-y: contain; }
a { color: inherit; text-decoration: none; }
::selection { background: #d8ff66; color: #171512; }
.shell {
  min-height: 100dvh;
  overflow-x: clip;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  background:
    radial-gradient(circle at 50% -4rem, rgb(216 255 102 / 0.24), transparent min(28rem, 58vw)),
    radial-gradient(circle at calc(100% + 10rem) 14rem, rgb(255 143 77 / 0.16), transparent min(34rem, 70vw)),
    linear-gradient(180deg, rgb(245 239 227), rgb(245 239 227));
}
.site-header { border-bottom: 1px solid rgb(23 21 18 / 0.1); background: rgb(245 239 227 / 0.96); }
.nav { max-width: 72rem; margin: 0 auto; padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.brand { display: flex; align-items: center; gap: .75rem; }
.logo { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 1rem; background: #171512; color: #d8ff66; font-weight: 950; }
.brand-title { display: block; font-size: .875rem; font-weight: 950; text-transform: uppercase; letter-spacing: .24em; }
.brand-subtitle { display: block; margin-top: .15rem; color: #71685b; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .18em; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; color: #514b43; font-size: .875rem; font-weight: 800; }
.nav-links a:hover { color: #171512; }
.wrap { max-width: 64rem; margin: 0 auto; padding: 2.5rem 1.25rem max(5rem, calc(env(safe-area-inset-bottom) + 4rem)); }
.article-wrap { max-width: 48rem; }
.kicker { margin: 0; color: #7b6d21; font-size: .75rem; font-weight: 950; letter-spacing: .24em; text-transform: uppercase; }
h1 { margin: .75rem 0 0; font-size: clamp(2.35rem, 8vw, 4.7rem); line-height: .92; letter-spacing: -.06em; font-weight: 950; }
.deck { max-width: 42rem; margin: 1.1rem 0 0; color: #5d554a; font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.75; font-weight: 680; }
.index-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgb(23 21 18 / .1); }
.index-title { font-size: clamp(2rem, 6vw, 3rem); }
.post-list { display: grid; gap: 0; margin-top: 1rem; }
.post-row { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid rgb(23 21 18 / .1); }
.post-row:first-child { border-top: 0; }
.post-row:hover { border-color: rgb(23 21 18 / .22); }
@supports (content-visibility: auto) {
  .post-row, .card, .data-panel, .prose h2, .prose blockquote, .prose ul {
    content-visibility: auto;
    contain-intrinsic-size: auto 12rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.post-number { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(23 21 18 / .12); border-radius: 999px; color: #7b6d21; font-size: .82rem; font-weight: 950; }
.post-row-copy strong { display: block; font-size: 1.3rem; line-height: 1.05; letter-spacing: -.04em; font-weight: 950; }
.post-row-copy small { display: block; margin-top: .35rem; color: #6c645a; font-size: .9rem; line-height: 1.45; font-weight: 720; }
.post-meta { color: #72695d; font-size: .78rem; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.back { display: inline-flex; margin-bottom: 2rem; color: #6d6134; font-size: .875rem; font-weight: 950; text-transform: uppercase; letter-spacing: .18em; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.tag { border: 1px solid rgb(23 21 18 / .1); border-radius: 999px; background: rgb(255 255 255 / .62); padding: .3rem .75rem; color: #5d554a; font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .14em; }
.date { margin-top: 1rem; color: #82786b; font-size: .9rem; font-weight: 800; }
.prose { margin-top: 3rem; color: #29251f; }
.prose p { margin: 0 0 1.45rem; font-size: 1.08rem; font-weight: 560; line-height: 1.9; }
.prose h2 { margin: 3rem 0 1rem; font-size: clamp(2rem, 4vw, 3rem); font-weight: 950; letter-spacing: -.055em; line-height: .98; }
.prose blockquote { margin: 2.5rem 0; border-left: .45rem solid #d8ff66; border-radius: 1.25rem; background: rgb(255 255 255 / .62); padding: 1.5rem; color: #312d26; font-size: 1.25rem; font-weight: 850; line-height: 1.55; }
ul.clean-list { display: grid; gap: .8rem; margin: 2rem 0; padding: 0; list-style: none; }
ul.clean-list li { border: 1px solid rgb(23 21 18 / .1); border-radius: 1.1rem; background: rgb(255 255 255 / .55); padding: 1rem 1.1rem; font-weight: 750; line-height: 1.6; }
.data-panel { contain: layout paint; margin: 2.6rem 0; border: 1px solid rgb(23 21 18 / .11); border-radius: 1.8rem; background: radial-gradient(circle at 20% 0%, rgb(216 255 102 / .3), transparent 34%), rgb(255 255 255 / .68); padding: clamp(1.2rem, 3vw, 1.6rem); }
.data-eyebrow { margin: 0; color: #766b2c; font-size: .72rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.data-panel h3 { margin: .45rem 0 0; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 950; letter-spacing: -.055em; line-height: 1; }
.metric-grid, .comparison-list { display: grid; gap: .75rem; margin-top: 1.25rem; }
.metric-card, .comparison-row { border: 1px solid rgb(23 21 18 / .1); border-radius: 1.25rem; background: rgb(245 239 227 / .75); padding: 1rem; }
.metric-card span, .comparison-row span { display: block; color: #675f55; font-size: .72rem; font-weight: 950; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.metric-card strong, .comparison-row b { display: block; margin-top: .35rem; color: #171512; font-size: clamp(1.55rem, 5vw, 2.15rem); font-weight: 950; letter-spacing: -.06em; line-height: .95; }
.metric-card small, .comparison-row small { display: block; margin-top: .65rem; color: #645c52; font-size: .9rem; font-weight: 720; line-height: 1.45; }
.category-grid { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card { display: block; border: 1px solid rgb(23 21 18 / .1); border-radius: 2rem; background: rgb(255 255 255 / .58); padding: 1.5rem; }
.card h2 { margin: 0; font-size: 2rem; font-weight: 950; letter-spacing: -.055em; line-height: 1; }
.card p, .card span { display: block; margin-top: 1rem; color: #645c52; font-size: .95rem; font-weight: 700; line-height: 1.65; }
.quiet-categories { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(23 21 18 / .1); color: #82786b; font-size: .75rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.note { margin-top: 3.5rem; border-top: 1px solid rgb(23 21 18 / .1); padding-top: 1.5rem; color: #6a6258; font-size: .9rem; font-weight: 750; line-height: 1.7; }
.exp-pill { display: inline-flex; margin-top: 1rem; border: 1px solid rgb(23 21 18 / .12); border-radius: 999px; padding: .45rem .75rem; background: rgb(255 255 255 / .55); color: #6c645a; font-size: .72rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 700px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparison-row { display: grid; grid-template-columns: 1fr minmax(8rem, auto) 1.1fr; gap: 1rem; align-items: center; }
  .comparison-row b, .comparison-row small { margin-top: 0; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .index-head { display: block; }
  .post-row { grid-template-columns: auto 1fr; }
  .post-meta { grid-column: 2; }
  .prose p { font-size: 1rem; }
  .shell { background: radial-gradient(circle at 50% -6rem, rgb(216 255 102 / .18), transparent 22rem), #f5efe3; }
}