/* Case pages (ElectroGlide first), laid out after Leo's reference (shuoningshi.com/electroglide.html):
   back button · centred title, line, chips · cover · About + quote · Functions (film in a soft frame, caption under it)
   · Awards (pills) · swipe gallery with dots · closing statement · more projects.
   Tokens from site.css: --bg --ink --ink-2 --line --tile --display. Class prefix cs- (site.css already uses .case-hero). */

.case main{padding-top:var(--nav)}
.case{--cs-shadow:0 20px 50px rgba(0,0,0,.10);--cs-frame:#eef0ed;--cs-pill:#fbfbfd;--cs-pill-line:rgba(0,0,0,.10)}
[data-theme="dark"] .case{--cs-shadow:0 20px 50px rgba(0,0,0,.45);--cs-pill:#1c1c1e;--cs-pill-line:rgba(255,255,255,.14)}

/* back to all projects: a small round glass button under the nav, top left */
.cs-back{max-width:1100px;margin:0 auto;padding:16px 22px 0}
.cs-back__btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.55);border:.64px solid rgba(72,72,72,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6);color:var(--ink);transition:transform .2s ease,background .2s ease}
.cs-back__btn:hover{transform:translateX(-2px);background:rgba(255,255,255,.85)}
[data-theme="dark"] .cs-back__btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
[data-theme="dark"] .cs-back__btn:hover{background:rgba(255,255,255,.16)}

/* hero: everything centred */
.cs-hero{max-width:1040px;margin:0 auto;padding:clamp(40px,6.8vw,70px) 22px clamp(28px,3.8vw,38px);text-align:center}
.cs-hero h1{font-size:clamp(44px,7vw,76px);line-height:1.04;font-weight:600;letter-spacing:-.03em;margin:0 0 16px}
.cs-tagline{max-width:23ch;margin:0 auto 28px;font-size:clamp(19px,2.4vw,25px);line-height:1.5;color:var(--ink-2)}
.cs-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.cs-chips span{padding:5px 14px;border-radius:980px;background:rgba(255,255,255,.55);border:.64px solid var(--cs-pill-line);color:var(--ink-2);
  font:500 12.5px/1.5 var(--display);-webkit-backdrop-filter:blur(12px) saturate(1.6);backdrop-filter:blur(12px) saturate(1.6)}
[data-theme="dark"] .cs-chips span{background:rgba(255,255,255,.07)}

/* cover */
.cs-cover{max-width:1100px;margin:0 auto;padding:0 22px 38px}
.cs-cover img{width:100%;height:auto;border-radius:22px;box-shadow:var(--cs-shadow)}

/* section headings */
.cs-h{text-align:center;font-size:clamp(26px,3vw,30px);font-weight:700;letter-spacing:-.02em;line-height:1.5;margin:30px 0 26px}

/* About: copy, then the jury quote with a dark rule on its left */
.cs-about{max-width:900px;margin:0 auto;padding:22px 22px 38px;display:grid;gap:23px}
.cs-about__copy p{margin:0 0 16px;font-size:clamp(17px,1.9vw,19px);line-height:1.75}
.cs-about__copy p:last-child{margin-bottom:0}
.cs-quote{margin:0;padding:22px 26px;background:var(--cs-pill);border-left:2.5px solid var(--ink);border-radius:0 22px 22px 0}
.cs-quote p{margin:0 0 14px;font-size:clamp(16.5px,1.8vw,18.4px);line-height:1.7}
.cs-quote cite{display:block;font-style:normal;font-size:13.6px;letter-spacing:.04em;color:var(--ink-2)}

/* Functions: no cards, the film sits in a soft rounded frame and the caption is centred under it */
.cs-fns{max-width:1120px;margin:0 auto;padding:22px 22px 46px}
.cs-fns .cs-h{margin-top:0}
.cs-fn{margin:0;padding:clamp(28px,5.2vw,54px) 0;display:flex;flex-direction:column;align-items:center}
.cs-fn__media{width:100%;max-width:822px;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--cs-frame);box-shadow:var(--cs-shadow)}
.cs-fn__media video{width:100%;height:100%;object-fit:contain;background:var(--cs-frame)}
.cs-fn__text{max-width:518px;margin-top:19px;text-align:center}
.cs-fn__text h3{font-size:clamp(22px,2.6vw,26.6px);font-weight:700;letter-spacing:-.02em;line-height:1.5;margin:0 0 8px}
.cs-fn__text p{margin:0;font-size:clamp(16px,1.75vw,17.9px);line-height:1.65;color:var(--ink-2)}

/* Awards: centred, text pills that open the official winner pages */
.cs-awards{max-width:820px;margin:0 auto;padding:38px 22px;text-align:center}
.cs-awards h2{font-size:clamp(28px,3.3vw,33.6px);font-weight:700;letter-spacing:-.02em;line-height:1.5;margin:0 0 22px}
.cs-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin:0 0 22px}
.cs-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:980px;background:var(--cs-pill);border:.64px solid var(--cs-pill-line);
  font:600 14.4px/1.5 var(--display);color:var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.cs-badge i{font-style:normal;font-weight:500;color:var(--ink-2);transition:transform .2s ease}
