/* Case-study shell.
   Figma: sidebar 250 · topbar 86 · content area 1430 · container 1220 with
   48px padding. The sidebar is now 264 on both cases and the topbar takes
   its height and geometry from base.css, so the two cases match each other.
   48px padding, which lands the text column at 1124px and the measure at 760. */
.case{
  --side:264px;
  --bleed:calc((100vw - var(--side) - min(100vw - var(--side) - 64px,1124px)) / 2);
  --content:1430px;
  --col:1124px;
  --measure:760px;
  --ink:#121924;
  --ink-2:#17202d;
  --ink-3:#526071;
  --ink-4:#667287;
  --kick:#7c8798;          /* was #9aa7b7 — lifted to 4.6:1 for contrast */
  --brand:#1b82f1;
  --brand-2:#0f80d9;
  background:#fff;color:var(--ink);
}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:200;
}
.skip:focus{left:0}

/* ── sidebar ────────────────────────────────────────────────────────── */
.side{
  position:fixed;left:0;top:0;bottom:0;width:var(--side);z-index:50;
  padding:52px 34px;background:#fff;border-right:1px solid rgba(18,25,36,.07);
  display:flex;flex-direction:column;gap:26px;overflow-y:auto;
}
.side__back{margin-bottom:8px}
.side__brand{display:block}
.side__brand img{width:118px;height:auto}
.side__nav{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.side__nav a{
  font-weight:700;font-size:15px;line-height:24.8px;letter-spacing:-.23px;
  color:var(--kick);text-decoration:none;transition:color .18s;
}
.side__nav a:hover{color:var(--ink-3)}
.side__nav a.is-here{color:var(--brand)}

.shell{margin-left:var(--side);overflow-x:clip}

/* ── topbar ─────────────────────────────────────────────────────────────
   Height, gutter, background and type all come from base.css so the bar is
   identical on the home, gallery and case pages.

   The one thing that can't be shared is the horizontal centring: this bar
   lives inside .shell, which starts after the sidebar, so centring it here
   would drift right of the other pages once the viewport passes --topbar-w.
   Instead it hugs the sidebar on the left and lands on exactly the right
   edge the full-width pages land on. Percentages (not 100vw) so a visible
   scrollbar doesn't throw the two out of line. */
.case__bar{
  width:auto;
  margin-left:var(--topbar-gutter,32px);
  margin-right:calc((100% + var(--side)
    - min(100% + var(--side) - var(--topbar-gutter,32px) * 2,var(--topbar-w,1499px))) / 2);
}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--brand)}

/* ── section rhythm ─────────────────────────────────────────────────── */
.sec{
  width:min(100% - 64px,var(--col));margin-inline:auto;
  padding-top:96px;scroll-margin-top:calc(var(--topbar-h,88px) + 22px);
}
.sec:first-of-type{padding-top:71px}

