/* ================================================================
   MARDER STUDIO — CASE STUDY SYSTEM  ·  case-study.css
   The Simona showcase format, made reusable for every project.
   Dark screening-room brand · Geist · "Word." section heads ·
   slate metadata · bold highlights · brand-logo hero · scroll reveal.
   ================================================================ */

@font-face{
  font-family:'Geist';
  src:url('../assets/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist Mono';
  src:url('../assets/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Apple Garamond';
  src:url('../assets/fonts/AppleGaramond-LightItalic.ttf') format('truetype');
  font-weight:300; font-style:italic; font-display:swap;
}

:root{
  --cs-bg:#0c0c0d; --cs-raise:#141416; --cs-panel:#1a1a1d;
  --cs-ink:#f2f1ee; --cs-ink2:#a9a8a3; --cs-ink3:#6d6c68;
  --cs-line:rgba(242,241,238,.14); --cs-line2:rgba(242,241,238,.07);
  --cs-disp:'Geist','Helvetica Neue',Arial,sans-serif;
  --cs-mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --cs-serif:'Apple Garamond','Times New Roman',serif;
  --cs-gutter:clamp(1.25rem,4vw,3.5rem);
  --cs-max:1180px; --cs-navh:4rem;
  --cs-ease:cubic-bezier(.22,1,.36,1);
}

/* scope everything to the case-study body so it never fights site CSS */
body.cs{
  margin:0; background:var(--cs-bg); color:var(--cs-ink);
  font-family:var(--cs-disp); font-weight:420; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.cs *,body.cs *::before,body.cs *::after{box-sizing:border-box}
body.cs img,body.cs iframe{display:block;max-width:100%}
body.cs a{color:inherit;text-decoration:none}
body.cs ::selection{background:var(--cs-ink);color:var(--cs-bg)}
body.cs :focus-visible{outline:1px solid var(--cs-ink);outline-offset:3px}

.cs .mono{font-family:var(--cs-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink3)}
.cs .mono.lit{color:var(--cs-ink2)}
.cs .wrap{max-width:var(--cs-max);margin:0 auto;padding:0 var(--cs-gutter)}

/* ---------- nav ---------- */
.cs-nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--cs-navh);display:flex;align-items:center;
  transition:background .5s var(--cs-ease),backdrop-filter .5s var(--cs-ease)}
.cs-nav.scrolled{background:rgba(12,12,13,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--cs-line2)}
.cs-nav__in{width:100%;max-width:none;margin:0 auto;padding:0 var(--cs-gutter);display:flex;align-items:center;justify-content:space-between}
.cs-nav__logo img{height:25px;width:auto;filter:invert(1);opacity:.92}
.cs-nav__links{display:flex;gap:clamp(1.1rem,2.5vw,2.25rem);list-style:none;margin:0;padding:0}
.cs-nav__links a{font-family:var(--cs-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink2);transition:color .3s}
.cs-nav__links a:hover,.cs-nav__links a[aria-current="page"]{color:var(--cs-ink)}

/* ---------- hero (brand logo + title + attribution) ---------- */
.cs-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  padding:calc(var(--cs-navh) + 2rem) 0 clamp(2rem,5vh,3.5rem)}
.cs-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:grayscale(100%) brightness(.5);transform:scale(1.03)}
.cs-hero__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,13,.92) 0%,rgba(12,12,13,.5) 45%,rgba(12,12,13,.72) 100%)}
.cs-hero__in{position:relative;z-index:2}
.cs-hero__brand{height:clamp(60px,8.5vw,108px);width:auto;margin-bottom:1.75rem}
.cs-hero__brand--invert{filter:invert(1)}
/* colored/dark logos: show true brand colours on a small light chip */
.cs-hero__brand--chip{background:#faf9f7;padding:.85rem 1.05rem;border-radius:9px;box-shadow:0 10px 34px rgba(0,0,0,.4)}
.cs-hero__eyebrow{margin-bottom:1rem}
.cs-hero__title{font-size:clamp(3rem,10vw,8.5rem);font-weight:660;letter-spacing:-.045em;line-height:.92;text-transform:uppercase}
.cs-hero__sub{font-family:var(--cs-serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,3vw,2.2rem);color:var(--cs-ink2);margin-top:.75rem;letter-spacing:-.01em}
.cs-hero__foot{display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;justify-content:space-between;align-items:baseline;margin-top:clamp(1.75rem,5vh,3rem);border-top:1px solid var(--cs-line2);padding-top:1.1rem}

/* ---------- sections ---------- */
.cs-sec{padding:clamp(3.5rem,9vh,6.5rem) 0;border-top:1px solid var(--cs-line2)}
.cs-sec__head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem 2rem;margin-bottom:2rem}
.cs-sec__title{font-size:clamp(1.9rem,5vw,3.4rem);font-weight:620;letter-spacing:-.04em;line-height:1}
.cs-sec__title::after{content:'.';color:var(--cs-ink3)}

