:root{
  --bg:#eef0f0;
  --backdrop:#d3d6d7;
  --backdrop-2:#e2e4e5;
  --ink:#1a2529;
  --ink-2:#0f171c;
  --slate:#5d686d;
  --hair:#c3c8ca;
  --warm:#9c7b63;
  --warm-soft:#cdb6a2;

  --display:"Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --serif:"Newsreader", Georgia, serif;
  --body:"Hanken Grotesk", "Segoe UI", Roboto, system-ui, sans-serif;

  --gutter:clamp(16px, 4vw, 56px);
  --max:860px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none!important;transition:none!important} }
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--warm);outline-offset:4px;border-radius:2px}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;line-height:1.05;margin:0;color:var(--ink-2);text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:14px;color:var(--slate)}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.scrolled{border-bottom-color:var(--hair)}
.nav .wrap{max-width:1360px;display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.brand-sep{color:var(--hair);font-weight:400}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--warm);box-shadow:0 0 0 0 rgba(156,123,99,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(156,123,99,.45)}70%{box-shadow:0 0 0 9px rgba(156,123,99,0)}100%{box-shadow:0 0 0 0 rgba(156,123,99,0)}}
.nav .back{font-size:14.5px;color:var(--slate);transition:color .2s}
.nav .back:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--ink)}
.hero .wrap{max-width:1360px;padding-top:clamp(48px,8vh,88px);padding-bottom:clamp(40px,7vh,72px)}
.eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vh,32px)}
.eyebrow-row .rule{flex:0 0 32px;height:1px;background:var(--warm)}
.hero .name{font-size:clamp(44px,7vw,88px);font-weight:600;letter-spacing:-0.04em;line-height:.98}
.dot-accent{color:var(--warm)}
.hero .intro{margin-top:clamp(16px,2.6vh,24px);font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;color:var(--slate);max-width:52ch}

/* ---------- sections ---------- */
section.block{padding-block:clamp(48px,7vh,84px)}

/* ---------- post list ---------- */
.post-list{border-top:1px solid var(--hair)}
.post-card{display:block;padding-block:clamp(26px,4vh,40px);border-bottom:1px solid var(--hair);position:relative;transition:background .3s}
.post-card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.post-card:hover::after{transform:scaleX(1)}
.post-card .ptop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.post-card h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;transition:transform .4s var(--ease)}
.post-card:hover h2{transform:translateX(8px)}
.post-card .meta{margin-top:8px;font-size:13.5px;color:var(--slate);font-variant-numeric:tabular-nums}
.post-card p{margin-top:12px;color:var(--slate);font-size:16px;max-width:66ch}
.post-card .tags{display:flex;flex-wrap:wrap;gap:6px}
.post-card .tags span{font-size:12.5px;border:1px solid var(--hair);padding:4px 10px;border-radius:999px;color:var(--ink)}
.loading{color:var(--slate);padding-block:24px}

/* ---------- single post ---------- */
.wrap-article{max-width:720px}
.post-head{padding-top:clamp(40px,7vh,72px);border-bottom:1px solid var(--hair);padding-bottom:clamp(32px,5vh,48px)}
.post-head .meta{font-size:14px;color:var(--slate);font-variant-numeric:tabular-nums}
.post-head h1{margin-top:14px;font-size:clamp(32px,5vw,52px);letter-spacing:-.03em}
.post-head .tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.post-head .tags span{font-size:12.5px;border:1px solid var(--hair);padding:4px 10px;border-radius:999px;color:var(--ink)}

.prose{padding-block:clamp(32px,5vh,48px) clamp(56px,9vh,100px);font-size:17.5px;line-height:1.7;color:var(--ink)}
.prose > * + *{margin-top:1.3em}
.prose h1,.prose h2,.prose h3{margin-top:1.8em;letter-spacing:-.02em}
.prose h1{font-size:clamp(24px,3vw,32px)}
.prose h2{font-size:clamp(21px,2.4vw,26px)}
.prose h3{font-size:19px}
.prose p,.prose li{color:var(--ink)}
.prose a{color:var(--warm);text-decoration:underline;text-underline-offset:2px}
.prose strong{color:var(--ink-2);font-weight:600}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.4em}
.prose blockquote{margin:0;padding-left:20px;border-left:2px solid var(--warm);font-family:var(--serif);font-style:italic;color:var(--slate);font-size:1.15em}
.prose img{border:1px solid var(--hair);margin-block:1.6em}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--backdrop-2);padding:2px 6px;border-radius:4px}
.prose pre{background:var(--ink);color:var(--bg);padding:18px 20px;overflow-x:auto;border-radius:4px}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:none;border-top:1px solid var(--hair);margin-block:2em}

footer{background:var(--ink);color:color-mix(in srgb,var(--bg) 50%,transparent)}
footer .wrap{max-width:1360px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 28px;border-top:1px solid color-mix(in srgb,var(--bg) 14%,transparent);font-size:13px}
footer a{transition:color .2s}
footer a:hover{color:var(--bg)}