/* Gemlo blog. Loaded after /styles.css; reuses its tokens, header, buttons and footer. */
.blog-top{background:var(--orange);color:var(--ink)}
.kicker{font:600 13px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* Index */
.blog-index{padding-top:clamp(40px,7vw,96px);padding-bottom:clamp(48px,8vw,110px)}
.index-head{max-width:820px}
.index-head h1{font-weight:900;font-size:clamp(42px,7vw,88px);line-height:.95;letter-spacing:-.035em;margin-top:12px}
.index-head .dek{font-size:clamp(19px,2vw,22px);line-height:1.45;color:var(--ink-2);margin-top:20px;max-width:640px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;margin-top:clamp(36px,5vw,64px)}
.card{border:1.5px solid var(--ink);border-radius:var(--radius);padding:26px 26px 28px;background:#fff;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:12px;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.card .card-meta{font:500 13px/1.4 var(--mono);color:var(--ink-2)}
.card h2{font-weight:800;font-size:25px;line-height:1.12;letter-spacing:-.02em}
.card h2 a{text-decoration:none}
.card h2 a::after{content:"";position:absolute;inset:0}
.card{position:relative}
.card h2 a:focus-visible{outline:none}
.card:focus-within{outline:3px solid var(--ink);outline-offset:3px}
.card p:last-child{color:var(--ink-2);font-size:16.5px;line-height:1.5}

/* Post */
.post{padding-top:clamp(32px,6vw,80px);padding-bottom:clamp(48px,8vw,110px)}
.post article{max-width:720px;margin:0 auto}
.crumbs{font:500 14px/1.4 var(--mono);color:var(--ink-2)}
.crumbs a{text-decoration:none;border-bottom:1.5px solid var(--orange)}
.post-head h1{font-weight:900;font-size:clamp(36px,5.6vw,62px);line-height:1;letter-spacing:-.035em;margin-top:14px}
.post-head .dek{font-size:clamp(19px,2vw,22px);line-height:1.45;color:var(--ink-2);margin-top:18px}
.byline{display:flex;align-items:center;gap:12px;margin-top:24px;padding-top:18px;border-top:1.5px solid var(--ink);font-size:15.5px;color:var(--ink-2)}
.byline b{color:var(--ink);font-weight:600}
.ya{flex:none;width:40px;height:40px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;font:800 14px/1 var(--sans);letter-spacing:.02em}

.post-toc{margin-top:28px;padding:18px 22px;border-radius:14px;background:#F4F7FA}
.post-toc ol{list-style:decimal;padding-left:22px;margin-top:8px;display:grid;gap:4px;font-size:16.5px}
.post-toc a{text-decoration:none}
.post-toc a:hover{text-decoration:underline}

.prose{margin-top:36px;font-size:19px;line-height:1.66;color:#1d1d1d}
.prose > * + *{margin-top:1.05em}
.prose h2{font-weight:800;font-size:clamp(26px,3vw,32px);line-height:1.12;letter-spacing:-.025em;margin-top:1.9em;scroll-margin-top:24px}
.prose h3{font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-.01em;margin-top:1.6em}
.prose a{text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:3px}
.prose strong{font-weight:700;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--orange)}
.prose blockquote{border-left:4px solid var(--orange);padding:4px 0 4px 20px;font-family:var(--serif);font-size:25px;line-height:1.35;color:var(--ink)}
.prose code{font:500 .86em var(--mono);background:#F2F2F0;padding:.1em .35em;border-radius:5px}
.prose hr{border:0;border-top:1.5px solid var(--line);margin:2.2em 0}
.prose table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 14px 10px 0;border-bottom:1px solid var(--line)}
.prose th{font:600 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);border-bottom:1.5px solid var(--ink)}
/* A copyable template or worked example */
.prose .template{background:#F4F7FA;border-radius:14px;padding:22px 24px;font-size:17px;line-height:1.6}
.prose .template > * + *{margin-top:.8em}
.prose .template .label{font:600 12.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.prose .note{background:#FFF3EC;border-left:4px solid var(--orange);border-radius:0 12px 12px 0;padding:16px 20px;font-size:17.5px}
.prose .sources{font-size:15.5px;color:var(--ink-2)}
.prose .sources li + li{margin-top:.25em}

.author{display:flex;gap:16px;align-items:flex-start;margin-top:48px;padding:22px 0 0;border-top:1.5px solid var(--ink);font-size:16.5px;color:var(--ink-2)}
.author .ya{width:52px;height:52px;font-size:17px}
.author b{color:var(--ink)}

.post-cta{max-width:720px;margin:56px auto 0;background:var(--ink);color:#fff;border-radius:22px;padding:clamp(26px,4vw,40px)}
.post-cta .kicker{color:rgba(255,255,255,.7)}
.post-cta h2{font-weight:900;font-size:clamp(26px,3.4vw,36px);line-height:1.04;letter-spacing:-.03em;margin-top:10px}
.post-cta p{margin-top:14px;color:rgba(255,255,255,.82);font-size:17px;line-height:1.55}
.post-cta .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.post-cta .btn-ink{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.post-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.6)}
.post-cta .btn-ghost:hover{background:rgba(255,255,255,.08)}
.post-cta :focus-visible{outline-color:#fff}
.blog-index .post-cta{max-width:none;margin-top:clamp(48px,6vw,80px)}

.pager{max-width:720px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pager a{display:block;border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;text-decoration:none;font-weight:600;line-height:1.3}
.pager a:hover{border-color:var(--ink)}
.pager span{display:block;font:500 12.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:6px}
.pager .next{text-align:right;grid-column:2}

@media (max-width:640px){
  .prose{font-size:18px}
  .prose blockquote{font-size:22px}
  .cards{grid-template-columns:1fr}
  .card{box-shadow:4px 4px 0 var(--ink)}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1;text-align:left}
}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}