/* body copy: two-column label + prose, bold highlights */
.cs-block{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:1.25rem var(--cs-gutter);
  padding-block:clamp(1.75rem,4vh,2.75rem);border-top:1px solid var(--cs-line2)}
.cs-block:first-of-type{border-top:0}
.cs-block__body{max-width:64ch;display:grid;gap:1.1rem}
.cs-block__body p{color:var(--cs-ink2);font-size:clamp(1rem,1.35vw,1.15rem)}
.cs-block__body strong{color:var(--cs-ink);font-weight:600}
.cs-block__body em{font-family:var(--cs-serif);font-style:italic;color:var(--cs-ink)}

/* big serif "idea/statement" moment */
.cs-statement{padding-block:clamp(2.5rem,7vh,4.5rem);border-top:1px solid var(--cs-line2)}
.cs-statement .mono{display:block;margin-bottom:1.5rem}
.cs-statement p{font-family:var(--cs-serif);font-style:italic;font-weight:300;font-size:clamp(1.7rem,4vw,3rem);line-height:1.24;letter-spacing:-.01em;max-width:none;color:var(--cs-ink)}

/* placeholder note (methodology to be written) */
.cs-draft{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink3);
  border:1px dashed var(--cs-line);border-radius:3px;padding:.35rem .6rem;display:inline-block;margin-bottom:1rem}

/* ---------- slate metadata ---------- */
.cs-slate{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--cs-line);border-bottom:1px solid var(--cs-line)}
.cs-slate>div{padding:1rem 1.25rem 1rem 0;display:grid;gap:.45rem;align-content:start}
.cs-slate>div+div{padding-left:1.25rem;border-left:1px solid var(--cs-line2)}
.cs-slate dd{margin:0;font-size:.95rem;font-weight:480;color:var(--cs-ink)}

/* ---------- media ---------- */
.cs-frame{position:relative;width:100%;background:var(--cs-panel);border:1px solid var(--cs-line2);overflow:hidden}
.cs-frame--video{aspect-ratio:16/9}
.cs-frame>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-frame__cap{display:flex;justify-content:space-between;gap:1rem;padding-top:.6rem}
.cs-masonry{columns:3;column-gap:14px}
.cs-masonry.two{columns:2}
.cs-cell{break-inside:avoid;margin:0 0 14px;background:var(--cs-panel);border:1px solid var(--cs-line2);overflow:hidden}
.cs-cell img{width:100%;height:auto}
.cs-laurels{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.5rem);align-items:center;filter:invert(1) brightness(.92);mix-blend-mode:screen}
.cs-laurels img{height:clamp(48px,7vw,80px);width:auto}

/* ---------- execution assets (drop in between methodology) ----------
   moodboards, production stills, boards, docs. Each project mixes freely. */
