/* Sparkitive blog-only styles (round 5 step 10b). Loads after site.css; never edits it.
   Blog home, search, four category pages, eight articles. */

.nav a[aria-current="page"]:not(.btn){text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; text-decoration-color:var(--peri)}
.eyebrow{font:700 .875rem/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--peri); margin:0 0 1em}
.hero-search{margin-top:1.4em; max-width:560px}
.hero--compact .hero-copy{max-width:760px}

/* breadcrumb */
.crumbs{margin:0 0 1.2em; font-size:.9375rem}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0}
.crumbs li{color:var(--on-dark-2)}
.crumbs li + li::before{content:"\203A"; padding:0 .55em; color:var(--peri)}
.crumbs a{color:var(--lav)}
.crumbs [aria-current]{color:#fff; font-weight:700}

/* the shared search component */
.search{display:flex; gap:10px; align-items:stretch}
.search input{flex:1 1 auto; min-width:0; font:400 1.0625rem/1.5 var(--sans); color:var(--ink); background:#fff; border:2px solid #B9B8DA; border-radius:999px; padding:10px 20px; min-height:48px}
.search input::placeholder{color:#6E6D8A; opacity:1}
.search input:focus{outline:3px solid var(--focus-light); outline-offset:2px; border-color:var(--indigo)}
.dark .search input:focus{outline-color:var(--focus-dark)}
.search .btn{flex:0 0 auto}

/* article cards (vertical) */
.agrid{display:grid; gap:clamp(20px, 2.4vw, 32px); grid-template-columns:repeat(3, minmax(0,1fr)); align-items:stretch}
/* R6 (c129): the grid counts its cards. The child is the loader's real card, <a class="acard">, a direct child of .agrid (static pages and js/blog.js search results alike);
   hidden .acard--extra cards still count as children, which is right: the 2-up and 1-up rules only apply when the whole list is that short. */
@media (min-width:1100px){
  .agrid:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2, minmax(0,1fr))}
  .agrid:has(> :only-child){grid-template-columns:minmax(0,720px)}
  /* R6 (c130): category pages centre the reading columns; their text stays left-aligned. The grid, the bridge line and "Browse other topics" stay full width. */
  .p-cat .essay{margin-inline:auto}
  .p-cat .hw-faqcol > *{max-width:760px; margin-inline:auto}
}
.acard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); overflow:hidden; text-decoration:none; color:var(--ink)}
.acard-media{display:block; aspect-ratio:16/10; overflow:hidden; border-radius:16px 16px 0 0}
.acard-media img{display:block; width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 45%); scale:var(--zoom,1); transform-origin:var(--origin,50% 50%)}
.acard-body{display:flex; flex-direction:column; gap:8px; padding:20px 22px 24px; flex:1}
.acard-cat{font:700 .8125rem/1.2 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--indigo-dk)}
.acard h2,.acard h3{font:700 1.25rem/1.3 var(--sans); margin:0; color:var(--ink)}
.acard-ex{color:var(--ink-soft); font-size:1rem; line-height:1.55}
.acard:hover h2,.acard:hover h3{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; color:var(--indigo-dk)}
.more{margin:clamp(28px, 4vw, 44px) 0 0; text-align:center; max-width:none}
.js .acard--extra{display:none}
.js.more-open .acard--extra{display:flex}
/* round 6 #18 (design-plan 14.8): one base, four variants */
.bridge{margin-top:clamp(40px, 5vw, 64px); border:0; padding:0}
.bridge p{max-width:none; margin:0; font:400 1.125rem/1.6 var(--sans); color:var(--ink)}
.bridge a{font-weight:700}
/* V1 Launches: two routes joined by an arc */
.br-routes{display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch}
.br-routes .br-card{background:var(--bg-card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-card); padding:clamp(22px, 2.6vw, 32px)}
.br-routes .br-arc{display:none}
@media (min-width:900px){ .br-routes{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)} .br-routes .br-arc{display:block; width:96px; height:48px; color:var(--peri)} }
/* R7 #18 (design-plan 16.5): the two route cards are one height; the dotted arc stays centred between them */
.br-routes .br-card{display:flex; flex-direction:column; justify-content:center}
.br-routes .br-arc{align-self:center}
/* V2 Outsourcing: one mist panel, two questions */
.br-ask{display:grid; grid-template-columns:1fr; background:var(--bg-mist); border:1px solid var(--line); border-radius:24px; padding:clamp(24px, 3vw, 40px); gap:24px}
.br-ask .q{display:block; font:700 1.25rem/1.35 var(--sans); color:var(--ink); margin-bottom:.35em}
@media (min-width:900px){ .br-ask{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0} .br-ask > p:first-child{padding-right:clamp(24px, 3vw, 40px); border-right:1px solid #CFCEEE} .br-ask > p:last-child{padding-left:clamp(24px, 3vw, 40px)} }
/* V3 Processes: one feature card with a checklist glyph; second line as the card's foot */
.br-feature{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px clamp(18px, 2.4vw, 28px); background:var(--bg-card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-card); padding:clamp(22px, 2.8vw, 36px); max-width:960px; margin-inline:auto}
.br-feature .br-glyph{grid-row:1 / span 2; width:64px; height:64px; border-radius:50%; background:var(--bg-mist); display:grid; place-items:center; color:var(--indigo)}
.br-feature p:last-child{grid-column:2; padding-top:14px; margin-top:8px; border-top:1px solid var(--line); color:var(--ink-soft); font-size:1rem}
@media (max-width:599px){ .br-feature{grid-template-columns:1fr} .br-feature .br-glyph{grid-row:auto; width:52px; height:52px} .br-feature p:last-child{grid-column:1} }
/* V4 Rolling out: a deep strip with a row of lanterns lighting */
.br-lanterns{background:var(--bg-deep); color:var(--on-dark); border-radius:24px; padding:clamp(24px, 3.2vw, 40px) clamp(24px, 3.4vw, 48px); display:grid; grid-template-columns:1fr; gap:14px; position:relative; overflow:hidden}
.br-lanterns .br-row{display:flex; gap:10px; margin-bottom:6px}
.br-lanterns .br-row i{width:14px; height:14px; border-radius:50%; background:var(--peri)}
.br-lanterns .br-row i:nth-child(1){background:#fff; box-shadow:0 0 14px 4px rgb(201 200 244 / .55)}
.br-lanterns .br-row i:nth-child(2){background:var(--lav); box-shadow:0 0 10px 2px rgb(201 200 244 / .4)}
.br-lanterns .br-row i:nth-child(4){opacity:.55} .br-lanterns .br-row i:nth-child(5){opacity:.3}
.br-lanterns p{color:var(--on-dark)}
.br-lanterns p + p{color:var(--on-dark-2); font-size:1rem}
.br-lanterns a{color:var(--lav); text-underline-offset:3px}
.br-lanterns a:hover{color:#fff}
.br-lanterns a:focus-visible{outline:3px solid var(--focus-dark); outline-offset:2px}
@media (min-width:900px){ .br-lanterns{grid-template-columns:auto minmax(0,1fr); column-gap:clamp(24px, 3vw, 40px); align-items:center} .br-lanterns .br-row{grid-row:1 / span 2; flex-direction:column; margin:0} .br-lanterns p + p{grid-column:2} }

/* category cards (horizontal) */
.cgrid{display:grid; gap:clamp(16px, 2vw, 24px); grid-template-columns:repeat(2, minmax(0,1fr))}
.ccard{display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card); overflow:hidden; text-decoration:none; color:var(--ink); min-height:168px}
.ccard img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; object-position:var(--pos, 50% 45%)}
.ccard-body{display:flex; flex-direction:column; gap:6px; padding:18px 22px; justify-content:center}
.ccard h3{margin:0; font:700 1.25rem/1.3 var(--sans); color:var(--ink)}
.ccard-d{color:var(--ink-soft); font-size:1rem; line-height:1.5}
.ccard-go{font-weight:700; color:var(--indigo); margin-top:4px}
.ccard:hover h3{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.ccard:hover .ccard-go{color:var(--indigo-dk)}
.ccard-ico{display:flex; align-items:center; justify-content:center; background:var(--bg-night); color:var(--lav); aspect-ratio:1/1}
.ccard--search{background:#fff}

/* old links, search results */
.sr-empty{max-width:var(--m-body)}
.sr-none[hidden]{display:none}
.sr-none p{max-width:var(--m-body)}
[data-results]:empty{display:none}
.p-search .paper.pad{min-height:40vh}

/* category hero: night scene beside the heading, masked into the night */
.hero--cat .wrap{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); align-items:center}
.hero--cat .scene{--fl:16%; --fr:16%; --ft:16%; --fb:20%; max-width:560px; justify-self:end; width:100%}
.hero--cat .scene img{aspect-ratio:16/10; object-position:var(--pos, 50% 40%)}
.hero--cat .wrap > .decor-spark{display:none}
.hero--cat .scene > .decor-spark{left:-18px; top:-18px; width:84px; height:84px}
.anchors{margin:1.2em 0 0; font-size:1rem; color:var(--on-dark-2)}
.anchors a{font-weight:700}
.essay{max-width:760px}
.essay h3{font:700 1.375rem/1.3 var(--sans); margin:2em 0 .5em; text-wrap:balance}
.essay ul,.essay ol,.post-body ul,.post-body ol{padding-left:1.3em; margin:0 0 1em; max-width:var(--m-body)}
.essay li,.post-body li{margin-bottom:.5em}
.post-cta{margin:1.6em 0}
.post-more{font-weight:700}
.ffcall{max-width:var(--m-body)}

/* newsletter block */
.news-sec{padding-block:clamp(48px, 6vw, 88px)}
/* round 6 #20 (design-plan §14.10): art slot is empty and collapsed until asset A3 exists */
.news{display:grid; grid-template-columns:1fr; gap:clamp(20px, 3vw, 40px); align-items:center; max-width:1040px; margin-inline:auto; background:var(--bg-mist); border:1px solid var(--line); border-radius:24px; padding:clamp(20px, 3vw, 36px)}
/* no art yet: keep the narrow, left-aligned card so it is not hollow */
.news:not(:has(> .news-art)){max-width:760px; margin-inline:0}
.news-art{margin:0; border-radius:18px; overflow:hidden; background:var(--bg-night)}
.news-art img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:var(--pos, 50% 45%)}
.news-body h2{margin-bottom:.4em}
.news-body > p{max-width:52ch}
@media (min-width:900px){ .news:has(> .news-art){grid-template-columns:minmax(0,5fr) minmax(0,7fr)} .news-art img{aspect-ratio:1/1} }
.mist .news{background:#fff}
.news-form{max-width:520px}
.news-form .btn{margin-top:4px}
.news-fine{margin:12px 0 0; font-size:.9375rem}
.news-done{display:none; margin:0; font-weight:700; color:var(--indigo-dk)}
.news-form.done .field,.news-form.done .btn,.news-form.done .news-fine{display:none}
.news-form.done .news-done{display:block}
/* 14.16 newsletter card inside an article (.post-main is at most 720px): always stacked */
.post-main .news,
.post-main .news:has(> .news-art){grid-template-columns:minmax(0,1fr); max-width:none; margin-inline:0; gap:clamp(18px, 2.4vw, 28px)}
.post-main .news-art img{aspect-ratio:16/10}
@media (min-width:700px){
  .post-main .news-art img{aspect-ratio:2/1; object-position:50% 48%}
}
@media (min-width:1100px){
  .post-main .news-body > p{max-width:60ch}
  .post-main .news-form{max-width:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; align-items:end}
  .post-main .news-form > :not(.field){grid-column:1 / -1}
  .post-main .news-form .btn{justify-self:start}
}

/* article page */
.hero--post{--hero-foot:clamp(64px, 6vw, 88px)}
.hero--post h1{font-size:clamp(2rem, 1.3rem + 2.6vw, 3.25rem); max-width:22ch}
.byline{margin:0; color:var(--on-dark-2); font-size:1rem}
.post-sec{padding-block:clamp(32px, 4vw, 56px) clamp(56px, 7vw, 96px)}
.post-grid{display:grid; grid-template-columns:minmax(0,720px) minmax(240px,340px); grid-template-areas:"main fig" "main side"; grid-template-rows:auto 1fr; column-gap:clamp(32px, 4vw, 64px); row-gap:28px; justify-content:space-between; align-items:start}
.post-fig{grid-area:fig; margin:0}
.post-fig img{width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow-card)}
.post-main{grid-area:main}
.post-side{grid-area:side; font-size:1rem}
.post-side .search{margin-bottom:24px}
.post-side .search .btn{padding-inline:1.1em}
.side-label{font:700 .8125rem/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--indigo-dk); margin:0 0 10px}
.topics,.rels{list-style:none; margin:0 0 26px; padding:0}
.topics li{margin:0 0 4px}
.topics a{display:block; padding:8px 12px; border-radius:8px; text-decoration:none; color:var(--ink); min-height:40px}
.topics a:hover{background:var(--bg-mist)}
.topics a[aria-current]{background:var(--bg-mist); font-weight:700; color:var(--indigo-dk)}
.rels li{margin:0 0 14px}
.rel{display:grid; grid-template-columns:38% minmax(0,1fr); gap:12px; align-items:center; text-decoration:none; color:var(--ink); font-weight:700; line-height:1.3}
.rel img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; object-position:var(--pos, 50% 45%); border-radius:8px}
.rel:hover span{text-decoration:underline; text-underline-offset:3px}
.side-cta{background:var(--bg-night); color:#fff; border-radius:16px; padding:22px}
.side-cta h2{color:#fff; margin:0 0 .5em}
.side-cta p{color:var(--on-dark-2); margin:0 0 1em; font-size:1rem}

/* article body: every element styled explicitly */
.post-body{max-width:720px}
.post-body > :first-child{margin-top:0}
.post-body p{max-width:none}
.post-body h2{margin:1.8em 0 .5em; text-wrap:balance}
.post-body h3{font:700 1.375rem/1.3 var(--sans); margin:1.6em 0 .4em}
.post-body h4{font:700 1.125rem/1.3 var(--sans); margin:1.4em 0 .4em}
.post-body ul,.post-body ol{max-width:none}
.post-body strong{font-weight:700}
.post-body blockquote{margin:1.5em 0; padding:.2em 0 .2em 1.2em; border-left:4px solid var(--hl); font-family:var(--serif); font-size:1.25rem}
.post-body code{font-size:.95em; background:var(--bg-mist); padding:.1em .35em; border-radius:4px}
.post-body hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.post-body img{border-radius:12px}
.post-body .ffcall{max-width:none}
.post-body .post-more{margin:0 0 1em}

/* author box */
.author{display:flex; gap:20px; align-items:flex-start; margin:clamp(36px, 5vw, 56px) 0; padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:var(--shadow-card)}
.author img{flex:0 0 96px; width:96px; height:96px; border-radius:50%; object-fit:cover; object-position:50% 30%; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--peri)}
.author p{max-width:none; font-size:1rem; margin:0 0 .7em}
.author-by{font-size:1.0625rem !important}
.author-more{margin:0 !important; font-weight:700}

@media (max-width:1099px){
  .agrid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .post-grid{grid-template-columns:minmax(0,1fr) 260px}
}
@media (max-width:899px){
  .hero--post h1{max-width:none}   /* c108: stacked, no ch cap */
  .hero--cat .wrap{display:block}
  .hero--cat .scene{max-width:none; margin-top:28px; --fl:10%; --fr:10%; --ft:12%; --fb:16%}
  .hero--cat .scene img{aspect-ratio:16/10}
}
@media (max-width:699px){
  .post-grid{display:block}
  .post-fig{margin-bottom:24px}
  .post-side{margin-top:40px}
}
@media (max-width:639px){
  .agrid,.cgrid{grid-template-columns:minmax(0,1fr)}
  .ccard{grid-template-columns:minmax(0,34%) minmax(0,1fr)}
  .ccard-body{padding:14px 16px}
  .search{flex-direction:column}
  .author{flex-direction:column}
  .hero--post h1{max-width:none}
}
@media (prefers-reduced-motion:no-preference){
  .acard,.ccard{transition:transform .2s, box-shadow .2s}
  .acard:hover,.ccard:hover{transform:translateY(-2px)}
}
.hero--cat h1{font-size:clamp(2.125rem, 1.3rem + 2.6vw, 3.375rem)}
.hero--compact h1{overflow-wrap:break-word}
/* gate fixes (step 10b): text zones sized to their text, balanced titles, aligned card rows */
.eyebrow,.anchors,.acard h2,.acard h3,.ccard h3,.acard-cat{text-wrap:balance}
.ccard-d,.acard-ex{text-wrap:pretty}
.acard-cat{min-height:2.4em}
.ccard-body{justify-content:flex-start; padding-top:22px}
.hero--post .wrap > .decor-spark{right:clamp(20px, 6vw, 120px); top:50%; transform:translateY(-50%)}
@media (max-width:899px){
  .hero--cat .scene{margin-top:48px}
  .hero--post .wrap > .decor-spark{width:72px; height:72px; right:20px; top:-28px; transform:none}
}
@media (max-width:639px){ .acard-cat{min-height:0} }
@media (min-width:640px){ .acard h3,.acard h2{min-height:3.9em} .ccard h3{min-height:2.6em} }
/* qafix A (blog F4): two-up category cards below 1100 reserve a title slot for the longest title ("Launches, Rebrands, and Migrations": 4 lines at 640-645, 3 lines at 646-853; 2 lines, the base rule above, from 854), so the descriptions start at the same height in a row. Same pattern as .acard above. */
@media (min-width:640px) and (max-width:645px){ .ccard h3{min-height:5.2em} }
@media (min-width:646px) and (max-width:853px){ .ccard h3{min-height:3.9em} }

/* qafix B (R17b): shared compact hero and article hero, below 600px. The spark sits in the hero's top band, smaller, above the breadcrumb and H1. Appended here so it loads after the article-spark rule above (same specificity). 600px and up is unchanged. */
@media (max-width:599px){
  .hero--compact{padding-top:72px}
  .hero--compact .wrap > .decor-spark,
  .hero--post .wrap > .decor-spark{width:44px; height:44px; right:20px; top:-56px; transform:none}
}