/* ============================================================
   khyzr.com subpages (21 Oct 2026): the six disciplines, the six case studies and About, as the subpage lab designed
   them and Cisco approved them ("Excellent work with these. Approved."). What the pages add to the home's own ground:
   the head's <style>, tokens.css, home.css and the close's and the footer's sheets come first, unchanged
   (tools/subpages/build.mjs writes the pages). The hero is a hero: the title at the left, a step under the home's,
   and the photograph (a case's typographic cover) bled off the right edge at the hero's full height; on a phone the
   picture comes first. Then a few sections, each with one job, on the hero's split.
   ============================================================ */
html,body{background:var(--paper)}
main{display:block;padding-top:var(--nav-h)}
:root{--nav-h:4rem;--sp-gap:clamp(2rem,4.4*var(--u),4.5rem)}
@media (max-width:760px){:root{--nav-h:3.5rem}}
/* no line ends on one or two words anywhere a subpage sets running text */
main p,main li,main blockquote,main dd{text-wrap:pretty}
/* the bar marks the page you are on (About) with the light it gives the section on screen at home */
.nav-mid a[aria-current="page"]{color:var(--ink)}
.nav-mid a[aria-current="page"]::after{opacity:1;transform:none}
.nav.ink .nav-mid a[aria-current="page"]{color:#fff}

/* ---- the section rhythm, set per page (the render script): a whole measure where the ground changes, .6 where two
   neighbours share one (home.css) ---- */
.sp-sec{padding:var(--section-pad-y) var(--gx)}
.sp-sec > .in{max-width:var(--container);margin:0 auto}
.hs.sp-pt1{padding-top:var(--section-pad-y)}
.hs.sp-pt6{padding-top:calc(var(--section-pad-y) * .6)}
.hs.sp-pb1{padding-bottom:var(--section-pad-y)}
.hs.sp-pb6{padding-bottom:calc(var(--section-pad-y) * .6)}
/* the sections' titles a clear step under the hero's: the home's second size (Alongside's, 2.9rem), and on a phone
   under the hero's phone size */
main .hs-title{font-size:var(--text-quote);line-height:1.08}
@media (max-width:860px){main .hs-title{font-size:clamp(1.75rem,6.2vw,2.25rem);line-height:1.06}}
/* the one split every section stands on: the hero's halves read as 5 : 7, the words at the left, the matter at the
   right */
.sp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--sp-gap);align-items:start}
@media (max-width:860px){.sp-split{grid-template-columns:minmax(0,1fr)}}
/* the labels the site sets in capitals (Trusted's, the footer's) */
.sp-crumbs,.sp-glance dt,.sp-with-l,.sp-q-l,.sp-figs .l,.sp-others-l,.sp-voices-l,.sp-pn .kk,.sp-cover .l,.sp-card .po-l{font:600 var(--text-eyebrow)/1.4 var(--font-tech);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--muted)}

/* ==== the hero: the copy in the container's left half, crumbs at the top and the title on the floor; the picture
   from the middle of the page to the right edge, the hero's whole height ==== */
.sp-hero{--sp-h1s:clamp(3rem,5.4vw,5.25rem);--sp-h1l:.96;--sp-hh:clamp(32rem,calc(74svh - var(--nav-h)),46rem);
  position:relative;display:flex;min-height:var(--sp-hh);padding:0 var(--gx);background:var(--paper)}
/* a sentence for a title (a study's, About's) sits a size down, still over every heading under it */
.sp-hero.is-sentence{--sp-h1s:clamp(2.375rem,4vw,3.75rem);--sp-h1l:1.03}
.sp-hero > .in{display:flex;width:100%;max-width:var(--container);margin:0 auto}
.sp-copy{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-6);width:calc(50% - var(--sp-gap));min-width:0;
  padding:clamp(1.5rem,4.4vh,2.75rem) 0 clamp(2.5rem,7vh,4.5rem)}
