*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-0:hsl(40,15%,97%); --bg-1:hsl(40,15%,93%); --bg-2:hsl(40,12%,88%);
  --ink-0:hsl(20,10%,10%); --ink-1:hsl(20,8%,28%); --ink-2:hsl(20,6%,46%);
  --rust:hsl(24,64%,44%); --rust-h:hsl(24,70%,50%); --rust-d:hsl(24,64%,36%);
  --line:hsl(30,8%,82%);
  --serif:'Lora',Georgia,serif;
  --sans:'Lato',-apple-system,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --display:'Baumans','Lora',Georgia,serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--serif);background:var(--bg-0);color:var(--ink-0);line-height:1.75;font-size:18px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.028;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .15  0 0 0 0 .10  0 0 0 0 .05  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-size:320px 320px}
a{color:var(--rust);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 120ms}
a:hover{border-bottom-color:var(--rust)}

nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;background:rgba(249,246,239,.82);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-size:1.3rem;letter-spacing:.03em;color:var(--ink-0);border-bottom:none}
.logo:hover{border-bottom:none}
.logo .dot{color:var(--rust);margin:0 .15em}
.nav-r a{font-family:var(--sans);font-size:.9rem;color:var(--ink-1);margin-left:1.5rem;border-bottom:none}
.nav-r a:hover{color:var(--rust);border-bottom:none}

main{position:relative;z-index:2}
footer{max-width:860px;margin:4rem auto 0;padding:2rem 32px;border-top:1px solid var(--line);font-family:var(--sans);font-size:.85rem;color:var(--ink-2);text-align:center}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--rust)}

/* ========= Post page ========= */
.post-main{max-width:720px;margin:0 auto;padding:128px 32px 96px}
.back{display:inline-block;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--ink-2);margin-bottom:3rem;border-bottom:none}
.back:hover{color:var(--rust);border-bottom:none}
.post-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1.5rem}
.post-meta .sep{margin:0 .6em;color:var(--line)}
.post-main h1{font-family:var(--sans);font-size:2.4rem;line-height:1.25;font-weight:700;margin:0 0 2rem;letter-spacing:-.015em}
.post-main h2{font-family:var(--sans);font-size:1.35rem;font-weight:700;margin:3rem 0 1rem;color:var(--ink-0);letter-spacing:-.01em}
.post-main h3{font-family:var(--sans);font-size:1.05rem;font-weight:700;margin:2rem 0 .6rem;color:var(--ink-1)}
.post-main p{margin-bottom:1.25rem;color:var(--ink-1)}
.post-main p:first-of-type{font-size:1.15rem;font-style:italic;color:var(--ink-1);margin-bottom:2rem;padding-left:1rem;border-left:3px solid var(--rust)}
.post-main strong{color:var(--ink-0);font-weight:700}
.post-main em{color:var(--ink-0)}
.post-main ul,.post-main ol{margin:1rem 0 1.5rem 1.5rem;color:var(--ink-1)}
.post-main li{margin-bottom:.5rem}
.post-main code{font-family:var(--mono);font-size:.88em;background:var(--bg-2);padding:.1em .35em;border-radius:3px;color:var(--ink-0)}
.post-main pre{background:var(--bg-2);padding:1rem 1.25rem;border-radius:6px;overflow-x:auto;margin:1.5rem 0;font-size:.85rem;line-height:1.55}
.post-main pre code{background:none;padding:0;font-size:inherit}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;padding:1.5rem;background:var(--bg-1);border:1px solid var(--line);border-radius:6px}
.stat{text-align:center}
.stat-n{font-family:var(--display);font-size:2rem;color:var(--rust);line-height:1}
.stat-l{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-top:.5rem}

.callout{background:var(--bg-1);border:1px solid var(--line);border-left:4px solid var(--rust);padding:1.25rem 1.5rem;margin:2rem 0;font-size:.96rem}
.callout strong{display:block;margin-bottom:.4rem;font-family:var(--sans);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rust-d)}

.cta{margin-top:4rem;padding:2.5rem;background:var(--bg-1);border:1px solid var(--line);border-radius:8px;text-align:center}
.cta h3{font-family:var(--sans);font-size:1.35rem;font-weight:700;color:var(--ink-0);margin-bottom:.6rem}
.cta p{margin-bottom:1.5rem}
.btn{display:inline-block;padding:.75rem 1.75rem;background:var(--rust);color:var(--bg-0);border-radius:4px;font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:.03em;border-bottom:none;transition:background 120ms}
.btn:hover{background:var(--rust-h);border-bottom:none}

/* ========= Index page ========= */
.index-main{max-width:860px;margin:0 auto;padding:128px 32px 96px}
.hero{margin-bottom:5rem}
.hero h1{font-family:var(--sans);font-size:2.8rem;font-weight:700;line-height:1.15;letter-spacing:-.015em;margin-bottom:1rem}
.hero p{font-family:var(--serif);font-style:italic;color:var(--ink-1);font-size:1.15rem}
.post-list{display:flex;flex-direction:column;gap:2.5rem}
.post-card{padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
.post-card:last-child{border-bottom:none}
.post-card .meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.75rem}
.post-card .meta .sep{margin:0 .6em;color:var(--line)}
.post-card h2{font-family:var(--sans);font-size:1.6rem;font-weight:700;line-height:1.3;margin-bottom:.75rem;color:var(--ink-0);letter-spacing:-.01em}
.post-card h2 a{color:inherit;border-bottom:none;transition:color 120ms}
.post-card h2 a:hover{color:var(--rust);border-bottom:none}
.post-card p{color:var(--ink-1);font-size:1.02rem;line-height:1.7}
.post-card .readmore{display:inline-block;margin-top:1rem;font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--rust);letter-spacing:.02em;border-bottom:1px solid transparent;transition:border-color 120ms}
.post-card .readmore:hover{border-bottom-color:var(--rust)}

@media (max-width:640px){
  .post-main,.index-main{padding:96px 24px 64px}
  .post-main h1{font-size:2rem}
  .hero h1{font-size:2.2rem}
  .post-card h2{font-size:1.35rem}
  .stat-row{grid-template-columns:1fr;gap:.5rem}
  .stat-n{font-size:1.5rem}
}