/* Styles for the function-rendered blog pages.
   Deliberately standalone: the Astro build hashes its CSS filenames, so a
   Cloud Function cannot link to them reliably. Keep the tokens here in step
   with src/styles/global.css if the palette ever changes. */
:root{
  --ink:#f4f2ee; --ink-dim:#a5a09a; --ink-faint:#6d6863;
  --bg:#0b0a09; --bg-raised:#131110; --line:#2a2724;
  --accent:#9fd8ff; --accent-ink:#07131c;
  --display:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --gutter:20px;
}
@media(min-width:700px){:root{--gutter:32px}}
@media(min-width:1100px){:root{--gutter:56px}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,96px)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:7px;font-family:var(--display)}
.b1{font-weight:900;font-size:18px;letter-spacing:-.02em}
.b2{font-weight:500;font-size:15px;color:var(--ink-dim);font-family:var(--body)}
.links{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.links a{text-decoration:none;font-size:14px;color:var(--ink-dim);padding:10px 12px;border-radius:999px}
.links a:hover{color:var(--ink);background:var(--bg-raised)}
.links .cta{background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:700;padding:12px 20px}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.026em;line-height:1.02;text-wrap:balance}
.eyebrow{font-family:var(--display);font-size:.8125rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 16px}
.d2{font-size:clamp(1.65rem,2.2vw + 1.13rem,2.5rem);text-transform:uppercase}
.lede{font-size:clamp(1.125rem,.4vw + 1.03rem,1.3125rem);line-height:1.5;color:var(--ink-dim);max-width:46ch;margin-top:20px}

/* index list */
.plist{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line)}
.plist a{display:block;padding:32px 0;text-decoration:none}
.plist a:hover{background:var(--bg-raised);padding-inline:20px}
.plist time{font-size:13px;color:var(--ink-faint)}
.plist h2{font-size:1.5rem;margin:10px 0 10px;letter-spacing:-.018em;line-height:1.1}
.plist p{color:var(--ink-dim);margin:0;max-width:64ch}

/* post */
.phead{padding-block:clamp(36px,6vw,64px) 0}
.phead time{font-size:13px;color:var(--ink-faint)}
.phead h1{margin-top:14px;max-width:20ch}
.prose{max-width:72ch;padding-block:clamp(32px,5vw,56px) clamp(56px,9vw,110px)}
.prose h2{font-size:clamp(1.5rem,3vw,2rem);margin:56px 0 18px}
.prose h3{font-size:1.25rem;margin:36px 0 12px}
.prose p{color:var(--ink-dim);line-height:1.75}
.prose ul,.prose ol{color:var(--ink-dim);padding-left:1.2em;display:flex;flex-direction:column;gap:10px;margin:0 0 1.5em}
.prose strong{color:var(--ink)}
.prose a{color:var(--accent);text-underline-offset:3px}
.prose blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent);font-size:1.15rem;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.prose table{width:100%;border-collapse:collapse;margin:28px 0;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose td{color:var(--ink-dim)}

.pcta{margin-top:64px;padding:32px;background:var(--bg-raised);border:1px solid var(--line);border-radius:12px}
.pcta h2{font-size:1.5rem;margin:0 0 12px}
.pcta p{color:var(--ink-dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:16px 32px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:700;font-size:.9375rem;text-decoration:none}

/* footer */
.ft{border-top:1px solid var(--line);background:var(--bg-raised);padding-block:48px 32px;color:var(--ink-dim)}
.ft a{color:var(--accent)}
.ft .small{color:var(--ink-faint);font-size:13px;margin-top:8px}