/* blog.css · /blog, /news, their category pages and every post (2026-10-04; built by tools/build_blog.py). Prefixes: bl- (the index
   pages and cards), bp- (a post), bc (a cover). Loaded after type-calm.css and calm.css.
   Index (hawcx-page-layouts collection-index, from ElevenLabs' blog): a dark hero with a light two-tone H1 and the newest post on the
   elevated surface (text left, cover right), then one white area: the category pills, a 3-up grid of covers with the title and
   "category · date" under each, a numbered pager; then the dark close.
   Post (article-post, from ElevenLabs' blog post): a dark header set on the reading column (crumb, H1, label-over-value meta on a dotted
   rule, the action pair right), then the white reading area: "On this page" in a sticky 240px gutter beside a 720px column that opens
   on the post's cover; three related posts; the dark close. */

/* ---- covers: a smooth painted field (tools/gen_blog_covers.py, grain 0) + the crisp 1:1 grain tile + the post's hairline motif ---- */
.bc{--bc-field:none;position:relative;display:block;overflow:hidden;isolation:isolate;border-radius:14px;background-color:#07080c;
  background-image:url(/assets/grain-tile.png),var(--bc-field),var(--bc-grad);background-size:128px 128px,cover,cover;
  background-position:0 0,50% 50%,50% 50%;background-repeat:repeat,no-repeat,no-repeat}
/* until a post has its own field, its product's (agents: the Hawcx blue; passwordless: green; company: graphite) */
.bc-agents{--bc-grad:radial-gradient(120% 95% at 82% 8%,#5b8dff 0%,#1d56e0 26%,#0a3cb0 46%,#061c5c 72%,#03081c 100%)}
.bc-passwordless{--bc-grad:radial-gradient(120% 95% at 18% 92%,#7fe0bd 0%,#22a37f 24%,#0d6b54 46%,#063a2e 72%,#020f0c 100%)}
.bc-company{--bc-grad:radial-gradient(120% 95% at 70% 12%,#c9ccd3 0%,#7b808b 26%,#3d4048 50%,#1b1c20 76%,#08080a 100%)}
.bc{container-type:inline-size}
/* a line figure (tools/blog_covers/figures.mjs): white hairlines on the field */
.bc-m{position:absolute;left:50%;top:50%;width:76%;height:auto;max-height:84%;object-fit:contain;transform:translate(-50%,-50%);
  transition:transform .7s var(--ease)}
/* or a few words, set like the field's title (2026-10-05: text where a drawing can't explain the post), sized to the cover */
.bc-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 11%;text-align:center;color:#fff;
  font-size:6.4cqw;line-height:1.16;font-weight:400;letter-spacing:-.024em;text-wrap:balance}
.bc-photo{display:block;width:100%;height:100%;object-fit:cover}
.bc-card{aspect-ratio:4/3}
.bc-post{aspect-ratio:2/1}
.bc-feat{border-radius:0;min-height:100%}

/* ---- index: hero ---- */
body.pg-blog .bl-hero{padding:72px 0 88px}
body.pg-blog .bl-hero--plain{padding-bottom:72px}
body.pg-blog .bl-h1{max-width:none}
body.pg-blog .bl-dim{display:block;color:rgba(255,255,255,.55)}
body.pg-blog .bl-hero .cl-crumb ol{margin-bottom:32px}
body.pg-blog .bl-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:440px;margin-top:56px;overflow:hidden;color:#fff}
body.pg-blog .bl-feat-txt{display:flex;flex-direction:column;padding:40px 44px 40px}
body.pg-blog .bl-feat-k{font-size:14px;line-height:20px;letter-spacing:.01em;color:rgba(255,255,255,.55)}
body.pg-blog .bl-feat-t{margin-top:14px;font-size:32px;line-height:40px;font-weight:300;letter-spacing:-.022em;color:#fff;text-wrap:balance}
body.pg-blog .bl-feat .bl-meta{margin-top:16px;color:rgba(255,255,255,.55)}
body.pg-blog .bl-feat .bl-cat{color:rgba(255,255,255,.82)}
body.pg-blog .bl-feat-x{margin-top:auto;padding-top:40px;max-width:460px;font-size:16px;line-height:25px;color:rgba(255,255,255,.62)}
body.pg-blog .bl-feat:hover .bc-m{transform:translate(-50%,-50%) scale(1.03)}
body.pg-blog .bl-feat:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ---- index: the white area ---- */
body.pg-blog .bl-list{background:#fff;padding:72px 0 120px}
body.pg-blog .bl-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 44px}
body.pg-blog .bl-pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:9999px;font-size:14px;line-height:20px;
  letter-spacing:.01em;color:var(--ink-60);transition:color .15s,box-shadow .15s}
body.pg-blog .bl-pill:hover{color:var(--ink)}
body.pg-blog .bl-pill[aria-current]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-15);background:#fff}
body.pg-blog .bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px;margin:0;padding:0;list-style:none}
body.pg-blog .bl-card{display:block;color:var(--ink)}
body.pg-blog .bl-card:hover .bc-m{transform:translate(-50%,-50%) scale(1.04)}
body.pg-blog .bl-card:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:14px}
body.pg-blog .bl-t{margin:20px 0 0;font-size:19px;line-height:27px;font-weight:400;letter-spacing:-.008em;color:var(--ink);text-wrap:pretty}
body.pg-blog .bl-card:hover .bl-t{color:var(--ink-60)}
body.pg-blog .bl-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 0 0;font-size:14px;line-height:20px;color:var(--ink-60)}
body.pg-blog .bl-cat{color:var(--ink-80)}
body.pg-blog .bl-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin-top:72px}
body.pg-blog .bl-pg{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:9999px;
  font-size:14px;color:var(--ink-60);font-variant-numeric:tabular-nums;transition:color .15s,box-shadow .15s}