.sp-crumbs{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .625rem;list-style:none}
.sp-crumbs li{display:inline-flex;align-items:baseline;gap:.625rem}
.sp-crumbs li + li::before{content:"/" / "";color:var(--faint)}
.sp-crumbs a{position:relative;color:inherit;text-decoration:none;transition:color .2s ease}
.sp-crumbs a::after{content:"";position:absolute;inset:-.875rem -.375rem}
@media (hover:hover){.sp-crumbs a:hover{color:var(--ink)}}
.sp-crumbs a:focus-visible{border-radius:4px}
.sp-crumbs [aria-current]{color:var(--ink)}
.sp-h1{font:var(--fw-display) var(--sp-h1s)/var(--sp-h1l) var(--font-display);letter-spacing:-.034em;color:var(--ink);text-wrap:balance}
.sp-lede{max-width:34ch;margin-top:var(--space-4);font:var(--fw-text) var(--text-lede)/1.5 var(--font-text);color:var(--body)}
.sp-cta{margin-top:var(--space-5)}
/* the way onward: the nav's ink pill at the hero's size, its arrow the site's */
.sp-btn{display:inline-flex;align-items:center;gap:.625rem;height:3rem;padding:0 1.25rem 0 1.5rem;border-radius:var(--radius-pill);background:var(--ink);color:#fff;
  font:var(--fw-ui) 1rem/1 var(--font-text);text-decoration:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s ease}
.sp-btn svg{display:block;width:1.125rem;height:1.125rem;transition:transform var(--dur-hover) var(--ease-pop)}
@media (hover:hover){.sp-btn:hover{background:var(--forest)}.sp-btn:hover svg{transform:translateX(3px)}}
.sp-btn:active{transform:scale(.98)}
.sp-btn:focus-visible{outline:2px solid var(--khyzr-green);outline-offset:3px}
/* the picture: bled off the right edge, square-cornered, the hero's height */
.sp-visual{position:absolute;top:0;right:0;bottom:0;width:50%;margin:0;overflow:hidden;background:var(--surface-2)}
.sp-visual > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
/* the arrival: each part rises a beat behind the one before it, on the Green Trace; the picture settles */
@keyframes sp-in{from{opacity:0;transform:translateY(18px)}}
@keyframes sp-settle{from{opacity:0;transform:scale(1.04)}}
.sp-k{animation:sp-in .9s var(--ease-trace) both;animation-delay:calc(.06s + var(--k,0) * 90ms)}
.sp-visual > img{animation:sp-settle 1.5s var(--ease-trace) .08s both}
.sp-cover > *{animation:sp-in 1.1s var(--ease-trace) both;animation-delay:.2s}
.sp-cover > .fc{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){.sp-k,.sp-visual > img,.sp-cover > *{animation:none}}

/* a study's cover: one typographic system for all six. A ground from khyzr's palette (no client mark carries a
   colour of its own), the mark at the top, one fact on the floor: the study's figure, or its payoff in its words */
.sp-cover{--fg:#fff;--fg2:var(--on-dark-soft);--cS:clamp(2.25rem,3.3*var(--u),3.25rem);--p:clamp(1.75rem,3.8*var(--u),3.75rem);
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:var(--p);
  background:radial-gradient(120% 90% at 88% 8%,rgba(255,255,255,.07),transparent 62%),var(--bg);color:var(--fg)}