.cs-media{margin-block:clamp(1.25rem,3vh,2rem)}
.cs-grid{display:grid;gap:14px}
.cs-grid.g2{grid-template-columns:repeat(2,1fr)}
.cs-grid.g3{grid-template-columns:repeat(3,1fr)}
.cs-grid.g4{grid-template-columns:repeat(4,1fr)}
.cs-grid img{width:100%;height:auto;background:var(--cs-panel);border:1px solid var(--cs-line2)}
@media (max-width:700px){.cs-grid.g3,.cs-grid.g4{grid-template-columns:repeat(2,1fr)}}
/* moodboard = looser, taller frames */
.cs-moodboard .cs-grid img{aspect-ratio:auto}
/* production file / PDF chip */
.cs-doc{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--cs-line);padding:1.1rem 1.35rem;transition:background .3s var(--cs-ease),border-color .3s}
.cs-doc:hover{background:var(--cs-raise)}
.cs-doc__l{display:grid;gap:.3rem}
.cs-doc__k{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink3)}
.cs-doc__t{font-weight:560;color:var(--cs-ink)}
.cs-doc__go{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink2)}
/* embedded PDF/doc viewer */
.cs-embed{width:100%;aspect-ratio:4/3;border:1px solid var(--cs-line2);background:var(--cs-panel)}
.cs-embed iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 3D asset folders (moodboard / stills / boards) ----------
   Vanilla port of the animated folder: opens and fans out cards on hover
   (or tap on touch). Theme via --f-back/--f-front/--f-tab per project. */
.cs-folders{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);margin-top:1.25rem}
.cs-folder{--f-back:#3a3a3d;--f-front:#4a4a4e;--f-tab:#333;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:3.9rem 1rem 1.1rem;border:1px solid var(--cs-line2);border-radius:14px;background:var(--cs-raise);
  cursor:pointer;perspective:1000px;min-height:250px;transition:border-color .4s,box-shadow .4s}
