/* Case-study pages. Layers on top of main.css. */

.case-hero { padding-block:150px 40px; position:relative; }
.case-hero::before {
  content:""; position:absolute; inset:0 0 auto 0; height:420px; z-index:-1;
  background:radial-gradient(70% 100% at 20% 0%, color-mix(in srgb,var(--accent) 12%, transparent), transparent 70%);
}
.case-back { font-family:var(--font-mono); font-size:.82rem; color:var(--muted); display:inline-flex; gap:8px; transition:color .2s; }
.case-back:hover { color:var(--accent); }
.case-hero__idx { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:26px; display:block; }
.case-hero h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem,7vw,5rem); letter-spacing:-.03em; line-height:.98; margin:14px 0 16px; }
.case-hero__tag { font-size:clamp(1.05rem,2vw,1.35rem); color:var(--muted); max-width:44ch; }
.case-hero__meta { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; align-items:center; }

.case-figure { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#0d1117; margin:34px 0 6px; position:relative; }
.case-figure img { width:100%; height:auto; display:block; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.case-figure:hover img { transform:scale(1.03); }
.case-figure figcaption { font-family:var(--font-mono); font-size:.76rem; color:var(--faint); padding:12px 18px; border-top:1px solid var(--line); background:var(--panel); }
.case-figure.inline { margin:8px 0 20px; }
.case-figure.trim img { aspect-ratio:1914/1017; object-fit:cover; object-position:50% 0%; height:auto; }
/* Device chrome system: real screenshots get a frame; designed graphics stay full-bleed. */
.frame { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--panel); box-shadow:0 16px 46px rgba(0,0,0,.4); margin:34px 0 6px; }
.frame__bar { display:flex; align-items:center; gap:14px; padding:11px 15px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.frame__dots { display:flex; gap:7px; flex:0 0 auto; }
.frame__dots i { width:11px; height:11px; border-radius:50%; background:var(--line); display:block; }
.frame__url { flex:1; text-align:center; font-family:var(--font-mono); font-size:.74rem; color:var(--faint); background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:5px 12px; max-width:62%; margin:0 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame__view { display:block; background:#0d1117; overflow:hidden; }
.frame__view img { width:100%; height:auto; display:block; }
.frame__cap { font-family:var(--font-mono); font-size:.76rem; color:var(--faint); padding:12px 16px; border-top:1px solid var(--line); }

.phone-frame { max-width:288px; margin:36px auto 6px; border:9px solid #191f28; border-radius:38px; overflow:hidden; background:#191f28; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.phone-frame__view { overflow:hidden; background:#0a0a0c; }
.phone-frame__view img { width:100%; height:auto; display:block; }
.phone-frame__view.crop { aspect-ratio:43/50; }
.phone-frame__view.crop img { height:100%; object-fit:cover; object-position:top center; }
.phone-cap { text-align:center; font-family:var(--font-mono); font-size:.76rem; color:var(--faint); margin:14px auto 0; max-width:340px; }
.phone-row { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin:30px 0 6px; }
.phone-row .phone-frame { margin:0; max-width:238px; }
.figure-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 20px; }
.figure-row .case-figure { margin:0; }
@media (max-width:640px){ .figure-row { grid-template-columns:1fr; } }

.case-body { display:grid; grid-template-columns:1fr 320px; gap:60px; padding-bottom:90px; align-items:start; }
.case-main > section { margin-bottom:44px; }
.case-main h2 { font-family:var(--font-display); font-weight:700; font-size:1.6rem; letter-spacing:-.01em; margin-bottom:14px; }
.case-main h2 .n { font-family:var(--font-mono); font-size:.9rem; color:var(--accent); margin-right:12px; font-weight:500; }
.case-main p { color:var(--muted); margin-bottom:14px; }
.case-main .case-sub { font-family:var(--font-display); font-size:1.16rem; font-weight:700; color:var(--ink); margin:28px 0 10px; letter-spacing:-.01em; display:flex; align-items:center; gap:11px; }
.case-main .case-sub::before { content:""; width:16px; height:2px; background:var(--accent); flex:0 0 auto; }
.case-main p b, .case-main li b { color:var(--ink); font-weight:600; }
.case-main ul { list-style:none; display:grid; gap:10px; margin:6px 0 14px; }
.case-main ul li { position:relative; padding-left:20px; color:var(--muted); }
.case-main ul li::before { content:"▹"; position:absolute; left:0; color:var(--accent); }

.callout {
  border:1px solid color-mix(in srgb,var(--accent) 40%, var(--line)); border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 7%, var(--panel)); padding:22px 24px; margin:6px 0 14px;
}
.callout h3 { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.callout p { color:var(--ink); margin:0; font-size:.98rem; }

.case-side { position:sticky; top:96px; display:grid; gap:18px; }
.factbox { border:1px solid var(--line); border-radius:var(--r); background:var(--panel); padding:22px; }
.factbox h3 { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:14px; }
.factbox .speclist li { font-size:.9rem; }
.factbox .chips { margin-top:4px; }
.side-cta { display:grid; gap:10px; }

.prevnext { border-top:1px solid var(--line); padding-block:34px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.prevnext a { font-family:var(--font-mono); font-size:.9rem; color:var(--muted); transition:color .2s; }
.prevnext a:hover { color:var(--accent); }
.prevnext .label { display:block; font-size:.7rem; color:var(--faint); letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }

@media (max-width:860px){
  .case-body { grid-template-columns:1fr; gap:34px; }
  .case-side { position:static; }
}