/* Selected work: one full-colour panel per product, the text on the left and a real device on a staged scene on the right. */
.work { padding-top: clamp(72px, 9vw, 128px); } /* space after the first screen */
.panels { display: grid; gap: 10px; margin-top: 8px; padding: 0 10px; } /* panels separated by thin film gutters */
.panel { /* one product in its colour world */
  --chip-fill: var(--world-chip); /* stack chips tinted for this world */
  position: relative; overflow: hidden; display: grid; grid-template-columns: 5fr 6fr; align-items: center; gap: 24px; /* text left, stage right */
  min-height: 740px; padding: 64px clamp(28px, 5vw, 80px); border-radius: var(--radius); /* tall panel with generous margins */
  background: var(--world-background); color: var(--world-on-color); /* world colours */
}
.panel::before, .panel::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--sprocket-holes) repeat-x; opacity: 0.45; } /* film holes along the top and bottom edges */
.panel::before { top: 14px; } /* top row */
.panel::after { bottom: 14px; } /* bottom row */
.panel-copy { position: relative; z-index: 2; } /* text stays above the props */
.panel-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font: 500 13px var(--mono); letter-spacing: 0.05em; } /* index and status */
.panel-title { font: 800 clamp(56px, 7.2vw, 118px)/0.88 var(--display); letter-spacing: -0.045em; } /* product name, huge */
.panel-title-sub { display: inline-block; font-size: 0.36em; letter-spacing: -0.02em; white-space: nowrap; } /* the book series in smaller type beside the name, so the long title stays on a line or two */
.panel-line { max-width: 540px; margin: 22px 0 28px; font: 500 clamp(19px, 1.65vw, 24px)/1.34 var(--body); letter-spacing: -0.01em; } /* what it is and who it is for */
.panel-facts { display: grid; grid-template-columns: 104px 1fr; gap: 14px 16px; max-width: 540px; margin-bottom: 30px; font-size: 16px; line-height: 1.42; } /* role, stack, number */
.panel-facts dt { padding-top: 3px; font: 500 12px var(--mono); letter-spacing: 0.04em; opacity: 0.72; } /* fact label */
.panel-number { display: flex; align-items: baseline; gap: 10px; } /* the one real number */
.panel-number b { font: 700 32px/1 var(--display); letter-spacing: -0.02em; } /* the figure itself */
.panel-actions { align-items: center; gap: 18px; } /* main link and the case study */
.stage { position: relative; height: 660px; } /* the scene where the device stands */
.stage .phone { --phone-width: 310px; position: absolute; left: 50%; top: 50%; z-index: 2; margin: calc(var(--phone-width) * -1.05) 0 0 calc(var(--phone-width) / -2); } /* phone centred in the scene */
.stage .laptop { --laptop-width: min(600px, 44vw); position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%) rotate(-5deg); } /* laptop centred and leaning */
.stage .prop { z-index: 1; } /* props behind the device */
.stage .prop-front { z-index: 3; } /* a prop that sits in front of the device */
@media (min-width: 1000px) and (max-width: 1180px) { .panel-facts { max-width: 400px; } } /* on a small laptop the facts stop left of the phone scene's Before photo, so no chip (Node.js) is covered */