/* ---- landing + portfolio ---- */
/* cover: the art panel fills the whole first screen edge to edge; the hero text sits centred on a soft panel */
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero]{position:relative;isolation:isolate;display:grid;align-items:center;max-width:none;min-height:min(80vh,720px);padding-block:clamp(3rem,8vw,6rem);padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)))}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero] .hero-in{display:block}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero] .kv-art[data-hero-media]{position:absolute;inset:0;z-index:-1;min-height:0;border-radius:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero] [data-hero-text]{max-width:min(760px,100%);margin-inline:auto;justify-items:center;text-align:center;padding:clamp(24px,4vw,48px);border-radius:var(--r-card,10px);background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 24px 60px -30px rgb(0 0 0/.45)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero] [data-hero-text] :is(.actions,.links,#links,.facts){justify-content:center}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=cover] [data-sec=hero] h1{max-width:18ch}
/* form: the page's form section (landing: sign-up, portfolio: contact) stands beside the hero text as a card; no art */
@media (min-width:960px){
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-main]{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);column-gap:clamp(32px,5vw,72px);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-main] > section{grid-column:1 / -1;max-width:none;padding-inline:0;margin-inline:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1;align-self:center}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-main] > :is([data-sec=cta],[data-sec=contact]){grid-column:2;grid-row:1;align-self:center;margin-block:clamp(2rem,4vw,3rem);padding:clamp(20px,2.5vw,32px);border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface);box-shadow:0 18px 40px -28px rgb(0 0 0/.4)}
/* form split (design2 pfproof 10-18): the side card is a CARD, never a full-bleed band. A kit's own band rule (portfolio app.css #contact{box-shadow:0 0 0 100vmax var(--wash);clip-path:inset(0 -100vmax)}) beats the class selector and its spread shadow painted over the hero text in column 1 (blank hero, A and B). The :is(#contact,#cta) id weight + !important keep the card look in every kit. */
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-main] > :is(#contact,#cta,[data-sec=cta],[data-sec=contact]){box-shadow:0 18px 40px -28px rgb(0 0 0/.4)!important;clip-path:none!important}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-main] > :is([data-sec=cta],[data-sec=contact]) h2{font-size:var(--t-xl);margin-block:var(--s-1) var(--s-2)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-sec=hero] .hero-in{display:block}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=form] [data-sec=hero] .kv-art{display:none}
}
/* sticky: the hero text is a left column pinned while the sections scroll on the right (the first section sits beside the title) */
@media (min-width:960px){
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-main]{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:clamp(40px,6vw,96px);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-main] > section{grid-column:2;max-width:none;padding-inline:0;margin-inline:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1 / span 12;position:sticky;top:0;align-self:start;padding-block:clamp(2.5rem,6vw,5rem)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-main] > section:not([data-sec=hero]){padding-block:clamp(2.5rem,5vw,4rem)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-sec=hero] .hero-in{display:block}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-sec=hero] .kv-art{display:none}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-sec=hero] h1{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.6rem)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=sticky] [data-sec=hero] .facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* halves: the art fills the left half of the first screen edge to edge, the hero text the right half */
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero]{max-width:none;padding:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero] .hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-height:min(82vh,760px);align-items:stretch}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero] .kv-art[data-hero-media]{order:-1;min-height:100%;border-radius:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero] [data-hero-text]{align-content:center;padding:clamp(28px,5vw,80px)}
@media (max-width:760px){
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr);min-height:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero] .kv-art[data-hero-media]{min-height:200px}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio],[data-kv-kit=blog],[data-kv-kit=course])[data-l-fs=halves] [data-sec=hero] [data-hero-text]{padding:28px var(--gutter,16px)}
}
/* masthead: no art; a newspaper-style head: rules above and below, the headline across two columns, the lede and the call to action in the third, the facts as a row */
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] .hero-in{display:block}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] .kv-art{display:none}
@media (min-width:761px){
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] [data-hero-text]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4) var(--s-6);align-items:start;max-width:none;padding-block:var(--s-5);border-top:6px double var(--ink);border-bottom:1px solid var(--ink)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] [data-hero-text] > *{grid-column:3;margin:0}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] [data-hero-text] > .kicker{grid-column:1 / -1;grid-row:1;justify-self:center;padding-bottom:var(--s-3)}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] [data-hero-text] > h1{grid-column:1 / span 2;grid-row:2 / span 2;max-width:none;font-size:clamp(2.6rem,1.6rem + 3.4vw,5rem);line-height:1}
html:is([data-kv-kit=landing],[data-kv-kit=portfolio])[data-l-fs=masthead] [data-sec=hero] [data-hero-text] > .facts{grid-column:1 / -1;grid-row:4;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);padding-top:var(--s-4)}
}

/* ---- landing ---- */
/* rows: a slim title line (headline left, the call to action right), then the steps as full-width numbered rows */
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero]{padding-block:clamp(2rem,4vw,3rem) clamp(1rem,2vw,1.5rem)}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] .kv-art,html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] .facts{display:none}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] [data-hero-text]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-3) var(--s-6);padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] [data-hero-text] > :not(.actions){grid-column:1}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .actions{grid-column:2;grid-row:1 / span 3;align-self:end}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] h1{max-width:24ch;font-size:clamp(2rem,1.3rem + 2vw,3rem)}
html[data-kv-kit=landing][data-l-fs=rows] [data-main] > [data-sec=feature]{order:1;padding-top:var(--s-4);border-top:0}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] [data-sec-head]{display:none}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] .features{grid-template-columns:minmax(0,1fr);gap:0}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] .features > div{display:grid;grid-template-columns:clamp(64px,10vw,140px) minmax(0,1fr) minmax(0,1.3fr);column-gap:var(--s-6);align-items:baseline;padding-block:var(--s-5);border-top:1px solid var(--line)}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] .features .step{font-size:clamp(2rem,1.4rem + 2vw,3.2rem);line-height:1}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] .features p:last-child{margin:0}
@media (max-width:760px){
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr)}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .actions{grid-column:1;grid-row:auto}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] .features > div{grid-template-columns:56px minmax(0,1fr)}
html[data-kv-kit=landing][data-l-fs=rows] [data-sec=feature] .features > div > :not(.step){grid-column:2}
}

/* phone: the split nav (chrome) keeps the brand above one row of links; the minimal first screen's links sit under the big wordmark, not over it */
@media (max-width:760px){
html[data-kv-kit=landing][data-l-nav=split] [data-sec=nav] .nav{grid-template-columns:minmax(0,1fr);row-gap:0}
html[data-kv-kit=landing][data-l-nav=split] [data-sec=nav] .nav > :is(:first-child,:last-child){grid-column:1;grid-row:auto;justify-self:start}
html[data-kv-kit=landing][data-l-fs=minimal] [data-sec=nav] .nav > ul:last-child:not(:first-child){position:static;justify-content:center}
}

/* ---- portfolio ---- */
@media (min-width:960px){
/* form: the contact card fits the first screen (a shorter message box) */
html[data-kv-kit=portfolio][data-l-fs=form] [data-sec=contact] form{gap:var(--s-3)}
html[data-kv-kit=portfolio][data-l-fs=form] [data-sec=contact] textarea{height:84px;min-height:0}
html[data-kv-kit=portfolio][data-l-fs=form] [data-sec=contact] .hint:empty{display:none}
}