body.pg-blog .bl-pg:hover{color:var(--ink)}
body.pg-blog .bl-pg[aria-current]{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-15)}

/* ---- post: header ---- */
/* 2026-10-05 (user: "The title and all don't look aligned to the centre"): the column sits in the middle of the page and the contents
   live in the left margin, as ElevenLabs sets its posts; under 1180px the contents fold above the text and the column stays centred */
body.pg-post .bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,720px) minmax(0,1fr);column-gap:56px}
body.pg-post .bp-hero{padding:64px 0 56px}
body.pg-post .bp-head{grid-column:2;min-width:0}
body.pg-post .bp-hero .cl-crumb ol{margin-bottom:28px}
body.pg-post .bp-h1{max-width:none;font-size:46px;line-height:54px;letter-spacing:-.03em;text-wrap:balance}
body.pg-post .bp-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 32px;margin-top:40px;padding-top:24px;
  border-top:1px dotted rgba(255,255,255,.22)}
body.pg-post .bp-meta{display:flex;flex-wrap:wrap;gap:16px 44px;margin:0}
body.pg-post .bp-meta dt{font-size:13px;line-height:18px;letter-spacing:.01em;color:rgba(255,255,255,.55)}
body.pg-post .bp-meta dd{margin:4px 0 0;font-size:15px;line-height:22px;color:rgba(255,255,255,.88)}
body.pg-post .bp-meta dd span{color:rgba(255,255,255,.55)}
body.pg-post .bp-acts{display:flex;flex-wrap:wrap;gap:8px}

/* ---- post: the reading area ---- */
body.pg-post .bp-doc{background:#fff;padding:64px 0 96px}
body.pg-post .bp-toc{grid-column:1;grid-row:1;justify-self:start;width:100%;max-width:216px;position:sticky;top:104px;align-self:start;max-height:calc(100vh - 128px);overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;
  padding-top:4px}
body.pg-post .bp-toc-d{border:0}
body.pg-post .bp-toc-d>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:default;min-height:0;margin:0 0 12px;padding:0;
  font-size:13px;line-height:18px;font-weight:400;letter-spacing:.01em;color:var(--ink-60)}