.cs-folder:hover{border-color:var(--cs-line);box-shadow:0 22px 55px rgba(0,0,0,.45)}
.cs-folder__stage{position:relative;width:200px;height:150px;margin-bottom:.65rem}
.cs-folder__tab{position:absolute;left:calc(50% - 64px + 14px);top:26px;width:46px;height:14px;background:var(--f-tab);border-radius:6px 6px 0 0;transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:1}
.cs-folder__back{position:absolute;left:50%;top:38px;width:128px;height:94px;margin-left:-64px;background:var(--f-back);border-radius:10px;transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:1}
.cs-folder__cards{position:absolute;left:50%;top:66px;z-index:2}
.cs-folder__card{position:absolute;width:76px;height:104px;left:-38px;top:-52px;border-radius:8px;overflow:hidden;
  background:var(--cs-panel);border:1px solid var(--cs-line2);box-shadow:0 12px 26px rgba(0,0,0,.55);
  transform:translateY(0) scale(.5);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.cs-folder__card img{width:100%;height:100%;object-fit:cover}
.cs-folder__card--empty{display:grid;place-items:center}
.cs-folder__card--empty span{font-family:var(--cs-mono);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-ink3)}
.cs-folder__front{position:absolute;left:50%;top:42px;width:128px;height:94px;margin-left:-64px;background:var(--f-front);border-radius:10px;transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:3;overflow:hidden}
.cs-folder__front::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 55%)}
/* open state (hover on desktop, .is-open toggled by tap) */
.cs-folder:hover .cs-folder__tab,.cs-folder.is-open .cs-folder__tab{transform:rotateX(-25deg) translateY(-2px)}
.cs-folder:hover .cs-folder__back,.cs-folder.is-open .cs-folder__back{transform:rotateX(-15deg)}
.cs-folder:hover .cs-folder__front,.cs-folder.is-open .cs-folder__front{transform:rotateX(28deg) translateY(9px)}
.cs-folder:hover .cs-folder__card,.cs-folder.is-open .cs-folder__card{opacity:1}
.cs-folder:hover .cs-folder__card:nth-child(1),.cs-folder.is-open .cs-folder__card:nth-child(1){transform:translateY(-90px) translateX(-54px) rotate(-12deg) scale(1)}
.cs-folder:hover .cs-folder__card:nth-child(2),.cs-folder.is-open .cs-folder__card:nth-child(2){transform:translateY(-98px) translateX(0) rotate(0deg) scale(1)}
.cs-folder:hover .cs-folder__card:nth-child(3),.cs-folder.is-open .cs-folder__card:nth-child(3){transform:translateY(-90px) translateX(54px) rotate(12deg) scale(1)}
.cs-folder__label{font-weight:560;letter-spacing:-.01em;color:var(--cs-ink)}
.cs-folder__count{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink3);margin-top:.3rem}
/* per-project themes */
.cs-folders--amber .cs-folder{--f-back:#6f5222;--f-front:#b98a34;--f-tab:#5c4420}
.cs-folders--green .cs-folder{--f-back:#2c4433;--f-front:#3f6a49;--f-tab:#243a2b}
.cs-folders--neutral .cs-folder{--f-back:#3a3a3d;--f-front:#50504f;--f-tab:#2f2f31}
@media (max-width:700px){.cs-folders{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}

/* ---------- lightbox ---------- */
.cs-lb{position:fixed;inset:0;z-index:200;display:none;place-items:center;padding:clamp(1rem,4vw,3rem);background:rgba(12,12,13,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cs-lb.open{display:grid}
.cs-lb img{max-width:100%;max-height:88vh;object-fit:contain;border:1px solid var(--cs-line2)}
.cs-lb__close{position:absolute;top:1.1rem;right:var(--cs-gutter);font-family:var(--cs-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink2);padding:.5rem}
.cs-lb__close:hover{color:var(--cs-ink)}

/* ---------- process accordion (narrative case studies) ----------
   Collapsible phases so a deep process stays compact. Themed icon per phase
   via --cs-accent. Pure-CSS height animation (grid 0fr -> 1fr). */
.cs-process{border-top:1px solid var(--cs-line);margin-top:1.5rem}
.cs-acc{border-bottom:1px solid var(--cs-line2)}
.cs-acc__head{width:100%;display:flex;align-items:center;gap:1rem;padding:1.4rem 0;text-align:left;color:var(--cs-ink);background:none;border:0;cursor:pointer}
.cs-acc__idx{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.12em;color:var(--cs-ink3)}
.cs-acc__icon{flex:0 0 auto;width:24px;height:24px;color:var(--cs-accent,#b08d57);transition:color .3s}
.cs-acc__icon svg{width:23px;height:23px;display:block}
.cs-acc__name{font-size:clamp(1.05rem,2.1vw,1.45rem);font-weight:560;letter-spacing:-.02em}
.cs-acc__meta{margin-left:auto;font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink3)}
.cs-acc__chev{flex:0 0 auto;width:18px;height:18px;color:var(--cs-ink3);transition:transform .4s var(--cs-ease);margin-left:1.2rem}
.cs-acc__head[aria-expanded="true"] .cs-acc__chev{transform:rotate(90deg)}
.cs-acc__head[aria-expanded="true"] .cs-acc__name{color:#fff}
.cs-acc__head:hover .cs-acc__icon{color:var(--cs-ink)}
.cs-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--cs-ease)}
.cs-acc__head[aria-expanded="true"]+.cs-acc__panel{grid-template-rows:1fr}
.cs-acc__inner{overflow:hidden;min-height:0}
.cs-acc__body{display:grid;gap:1.15rem;padding:.1rem 0 2.2rem;padding-left:calc(24px + 1rem)}
.cs-acc__body p{color:var(--cs-ink2);max-width:68ch;font-size:clamp(.98rem,1.3vw,1.1rem)}
.cs-acc__body strong{color:var(--cs-ink);font-weight:600}
.cs-acc__body em{font-family:var(--cs-serif);font-style:italic;color:var(--cs-ink)}
.cs-acc__media{display:grid;gap:12px;margin-top:.4rem}
.cs-acc__media.g2{grid-template-columns:repeat(2,1fr)}
.cs-acc__media.g3{grid-template-columns:repeat(3,1fr)}
.cs-acc__media img{width:100%;height:auto;border:1px solid var(--cs-line2);background:var(--cs-panel);cursor:zoom-in;transition:opacity .3s}
.cs-acc__media img:hover{opacity:.88}
.cs-acc__media--cap img{max-height:340px;object-fit:cover;object-position:top center}
.cs-acc__cap{font-family:var(--cs-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-ink3);margin-top:-.4rem}
@media (max-width:640px){.cs-acc__media.g3,.cs-acc__media.g2{grid-template-columns:1fr}.cs-acc__meta{display:none}.cs-acc__body{padding-left:0}}

/* overview two-column: prose left, spec table right */
.cs-ov{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:760px){.cs-ov{grid-template-columns:1fr;gap:1.5rem}}

/* film spec table */
.cs-spectable{width:100%;border-collapse:collapse;margin-top:1.25rem}
.cs-spectable td{padding:.72rem 0;border-bottom:1px solid var(--cs-line2);vertical-align:top;font-size:.95rem}
.cs-spectable tr:first-child td{border-top:1px solid var(--cs-line)}
.cs-spectable td:first-child{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink3);width:32%;padding-right:1rem}
.cs-spectable td:last-child{color:var(--cs-ink)}

/* ---------- next project / footer ---------- */
.cs-next{display:block;border-top:1px solid var(--cs-line);padding-block:clamp(3rem,8vh,5rem)}
.cs-next:hover .cs-next__title{color:var(--cs-ink)}
.cs-next__title{font-size:clamp(2rem,5.5vw,4rem);font-weight:620;letter-spacing:-.04em;color:var(--cs-ink3);transition:color .45s var(--cs-ease)}
.cs-foot{border-top:1px solid var(--cs-line);padding:3rem 0 3.5rem}
.cs-foot__grid{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:space-between;align-items:baseline}
.cs-foot a:hover{color:var(--cs-ink)}

/* ---------- scroll text reveal (Framer-style) ---------- */
.cs .rt{color:var(--cs-ink)}
.cs .rt__w{opacity:.16;transition:opacity .1s linear;will-change:opacity}
.cs .rt__w.lit{opacity:1}
/* block reveals */
.cs .rv{opacity:0;transform:translateY(20px);transition:opacity .85s var(--cs-ease),transform .85s var(--cs-ease)}
.cs .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .cs .rt__w{opacity:1!important;transition:none}
  .cs .rv{opacity:1!important;transform:none!important;transition:none}
  .cs-hero__bg{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cs-masonry{columns:2}
  .cs-block{grid-template-columns:1fr;gap:.8rem}
}
@media (max-width:560px){
  .cs-masonry,.cs-masonry.two{columns:1}
  .cs-slate{grid-template-columns:1fr 1fr}
  .cs-slate>div+div{border-left:0;padding-left:0}
  .cs-nav__links{gap:.9rem}
}

/* ---------- unified site footer (matches homepage) ---------- */
.ft{border-top:1px solid var(--cs-line);padding:clamp(2.5rem,6vh,4rem) 0 2rem;background:var(--cs-bg)}
.ft__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;margin-bottom:2.5rem}
.ft__logo{height:clamp(22px,3vw,34px);width:auto;filter:invert(1);opacity:.9;display:block}
.ft__social{display:flex;flex-wrap:wrap;gap:1.4rem}
.ft .ft__social a{font-family:var(--cs-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-ink2);text-decoration:none;transition:color .3s var(--cs-ease)}
.ft .ft__social a:hover{color:var(--cs-ink)}
.ft__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;border-top:1px solid var(--cs-line2);padding-top:1.4rem}
.ft__bottom span,.ft .ft__bottom a{font-family:var(--cs-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cs-ink3);text-decoration:none}

.ft .wrap{max-width:var(--cs-max);margin:0 auto;padding:0 var(--cs-gutter)}