.case-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}.case-nav a{font-size:13px;text-decoration:none;padding:10px 16px;border:1px solid var(--line);border-radius:100px}.case-nav a:hover{background:var(--fg);color:var(--inverse)}.case-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}.case-summary dt{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.case-summary dd{margin:8px 0 0;font-size:15px}.case-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:32px}.case-story p{margin:0}.case-story h3{font-size:16px;margin:0 0 12px}.screen-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}.screen-pair.mobile-pair{grid-template-columns:1fr 1fr;max-width:800px;margin:auto}.screen{margin:0;min-width:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.screen>a{display:block;max-height:700px;overflow:auto;background:white;border-radius:8px}.screen img{display:block;width:100%;height:auto}.screen.mobile>a{max-width:320px;margin:auto}.screen figcaption{font-size:12px;color:var(--muted);margin-top:16px;display:flex;justify-content:space-between;gap:8px}.screen-caption{font-size:13px;color:var(--muted);margin-top:16px}.case-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px}.case-heading>span{font-size:12px;color:var(--muted);white-space:nowrap}.case-story strong{font-weight:600}.case-end{display:flex;align-items:center;justify-content:space-between;gap:32px}.case-end p{max-width:600px}.case-hero .intro{max-width:800px}.case-hero h1{max-width:900px}.case-hero{padding-bottom:64px}.case-section{scroll-margin-top:120px}.case-section h2{max-width:900px}.case-kicker{font-size:13px;color:var(--muted)}@media(max-width:760px){.case-story,.screen-pair{grid-template-columns:1fr;gap:24px}.case-summary{grid-template-columns:1fr;gap:24px;margin-top:32px}.screen{padding:16px}.screen>a{max-height:560px}.case-heading{align-items:flex-start}.case-heading>span{display:none}.case-end{display:block}.screen-pair.mobile-pair{gap:8px}.mobile-pair .screen{padding:8px}.mobile-pair figcaption{font-size:11px}.case-story{gap:16px}}
.image-popup{width:100vw;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:32px;border:0;background:transparent;overflow:hidden;color:var(--fg)}.image-popup::backdrop{background:rgba(0,0,0,.78)}.image-popup[open]{display:flex;align-items:center;justify-content:center}.image-popup-panel{display:flex;flex-direction:column;max-height:100%;width:min(1280px,100%);min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px #0005}.image-popup-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}.image-popup-header span{font-size:13px}.image-popup-header button{font:inherit;white-space:nowrap;border:1px solid var(--line);border-radius:100px;min-height:44px;padding:8px 16px;background:var(--surface);color:var(--fg);cursor:pointer}.image-popup-body{overflow:auto;overscroll-behavior:contain;min-height:0;background:#fff}.image-popup-body img{display:block;max-width:100%;width:auto;height:auto;margin:auto}.screen>a{cursor:zoom-in}@media(max-width:760px){.image-popup{padding:8px}.image-popup-panel{border-radius:12px}.image-popup-header{padding:8px 12px}.image-popup-header span{font-size:12px}}

/* Static previews; inspect the complete design in the dialog. */
.screen>a{height:480px;max-height:none;overflow:hidden;position:relative}.screen>a::after{content:"";position:absolute;inset:auto 0 0;height:64px;background:linear-gradient(transparent,#ffffffd9);pointer-events:none}.screen.mobile>a{height:480px}.screen figcaption>a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;text-decoration:none;white-space:nowrap;color:var(--fg);font-size:12px;cursor:zoom-in}.screen figcaption{align-items:center}.screen figcaption>a:hover{background:var(--fg);color:var(--inverse)}@media(max-width:760px){.screen>a,.screen.mobile>a{height:360px}.screen-pair.mobile-pair{grid-template-columns:1fr}.mobile-pair .screen{padding:16px}.screen figcaption{flex-wrap:wrap}}