body.pg-post .bp-toc-d>summary::-webkit-details-marker{display:none}
body.pg-post .bp-chev{display:none}
body.pg-post .bp-toc ol{margin:0;padding:0;list-style:none}
body.pg-post .bp-toc a{display:block;padding:6px 0;font-size:14px;line-height:20px;color:var(--ink-60);transition:color .15s}
body.pg-post .bp-toc a:hover,body.pg-post .bp-toc a[aria-current]{color:var(--ink)}
body.pg-post .bp-toc a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
body.pg-post .bp-prose{grid-column:2;grid-row:1;min-width:0;font-size:17px;line-height:30px;letter-spacing:-.002em;color:var(--ink-80)}
body.pg-post .bp-cover{margin:0 0 48px}
body.pg-post .bp-prose>p{margin:0 0 20px}
body.pg-post .bp-prose h2{margin:56px 0 16px;font-size:30px;line-height:38px;font-weight:300;letter-spacing:-.02em;color:var(--ink);scroll-margin-top:96px;text-wrap:balance}
body.pg-post .bp-prose h3{margin:40px 0 12px;font-size:21px;line-height:29px;letter-spacing:-.01em;color:var(--ink);scroll-margin-top:96px}
body.pg-post .bp-prose h4{margin:32px 0 8px;font-size:17px;line-height:26px;color:var(--ink);scroll-margin-top:96px}
body.pg-post .bp-prose h2+h3{margin-top:20px}
body.pg-post .bp-prose strong{font-weight:500;color:var(--ink)}
body.pg-post .bp-prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--ink-40);
  overflow-wrap:anywhere;transition:text-decoration-color .15s}
body.pg-post .bp-prose a:hover{text-decoration-color:var(--ink)}
body.pg-post .bp-prose ul,body.pg-post .bp-prose ol{margin:0 0 24px;padding-left:22px}
body.pg-post .bp-prose ul{list-style:disc}
body.pg-post .bp-prose ol{list-style:decimal}
body.pg-post .bp-prose li{padding-left:6px}
body.pg-post .bp-prose li+li{margin-top:6px}
body.pg-post .bp-prose li::marker{color:var(--ink-40)}
body.pg-post .bp-prose li>ul,body.pg-post .bp-prose li>ol{margin:6px 0 0}
body.pg-post .bp-prose blockquote{margin:36px 0;padding:0 0 0 28px;font-size:22px;line-height:33px;font-weight:300;letter-spacing:-.012em;color:var(--ink);position:relative}
body.pg-post .bp-prose blockquote::before{content:"\201C";position:absolute;left:0;top:-4px;font-size:34px;line-height:1;color:var(--ink-40)}
body.pg-post .bp-prose blockquote p{margin:0 0 12px}
body.pg-post .bp-prose blockquote p:last-child{margin:0}
body.pg-post .bp-fig{margin:40px 0}
body.pg-post .bp-fig img,body.pg-post .bp-fig video{display:block;width:100%;height:auto;border-radius:12px;background:#f3f3f1}
body.pg-post .bp-fig figcaption{margin-top:12px;font-size:14px;line-height:21px;color:var(--ink-60)}
body.pg-post .bp-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#111}
body.pg-post .bp-table{margin:32px 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
body.pg-post .bp-table:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}
body.pg-post .bp-table table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:23px}
body.pg-post .bp-table th{padding:0 16px 12px 0;text-align:left;font-weight:500;color:var(--ink);border-bottom:1px solid var(--ink-15);vertical-align:bottom}
body.pg-post .bp-table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--ink-08);vertical-align:top}
body.pg-post .bp-code{margin:32px 0;padding:18px 20px;border-radius:12px;background:#161618;color:rgba(255,255,255,.86);overflow-x:auto;
  font-family:var(--mono);font-size:13.5px;line-height:22px;white-space:pre}
