/* ============================================================================
   CASE STUDY — ported faithfully from mila-case-study-*-element.js (rev 2026-07).
   Dark, cinematic, reading-first. The plum accent is identical in both themes.
   Lulo Clean substituted with League Spartan (approved 2026-08-07).
   Shared by every case-study page; per-page specifics stay inline on the page.
   ============================================================================ */
.cs{
  --wine:#80314E; --wine-deep:#6d2942; --wine-lift:#80314E;
  --ink:#141013; --cream:#F4F0E7; --fg-rgb:244,240,231; --surface:#1e181c;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --caps:'Helvetica Neue',Arial,sans-serif;
  --display:'League Spartan','Futura','Avenir Next','Century Gothic',sans-serif;
  --gut:22px; --sec:66px;
  margin:0;background:var(--ink);color:var(--cream);font-family:var(--serif);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
@media (min-width:821px){.cs{--gut:34px;--sec:82px}}
.cs *{box-sizing:border-box}
.cs .wrap{max-width:740px;margin:0 auto;padding:0 var(--gut)}
.cs .btn3{display:inline-block;text-align:center;text-decoration:none;font-family:var(--caps);text-transform:uppercase;
letter-spacing:.16em;font-size:11.5px;font-weight:700;background:var(--wine);color:#F4F0E7;padding:16px 30px;border-radius:40px;min-height:48px}
.cs .btn3:hover{background:var(--wine-deep)}
.cs .eyebrow{font-family:var(--caps);text-transform:uppercase;letter-spacing:.28em;font-size:10px;font-weight:700;color:var(--wine-lift);margin:0 0 18px}

/* HERO */
.cs .hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden;background:#0e0b0d}
.cs .hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:.5}
.cs .hero .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,13,.3) 18%,rgba(14,11,13,.8) 70%,rgba(14,11,13,.96))}
.cs .hero .inner{position:relative;z-index:2;width:100%;max-width:740px;margin:0 auto;padding:0 var(--gut) calc(var(--sec)*.72)}
.cs .hero .back{font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;font-size:10px;font-weight:700;
color:rgba(255,255,255,.72);text-decoration:none;display:inline-block;margin:0 0 26px}
.cs .hero .back:hover{color:#fff}
.cs .hero .q{font-family:var(--serif);font-style:italic;font-weight:500;color:#fff;font-size:clamp(30px,5.4vw,58px);
line-height:1.12;margin:0;letter-spacing:-.01em;max-width:18ch}
.cs .hero .q em{font-style:italic;color:var(--wine-lift);font-weight:600}
.cs .hero .attr{font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;font-size:10.5px;font-weight:700;
color:rgba(244,240,231,.62);margin:26px 0 0;line-height:1.7}

/* FILM */
.cs .film{padding:calc(var(--sec)*.8) 0 var(--sec)}
.cs .vid{position:relative;width:100%;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:16/9;
box-shadow:0 44px 100px -54px rgba(0,0,0,.95)}
.cs .vid.anamorphic{aspect-ratio:2.39}
.cs .vid video{width:100%;height:100%;display:block;object-fit:cover}
.cs .vid img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cs .play{position:absolute;inset:0;border:0;cursor:pointer;width:100%;height:100%;display:flex;align-items:center;
justify-content:center;background:linear-gradient(180deg,rgba(128,49,78,.12),rgba(14,11,13,.34))}
.cs .play .circ{width:78px;height:78px;border-radius:50%;background:rgba(244,240,231,.96);display:flex;align-items:center;
justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.cs .play .circ span{color:var(--wine);font-size:27px;margin-left:5px}
.cs .meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:24px;font-family:var(--caps);text-transform:uppercase;
letter-spacing:.12em;font-size:10px;font-weight:700;color:rgba(var(--fg-rgb),.6)}
.cs .meta b{display:block;color:var(--cream);font-size:14px;letter-spacing:.01em;text-transform:none;
font-family:var(--serif);font-weight:400;margin-top:5px}

/* NARRATIVE */
.cs .block{padding:0 0 var(--sec)}
.cs .block h2{font-family:var(--serif);font-weight:700;color:var(--cream);font-size:clamp(24px,3.2vw,34px);line-height:1.16;margin:0 0 20px}
.cs .block h2 em{font-style:italic;color:var(--wine-lift)}
.cs .block p{color:rgba(var(--fg-rgb),.9);font-size:clamp(16px,1.35vw,18px);line-height:1.75;margin:0 0 18px;max-width:60ch}
.cs .block p:last-child{margin-bottom:0}

/* IMAGE BAND */
.cs .band{position:relative;width:100%;overflow:hidden;background:#0e0b0d;aspect-ratio:2.39;margin:0 0 var(--sec)}
.cs .band img{width:100%;height:100%;object-fit:cover;display:block}
.cs .band .v{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,13,.2),rgba(14,11,13,.45))}
.cs .band figcaption{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut) 18px;max-width:740px;margin:0 auto;
font-family:var(--caps);text-transform:uppercase;letter-spacing:.2em;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.7)}

