/* Nov 10, second pass: low-word graphics for the problem layouts. Colour blocks, card trees and tilted window cards.
   Flat colour only, no gradients. Loaded after problem-layouts.css, so it also holds the layout overrides. */

.sc-story {
  --gx-bad: color-mix(in srgb, var(--palette-red-400) 42%, var(--palette-greyscale-50));
  --gx-wait: var(--palette-golden-200);
  --gx-ok: var(--palette-holly-300);
  --gx-ink: var(--palette-greyscale-950);
}

/* Second picker, for the hero variations, sits above the layout picker. */

/* Flat tinted backgrounds, so the page isn't all white. */
.gx-tint-sage { background: var(--theme-sage-faint); }
.gx-tint-warm { background: color-mix(in srgb, var(--palette-golden-200) 28%, var(--theme-surface)); }
.gx-band { padding: 40px 16px; border-radius: 28px; }
@media (min-width: 960px) { .gx-band { padding: 72px 56px; } }

.gx { min-width: 0; padding: 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 12px 28px var(--sv-shadow); color: var(--sv-ink); font: 500 15px/1.2 var(--font-body); text-align: left; }

/* Split: one source, three colour blocks */
.gx-split { display: grid; justify-items: center; }
.gx-src { padding: 12px 32px; border-radius: 14px; background: var(--theme-accent); font: 600 20px/1 var(--font-heading); color: var(--theme-accent-contrast); white-space: nowrap; }
.gx-legs { display: block; width: 100%; height: 64px; overflow: visible; }
.gx-legs path, .gx-lane path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gx-legs path { stroke-width: 10; }
.gx-s-bad { stroke: var(--gx-bad); }
.gx-s-wait { stroke: var(--gx-wait); }
.gx-s-ok { stroke: var(--gx-ok); }
.gx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; width: 100%; height: 184px; }
.gx-col { display: grid; align-items: end; justify-items: center; height: var(--h); padding-bottom: 14px; border-radius: 16px; color: var(--gx-ink); white-space: nowrap; }
.gx-col { position: relative; overflow: hidden; }
.gx-col b { position: relative; font-size: clamp(13px, 3.7vw, 17px); font-weight: 600; }
/* The art sits inside the tall bar, like a picture filling a chart bar. */
.gx-col img { position: absolute; left: 50%; top: 14px; width: min(86%, 150px); height: auto; transform: translateX(-50%); opacity: 0; transition: opacity 300ms ease-out; }
.gx-split[data-state="before"] .gx-bad img, .gx-split[data-state="after"] .gx-ok img { opacity: 1; transition-delay: 300ms; }
/* Bento: bingo needs the wide cell or its squares squash. */
@media (min-width: 960px) { .pa-bento .pa-c-split { grid-column: span 5; } .pa-bento .pa-c-bingo { grid-column: span 7; } }
.gx-col.gx-bad, .gx-blk.gx-bad { background: var(--gx-bad); }
.gx-col.gx-wait { background: var(--gx-wait); }
.gx-col.gx-ok, .gx-blk.gx-ok { background: var(--gx-ok); }
.gx-split[data-state="before"] .gx-bad { --h: 184px; }
.gx-split[data-state="before"] .gx-wait { --h: 96px; }
.gx-split[data-state="before"] .gx-ok { --h: 52px; }
.gx-split[data-state="after"] .gx-bad { --h: 52px; }
.gx-split[data-state="after"] .gx-wait { --h: 72px; }
.gx-split[data-state="after"] .gx-ok { --h: 184px; }

/* Race: straight to merged, or looping back */
.gx-race { display: grid; gap: 24px; }
.gx-lane { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "t e"; align-items: center; column-gap: 10px; row-gap: 6px; }
.gx-lane > b { grid-area: k; font-size: 17px; font-weight: 600; white-space: nowrap; }
.gx-lane svg { grid-area: t; display: block; width: 100%; height: 56px; overflow: visible; }
.gx-lane path { stroke-width: 9; }
.gx-lane-ok path { stroke: var(--gx-ok); }
.gx-lane-bad path { stroke: var(--gx-bad); }
.gx-end { grid-area: e; padding: 10px 16px; border-radius: 12px; background: var(--gx-ok); font-weight: 600; color: var(--gx-ink); white-space: nowrap; }
.gx-end-ghost { background: none; border: 2px dashed var(--sv-line); padding: 8px 14px; color: var(--sv-muted); }

