/* Case studies: same tokens as the home page. Light default, dark toggle, one cobalt accent.
   Radius: controls 12px, media frames 28px. The spec sheet is the one bold element. */
:root{--bg:#f3f4f6;--bg2:#e8eaee;--surface:#fcfcfd;--ink:#10141b;--soft:#3a4352;--muted:#5d6776;--line:rgba(16,20,27,.12);--accent:#2443c4;--on-accent:#fcfcfd;--accent-hover:#1b35a3;--btn-bg:rgba(16,20,27,.04);--btn-bg-hover:rgba(16,20,27,.08);--btn-line-hover:rgba(16,20,27,.32);--nav-bg:rgba(243,244,246,.82);--tint1:#e2edf0;--tint2:#e6e7f6;--tint3:#f2ebe4;--tint4:#e8ebf0;--frame:#e9ecf1;--r:12px;--r-lg:28px;--font:"Archivo","Helvetica Neue",Arial,sans-serif;--gutter:clamp(16px,4vw,48px);color-scheme:light}
:root[data-theme="dark"]{--bg:#0d1014;--bg2:#12161c;--surface:#161b22;--ink:#eef1f5;--soft:#c9d0da;--muted:#929cab;--line:rgba(238,241,245,.12);--accent:#7d98ff;--on-accent:#0d1014;--accent-hover:#98aeff;--btn-bg:rgba(238,241,245,.06);--btn-bg-hover:rgba(238,241,245,.1);--btn-line-hover:rgba(238,241,245,.4);--nav-bg:rgba(13,16,20,.75);--tint1:#0f1c21;--tint2:#12142a;--tint3:#1c1714;--tint4:#141920;--frame:#e9ecf1;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-weight:700;line-height:1.05;text-wrap:balance}
h1,h2,h3,p,dd,dt,li,strong,figcaption{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.brand,.btn,.lang{hyphens:manual;-webkit-hyphens:manual}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.muted{color:var(--muted)}
.skip{position:absolute;inset-inline-start:8px;top:-80px;z-index:60;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:var(--r)}
.skip:focus{top:8px}
.ph{display:inline-flex;width:1em;height:1em;flex:none}
.ph svg{width:100%;height:100%;fill:currentColor}

/* Bar */
.bar{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.brand{font-weight:700;font-stretch:112%;text-decoration:none;font-size:1.0625rem}
.bar-actions{display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding-inline:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--btn-bg);color:var(--ink);font:600 .9375rem/1 var(--font);text-decoration:none;white-space:nowrap;transition:background-color .25s,border-color .25s}
.btn:hover{background:var(--btn-bg-hover);border-color:var(--btn-line-hover)}
.btn:active{scale:.98}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn .ph{font-size:1.15em}
.theme{position:relative;display:flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--btn-bg)}
.theme button{position:relative;z-index:1;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:7px;font-size:15px}
.theme button[aria-pressed="true"]{color:var(--ink)}
.theme-pill{position:absolute;top:3px;left:0;width:30px;height:30px;border-radius:7px;background:var(--btn-bg-hover);box-shadow:inset 0 0 0 1px var(--line);transition:transform .35s cubic-bezier(.16,1,.3,1)}

/* Language */
html[lang="ar"]{--font:"IBM Plex Sans Arabic",Tahoma,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] .spec-grid dd,html[lang="ar"] .results li,html[lang="ar"] .pn strong,html[lang="ar"] .brand{font-stretch:100%;letter-spacing:0;line-height:1.3}
html[dir="rtl"] .flip{transform:scaleX(-1)}
html.i18n-wait main,html.i18n-wait .foot{opacity:0}
main,.foot{transition:opacity .25s ease}
.lang{display:flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--btn-bg)}
.lang button{height:30px;min-width:34px;padding-inline:6px;border:0;border-radius:7px;background:none;color:var(--muted);font:600 .75rem/1 var(--font);font-family:"Archivo",sans-serif;letter-spacing:.02em;cursor:pointer;transition:background-color .25s,color .25s}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.nf{min-height:calc(100svh - 64px);display:grid;align-items:center}

/* Title band in the project's tint, media frame overlaps its lower edge */
.head{background:var(--tint);padding:clamp(48px,8vw,104px) 0 clamp(120px,14vw,190px)}
.cat{display:flex;align-items:center;gap:10px;color:var(--accent);font-weight:600}
.cat .ph{font-size:1.3rem}
.head h1{margin-top:22px;font-size:clamp(2.4rem,6vw,5.2rem);font-stretch:112%;letter-spacing:-.02em;max-width:17ch;padding-bottom:.06em}
.sub{margin-top:24px;font-size:clamp(1.0625rem,1.6vw,1.3rem);color:var(--soft);max-width:58ch;line-height:1.5}
.tags{margin-top:16px;color:var(--muted);font-size:.9375rem}
.hero-frame{margin-top:calc(-1 * clamp(84px,11vw,150px));border-radius:var(--r-lg);overflow:hidden;background:var(--frame);border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(16,20,27,.35);aspect-ratio:16/9}
.hero-frame img,.hero-frame video{width:100%;height:100%;object-fit:cover}
.hero-frame.contain img,.hero-frame.contain video{object-fit:contain}
.hero-frame.contain img{width:auto;max-width:100%;margin-inline:auto}

/* One orchestrated load moment, CSS only */
@media (prefers-reduced-motion:no-preference){
  .head .cat,.head h1,.sub,.tags{animation:rise .9s cubic-bezier(.16,1,.3,1) both}
  .head h1{animation-delay:.06s}.sub{animation-delay:.14s}.tags{animation-delay:.2s}
  .hero-frame{animation:settle 1.2s cubic-bezier(.16,1,.3,1) .12s both}
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}}
@keyframes settle{from{opacity:0;transform:translateY(40px) scale(.97)}}