/* ---- blog ---- */
/* the home page's pager (a nav, not a section) stays after the posts on every first screen that reorders main */
html[data-kv-kit=blog][data-l-fs] [data-main] > .pager{order:9}
@media (min-width:960px){
html[data-kv-kit=blog][data-l-fs=sticky] [data-main] > .pager{grid-column:2}
html[data-kv-kit=blog][data-l-fs=sticky] [data-main]:has(> .post,> .page-h,> .empty){grid-template-columns:minmax(0,1fr)} /* a post, about, topic or search page (no hero) keeps the one-column page */
html[data-kv-kit=blog][data-l-fs=sticky] [data-main]:has(> .post,> .page-h,> .empty) > *{grid-column:1}
html[data-kv-kit=blog][data-l-fs=sticky] [data-sec=list] .cards{grid-template-columns:minmax(0,1fr)}
}
/* halves / cover: the featured post's box is the hero, so the art fills its own half (halves) or its whole box (cover), corners included */
html[data-kv-kit=blog][data-l-fs=halves] [data-sec=hero]{overflow:hidden}
html[data-kv-kit=blog][data-l-fs=cover] [data-sec=hero]{overflow:hidden;border-radius:var(--r-card,10px)}
/* rows: a slim title line (the featured title left, read button right), then every post as a full-width row: title and date | excerpt */
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero]{padding-block:var(--s-4);background:transparent;border-width:0 0 2px;border-color:var(--ink);border-radius:0}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] .kv-art,html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] [data-hero-text] > :is(.lede,.tags){display:none}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-2) var(--s-6)}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] [data-hero-text] > :not(.btn){grid-column:1}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .btn{grid-column:2;grid-row:1 / span 3;align-self:end}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] h1{font-size:var(--t-2xl)}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=list] .cards{grid-template-columns:minmax(0,1fr);gap:0}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=list] .card{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:var(--s-6);padding:var(--s-5) 0;border-width:0 0 1px;border-radius:0;background:transparent}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=list] .card > :not(.excerpt){grid-column:1}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=list] .card > .excerpt{grid-column:2;grid-row:1 / span 3;font-size:var(--t-md)}
@media (max-width:760px){
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr)}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .btn{grid-column:1;grid-row:auto}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=list] .card{grid-template-columns:minmax(0,1fr)}
html[data-kv-kit=blog][data-l-fs=rows] [data-sec=list] .card > .excerpt{grid-column:1;grid-row:auto}
}
/* phone: the split nav (chrome) keeps the brand and the search on one row and the links under them; the minimal first screen's search sits in the flow */
@media (max-width:760px){
html[data-kv-kit=blog][data-l-nav=split] [data-sec=nav] .top-in{grid-template-columns:minmax(0,1fr) minmax(0,38%)}
html[data-kv-kit=blog][data-l-nav=split] [data-sec=nav] .top-in > .search input{width:100%}
html[data-kv-kit=blog][data-l-nav=split] [data-sec=nav] .top-in > .brand{grid-column:1;grid-row:1;justify-self:start}
html[data-kv-kit=blog][data-l-nav=split] [data-sec=nav] .top-in > .search{grid-column:2;grid-row:1}
html[data-kv-kit=blog][data-l-nav=split] [data-sec=nav] .top-in > .nav{grid-column:1 / -1;grid-row:2;justify-self:start}
html[data-kv-kit=blog][data-l-fs=minimal] [data-sec=nav] .top-in > .search{position:static;justify-self:stretch}
}

