/* Geeknauts: the case studies ("mission reports", site/project/<slug>/index.html). Loaded after page.css, which has the tokens,
   the header, the buttons and the footer. A case page follows the home page's journey in small: deep space (the product in a
   viewport, the mission patch of the home page's "Recent missions", the mission data), the light planet (the report: the problem,
   what we built, what changed), then back up to the night (more missions, the call to action, the footer).
   Content first: decoration only where the home page already has it (stars, the patch, the planet's limb, the dotted orbit). */

/* ---------------- header: the case pages open in deep space; "Work" is the section they belong to ---------------- */
.nav a::after{content:"";position:absolute;left:50%;bottom:5px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--lime);transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.nav a[aria-current]::after{transform:scale(1)}
.dark ::selection{background:rgba(130,183,60,.42);color:#fff}

/* ---------------- hero: deep space ---------------- */
.cs-hero{position:relative;overflow:hidden;isolation:isolate;background-color:var(--space);background-image:var(--grain-d);color:var(--on-1)}
.cs-hero::before,.cs-more::before,.cs-cta::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:var(--stars-img),var(--stars-img);background-size:420px 420px,290px 290px;background-position:0 0,140px 90px;opacity:.62}
.cs-glow{position:absolute;z-index:-1;pointer-events:none;width:min(1300px,140vw);aspect-ratio:1;right:-40%;top:-48%;border-radius:50%;background:radial-gradient(closest-side,rgba(130,183,60,.14),rgba(130,183,60,.04) 55%,transparent)}
.cs-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"crumbs crumbs" "copy shot" "facts facts";column-gap:clamp(36px,5vw,84px);align-items:center;padding-top:clamp(14px,1.8vw,24px)}

/* breadcrumb */
.cs-crumbs{grid-area:crumbs;margin-bottom:clamp(18px,3vw,44px)}
.cs-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;font:500 14.5px/1.3 var(--font);color:var(--on-3)}
.cs-crumbs li{display:inline-flex;align-items:center;min-width:0}
.cs-crumbs li+li::before{content:"/";content:"/" / "";margin:0 10px;color:rgba(255,255,255,.4)} /* silent for screen readers */
.cs-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-2);text-decoration:none;text-underline-offset:5px;text-decoration-thickness:2px}
.cs-crumbs a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--lime)}
.cs-crumbs a[aria-current="page"]{color:#fff}

/* the copy: kicker, the product's name and what it is, the summary, the product's own links */
.cs-copy{grid-area:copy;min-width:0;padding-bottom:clamp(8px,2vw,28px)}
.cs-kick{display:inline-flex;align-items:center;gap:10px;margin-bottom:clamp(16px,1.8vw,24px);color:var(--on-3)}
.cs-kick::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--lime);flex:none}
.cs-kick .k{color:var(--lime-hi)}
.cs-h1{display:grid;gap:clamp(12px,1.4vw,20px)}
.cs-name{display:block;font:600 clamp(56px,7.4vw,110px)/.9 var(--font);letter-spacing:-.05em;margin-left:-.04em;color:var(--lime)}
.cs-h1--long .cs-name{font-size:clamp(42px,5vw,74px);line-height:.96;text-wrap:balance}
.cs-title{display:block;max-width:16em;font:300 clamp(24px,2.5vw,36px)/1.16 var(--font);letter-spacing:-.025em;color:#fff;text-wrap:balance}
.cs-sum{margin-top:clamp(18px,2vw,26px);max-width:32em;font:300 clamp(17px,1.25vw,19px)/1.66 var(--font);color:var(--on-2)}
.cs-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,2.4vw,32px)}
.cs-link{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px 0 18px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.3);color:#fff;font:500 15px/1 var(--font);text-decoration:none;transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.cs-link .i{width:16px;height:16px;color:var(--lime);transition:transform .3s var(--out)}
.cs-link:hover{border-color:var(--lime);background:rgba(130,183,60,.12)}
.cs-link:hover .i{transform:translate(2px,-2px)}