.sp-cover.c-g{--bg:var(--khyzr-green)}
.sp-cover.c-f{--bg:var(--forest)}
.sp-cover.c-d{--bg:var(--green-900)}
.sp-cover.c-k{--bg:var(--ink)}
.sp-cover.c-m{--bg:var(--mint);--fg:var(--ink);--fg2:rgba(10,10,10,.74)}
.sp-cover.c-p{--bg:var(--green-100);--fg:var(--ink);--fg2:var(--body)}
.sp-cover .cl{display:block;line-height:0}
.sp-cover .cl img{display:block;height:calc(var(--cS) * var(--e,1));width:auto;max-width:none;user-select:none}
.sp-cover .cl img.inv{filter:brightness(0) invert(1)}
.sp-cover img[data-id="zamil-ac"]{--e:1}
.sp-cover img[data-id="focus-expo"]{--e:.9}
.sp-cover img[data-id="olive-burger"]{--e:2}
.sp-cover img[data-id="pax-beneficia"]{--e:2.2}
.sp-cover img[data-id="campus-cloud"]{--e:.95}
.sp-cover img[data-id="gem-center"]{--e:1.35}
.sp-cover .fc{display:flex;flex-direction:column}
.sp-cover .l{color:var(--fg2)}
/* a figure: as large as the title beside it, never larger */
.sp-cover .fc-n .n{order:-1;margin-left:-.04em;font:var(--fw-display) var(--sp-h1s)/.9 var(--font-display);letter-spacing:-.045em;color:var(--fg);white-space:nowrap}
.sp-cover .fc-n .l{margin-top:.875rem}
/* a payoff: its own words, a size under the title */
.sp-cover .fc-s .s{max-width:15em;margin-top:.875rem;font:var(--fw-display) clamp(1.375rem,2.3vw,2.125rem)/1.16 var(--font-display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}

/* a study's facts at a glance, under its title */
.sp-glance{margin-top:var(--space-4);border-top:1px solid var(--hairline)}
.sp-glance > div{display:grid;grid-template-columns:7.25rem minmax(0,1fr);column-gap:1rem;padding:.8125rem 0 .875rem;border-bottom:1px solid var(--hairline)}
.sp-glance dt{line-height:1.95}
.sp-glance dd{max-width:36ch;font:var(--fw-text) 1rem/1.5 var(--font-text);color:var(--body)}
.sp-glance a,.sp-caps a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(10,10,10,.28);transition:text-decoration-color .2s ease,color .2s ease}
@media (hover:hover){.sp-glance a:hover,.sp-caps a:hover{color:var(--khyzr-green);text-decoration-color:currentColor}}
/* the khyzr.ai wordmark in Technology's AI line (home.css .logo-name): the mark is the link, so it dims under a pointer
   instead of taking a line */
.sp-caps a:has(.logo-name){text-decoration:none;border-radius:2px;transition:opacity .2s ease}
@media (hover:hover){.sp-caps a:has(.logo-name):hover{opacity:.72}}
.sp-hero.is-sentence .sp-glance + .sp-cta{margin-top:var(--space-4)}

/* a tablet and a phone: the picture first, full-bleed, then the words */
@media (max-width:860px){
  .sp-hero{flex-direction:column;min-height:0;padding:0}
  .sp-visual{position:relative;inset:auto;width:100%;aspect-ratio:16/9}
  .sp-hero > .in{padding:0 var(--gx)}
  .sp-copy{width:auto;gap:0;padding:1.125rem 0 1.75rem}
  .sp-copy-b{margin-top:1rem}
  .sp-lede{margin-top:var(--space-3)}
  .sp-cta{margin-top:var(--space-4)}
}
@media (max-width:600px){
  .sp-hero.is-sentence .sp-visual{aspect-ratio:2/1}
  /* About's title runs to three lines and its lede to four: a slimmer picture keeps the hero inside the first screen */
  .sp-hero.is-about .sp-visual{aspect-ratio:16/7}
  .sp-lede{font-size:1.0625rem}
  .sp-glance{margin-top:var(--space-3)}
  .sp-glance > div{grid-template-columns:6.25rem minmax(0,1fr);padding:.625rem 0 .6875rem}
  /* the crumbs already name the client */
  .sp-hero.is-case .sp-glance > div:first-child{display:none}
  .sp-cover{--p:1.125rem;--cS:1.25rem}
  .sp-cover .fc-s .s{max-width:none;margin-top:.5rem;font-size:1.0625rem;line-height:1.3}
  .sp-cover .fc-n .l{margin-top:.5rem}
  .sp-cover img[data-id="pax-beneficia"]{--e:1.9}
}

/* ==== what a discipline covers: its opening as the head's lede, then what it includes, three to a row, a hairline
   over each ==== */