body.pg-post .bp-prose :not(pre)>code{padding:1px 6px;border-radius:5px;background:var(--ink-06);font-family:var(--mono);font-size:.86em;color:var(--ink)}
body.pg-post .bp-prose hr{height:1px;margin:48px 0;border:0;background:var(--ink-08)}
body.pg-post .bp-share{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:56px;padding-top:22px;border-top:1px solid var(--ink-08);
  font-size:14px;line-height:20px;color:var(--ink-60)}
body.pg-post .bp-share span{margin-right:4px}
body.pg-post .bp-share a,body.pg-post .bp-share button{color:var(--ink);text-decoration:none;transition:color .15s}
body.pg-post .bp-share a:hover,body.pg-post .bp-share button:hover{color:var(--ink-60)}
body.pg-post .bp-share button{padding:0;font:inherit;background:none;border:0;cursor:pointer}

/* related */
body.pg-post .bp-more{padding:8px 0 112px}
body.pg-post .bp-more-hd{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:36px}
body.pg-post .bp-more .cl-h2{font-size:30px;line-height:38px}

@media (max-width:1180px){
  body.pg-post .bp-grid{grid-template-columns:minmax(0,720px);justify-content:center}
  body.pg-post .bp-head,body.pg-post .bp-prose,body.pg-post .bp-toc{grid-column:1;grid-row:auto}
  body.pg-post .bp-toc{position:static;max-width:none;max-height:none;overflow:visible;margin:0 0 32px;border-top:1px dotted var(--ink-15);border-bottom:1px dotted var(--ink-15)}
  body.pg-post .bp-toc-d>summary{margin:0;min-height:52px;padding:14px 0;cursor:pointer;font-size:15px;line-height:22px;color:var(--ink)}
  body.pg-post .bp-chev{display:block;flex:none;width:8px;height:8px;margin-right:2px;border-right:1.4px solid var(--ink-60);border-bottom:1.4px solid var(--ink-60);
    transform:translateY(-2px) rotate(45deg);transition:transform .2s}
  body.pg-post .bp-toc-d[open] .bp-chev{transform:translateY(2px) rotate(225deg)}
  body.pg-post .bp-toc ol{padding:0 0 16px}
}
@media (max-width:1100px){
  body.pg-blog .bl-feat-t{font-size:28px;line-height:36px}
}
@media (max-width:900px){
  body.pg-blog .bl-feat{grid-template-columns:minmax(0,1fr);min-height:0}
  body.pg-blog .bl-feat .bc-feat{order:-1;aspect-ratio:16/9;min-height:0}
  body.pg-blog .bl-feat-txt{padding:28px 24px 32px}
  body.pg-blog .bl-feat-x{margin-top:0;padding-top:20px}
  body.pg-blog .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 20px}
  body.pg-post .bp-h1{font-size:38px;line-height:46px}
  body.pg-post .bp-doc{padding:40px 0 80px}
}
@media (max-width:640px){
  body.pg-blog .bl-hero{padding:48px 0 56px}
  body.pg-blog .bl-feat{margin-top:36px}
  body.pg-blog .bl-feat-t{font-size:24px;line-height:31px}
  body.pg-blog .bl-list{padding:48px 0 88px}
  body.pg-blog .bl-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 32px;padding:0 16px;scrollbar-width:none}
  body.pg-blog .bl-filter::-webkit-scrollbar{display:none}
  body.pg-blog .bl-pill{flex:none}
  body.pg-blog .bl-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  body.pg-blog .bl-t{font-size:18px;line-height:26px}
  body.pg-post .bp-hero{padding:44px 0 40px}
  body.pg-post .bp-h1{font-size:32px;line-height:39px}
  body.pg-post .bp-meta{gap:14px 28px}
  body.pg-post .bp-prose{font-size:16px;line-height:28px}
  body.pg-post .bp-prose h2{font-size:25px;line-height:32px;margin-top:44px}
  body.pg-post .bp-prose blockquote{font-size:19px;line-height:29px;padding-left:22px}
  body.pg-post .bp-cover{margin-bottom:32px}
  body.pg-post .bc-post{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .bc-m{transition:none}
}