/* ---------------- the viewport: the product's screens rise out of a framed piece of night ----------------
   The image is in the flow (it sets the height); the frame starts --rise below its top, so the devices break out of it,
   and the devices sink --sink into the frame's bottom edge, where the clip-path cuts them (as on the home page's cards). */
.cs-shot{--rise:14%;--sink:4%;--pad:6%;position:relative;width:100%;padding-inline:var(--pad);clip-path:inset(-400px -240px 0 -240px round 0 0 var(--r-xl) var(--r-xl))}
.cs-frame{position:absolute;left:0;right:0;bottom:0;top:var(--rise);border-radius:var(--r-xl);overflow:hidden;background:radial-gradient(64% 62% at 50% 70%,rgba(130,183,60,.24),transparent 72%),var(--space);border:1px solid var(--hair-d)}
.cs-frame::before{content:"";position:absolute;inset:0;background-image:var(--stars-img);background-size:300px 300px;opacity:.5}
.cs-orbit{position:absolute;left:50%;top:64%;width:min(80%,420px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(160,216,85,.38)}
.cs-orbit::after{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
.cs-dev{position:relative;display:block;width:100%;height:auto;max-width:none;translate:0 var(--sink);filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));transition:translate .6s var(--out)}
.cs-patch{position:absolute;z-index:3;width:clamp(84px,7.4vw,108px);height:auto;left:-30px;top:calc(var(--rise) - 50px);rotate:-8deg;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));transition:rotate .8s var(--out),scale .8s var(--out)}
@media (hover:hover){
  .cs-shot:hover .cs-dev{translate:0 calc(var(--sink) - 8px)}
  .cs-shot:hover .cs-patch{rotate:-18deg;scale:1.04}
}
/* in the hero the frame is the home page's glass card (the night around it is already dark) */
.cs-shot--hero{grid-area:shot;justify-self:end;max-width:640px;--rise:16%;--pad:5%}
.cs-shot--hero .cs-frame{background:radial-gradient(60% 58% at 50% 72%,rgba(130,183,60,.24),transparent 72%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border-color:rgba(255,255,255,.15)}
.cs-shot--hero .cs-frame::before{display:none}
/* shapes: two portrait phones, a laptop, a wide composition */
.cs-shot--duo{max-width:440px;--pad:9%;--rise:12%;--sink:3%}
.cs-shot--lap{--rise:8%;--pad:7%;--sink:4%}
.cs-shot--hero.cs-shot--lap{max-width:720px;--rise:18%;--pad:4%}
.cs-shot--wide{max-width:660px;--rise:10%;--pad:7%}
.cs-shot--square{max-width:520px;--rise:10%;--pad:7%}
/* no screens yet (a client's consent allows none before launch): the mission patch alone, large, in the viewport */
.cs-shot--badge{display:grid;place-items:center;aspect-ratio:6/5;--rise:0%;clip-path:none}
.cs-shot--badge .cs-orbit{top:50%}
.cs-shot--badge .cs-patch{position:relative;left:auto;top:auto;width:min(280px,56%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* ---------------- the mission data ---------------- */
.cs-facts{grid-area:facts;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4vw,60px);border:1px solid var(--hair-d);border-radius:var(--r-md);background:rgba(27,28,29,.55)}
.cs-facts div{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 18px 14px;border-left:1px solid var(--hair-d)}
.cs-facts div:first-child{border-left:0}
.cs-facts dt{font-size:13.5px;line-height:1.35;color:var(--on-3);white-space:nowrap}
.cs-facts dd{font:500 clamp(16.5px,1.3vw,18.5px)/1.35 var(--font);color:#fff}

/* the planet rises under the hero (the home page's "arrive" dome): the report below is daylight */
.cs-arrive{position:relative;height:clamp(64px,9vw,150px);margin-top:clamp(28px,3.4vw,52px)}
.cs-arrive svg{position:absolute;inset:0;width:100%;height:100%}
.ar-body{fill:var(--ground)}
.ar-glow{fill:none;stroke:var(--lime-hi);stroke-width:16;opacity:.36}
.ar-limb{fill:none;stroke:var(--lime);stroke-width:2;vector-effect:non-scaling-stroke}

/* ---------------- the report: daylight sections ---------------- */
.cs-sec{position:relative;padding-block:clamp(56px,6vw,96px)}
.cs-hero + .cs-sec{padding-top:clamp(12px,2vw,32px)}
.cs-ground{background:var(--ground)}
.cs-sky{background:var(--sky)}
/* a photo from the field between "What we built" and the results (images.photo) */
.cs-field{padding-bottom:0}
.cs-photo{display:grid;gap:12px;margin:0}
.cs-photo-img{display:block;width:100%;height:auto;border-radius:var(--r-xl);box-shadow:0 22px 50px rgba(27,28,29,.16)}
.cs-photo figcaption{font-size:15.5px;line-height:1.5;color:var(--ink-3)}
.cs-kick-l{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--g-sm)}
.cs-kick-l::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--lime);flex:none}
.cs-h2{font:500 clamp(34px,3.8vw,52px)/1.04 var(--font);letter-spacing:-.034em;text-wrap:balance}
.cs-sky .acc{color:var(--g-lg-sky)}
.cs-lead{margin-top:clamp(16px,1.8vw,24px);max-width:24em;font:400 clamp(21px,1.9vw,27px)/1.38 var(--font);letter-spacing:-.016em;color:var(--ink);text-wrap:pretty}
.cs-lead--wide{max-width:36em}
.cs-prose{margin-top:16px;max-width:38em}
.cs-prose p{font-size:17.5px;line-height:1.7;color:var(--ink-2)}
.cs-prose p+p{margin-top:12px}
.cs-intro{margin-top:14px;max-width:38em;font-size:17.5px;line-height:1.6;color:var(--ink-2)}

