/* TWIGIT: the parts Alight does not have (cover lockup, panels, logo lockups, rationale diagram, swatches, type specimens,
   material rows, kit grid, box tiles, photo mosaic). Every class tw-. Panels are cs-box (the board's own colours, 8 corners); a panel whose
   pictures have a white ground (.white) keeps a white ground. Photos are 2 px corners. The brand's own colours and its two
   families (Fredoka, Nunito) appear only where they are the logo, the swatches and the specimens.
   Board figures are 1166 wide in a 1020 column, so everything here is built at 1020 and scales: stages are percent-placed
   (--x --y --w on a .tw-abs child) and their text is sized in container units. */
/* this case study's own colours, from its Paper board (his ask, 16 Oct: "just use the color in the paper design"):
   panels white with a red edge, red tabs with cream words, red numbers, pink research rows, warm grey rules,
   white words on the ink button */
:root { --butter: #FFFFFF; --butter-edge: #E63B2F; }
.pill { color: #FFFFFF; }

:root { --tw-red: #E63B2F; --tw-blue: #1A8FE3; --tw-cream: #F4E6D6; --tw-photo: #F2F0ED; --tw-edge: #EDE9E3;
  --tw-fredoka: 'Fredoka', 'Geist', system-ui, sans-serif; --tw-nunito: 'Nunito', 'Geist', system-ui, sans-serif; }

/* ---------- cover: the lockup over the picture, as a share of its middle 1440 ---------- */
.tw-cover { container-type: inline-size; }
.cs-cover .tw-cover-lock { position: absolute; left: 4.167%; top: 12.59%; width: 27.23%; max-width: none; margin: 0; }
.cs-cover .tw-cover-lock img { display: block; width: 100%; aspect-ratio: 392 / 60; object-fit: contain; }
.tw-cover-lock p { margin: 0; padding-top: 1.3%; text-align: center; font-family: var(--tw-nunito); font-style: italic; font-weight: 600;
  font-size: clamp(6px, 1.04cqw, 15px); line-height: 1.2; color: var(--tw-red); white-space: nowrap; }

/* ---------- shared bits ---------- */
.tw-panel { position: relative; min-width: 0; }
.tw-panel.white { background: var(--ground); }
.tw-tab { display: inline-block; padding: 5px 14px; border-radius: 4px; background: var(--tw-red); color: #F5F0EB;
  font-family: 'Geist Mono', ui-monospace, monospace; font-size: var(--step--1); font-weight: 400; line-height: 16px; letter-spacing: 0.06em; }
.tw-panel > .tw-tab { position: absolute; left: 4.5%; top: 24px; z-index: 2; }
.tw-stack { display: flex; flex-direction: column; gap: 16px; }
.tw-body { display: flex; flex-direction: column; gap: 56px; }
.tw-abs { position: absolute; left: var(--x); top: var(--y); width: var(--w); max-width: none; height: auto; }
.tw-abs[style*="--rot"] { transform: rotate(var(--rot)); }
.tw-cap, .tw-tag, .tw-loc { position: absolute; left: var(--x); top: var(--y); width: var(--w); text-align: center; white-space: nowrap;
  font-size: var(--fs); line-height: 1.25; }
.tw-cap { font-family: var(--tw-fredoka); font-weight: 500; text-transform: uppercase; color: var(--tw-blue); }
.tw-tag { font-family: var(--tw-nunito); font-style: italic; font-weight: 600; color: var(--tw-red); }
.tw-loc { font-family: var(--tw-nunito); font-weight: 400; color: var(--tw-blue); }
.tw-tile { position: relative; overflow: hidden; border-radius: 2px; aspect-ratio: var(--ar); min-width: 0; }
.tw-tile img.tw-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tw-tile.tw-cream { background: var(--tw-cream); }
.tw-photo-bg { background: var(--tw-photo); }
.tw-photo { position: relative; margin: 0; border-radius: 2px; overflow: hidden; background: var(--tw-photo); }
.tw-photo > img { display: block; width: 100%; height: auto; }
.tw-tile .tw-abs, .tw-tile > img { display: block; }

/* ---------- 02 · research panel ---------- */
.tw-research { padding: 80px 48px 28px; }
.tw-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tw-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 240px; column-gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #FFB9B4; }
.tw-row:last-child { border-bottom: 0; }
.tw-num { font-size: var(--step-2); font-weight: 500; line-height: 38px; letter-spacing: -0.03em; white-space: nowrap; color: var(--tw-red); }
.tw-claim { font-size: var(--step-0); line-height: 26px; letter-spacing: -0.005em; color: var(--body); text-wrap: pretty; }
.tw-src { font-size: var(--step--1); font-weight: 500; line-height: 16px; color: var(--muted); text-wrap: pretty; }
@container col (min-width: 1000px) { .tw-row { grid-template-columns: 150px minmax(0, 1fr) 300px; } }
@container col (max-width: 700px) {
  .tw-research { padding: 72px 20px 12px; }
  .tw-row { grid-template-columns: 1fr; row-gap: 4px; padding: 16px 0; }
}

/* ---------- 03 · photo and card, lockups, rationale ---------- */
.tw-workshop { container-type: inline-size; }
.tw-card { position: absolute; left: 0; top: 7.76%; width: 31.2%; aspect-ratio: 363.7 / 115; background: #fff; border-radius: 0 4px 4px 0; container-type: inline-size; }
.tw-card-in { position: absolute; inset: 0; }
@container col (max-width: 640px) {
  .tw-workshop { background: var(--ground); }
  .tw-card { position: relative; top: auto; width: min(100%, 364px); margin: 16px 0 0; background: var(--ground); }
}

.tw-lockups { padding: 80px 6% 5.5%; }
.tw-lk-grid { display: grid; grid-template-columns: 530fr 390fr; column-gap: 8.75%; row-gap: 0; align-items: start; }
.tw-lk-cell { position: relative; }
.tw-lk-cell.p { align-self: end; padding-bottom: 0; }
.tw-lk { position: relative; aspect-ratio: var(--ar); container-type: inline-size; }
.tw-lk-p { width: calc(500 / 530 * 100%); }
.tw-lk-s { width: calc(274 / 390 * 100%); }
.tw-lk-note { display: flex; flex-direction: column; gap: 4px; margin: 56px 0 0; font-size: var(--step-0); line-height: 24px; letter-spacing: -0.005em; color: var(--muted); text-wrap: pretty; }
.tw-lk-note strong { font-weight: 500; color: var(--ink); }
.tw-lk-note span { max-width: 400px; }
@container col (max-width: 760px) {
  .tw-lockups { padding: 72px 20px 28px; }
  .tw-lk-grid { grid-template-columns: 1fr; row-gap: 12px; }
  .tw-lk-p, .tw-lk-s { width: min(100%, 500px); }
  .tw-lk-s { width: min(100%, 274px); }
  .tw-lk-note { margin-top: 0; }
  .tw-lk-cell.s { margin-top: 24px; }
  .tw-lk-grid > .tw-lk-note:nth-of-type(1) { order: 2; }
  .tw-lk-grid > .tw-lk-cell.p { order: 1; }
  .tw-lk-grid > .tw-lk-cell.s { order: 3; }
  .tw-lk-grid > .tw-lk-note:nth-of-type(2) { order: 4; }
}

.tw-rat { aspect-ratio: var(--ar); container-type: inline-size; }
.tw-wm { aspect-ratio: var(--ar); height: auto; }
.tw-wm img { position: absolute; max-width: none; height: auto; }
.tw-dash { position: absolute; border: 1.6px dashed #4C4C4C; box-sizing: border-box; }
.tw-dash.tw-ell { border-radius: 50%; }
.tw-g { display: contents; }
.tw-callout { position: absolute; left: var(--x); top: var(--y); width: var(--w); display: flex; flex-direction: column; gap: 4px; margin: 0;
  font-size: clamp(12px, 1.4cqw, 16px); line-height: 1.3; letter-spacing: -0.005em; color: var(--body); text-wrap: pretty; }
.tw-callout strong { font-weight: 500; color: var(--ink); }
@container col (max-width: 760px) {
  .tw-rat { aspect-ratio: auto; display: flex; flex-direction: column; gap: 28px; padding: 72px 20px 28px; }
  .tw-rat .tw-abs { position: static; }
  .tw-rat .tw-wm.tw-abs { position: relative; left: 0; top: 0; width: 100%; }
  .tw-g { display: flex; align-items: center; gap: 20px; }
  .tw-g .tw-pic { flex: 0 0 96px; width: 96px; }
  .tw-callout { position: static; width: auto; font-size: 16px; line-height: 24px; }
  .tw-arrow { display: none; }
}

/* ---------- 04 · palette and type ---------- */
.tw-palette { padding: 76px 6% 28px; }
.tw-pal-head { position: absolute; left: 4.5%; right: 4.5%; top: 24px; display: flex; align-items: center; gap: 20px; }
.tw-pal-head .tw-tab { position: static; flex: none; }
.tw-pal-line { font-size: var(--step--1); line-height: 16px; color: var(--muted); text-wrap: pretty; }
.tw-pal-line strong { font-weight: 500; color: var(--ink); }
.tw-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tw-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tw-sw { container-type: inline-size; aspect-ratio: 158.67 / 236; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; border-radius: 8px; background: var(--bg); color: var(--tint); text-align: center; }
.tw-letter { font-family: var(--tw-fredoka); font-weight: 700; font-size: clamp(28px, 29cqw, 52px); line-height: 1; }
.tw-name { font-weight: 500; font-size: clamp(14px, 12cqw, 21px); line-height: 1.25; letter-spacing: -0.01em; }
.tw-spec { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; font-size: var(--step--1); line-height: 16px; color: var(--muted); text-align: center; }
.tw-spec b { font-weight: 500; color: var(--ink); }
@container col (max-width: 900px) { .tw-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; } }
@container col (max-width: 480px) { .tw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tw-palette { padding-inline: 20px; }
  .tw-pal-head { flex-direction: column; align-items: flex-start; gap: 8px; } .tw-palette { padding-top: 116px; } }

.tw-type { padding: 80px 6% 44px; }
.tw-type-grid { display: grid; grid-template-columns: minmax(0, 200fr) minmax(0, 763fr); column-gap: 5.8%; }
.tw-type-notes { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.tw-type-notes .note { font-size: var(--step--1); line-height: 20px; }
.tw-specs { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tw-spec-one { display: flex; flex-direction: column; gap: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--tw-edge); }
.tw-aa-row { display: flex; align-items: center; gap: 16px; }
.tw-aa { font-size: 76px; line-height: 1; font-weight: 700; color: var(--ink); }
.tw-fredoka .tw-aa, .tw-fredoka .tw-abc { font-family: var(--tw-fredoka); }
.tw-nunito .tw-aa { font-family: 'Nunito Sans', var(--tw-nunito); font-weight: 400; }
.tw-nunito .tw-abc { font-family: 'Nunito Sans', var(--tw-nunito); }
.tw-aa-words { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-fam { font-size: var(--step-1); font-weight: 500; line-height: 28px; letter-spacing: -0.02em; }
.tw-use, .tw-wts { font-size: var(--step--1); line-height: 16px; color: var(--muted); }
.tw-abc { margin: 0; font-size: var(--step-0); line-height: 28px; color: var(--ink); overflow-wrap: anywhere; }
.tw-uses { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tw-uses li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 4px 0; }
.tw-sample { min-width: 0; color: var(--ink); text-wrap: balance; }
.tw-u1 .tw-sample { font-family: var(--tw-fredoka); font-weight: 700; font-size: clamp(22px, 3.4cqw, 34px); line-height: 1.25; }
.tw-u2 .tw-sample { font-family: var(--tw-fredoka); font-weight: 600; font-size: 24px; line-height: 1.3; }
.tw-u3 .tw-sample { font-family: var(--tw-nunito); font-weight: 600; font-style: italic; font-size: 17px; line-height: 1.4; }
.tw-u4 .tw-sample { font-family: var(--tw-nunito); font-weight: 400; font-size: 14px; line-height: 1.4; }
.tw-meta-r { display: flex; flex-direction: column; align-items: flex-end; flex: none; margin: 0; text-align: right; font-size: var(--step--1); line-height: 16px; color: var(--muted); }
.tw-meta-r > span:first-child { font-family: 'Geist Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: var(--ink); }
.tw-type { container-type: inline-size; }
@container col (max-width: 760px) {
  .tw-type { padding: 72px 20px 28px; }
  .tw-type-grid { grid-template-columns: 1fr; row-gap: 28px; }
  .tw-type-notes .note { max-width: 520px; }
  .tw-uses li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tw-meta-r { align-items: flex-start; text-align: left; }
  .tw-aa { font-size: 64px; }
}

/* ---------- 05 · materials, kits ---------- */
.tw-clip { position: relative; display: block; width: var(--w); aspect-ratio: var(--ar); overflow: hidden; margin: 0 auto; }
.tw-clip img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tw-clip img.crop { position: absolute; max-width: none; object-fit: fill; }
.tw-mats { display: flex; flex-direction: column; gap: 56px; }
.tw-mat { display: grid; grid-template-columns: 420fr 536fr; column-gap: 64px; align-items: center; }
.tw-mat-pic { min-width: 0; }
.tw-mat-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tw-small { font-size: var(--step-1); font-weight: 500; line-height: 28px; letter-spacing: -0.02em; }
.tw-mat .txt { max-width: 536px; }
@container col (max-width: 760px) { .tw-mat { grid-template-columns: 1fr; row-gap: 20px; } .tw-mat-pic .tw-clip { margin-left: 0; --w: 100%; max-width: 340px; } }

.tw-kits { padding: 76px 6% 0; overflow: hidden; }
.tw-kit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tw-kit { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 20px; min-width: 0; border-right: 1px solid var(--tw-edge); }
.tw-kit:nth-child(3n) { border-right: 0; }
.tw-kit:nth-child(n+4) { border-top: 1px solid var(--tw-edge); }
.tw-shots { display: grid; grid-template-rows: repeat(2, 1fr); row-gap: 3.85%; width: 88%; aspect-ratio: 300 / 416; }   /* two 300 x 200 slots, pictures centred */
.tw-shots .tw-clip { margin: 0 auto; align-self: center; }
.tw-kname { font-size: var(--step-1); font-weight: 500; line-height: 28px; letter-spacing: -0.02em; text-align: center; }
.tw-kaud { margin-top: -8px; font-size: var(--step--1); line-height: 16px; color: var(--muted); text-align: center; }
@container col (max-width: 860px) {
  .tw-kit:nth-child(3n) { border-right: 1px solid var(--tw-edge); }
  .tw-kit:nth-child(2n) { border-right: 0; }
  .tw-kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-kit:nth-child(n+3) { border-top: 1px solid var(--tw-edge); }
}
@container col (max-width: 520px) {
  .tw-kits { padding-inline: 20px; }
  .tw-kit-grid { grid-template-columns: 1fr; }
  .tw-kit:nth-child(n) { border-right: 0; }
  .tw-kit:nth-child(n+2) { border-top: 1px solid var(--tw-edge); }
}

/* ---------- 06 · the box ---------- */
.tw-flat { padding: 100px 6.35% 0; aspect-ratio: auto; }
.tw-flat-scroll { overflow-x: auto; padding-bottom: 8%; }
.tw-flat-scroll img { display: block; width: 100%; min-width: 560px; height: auto; }
.tw-row1 { display: grid; grid-template-columns: 384fr 766fr; gap: 16px; align-items: start; }
.tw-six { container-type: inline-size; }
.tw-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@container col (max-width: 640px) {
  .tw-row1 { grid-template-columns: 1fr; }
  .tw-row3 { grid-template-columns: 1fr; }
  .tw-flat { padding-inline: 20px; }
}

/* ---------- 07 · the store ---------- */
.tw-mosaic { display: flex; flex-direction: column; gap: 16px; }
.tw-pair { display: grid; grid-template-columns: var(--a) var(--b); gap: 16px; align-items: start; }
@container col (max-width: 640px) { .tw-pair { grid-template-columns: 1fr; } }

/* ---------- 01 · four meta columns, not five ---------- */
.cs-meta.tw-meta { gap: 40px; }
.cs-meta.tw-meta > div { flex: 0 0 225px; }
@container col (max-width: 1019px) { .cs-meta.tw-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; } }
@container col (max-width: 900px) { .cs-meta.tw-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* long ledes: balance only works up to six lines in Chrome, so past that use pretty to stop a lone last word */
.lede.w900 { text-wrap: pretty; }

/* ---------- Phone (17 Oct): the Paper board "TWIGIT · phone 390 · page" ----------
   A picture around a figure's image changes nothing above a phone: the same rules, one level down. */
.tw-photo > picture, .tw-flat-scroll > picture { display: block; }
.tw-photo > picture > img { display: block; width: 100%; height: auto; }

@media (max-width: 640px) {
  /* the section bar's flower: the snapdragon, 191 x 43, its head cut by the screen's edge */
  .cs-bar-ptr.snap { left: -130px; top: 4px; width: 191px; height: 43px; }
  .cs-bar-list .cs-bar-ptr.snap { top: 6px; margin-top: 4px; }       /* case-study.js sets the top for a 52 px flower */

  /* the cover: the board's 390 square */
  .cs-ph .cs-cover.wide > picture > img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

  .cs-ph .cs-close { margin-top: 0; }                               /* the board: 56 under the last tile, then the line */
  .cs-ph .cs-overview { margin-bottom: -32px; }                    /* the board: 24 under the facts, then the line */
  /* 01: the four facts as rows, no line under the last (the next section's line closes it) */
  .cs-ph .cs-meta.tw-meta { display: flex; flex-direction: column; gap: 0; border-bottom: 0; }
  .cs-ph .cs-meta.tw-meta > div:nth-child(n) { flex: none; }
  .cs-ph .cs-meta.tw-meta > div:last-child { border-bottom: 0; }

  /* panels: the tab sits 16 in, 24 down */
  .cs-ph .tw-panel > .tw-tab { left: 16px; top: 24px; }

  /* 02 */
  .cs-ph .tw-row { padding: 16px 0; row-gap: 4px; border-bottom-color: rgba(230, 59, 47, 0.302); }
  .cs-ph .tw-row:last-child { border-bottom: 0; }
  .cs-ph .tw-num { font-size: 28px; line-height: 38px; }
  .cs-ph .tw-claim { font-size: 16px; line-height: 26px; }
  .cs-ph .tw-src { font-size: 12px; line-height: 16px; }

  /* 03: the card sits on the photo, as the board's */
  .cs-ph .tw-card { position: absolute; left: 0; top: 20px; width: 143px; margin: 0; background: #fff; }
  .cs-ph .tw-lk-grid { row-gap: 16px; }
  .cs-ph .tw-lk-p { width: 84.4%; margin-inline: auto; }
  .cs-ph .tw-lk-s { width: 83.1%; margin-inline: auto; }
  .cs-ph .tw-rat { gap: 32px; padding: 72px 20px 32px; }
  .tw-ph-dg { position: relative; width: 100%; aspect-ratio: 308 / 101; }
  .tw-ph-dg > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .tw-ph-dg > img { position: absolute; display: block; max-width: none; height: auto; }
  .tw-bdg { position: absolute; display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--tw-red); color: #F5F0EB;
    font: 500 11px/18px 'Geist Mono', ui-monospace, monospace; text-align: center; }
  .cs-ph .tw-g { position: relative; }
  .cs-ph .tw-bdg-r { left: 0; top: calc(50% - 48px); }
  .cs-ph .tw-callout { gap: 0; }

  /* 04 */
  .cs-ph .tw-pal-head { left: 16px; right: 16px; }
  .cs-ph .tw-pal-line { align-self: stretch; }                        /* a full-width box, so WebKit never wraps a board line in two */
  .cs-ph .tw-letter { font-size: 44px; line-height: 48px; }
  .cs-ph .tw-name { font-size: 20px; line-height: 22px; }
  .cs-ph .tw-specs { gap: 24px; }
  .cs-ph .tw-spec-one { padding-bottom: 24px; }
  .cs-ph .tw-uses { padding-top: 4px; }
  .cs-ph .tw-aa-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cs-ph .tw-aa { font-size: 64px; line-height: 64px; }
  .cs-ph .tw-nunito .tw-aa { font-weight: 300; }
  .cs-ph .tw-fam { font-size: 21px; line-height: 28px; }
  .cs-ph .tw-use, .cs-ph .tw-wts { font-size: 14px; line-height: 20px; }
  .cs-ph .tw-abc { font-size: 16px; line-height: 28px; }
  .cs-ph .tw-u1 .tw-sample { font-size: 22px; line-height: 28px; }
  .cs-ph .tw-u2 .tw-sample { font-size: 24px; line-height: 31px; }
  .cs-ph .tw-u3 .tw-sample { font-size: 17px; line-height: 24px; }
  .cs-ph .tw-u4 .tw-sample { font-size: 14px; line-height: 20px; }
  .cs-ph .tw-meta-r span { font-size: 14px; line-height: 20px; }
  .cs-ph .tw-meta-r > span:first-child { font-size: 12px; line-height: 16px; }

  /* 05: a 350 x 200 frame, the picture centred; the kits one under the other */
  .cs-ph .tw-mat-pic { display: flex; align-items: center; justify-content: center; height: 200px; }
  .cs-ph .tw-ph-mat { display: block; width: 100%; height: auto; }
  .cs-ph .tw-ph-mat.beech { width: 85.714%; }
  .cs-ph .tw-small { font-size: 21px; line-height: 28px; }
  .cs-ph .tw-kits { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 16px 0; }
  .cs-ph .tw-kits > .tw-tab, .cs-ph .tw-flat > .tw-tab { position: static; }
  .cs-ph .tw-kit-grid { align-self: stretch; }
  .cs-ph .tw-kit { gap: 16px; padding: 32px 0; }
  .tw-ph-shots { display: contents; }
  .tw-ph-shots img { display: block; max-width: 100%; height: auto; }
  .cs-ph .tw-kname { padding-top: 8px; }
  .cs-ph .tw-kaud { margin-top: -12px; }

  /* 06 */
  .cs-ph .tw-flat { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 16px; }
  .cs-ph .tw-flat-scroll { overflow: visible; width: 100%; padding: 0; }
  .cs-ph .tw-flat-scroll img { min-width: 0; }

  /* the board's tiles: --ar2 and --x2 --y2 --w2 are the phone's own (Paper's px as percent of the 350); without them, the tile's own */
  .cs-ph .tw-tile { aspect-ratio: var(--ar2, var(--ar)); }
  .cs-ph .tw-tile .tw-abs { left: var(--x2, var(--x)); top: var(--y2, var(--y)); width: var(--w2, var(--w)); }
  .cs-ph .tw-tile .tw-abs.tw-pf { height: 100%; object-fit: cover; }
}