/* ============================================================
   case.css — the deep case study. The project's own palette is
   available here as --mk-* so the page can borrow from it.
   ============================================================ */
.cs-hero{padding-block:clamp(112px,14vw,190px) clamp(26px,3.4vw,48px)}
.cs-hero-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:clamp(30px,5vw,80px)}
.cs-hero-top a:hover{color:var(--accent)}
.cs-name{font-size:clamp(2.8rem,10vw,9.5rem);line-height:.86}
.cs-tagline{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.4rem,3.2vw,3rem);
  letter-spacing:-.025em;line-height:1.15;max-width:26ch;margin-top:clamp(18px,2.4vw,34px);color:var(--fg-dim)}
.cs-facts{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,60px);margin-top:clamp(30px,4vw,58px);
  padding-top:22px;border-top:var(--rule) solid var(--hair)}
.cs-facts dd{margin:6px 0 0}

.cs-stage{padding-bottom:clamp(20px,3vw,40px)}
.cs-stage .mk{box-shadow:0 40px 120px -50px color-mix(in srgb,var(--mk-accent) 45%,transparent)}
.cs-stage-note{margin-top:14px}

.cs-chapter{padding-block:clamp(46px,6vw,96px);border-top:var(--rule) solid var(--hair)}
.cs-chapter-in{display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);
  align-items:start}
.cs-chapter-lbl{display:grid;gap:10px;align-content:start}
.cs-chapter-lbl--wide{margin-bottom:clamp(34px,4.4vw,66px)}
.cs-body{font-size:clamp(1.15rem,1.9vw,1.7rem);line-height:1.42;letter-spacing:-.02em;max-width:44ch}
@media (max-width:900px){.cs-chapter-in{grid-template-columns:1fr;gap:20px}}

/* ---- 04 The system ---- */
.cs-system{border-top:var(--rule) solid var(--hair)}
.sysrows{display:grid}
.sysrow{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:clamp(18px,3vw,60px);
  padding-block:clamp(18px,2.2vw,30px);border-top:var(--rule) solid var(--hair)}
.sysrow:last-child{border-bottom:var(--rule) solid var(--hair)}
.sysrow dt{color:var(--accent)}
.sysrow dd{margin:0;font-size:clamp(1rem,1.24vw,1.15rem);color:var(--fg-dim);max-width:56ch;line-height:1.55}
@media (max-width:760px){.sysrow{grid-template-columns:1fr;gap:8px}}

.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  margin-top:clamp(30px,4vw,56px)}
.sw{display:grid;gap:0;text-align:left;position:relative;overflow:hidden}
.sw-chip{display:block;height:clamp(88px,11vw,160px);background:var(--sw);
  border:var(--rule) solid var(--hair);transition:transform .45s var(--ease)}
.sw:hover .sw-chip{transform:scale(1.02)}
.sw-name{padding-top:10px}
.sw-hex{padding-top:3px}
.sw.copied .sw-hex{color:var(--accent)}
.sw.copied .sw-hex::after{content:' copied'}
@media (max-width:640px){.swatches{grid-template-columns:repeat(3,1fr)}}

.specimen{margin-top:clamp(30px,4vw,56px);padding:clamp(24px,3.4vw,52px);
  background:var(--mk-bg);color:var(--mk-fg);border:var(--rule) solid var(--mk-hair);border-radius:var(--radius)}
.specimen .mono{color:color-mix(in srgb,var(--mk-fg) 55%,var(--mk-bg))}
.specimen-line{font-family:var(--mk-disp);font-variation-settings:var(--mk-disp-var);
  font-size:clamp(2rem,6.4vw,5.6rem);line-height:.98;letter-spacing:var(--mk-track);margin-top:18px}
.specimen-alpha{font-family:var(--mk-disp);font-variation-settings:var(--mk-disp-var);
  font-size:clamp(.75rem,1.5vw,1.35rem);letter-spacing:.02em;line-height:1.6;margin-top:22px;
  color:color-mix(in srgb,var(--mk-fg) 62%,var(--mk-bg));word-break:break-word}

/* ---- 05 The experience ---- */
.cs-exp{border-top:var(--rule) solid var(--hair)}
.exp-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(24px,3.4vw,64px);
  align-items:start}
.exp-list{display:grid}
.exp-btn{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;width:100%;text-align:left;
  padding:clamp(16px,2vw,24px) clamp(10px,1.4vw,18px);border-top:var(--rule) solid var(--hair);
  transition:background var(--dur) var(--ease)}
.exp-list li:last-child .exp-btn{border-bottom:var(--rule) solid var(--hair)}
.exp-btn:hover{background:var(--bg-2)}
.exp-btn[aria-pressed="true"]{background:var(--bg-2)}
.exp-btn[aria-pressed="true"] .exp-n{color:var(--accent)}
.exp-btn>span:last-child{display:grid;gap:7px}
.exp-n{color:var(--fg-dim);padding-top:4px}
.exp-t{font-size:clamp(1.05rem,1.55vw,1.4rem);letter-spacing:-.025em;font-weight:600}
.exp-d{font-size:14.5px;color:var(--fg-dim);line-height:1.5}
.exp-stage{position:sticky;top:104px}
.exp-stage .mk-h,.exp-stage .mk-sub,.exp-stage .mk-eyebrow{transition:opacity .35s var(--ease)}
.exp-stage.swapping .mk-h,.exp-stage.swapping .mk-sub,.exp-stage.swapping .mk-eyebrow{opacity:0}
@media (max-width:960px){.exp-grid{grid-template-columns:1fr}.exp-stage{position:static;order:-1;margin-bottom:26px}}

/* ---- 06 The measure ---- */
.cs-measure{border-top:var(--rule) solid var(--hair)}
.measures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.measure{padding:clamp(24px,3vw,44px) clamp(18px,2vw,32px);border:var(--rule) solid var(--hair);
  display:grid;gap:14px;align-content:start;background:var(--bg-2)}
.measure-v{font-size:clamp(2.4rem,5.6vw,5rem);color:var(--accent);line-height:.9}
.measure-l{font-size:14.5px;color:var(--fg-dim);line-height:1.45;max-width:24ch}
.cs-disclaimer{margin-top:26px;max-width:70ch;line-height:1.7}
@media (max-width:760px){.measures{grid-template-columns:1fr}}

/* ---- next / prev ---- */
.cs-next{display:grid;grid-template-columns:1fr 1fr;border-top:var(--rule) solid var(--hair)}
.cs-next-a{display:grid;gap:10px;padding:clamp(34px,5vw,80px) var(--gut);
  transition:background var(--dur) var(--ease)}
.cs-next-a--r{text-align:right;border-left:var(--rule) solid var(--hair)}
.cs-next-a:hover{background:var(--bg-2)}
.cs-next-a:hover .disp{color:var(--accent)}
@media (max-width:640px){.cs-next{grid-template-columns:1fr}
  .cs-next-a--r{text-align:left;border-left:0;border-top:var(--rule) solid var(--hair)}}