.sp-caps{list-style:none;margin-top:var(--hs-head-gap);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.75rem clamp(1.75rem,3.2*var(--u),3rem)}
.sp-caps li{padding-top:1.375rem;border-top:1px solid var(--hairline)}
.sp-caps h3{font:var(--fw-display) clamp(1.375rem,1.9*var(--u),1.75rem)/1.12 var(--font-display);letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.sp-caps p{max-width:36ch;margin-top:.75rem;font:var(--fw-text) 1.0625rem/1.55 var(--font-text);color:var(--muted)}
@media (max-width:1100px){.sp-caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.sp-caps{grid-template-columns:minmax(0,1fr);row-gap:1.75rem}}
/* the partners whose own labels name the discipline: the brace's roster, one line */
.sp-with{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem clamp(2rem,3.6*var(--u),3.5rem);margin-top:clamp(3rem,5.6*var(--u),4.5rem)}
.sp-with ul{display:flex;flex-wrap:wrap;gap:1.25rem clamp(2rem,3.6*var(--u),3.5rem);list-style:none}
.sp-with li{display:flex;align-items:center;gap:.875rem}
.sp-with img{display:block;width:2.75rem;height:2.75rem;object-fit:contain}
.sp-with .nm{display:block;font:var(--fw-ui) 1rem/1.3 var(--font-text);color:var(--ink)}
.sp-with .dc{display:block;font:var(--fw-text) .875rem/1.4 var(--font-text);color:var(--muted)}

/* ==== before and after: when to call, and what you leave with, side by side ==== */
.sp-wl{--seam:#DDDDDD}
.sp-wl-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-gap)}
.sp-when-l{list-style:none;margin-top:clamp(1.75rem,3.4*var(--u),2.75rem);border-bottom:1px solid var(--seam)}
.sp-when-l li{padding:1.25rem 0 1.375rem;border-top:1px solid var(--seam);font:var(--fw-ui) clamp(1.25rem,1.75*var(--u),1.625rem)/1.28 var(--font-display);letter-spacing:-.016em;color:var(--ink)}
@media (max-width:860px){.sp-wl-in{grid-template-columns:minmax(0,1fr);row-gap:clamp(3.5rem,12vw,5rem)}}

/* ==== how we work: the discipline's second photograph, then the three ways the site says it works ==== */
.sp-how-in{align-items:center}
.sp-how-ph{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden;background:var(--surface-2)}
.sp-how-ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none}
.sp-how-b .hs-lede{margin-top:var(--space-4);max-width:30ch}
.sp-how-l{list-style:none;margin-top:clamp(2rem,4*var(--u),3rem);border-bottom:1px solid var(--hairline)}
.sp-how-l li{padding:1.25rem 0 1.375rem;border-top:1px solid var(--hairline)}
.sp-how-l h3{font:var(--fw-display) clamp(1.25rem,1.7*var(--u),1.5rem)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.sp-how-l p{max-width:44ch;margin-top:.5rem;font:var(--fw-text) 1.0625rem/1.55 var(--font-text);color:var(--muted)}
@media (max-width:860px){.sp-how-ph{aspect-ratio:4/3}.sp-how-b{margin-top:clamp(2.5rem,8vw,3.5rem)}}

/* ==== rows on the split: a name at the left, its words at the right, a hairline between (a story's beats, the
   principles) ==== */
.sp-rows{list-style:none;border-bottom:1px solid var(--hairline)}
.sp-rows > li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--sp-gap);padding:clamp(1.5rem,2.6*var(--u),2.25rem) 0;border-top:1px solid var(--hairline)}
.sp-rows h2,.sp-rows h3{font:var(--fw-display) clamp(1.375rem,2*var(--u),1.875rem)/1.15 var(--font-display);letter-spacing:-.022em;color:var(--ink)}
.sp-rows p{max-width:40ch;font:var(--fw-text) var(--text-lede)/1.5 var(--font-text);color:var(--body)}
.hs--alt .sp-rows,.hs--alt .sp-rows > li{border-color:#DDDDDD}
.sp-prin .sp-rows{margin-top:var(--hs-head-gap)}
@media (max-width:860px){.sp-rows > li{grid-template-columns:minmax(0,1fr);row-gap:.625rem}}
/* a story: the three beats, the payoff's rule the one colour */
.sp-beats h2{color:var(--muted)}
.sp-beats .b3{border-top:2px solid var(--khyzr-green)}
.sp-beats .b3 h2{color:var(--khyzr-green)}
.sp-beats .b3 p{color:var(--ink)}
.sp-beats .b{transition:opacity .9s ease calc(var(--i,0) * 120ms),transform var(--dur-enter) var(--ease-trace) calc(var(--i,0) * 120ms)}
.js .sp-story:not(.is-in) .sp-beats .b{opacity:0;transform:translateY(18px);transition:none}
@media (prefers-reduced-motion:reduce){.sp-beats .b{opacity:1!important;transform:none!important;transition:none!important}}

/* ==== a study's neighbours: the previous and the next, in the home's order ==== */
.sp-pn{padding:clamp(1rem,2.4*var(--u),2rem) var(--gx) clamp(3.5rem,7*var(--u),6rem)}
.sp-pn-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.sp-pn-a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:1.5rem;align-items:start;padding:clamp(1.5rem,3*var(--u),2.5rem) 0;color:var(--ink);text-decoration:none}
.sp-pn-a.next{padding-left:var(--sp-gap);border-left:1px solid var(--hairline)}
.sp-pn-a.previous{padding-right:var(--sp-gap)}
.sp-pn-a > span{grid-column:1}
.sp-pn-a .t{margin-top:.75rem;font:var(--fw-display) clamp(1.375rem,2*var(--u),1.875rem)/1.15 var(--font-display);letter-spacing:-.022em;text-wrap:balance}
.sp-pn-a .c{margin-top:.375rem;font:var(--fw-text) 1rem/1.4 var(--font-text);color:var(--muted)}
.sp-pn-a svg{grid-column:2;grid-row:1 / span 3;align-self:end;width:1.5rem;height:1.5rem;transition:transform var(--dur-hover) var(--ease-pop)}
.sp-pn-a.previous svg{transform:scaleX(-1)}
@media (hover:hover){.sp-pn-a:hover .t{color:var(--khyzr-green)}.sp-pn-a.next:hover svg{transform:translateX(4px)}.sp-pn-a.previous:hover svg{transform:scaleX(-1) translateX(4px)}}
.sp-pn-a:focus-visible{outline:2px solid var(--khyzr-green);outline-offset:-2px;border-radius:6px}
@media (max-width:600px){
  .sp-pn-in{grid-template-columns:minmax(0,1fr)}
  .sp-pn-a.next{padding-left:0;border-left:0;border-top:1px solid var(--hairline)}
  .sp-pn-a.previous{padding-right:0}
}