/* ---- course ---- */
/* swap: the open lesson takes the wide left column and the module list moves to a narrow right rail */
@media (min-width:900px){
html[data-kv-kit=course][data-l-fs=swap] [data-sec=list].body{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=list] > .toc{order:2}
}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero]{padding-block:var(--s-5) var(--s-4)}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,.6fr)}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] .kv-art{display:none}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:var(--s-6);width:100%}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text] > :is(.kicker,h1,.lead){grid-column:1}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text] > :is(.facts,.progress){grid-column:2;grid-row:auto}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text] > .facts{grid-row:2;align-self:end}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text] > .progress{grid-row:3}
html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] h1{font-size:var(--t-3xl)}
@media (max-width:760px){html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] .hero-in,html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr)}html[data-kv-kit=course][data-l-fs=swap] [data-sec=hero] [data-hero-text] > *{grid-column:1 !important;grid-row:auto !important}}
/* sticky: the course title pinned left; on the right the module list and the lesson stack in one column */
@media (min-width:960px){
html[data-kv-kit=course][data-l-fs=sticky] [data-sec=list].body{grid-template-columns:minmax(0,1fr);border-top:0}
}
/* catalogue: the shared title band puts the headline left and the progress right (the course hero has no button for the band's right column) */
@media (min-width:761px){
html[data-kv-kit=course][data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > :not(.progress){grid-column:1}
html[data-kv-kit=course][data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > .progress{grid-column:2;grid-row:1 / span 4;align-self:center;min-width:280px}
}
/* phone: the split nav keeps the name left and the reset button right; the minimal first screen's button sits under the big wordmark */
@media (max-width:760px){
html[data-kv-kit=course][data-l-nav=split] [data-sec=nav] .nav{grid-template-columns:minmax(0,1fr) auto}
html[data-kv-kit=course][data-l-nav=split] [data-sec=nav] .nav > .brand{grid-column:1;justify-self:start}
html[data-kv-kit=course][data-l-nav=split] [data-sec=nav] .nav > #reset{grid-column:2}
html[data-kv-kit=course][data-l-fs=minimal] [data-sec=nav] .nav > #reset{position:static}
}
/* the numbered section heads (chrome): the course's head is the h2 itself, so the number goes on its own line above the title */
html[data-kv-kit=course][data-l-sechead=number] [data-sec-head]{display:grid;justify-items:start}

/* ---- link_page ---- */
/* a one-column link page has no nav and few sections: its first screens are its own (fs names below); every part keeps the page's order */
html[data-kv-kit=link_page][data-l-fs] [data-main] > *{order:5}
/* split: the profile pinned in a left column, the links, social row and sign-up on the right */
@media (min-width:960px){
html[data-kv-kit=link_page][data-l-fs=split] [data-main]{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-items:start;max-width:1080px}
html[data-kv-kit=link_page][data-l-fs=split] [data-main] > *{grid-column:2}
html[data-kv-kit=link_page][data-l-fs=split] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1 / span 8;position:sticky;top:48px;justify-items:start;text-align:left}
html[data-kv-kit=link_page][data-l-fs=split] [data-sec=hero] .avatar{width:120px;height:120px}
html[data-kv-kit=link_page][data-l-fs=split] [data-sec=hero] h1{font-size:var(--t-3xl)}
html[data-kv-kit=link_page][data-l-fs=split] [data-main] > .social{justify-content:start}
}
/* banner: the art panel is a wide band across the top of the profile, the avatar overlaps its lower edge */
html[data-kv-kit=link_page][data-l-fs=banner] [data-sec=hero] .hero-in{display:grid;justify-items:center;gap:var(--s-2);width:100%}
html[data-kv-kit=link_page][data-l-fs=banner] [data-sec=hero] .kv-art[data-hero-media]{display:block;order:-1;justify-self:stretch;min-height:0;height:clamp(140px,22vw,200px)}
html[data-kv-kit=link_page][data-l-fs=banner] [data-sec=hero] .avatar{position:relative;z-index:1;margin-top:-64px;box-shadow:0 0 0 6px var(--bg)}
/* tiles: the links as a two-column grid of tiles (icon above the title) */
html[data-kv-kit=link_page][data-l-fs=tiles] [data-main]{max-width:760px}
html[data-kv-kit=link_page][data-l-fs=tiles] #links{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-kv-kit=link_page][data-l-fs=tiles] .link a{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:clamp(112px,16vw,150px);padding:var(--s-4)}
html[data-kv-kit=link_page][data-l-fs=tiles] .link .lbl{white-space:normal}
html[data-kv-kit=link_page][data-l-fs=tiles] .link .go{display:none}
/* row: the avatar left of the name and bio, everything left-aligned */
html[data-kv-kit=link_page][data-l-fs=row] [data-main]{max-width:680px}
html[data-kv-kit=link_page][data-l-fs=row] [data-sec=hero]{justify-items:stretch;text-align:left;padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
html[data-kv-kit=link_page][data-l-fs=row] [data-sec=hero] .hero-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-5);row-gap:var(--s-1);align-items:center}
html[data-kv-kit=link_page][data-l-fs=row] [data-sec=hero] .avatar{grid-row:1 / span 2;margin:0}
html[data-kv-kit=link_page][data-l-fs=row] [data-sec=hero] :is(h1,.bio){grid-column:2}
html[data-kv-kit=link_page][data-l-fs=row] [data-main] > .social{justify-content:start}
html[data-kv-kit=link_page][data-l-fs=row] .foot{justify-items:start}
/* card: the whole page sits on a raised card with an accent top edge; the links wrap as pills, several to a row */
html[data-kv-kit=link_page][data-l-fs=card] body{background:var(--sunk-0,var(--sunk))}
html[data-kv-kit=link_page][data-l-fs=card] [data-main]{max-width:600px;margin-block:clamp(16px,5vw,56px);padding:clamp(24px,5vw,48px);border:1px solid var(--line);border-top:10px solid var(--accent);border-radius:clamp(18px,3vw,32px);background:var(--surface);box-shadow:0 30px 60px -40px rgb(0 0 0/.5)}
html[data-kv-kit=link_page][data-l-fs=card] [data-main]{max-width:720px}
html[data-kv-kit=link_page][data-l-fs=card] #links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
html[data-kv-kit=link_page][data-l-fs=card] .link a{min-height:48px;padding:8px 18px 8px 10px;border-radius:999px;box-shadow:none;background:var(--bg)}
html[data-kv-kit=link_page][data-l-fs=card] .link .lbl{flex:none}
html[data-kv-kit=link_page][data-l-fs=card] .link .go{display:none}
/* type: no avatar, a very large name left, the links as plain underlined rows */
html[data-kv-kit=link_page][data-l-fs=type] [data-main]{max-width:760px}
html[data-kv-kit=link_page][data-l-fs=type] [data-sec=hero]{justify-items:start;text-align:left}
html[data-kv-kit=link_page][data-l-fs=type] [data-sec=hero] .avatar{display:none}
html[data-kv-kit=link_page][data-l-fs=type] [data-sec=hero] h1{font-size:clamp(2.8rem,1.6rem + 5vw,5.6rem);line-height:.95;letter-spacing:-.03em}
html[data-kv-kit=link_page][data-l-fs=type] [data-sec=hero] .bio{font-size:var(--t-lg);max-width:46ch}
html[data-kv-kit=link_page][data-l-fs=type] #links{gap:0}
html[data-kv-kit=link_page][data-l-fs=type] .link a{min-height:64px;padding-inline:0;border-width:0 0 1px;border-radius:0;background:transparent;box-shadow:none;font-size:var(--t-xl)}
html[data-kv-kit=link_page][data-l-fs=type] .link .ic{display:none}
html[data-kv-kit=link_page][data-l-fs=type] [data-main] > .social{justify-content:start}
/* wide: a full-width profile row over the links in three columns */
@media (min-width:960px){
html[data-kv-kit=link_page][data-l-fs=wide] [data-main]{max-width:1100px}
html[data-kv-kit=link_page][data-l-fs=wide] #links{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=hero] .hero-in{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-6);align-items:center;text-align:left}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=hero] .avatar{margin:0;width:104px;height:104px}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=hero] h1{font-size:var(--t-3xl)}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=hero] .bio{justify-self:end}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=cta]{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-6);align-items:center}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=cta] > :not(form){grid-column:1}
html[data-kv-kit=link_page][data-l-fs=wide] [data-sec=cta] > form{grid-column:2;grid-row:1 / span 2}
}
/* cover: the art panel fills the screen behind the page, which floats on it as a soft panel; on a wide screen the art holds the left half and the page the right */
html[data-kv-kit=link_page][data-l-fs=cover] [data-sec=hero] .kv-art[data-hero-media]{display:block;position:fixed;inset:0;z-index:-1;min-height:0;border-radius:0}
html[data-kv-kit=link_page][data-l-fs=cover] [data-main]{margin-block:clamp(16px,6vw,72px);padding:clamp(24px,5vw,44px);border-radius:clamp(18px,3vw,32px);background:color-mix(in srgb,var(--bg) 90%,transparent);box-shadow:0 30px 70px -30px rgb(0 0 0/.45)}
/* minimal: a small name, the links as plain centred text, no boxes */
html[data-kv-kit=link_page][data-l-fs=minimal] [data-sec=hero] .avatar{width:56px;height:56px;font-size:var(--t-lg)}
html[data-kv-kit=link_page][data-l-fs=minimal] [data-sec=hero] h1{font-size:var(--t-xl)}
html[data-kv-kit=link_page][data-l-fs=minimal] #links{gap:0}
html[data-kv-kit=link_page][data-l-fs=minimal] .link a{justify-content:center;min-height:52px;border-width:0 0 1px;border-radius:0;background:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
html[data-kv-kit=link_page][data-l-fs=minimal] .link :is(.ic,.go){display:none}
html[data-kv-kit=link_page][data-l-fs=minimal] .link .lbl{flex:none}
html[data-kv-kit=link_page][data-l-fs=minimal] .news{border:0;background:transparent;text-align:center;padding-inline:0}
@media (min-width:960px){
html[data-kv-kit=link_page][data-l-fs=cover] [data-sec=hero] .kv-art[data-hero-media]{right:50%}
html[data-kv-kit=link_page][data-l-fs=cover] [data-main]{max-width:520px;margin-left:calc(50% + clamp(24px,4vw,64px));margin-right:auto}
/* minimal on a wide screen: the column sits at the left edge, everything left-aligned */
html[data-kv-kit=link_page][data-l-fs=minimal] [data-main]{margin-left:clamp(24px,9vw,140px);margin-right:auto;max-width:480px}
html[data-kv-kit=link_page][data-l-fs=minimal] [data-sec=hero]{justify-items:start;text-align:left}
html[data-kv-kit=link_page][data-l-fs=minimal] .link a{justify-content:flex-start;padding-inline:0}
html[data-kv-kit=link_page][data-l-fs=minimal] [data-main] > .social{justify-content:start}
html[data-kv-kit=link_page][data-l-fs=minimal] .news{text-align:left}
html[data-kv-kit=link_page][data-l-fs=minimal] .foot{justify-items:start}
}

/* ---- events + donation (L-SITES-C 10-11; both kit-spec-1 pages: header nav, a hero of text + one media card, sections, footer). Marks: the hero text is
   [data-hero-text], the media card [data-hero-media] (events: the countdown, donation: the fundraising thermometer); events sections agenda=list,
   speakers=feature, venue=story, rsvp=cta; donation give=cta, where=story, faq=faq. On any first screen the hero section stops being the kit's own
   two-column grid (its .hero-in wrapper takes the layout); the design polish's even-section band is off where columns sit side by side. */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs] [data-sec=hero]{display:block}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs] [data-sec=hero] .hero-in{display:grid;gap:var(--s-7) var(--s-8);align-items:start}
