/* ═══════════════════════════════════════════════════════════
   CASE STUDY MASTER TEMPLATE
   Duplicate this file per project. Search "[ ]" for placeholders.
   Relies on style.css for tokens (--c-*, --font-*, --nav-h, --max,
   --ease) + shared nav/footer/cursor/dark-toggle/reveal (.r/.d1..)
   behaviour from main.js. If style.css is unavailable, the
   fallback tokens below keep this page fully self-contained.
═══════════════════════════════════════════════════════════ */
:root{
  --c-bg:#EDF0F2; --c-bg2:#E4E8EB; --c-white:#FFFFFF;
  --c-gray-100:#C5C8CC; --c-gray-300:#9A9494;
  --c-slate-400:#8088A0; --c-slate-500:#636B82; --c-slate-600:#545760; --c-slate-800:#2F3240;
  --c-text:#1C1F24;
  --c-border:rgba(197,200,204,0.55);
  --font-display:'Syne',sans-serif; --font-serif:'Cormorant Garamond',serif;
  --nav-h:68px; --max:1360px; --ease:cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"]{
  --c-bg:#1C1F24; --c-bg2:#252830; --c-white:#2F3240;
  --c-gray-100:#545760; --c-gray-300:#636B82; --c-text:#EDF0F2;
  --c-border:rgba(84,87,96,0.5);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-display);background:var(--c-bg);color:var(--c-text);overflow-x:hidden;transition:background .4s var(--ease),color .4s var(--ease)}
.content{max-width:var(--max);margin:0 auto;padding:0 48px}
.section{padding:96px 0}
.section-head{margin-bottom:56px}
.section-label{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--c-slate-500);margin-bottom:16px}
.section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,3.4vw,48px);letter-spacing:-0.03em;line-height:1.05}
.section-title em{font-family:var(--font-serif);font-weight:300;font-style:italic;color:var(--c-slate-500)}
.r{opacity:1}

/* ── Hero ── */
.cs-hero{padding-top:calc(var(--nav-h) + 64px);padding-bottom:56px}
.cs-eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--c-slate-500);margin-bottom:20px}
.cs-title{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,6vw,80px);letter-spacing:-0.04em;line-height:.98;margin-bottom:20px}
.cs-subtitle{font-family:var(--font-serif);font-size:20px;font-weight:300;font-style:italic;color:var(--c-slate-600);max-width:640px;line-height:1.6}
.cs-hero-visual{aspect-ratio:16/8;background:var(--c-bg2);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;margin-top:48px}

/* ── Placeholder frame (used for every image/artwork slot) ── */
.ph-frame{background:var(--c-bg2);border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;position:relative}
.ph-tag{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-slate-500);border:1px solid var(--c-border);background:var(--c-bg);padding:8px 16px}

/* ── Before / After ── */
.ba-eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--c-slate-500);margin-bottom:16px}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--c-border);border:1px solid var(--c-border)}
.ba-col{background:var(--c-bg)}
.ba-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-slate-500);padding:20px 24px 0}
.ba-frame{aspect-ratio:4/3;margin:16px 24px}
.ba-copy{font-family:var(--font-serif);font-size:15px;font-weight:300;line-height:1.7;color:var(--c-gray-300);padding:0 24px 24px}
.ba-col.after .ba-label{color:var(--c-text)}

/* ── Problem / Solution split ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split.reverse .split-visual{order:2}
.split-eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--c-slate-500);margin-bottom:16px}
.split-title{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-0.025em;margin-bottom:20px;line-height:1.1}
.split-copy{font-family:var(--font-serif);font-size:17px;font-weight:300;line-height:1.75;color:var(--c-gray-300);margin-bottom:16px}
.split-copy:last-child{margin-bottom:0}
.split-visual{aspect-ratio:4/3}

/* ── IA / Sitemap full bleed ── */
.ia-frame{aspect-ratio:21/9}

/* ── Design System & Style Guide ── */
.ds-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1px;background:var(--c-border);border:1px solid var(--c-border)}
.ds-card{background:var(--c-bg);padding:32px}
.ds-card-label{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-slate-500);margin-bottom:20px}
.swatch-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.swatch{width:56px;height:56px;border:1px solid var(--c-border);border-radius:4px;flex:none}
.swatch-empty{font-size:11px;color:var(--c-slate-500);border:1px dashed var(--c-border);padding:10px 14px;border-radius:4px}
.s1{background:#EDF0F2}.s2{background:#C5C8CC}.s3{background:#9A9494}.s4{background:#8088A0}
.s5{background:#636B82}.s6{background:#545760}.s7{background:#2F3240}.s8{background:#1C1F24}
.ds-note{font-family:var(--font-serif);font-size:13px;font-weight:300;color:var(--c-gray-300);line-height:1.6}
.type-h1{font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-0.03em;margin-bottom:8px}
.type-row{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--c-slate-500);margin-bottom:6px}
.type-row em{font-family:var(--font-serif);font-style:italic;font-weight:300;color:var(--c-text);font-size:15px}
.btn-mini{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;margin-bottom:10px}
.btn-mini.primary{background:var(--mini-color, var(--c-text));color:var(--c-bg)}
.btn-mini.secondary{border:1px solid var(--mini-color, var(--c-border));color:var(--mini-color, var(--c-text))}

/* ── Wireframe grid ── */
.wf-full-frame{width:100%}
.wf-full-frame img{width:100%;height:auto;display:block}

/* ── UNIVERSAL BLOCK CTA (appended by every block partial when cta_text is set) ── */
.block-cta{margin-top:36px}
.block-cta-btn{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 34px;
  background:var(--cta-color, var(--c-text));color:var(--c-bg);
  text-decoration:none;
  box-shadow:0 0 0 1px var(--cta-color, var(--c-text));
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.block-cta-btn:hover{
  background:var(--c-bg);
  color:var(--cta-color, var(--c-text));
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.14), 0 0 0 1px var(--cta-color, var(--c-text));
}
.block-cta-btn:active{transform:translateY(-1px)}

/* ── Usability testing ── */
.ut-copy p{font-family:var(--font-serif);font-size:17px;font-weight:300;line-height:1.75;color:var(--c-gray-300);margin-bottom:16px}
.ut-frame{aspect-ratio:4/3}

/* ── Mobile screens grid ── */
.ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.ms-frame{aspect-ratio:9/17;margin-bottom:16px}

/* ── Future goals ── */
.fg-copy p{font-family:var(--font-serif);font-size:17px;font-weight:300;line-height:1.75;color:var(--c-gray-300);max-width:760px;margin-bottom:16px}
.fg-copy p:last-child{margin-bottom:0}

@media(max-width:960px){
  .content{padding:0 24px}
  .ba-grid,.split,.ds-grid{grid-template-columns:1fr}
  .split.reverse .split-visual{order:0}
  .ms-grid{grid-template-columns:1fr}
}