/* GeoAI Blog — article layout on top of ../assets/reference.css.
 * Tokens (colour, type, dark mode) and components (.callout, .ask, .grid,
 * .tile, .steps, figure) come from the reference; only the page shell differs:
 * no sidebar, one reading column. */

.topbar .nav{margin-left:auto;display:flex;gap:4px}
.topbar .nav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:7px}
.topbar .nav a:hover{background:var(--sunk);color:var(--ink)}
.topbar .nav a.on{background:var(--canal-soft);color:var(--canal);font-weight:600}

.post{max-width:760px;margin:0 auto;padding:40px 20px 90px}
.post .page{max-width:none}
.post h1{font-size:clamp(32px,5vw,50px)}
.byline{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:14px;color:var(--ink-3);margin:0 0 26px}
.byline b{color:var(--ink);font-weight:600}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3)}

.post figure.cover{padding:0;overflow:hidden;background:var(--canal-soft)}
.post figure.cover img{min-width:0}
.post figure.cover figcaption{padding:0 16px 12px}

.pull{font-family:var(--f-display);font-stretch:88%;font-weight:750;font-size:clamp(22px,3vw,28px);line-height:1.25;
  border-left:4px solid var(--dyke);padding:4px 0 4px 18px;margin:30px 0;color:var(--ink);max-width:none!important;text-wrap:balance}

.reply{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;margin:16px 0;font-size:15.5px}
.reply small{display:block;font-family:var(--f-display);font-stretch:85%;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-bottom:4px}
.reply.stop{border-color:color-mix(in srgb,var(--stop) 45%,var(--rule));background:var(--stop-soft)}
.reply.stop small{color:var(--stop)}
.reply.good{border-color:color-mix(in srgb,var(--dyke) 45%,var(--rule));background:var(--dyke-soft)}
.reply.good small{color:var(--dyke)}
.reply.wrong{position:relative;color:var(--ink-3)}
.reply.wrong s{text-decoration-thickness:2px;text-decoration-color:var(--stop)}

.series{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:16px 18px;margin:44px 0 0}
.series h2{margin:0 0 8px;padding:0;border:0;font-size:13px;text-transform:uppercase;letter-spacing:.14em;font-stretch:80%;color:var(--ink-3)}
.series ol{margin:0;padding-left:1.4em}
.series li{margin:3px 0;color:var(--ink-3)}
.series li a{font-weight:600}
.series li.on{color:var(--ink);font-weight:600}
.series li .soon{font-size:12.5px;margin-left:6px}

.cta{margin-top:26px;font-size:15px;color:var(--ink-2)}

/* Blog index */
.cards{display:grid;gap:14px;margin:24px 0}
.card{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px;align-items:center;background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:14px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--canal);transform:translateY(-1px)}
.card img{width:100%;height:auto;border-radius:9px;background:var(--canal-soft);display:block}
.card .k{font-family:var(--f-display);font-stretch:80%;font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--dyke)}
.card h2{margin:4px 0 6px;padding:0;border:0;font-size:22px}
.card p{margin:0;color:var(--ink-2);font-size:15px}
.card .when{display:block;margin-top:8px;font-size:13px;color:var(--ink-3)}
@media (max-width:620px){.card{grid-template-columns:1fr}}

/* Story opening */
.scene{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:20px 22px 6px;margin:6px 0 28px;font-size:17.5px;line-height:1.65}
.scene::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 4px 4px 0;background:var(--target)}
.scene p{margin:0 0 14px;max-width:none!important}
.scene .msg{font-family:var(--f-body);font-size:18.5px;font-weight:500;color:var(--ink);background:var(--sunk);border-radius:12px 12px 12px 4px;padding:10px 14px;display:inline-block}

/* Simplified plan, shown as a form */
.plan{display:grid;border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--surface);margin:16px 0 6px;font-size:15px}
.plan div{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:9px 14px;border-bottom:1px solid var(--rule-2)}
.plan div:last-child{border-bottom:0}
.plan span{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);padding-top:2px}

/* SQL block */
pre.sql{background:var(--code-bg);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.55;margin:14px 0}
pre.sql code{background:none;padding:0;font-size:inherit}