/* Spec sheet: the datasheet the project would ship with */
.spec{margin-top:clamp(56px,8vw,96px)}
.spec h2,.row>h2{font-size:1.0625rem;font-weight:600;color:var(--muted);letter-spacing:0;line-height:1.4}
.spec-grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.spec-grid div{padding:22px 24px 26px 0;border-bottom:1px solid var(--line)}
.spec-grid div:not(:nth-child(3n+1)){padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.spec-grid dt{color:var(--muted);font-size:.9375rem}
.spec-grid dd{margin-top:8px;font-size:clamp(1.25rem,2.1vw,1.75rem);font-weight:650;font-stretch:108%;line-height:1.15}

/* Reading rows: label column + 65ch text */
.rows{margin-top:clamp(40px,6vw,72px)}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;padding-block:clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.row>h2{position:sticky;top:88px;align-self:start;color:var(--ink);font-size:clamp(1.35rem,2vw,1.75rem);font-weight:700;font-stretch:108%}
.row-body{max-width:65ch}
.prose p,.prose-p{color:var(--soft);font-size:1.0625rem;line-height:1.7}
.prose p+p{margin-top:1.1em}
.role{font-size:1.35rem;font-weight:650;line-height:1.3}
.role+.muted{margin-top:8px}
.ticks li{position:relative;padding-block:14px;padding-inline:28px 0;border-bottom:1px solid var(--line);font-size:1.0625rem}
.ticks li:first-child{padding-top:0}.ticks li:first-child::before{top:10px}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:24px;width:12px;height:2px;background:var(--accent)}
.steps{counter-reset:s;display:grid;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:16px;font-size:1.0625rem;font-weight:550}
.steps li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--accent);font-weight:700}
.steps li+li{position:relative}
.steps li+li::after{content:"";position:absolute;inset-inline-start:21px;top:-10px;height:10px;width:1px;background:var(--line)}
h3{font-size:1rem;font-weight:600;color:var(--muted)}
.chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.chips li{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:550;font-size:.9375rem}
.notes{margin-top:32px;display:grid;gap:18px}
.notes dt{font-weight:650}
.notes dd{color:var(--soft);margin-top:4px}
.results{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.results li{font-size:clamp(1.3rem,2.4vw,2rem);font-weight:650;font-stretch:106%;line-height:1.2;padding-block:14px;border-bottom:1px solid var(--line)}
.results li:first-child{padding-top:0}
.pdf{margin-top:24px}

/* Gallery */
.gallery{margin-top:clamp(24px,4vw,48px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.gallery figure.wide{grid-column:1/-1}
.frame{border-radius:var(--r-lg);overflow:hidden;background:var(--frame);border:1px solid var(--line);aspect-ratio:16/10;display:grid;place-items:center}
.wide .frame{aspect-ratio:21/9}
.frame img{width:100%;height:100%;object-fit:contain}
figcaption{margin-top:12px;color:var(--muted);font-size:.9375rem;max-width:65ch}
.credit{display:block;font-size:.8125rem;margin-top:2px}
.credit a{text-underline-offset:2px}

/* Prev / next */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(48px,7vw,88px)}
.pn a{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);text-decoration:none;transition:border-color .25s,transform .4s cubic-bezier(.16,1,.3,1)}
.pn a:hover{border-color:var(--accent);transform:translateY(-3px)}
.pn .muted{display:flex;align-items:center;gap:8px;font-size:.9375rem}
.pn strong{font-size:clamp(1.15rem,1.8vw,1.5rem);font-stretch:108%;line-height:1.2}
.pn .next{text-align:end;align-items:flex-end}
.foot{margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--line);padding-block:28px 40px;color:var(--muted);font-size:.9375rem}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:820px){
  .spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-grid div{padding-inline:0 16px!important;border-inline-start:0!important}
  .spec-grid div:nth-child(2n){padding-inline:16px 0!important;border-inline-start:1px solid var(--line)!important}
  .row{grid-template-columns:minmax(0,1fr);gap:18px}
  .row>h2{position:static}
  .gallery,.pn{grid-template-columns:minmax(0,1fr)}
  .wide .frame{aspect-ratio:16/10}
  .pn .next{text-align:start;align-items:flex-start}
}
@media (max-width:760px){
  .bar .btn-ghost span{display:none}.bar .btn-ghost{width:46px;padding:0}
}
@media (max-width:520px){
  .brand{font-size:.9375rem}.bar-actions{gap:6px}.lang button{min-width:30px;padding-inline:4px}.btn-ghost{display:none!important}
  .spec-grid dd{font-size:1.125rem}
  .hero-frame{aspect-ratio:4/3}
}

.row-body,.results li,.ticks li,.steps li,.spec-grid div,.pn a{min-width:0}