/* ==== one voice: its words large on the split line ==== */
.sp-q-l{padding-top:.5rem}
.sp-q blockquote{max-width:24em;font:var(--fw-display) clamp(1.5rem,2.5*var(--u),2.25rem)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.sp-q .hang,.sp-vq .hang{margin-left:-.42em}
.sp-q figcaption{margin-top:1.5rem;font:var(--fw-text) 1rem/1.45 var(--font-text);color:var(--muted)}
.sp-q .nm{display:block;font-weight:var(--fw-ui);color:var(--ink)}
.sp-work .sp-q{margin-top:clamp(4rem,8*var(--u),6.5rem)}
@media (max-width:860px){.sp-q-l{padding:0 0 1rem}}

/* ==== the work: the studies as an even grid of cards, each its mark, its title, its payoff's first line, its tags,
   and the whole card the way in ==== */
.sp-cards{--cols:4;list-style:none;margin-top:var(--hs-head-gap);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:1px;
  border-radius:var(--radius-l);background:var(--hairline);box-shadow:0 0 0 1px var(--hairline);overflow:hidden}
.sp-cards.n-1{--cols:1}.sp-cards.n-2{--cols:2}.sp-cards.n-3{--cols:3}
.sp-card{--S:1.625rem;--p:clamp(1.5rem,2.3*var(--u),2.125rem);position:relative;display:flex;flex-direction:column;min-height:21rem;padding:var(--p);background:var(--paper)}
.sp-card .cl{display:flex;align-items:flex-end;height:calc(var(--S) * 2.2);line-height:0}
.sp-card .cl img{display:block;height:calc(var(--S) * var(--e,1));width:auto;max-width:none;user-select:none}
.sp-card img[data-id="zamil-ac"]{--e:.86}
.sp-card img[data-id="focus-expo"]{--e:.8}
.sp-card img[data-id="olive-burger"]{--e:1.7}
.sp-card img[data-id="pax-beneficia"]{--e:2.15}
.sp-card img[data-id="campus-cloud"]{--e:.86}
.sp-card img[data-id="gem-center"]{--e:1}
.sp-card .ti{max-width:14em;margin-top:1.5rem;font:var(--fw-display) clamp(1.375rem,1.8*var(--u),1.75rem)/1.1 var(--font-display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.sp-card .ti a{color:inherit;text-decoration:none;transition:color .2s ease}
/* the whole card answers the title's link */
.sp-card .ti a::after{content:"";position:absolute;inset:0;z-index:1}
.sp-card .ti a:focus-visible{outline:none}
.sp-card:has(.ti a:focus-visible){outline:2px solid var(--khyzr-green);outline-offset:-5px;z-index:2}
.sp-card .po{margin-top:.875rem;font:var(--fw-text) 1rem/1.5 var(--font-text);color:var(--body)}
.sp-card .dz{margin-top:auto;padding-top:1.75rem;font:var(--fw-text) .875rem/1.4 var(--font-text);color:var(--muted)}
.sp-card .go{display:block;flex:none;width:1.375rem;height:1.375rem;margin-top:1rem;color:var(--ink);transition:transform var(--dur-hover) var(--ease-pop)}
.sp-card .go svg{display:block;width:100%;height:100%}
@media (hover:hover){.sp-card:hover .ti a{color:var(--khyzr-green)}.sp-card:hover .go{transform:translateX(4px)}}
/* one study: the card opens wide, its payoff beside it */
.sp-card.is-wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--sp-gap);min-height:0}
.sp-card.is-wide .hd{display:flex;flex-direction:column}
.sp-card.is-wide .ti{font-size:clamp(1.75rem,2.6*var(--u),2.375rem)}
.sp-card.is-wide .po-w{align-self:end;padding-top:1.375rem;border-top:2px solid var(--khyzr-green)}
.sp-card.is-wide .po-l{color:var(--khyzr-green)}
.sp-card.is-wide .po{max-width:36ch;margin-top:.625rem;font:var(--fw-text) var(--text-lede)/1.5 var(--font-text);color:var(--ink)}
.sp-cards{transform-origin:50% 100%;transition:transform var(--dur-enter) var(--ease-trace),opacity .8s ease}
.js .sp-work:not(.is-in) .sp-cards{opacity:0;transform:translateY(var(--rise-distance)) scale(var(--rise-scale));transition:none}
@media (prefers-reduced-motion:reduce){.sp-cards{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:1100px){.sp-cards.n-4{--cols:2}.sp-card{min-height:18rem}}
@media (max-width:860px){
  .sp-cards.n-3{--cols:1}
  .sp-card.is-wide{grid-template-columns:minmax(0,1fr)}
  .sp-card.is-wide .po-w{margin-top:2rem}
}
@media (max-width:600px){
  .sp-cards{--cols:1!important}
  .sp-card{min-height:0}
}

/* ==== the other disciplines: one compact row, each a way to its page ==== */
.sp-others{padding:clamp(3.5rem,7*var(--u),6rem) var(--gx)}
.sp-others-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--sp-gap);align-items:baseline;padding-top:1.625rem;border-top:1px solid var(--hairline)}
.sp-others ul{display:flex;flex-wrap:wrap;gap:.5rem clamp(1.75rem,3*var(--u),2.75rem);list-style:none}
.sp-others a{display:inline-flex;align-items:center;gap:.4em;padding:.375rem 0;font:var(--fw-display) clamp(1.25rem,1.7*var(--u),1.5rem)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;transition:color .2s ease}
.sp-others a svg{display:block;width:.9em;height:.9em;transition:transform var(--dur-hover) var(--ease-pop)}
@media (hover:hover){.sp-others a:hover{color:var(--khyzr-green)}.sp-others a:hover svg{transform:translateX(3px)}}
.sp-others a:focus-visible{outline:2px solid var(--khyzr-green);outline-offset:3px;border-radius:6px}
@media (max-width:860px){
  .sp-others-in{grid-template-columns:minmax(0,1fr);row-gap:.875rem}
  .sp-others ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1.5rem}
}