.cs-badge:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.cs-badge:hover i{transform:translate(1px,-1px)}
.cs-awards p{margin:0;font-size:clamp(16.5px,1.8vw,18.4px);line-height:1.7;color:var(--ink-2)}

/* renders: one at a time, swipe or use the dots */
.cs-gallery{max-width:1044px;margin:0 auto;padding:0 22px}
.cs-photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:22px;outline:none}
.cs-photos::-webkit-scrollbar{display:none}
.cs-photos:focus-visible{box-shadow:0 0 0 3px rgba(0,113,227,.45)}
.cs-photos figure{flex:0 0 100%;margin:0;scroll-snap-align:center;align-self:center;border-radius:22px;overflow:hidden;background:var(--tile)}
.cs-photos img{width:100%;height:auto}
.cs-dots{display:flex;justify-content:center;gap:8px;padding:16px 0 60px}
.cs-dot{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:rgba(150,150,152,.38);cursor:pointer;transition:width .3s cubic-bezier(.2,.8,.2,1),background .3s ease}
.cs-dot.is-on{width:24px;background:rgba(101,101,103,.72)}
[data-theme="dark"] .cs-dot.is-on{background:rgba(235,235,240,.75)}

/* closing statement */
.cs-close{max-width:760px;margin:0 auto;padding:30px 22px 54px;text-align:center}
.cs-close h2{font-size:clamp(22px,2.6vw,26.6px);font-weight:700;letter-spacing:-.02em;line-height:1.5;margin:0 0 16px}
.cs-close p{margin:0;font-size:clamp(16.5px,1.8vw,18.4px);line-height:1.7;color:var(--ink-2)}

@media (max-width:640px){
  .cs-back{padding:12px 16px 0}
  .cs-hero,.cs-cover,.cs-about,.cs-fns,.cs-awards,.cs-gallery,.cs-close{padding-left:16px;padding-right:16px}
  .cs-cover img,.cs-fn__media,.cs-photos,.cs-photos figure{border-radius:16px}
  .cs-quote{padding:18px 20px}
}

/* ElectroGlide only (body.case.eg, 10/15 v2), closer to shuoningshi.com/electroglide.html: the title and its line at her
   sizes, the project film under the cover, and each function as its own screen (it springs in as it arrives) */
.eg .cs-hero h1{font-size:clamp(41.6px,7vw,80px)}
.eg .cs-tagline{max-width:22.25em;font-size:clamp(18.4px,2.2vw,25.6px)}
.eg .cs-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:22px;background:#000;box-shadow:var(--cs-shadow)}
.eg .cs-fns{padding-bottom:clamp(40px,6vh,64px)}
.eg .cs-fn{min-height:100vh;min-height:100svh;justify-content:center;padding:7vh 0}
.eg .cs-fn.reveal{transform:scale(.92) translateY(36px);transition:opacity .7s cubic-bezier(.34,1.32,.5,1),transform .7s cubic-bezier(.34,1.32,.5,1)}
.eg .cs-fn.reveal.in{transform:none}
.eg .cs-fn__media{max-width:min(100%,107vh);background:#efefef}
.eg .cs-fn__media video{object-fit:cover;background:#efefef}
.eg .cs-fn__text{max-width:30em;margin-top:19px}
.eg .cs-fn__text h3{font-size:clamp(20.8px,2.6vw,28.8px)}
.eg .cs-fn__text p{font-size:clamp(15.7px,1.8vw,17.9px)}
@media (max-width:640px){.eg .cs-film video{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.eg .cs-fn.reveal{transform:none;transition:none}}

/* Awards = the official logos (Leo 10/16: every award as its logo, side by side like XIONGDA's row — never award text
   in a pill or a box). A link may wrap a logo; a plain line under the row says what the art doesn't (category, year).
   Theme-aware art: <img data-light data-dark> (site.js swaps). Per-logo height: style="--h:64px". */
.cs-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 48px;margin:4px 0 22px}
.cs-logos > a,.cs-logos > span{display:block;line-height:0;transition:transform .2s ease}
.cs-logos > a:hover{transform:translateY(-2px)}
.cs-logos img{display:block;height:var(--h,76px);width:auto;max-width:100%}
.cs-hero .cs-logos{margin:22px 0 0}
.cs-hero .cs-logos img{height:var(--h,64px)}
.cs-hero .cs-logos{gap:14px 34px}
@media (max-width:640px){.cs-logos{gap:18px 22px}.cs-logos img{height:calc(var(--h,76px) * .7)}.cs-hero .cs-logos img{height:calc(var(--h,64px) * .86)}}