:root{
  --ink:#181510; --ink-soft:#4F4940; --ink-mute:#6E6557;
  --cream:#FBF9F4; --cream-2:#F2EDE3; --cream-3:#ECE5D8; --paper:#FFFFFF;
  --accent:#B45309; --accent-2:#92400E; --gold:#D98324;
  --line:#E8E2D5; --shadow:rgba(48,34,16,.14);
  --ele-1:0 1px 2px hsl(34 45% 10%/.05),0 2px 4px hsl(34 45% 10%/.05),0 4px 8px hsl(34 45% 10%/.045);
  --ele-2:0 1px 2px hsl(34 45% 10%/.06),0 4px 8px hsl(34 45% 10%/.05),0 10px 20px hsl(34 45% 10%/.05),0 22px 38px -12px hsl(34 45% 10%/.09);
  --edge:inset 0 1px 0 hsl(40 70% 100%/.7);
}
[data-theme="dark"]{
  --ink:#F4F0E7; --ink-soft:#BCB5A8; --ink-mute:#8A8378;
  --cream:#100E0B; --cream-2:#17150F; --cream-3:#1E1B14; --paper:#1C1A13;
  --accent:#E8973A; --accent-2:#D98324; --gold:#F2B65A;
  --line:#2B2820; --shadow:rgba(0,0,0,.5);
  --ele-1:0 1px 2px hsl(0 0% 0%/.4),0 2px 5px hsl(0 0% 0%/.34);
  --ele-2:0 2px 6px hsl(0 0% 0%/.4),0 8px 18px -4px hsl(0 0% 0%/.5),0 20px 36px -10px hsl(0 0% 0%/.55);
  --edge:inset 0 1px 0 hsl(42 40% 85%/.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;
  transition:background .4s ease,color .4s ease}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* nav (shared with site) */
nav{position:fixed;top:0;inset-inline:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(20px,5vw,40px);background:color-mix(in srgb,var(--cream) 76%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.brand img{height:30px}[data-theme="dark"] .brand img{filter:invert(1)}
.nav-r{display:flex;align-items:center;gap:10px}
.tgl{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s}
.tgl:hover{border-color:var(--accent);color:var(--accent)}.tgl .sun{display:none}[data-theme="dark"] .tgl .moon{display:none}[data-theme="dark"] .tgl .sun{display:block}
.cta-btn{font-weight:600;font-size:14px;padding:9px 18px;border-radius:999px;background:var(--accent);color:#fff;transition:.25s}
.cta-btn:hover{transform:translateY(-1px);box-shadow:var(--ele-1)}

/* layout */
.wrap{max-width:760px;margin:0 auto;padding:128px clamp(20px,5vw,32px) 80px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px;display:block}
.wrap h1{font-size:clamp(2.2rem,5.4vw,3.2rem);line-height:1.08;font-weight:850;letter-spacing:-.03em;margin-bottom:14px}
.wrap h1 .serif{font-style:italic;font-weight:400;color:var(--accent)}
.post-meta{font-size:.9rem;color:var(--ink-mute);margin-bottom:40px}
.lede{font-size:1.2rem;line-height:1.6;color:var(--ink-soft);margin-bottom:36px;max-width:62ch}

/* prose */
.prose h2{font-size:1.55rem;font-weight:800;margin:2.6rem 0 .8rem;letter-spacing:-.015em}
.prose h3{font-size:1.2rem;font-weight:700;margin:1.8rem 0 .5rem}
.prose p{font-size:1.05rem;line-height:1.78;color:var(--ink-soft);margin-bottom:1.1rem;max-width:64ch}
.prose ul,.prose ol{margin:0 0 1.1rem 1.3rem;color:var(--ink-soft)}
.prose li{font-size:1.05rem;line-height:1.7;margin-bottom:.5rem;max-width:62ch}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose code{font-family:'JetBrains Mono',ui-monospace,monospace;background:var(--cream-2);border:1px solid var(--line);padding:2px 6px;border-radius:6px;font-size:.86em;white-space:nowrap}
.prose hr{margin:2.6rem 0;border:0;border-top:1px solid var(--line)}

/* CTA box inside articles */
.cta-box{margin:2.6rem 0;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:var(--ele-1),var(--edge)}
.cta-box h3{margin:0 0 6px;font-size:1.2rem;font-weight:800}
.cta-box p{margin:0 0 16px;color:var(--ink-soft)}
.cta-box a{display:inline-flex;align-items:center;gap:8px;font-weight:650;padding:12px 22px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none}

/* blog index cards */
.post-list{display:grid;gap:16px;margin-top:32px}
.post-card{display:block;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:var(--ele-1),var(--edge);transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--ele-2),var(--edge)}
.post-card .cat{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.post-card h2{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;margin:6px 0 8px}
.post-card p{color:var(--ink-soft);font-size:1rem;line-height:1.55}

/* back + footer */
.backrow{max-width:760px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.backrow .inner{margin-top:8px;padding-top:30px;border-top:1px solid var(--line)}
.backrow a{color:var(--ink-soft);font-weight:500;transition:.2s}.backrow a:hover{color:var(--accent)}
footer{padding:54px 0;border-top:1px solid var(--line);background:var(--cream-2);margin-top:72px}
.fshell{width:100%;max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
footer .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
footer .brand img{height:28px}[data-theme="dark"] footer .brand img{filter:invert(1)}
footer .links{display:flex;gap:24px;font-size:14px;color:var(--ink-soft);flex-wrap:wrap}
footer .links a:hover{color:var(--accent)}
footer .op{margin-top:22px;font-size:12px;color:var(--ink-mute);max-width:60ch}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}