/* 01 the problem, with the client beside it */
.cs-problem{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(40px,6vw,96px);align-items:end}
.cs-client{position:relative;padding:26px 26px 24px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:0 16px 36px rgba(46,47,55,.06)}
.cs-client::before{content:"";position:absolute;left:26px;right:26px;top:-1px;height:3px;border-radius:0 0 3px 3px;background:var(--lime)}
.cs-client-k{font:600 13.5px/1.3 var(--font);letter-spacing:.01em;color:var(--ink-3)}
.cs-client h3{margin-top:6px;font:600 clamp(22px,1.8vw,26px)/1.2 var(--font);letter-spacing:-.02em}
.cs-client p:not(.cs-client-k){margin-top:10px;font-size:16.5px;line-height:1.62;color:var(--ink-2)}

/* 02 what we built: the features beside the screens */
.cs-built{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px clamp(40px,6vw,96px);align-items:center}
.cs-built > .cs-shot{justify-self:center}
.cs-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(24px,2.6vw,36px)}
.cs-feat{display:flex;flex-direction:column;gap:8px;padding:22px 22px 22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.cs-feat-i{width:30px;height:30px;margin-bottom:4px;color:var(--lime)}
.cs-feat h3{font:600 19px/1.3 var(--font);letter-spacing:-.012em}
.cs-feat p{font-size:16px;line-height:1.58;color:var(--ink-2)}
.cs-built--solo{grid-template-columns:minmax(0,1fr)}
@media (min-width:1280px){.cs-built--solo .cs-feats{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* 03 what changed: the achievements beside the screens (the list comes first in the page, the screens sit left on desktop) */
.cs-results{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,96px);align-items:center;margin-top:clamp(36px,4vw,60px)}
.cs-results > .cs-shot{order:-1;justify-self:center}
.cs-results:has(> .cs-shot--wide){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cs-results:has(> .cs-shot--small){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cs-shot--small{max-width:470px;--rise:12%;--pad:5%}
.cs-shot--phone{max-width:300px;--rise:8%;--pad:9%;--sink:3%}
.cs-results--solo{grid-template-columns:minmax(0,1fr)}
.cs-results--solo .cs-log{max-width:46em}
.cs-log-h{font:600 20px/1.3 var(--font);letter-spacing:-.012em;margin-bottom:10px}
.cs-log li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line);font-size:17.5px;line-height:1.55;color:var(--ink)}
.cs-log li:last-child{border-bottom:1px solid var(--line)}
.cs-log .i{width:24px;height:24px;margin-top:1px;color:var(--g-lg)}
.cs-log strong{font-weight:600}

/* a client's own words (only where the old page had them) */
.cs-quote{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 22px;margin-top:clamp(40px,4.4vw,64px);padding:clamp(24px,3vw,40px) clamp(24px,3.4vw,48px);border-radius:var(--r-xl);background-color:var(--dusk);background-image:var(--grain-d);color:#fff}
.cs-quote .q{width:34px;height:26px;color:var(--lime);margin-top:6px}
.cs-quote blockquote p{font:400 clamp(22px,2.1vw,30px)/1.32 var(--font);letter-spacing:-.016em;text-wrap:balance}
.cs-quote figcaption{grid-column:2;display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:10px;font-size:16px;color:var(--on-2)}
.cs-quote figcaption b{font-weight:600;color:#fff}

/* ---------------- back up to the night: more missions ---------------- */
.cs-more{position:relative;isolation:isolate;padding-bottom:clamp(56px,6vw,96px);background-color:var(--dusk);background-image:var(--grain-d);color:#fff}
.cs-more::before{opacity:.3}
.cs-horizon{position:relative;z-index:1;height:clamp(84px,10vw,170px);margin-bottom:clamp(8px,1.6vw,24px)}
.cs-horizon svg{position:absolute;inset:0;width:100%;height:100%}
.hz-body{fill:var(--ground)}
.hz-glow{fill:none;stroke:var(--lime-hi);stroke-width:16;opacity:.35}
.hz-limb{fill:none;stroke:var(--lime);stroke-width:2;vector-effect:non-scaling-stroke}
.cs-more-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 32px;margin-bottom:clamp(24px,2.8vw,40px)}
.cs-more-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;font-weight:500;text-decoration:none}
.cs-more-link .lt{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size .4s var(--out)}
.cs-more-link:hover .lt{background-size:100% 1.5px}
.cs-more-link .i{width:18px;height:18px;color:var(--lime);transition:transform .35s var(--out)}
.cs-more-link:hover .i{transform:translateX(4px)}
.cs-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
/* a mission card: the product's screens in a small piece of night (the home page's viewport, in small), the mission patch
   on its corner, then the text. Three across on the index; under "More missions" the two cards lie on their side. */
.cs-next-card{position:relative;display:flex;flex-direction:column;border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--hair-d);transition:transform .35s var(--out),border-color .35s var(--ease)}
.cs-view{position:relative;flex:none;aspect-ratio:16/10;overflow:hidden;pointer-events:none;border-radius:calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;border-bottom:1px solid var(--hair-d);background:radial-gradient(72% 66% at 50% 100%,rgba(130,183,60,.3),transparent 72%),var(--space)}
.cs-view::before{content:"";position:absolute;inset:0;background-image:var(--stars-img);background-size:300px 300px;opacity:.45}
.cs-view-orbit{position:absolute;left:50%;top:88%;width:94%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px dashed rgba(160,216,85,.32)}
.cs-view-orbit::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(255,255,255,.07)}
/* the screens stand on the bottom edge and sink a little into it; contain keeps every shape whole (three phones, a laptop) */
.cs-view-dev{position:absolute;left:8%;top:14%;width:84%;height:86%;max-width:none;object-fit:contain;object-position:50% 100%;translate:0 4%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.45));transition:translate .6s var(--out)}
.cs-view--lap .cs-view-dev{left:6%;width:88%}
.cs-next-card .cs-patch{left:14px;top:14px;width:clamp(60px,4.8vw,72px);rotate:-8deg;pointer-events:none}
.cs-next-body{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:clamp(18px,1.6vw,22px) clamp(20px,1.9vw,26px) clamp(20px,1.9vw,24px)}
.cs-next--all .cs-next-go{margin-top:auto;padding-top:6px} /* the way in lines up along a row of cards */
/* "More missions": two cards, the screens on the left */
.cs-next:not(.cs-next--all) .cs-next-card{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
.cs-next:not(.cs-next--all) .cs-view{aspect-ratio:auto;min-height:228px;border-radius:calc(var(--r-xl) - 1px) 0 0 calc(var(--r-xl) - 1px);border-bottom:0;border-right:1px solid var(--hair-d)}
.cs-next:not(.cs-next--all) .cs-next-body{justify-content:center}
.cs-cat{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:var(--r-pill);background:rgba(130,183,60,.16);color:#fff;font-size:13.5px;font-weight:500}
.cs-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.cs-next-card h3{font:500 clamp(23px,2vw,28px)/1.1 var(--font);letter-spacing:-.028em;text-wrap:balance}
.cs-next-card h3 a{color:#fff;text-decoration:none}
.cs-next-card h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-xl)}
.cs-next-card p:not(.cs-cat){font-size:16px;line-height:1.5;color:var(--on-2)}
.cs-next-go{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font-size:15.5px;font-weight:500;color:#fff}
.cs-next-go .i{width:17px;height:17px;color:var(--lime);transition:transform .35s var(--out)}
@media (hover:hover){
  .cs-next-card:hover{transform:translateY(-3px);border-color:rgba(160,216,85,.45)}
  .cs-next-card:hover .cs-patch{rotate:-18deg;scale:1.04}
  .cs-next-card:hover .cs-view-dev{translate:0 1%}
  .cs-next-card:hover .cs-next-go .i{transform:translateX(4px)}
}
/* the whole card is the link's target; the focus ring goes round the card */
@supports selector(:has(*)){
  .cs-next-card:has(h3 a:focus-visible){outline:3px solid var(--lime-hi);outline-offset:3px}
  .cs-next-card h3 a:focus-visible{outline:none}
}

/* ---------------- the call to action, in orbit (as at the end of the home page) ---------------- */
.cs-cta{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(80px,8vw,128px);text-align:center;background-color:var(--space);background-image:var(--grain-d),linear-gradient(180deg,var(--dusk) 0,var(--space) clamp(110px,12vw,200px));color:#fff}
.cs-cta::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(640px 420px at 50% 52%,rgba(130,183,60,.2),transparent 70%);pointer-events:none}
.cs-cta-clip{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.cs-cta-art{position:absolute;left:50%;top:50%;width:min(1100px,max(140vw,820px));aspect-ratio:1;transform:translate(-50%,-50%)}
.cs-cta-art svg{width:100%;height:100%;overflow:visible}
.o-ring{fill:none;stroke:var(--lime);stroke-width:2.2;stroke-linecap:round}
.o-ring2{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2;stroke-dasharray:2 9;stroke-linecap:round}
.o-ring3{fill:none;stroke:rgba(255,255,255,.08);stroke-width:1}
.cs-cta-in{position:relative}
.cs-cta-h{max-width:10em;margin-inline:auto;font:300 clamp(46px,7vw,104px)/.95 var(--font);letter-spacing:-.05em;text-wrap:balance;color:#fff}
.cs-cta-h .w-b{font-weight:600;color:var(--lime);letter-spacing:-.05em}
.cs-cta-p{max-width:33em;margin:22px auto 0;font:300 clamp(17px,1.35vw,20px)/1.6 var(--font);color:var(--on-2)}
.cs-cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}

/* ---------------- responsive ---------------- */
/* the partnership, chapter by chapter (NaviWay: GMark in 2021, NaviWay in 2024): a row under the problem and the client */
.cs-chapters{grid-column:1/-1;margin-top:clamp(8px,1.6vw,20px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--line)}
.cs-chapters-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--g-sm)}
.cs-chapters-h::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid var(--lime);flex:none}
.cs-chap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cs-chap-i{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.cs-chap-i.is-now{border-color:var(--lime)}
.cs-chap-k{color:var(--ink-3)}
.cs-chap-i h4{font:600 19px/1.3 var(--font);letter-spacing:-.012em}
.cs-chap-i p:not(.cs-chap-k){font-size:16px;line-height:1.58;color:var(--ink-2)}

/* ---------------- the mission index (/portfolio): every case study as a mission card, in deep space ---------------- */
.cs-index{overflow:clip;padding-bottom:clamp(64px,7vw,120px)} /* clip: the glow must not widen the page */
.cs-index > .wrap{padding-top:clamp(14px,1.8vw,24px)}
.cs-index-head{max-width:44em;margin-bottom:clamp(32px,4vw,56px)}
.cs-index .cs-crumbs{margin-bottom:clamp(18px,3vw,44px)}
.cs-next--all{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1279px){
  .cs-next--all{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1023px){
  .cs-hero-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"crumbs" "copy" "shot" "facts"}
  .cs-copy{padding-bottom:0}
  .cs-shot--hero{justify-self:center;max-width:600px;margin-top:clamp(36px,7vw,60px)}
  .cs-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-facts div:nth-child(3){border-left:0}
  .cs-facts div:nth-child(n+3){border-top:1px solid var(--hair-d)}
  .cs-problem,.cs-built,.cs-results{grid-template-columns:minmax(0,1fr)}
  .cs-results > .cs-shot{order:0}
  .cs-next{grid-template-columns:minmax(0,1fr);max-width:720px}
  .cs-next--all{grid-template-columns:minmax(0,1fr)}
  .cs-results:has(> .cs-shot--wide),.cs-results:has(> .cs-shot--small){grid-template-columns:minmax(0,1fr)} /* :has() outranks .cs-results */
}
@media (max-width:700px){
  .cs-crumbs ol{font-size:14px}
  .cs-crumbs li:last-child{display:none} /* the h1 names the page; the trail stays on one line */
  .cs-shot{--pad:4%}
  .cs-shot--duo{--pad:8%}
  .cs-patch{left:-8px;width:76px;top:calc(var(--rise) - 30px)}
  .cs-feats{grid-template-columns:minmax(0,1fr)}
  .cs-chap{grid-template-columns:minmax(0,1fr)}
  .cs-feat{padding:20px}
  .cs-log li{font-size:16.5px}
  .cs-quote{grid-template-columns:minmax(0,1fr)}
  .cs-quote figcaption{grid-column:1}
  .cs-next:not(.cs-next--all) .cs-next-card{display:flex}
  .cs-next:not(.cs-next--all) .cs-view{aspect-ratio:16/10;min-height:0;border-radius:calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;border-right:0;border-bottom:1px solid var(--hair-d)}
  .cs-next-card .cs-patch{width:60px;left:12px;top:12px}
  .cs-next-body{padding:18px 20px 22px}
  .cs-cta-btns .btn{width:100%}
  .cs-cta-btns .btn--split{justify-content:space-between}
}
@media (max-width:420px){
  .cs-facts{grid-template-columns:minmax(0,1fr)}
  .cs-facts div{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;border-left:0;border-top:1px solid var(--hair-d)}
  .cs-facts div:first-child{border-top:0}
  .cs-facts dd{text-align:right}
}

@media print{
  .cs-arrive,.cs-horizon,.cs-cta-clip,.cs-glow,.cs-frame,.cs-patch,.cs-view{display:none}
  .cs-hero,.cs-more,.cs-cta,.cs-quote{background:none;color:var(--ink)}
  .cs-hero *,.cs-more *,.cs-cta *,.cs-quote *{color:var(--ink)!important}
  .cs-dev{filter:none;translate:none}
}