/* ==== About ==== */
/* who: a paragraph and the home's two figures beside the title */
.sp-who-b p{max-width:40ch;font:var(--fw-text) var(--text-lede)/1.5 var(--font-text);color:var(--body)}
.sp-figs{display:flex;flex-wrap:wrap;gap:1.5rem clamp(2.5rem,4.4*var(--u),4rem);margin-top:clamp(2rem,3.6*var(--u),3rem)}
.sp-figs .n{display:block;margin-left:-.03em;font:var(--fw-display) clamp(2.75rem,4.6*var(--u),4.25rem)/.9 var(--font-display);letter-spacing:-.04em;color:var(--khyzr-green)}
.sp-figs .l{display:block;margin-top:.75rem}
@media (max-width:860px){.sp-who-b{margin-top:var(--space-3)}}
/* the name: the word and its gloss at the left, its three chapters at the right, on the green the home's field ends on */
.sp-name{background:var(--green-900);color:var(--on-dark-body)}
.sp-name .hs-title{color:var(--on-dark-heading)}
.sp-name .ar{display:block;text-align:left;margin-top:clamp(1.5rem,3*var(--u),2.5rem);font:500 clamp(3.75rem,7.2*var(--u),6.5rem)/1.2 'Noto Naskh Arabic',serif;color:var(--mint)}
.sp-name .gl{margin-top:.75rem;font:var(--fw-text) var(--text-lede)/1.5 var(--font-text);color:var(--on-dark-soft)}
.sp-name .nw{white-space:nowrap}
.sp-chap{list-style:none;border-bottom:1px solid var(--on-dark-divider)}
.sp-chap li{padding:clamp(1.5rem,2.6*var(--u),2.25rem) 0;border-top:1px solid var(--on-dark-divider)}
.sp-chap h3{font:var(--fw-display) clamp(1.375rem,2*var(--u),1.875rem)/1.15 var(--font-display);letter-spacing:-.022em;color:var(--on-dark-heading)}
.sp-chap p{max-width:40ch;margin-top:.75rem;font:var(--fw-text) var(--text-lede)/1.5 var(--font-text);color:var(--on-dark-body)}
.sp-chap b{font-weight:var(--fw-ui);color:var(--on-dark-heading)}
@media (max-width:860px){.sp-chap{margin-top:var(--hs-head-gap)}}
/* the clients' own words: a quiet band, two to a row, at reading size */
.sp-voices-l{padding-top:.25rem}
.sp-vq{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.75rem clamp(1.75rem,3.2*var(--u),3rem)}
.sp-vq li{padding-top:1.375rem;border-top:1px solid var(--hairline)}
.sp-vq blockquote{font:var(--fw-text) clamp(1.0625rem,1.4*var(--u),1.25rem)/1.55 var(--font-text);color:var(--ink)}
.sp-vq figcaption{margin-top:1rem;font:var(--fw-text) .9375rem/1.45 var(--font-text);color:var(--muted)}
.sp-vq .nm{display:block;font-weight:var(--fw-ui);color:var(--ink)}
@media (max-width:860px){.sp-vq{margin-top:1.25rem}}
@media (max-width:600px){.sp-vq{grid-template-columns:minmax(0,1fr);row-gap:2rem}}

/* ==== the way into the night, the home's dusk (name.css) made shorter: a subpage walks into the close, not into the
   field, and from paper, not from the home's grey. Its <i> is where the bar turns to ink ==== */
.sp-dusk{position:relative;height:clamp(11rem,30vh,22rem);
  background:linear-gradient(to bottom in oklab,var(--paper) 0%,#DBE9DB 7%,#85B485 16%,#2F802F 29%,#064606 42%,#043304 64%,#030503 100%)}
.sp-dusk i{position:absolute;left:0;right:0;bottom:0;top:40%}
/* the heads on the same split as everything under them, so a page has one line to read down */
main .sp-sec .hs-head--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--sp-gap);align-items:end}
@media (max-width:860px){main .sp-sec .hs-head--split{grid-template-columns:minmax(0,1fr)}}