/* Shared case opening: the artwork keeps its original proportions at every width. */
.ui-pro-hero { padding:156px 0 64px; }
.ui-case-intro {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  grid-template-areas:"heading artwork" "details artwork";
  column-gap:clamp(40px,6vw,96px);
  row-gap:40px;
  align-items:center;
}
.ui-case-heading { grid-area:heading; align-self:end; min-width:0; }
.ui-case-edition {
  display:flex; justify-content:space-between; gap:16px;
  padding-bottom:18px; margin-bottom:44px; border-bottom:1px solid var(--line);
  color:#858b93; font-size:10px; letter-spacing:.16em; font-weight:500;
  font-variant-numeric:tabular-nums;
}
.ui-case-heading > .eyebrow { display:flex; align-items:center; gap:10px; font-size:10px; letter-spacing:.12em; line-height:1.6; }
.ui-case-heading > .eyebrow::before { content:""; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--case-accent); }
.ui-case-heading .h1 { margin:20px 0 0; font-size:clamp(40px,4.5vw,68px); line-height:1.14; letter-spacing:-.045em; font-weight:600; text-wrap:balance; }
.ui-case-heading .lead { margin:24px 0 0; color:#747b84; font-size:16px; line-height:1.9; max-width:28em; }
.ui-case-details { grid-area:details; align-self:start; min-width:0; }
.ui-case-facts { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0; padding:26px 0; border-top:1px solid var(--line); }
.ui-case-facts dt { font-size:10px; letter-spacing:.06em; color:#858b93; line-height:1.5; }
.ui-case-facts dd { margin:12px 0 0; font-size:12px; line-height:1.65; color:#343a42; }
.ui-case-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:12px; }
.ui-case-demo { display:inline-flex; gap:28px; align-items:center; justify-content:space-between; padding:8px 8px 8px 22px; min-height:54px; border-radius:999px; background:var(--ink); color:#fff; font-size:13px; font-weight:550; transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.ui-case-demo > span:last-child { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.24); border-radius:50%; font-size:20px; }
.ui-case-demo:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,25,35,.14); }
.ui-case-read { display:inline-flex; align-items:center; gap:14px; min-height:44px; font-size:12px; color:#6b737d; }
.ui-case-read:hover { color:var(--ink); }
.ui-case-artwork { grid-area:artwork; min-width:0; margin:0; }
.ui-case-artwork-frame { padding:10px; border:1px solid var(--line); border-radius:24px; background:#fafafa; }
.ui-case-artwork-frame > img { display:block; width:100%; height:auto; object-fit:contain; border-radius:15px; }
.ui-case-artwork figcaption { display:flex; justify-content:space-between; gap:16px; margin-top:18px; padding:0 2px; color:#858b93; font-size:9px; line-height:1.6; letter-spacing:.09em; }
.ui-case-artwork figcaption > span:last-child { text-align:right; letter-spacing:.03em; }
@media (max-width:1080px) and (min-width:761px) {
  .ui-case-intro { column-gap:32px; row-gap:28px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .ui-case-edition { margin-bottom:30px; }
  .ui-case-heading .h1 { font-size:40px; }
  .ui-case-heading .lead { font-size:14px; margin-top:18px; }
  .ui-case-facts { grid-template-columns:1fr; gap:14px; padding:20px 0; }
  .ui-case-facts dd { margin-top:5px; }
  .ui-case-actions { gap:16px; }
}
@media (max-width:760px) {
  .ui-pro-hero { padding:116px 0 40px; }
  .ui-case-intro { grid-template-columns:minmax(0,1fr); grid-template-areas:"heading" "artwork" "details"; gap:28px; }
  .ui-case-edition { margin-bottom:28px; padding-bottom:14px; }
  .ui-case-heading .h1 { font-size:clamp(36px,9vw,54px); margin-top:16px; }
  .ui-case-heading .lead { font-size:14px; margin-top:14px; }
  .ui-case-artwork-frame { padding:6px; border-radius:18px; }
  .ui-case-artwork-frame > img { border-radius:12px; }
  .ui-case-artwork figcaption { margin-top:12px; font-size:8px; }
  .ui-case-facts { padding:20px 0; gap:16px; }
  .ui-case-actions { margin-top:2px; gap:24px; }
}
.ui-demo-notice { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; text-align: center; }