/* Case-study pages: a colour hero with the real device, then a facts column beside short sections (what it is, what I built, how it works, numbers, pictures). */
.case-hero { --chip-fill: var(--world-chip); overflow: hidden; border-radius: 0 0 var(--radius) var(--radius); background: var(--world-background); color: var(--world-on-color); } /* the product's colour world */
.case-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; } /* back link and email */
.case-bar a { font: 600 15px var(--body); text-decoration: none; } /* top links */
.link-back::before { content: "←"; margin-right: 8px; } /* arrow back to the home page */
.case-mail { padding: 10px 18px; border: 1.5px solid currentColor; border-radius: 99px; } /* email pill */
.case-hero-inner { display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: 40px; min-height: 540px; padding: 12px 0 40px; } /* words left, device right */
.case-hero h1 { font: 800 clamp(52px, 7vw, 108px)/0.9 var(--display); letter-spacing: -0.045em; } /* product name */
.case-hero .panel-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font: 500 13px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } /* label and status */
.byline { display: flex; align-items: center; gap: 16px; margin-top: 18px; font: 500 16px/1.4 var(--body); } /* who built it, under the name */
.byline span { max-width: 31em; } /* wraps into two even lines */
.byline-face { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255 255 255 / 0.7); } /* his round face crop */
.case-hero .panel-line { max-width: 600px; margin: 22px 0 28px; font: 500 clamp(18px, 1.6vw, 23px)/1.38 var(--body); } /* the one line */
.case-hero-stage { position: relative; height: 540px; } /* where the device stands */
.case-hero-stage .phone { --phone-width: 250px; position: absolute; left: 50%; top: 50%; margin: calc(var(--phone-width) * -1.05) 0 0 calc(var(--phone-width) / -2); } /* centred phone */
.case-hero-stage .laptop { --laptop-width: min(520px, 40vw); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); } /* centred laptop */
.case-hero-stage .matrix-card, .case-hero-stage .figure-card { z-index: 2; } /* cards in front */
.figure-card { width: var(--prop-width, 300px); padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 24px 40px -14px color-mix(in srgb, var(--world-deep) 80%, transparent); } /* a research figure on paper */
.case-body { display: grid; grid-template-columns: 290px 1fr; gap: clamp(32px, 6vw, 88px); padding: 72px 0 32px; } /* facts column and sections */
.case-aside { position: sticky; top: 28px; align-self: start; display: grid; gap: 22px; } /* the facts stay in view */
.case-aside dt { margin-bottom: 6px; color: var(--paper-faint); font: 500 12px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } /* fact label */
.case-aside dd { margin: 0; font-size: 16px; } /* fact value */
.case-aside dd a { display: block; margin-top: 4px; font-weight: 600; text-underline-offset: 4px; } /* project links */
.case-section { max-width: 700px; padding-bottom: 44px; } /* one short section */
.case-section h2 { margin-bottom: 14px; font: 700 clamp(26px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; } /* section title */
.case-section p { color: var(--paper-soft); font-size: 18px; line-height: 1.6; } /* section text */
.case-section p + p { margin-top: 14px; } /* paragraph spacing */
.case-steps { display: grid; gap: 14px; counter-reset: step; } /* numbered steps */
.case-steps li { position: relative; padding-left: 46px; color: var(--paper-soft); font-size: 17.5px; counter-increment: step; } /* one step */
.case-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--world-background); color: var(--world-on-color); font: 600 13px var(--mono); } /* step number in the product colour */
.case-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 44px; } /* stat tiles */
.case-number { padding: 18px 18px 16px; border: 1px solid var(--ink-line); border-radius: 14px; background: var(--ink-raised); } /* one stat */
.case-number b { display: block; margin-bottom: 6px; font: 700 34px/1 var(--display); letter-spacing: -0.02em; } /* the number */
.case-number span { color: var(--paper-soft); font-size: 14.5px; } /* what it counts */
.case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 44px; } /* real pictures */
.case-gallery.wide { grid-template-columns: 1fr; } /* one wide picture per row */
.case-gallery img { width: 100%; border-radius: 12px; background: #fff; } /* a real screen or figure */
.case-gallery.photo-prints img { aspect-ratio: 3 / 4; object-fit: cover; } /* before and after photos share one shape, so the captions line up */
.case-gallery figcaption { margin-top: 8px; color: var(--paper-faint); font: 500 12.5px var(--mono); } /* caption */
.case-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 26px 0 40px; border-top: 1px solid var(--ink-line); font: 600 16px var(--body); } /* next project and email */
.case-footer a { text-underline-offset: 4px; } /* footer links */
@media (max-width: 860px) { /* tablets and phones */
  .case-hero-inner, .case-body { grid-template-columns: 1fr; } /* one column */
  .case-hero-inner { min-height: 0; gap: 8px; } /* tighter hero */
  .case-hero-stage { height: 420px; } /* smaller scene */
  .case-hero-stage .phone { --phone-width: 196px; } /* smaller phone */
  .case-hero-stage .laptop { --laptop-width: min(340px, 88vw); } /* smaller laptop */
  .world-gpt2 .case-hero-stage .laptop { --laptop-width: min(300px, 76vw); } /* the wider base and the tilt stay inside a 390 px screen */
  .case-hero-stage .prop { display: none; } /* props only on larger screens */
  .case-hero-stage .figure-card { display: block; left: 50%; top: 50%; width: 84vw; } /* the result figure stays, centred */
  .case-hero-stage .figure-card:first-child { display: none; } /* one figure is enough on a phone */
  .case-hero-stage:not([data-playback]) { height: 250px; } /* figure scene is shorter than a device scene */
  .case-aside { position: static; grid-template-columns: 1fr 1fr; } /* facts in two columns */
  .case-body { padding-top: 48px; } /* less space */
  .case-section p { font-size: 17px; } /* smaller text */
}