@media (min-width:900px){html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sidebar] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}
/* halves: the media card is the left half of the first screen, edge to edge; the hero text the right half */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=halves] [data-sec=hero]{max-width:none;padding:0}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=halves] [data-sec=hero] .hero-in{gap:0;align-items:stretch}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=halves] [data-sec=hero] [data-hero-text]{align-content:center;padding:clamp(28px,5vw,80px) var(--gutter,16px)}
@media (min-width:900px){
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=halves] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(80vh,740px)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=halves] [data-sec=hero] [data-hero-media]{order:-1}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=halves] [data-sec=hero] [data-hero-text]{padding-inline:clamp(28px,5vw,80px)}
}
/* type: one very large headline on a plain band; no media card on the first screen */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=type] [data-sec=hero] [data-hero-media]:not(:has(img)){display:none}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=type] [data-sec=hero] [data-hero-text]{max-width:none}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=type] [data-sec=hero] h1{max-width:13ch;font-size:clamp(2.8rem,1.4rem + 6vw,7rem);line-height:.95;letter-spacing:-.03em}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=type] [data-sec=hero] :is(.when,.facts){max-width:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
/* form: the page's form section (events: RSVP, donation: give) stands beside the hero text as a card; no media card */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=form] [data-sec=hero] [data-hero-media]:not(:has(img)){display:none}
@media (min-width:960px){
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=form] [data-main]{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,5vw,72px);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=form] [data-main] > section{grid-column:1 / -1;max-width:none;padding-inline:0;margin-inline:0;box-shadow:none;clip-path:none}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=form] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1;align-self:start;padding-top:var(--s-8)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=form] [data-main] > [data-sec=cta]{grid-column:2;grid-row:1;margin-block:var(--s-7);padding:clamp(20px,2.5vw,32px);border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface);box-shadow:0 18px 40px -28px rgb(0 0 0/.4)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=form] [data-main] > [data-sec=cta] h2{font-size:var(--t-xl);margin-bottom:0}
}
/* sticky: the hero text (with a compact media card under it) is a left column pinned while the sections scroll on the right */
@media (min-width:960px){
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-main]{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,6vw,96px);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-main] > section{grid-column:2;max-width:none;padding-inline:0;margin-inline:0;box-shadow:none;clip-path:none}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1 / span 12;position:sticky;top:0;align-self:start;padding-block:var(--s-7)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-main] > section:nth-child(2){border-top:0}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-sec=hero] .hero-in{gap:var(--s-5)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-sec=hero] h1{font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=sticky] [data-sec=hero] :is(.when,.facts){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* rows: a slim title line, then the kit's own list section (events: the agenda, donation: where the money goes) as wide rows */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=rows] [data-sec=hero]{padding-block:var(--s-6) var(--s-4)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=rows] [data-sec=hero] .hero-in{display:block}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=rows] [data-sec=hero] :is([data-hero-media]:not(:has(img)),.lead){display:none}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-3) var(--s-6);padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=rows] [data-sec=hero] h1{max-width:24ch;font-size:clamp(2rem,1.3rem + 2vw,3rem)}
@media (max-width:759px){html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr)}}
/* minimal: a big centred wordmark, the media card as a centred block, the headline small and centred under it */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=minimal] [data-sec=hero] .hero-in{justify-items:center;gap:var(--s-5)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=minimal] [data-sec=hero] [data-hero-media]{order:-1;width:min(560px,100%);border:0;box-shadow:none;background:transparent}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=minimal] [data-sec=hero] [data-hero-text]{justify-items:center;text-align:center;max-width:720px}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=minimal] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=minimal] [data-sec=hero] h1{max-width:24ch;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem)}
/* poster: the first screen is one full-bleed accent band: the headline big on the left, the rest stacked on the right, the media card a strip along its foot */
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero]{max-width:none;padding-block:var(--s-8) var(--s-7);padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)));background:var(--accent);color:var(--on-accent)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] :is(h1,h1 em,.kicker,.lead,dt,dd){color:var(--on-accent)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] .hero-in{gap:var(--s-6)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] h1{max-width:none;font-size:clamp(2.6rem,1.4rem + 4.6vw,5.6rem);line-height:.98}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] :is(.when,.facts){border-top-color:color-mix(in srgb,var(--on-accent) 40%,transparent)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] [data-hero-media]{position:static;border:0;box-shadow:none;background:color-mix(in srgb,var(--ink) 80%,var(--accent))}
@media (min-width:900px){
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:var(--s-8);align-items:end}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] [data-hero-text] > :is(.kicker,h1){grid-column:1}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] [data-hero-text] > h1{grid-row:2 / span 3}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] [data-hero-text] > :not(.kicker):not(h1){grid-column:2}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=poster] [data-sec=hero] :is(.when,.facts){grid-template-columns:minmax(0,1fr)}
}
/* phone: the nav's two parts (brand, links) on two rows under split / minimal (the links list is the last child, so the shared rules put it in a third
   column or pin it over the wordmark) */
