/* The article type (inc/articles.php), drawn as the blog lab's variant B, the founder's pick of 2026-10-28: a post or a
   glossary term on a warm hero band with its drawn cover, then three columns (the contents kept in view at the left,
   the 680 px body, the call kept in view at the right); the blog index and the archives as a magazine of cards with
   drawn covers and lists of rows; the glossary hub. On those views only, after kit.css, whose parts it uses
   (.k-eyebrow, .k-ref, .k-pic, .k-sr). Tokens only, so the dark theme follows. The covers
   are the one brand-blue ground on these pages (BRANDBOOK section 5), drawn, never a picture file. Body rules never
   reach into a still of the demo (:not(.gs-still *)), whose window keeps its own type. Nothing moves, the plane on the
   call's boarding pass included (the founder, 2026-10-28: its flight drew the eye from the article); the contents and
   the call stick in their columns (the founder, 2026-10-28: from 1,100 px, a closed line on a phone). */

/* the nav is sticky, so it is in the flow already: the page starts 48 px under it (28 on a phone) */
.gs-post{padding:48px var(--k-gutter) 120px}
.gs-index,.gs-related{max-width:1232px;margin:0 auto}
.gs-article [id],.gs-index [id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
.gs-crumbs a{color:inherit;text-decoration:none}
.gs-crumbs a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gs-body a:not(.gs-still *){color:var(--k-ai-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* ==== the cover: the legacy blue title cover, drawn */
.gs-cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:radial-gradient(120% 90% at 85% 0%,#6177FF 0%,var(--k-brand) 55%,#3B52EE 100%);color:#fff}
.gs-cover-art{position:absolute;inset:0;width:100%;height:100%}
.gs-swoosh{fill:none;stroke:rgba(255,255,255,.22);stroke-width:.8}
.gs-spark{fill:#D6DCFF}
.gs-cover-cat,.gs-cover-min{position:absolute;left:16px;font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.gs-cover-cat{top:16px;padding:6px 9px;border-radius:7px;background:rgba(11,11,15,.22)}
.gs-cover-min{bottom:16px;color:rgba(255,255,255,.86)}
:is(.gs-cover-lg,.gs-cover-hero) .gs-cover-cat{top:22px;left:22px;font-size:12.5px}
:is(.gs-cover-lg,.gs-cover-hero) .gs-cover-min{bottom:22px;left:22px;font-size:12.5px}
.gs-cover-lg,.gs-cover-hero{border-radius:20px}
.gs-cover-hero{box-shadow:var(--k-sh)}

/* ==== the article: the hero band, the columns */
.gs-article{max-width:none;margin:0}
.gs-hero{margin:-48px calc(-1 * var(--k-gutter)) 0;padding:56px var(--k-gutter) 64px;background:var(--k-warm);border-bottom:1px solid var(--line)}
.gs-hero-in{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:center;max-width:1232px;margin:0 auto}
.gs-h1{margin-top:16px;font:600 clamp(34px,3.6vw,52px)/1.06 var(--display);letter-spacing:-.035em;color:var(--ink2);text-wrap:balance}
.gs-dek{max-width:640px;margin-top:20px;font:400 19px/1.55 var(--sans);color:var(--k-text);text-wrap:pretty}
.gs-meta{margin-top:18px;font:400 14px/1.5 var(--sans);color:var(--mute)}
.gs-cols{display:grid;grid-template-columns:220px minmax(0,680px) 260px;grid-template-areas:"toc body side" "toc upd side";column-gap:48px;justify-content:center;max-width:1232px;margin:56px auto 0}
.gs-toc{grid-area:toc}
.gs-body{grid-area:body}
.gs-side{grid-area:side}
.gs-updated{grid-area:upd;margin-top:28px;font:400 14px/1.5 var(--sans);color:var(--mute)}
.gs-toc details,.gs-side .gs-cta{position:sticky;top:calc(var(--nav-h) + 32px)}
.gs-toc summary{display:block;margin-bottom:14px;list-style:none;cursor:default}
.gs-toc summary::-webkit-details-marker{display:none}
.gs-toc ol{max-height:calc(100vh - var(--nav-h) - 110px);overflow-y:auto;list-style:none;border-left:1px solid var(--line)}
.gs-toc li{padding:6px 0 6px 14px;font:500 14px/1.4 var(--sans)}
.gs-toc a{color:var(--k-text);text-decoration:none}
.gs-toc a:hover{color:var(--ink2);text-decoration:underline;text-underline-offset:3px}

/* ==== the body */
.gs-body{font:400 18px/1.65 var(--sans);color:var(--ink)}
.gs-body p:not(.gs-still *){margin:0 0 20px}
.gs-body :is(h2,h3,h4,h5,h6):not(.gs-still *){font-family:var(--display);font-weight:600;color:var(--ink2)}
.gs-body h2:not(.gs-still *){margin:56px 0 16px;font-size:27px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.gs-body h3:not(.gs-still *){margin:36px 0 10px;font-size:22px;line-height:1.35;letter-spacing:-.01em}
.gs-body :is(h4,h5,h6):not(.gs-still *){margin:28px 0 8px;font-size:17px;line-height:1.4}
.gs-body :is(h2,h3,h4)+:is(h3,h4):not(.gs-still *){margin-top:16px}
.gs-body :is(h2,h3,h4) u:not(.gs-still *){text-decoration:none}
.gs-body>:first-child:not(.gs-still){margin-top:0}
.gs-body .k-ref:not(.gs-still *){text-decoration:none}
.gs-refs{white-space:nowrap}
.gs-body :is(strong,b):not(.gs-still *){font-weight:600}

/* lists, styled as elements so a legacy list renders too; ol after ol (start=) reads as one list */
.gs-body :is(ul,ol):not(.gs-still *){margin:0 0 24px;padding-left:1.3em}
.gs-body li:not(.gs-still *)+li{margin-top:8px}
.gs-body ul>li:not(.gs-still *)::marker{color:var(--mute)}
.gs-body ol>li:not(.gs-still *)::marker{font:500 .84em var(--mono);color:var(--k-ai-ink)}
.gs-body li>strong:first-child:not(.gs-still *){color:var(--ink2)}
.gs-body li :is(ul,ol):not(.gs-still *){margin:8px 0 0}
.gs-body li>p:last-child:not(.gs-still *){margin-bottom:0}
.gs-body ol+ol:not(.gs-still *){margin-top:-16px}

/* tables: a card that scrolls inside itself on a phone, never the page */
.gs-body :is(.gs-table,.wp-block-table){margin:32px 0;overflow-x:auto;border-radius:14px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.gs-body table:not(.gs-still *){width:100%;min-width:520px;border-collapse:collapse;font:400 15.5px/1.5 var(--sans);color:var(--k-text);text-align:left}
.gs-body table :is(th,td):not(.gs-still *){padding:14px 18px;border:0;border-bottom:1px solid var(--line);vertical-align:top}
.gs-body table th:not(.gs-still *){font:600 15px/1.4 var(--sans);color:var(--ink2)}
.gs-body table :is(thead,tfoot):not(.gs-still *){border:0}
.gs-body table tbody tr:last-child>td:not(.gs-still *){border-bottom:0}

/* the info box, a quote, a figure, an embed, code */
.gs-body .gs-note{margin:28px 0;padding:18px 22px;border-radius:14px;background:var(--k-ai-soft);font-size:16.5px;line-height:1.6}
.gs-body .gs-note>p{margin:0 0 10px}
.gs-body :is(.gs-note,blockquote,li):not(.gs-still *)>:last-child{margin-bottom:0}
.gs-body blockquote:not(.gs-still *){margin:32px 0;padding:4px 0 4px 22px;border:0;border-left:2px solid var(--ai);font:500 20px/1.5 var(--sans);color:var(--ink2)}
.gs-body cite:not(.gs-still *){display:block;margin-top:8px;font:400 14px/1.5 var(--sans);color:var(--mute)}
.gs-body figure:not(.gs-still *){margin:32px 0}
.gs-body img:not(.gs-still *){display:block;max-width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.gs-body figcaption:not(.gs-still *),.gs-still>figcaption{margin-top:10px;font:400 14px/1.5 var(--sans);color:var(--mute)}
.gs-body .wp-block-embed iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:12px}
.gs-body :is(pre,.wp-block-code):not(.gs-still *){margin:28px 0;padding:18px 20px;overflow-x:auto;border-radius:12px;background:var(--sunk);font:400 14px/1.6 var(--mono);white-space:pre;color:var(--ink)}
.gs-body code:not(.gs-still *){padding:2px 6px;border-radius:6px;background:var(--sunk);font-family:var(--mono);font-size:.88em}
.gs-body pre code:not(.gs-still *){padding:0;background:none;font-size:inherit}

/* the still: the demo's window on the kit's stage, the column's width; on a phone the stage gives way (kit.css) */
.gs-body .gs-still{font:400 16px/1.5 var(--sans);color:var(--ink)}
.gs-still>.k-pic{min-height:0}

/* sources, numbered by counter, each the target of its .k-ref */
.gs-body .gs-sources{padding:0;list-style:none;counter-reset:gs-src;font:400 14.5px/1.55 var(--sans);color:var(--mute)}
.gs-body .gs-sources>li{position:relative;padding-left:30px;counter-increment:gs-src;overflow-wrap:anywhere}
.gs-body .gs-sources>li::before{content:counter(gs-src);position:absolute;left:0;top:0;font:500 12px/1.95 var(--mono);color:var(--k-ai-ink)}

/* the legacy "You Will Learn" list as the summary box; the FAQ as questions that open (details.gs-faq, the import's
   markup) */
.gs-body #you-will-learn{margin:0;padding:22px 24px 0;border-radius:16px 16px 0 0;background:var(--k-ai-soft);font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ai-ink)}
.gs-body #you-will-learn+:is(ul,ol){margin:0 0 40px;padding:14px 24px 22px 44px;border-radius:0 0 16px 16px;background:var(--k-ai-soft)}
.gs-body details.gs-faq{margin:12px 0;padding:0 20px;border-radius:14px;background:var(--k-card);box-shadow:var(--k-card-sh)}
.gs-body details.gs-faq>summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;list-style:none}
.gs-body details.gs-faq>summary::-webkit-details-marker{display:none}
.gs-body details.gs-faq>summary::after{content:"+";flex:none;font:500 18px/1 var(--mono);color:var(--k-ai-ink)}
.gs-body details.gs-faq[open]>summary::after{content:"\2212"}
.gs-body details.gs-faq>summary h3{margin:0;font-size:17.5px;line-height:1.4}
.gs-body details.gs-faq>:not(summary){margin-bottom:18px;font-size:16.5px}

/* ==== the call, a boarding pass in its column (template-parts/article-cta.php). The notches are discs of the page's
   own ground over the pass's edge, so the pass sits on --ground in both places it goes (its column, under the body).
   The plane stands at the top of the arc, nose level */
.gs-cta{border-radius:20px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),var(--k-sh-lg);overflow:hidden}
.gs-cta :where(p){margin:0}
.gs-cta small{display:block;font:600 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.gs-cta-top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;padding:0 18px;background:var(--k-brand);color:#FFFFFF}
.gs-cta-top b{font:800 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.gs-cta-top span{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.gs-cta-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px;padding:20px 18px 6px}
.gs-cta-route strong{display:block;margin-top:6px;font:800 34px/1 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.gs-cta-route p>span{display:block;margin-top:5px;font:500 12px/1 var(--sans);color:var(--mute)}
.gs-cta-to{text-align:right}
.gs-cta-arc{display:block;width:100%;height:40px;margin-bottom:22px;overflow:visible}
.gs-cta-way{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 5;stroke-linecap:round}
.gs-cta-plane{fill:var(--k-brand)}
.gs-cta-fields{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px 18px 16px}
.gs-cta-fields b{display:block;margin-top:6px;font:700 14px/1.2 var(--sans);color:var(--ink2)}
.gs-cta-fields .gs-cta-now{color:var(--ok)}
.gs-cta-stub{position:relative;padding:18px;background:repeating-linear-gradient(90deg,var(--line) 0 5px,transparent 5px 9px) center top/calc(100% - 28px) 2px no-repeat}
.gs-cta-stub::before,.gs-cta-stub::after{content:"";position:absolute;top:-9px;width:20px;height:20px;border-radius:50%;background:var(--ground);box-shadow:inset 0 0 0 1px var(--line)}
.gs-cta-stub::before{left:-11px}
.gs-cta-stub::after{right:-11px}
.gs-cta-btn{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;background:var(--k-brand);color:#FFFFFF;font:600 16px/1 var(--sans);text-decoration:none;box-shadow:0 12px 26px -12px rgba(75,100,255,.85)}
.gs-cta-btn:hover{background:var(--k-brand-deep)}
.gs-cta-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:14px}
.gs-cta-btn svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gs-cta-code{display:block;height:30px;margin-top:14px;opacity:.8;color:var(--ink2);background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 12px,currentColor 12px 13px,transparent 13px 16px,currentColor 16px 17px,transparent 17px 19px,currentColor 19px 21px,transparent 21px 23px,currentColor 23px 24px,transparent 24px 27px)}
.gs-cta-fine{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:4px;font:500 12.5px/1.3 var(--sans);color:var(--mute)}
.gs-cta-fine::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}

/* ==== listings: the index, an archive, the three under an article */
.gs-index-head{max-width:760px}
.gs-index-head .gs-h1{font-size:clamp(38px,4.4vw,60px);line-height:1.04;letter-spacing:-.04em}
.gs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.gs-chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font:500 14.5px/1 var(--sans);color:var(--ink2);text-decoration:none}
.gs-chip span{font:500 12px/1 var(--mono);color:var(--mute)}
.gs-chip:hover{border-color:var(--ink2)}
.gs-chip.is-on{border-color:var(--ink2);background:var(--ink2);color:var(--ground)}
.gs-chip.is-on span{color:var(--ground);opacity:.7}
.gs-sec{margin-top:72px}
.gs-latest{margin-top:48px}
.gs-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
.gs-lead-t{margin-top:14px;font:600 clamp(26px,2.4vw,34px)/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance}
.gs-lead-dek{margin-top:14px;font:400 17px/1.55 var(--sans);color:var(--k-text)}
.gs-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;margin-top:40px}
.gs-card-t{margin-top:16px;font:600 19px/1.3 var(--display);letter-spacing:-.01em;text-wrap:pretty}
.gs-card-dek{margin-top:8px;font:400 15.5px/1.5 var(--sans);color:var(--k-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gs-card-meta{margin-top:10px;font:400 12.5px/1.4 var(--mono);color:var(--mute)}
:is(.gs-lead-t,.gs-card-t,.gs-list,.gs-sec-h h2) a{color:var(--ink2);text-decoration:none}
:is(.gs-lead-t,.gs-card-t,.gs-list,.gs-sec-h h2) a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gs-sec-h{display:flex;align-items:baseline;gap:14px;padding-top:28px;border-top:1px solid var(--line)}
.gs-sec-h h2{font:600 clamp(26px,2.4vw,34px)/1.1 var(--display);letter-spacing:-.025em;color:var(--ink2)}
.gs-sec-n{font:500 13px/1 var(--mono);color:var(--mute)}
.gs-sub{margin-top:28px;font:500 12.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ai-ink)}
.gs-sub+.gs-cards{margin-top:20px}
.gs-list{list-style:none;margin-top:12px;columns:2;column-gap:48px}
.gs-list li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);break-inside:avoid;font:500 15.5px/1.4 var(--sans)}
.gs-list time{flex:none;font:400 12px/1 var(--mono);color:var(--mute)}
.gs-related{margin-top:96px;padding-top:32px;border-top:1px solid var(--line)}
.gs-related-h{font:600 28px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink2)}
.gs-related .gs-cards{margin-top:28px}

/* ==== the glossary hub */
.gs-group,.gs-more,.gs-empty{margin-top:56px}
.gs-group-h{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;font:600 22px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink2)}
.gs-more,.gs-empty{font:400 16px/1.55 var(--sans);color:var(--mute)}
.gs-more a{color:var(--k-ai-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gs-terms{margin-top:8px}
.gs-term{padding:22px 0;border-bottom:1px solid var(--line)}
.gs-term:last-child{border-bottom:0}
.gs-term dt a{font:600 20px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink2);text-decoration:none}
.gs-term dt a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gs-term dd{margin-top:8px;font:400 16px/1.55 var(--sans);color:var(--k-text)}
.gs-letter{margin-top:48px}

/* ==== narrower: the call leaves its column under 1,280 px, the contents theirs under 1,100 px */
@media (max-width:1279px){
  .gs-cols{grid-template-columns:200px minmax(0,680px);grid-template-areas:"toc body" "toc side" "toc upd";column-gap:40px}
  .gs-side .gs-cta{position:static;max-width:400px;margin-top:56px}
  .gs-hero-in{grid-template-columns:minmax(0,1fr) 320px;gap:40px}
}
@media (max-width:1099px){
  .gs-cols{grid-template-columns:minmax(0,680px);grid-template-areas:"toc" "body" "side" "upd"}
  .gs-toc details{position:static;margin-bottom:32px;padding:16px 20px;border:1px solid var(--line);border-radius:14px}
  .gs-toc details:not([open]) summary{margin:0}
  .gs-toc summary{cursor:pointer}
  .gs-toc summary::after{content:"+";float:right;font:500 16px/1 var(--mono)}
  .gs-toc details[open] summary::after{content:"\2212"}
  .gs-toc ol{max-height:none;border:0}
  .gs-toc li{padding-left:0}
}
@media (max-width:900px){
  .gs-hero-in{grid-template-columns:minmax(0,1fr)}
  .gs-cover-hero{display:none}
  .gs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-lead{grid-template-columns:minmax(0,1fr);gap:20px}
  .gs-list{columns:1}
}
@media (max-width:760px){
  .gs-post{padding-top:28px;padding-bottom:88px}
  .gs-hero{margin-top:-28px;padding:28px var(--k-gutter) 36px}
  .gs-h1{font-size:30px;line-height:1.12}
  .gs-index-head .gs-h1{font-size:38px}
  .gs-dek{font-size:17.5px}
  .gs-cols{margin-top:28px}
  .gs-body{font-size:17px;line-height:1.6}
  .gs-body h2:not(.gs-still *){margin-top:44px;font-size:23px}
  .gs-body h3:not(.gs-still *){font-size:19.5px}
  .gs-body blockquote:not(.gs-still *){font-size:18px}
  .gs-cards{grid-template-columns:minmax(0,1fr);gap:32px}
  .gs-sec{margin-top:56px}
  .gs-list li{display:block}
  .gs-list time{display:block;margin-top:6px}
}