/* PAIR */
.cs .pair{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 var(--sec)}
@media (min-width:821px){.cs .pair{grid-template-columns:1fr 1fr;gap:14px}}
.cs .pair figure{margin:0;position:relative;overflow:hidden;border-radius:12px;background:#0e0b0d;aspect-ratio:16/10}
.cs .pair img{width:100%;height:100%;object-fit:cover;display:block}

/* APPROACH STEPS */
.cs .steps{display:flex;flex-direction:column;gap:calc(var(--gut)*1.5)}
.cs .step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.cs .step .no{font-family:var(--display);font-weight:700;color:var(--wine-lift);font-size:clamp(28px,4vw,42px);line-height:.9;opacity:.85}
.cs .step h3{font-family:var(--serif);font-weight:600;color:var(--cream);font-size:clamp(19px,1.9vw,23px);margin:0 0 10px;line-height:1.2}
.cs .step p{color:rgba(var(--fg-rgb),.86);font-size:clamp(15px,1.3vw,17px);line-height:1.72;margin:0;max-width:56ch}

/* RESULT: sticky portrait, panels scroll over */
.cs .pin{position:relative;background:#0e0b0d}
.cs .pin .stick{position:sticky;top:0;height:100vh;overflow:hidden}
.cs .pin .stick img{width:100%;height:100%;object-fit:cover;object-position:60% 28%}
.cs .pin .stick .s{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,11,13,.82),rgba(14,11,13,.4))}
.cs .pin .panels{position:relative;margin-top:-100vh;z-index:2}
.cs .pin .panel{min-height:66vh;display:flex;align-items:center;padding:calc(var(--sec)*.55) 0}
.cs .pin .panel .box{max-width:540px;margin:0 auto}
.cs .pin .panel p{color:#fff;font-size:clamp(17px,1.5vw,20px);line-height:1.7;margin:0;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.cs .pull{border-left:2px solid var(--wine-lift);padding-left:22px}
.cs .pull q{font-family:var(--serif);font-style:italic;font-weight:500;color:#fff;font-size:clamp(22px,2.4vw,29px);line-height:1.3;quotes:none}
.cs .pull cite{display:block;font-style:normal;font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;
font-size:10.5px;font-weight:700;color:var(--wine-lift);margin-top:16px}

/* DELIVERABLES */
.cs .delv{padding:var(--sec) 0;border-top:1px solid rgba(var(--fg-rgb),.14)}
.cs .delv .eyebrow{margin-bottom:14px}
.cs .delv p{font-family:var(--serif);color:rgba(var(--fg-rgb),.82);font-size:clamp(16px,1.4vw,18px);line-height:1.7;margin:0;max-width:52ch}

/* CLOSE */
.cs .close{position:relative;overflow:hidden;min-height:66vh;display:flex;align-items:center;text-align:center;background:#0e0b0d}
.cs .close img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 26%;opacity:.4}
.cs .close .sc{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,11,13,.62),rgba(14,11,13,.9))}
.cs .close .wrap{position:relative;z-index:2;padding-top:var(--sec);padding-bottom:var(--sec)}
.cs .close h2{font-family:var(--serif);font-weight:700;color:#fff;font-size:clamp(26px,3.6vw,42px);line-height:1.18;margin:0 auto 22px;max-width:20ch}
.cs .close h2 em{font-style:italic;color:var(--wine-lift)}
.cs .close .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cs .close .ghost{background:transparent;color:#F4F0E7;border:2px solid rgba(244,240,231,.45);padding:14px 26px;border-radius:40px;
text-decoration:none;font-family:var(--caps);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;font-weight:700}
.cs .close .ghost:hover{background:#F4F0E7;color:var(--wine)}

/* ============================================================================
   FIXES (2026-08-07) for two real bugs found during the batch ports.

   BUG 1 — light mode never activated. This file is linked AFTER site.css, so
   the unconditional .cs{--ink:#141013;...} block above outranked site.css's
   @media(prefers-color-scheme:light){.cs{...}} override. The light vars have to
   be re-asserted HERE, after the defaults, to win. Verified against work-zoe.

   BUG 2 — site.css bled into .cs. The originals were shadow-DOM isolated, so
   nothing leaked. As plain pages, site.css's .hero/.eyebrow/h1-h3 rules reach
   inside .cs and break the hero (eyebrow pulled inline with a stray dash rule,
   hero copy prematurely wrapped, min-height overridden). Reset them explicitly.
   ============================================================================ */
@media (prefers-color-scheme:light){
 .cs{--ink:#F1EEE6;--cream:#1c1a1a;--fg-rgb:28,26,26;--surface:#fff}
 /* immersive photographic surfaces stay white-on-dark by design */
 .cs .hero .q,.cs .hero .attr,.cs .hero .back,
 .cs .pin .panel p,.cs .pull q,.cs .close h2{color:#fff}
 .cs .band figcaption{color:rgba(255,255,255,.7)}
}

/* Reset the site.css bleed inside case-study pages */
.cs .hero{height:auto;min-height:82vh;display:flex;align-items:flex-end}
.cs .hero .eyebrow{display:block;margin:0 0 18px;color:var(--wine-lift);letter-spacing:.28em;font-size:10px}
.cs .hero .eyebrow::before{content:none}
.cs .hero p{max-width:none;font-size:inherit;margin:0}
.cs .hero .q{font-size:clamp(30px,5.4vw,58px);margin:0}
.cs .hero .attr{font-size:10.5px;margin:26px 0 0}
.cs .hero .cta{display:none}
.cs h1,.cs h2,.cs h3{letter-spacing:normal}
.cs .eyebrow{display:block}
.cs .eyebrow::before{content:none}

/* 30 Sep 2026: every work page's opening lines sit on the same frame as the header (the logo's left edge),
   like the rest of the site. The reading column below stays narrow. */
.cs .hero .inner,.cs.cs-editorial .hero > .wrap{max-width:calc(1320px + 2 * clamp(20px,4.2vw,64px));padding-left:clamp(20px,4.2vw,64px);padding-right:clamp(20px,4.2vw,64px)}