@media (max-width:760px){
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-nav=split] [data-sec=nav] > *{grid-template-columns:minmax(0,1fr)}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-nav=split] [data-sec=nav] > * > :first-child{grid-column:1;justify-self:start}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-nav=split] [data-sec=nav] > * > :last-child:not(:first-child){grid-column:1;grid-row:2;justify-self:start}
html:is([data-kv-kit=events],[data-kv-kit=donation])[data-l-fs=minimal] [data-sec=nav] > * > :last-child:not(:first-child){position:static;justify-self:center}
}
/* -- events: the countdown keeps its parts (the generic first screens hide a media block's non-image children) */
html[data-kv-kit=events][data-l-fs] [data-sec=hero] .count > :is(.count-h,.count-note){display:block}
html[data-kv-kit=events][data-l-fs] [data-sec=hero] .count:not(.past) > .count-grid{display:grid}
html[data-kv-kit=events][data-l-fs=type] [data-sec=hero] .count{display:none}
html[data-kv-kit=events][data-l-fs=halves] [data-sec=hero] .count{position:static;align-content:center;padding:clamp(28px,5vw,80px);border:0;border-radius:0;box-shadow:none;background:var(--accent);color:var(--on-accent)}
html[data-kv-kit=events][data-l-fs=halves] [data-sec=hero] .count :is(.count-h,.count-note,.count-cell span){color:var(--on-accent)}
html[data-kv-kit=events][data-l-fs=halves] [data-sec=hero] .count-cell{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)}
html[data-kv-kit=events][data-l-fs=halves] [data-sec=hero] .count-cell b{font-size:clamp(2rem,1.2rem + 2.6vw,3.6rem)}
html[data-kv-kit=events][data-l-fs=form] [data-main] > [data-sec=cta] .form{max-width:none}
html[data-kv-kit=events][data-l-fs=sticky] [data-sec=hero] .count{position:static;padding:var(--s-4)}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=hero] [data-hero-text] > :not(.actions){grid-column:1}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .actions{grid-column:2;grid-row:1 / span 3;align-self:end}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=hero] .when{max-width:none;border-top:0;padding-top:0}
html[data-kv-kit=events][data-l-fs=rows] [data-main] > [data-sec=list]{order:1;border-top:0;padding-top:var(--s-4)}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=list] [data-sec-head]{display:none}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=list] .timeline{max-width:none}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=list] .timeline li{grid-template-columns:clamp(72px,12vw,160px) minmax(0,1fr);padding-block:var(--s-4)}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=list] .timeline li:first-child{border-top:1px solid var(--line);padding-top:var(--s-4)}
html[data-kv-kit=events][data-l-fs=rows] [data-sec=list] .timeline time{font-size:clamp(1.1rem,.9rem + 1vw,1.8rem)}
@media (min-width:760px){html[data-kv-kit=events][data-l-fs=rows] [data-sec=list] .t-body{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.5fr);column-gap:var(--s-6);align-items:baseline}}
@media (max-width:759px){html[data-kv-kit=events][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .actions{grid-column:1;grid-row:auto}}
/* events tiles: a short centred line, then the speakers as the first screen's grid */
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero]{padding-block:var(--s-7) var(--s-3);text-align:center}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero] :is(.count,.when){display:none}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero] .hero-copy{max-width:780px;margin-inline:auto;justify-items:center}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero] .hero-copy > *{margin-inline:auto}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero] .actions{justify-content:center}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=hero] h1{max-width:20ch;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.6rem)}
html[data-kv-kit=events][data-l-fs=tiles] [data-main] > [data-sec=feature]{order:1;border-top:0;padding-top:var(--s-5)}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=feature] [data-sec-head]{display:none}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=feature] .speakers{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=feature] .speaker{justify-items:center;text-align:center;padding-block:var(--s-6)}
html[data-kv-kit=events][data-l-fs=tiles] [data-sec=feature] .avatar{width:96px;height:96px;font-size:var(--t-2xl)}
html[data-kv-kit=events][data-l-fs=minimal] [data-sec=hero] .count{position:static;justify-items:center;text-align:center}
html[data-kv-kit=events][data-l-fs=minimal] [data-sec=hero] .actions{justify-content:center}
html[data-kv-kit=events][data-l-fs=poster] [data-sec=hero] :is(.count-h,.count-note,.count-cell span,.count-cell b){color:var(--on-accent)}
html[data-kv-kit=events][data-l-fs=poster] [data-sec=hero] .btn-primary{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}
html[data-kv-kit=events][data-l-fs=poster] [data-sec=hero] .btn-ghost{color:var(--on-accent);border-color:var(--on-accent)}
html[data-kv-kit=events][data-l-fs=poster] [data-sec=hero] .count{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-5);padding:var(--s-4) var(--s-5)}
html[data-kv-kit=events][data-l-fs=poster] [data-sec=hero] .count-cell{background:transparent;padding-block:0}
@media (max-width:899px){html[data-kv-kit=events][data-l-fs=poster] [data-sec=hero] .count{grid-template-columns:minmax(0,1fr)}}
/* -- donation: the thermometer card in its .visual frame */
html[data-kv-kit=donation][data-l-fs] [data-sec=hero] .visual > .thermo{display:grid}
html[data-kv-kit=donation][data-l-fs=halves] [data-sec=hero] .visual{display:grid;align-content:center;padding:clamp(28px,5vw,80px);border-radius:0}
html[data-kv-kit=donation][data-l-fs=halves] [data-sec=hero] .thermo{width:min(460px,100%)}
html[data-kv-kit=donation][data-l-fs=halves] [data-sec=hero] .t-nums b{font-size:clamp(2.4rem,1.4rem + 3vw,4rem)}
html[data-kv-kit=donation][data-l-fs=form] [data-main] > [data-sec=cta] .give-grid{grid-template-columns:minmax(0,1fr)}
html[data-kv-kit=donation][data-l-fs=form] [data-main] > [data-sec=cta] .give{padding:0;border:0;box-shadow:none;background:transparent}
html[data-kv-kit=donation][data-l-fs=sticky] [data-sec=hero] .visual{padding:var(--s-4);border-radius:var(--r-card,10px)}
html[data-kv-kit=donation][data-l-fs=rows] [data-sec=hero] [data-hero-text] > :not(.facts){grid-column:1}
html[data-kv-kit=donation][data-l-fs=rows] [data-sec=hero] .facts{grid-column:2;grid-row:1 / span 3;align-self:end;width:auto;margin:0;padding:0;border:0;grid-template-columns:repeat(3,auto);column-gap:var(--s-6)}
html[data-kv-kit=donation][data-l-fs=rows] [data-main] > [data-sec=story]{order:1;border-top:0;padding-top:var(--s-5)}
html[data-kv-kit=donation][data-l-fs=rows] [data-sec=story] .alloc{max-width:none;gap:0}
html[data-kv-kit=donation][data-l-fs=rows] [data-sec=story] .alloc .row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:center;column-gap:var(--s-6);padding-block:var(--s-4);border-top:1px solid var(--line)}
html[data-kv-kit=donation][data-l-fs=rows] [data-sec=story] .alloc .bar{height:18px}
@media (max-width:759px){html[data-kv-kit=donation][data-l-fs=rows] [data-sec=hero] .facts{grid-column:1;grid-row:auto;grid-template-columns:repeat(3,minmax(0,1fr))}html[data-kv-kit=donation][data-l-fs=rows] [data-sec=story] .alloc .row{grid-template-columns:minmax(0,1fr)}}
/* donation give: a short centred line, then the giving form and the donor wall as the first screen */
html[data-kv-kit=donation][data-l-fs=give] [data-sec=hero]{padding-block:var(--s-7) var(--s-3);text-align:center}
html[data-kv-kit=donation][data-l-fs=give] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=donation][data-l-fs=give] [data-sec=hero] :is(.visual,.facts){display:none}
html[data-kv-kit=donation][data-l-fs=give] [data-sec=hero] .hero-copy{max-width:780px;margin-inline:auto;justify-items:center}
html[data-kv-kit=donation][data-l-fs=give] [data-sec=hero] .hero-copy > *{margin-inline:auto}
html[data-kv-kit=donation][data-l-fs=give] [data-sec=hero] h1{max-width:20ch;font-size:clamp(2.2rem,1.4rem + 2.6vw,3.6rem)}
html[data-kv-kit=donation][data-l-fs=give] [data-main] > [data-sec=cta]{order:1;border-top:0;padding-top:var(--s-5)}
html[data-kv-kit=donation][data-l-fs=give] [data-sec=cta] [data-sec-head]{display:none}
html[data-kv-kit=donation][data-l-fs=minimal] [data-sec=hero] .visual{padding:0}
html[data-kv-kit=donation][data-l-fs=minimal] [data-sec=hero] .visual::before{display:none}
html[data-kv-kit=donation][data-l-fs=minimal] [data-sec=hero] .thermo{max-width:none;text-align:center;justify-items:center}
html[data-kv-kit=donation][data-l-fs=minimal] [data-sec=hero] .t-track{width:100%}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .visual{padding:var(--s-4) var(--s-5);border-radius:var(--r-card,10px)}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .visual::before{display:none}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .thermo{max-width:none;margin:0;padding:0;border:0;box-shadow:none;background:transparent;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:var(--s-5)}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .thermo > :is(.t-note,.t-meter){grid-column:1 / -1}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .thermo :is(.t-label,.t-nums b,.t-nums span,.t-note,.t-meter,.t-meter b){color:var(--on-accent)}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .t-meter{border-top-color:color-mix(in srgb,var(--on-accent) 30%,transparent)}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .t-track{background:color-mix(in srgb,var(--on-accent) 22%,transparent)}
html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .t-track span{background:var(--on-accent)}
@media (max-width:899px){html[data-kv-kit=donation][data-l-fs=poster] [data-sec=hero] .thermo{grid-template-columns:minmax(0,1fr)}}

