/* Product mockups, round 5 (round 4's sheet, plus a 2 x 2 grid for Erre F's middle frames). Layered on the site's own stylesheet. */

@font-face { font-family: 'Archivo'; font-weight: 800; src: url('img/fonts/Archivo-800.ttf') format('truetype'); }

.pm-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px var(--gutter);
  background: var(--ink); color: var(--footer-body); font: 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.pm-switch b { color: var(--accent-on-ink); font-weight: 400; }
.pm-switch a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.pm-switch a[aria-current] { color: var(--paper); border-color: var(--paper); }
.pm-switch .pm-note { margin-left: auto; }
.pm-tk { text-decoration: underline dotted var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.pm-links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; }

/* Each app's name in its own type. */
.wm { display: inline-flex; align-items: center; gap: .28em; line-height: 1; color: var(--ink); }
.wm svg { width: .62em; height: .62em; flex: none; }
.wm-itero { font: 800 46px/1 'Archivo', var(--sans); letter-spacing: .06em; color: var(--app, #8a3f39); }
.wm-erre { font: 400 58px/1 var(--serif); color: #516040; }
.wm-erre svg { width: .5em; height: .42em; color: #516040; }
.wm-nodeno { font: 400 58px/1 var(--serif); }
.wm-nodeno svg { width: .42em; height: .42em; }
.wm-s.wm-itero { font-size: 36px; } .wm-s.wm-erre, .wm-s.wm-nodeno { font-size: 46px; }
.wm-l.wm-itero { font-size: 88px; color: var(--paper); } .wm-l.wm-erre, .wm-l.wm-nodeno { font-size: 104px; color: var(--paper); }
.wm-l.wm-erre svg { color: var(--paper); }

/* ------------------------------------------------------------ 1 plates ---- */
.pl { padding: 0 0 72px; border-top: 1px solid var(--rule); }
.pl-plate { margin: 0; }
.pl-plate img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.pl-cap { display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: baseline; padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule); font: 12px/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); }
.pl-caption { font: italic 18px/1.4 var(--serif); letter-spacing: 0; color: var(--ink); }
.pl-body { display: grid; grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: 56px; padding: 40px var(--gutter) 0; }
.pl-sub { font: italic 26px/1.2 var(--serif); margin: 14px 0 8px; }
.pl-meta { font: 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.pl-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.pl-notes p { font: 15px/1.6 var(--sans); margin: 10px 0 0; color: var(--ink); }
.pl-notes > div { border-top: 2px solid var(--app, var(--ink)); padding-top: 14px; }

/* ------------------------------------------------- round 3: the options ---- */
.op-head { display: flex; justify-content: space-between; align-items: baseline; padding: 22px var(--gutter) 14px; }
.op-note { font: italic 17px/1.3 var(--serif); color: var(--muted); }
.op-grid { display: grid; grid-template-columns: 1fr; gap: 26px; padding: 0 var(--gutter); }
.op { margin: 0; position: relative; }
.op img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.op-tag { position: absolute; left: 18px; bottom: 52px; z-index: 2; background: var(--ink); color: var(--paper);
  font: 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 9px 12px; }
.op figcaption { font: italic 17px/1.4 var(--serif); padding: 10px 0 0; color: var(--ink); }
.pl-plate a { display: block; }

/* ------------------------------------- round 3: a project's own page, film ---- */
.dk-main { background: #14130f; color: #f1ede5; }
.dk-main .label { color: #c96a60; }
.cs-hero { position: relative; aspect-ratio: 16 / 7.5; overflow: hidden; background: #0d0c0a; }
.cs-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,12,10,.85) 0%, rgba(13,12,10,.4) 38%, rgba(13,12,10,0) 62%),
  linear-gradient(0deg, rgba(20,19,15,1) 0%, rgba(20,19,15,0) 22%); }
.cs-hero-over { position: absolute; left: var(--gutter); top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.cs-back { font: 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #b4ac9e; margin-bottom: 18px; }
.cs-hero-over .folio { color: #b4ac9e; }
.wm-xl.wm-itero { font-size: 132px; color: #f1ede5; }
.cs-sub { font: italic 34px/1.15 var(--serif); margin: 0; }
.cs-facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 28px var(--gutter) 34px; border-bottom: 1px solid #3d3831; }
.cs-facts p { font: 15px/1.5 var(--sans); margin: 8px 0 0; color: #f1ede5; }
.cs-say { padding: 90px var(--gutter); border-bottom: 1px solid #3d3831; }
.cs-say p { font: 54px/1.12 var(--serif); margin: 0; max-width: 1180px; }
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 90px var(--gutter); border-bottom: 1px solid #3d3831; }
.cs-row-flip .cs-text { order: 2; }
.cs-text h2, .cs-band-head h2 { font: 400 52px/1.05 var(--serif); margin: 18px 0 22px; }
.cs-text h2 em, .cs-band-head h2 em { color: #c96a60; }
.cs-text p, .cs-call p, .cs-end p { font: 17px/1.65 var(--sans); color: #b4ac9e; margin: 0; max-width: 560px; }
.cs-media img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.cs-phone { display: flex; flex-direction: column; align-items: center; }
.cs-phone img { width: 46%; border-radius: 34px; border: 9px solid #0d0c0a; }
.cs-cap { display: block; font: italic 17px/1.4 var(--serif); color: #b4ac9e; margin-top: 18px; }
.cs-calls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; padding: 90px var(--gutter); border-bottom: 1px solid #3d3831; }
.cs-calls > .label { grid-column: 1 / -1; }
.cs-call { border-top: 2px solid #8a3f39; padding-top: 18px; }
.cs-call h3 { font: 400 30px/1.15 var(--serif); margin: 0 0 14px; color: #f1ede5; }
.cs-band { padding: 90px 0; border-bottom: 1px solid #3d3831; }
.cs-band-head { padding: 0 var(--gutter) 34px; }
.cs-band > .cs-cap { padding: 0 var(--gutter); }
.cs-sheets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; padding: 0 var(--gutter); }
.cs-sheets figure { margin: 0; }
.cs-sheets img { width: 100%; display: block; border-radius: 18px; border: 6px solid #0d0c0a; }
.cs-sheets figcaption { font: 12px/1 var(--mono); letter-spacing: .16em; color: #b4ac9e; margin-top: 12px; text-align: center; }
.cs-strip { overflow-x: auto; padding: 0 var(--gutter); }
.cs-strip img { height: 560px; width: auto; display: block; border-radius: 6px; }
.cs-reels { display: flex; gap: 28px; padding: 0 var(--gutter); }
.cs-reels video { width: 300px; aspect-ratio: 9 / 16; border-radius: 14px; background: #000; }
.cs-end { display: flex; justify-content: space-between; align-items: end; gap: 40px; padding: 90px var(--gutter); }
.cs-next { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.cs-next .wm-erre { color: #a5b38f; } .cs-next .wm-erre svg { color: #a5b38f; }

/* round 4: the tag moves into the caption, since these plates have type in every corner */
.op figcaption .op-tag { position: static; display: inline-block; margin-right: 14px; vertical-align: 3px; padding: 7px 10px; }

/* ------------------------------------------- round 4: Erre F's shot list ---- */
.sl { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: 20px 48px; padding: 26px 0 8px; border-top: 1px solid var(--rule); }
.sl-head h3 { font: 400 34px/1.1 var(--serif); margin: 12px 0 0; }
.sl-head h3 em { color: var(--app); }
.sl-shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.sl-shots li { border-top: 2px solid var(--app); padding-top: 12px; }
.sl-n { display: block; font: 800 34px/1 'Archivo', var(--sans); color: var(--app); margin-bottom: 10px; }
.sl-todo { font: 15px/1.4 var(--sans); margin: 8px 0 6px; padding-left: 26px; position: relative; }
.sl-todo::before { content: ''; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border: 2px solid var(--ink); }
.sl-shots p:not(.sl-todo) { font: italic 17px/1.4 var(--serif); margin: 0; color: var(--ink); }
.sl-tips { grid-column: 2; margin: 6px 0 0; padding: 0 0 0 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.sl-tips li { font: 14px/1.55 var(--sans); color: var(--muted); }

/* ---------------------------------------- round 5: the middles, the aside ---- */
.op-sub { padding: 18px 0 0; border-top: 1px solid var(--rule); }
.op-sub h3 { font: 400 34px/1.1 var(--serif); margin: 12px 0 0; }
.op-sub h3 em { color: var(--app); }
.op-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.op-aside { font: italic 18px/1.45 var(--serif); color: var(--muted); max-width: 820px; margin: 0; }

/* ------------------------- round 5: Nodeno's own page, in its night palette ---- */
/* Nodeno's night tokens (Palette.swift): paper #17150F, ink #F1EDE5, rule #332F27,
   muted #9E9587, accent #C4685E, sun #D9A33C. */
.dk-main.nd { background: #17150f; color: #f1ede5; }
.nd .label { color: #c4685e; }
.nd .cs-text h2 em, .nd .cs-band-head h2 em { color: #d9a33c; }
.nd .cs-call { border-top-color: #d9a33c; }
.nd .cs-facts, .nd .cs-say, .nd .cs-row, .nd .cs-calls, .nd .cs-band { border-color: #332f27; }
.nd .cs-text p, .nd .cs-call p, .nd .cs-end p, .nd .cs-cap { color: #9e9587; }
/* A project page's opening: its film on the right three quarters, the name in a panel of the
   same height. Each page sets --pj-rule and --pj-muted. */
.nd { --pj-rule: #332f27; --pj-muted: #9e9587; }
.pj-open { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid var(--pj-rule); }
.pj-film { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #000; }
.pj-name { display: flex; flex-direction: column; justify-content: space-between; padding: 34px 36px 40px; border-right: 1px solid var(--pj-rule); }
.pj-name-top { display: flex; flex-direction: column; gap: 14px; }
.pj-name .folio { color: var(--pj-muted); }
.pj-icon { display: block; width: 92px; height: 92px; border-radius: 21px; margin-bottom: 28px; }
.pj-word { font: 400 84px/0.95 var(--serif); letter-spacing: -0.01em; margin: 0; color: inherit; }
.pj-sub { font: italic 25px/1.2 var(--serif); margin: 14px 0 0; color: inherit; }
.cs-wide { padding: 0 var(--gutter); }
.cs-wide img { display: block; width: 100%; border-radius: 6px; }
.cs-band-text { font: 17px/1.65 var(--sans); color: #9e9587; max-width: 640px; margin: 0; }
.cs-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 0 var(--gutter); }
.cs-trio figure { margin: 0; }
.cs-trio img { display: block; width: 100%; border-radius: 14px; border: 6px solid #0d0c0a; }
.cs-trio figcaption { font: 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #9e9587; margin-top: 12px; }
.cs-dual { display: flex; gap: 22px; justify-content: center; align-items: flex-start; }
.cs-dual img { width: 40%; border-radius: 30px; border: 8px solid #0d0c0a; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.cs-dual img + img { margin-top: 60px; }
.cs-film { padding: 0 var(--gutter); }
.cs-film video { display: block; width: 100%; max-width: 1100px; aspect-ratio: 3 / 2; border-radius: 10px; background: #000; }
.nd-back { font: 400 46px/1 var(--serif); color: #f1ede5; }

/* ------------------------------- round 5: Erre's own page, a dark green-cast palette ---- */
.dk-main.er { background: #141610; color: #faf8f3; --pj-rule: #2b2f24; --pj-muted: #a19a8c; }
.er .label { color: #a5b38f; }
.er .cs-text h2 em, .er .cs-band-head h2 em { color: #c3cfae; }
.er .cs-call { border-top-color: #8fa274; }
.er .cs-facts, .er .cs-say, .er .cs-row, .er .cs-calls, .er .cs-band { border-color: #2b2f24; }
.er .cs-text p, .er .cs-call p, .er .cs-end p, .er .cs-cap, .er .cs-band-text, .er .cs-trio figcaption { color: #a19a8c; }
.er .pm-tk, .nd .pm-tk { text-decoration-color: #c4685e; }
.cs-pair { grid-template-columns: 1fr 1fr; }
.dk-main .cs-next .wm-nodeno { color: #f1ede5; }
.dk-main .cs-next .wm-itero { color: #c96a60; }
/* the store link under where it stands, in each page's ink, turning its accent on hover */
.cs-end .link-rule { display: inline-block; margin-top: 26px; color: inherit; border-color: currentColor; }
.cs-end .link-rule:hover { color: #c96a60; }
.nd .cs-end .link-rule:hover { color: #d9a33c; }
.er .cs-end .link-rule:hover { color: #a5b38f; }
.wm-itero .wm-ticket { width: .5em; height: .76em; margin-right: .08em; }
/* Itero on the shared opening (20 Oct, to compare): round 3's rule and muted tones, and its name in Archivo */
.it { --pj-rule: #3d3831; --pj-muted: #b4ac9e; }
.pj-word.pj-itero { font: 800 56px/1 'Archivo', var(--sans); letter-spacing: .06em; }
/* The case studies' devices with a light outline outside their dark bezels, so they read on the dark pages
   (Kyle kept it on Itero's, then asked for Noden's and Erre's too, 21 Oct): every page's phone in 01, Itero's
   sheets and open Duo, Noden's open Duo days and its paper-and-ink pair, and Erre's Duo and iPad pairs. */
.it .cs-phone img, .nd .cs-phone img, .er .cs-phone img,
.it .cs-row-flip .cs-media img, .nd .cs-dual img { box-shadow: 0 0 0 2px #e9e4da, 0 30px 60px rgba(0,0,0,.45); }
.it .cs-sheets img, .nd .cs-trio img, .er .cs-trio img { box-shadow: 0 0 0 2px #e9e4da; }

/* ------------------- the chosen index: each plate's notes on its app's color ---- */
.pl-tint { padding-bottom: 0; border-top: 0; }
.pl-panel { background: var(--app); color: var(--on-app); padding-bottom: 64px; }
.pl-plain { padding-bottom: 72px; }
/* Noden's caption row, between its plate and its notes: an ochre rule above and below (Kyle, 21 Oct) */
.pl-cap-ruled { border-top: 3px solid var(--app); border-bottom: 3px solid var(--app); }
.pl-panel .pl-caption, .pl-panel .pl-sub, .pl-panel .pl-notes p { color: var(--on-app); }
.pl-panel .label, .pl-panel .folio, .pl-panel .pl-meta, .pl-panel .pl-credit { color: var(--on-app-muted); }
.pl-panel .pl-notes > div { border-top-color: color-mix(in srgb, var(--on-app) 60%, transparent); }
.pl-panel .wm, .pl-panel .wm-itero, .pl-panel .wm-erre, .pl-panel .wm-erre svg { color: var(--on-app); }
.pl-panel .wm-nodeno svg * { fill: currentColor; }
.pl-panel .link-rule { color: var(--on-app); border-color: currentColor; }
.pl-panel .link-rule:hover { color: var(--on-app-muted); border-color: currentColor; }
.pl-panel .pm-tk { text-decoration-color: currentColor; }

@media (max-width: 900px) {
  .cs-pair { grid-template-columns: 1fr; }
  .pj-open { grid-template-columns: 1fr; } .pj-name { border-right: 0; gap: 40px; }
  .cs-trio { grid-template-columns: 1fr; }
  .op-grid2 { grid-template-columns: 1fr; }
  .sl, .sl-tips { grid-template-columns: 1fr; } .sl-tips { grid-column: 1; }
  .sl-shots { grid-template-columns: 1fr 1fr; }
  .pl-cap { grid-template-columns: 1fr; gap: 4px; }
  .pl-body { grid-template-columns: 1fr; gap: 28px; }
  .pl-notes, .cs-calls, .cs-facts { grid-template-columns: 1fr; }
  .cs-row { grid-template-columns: 1fr; }
  .cs-row-flip .cs-text { order: 0; }
  .cs-hero { aspect-ratio: 4 / 5; }
  .wm-xl.wm-itero { font-size: 72px; }
  .cs-say p { font-size: 34px; }
  .cs-sheets { grid-template-columns: repeat(3, 1fr); }
  .cs-reels { overflow-x: auto; }
  .pm-switch .pm-note { display: none; }
}

/* Kyle (28 Oct): the index opens on the ink intro band, .intro-band in the site's own site.css. */

/* Kyle (28 Oct): "On the App Store" in each Status row links to the app, hovering to its color */
.cs-facts .cs-store { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .25s ease; }
.cs-facts .cs-store:hover { color: #c96a60; }
.nd .cs-facts .cs-store:hover { color: #d9a33c; }
.er .cs-facts .cs-store:hover { color: #a5b38f; }
/* Itero's longer problem heading (28 Oct) left "trip." alone on a line; pretty wrapping evens it out */
.it .cs-text h2 { text-wrap: pretty; }
/* Noden's 05 (Kyle, 29 Oct): the Home Screen widgets under the two phones, light and in Night mode */
.cs-widgets { grid-column: 1 / -1; order: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 44px; margin-top: 30px; }
.cs-wset { display: flex; gap: 18px; align-items: flex-start; }
/* one row of four: each pair is 3.103 heights wide plus its gap, and the pairs 44px apart */
.cs-wset img { display: block; height: min(200px, calc((100vw - 2 * var(--gutter) - 100px) / 6.21)); width: auto; }
.cs-widgets .cs-cap { flex-basis: 100%; text-align: center; margin-top: 4px; }
@media (max-width: 900px) {
  .cs-widgets { gap: 22px; margin-top: 10px; }
  .cs-wset { gap: 10px; width: 100%; }
  .cs-wset .cs-wm { width: calc((100% - 10px) * .679); height: auto; } .cs-wset .cs-ws { width: calc((100% - 10px) * .321); height: auto; }
  .cs-widgets .cs-cap { text-align: left; }
}
/* Erre's 04 (Kyle, 29 Oct): the closed Duo beside the open one, sized so the two stand the same height
   (0.687 and 1.421 wide for their height, each inside a 6px bezel) */
.cs-closed-open { grid-template-columns: 0.4904fr 1fr; }
@media (max-width: 900px) {
  .cs-closed-open { grid-template-columns: 1fr; }
  .cs-closed-open figure:first-child img { width: 62%; }
}

/* Kyle's phone pass on the Product page (30 Oct). (The intro band's smaller lede is in site.css, for
   Photography and Motion too.) The plate captions shrink, with the credit moved up across from the app's number, and each app's notes and
   subtitle shrink too, so the three stacked notes read less blocky. */
@media (max-width: 900px) {
  .pl-cap { grid-template-columns: auto 1fr; gap: 6px 16px; padding: 12px var(--gutter) 16px; }
  .pl-cap .folio { grid-row: 1; white-space: nowrap; }
  .pl-credit { grid-row: 1; grid-column: 2; justify-self: end; text-align: right; font-size: 10.5px; letter-spacing: .04em; line-height: 1.4; text-wrap: balance; }
  .pl-caption { grid-column: 1 / -1; font-size: 15.5px; line-height: 1.32; }
  .pl-body { gap: 22px; padding-top: 30px; }
  .pl-sub { font-size: 21px; margin: 10px 0 6px; }
  .pl-notes { gap: 24px; }
  .pl-notes > div { padding-top: 11px; }
  .pl-notes p { font-size: 13.5px; line-height: 1.55; margin-top: 7px; }
  .pl-panel { padding-bottom: 50px; }
  .pl-plain { padding-bottom: 56px; }
}
/* the phone plates are 2304 square */
.pl-plate picture { display: block; }
@media (max-width: 767px) {
  .pl-plate-m img { aspect-ratio: 1 / 1; }
  .pl-notes > div { border-top-width: 1px; }
  .pl-meta { text-wrap: balance; }
}

/* Kyle's phone pass on the case studies (30 Oct): a compact opening (the app's number across from Product,
   the name and its line beside the icon), the facts one to a line, and the type and spacing a step down
   from the desktop sizes all the way through. The say line stays as it was, at his word. On Itero's
   page, 05 swaps the listing strip for the Product page's square plate, with a caption to match. */
.cs-phone-cap { display: none; }
.cs-strip picture { display: block; }
/* The listing strips were squeezed sideways wherever they ran wider than the page (the site caps every img
   at its column's width, and the strip's height was fixed): now each scales down whole, at most 560 tall. */
.cs-strip img { height: auto; max-height: 560px; max-width: 100%; }
@media (max-width: 767px) {
  .pj-name { padding: 18px var(--gutter) 26px; gap: 22px; }
  .pj-name-top { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .pj-name .cs-back { margin-bottom: 0; }
  .pj-name-mark { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .pj-icon { grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 15px; margin: 0; }
  .pj-word { font-size: 46px; align-self: end; }
  .pj-word.pj-itero { font-size: 34px; }
  .pj-sub { font-size: 18px; margin-top: 6px; align-self: start; }
  .cs-facts { gap: 8px; padding: 20px var(--gutter) 22px; }
  .cs-facts > div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: baseline; }
  .cs-facts .label { font-size: 10px; }
  .cs-facts p { margin: 0; font-size: 14px; line-height: 1.45; }
  .cs-row, .cs-calls, .cs-end { padding-top: 56px; padding-bottom: 56px; }
  .cs-band { padding: 56px 0; }
  .cs-row { gap: 34px; }
  .cs-text h2, .cs-band-head h2 { font-size: 32px; line-height: 1.08; margin: 12px 0 14px; }
  .cs-band-head { padding-bottom: 22px; }
  .cs-text p, .cs-call p, .cs-end p, .cs-band-text { font-size: 14.5px; line-height: 1.6; }
  .cs-cap { font-size: 14.5px; margin-top: 12px; }
  .cs-calls { gap: 28px; }
  .cs-call { padding-top: 14px; }
  .cs-call h3 { font-size: 22px; margin-bottom: 10px; }
  .cs-sheets { gap: 12px; }
  .cs-sheets figcaption, .cs-trio figcaption { font-size: 10px; margin-top: 9px; }
  .cs-strip img { height: 420px; max-height: none; max-width: none; }   /* on a phone, a strip scrolls sideways */
  .cs-strip-m img { width: 100%; height: auto; max-width: 100%; border-radius: 6px; }
  .cs-reels { gap: 12px; overflow: visible; }
  .cs-reels video { width: calc((100% - 12px) / 2); }
  .cs-end { flex-direction: column; align-items: stretch; gap: 36px; }
  .cs-next { align-self: flex-end; }
  .cs-next .wm-s.wm-itero { font-size: 28px; }
  .cs-next .wm-s.wm-erre, .cs-next .wm-s.wm-nodeno { font-size: 36px; }
  .cs-phone-cap { display: inline; }
  .cs-wide-cap { display: none; }
}