.eyebrow--meta{
  display:block;font-weight:700;font-size:12px;line-height:16.8px;
  letter-spacing:2.16px;color:var(--brand-2);margin:0;
}
.eyebrow{margin:0 0 34px}
.eyebrow span{
  font-weight:900;font-size:16px;line-height:19.8px;letter-spacing:2.16px;
  color:var(--brand);
}
.eyebrow::before{display:none}
.eyebrow--light span{color:#fff}

.case h1{
  margin:26px 0 0;max-width:1015px;font-family:var(--serif);font-weight:700;
  font-size:82px;line-height:86.1px;letter-spacing:-1.64px;color:var(--ink);
}
.case h2{
  margin:0;max-width:var(--measure);font-family:var(--serif);font-weight:700;
  font-size:62px;line-height:65.1px;letter-spacing:-1.24px;color:var(--ink);
}
.case .h2--q{font-size:52px;line-height:54.6px;letter-spacing:-1.04px}

.lede{
  margin:36px 0 0;max-width:716px;font-size:22px;line-height:34.1px;
  letter-spacing:-.26px;color:var(--ink-4);
}
.body{
  margin:34px 0 0;max-width:var(--measure);font-size:18px;line-height:29.7px;
  letter-spacing:-.44px;color:var(--ink-4);
}
.body--q{max-width:640px}
.body strong{color:var(--ink-2);font-weight:700}
.aside{
  margin:14px 0 0;font-family:var(--serif);font-style:italic;font-size:16px;
  line-height:26.4px;color:var(--ink-4);
}

/* ── stat strip ─────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px}
.stat{
  padding:33px;background:rgba(255,255,255,.92);border:1px solid rgba(27,130,241,.15);
  box-shadow:0 20px 60px rgba(31,45,71,.06);
}
.stat:first-child{border-radius:22px 0 0 22px}
.stat:last-child{border-radius:0 22px 22px 0}
.stat:not(:first-child){border-left:0}
.stat__k{
  display:block;font-weight:900;font-size:11px;line-height:18.1px;
  letter-spacing:2.04px;color:var(--brand);
}
.stat b{
  display:block;margin-top:18px;font-family:var(--serif);font-weight:700;
  font-size:25px;line-height:26.3px;color:var(--ink-2);
}

/* ── generic labelled rows ──────────────────────────────────────────── */
.rows{margin:44px 0 0;display:flex;flex-direction:column;gap:28px}
.rows > div{display:grid;grid-template-columns:138px minmax(0,1fr);gap:0}
.rows dt{font-weight:700;font-size:16px;line-height:26.4px;color:var(--ink-2)}
.rows dd{margin:0;font-size:16px;line-height:26.4px;color:var(--ink-4)}

.split{display:grid;grid-template-columns:minmax(0,482px) minmax(0,1fr);gap:103px;align-items:start}
.split--wide{grid-template-columns:minmax(0,509px) minmax(0,1fr);gap:73px}

/* ── wireframe blocks ───────────────────────────────────────────────── */
.wires{display:flex;flex-direction:column;gap:64px;margin-top:44px}
.wire{margin:0}
.wire__k{
  display:block;font-weight:900;font-size:12px;line-height:19.8px;
  letter-spacing:2.16px;color:var(--brand);
}
.wire h3{
  margin:8px 0 0;font-weight:700;font-size:19px;line-height:23.8px;
  letter-spacing:-.45px;color:var(--ink);
}
.wire p{margin:10px 0 0;font-size:15px;line-height:24.8px;letter-spacing:-.23px;color:var(--ink-4)}
.wire__shots{display:flex;gap:15px;margin-top:22px}
.wire__shots img{width:100%;height:auto;border-radius:14px}
.wire--solo img{width:100%;height:auto;border-radius:18px}
/* small wireframe card: the shot stays at its Figma size (158px) and the copy
   sits beside it, instead of the shot blowing up to fill the column */
.wire--card{display:flex;gap:26px;align-items:flex-start}
.wire--card > img{flex:none;width:158px;height:auto;border-radius:10px}
.wire--card > div{max-width:406px}

/* ── footer ─────────────────────────────────────────────────────────── */
.casefoot{
  width:min(100% - 64px,var(--col));margin:130px auto 0;padding:34px 0 56px;
  border-top:1px solid rgba(18,25,36,.09);display:flex;justify-content:space-between;
  font-family:Cousine,ui-monospace,monospace;font-weight:700;font-size:12px;
  letter-spacing:.6px;color:#a0acbb;
}
.casefoot a{color:var(--brand);text-decoration:none}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1240px){
  .side{
    position:static;width:auto;flex-direction:row;align-items:center;gap:18px;
    padding:16px 24px;border-right:0;border-bottom:1px solid rgba(18,25,36,.07);
    overflow-x:auto;
  }
  .side__nav{flex-direction:row;gap:18px;margin:0;white-space:nowrap}
  .side__back{margin:0}
  .shell{margin-left:0}
  .split,.split--wide{grid-template-columns:1fr;gap:48px}
  .case h1{font-size:56px;line-height:1.05;letter-spacing:-1px}
  .case h2,.case .h2--q{font-size:40px;line-height:1.08;letter-spacing:-.8px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-radius:0!important;border-left:1px solid rgba(27,130,241,.15)!important}
}
@media (max-width:760px){
  .case h1{font-size:38px}
  .case h2,.case .h2--q{font-size:30px}
  .lede{font-size:19px;line-height:30px}
  .stats{grid-template-columns:1fr}
  .rows > div{grid-template-columns:1fr;gap:4px}
  .casefoot{flex-direction:column;gap:10px}
}