/* Why: three tilted window cards on a line */
.gx-why { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 10px; min-width: 0; padding: 12px 0; }
.gx-why::before { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px solid var(--theme-sage-line); }
.gx-card { position: relative; display: grid; justify-items: center; gap: 10px; padding-bottom: 16px; border-radius: 14px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 22px var(--sv-shadow); color: var(--sv-ink); overflow: hidden; white-space: nowrap; transform: rotate(var(--r)); }
.gx-chrome { width: 100%; height: 18px; background: var(--gx-bad); }
.gx-c-wait .gx-chrome { background: var(--gx-wait); }
.gx-card i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--pp-bad) 14%, transparent); font: 600 20px/1 var(--font-body); font-style: normal; color: var(--pp-bad); }
.gx-card b { font-size: clamp(12px, 3.4vw, 16px); font-weight: 600; }

/* Tree: a spine, a check on each branch, a card with a full bar */
.gx-tree { position: relative; display: grid; gap: 16px; }
.gx-tree::before { content: ""; position: absolute; left: 31px; top: 40px; bottom: 48px; width: 2px; background: var(--theme-sage-line); }
.gx-tree-k { position: relative; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 6px 12px; border-radius: 10px; background: var(--theme-accent); font: 600 14px/1.2 var(--font-body); color: var(--theme-accent-contrast); white-space: nowrap; }
.gx-tree ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.gx-tree li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 14px; }
.gx-tree li[hidden] { display: none; }
.gx-node { position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--theme-action-green); font: 600 13px/1 var(--font-body); font-style: normal; color: var(--theme-action-green-ink); }
.gx-tcard { display: grid; gap: 10px; padding: 14px 16px; border-radius: 14px; background: var(--theme-surface); box-shadow: inset 0 0 0 1px var(--sv-line); white-space: nowrap; }
.gx-tcard b { font-size: 17px; font-weight: 600; }
.gx-bar { height: 12px; border-radius: 6px; background: var(--gx-ok); }

/* Fix: red block, bolt, green block */
.gx-fix { display: grid; justify-items: center; padding: 36px 20px; }
.gx-fix[hidden] { display: none; }
.gx-blk { padding: 16px 28px; border-radius: 16px; font: 600 20px/1 var(--font-heading); color: var(--gx-ink); white-space: nowrap; }
.gx-stem { width: 6px; height: 26px; border-radius: 3px; background: var(--sv-line); }
.gx-bolt { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--theme-accent); }

/* Stamps: the shared mark for Ledger, Journey and Windows. A rubber-stamp look: thick outline, tilted. */
.gx-stamp { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 3px solid currentColor; border-radius: 12px; background: var(--sv-card); font: 700 clamp(16px, 4.4vw, 22px)/1 var(--font-heading); white-space: nowrap; transform: rotate(var(--r, 0deg)) translateX(var(--x, 0)); }
.gx-st-bad { color: var(--pp-bad); }
.gx-st-ok { color: var(--pp-good); }
.gx-st-bolt { color: var(--theme-accent-contrast); background: var(--theme-accent); border-color: var(--theme-accent-edge); }
.gx-st-big { padding: 18px 32px; border-width: 5px; font-size: clamp(32px, 8vw, 56px); }

/* Ledger: a leaning pile of stamps */
.gx-pile { display: flex; flex-direction: column-reverse; align-items: center; min-width: 0; padding: 12px 0; }
.gx-pile .gx-stamp { margin-top: -6px; padding: 12px 28px; font-size: clamp(20px, 5.4vw, 30px); box-shadow: 0 6px 14px var(--sv-shadow); }
.gx-pile .gx-st-ok, .gx-pile .gx-st-bad { background: var(--theme-surface); }

/* Ledger: reason and fix, side by side */
.gx-pairs { display: grid; gap: 20px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.gx-pairs li { display: grid; grid-template-columns: auto minmax(16px, 1fr) auto; align-items: center; gap: 10px; }
.gx-pairs i { height: 3px; border-radius: 2px; background: var(--sv-line); }
.gx-pairs .gx-stamp { font-size: clamp(14px, 3.8vw, 20px); padding: 10px 14px; }

/* Journey: one PR ticket that collects stamps */
.gx-ticket { display: grid; gap: 18px; min-height: 300px; align-content: start; padding: 24px; }
.gx-tk-h { display: flex; align-items: center; justify-content: space-between; margin: 0; }
.gx-tk-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--palette-greyscale-900); }
.gx-tk-lines { display: grid; gap: 10px; margin: 0; }
.gx-tk-lines i { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--sv-ink) 10%, transparent); }
.gx-tk-lines i:nth-child(2) { width: 82%; }
.gx-tk-lines i:nth-child(3) { width: 56%; }
.gx-tk-stamps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; min-height: 96px; padding-top: 8px; }