/* halves: the art fills the left half of the first screen edge to edge, the text the right half */
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero]{max-width:none;padding:0}
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero] .hero-in{gap:0;align-items:stretch}
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero] .kv-art[data-hero-media]{min-height:220px;border-radius:0}
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero] [data-hero-text]{align-content:center;padding:clamp(28px,5vw,80px) var(--gutter,16px)}
@media (min-width:761px){
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(80vh,740px)}
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero] .kv-art[data-hero-media]{order:-1;min-height:100%}
html[data-kv-kit=error_pages][data-l-fs=halves] [data-sec=hero] [data-hero-text]{padding-inline:clamp(28px,5vw,80px)}
}
/* cover: the art fills the whole first screen; the text sits centred on a soft panel */
html[data-kv-kit=error_pages][data-l-fs=cover] [data-sec=hero]{position:relative;isolation:isolate;display:grid;align-items:center;max-width:none;min-height:min(80vh,720px);padding-block:clamp(3rem,8vw,6rem);padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)))}
html[data-kv-kit=error_pages][data-l-fs=cover] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=error_pages][data-l-fs=cover] [data-sec=hero] .kv-art[data-hero-media]{position:absolute;inset:0;z-index:-1;min-height:0;border-radius:0}
html[data-kv-kit=error_pages][data-l-fs=cover] [data-sec=hero] [data-hero-text]{max-width:min(760px,100%);margin-inline:auto;justify-items:center;text-align:center;padding:clamp(24px,4vw,48px);border-radius:var(--r-card,10px);background:color-mix(in srgb,var(--bg) 92%,transparent);box-shadow:0 24px 60px -30px rgb(0 0 0/.45)}
html[data-kv-kit=error_pages][data-l-fs=cover] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
html[data-kv-kit=error_pages][data-l-fs=cover] [data-sec=hero] :is(.actions,.url-line){justify-content:center}
/* rows: a slim title line (headline left, the two buttons right), then the site search as the first screen's main block */
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero]{padding-block:var(--s-7) var(--s-4)}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] :is(.kv-art,.lead){display:none}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s-3) var(--s-6);padding-bottom:var(--s-5);border-bottom:2px solid var(--ink)}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] [data-hero-text] > :not(.actions){grid-column:1}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .actions{grid-column:2;grid-row:1 / span 3;align-self:end;margin:0}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] h1{max-width:28ch;font-size:clamp(2rem,1.3rem + 2vw,3rem)}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-main] > [data-sec=other]{order:1;border-top:0;padding-top:var(--s-5)}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=other] .field{max-width:none}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=other] input{min-height:60px;font-size:var(--t-lg)}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=other] .results{max-width:none}
@media (max-width:760px){
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] [data-hero-text]{grid-template-columns:minmax(0,1fr)}
html[data-kv-kit=error_pages][data-l-fs=rows] [data-sec=hero] [data-hero-text] > .actions{grid-column:1;grid-row:auto}
}
/* sticky: the text (the art a short band under it) is a left column pinned while the sections scroll on the right */
@media (min-width:960px){
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-main]{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,6vw,96px);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-main] > :is(section,article){grid-column:2;max-width:none;padding-inline:0;margin-inline:0;box-shadow:none;clip-path:none}
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1 / span 12;position:sticky;top:0;align-self:start;padding-block:var(--s-8) var(--s-6)}
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-main] > section:nth-child(2){border-top:0}
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-sec=hero] .kv-art[data-hero-media]{min-height:180px}
html[data-kv-kit=error_pages][data-l-fs=sticky] [data-sec=hero] h1{font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem)}
}
/* phone: the nav's two parts (brand, tools) on two rows under split / minimal */
@media (max-width:760px){
html[data-kv-kit=error_pages][data-l-nav=split] [data-sec=nav] > *{grid-template-columns:minmax(0,1fr)}
html[data-kv-kit=error_pages][data-l-nav=split] [data-sec=nav] > * > :first-child{grid-column:1;justify-self:start}
html[data-kv-kit=error_pages][data-l-nav=split] [data-sec=nav] > * > :last-child:not(:first-child){grid-column:1;grid-row:2;justify-self:start}
html[data-kv-kit=error_pages][data-l-fs=minimal] [data-sec=nav] > * > :last-child:not(:first-child){position:static;justify-self:center}
}
/* block: the accent panel's kicker pill and ghost button in the on-accent colour */
html[data-kv-kit=error_pages][data-l-fs=block] [data-sec=hero] .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent);color:var(--on-accent)}
html[data-kv-kit=error_pages][data-l-fs=block] [data-sec=hero] .btn-ghost{color:var(--on-accent)}
/* sidebar: the nav's tools (home link, reading mode) stack in the column */
@media (min-width:960px){html[data-kv-kit=error_pages][data-l-fs=sidebar] [data-sec=nav] .nav-tools{display:grid;justify-items:start;gap:var(--s-3)}}

/* ---- image_gallery (L-SITES-C 10-11; a production base): the header is the hero ([data-hero-text] + a photo panel app.js fills from DATA under a first
   screen), main holds one list section (filters [data-filters], the grid [data-list] > [data-item]). Generic first screens with the real photo: overlay,
   mosaic, minimal; type and catalogue as they are; kit ones: halves, sticky / aside (the header a pinned column left / right of the grid), wall (a centred
   line over a narrow masonry wall). Full-bleed first screens drop the header's page width. */
