/* alcove blog: shared styles for /blog/ and individual posts */
:root{
  --canvas:#F4F1EA;
  --canvas-2:#ECE7DC;
  --ink:#0F0E0C;
  --ink-soft:#4A453B;
  --muted:#8A8275;
  --accent:#3D8BFF;
  --blue:#3D8BFF;
  --blue-700:#2E7EF2;
  --surface:#FFFFFF;
  --surface-warm:#FBF9F3;
  --line:#E8E6DE;
  --radius:22px;
  --radius-sm:14px;
  --maxw:1140px;
  --measure:720px;
  --display:'Hanken Grotesk',system-ui,sans-serif;
  --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}

/* nav (mirrors the landing page) */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,241,234,0.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent}
.nav.scrolled{border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,3vw,16px);height:68px}
.brand{display:flex;align-items:center;gap:clamp(7px,2vw,9px);font-family:var(--display);font-weight:800;font-size:clamp(15px,4.6vw,22px);letter-spacing:-0.03em}
.brand .amark{height:clamp(20px,5.4vw,26px);aspect-ratio:68/73;width:auto;display:block;flex:none}
.nav-left{display:flex;align-items:center;gap:clamp(6px,2vw,11px)}
.nav-sep{color:var(--muted);font-family:var(--display);font-weight:400;font-size:clamp(13px,4vw,20px);line-height:1}
.nav-link{font-family:var(--display);font-weight:700;font-size:clamp(11.5px,3vw,14.5px);color:var(--ink-soft);white-space:nowrap;transition:color .18s ease}
.nav-link:hover,.nav-link.is-on{color:var(--ink)}
.nav-cta{font-family:var(--display);font-weight:700;font-size:clamp(11.5px,3vw,14.5px);background:var(--blue);color:#fff;padding:clamp(7px,2vw,10px) clamp(11px,3.4vw,18px);border-radius:999px;white-space:nowrap;flex:none;transition:transform .18s ease,background .18s ease}
.nav-cta:hover{transform:translateY(-1px);background:var(--blue-700)}
@media(max-width:380px){.nav .wrap{padding:0 16px}}

/* blog index */
.blog-head{padding:64px 0 28px;max-width:var(--measure)}
.blog-head h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,5vw,52px);letter-spacing:-0.04em;line-height:1.1;margin-top:12px}
.blog-head p{margin-top:14px;color:var(--ink-soft);font-size:18px;max-width:48ch}
.posts{display:grid;gap:16px;padding:12px 0 96px;max-width:var(--measure)}
.post-card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.post-card:hover{transform:translateY(-2px);border-color:#D9D6CC;box-shadow:0 14px 40px rgba(15,14,12,.08)}
.post-card .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.post-card h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,28px);letter-spacing:-0.03em;line-height:1.2;margin-top:10px}
.post-card p{margin-top:10px;color:var(--ink-soft);font-size:16px}
.post-card .more{display:inline-block;margin-top:16px;font-weight:700;color:var(--blue)}
@media(max-width:540px){.post-card{padding:22px 20px}}

/* post */
.post{max-width:var(--measure);margin:0 auto;padding:56px 0 96px}
.post-header{padding-bottom:28px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.post-header .crumb{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--blue)}
.post-header .crumb:hover{color:var(--blue-700)}
.post-header h1{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.6vw,48px);letter-spacing:-0.04em;line-height:1.12;margin-top:18px}
.post-header .meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.post-header .meta .author{color:var(--ink-soft)}
.post-body h2{font-family:var(--display);font-weight:800;font-size:clamp(24px,3.2vw,30px);letter-spacing:-0.03em;line-height:1.2;margin:44px 0 14px}
.post-body h2:first-child{margin-top:0}
.post-body p{margin:0 0 18px;color:var(--ink)}
.post-body .lede{font-size:19px;line-height:1.55;color:var(--ink-soft);margin-bottom:36px}
.post-body p strong{font-weight:700}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:24px}
.post-body li{margin:8px 0}
.post-body li>p{margin:0}
.post-body code{font-family:var(--mono);font-size:.84em;background:var(--canvas-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;white-space:nowrap}
.post-body a{color:var(--blue);text-decoration:underline;text-decoration-color:rgba(61,139,255,.35);text-underline-offset:3px}
.post-body a:hover{color:var(--blue-700)}
.post-body .step{margin:22px 0}
.post-body .step h3{display:inline;font-family:var(--display);font-weight:800;font-size:1em;letter-spacing:-0.01em}
.post-body .step h3::after{content:" "}
.post-body .step>p:first-of-type{display:inline}
.post-body .step ul{margin-top:12px}
.tbl{width:100%;overflow-x:auto;margin:6px 0 24px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:15px;min-width:440px}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl td.num,.tbl th.num{white-space:nowrap;padding-left:8px}
.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-warm);font-weight:700}
.tbl tr:last-child td{border-bottom:0}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
@media(min-width:900px){.tbl{margin-left:-28px;margin-right:-28px}}
.tbl td.num.lead{color:var(--blue);font-weight:700}
.post-footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;font-size:15px;color:var(--ink-soft)}
.post-footer a{font-weight:700;color:var(--blue)}
.post-footer a:hover{color:var(--blue-700)}

/* footer (mirrors the landing page) */
footer{border-top:1px solid var(--line);padding:34px 0 56px}
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.built{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);transition:color .18s ease}
.built .amark{height:18px;aspect-ratio:68/73;width:auto;display:block;flex:none}
.built:hover{color:var(--ink-soft)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;font-size:14px;color:var(--ink-soft)}
.foot-links a:hover{color:var(--ink)}
.foot-links .x-link{display:inline-flex;align-items:center;gap:6px}
.foot-links .x-link svg{width:14px;height:14px;flex:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}