/* A row of big cards, one per part of a chapter, after Apple's "Get the highlights" (apple.com/iphone-duo). They move only
   when she taps an arrow or a dot, or swipes across them: no auto play (Phillip, 13 Oct: "it was annoying"). */
.cards { position:relative; padding:120px 0 72px; --side:max(64px, calc(50vw - 560px)); }
.cards .title { padding:0 var(--side); margin-bottom:36px; font:400 64px/1 Fraunces; letter-spacing:-.03em; font-variation-settings:"opsz" 144; }
.cards .track { position:relative; display:flex; gap:24px; height:min(74vh,680px); overflow-x:auto; scroll-snap-type:x mandatory;
                padding:0 var(--side); scrollbar-width:none; }
.cards .track::-webkit-scrollbar { display:none; }
.cd { position:relative; flex:none; width:min(1120px, calc(100vw - 128px)); height:100%; border-radius:32px; overflow:hidden;
      scroll-snap-align:center; background:var(--bg); }
.cd h3 { position:absolute; left:56px; top:52px; width:440px; font:400 52px/1.04 Fraunces; letter-spacing:-.025em; font-variation-settings:"opsz" 144; }
.cd p { position:absolute; left:56px; top:190px; width:360px; font:400 18px/1.5 Inter; color:var(--muted); }
.cph { position:absolute; left:58%; top:56px; width:330px; aspect-ratio:600/1300; border-radius:54px; padding:11px; background:#1b1b1b;
       box-shadow:0 40px 90px rgba(31,31,29,.22); }
.cph.two { left:38%; top:110px; transform:rotate(-4deg); } .cph.two + .cph { left:66%; transform:rotate(3deg); }
.cph img { width:100%; height:100%; border-radius:44px; object-fit:cover; object-position:top; display:block; }
.cards .ctl { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:28px; }
.cards .dots { display:flex; gap:10px; align-items:center; padding:20px; border-radius:999px; background:#ececec; }
.cards .dots button { width:9px; height:9px; border:0; padding:0; border-radius:999px; background:#9a9a9a; cursor:pointer; transition:width .4s var(--ease); }
.cards .dots button.on { width:36px; background:#333; }
.cards .ctl > button { width:50px; height:50px; border:0; border-radius:50%; background:#ececec; color:#333; cursor:pointer; font:400 24px/1 Inter; }
.cards .ctl > button:disabled { opacity:.35; cursor:default; }

/* On a chapter's strong colour (the colour-per-chapter page): white on glass. */
.cards.on-colour { color:#fff; --bg:rgba(255,255,255,.14); }
.cards.on-colour .cd p { color:rgba(255,255,255,.8); }
.cards.on-colour .dots, .cards.on-colour .ctl > button { background:rgba(255,255,255,.18); color:#fff; }
.cards.on-colour .dots button { background:rgba(255,255,255,.5); } .cards.on-colour .dots button.on { background:#fff; }

/* A phone held upright (and a tablet): one card fills the width with a little of the next showing, the words over its
   phone, the phone running off the card's bottom. Pages laid out 1200 wide never meet it. */
@media (max-aspect-ratio: 4/5) and (max-width: 900px) {
  .cards { padding:72px 0 48px; --side:6vw; }
  .cards .title { margin-bottom:24px; font-size:clamp(36px, 10vw, 64px); }
  .cards .track { gap:12px; height:min(76svh, 640px); }
  .cd { width:88vw; border-radius:24px; }
  .cd h3, .cd p { position:static; width:auto; margin:0 24px; }
  .cd h3 { padding-top:28px; font-size:clamp(28px, 7.6vw, 48px); }
  .cd p { margin-top:12px; font-size:15px; }
  .cph { left:50%; top:auto; bottom:-24%; width:62%; translate:-50% 0; padding:3.2%; border-radius:14% / 6.5%; }
  .cph img { border-radius:12% / 5.6%; }
}