/* Windows: generated props float on a dark slab */
.pd-dark { --sv-ink: var(--palette-spanish-100); padding: 40px 16px; border-radius: 28px; background: var(--palette-greyscale-950); }
.gx-props { position: relative; display: grid; place-items: center; min-width: 0; min-height: 280px; }
.gx-p { display: block; height: auto; }
.gx-p-main { width: min(64%, 360px); }
.gx-p-a, .gx-p-b, .gx-p-c { position: absolute; width: min(26%, 150px); }
.gx-p-a { left: 0; top: 4%; transform: rotate(-8deg); }
.gx-p-b { right: 0; top: 0; transform: rotate(7deg); }
.gx-p-c { right: 4%; bottom: 0; transform: rotate(-4deg); }
.gx-p-label { position: absolute; left: 4%; bottom: 8%; }
.pd-dark .gx-stamp { background: var(--palette-greyscale-950); color: var(--palette-red-400); }
.sc-story .pd-dark .sv-h, .sc-story .pd-dark .sv-lead { color: var(--sv-ink); }
.pd-row-out .gx-props { min-height: 320px; }
@media (min-width: 960px) {
  .pd-dark { padding: 80px 56px; border-radius: 40px; }
  .pd-dark .gx-props { min-height: 440px; max-width: 880px; width: 100%; justify-self: center; }
  .pd-dark .gx-p-main { width: 480px; }
  .pd-dark .gx-p-a, .pd-dark .gx-p-b, .pd-dark .gx-p-c { width: 230px; }
  .pd-dark .gx-p-label { left: 8%; bottom: 14%; font-size: 30px; padding: 14px 26px; }
}
@media (prefers-reduced-motion: no-preference) {
  .gx-p-a, .gx-p-b, .gx-p-c { animation: gx-float 7s ease-in-out infinite alternate; }
  .gx-p-b { animation-delay: -2s; }
  .gx-p-c { animation-delay: -4s; }
}
@keyframes gx-float { from { translate: 0 0; } to { translate: 0 -10px; } }