html[data-kv-kit=image_gallery][data-l-fs] [data-sec=hero] [data-hero-media] img{display:block;width:100%;height:100%;object-fit:cover}
html[data-kv-kit=image_gallery][data-l-fs] [data-sec=hero] [data-hero-media]:empty{display:none}
html[data-kv-kit=image_gallery][data-l-fs=overlay] [data-sec=hero],html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero]{max-width:none}
html[data-kv-kit=image_gallery][data-l-fs=overlay] [data-sec=hero]{padding-inline:max(var(--gutter,24px),calc((100% - var(--page,1200px)) / 2 + var(--gutter,24px)))}
html[data-kv-kit=image_gallery][data-l-fs=overlay] [data-sec=hero] [data-hero-text]{justify-items:start}
html[data-kv-kit=image_gallery][data-l-fs=minimal] [data-sec=hero] [data-hero-text]{justify-items:center}
/* catalogue: the title band keeps the slideshow button at its right */
html[data-kv-kit=image_gallery][data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > *{grid-column:1}
html[data-kv-kit=image_gallery][data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > #show{grid-column:2;grid-row:1 / span 3;align-self:center}
@media (max-width:760px){html[data-kv-kit=image_gallery][data-l-fs=catalogue] [data-sec=hero] [data-hero-text] > #show{grid-column:1;grid-row:auto}}
/* halves: the photo fills the left half of the first screen edge to edge, the text the right half */
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero]{padding:0}
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] .hero-in{gap:0;align-items:stretch}
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] [data-hero-media]{min-height:240px}
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] [data-hero-text]{align-content:center;padding:clamp(28px,5vw,80px) var(--gutter,16px)}
@media (min-width:761px){
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(78vh,720px)}
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] [data-hero-media]{order:-1}
html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] [data-hero-text]{padding-inline:clamp(28px,5vw,80px)}
}
@media (max-width:760px){html[data-kv-kit=image_gallery][data-l-fs=halves] [data-sec=hero] [data-hero-media]{height:240px}}
/* sticky / aside: on a wide screen the header is a pinned column (the text, the photo under it) beside the grid: left (sticky) or right (aside) */
html[data-kv-kit=image_gallery][data-l-fs=sticky] [data-sec=hero] .hero-in,html[data-kv-kit=image_gallery][data-l-fs=aside] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
html[data-kv-kit=image_gallery][data-l-fs=sticky] [data-sec=hero] [data-hero-media],html[data-kv-kit=image_gallery][data-l-fs=aside] [data-sec=hero] [data-hero-media]{aspect-ratio:4/3;border-radius:var(--r-card,10px);overflow:hidden}
@media (min-width:960px){
html[data-kv-kit=image_gallery][data-l-fs=sticky] body,html[data-kv-kit=image_gallery][data-l-fs=aside] body{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);column-gap:clamp(32px,4vw,64px);align-items:start;max-width:var(--page,1200px);margin-inline:auto;padding-inline:var(--gutter,24px);box-sizing:border-box}
html[data-kv-kit=image_gallery][data-l-fs=sticky] body > :is([data-sec=hero],[data-main]),html[data-kv-kit=image_gallery][data-l-fs=aside] body > :is([data-sec=hero],[data-main]){max-width:none;padding-inline:0;margin-inline:0;grid-row:1}
html[data-kv-kit=image_gallery][data-l-fs=sticky] [data-sec=hero],html[data-kv-kit=image_gallery][data-l-fs=aside] [data-sec=hero]{position:sticky;top:0;padding-block:var(--s-7)}
html[data-kv-kit=image_gallery][data-l-fs=sticky] [data-sec=hero] h1,html[data-kv-kit=image_gallery][data-l-fs=aside] [data-sec=hero] h1{font-size:clamp(2rem,1.3rem + 2vw,3rem)}
html[data-kv-kit=image_gallery][data-l-fs=sticky] [data-main],html[data-kv-kit=image_gallery][data-l-fs=aside] [data-main]{padding-top:var(--s-7)}
html[data-kv-kit=image_gallery][data-l-fs=sticky] .filters,html[data-kv-kit=image_gallery][data-l-fs=aside] .filters{border-top:0;padding-top:0}
html[data-kv-kit=image_gallery][data-l-fs=sticky] .gallery,html[data-kv-kit=image_gallery][data-l-fs=aside] .gallery{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
html[data-kv-kit=image_gallery][data-l-fs=sticky] body > [data-sec=hero]{grid-column:1}
html[data-kv-kit=image_gallery][data-l-fs=sticky] body > [data-main]{grid-column:2}
html[data-kv-kit=image_gallery][data-l-fs=aside] body{grid-template-columns:minmax(0,.64fr) minmax(0,.36fr)}
html[data-kv-kit=image_gallery][data-l-fs=aside] body > [data-sec=hero]{grid-column:2}
html[data-kv-kit=image_gallery][data-l-fs=aside] body > [data-main]{grid-column:1}
}
/* wall: a short centred line, then the photos as a narrow centred masonry wall of mixed shapes */
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-sec=hero]{padding-block:var(--s-7) var(--s-5);justify-items:center;text-align:center}
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-sec=hero] [data-hero-media]:not(:has(img)){display:none}
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-sec=hero] [data-hero-text]{justify-items:center;max-width:760px;margin-inline:auto}
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-sec=hero] h1{max-width:20ch;font-size:clamp(2rem,1.3rem + 2.2vw,3.2rem)}
html[data-kv-kit=image_gallery][data-l-fs=wall] [data-main]{max-width:min(680px,100%)}
html[data-kv-kit=image_gallery][data-l-fs=wall] .filters{justify-content:center}
html[data-kv-kit=image_gallery][data-l-fs=wall] .chips{margin-right:0;justify-content:center}
html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery{display:block;columns:3 200px;column-gap:var(--s-4)}
html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery > li{break-inside:avoid;margin-bottom:var(--s-5)}
html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery > li[hidden]{display:none}
html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery > li:nth-child(3n+1) .thumb{aspect-ratio:3/4}
html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery > li:nth-child(3n+2) .thumb{aspect-ratio:1}
html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery > li:nth-child(3n) .thumb{aspect-ratio:4/3}
@media (max-width:760px){html[data-kv-kit=image_gallery][data-l-fs=wall] .gallery{columns:2}}
/* minimal: under the wide photo and the small centred headline, the photos run as one scrolling film strip */
html[data-kv-kit=image_gallery][data-l-fs=minimal] .gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:clamp(220px,26%,300px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:var(--s-3)}
html[data-kv-kit=image_gallery][data-l-fs=minimal] .gallery > li{scroll-snap-align:start}
html[data-kv-kit=image_gallery][data-l-fs=minimal] .filters{justify-content:center}
html[data-kv-kit=image_gallery][data-l-fs=minimal] .chips{margin-right:0;justify-content:center}

/* ---- listings (L-SITES-C 10-11; the job board): hero = [data-hero-text] (h1 + lede) + the art panel, the filter bar = section[data-sec=other][data-filters],
   the board (list + detail) stays a <div> after it (kept a div so the design polish counts today's sections). Generic: arch (text + art), type, mosaic,
   sidebar, minimal; kit: halves, cover, rail (filters a left column), aside (hero + filters a right column), search (the filters a card beside the
   hero). Any first screen keeps the board after the filters (the shared flex column orders sections only). */