/* Layout overrides for the new graphics */
.pb-say > .gx-pile, .pb-pair > .gx-pile { width: 100%; }
.pe-one { display: grid; width: 100%; max-width: 640px; }
@media (min-width: 960px) {
  .sc-story .pb-ledger { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; }
  .pe-one { background: var(--theme-surface); }
}
.pa-cell > .gx, .pa-cell > .gx-why { margin-top: 18px; }
.pa-c-split { grid-template-rows: auto 1fr; }
.pa-c-split > .gx { align-self: center; }
.pa-cell.gx-tint-warm, .pa-cell.gx-tint-sage { box-shadow: none; }
.pa-panel > .gx-tree { max-width: 520px; }
.pb-say > .gx-split { width: min(100%, 560px); }
.pb-pair > .gx-split { width: 100%; }
.pb-ledger { align-items: center; }
.pb-handled .sv-copy { grid-template-columns: minmax(0, 1fr); }
.pb-jobs li > b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pb-handled .sc-rep { width: 100%; max-width: 560px; justify-self: center; }
.pb-wide > .gx-race, .pc-center > .gx-race { width: 100%; max-width: 760px; justify-self: center; }
.pc-stack { display: grid; min-width: 0; }
.pc-g { display: none; min-width: 0; }
.pc-stack[data-stage="before"] [data-g="before"], .pc-stack[data-stage="why"] [data-g="why"], .pc-stack[data-stage="fix"] [data-g="fix"], .pc-stack[data-stage="after"] [data-g="after"] { display: block; }
.pc-stack .gx-why { padding: 48px 0; }
.pc-duo > .pd-one { justify-self: center; width: 100%; }
.pc-end { justify-items: center; }
.pd-pick { box-shadow: none; }
.pd-pick .pd-panel { align-content: center; }
.pe-tool { padding: 20px 16px; border-radius: 24px; }
.pe-tool .pe-chips button[aria-pressed="true"] { background: var(--gx-bad); box-shadow: none; color: var(--gx-ink); }
.pe-loopwrap, .pe-step > .pd-one { width: 100%; }
@media (min-width: 960px) {
  .pb-ledger { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: 48px; }
  .pb-pair { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .pe-step > .gx, .pe-loopwrap, .pe-step > .pd-one { position: relative; max-width: 760px; }
  .pe-step > .gx-split { max-width: 560px; }
  .pe-loopwrap { padding: 24px; border-radius: 24px; background: var(--theme-surface); }
  .pe-tool { background: var(--theme-sage-faint); box-shadow: none; }
  .pe-two .gx-why, .pe-two .gx-race { background-color: var(--theme-surface); }
  .pc-pin { top: calc(50vh - 180px); }
}

/* Nov 10: each layout has its own colour family. Bento golden, Ledger coral, Journey deep green, Windows black,
   Thread mint. All flat tints of the palette. */
.gx-tint-gold { background: color-mix(in srgb, var(--palette-golden-300) 34%, var(--theme-surface)); }
.gx-tint-coral { background: color-mix(in srgb, var(--palette-red-400) 14%, var(--theme-surface)); }
.gx-tint-mint { background: color-mix(in srgb, var(--palette-holly-200) 55%, var(--theme-surface)); }
.gx-tint-deep { --sv-ink: var(--palette-holly-50); --sv-muted: var(--palette-holly-200); background: var(--palette-holly-800); color: var(--sv-ink); }
.sc-story .gx-tint-deep .sv-h, .sc-story .gx-tint-deep .sv-lead { color: var(--sv-ink); }
.gx-tint-deep .sc-bill, .gx-tint-deep .lp { --sv-ink: var(--palette-greyscale-950); --sv-card: var(--palette-greyscale-50); }
.gx-art { display: block; width: min(100%, 320px); height: auto; justify-self: center; }
@media (prefers-reduced-motion: no-preference) { .gx-art { animation: gx-float 8s ease-in-out infinite alternate; } }

/* Bento: art cells sit in the grid like any other cell. */
.pa-c-art { display: grid; place-items: center; min-height: 240px; box-shadow: none; }
.pa-c-art .gx-art { width: min(80%, 300px); }
.pa-bento-loop .pa-c-loop { box-shadow: none; }
.pa-c-loop .lp { margin-top: 18px; background: var(--sv-card); }
@media (min-width: 960px) {
  .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) .pa-c-split { grid-column: 1 / span 7; grid-row: 1; }
  .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) .pa-c-art { grid-column: 1 / span 7; grid-row: 2; }
  .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) .pa-c-bingo { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .pa-bento-out .pa-c-list { grid-column: 1 / span 7; grid-row: 1; }
  .pa-bento-out .pa-c-art { grid-column: 1 / span 7; grid-row: 2; }
  .pa-bento-out .pa-c-bill { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .pa-bento-out .pa-c-dist { grid-column: 1 / -1; grid-row: 3; }
  .pa-bento-loop { grid-template-columns: minmax(0, 1fr); }
  .pa-c-loop { justify-items: center; }
}

/* Ledger */
.pb-play, .pb-loop { display: grid; justify-items: center; gap: 32px; min-width: 0; text-align: center; }
.pb-play .sv-copy { justify-items: center; }
.pb-play .sc-bg { width: min(100%, 560px); }
.pb-duo { display: grid; gap: 24px; min-width: 0; }
.pb-art { width: min(70%, 300px); }
@media (min-width: 960px) {
  .pb-loop { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; justify-items: start; gap: 64px; text-align: left; }
  .pb-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pb-trio { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
  .pb-art { width: 100%; }
}

/* Windows */
.pd-bingo .sc-bg { width: min(100%, 560px); margin-inline: auto; }
.pd-dark .lp { justify-self: center; --sv-ink: var(--palette-greyscale-50); --sv-card: var(--palette-greyscale-950); --lp-c: var(--theme-accent); background: transparent; box-shadow: none; padding-block: 0; }
.pd-row-two { align-items: start; }
@media (min-width: 960px) { .pd-row.pd-row-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Journey */
.pc-play { position: relative; }
.pc-art { width: min(60%, 240px); }
.pc-endrow { display: grid; justify-items: center; gap: 24px; width: 100%; }
@media (min-width: 960px) {
  .pc-endrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: 880px; }
  .pc-endrow .pc-art { width: 300px; }
}

@media (min-width: 1180px) { .pc-play > .pc-art { position: absolute; left: 3%; bottom: 48px; width: 190px; } }

/* Thread: the whole thread sits on mint; the masks behind headings use the same mint. */
.pe.gx-tint-mint { --pe-bg: color-mix(in srgb, var(--palette-holly-200) 55%, var(--theme-surface)); padding-top: 40px; padding-bottom: 40px; padding-right: 16px; border-radius: 28px; }
.pe-art { width: min(55%, 220px); justify-self: start; }
@media (min-width: 960px) {
  .pe.gx-tint-mint { padding: 72px 40px; border-radius: 40px; }
  .pe.gx-tint-mint .pe-copy, .pe.gx-tint-mint .pe-bracket { background: var(--pe-bg); }
  .pe.gx-tint-mint .pe-copy { position: relative; z-index: 1; }
  .pe-art { position: absolute; right: 0; bottom: -12px; width: 190px; }
  .pe-end .pe-art { right: auto; left: 0; bottom: auto; top: 40%; }
}
@media (min-width: 1280px) {
  .pe-art { width: 230px; bottom: -48px; }
  .pe-end .pe-art { bottom: auto; }
}

/* The workflow loop, with Jaycee's Figma tiles (Nov 11): closed PR, Powerplant, merged PR, rocket, joined by one
   copper wire that runs back to the start. Wide: the whole row as one picture, a caption under each tile and the
   loop line on the return wire. Narrow (under 640px of room): four tiles in a square with arrows in the gaps. */
.lp { --lp-c: var(--theme-action-green); --lp-gx: 28px; --lp-gy: 48px; display: grid; justify-items: center; gap: 20px; width: 100%; max-width: 960px; justify-self: center; container-type: inline-size; padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.lp-h { margin: 0; font: 600 clamp(20px, 2.4vw, 26px)/1.2 var(--font-heading); color: var(--sv-ink); text-align: center; }
.lp-sq { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "tl tr" "bl br"; column-gap: var(--lp-gx); row-gap: var(--lp-gy); width: 100%; }
.lp-s { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; container-type: inline-size; text-align: center; font: 600 clamp(12px, 3.6vw, 18px)/1.2 var(--font-heading); color: var(--sv-ink); white-space: nowrap; }
@media (max-width: 359px) { .lp { --lp-gx: 16px; } }
.lp-s img { display: block; width: 100%; height: auto; }
.lp-tl { grid-area: tl; } .lp-tr { grid-area: tr; } .lp-br { grid-area: br; } .lp-bl { grid-area: bl; }
.lp-a { display: none; }
.lp-s::after, .lp-s::before { content: ""; position: absolute; background: var(--lp-c); }
.lp-tl::after { left: 100%; top: 50cqw; width: var(--lp-gx); height: 3px; }
.lp-tl::before { left: calc(100% + var(--lp-gx) - 10px); top: calc(50cqw - 5px); width: 10px; height: 13px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.lp-tr::after { top: 100%; left: 50%; width: 3px; height: var(--lp-gy); }
.lp-tr::before { top: calc(100% + var(--lp-gy) - 10px); left: calc(50% - 5px); width: 13px; height: 10px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.lp-br::after { right: 100%; top: 50cqw; width: var(--lp-gx); height: 3px; }
.lp-br::before { right: calc(100% + var(--lp-gx) - 10px); top: calc(50cqw - 5px); width: 10px; height: 13px; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.lp-bl::after { bottom: 100%; left: 50%; width: 3px; height: var(--lp-gy); background: var(--theme-sage-line); }
.lp-bl::before { bottom: calc(100% + var(--lp-gy) - 10px); left: calc(50% - 5px); width: 13px; height: 10px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: var(--theme-sage-line); }
.lp-loop { grid-column: 1 / -1; grid-row: 3; justify-self: center; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--theme-sage-line); background: var(--sv-card); font: 600 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
@media (min-width: 640px) {
  .lp { --lp-gx: 48px; --lp-gy: 64px; }
  .lp-sq .lp-loop { position: absolute; left: 50%; top: 50%; grid-row: auto; transform: translate(-50%, -50%); }
}
.lp-sq { max-width: 560px; margin-top: -20px; }
/* In the square the arrow back up to the start ran over the rocket, so it is gone. The "Next week" pill says it. */
.lp-sq .lp-bl::after, .lp-sq .lp-bl::before { display: none; }
.lp-wide { display: none; }
.lp-art { position: relative; }
.lp-art img { display: block; width: 100%; height: auto; }
/* The loop line hangs just under the return wire. Sitting on the wire, it ran into the captions at narrower widths. */
.lp-art { margin-bottom: 52px; }
.lp-art .lp-loop { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 10px); }
/* Captions are real text, centred under each box and close to it. Positions come from the Figma file. */
.lp-caps { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; font: 600 clamp(12px, 1.7cqw, 17px)/1.3 var(--font-heading); color: var(--sv-ink); pointer-events: none; }
.lp-caps li { position: absolute; left: var(--x); top: var(--y); transform: translateX(-50%); white-space: nowrap; }
@container (min-width: 640px) {
  .lp-sq { display: none; }
  .lp-wide { display: block; width: 100%; margin-top: -3cqw; padding-bottom: 16px; }
}

/* Windows opener: the sentence in the middle, the props floating around it, the whole scene drifting with the pointer. */
.pd-stage { position: relative; display: grid; place-items: center; min-height: 560px; overflow: hidden; }
.pd-stage .pd-head { position: relative; z-index: 2; max-width: 760px; padding: 0 8px; }
.pd-orbit { position: absolute; inset: 0; pointer-events: none; }
.pd-o { position: absolute; height: auto; transform: translate3d(calc(var(--dx, 0px) * var(--z, 1)), calc(var(--dy, 0px) * var(--z, 1)), 0) rotate(var(--r, 0deg)); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.pd-o-box { left: 2%; top: 4%; width: 26%; --r: -8deg; --z: 0.6; }
.pd-o-stamp { right: 2%; top: 2%; width: 26%; --r: 6deg; --z: 0.9; }
.pd-o-pile { left: 50%; bottom: -2%; width: 46%; margin-left: -23%; --z: 0.4; }
.pd-o-light { right: 4%; bottom: 4%; width: 18%; --r: -4deg; --z: 1.2; }
.pd-o-label { left: 3%; bottom: 10%; --r: -5deg; --z: 1; }
.pd-stage .pd-head { margin-bottom: 28%; }
@media (min-width: 768px) {
  .pd-stage { min-height: 720px; }
  .pd-stage .pd-head { margin-bottom: 200px; }
  .pd-o-box { left: 4%; top: 10%; width: 180px; }
  .pd-o-stamp { right: 5%; top: 8%; width: 190px; }
  .pd-o-pile { bottom: -2%; width: 270px; margin-left: -135px; }
  .pd-o-light { right: 9%; bottom: 8%; width: 130px; }
  .pd-o-label { left: 9%; bottom: 14%; }
}
@media (prefers-reduced-motion: no-preference) {
  .pd-o { animation: gx-float 7s ease-in-out infinite alternate; }
  .pd-o-stamp { animation-delay: -2s; } .pd-o-light { animation-delay: -4s; } .pd-o-pile { animation-delay: -5s; }
}

/* Nov 10, phone pass at 375px. Bingo squares never split a word mid-letter. */
.sc-story .sc-bg { container-type: inline-size; }
.sc-story .sc-bg-c { overflow-wrap: normal; hyphens: manual; padding: 3px 1px; font-size: clamp(9px, 2.85cqw, 13.5px); letter-spacing: -0.01em; }
@media (max-width: 359px) { .pe .sc-bg { width: calc(100% + 14px); margin-left: -14px; } }
@media (min-width: 960px) and (max-width: 1279px) {
  .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) .pa-c-split, .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) .pa-c-art { grid-column: 1 / span 6; }
  .pa-bento:not(.pa-bento-out):not(.pa-bento-loop) .pa-c-bingo { grid-column: 7 / span 6; }
}
@media (max-width: 599px) {
  /* Bento: the tinted cell is already the frame, so the graphic drops its own card instead of nesting. */
  .pa-cell { padding: 16px 14px; }
  .pa-cell > .gx { padding: 8px 0 0; background: transparent; box-shadow: none; }
  /* Thread: a slimmer rail gives the report card and loop room to breathe. */
  .pe { --pe-x: 9px; padding-left: 28px; }
  .pe-node { left: calc(var(--pe-x) - 28px - 11px); }
  .pe-tool { padding: 16px 12px; }
  /* Windows outcome row: the props sit together, without a tall empty band. */
  .pd-row-out .gx-props { min-height: 240px; }
  .pd-row-out .gx-p-main { width: min(58%, 300px); }
}

/* Nov 11: the dots graph is gone, so the wave stands alone in its row, centred. */
.pb-duo > :only-child, .pe-two > :only-child, .pc-duo-row > :only-child, .pd-row-two > :only-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 680px; margin-inline: auto; }