html[data-kv-kit=listings][data-l-fs] [data-main] > .board{order:6}
/* halves: the art fills the left half of the hero, the text the right half */
html[data-kv-kit=listings][data-l-fs=halves] [data-sec=hero] .hero-in{gap:0;align-items:stretch;border-radius:var(--r-card,10px);overflow:hidden;background:var(--surface)}
html[data-kv-kit=listings][data-l-fs=halves] [data-sec=hero] .kv-art[data-hero-media]{min-height:200px;border-radius:0}
html[data-kv-kit=listings][data-l-fs=halves] [data-sec=hero] [data-hero-text]{align-content:center;padding:clamp(24px,4vw,64px)}
@media (min-width:761px){
html[data-kv-kit=listings][data-l-fs=halves] [data-sec=hero] .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:min(62vh,560px)}
html[data-kv-kit=listings][data-l-fs=halves] [data-sec=hero] .kv-art[data-hero-media]{order:-1;min-height:100%}
}
/* cover: the art fills the hero box; the text sits centred on a soft panel */
html[data-kv-kit=listings][data-l-fs=cover] [data-sec=hero]{position:relative;isolation:isolate;display:grid;align-items:center;min-height:min(62vh,560px);padding:clamp(2rem,6vw,4.5rem) var(--gutter,16px);border-radius:var(--r-card,10px);overflow:hidden;margin-top:var(--s-5)}
html[data-kv-kit=listings][data-l-fs=cover] [data-sec=hero] .hero-in{display:block}
html[data-kv-kit=listings][data-l-fs=cover] [data-sec=hero] .kv-art[data-hero-media]{position:absolute;inset:0;z-index:-1;min-height:0;border-radius:0}
html[data-kv-kit=listings][data-l-fs=cover] [data-sec=hero] [data-hero-text]{max-width:min(720px,100%);margin-inline:auto;justify-items:center;text-align:center;padding:clamp(24px,4vw,48px);border-radius:var(--r-card,10px);background:color-mix(in srgb,var(--bg) 92%,transparent)}
html[data-kv-kit=listings][data-l-fs=cover] [data-sec=hero] [data-hero-text] > *{margin-inline:auto}
/* rail / aside / search: the filters stack as one column card */
html[data-kv-kit=listings][data-l-fs=rail] [data-sec=hero] .kv-art,html[data-kv-kit=listings][data-l-fs=aside] [data-sec=hero] .kv-art,html[data-kv-kit=listings][data-l-fs=search] [data-sec=hero] .kv-art{display:none}
html[data-kv-kit=listings][data-l-fs=rail] [data-sec=hero] .hero-in,html[data-kv-kit=listings][data-l-fs=aside] [data-sec=hero] .hero-in,html[data-kv-kit=listings][data-l-fs=search] [data-sec=hero] .hero-in{display:block}
@media (min-width:960px){
html[data-kv-kit=listings][data-l-fs=rail] [data-main],html[data-kv-kit=listings][data-l-fs=aside] [data-main],html[data-kv-kit=listings][data-l-fs=search] [data-main]{display:grid;column-gap:clamp(24px,3vw,48px);align-items:start}
html[data-kv-kit=listings][data-l-fs=rail] [data-main] > [data-filters],html[data-kv-kit=listings][data-l-fs=aside] [data-main] > [data-filters],html[data-kv-kit=listings][data-l-fs=search] [data-main] > [data-filters]{grid-template-columns:minmax(0,1fr);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card,10px);background:var(--surface);box-shadow:none;clip-path:none}
html[data-kv-kit=listings][data-l-fs=rail] [data-main] > [data-filters] .search,html[data-kv-kit=listings][data-l-fs=aside] [data-main] > [data-filters] .search,html[data-kv-kit=listings][data-l-fs=search] [data-main] > [data-filters] .search{grid-column:auto}
html[data-kv-kit=listings][data-l-fs=rail] [data-main]{grid-template-columns:270px minmax(0,1fr)}
html[data-kv-kit=listings][data-l-fs=rail] [data-main] > [data-sec=hero]{grid-column:1 / -1;grid-row:1;padding-block:var(--s-6) var(--s-4)}
html[data-kv-kit=listings][data-l-fs=rail] [data-sec=hero] h1{font-size:clamp(2rem,1.3rem + 2vw,3rem);max-width:none}
html[data-kv-kit=listings][data-l-fs=rail] [data-main] > [data-filters]{grid-column:1;grid-row:2;position:sticky;top:var(--s-4);margin-top:var(--s-6)}
html[data-kv-kit=listings][data-l-fs=rail] [data-main] > .board{grid-column:2;grid-row:2}
html[data-kv-kit=listings][data-l-fs=aside] [data-main]{grid-template-columns:minmax(0,1fr) 330px}
html[data-kv-kit=listings][data-l-fs=aside] [data-main] > [data-sec=hero]{grid-column:2;grid-row:1;padding-block:var(--s-6) var(--s-4)}
html[data-kv-kit=listings][data-l-fs=aside] [data-sec=hero] h1{font-size:clamp(2rem,1.3rem + 1.6vw,2.6rem)}
html[data-kv-kit=listings][data-l-fs=aside] [data-main] > [data-filters]{grid-column:2;grid-row:2}
html[data-kv-kit=listings][data-l-fs=aside] [data-main] > .board{grid-column:1;grid-row:1 / span 3;padding-top:var(--s-6)}
html[data-kv-kit=listings][data-l-fs=search] [data-main]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
html[data-kv-kit=listings][data-l-fs=search] [data-main] > [data-sec=hero]{grid-column:1;grid-row:1;align-self:center}
html[data-kv-kit=listings][data-l-fs=search] [data-main] > [data-filters]{grid-column:2;grid-row:1;margin-block:var(--s-6);box-shadow:0 18px 40px -28px rgb(0 0 0/.4)}
html[data-kv-kit=listings][data-l-fs=search] [data-main] > .board{grid-column:1 / -1;grid-row:2}
}
/* minimal: the filter bar a narrow centred card under the centred headline */
html[data-kv-kit=listings][data-l-fs=minimal] [data-main] > [data-filters]{width:min(760px,100%);margin-inline:auto;border:1px solid var(--line);border-radius:var(--r-card,10px);padding:var(--s-4);box-shadow:none;clip-path:none}
html[data-kv-kit=listings][data-l-fs=minimal] [data-sec=hero] [data-hero-text]{justify-items:center}
/* phone: the nav's parts under split / minimal (brand, tagline, saved): brand and saved on one row */
@media (max-width:760px){
html[data-kv-kit=listings][data-l-nav=split] [data-sec=nav] > *{grid-template-columns:minmax(0,1fr) auto}
html[data-kv-kit=listings][data-l-nav=split] [data-sec=nav] > * > :first-child{grid-column:1;justify-self:start}
html[data-kv-kit=listings][data-l-nav=split] [data-sec=nav] > * > :not(:first-child):not(:last-child){grid-column:1 / -1;grid-row:2}
html[data-kv-kit=listings][data-l-nav=split] [data-sec=nav] > * > :last-child:not(:first-child){grid-column:2;grid-row:1}
html[data-kv-kit=listings][data-l-fs=minimal] [data-sec=nav] > * > :last-child:not(:first-child){position:static;justify-self:center}
}
/* sidebar: the polish's band on the filter bar stays inside its column (its 100vmax shadow painted over the nav column) */
@media (min-width:960px){html[data-kv-kit=listings][data-l-fs=sidebar] [data-main] > [data-filters]{box-shadow:none;clip-path:none;background:var(--sunk-0,var(--sunk))}}