/* The homepage story: five scenes on one strip, told sideways.
   Each scene is its people, one card and a few large words, on solid white
   (owner, 10 Nov 2026: the scenes had gone from white to dark green, "MAYBE
   THEY ARE TOO DARK? MAYBE MAKE SOLID"). The dark green begins at the section
   under the story.

   Without JavaScript, or with reduced motion, the five scenes are an ordinary
   column. story-journey.js pins the strip, lets the page's own scrolling
   slide it and plays each scene's moments on the way. Every cutout has its
   white edge drawn into its picture (scripts/build-story-sprites.mjs), so
   nothing here filters a moving image.

   In a picture, --x is where a piece stands across it (0 to 100), --y how far
   down a card hangs, --h a piece's height as a share of the picture, and
   --shift moves an actor sideways by a share of the picture's height, for two
   people who must keep their distance whatever the screen. */
.story-journey {
  --ink: #0f3323;
  --ink-soft: #234a33;
  --accent: #17592e;
  --card-ink: #0f3323;
  --card-line: #c3d2bf;                /* the fine line round a card: there is no shadow to lift it off the white */
  --floor-n: .2;                       /* the room under everybody's feet, a share of the picture's height: the dots and arrows sit there */
  --gutter: 32px;
  --content: 1160px;                   /* the top bar's own width, so the edges line up */
  --scene-h: clamp(420px, min(72svh, 62vw), 720px);
  position: relative;
  background: #fff;
  color: var(--ink);
  overflow: clip;
  overflow-anchor: none;
}
/* On a very wide screen the story grows with it, past the top bar's width, so
   the people do not look small in the middle of it (owner, 10 Nov 2026: "THE
   CHARACTERS ARE SMALL, MAYBE IT IS A GOOD IDEA TO MAKE THEM BIGGER"); the
   sides keep more than a tenth of the screen each. */
@media (min-width: 1100px) { .story-journey { --gutter: 56px; --content: max(1560px, 78vw); } }
.story-journey-chapter { position: relative; isolation: isolate; }
.story-flights { display: none; }

/* ---------- a scene: the words beside the picture ---------- */
.story-journey-main {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(24px, 3.4vw, 68px); align-items: end;
  padding-inline: max(var(--gutter), calc((var(--journey-w, 100vw) - var(--content)) / 2));
}
.story-journey-scene { grid-column: 2; grid-row: 1; position: relative; height: var(--scene-h); text-align: left; }
.story-journey-copy { grid-column: 1; grid-row: 1; align-self: center; container-type: inline-size; padding-bottom: calc(var(--scene-h) * var(--floor-n)); }
/* The first two scenes are one place, the counter, with the words on the
   left. From Júlia's sofa on, the picture comes first and the words follow
   it: on the way from one scene to the next the screen then always has a
   picture on it, never two blocks of words alone, and in the last scene Júlia
   walks into the picture from the screen's left edge. */
:is(.story-page-home, .story-page-packing, .story-page-pickup) .story-journey-scene { grid-column: 1; }
:is(.story-page-home, .story-page-packing, .story-page-pickup) .story-journey-copy { grid-column: 2; }

/* As large as the column allows: a line of sixteen letters, SEU SUPERMERCADO,
   fills it, and a longer one breaks. */
/* The words' size (owner, 10 Nov 2026, of headings near 100 px and a reading text near 30 on a desktop: "THE
   TITLES AND NORMAL TEXTS ARE STILL TOO BIG"): about a fifth smaller than they were. */
.story-journey-copy h1, .story-journey-copy h2 { margin: 0; color: var(--ink); font: 700 clamp(34px, 4.4vw, 66px)/.94 'Barlow Condensed', sans-serif; letter-spacing: -.012em; text-transform: uppercase; }
@supports (font-size: 1cqw) { .story-journey-copy h1, .story-journey-copy h2 { font-size: clamp(32px, 10cqw, 92px); } }
.story-journey-copy h1 > span, .story-journey-copy h1 > em { display: inline-block; }
.story-journey-copy h2 > span, .story-journey-copy h2 > em { display: block; }
.story-journey-copy em { font-style: normal; color: var(--accent); }
.story-journey-copy > p { max-width: 36ch; margin: clamp(16px, 4cqw, 30px) 0 0; color: var(--ink-soft); font-size: 20px; line-height: 1.42; text-wrap: pretty; }
@media (min-width: 1100px) { .story-journey-copy > p { font-size: clamp(20px, 3.1cqw, 26px); } }
.story-journey-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(22px, 5cqw, 38px); }
.story-journey-actions .cta { min-height: 58px; padding: 16px 34px; font-size: 18px; }
/* No shadow in a scene: the button is flat here, as the cards are. */
.story-journey-actions .cta, .story-journey-actions .cta:hover, .story-journey-actions .cta:active { box-shadow: none; }
.story-journey-more { color: var(--ink); font-size: 19px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.story-journey-more:hover { color: var(--accent); }
.story-journey-more:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* ---------- the picture ---------- */
.story-actor {
  position: absolute; z-index: 3; left: calc(var(--x) * 1% + var(--scene-h) * var(--shift, 0)); bottom: calc(var(--scene-h) * var(--floor-n) * var(--stand, .56)); height: calc(var(--h) * 1%);
  aspect-ratio: var(--ratio); transform: translate3d(calc(-50% + var(--dx, 0px)), 0, 0); pointer-events: none;
  background-repeat: no-repeat; background-size: calc(var(--cols, 1) * 100%) calc(var(--rows, 1) * 100%); background-position: var(--fx, 0%) var(--fy, 0%);
}
.story-actor > img { display: block; width: 100%; height: 100%; }
.story-actor.is-sheet { background-image: var(--sheet); }
.story-actor.is-sheet > img { visibility: hidden; }
/* A walker is not there before its first step. */
.story-actor.is-away { visibility: hidden; }
.story-prop { position: absolute; z-index: 1; left: calc(var(--x) * 1%); bottom: calc(var(--scene-h) * var(--floor-n) * var(--sit, .86)); height: calc(var(--h) * 1%); width: auto; max-width: none; transform: translate3d(-50%, 0, 0); }

/* What a screen says at each moment: one card a scene, in words large enough
   to read at a glance. A card belongs to its picture, so it is sized in em
   from the picture's height (--card): it never outgrows the people beside it. */
.story-journey { --card: clamp(15px, calc(var(--scene-h) * .0235), 26px); }
/* Flat and sharp (owner, 10 Nov 2026, of the scenes: "REMOVING ALL THE SHADOWS", "USING SHARP CARDS ONLY INSTEAD OF
   ROUNDED ONES", "FOR THE CARD TEXTS ... USE THE FONT URBANIST"): a card is a white square-cornered sheet with a fine
   line round it, its words in Urbanist at the weights of the page's text, where they were at its two heaviest. The
   only round things left are a button (Divulgar) and the two marks. */
.story-card { position: absolute; z-index: 4; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); display: flex; flex-direction: column; gap: .55em; width: 18.2em; padding: .95em; border: 1px solid var(--card-line); background: #fff; color: var(--card-ink); font-family: 'Urbanist', system-ui, sans-serif; font-size: var(--card); font-weight: 600; line-height: 1.25; }
.story-card-title { font-size: 1.2em; font-weight: 700; line-height: 1.15; }
.story-card-from { display: flex; align-items: center; gap: .5em; color: #1f5137; font-weight: 700; }
.story-card-from img { width: auto; height: 1.4em; }
.story-card-row { display: flex; align-items: center; gap: .6em; min-height: 2.85em; padding: .3em .75em .3em .45em; background: #f1f6ed; white-space: nowrap; }
.story-card-row img { flex: none; width: 2.2em; height: 2.2em; object-fit: contain; }
.story-card-row b { margin-left: auto; padding-left: .4em; font-weight: 700; }
.story-card-foot { display: grid; margin-top: .1em; }
.story-card-foot > * { grid-area: 1 / 1; }
.story-card-action { display: grid; place-items: center; min-height: 2.65em; border-radius: 999px; background: #ffc72c; color: #0b1f14; font-weight: 700; }
.story-card-done { display: flex; align-items: center; gap: .55em; min-height: 2.65em; padding: 0 .75em 0 .6em; background: #e0f3d9; color: #0f5a2e; font-weight: 700; white-space: nowrap; }
.story-card-done::before { content: ''; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; background: #0f7a41 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 12.5 3.4 3.4L17 8.8'/%3E%3C/svg%3E") center / 100% no-repeat; }
.story-card-done.is-whatsapp::before { border-radius: 0; background: url('img/app/whatsapp.svg') center / contain no-repeat; }
/* A conversation on WhatsApp, in WhatsApp's own look (owner, 11 Nov 2026, of the flat square lines it had: "PLEASE
   USE THE WHATSAPP BACKGROUND HERE AND THE MESSAGE BUBLE STYLES"): the store's name over the chat's wallpaper, the
   store's messages on the left in white, Júlia's on the right in WhatsApp's pale green, each a rounded bubble with
   the corner by its edge square. It is the one card with round corners, as WhatsApp's own things are everywhere on
   the site; like the rest of the scene it has no shadow, and its words stay in Urbanist. */
.story-chat { gap: 0; padding: 0; }
.story-chat .story-card-from { padding: .7em .95em; border-bottom: 1px solid var(--card-line); }
.story-chat-thread { display: flex; flex-direction: column; gap: .5em; padding: .85em .8em; background: #e9e4d7 url('img/app/whatsapp-chat-bg.webp') center / 20em; }
.story-chat-in, .story-chat-out, .story-chat-thread > .story-card-done { justify-self: start; align-self: flex-start; max-width: 90%; padding: .5em .72em; border-radius: .6em; border-top-left-radius: 0; background: #fff; color: #0b1f14; font-weight: 500; }
.story-chat-out { justify-self: end; align-self: flex-end; border-top-left-radius: .6em; border-top-right-radius: 0; background: #d9fdd3; }
/* The PIX confirmed is the store's last message: a bubble like its others, with the mark of done. */
.story-chat-thread > .story-card-done { min-height: 0; gap: .45em; color: #0f5a2e; font-weight: 700; }
/* What was said stays in the conversation. */
[data-journey-enhanced] .story-chat .story-chat-line.is-off { opacity: 1; translate: none; scale: none; }
/* The last scene's card is its one line. */
.story-card-delivered { width: max-content; margin: 0; padding: .4em; font-size: calc(var(--card) * 1.12); white-space: nowrap; }
.story-card-delivered .story-card-done { padding-right: .9em; }
/* Agnaldo's idea, the one thing said over a scene. The thought that stood over him before it went on 11 Nov 2026
   (owner, of its box: "REMOVE THIS CHAT BOX"). */
.story-bubble { position: absolute; z-index: 4; right: 0; top: calc(var(--y, 21) * 1%); margin: 0; padding: .6em .85em; border: 1px solid var(--card-line); background: #fff; color: var(--card-ink); font-family: 'Urbanist', system-ui, sans-serif; font-size: calc(var(--card) * 1.3); font-weight: 700; line-height: 1.15; white-space: nowrap; }
.story-bubble-idea { border-color: #ffc72c; background: #ffc72c; }

/* 1. The market, quiet: Agnaldo at his counter. */
.story-actor-counter { --ratio: 1080 / 810; --x: 50; --h: 56; --stand: .46; }
/* 2. The same counter: he opens his laptop on it. The offer he prepares hangs
   where his idea was. The scene has a still of its own for the plain column;
   pinned, it lies over the first scene and shows that scene's Agnaldo. */
img.story-actor-still { width: auto; }
.story-card-offer { --y: 2; left: auto; right: 0; }
/* On a card that lists products, each stays once it is there, under the
   card's title. (On a phone the card is one line at a time, and the title is
   the first of them.) */
[data-journey-enhanced] .story-card-list :is(.story-card-title, .story-card-row).is-off { opacity: 1; translate: none; scale: none; }
/* 3. Júlia at home, on her sofa: the offer reaches her phone. */
.story-actor-sofa { --ratio: 1120 / 760; --x: 53; --h: 48; --stand: .5; }
.story-chat { --x: 0; --y: 4; }
/* 4. João packs, beside the words; the order he packs hangs on the far side. */
.story-actor-joao { --ratio: 460 / 968; --x: 77; --h: 70; }
.story-card-order { --x: 0; --y: 20; }
/* 5. Agnaldo hands Júlia her order. She walks in from the left and stops in
   front of him; he stands a bag's width from her (--shift, a share of the
   picture's height), so their hands meet at any size. */
.story-actor-julia-store { --ratio: 640 / 968; --x: 76; --shift: -.39; --h: 68; z-index: 4; }
.story-actor-agnaldo { --ratio: 640 / 968; --x: 76; --h: 68; }
.story-card-delivered { --y: 7; left: calc(76% - var(--scene-h) * .22); translate: -50% 0; }
[data-journey-enhanced] .story-card-delivered[data-at]:not(.is-on) { translate: -50% 12px; }

/* The plain column shows each scene's last moment, except the first, which
   shows the question the story starts from. */
.story-journey:not([data-journey-enhanced]) .story-journey-chapter { overflow: clip; }
.story-journey:not([data-journey-enhanced]) .story-journey-main { padding-top: clamp(28px, 5vw, 72px); }
.story-journey:not([data-journey-enhanced]) .story-journey-chapter:not(.story-page-market) [data-until],
.story-journey:not([data-journey-enhanced]) .story-page-market [data-at] { display: none; }
.story-journey:not([data-journey-enhanced]) .story-journey-chapter .story-chat .story-chat-line { display: block; }
.story-journey:not([data-journey-enhanced]) .story-journey-chapter .story-card-list .story-card-row { display: flex; }
.story-journey:not([data-journey-enhanced]) .story-journey-chapter .story-card-list .story-card-title { display: block; }

/* ---------- pinned: the strip slides as the page scrolls ---------- */
.story-journey-controls[hidden] { display: none; }
.story-journey[data-journey-enhanced] { --scene-h: var(--strip-h); }
[data-journey-enhanced] .story-journey-runway { height: var(--journey-runway); }
[data-journey-enhanced] .story-journey-stage { position: sticky; top: var(--journey-top); height: var(--journey-h); overflow: hidden; overflow: clip; background: #fff; }
[data-journey-enhanced] .story-journey-world { position: relative; display: flex; width: max-content; height: 100%; will-change: transform; }
[data-journey-enhanced] .story-journey-chapter { display: flex; flex: none; align-items: flex-end; height: 100%; background: none; }
[data-journey-enhanced] .story-journey-main { flex: none; width: var(--journey-w); height: 100%; }
/* A window taller than the picture can be (the picture is as large as the
   screen's width allows): the height left over (--spare, from
   story-journey.js) goes above the scene and under the dots, two parts to
   three, so the words and the picture stay together in the middle. */
[data-journey-enhanced] .story-journey-main { padding-block: calc(var(--spare, 0px) * .4) calc(var(--spare, 0px) * .6); }
/* A scene in the same place as the one before it lies over it: its picture is
   that scene's, and its words take the place of that scene's words. */
[data-journey-enhanced] [data-journey-same] { margin-left: calc(var(--journey-w) * -1); pointer-events: none; }
[data-journey-enhanced] .story-actor-still { display: none; }
[data-journey-enhanced] .story-journey-copy { opacity: var(--words, 1); }
[data-journey-enhanced] .is-silent .story-journey-copy { visibility: hidden; }
/* The pictures of a scene far from the screen are not painted; its words stay for a screen reader. */
[data-journey-enhanced] .story-journey-chapter.is-far .story-journey-scene { visibility: hidden; }
/* Between two places only one is in sight (story-journey.js, STEP): the scene
   being left fades where it stands, then the next one comes. */
[data-journey-enhanced] .story-journey-chapter { opacity: var(--seen, 1); }
[data-journey-enhanced] .story-journey-chapter.is-gone { visibility: hidden; }
/* Playing by itself, the story goes round: the last scene fades before the page is taken back to the first. */
[data-journey-enhanced] .story-journey-world { transition: opacity .36s ease; }
[data-journey-enhanced] .is-turning .story-journey-world { opacity: 0; }
[data-journey-enhanced] .story-flights { display: block; position: absolute; z-index: 6; left: 0; bottom: calc(var(--spare, 0px) * .6); width: 100%; height: var(--scene-h); pointer-events: none; }
.story-flight { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.story-flight-message { width: clamp(38px, 3.6vw, 60px); margin: -18px 0 0 -26px; color: var(--card-ink); }
.story-flight-message svg { display: block; width: 100%; fill: #fff; stroke: currentColor; stroke-width: 2.4; stroke-linejoin: round; }

/* A card, and each line of it, comes in when its moment does. */
[data-journey-enhanced] [data-at], [data-journey-enhanced] [data-until] { transition: opacity .28s ease, translate .28s ease, scale .28s ease; }
[data-journey-enhanced] [data-at]:not(.is-on) { opacity: 0; translate: 0 12px; scale: .97; }
[data-journey-enhanced] [data-until].is-off { opacity: 0; translate: 0 -8px; scale: .97; }
/* On a wide screen a card grows as its lines arrive: a line that is not there
   yet takes no room, so no card ever stands half empty. Each line has its
   full height as a limit, for the height to open and close smoothly. */
@media (min-width: 901px) and (min-aspect-ratio: 2301/2000) {
  [data-journey-enhanced] .story-card :is(.story-card-row, .story-chat-line, .story-chat-thread > .story-card-done, .story-card-foot[data-at]) { overflow: hidden; max-height: 5.2em; transition: opacity .3s ease, max-height .36s ease, min-height .36s ease, padding .36s ease, margin .36s ease; }
  [data-journey-enhanced] .story-card :is(.story-card-row, .story-chat-thread > .story-card-done, .story-card-foot[data-at]) { max-height: 2.85em; }
  [data-journey-enhanced] .story-card :is(.story-card-row, .story-chat-line, .story-chat-thread > .story-card-done, .story-card-foot[data-at])[data-at]:not(.is-on) { max-height: 0; min-height: 0; margin-block: 0 -.55em; padding-block: 0; opacity: 0; translate: none; scale: none; }
}
/* Agnaldo has left the counter: his idea goes with him. */
[data-journey-enhanced] .is-left .story-bubble-idea { opacity: 0; translate: 0 -8px; }

/* Where the story is: five dots between two arrows, under everybody's feet. */
.story-journey-controls { position: absolute; z-index: 8; left: 50%; bottom: calc(var(--spare, 0px) * .6 + clamp(8px, 2.2vh, 24px)); translate: -50% 0; display: flex; align-items: center; gap: 4px; color: var(--ink); }
.story-journey-controls button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.story-journey-controls button svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.story-journey-controls button:hover:not(:disabled) { background: rgb(128 140 132 / 22%); }
.story-journey-controls button:disabled { opacity: .28; cursor: default; }
.story-journey-controls button:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
.story-journey-dots { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
.story-journey-dots i { width: 9px; height: 9px; border-radius: 999px; background: currentColor; opacity: .26; transition: width .25s ease, opacity .25s ease; }
[data-journey-active='0'] .story-journey-dots i:nth-child(1),
[data-journey-active='1'] .story-journey-dots i:nth-child(2),
[data-journey-active='2'] .story-journey-dots i:nth-child(3),
[data-journey-active='3'] .story-journey-dots i:nth-child(4),
[data-journey-active='4'] .story-journey-dots i:nth-child(5) { width: 30px; opacity: 1; }
.story-journey-count { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The story plays by itself until the visitor scrolls or pauses it
   (story-journey.js). The button hangs off the end of the row, so the dots
   stay in the middle of the screen; it shows a pause while the story plays. */
.story-journey-controls .story-journey-auto { position: absolute; left: calc(100% + 4px); top: 50%; translate: 0 -50%; }
.story-journey-auto svg[data-icon='pause'], [data-journey-autoplay] .story-journey-auto svg[data-icon='play'] { display: none; }
[data-journey-autoplay] .story-journey-auto svg[data-icon='pause'] { display: block; }

/* Phones, tablets held upright, and any window taller than it is wide (half
   of a large monitor): the words first, the picture under them. */
@media (max-width: 900px), (max-aspect-ratio: 23/20) {
  /* More room under the feet here: the dots and arrows must not touch them. */
  .story-journey { --scene-h: clamp(300px, 86vw, 470px); --floor-n: .3; --gutter: 20px; }
  /* The plain column's picture grows with a tablet or a tall window (a browser
     without svh keeps the line above: a variable has no second try). */
  @supports (height: 1svh) { .story-journey { --scene-h: clamp(300px, min(86vw, 60svh), 720px); } }
  .story-actor { --stand: .76; }
  .story-journey-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto var(--scene-h); padding-inline: 0; }
  .story-journey-main > .story-journey-copy { grid-column: 1; grid-row: 1; align-self: start; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: var(--copy-h, 0px); padding: clamp(14px, 2.6vh, 30px) var(--gutter) 10px; text-align: center; }
  .story-journey-main > .story-journey-scene { grid-column: 1; grid-row: 2; }
  .story-journey-copy :is(h1, h2) { font-size: clamp(32px, 11.4cqw, 84px); }
  .story-journey-copy > p { max-width: 38ch; margin: 12px 0 0; font-size: clamp(19px, 2.8cqw, 24px); line-height: 1.34; text-wrap: balance; }
  .story-journey-actions { justify-content: center; gap: 12px 22px; margin-top: 16px; }
  .story-journey-actions .cta { min-height: 52px; padding: 13px 28px; font-size: 17px; }
  .story-journey-more { font-size: 18px; }
  /* A tablet, and a window taller than wide: larger words, so the button and
     the paragraph keep up with them. */
  @media (min-width: 600px) {
    .story-journey-main > .story-journey-copy { padding-bottom: 24px; }
    .story-journey-actions { gap: 16px 28px; margin-top: 20px; }
    .story-journey-actions .cta { min-height: 58px; padding: 16px 34px; font-size: 18px; }
    .story-journey-more { font-size: 19px; }
  }
  .story-journey:not([data-journey-enhanced]) .story-journey-main { padding-top: 12px; }
  /* Cards a little smaller than on a wide screen, and never under 15 px. */
  .story-journey { --card: clamp(15px, calc(var(--scene-h) * .052), 19px); }
  @media (min-width: 600px) { .story-journey { --card: clamp(15px, calc(var(--scene-h) * .036), 26px); } }
  .story-card { width: 13.4em; padding: .8em; }
  .story-card-row b, .story-chat-more { display: none; }
  .story-card-done { white-space: normal; line-height: 1.15; padding-block: .3em; }
  /* The picture is small here: the conversation is one line at a time, in a
     strip above Júlia's head, with the WhatsApp mark for the store's name. */
  .story-chat { flex-direction: row; align-items: center; gap: .5em; width: auto; max-width: 94%; padding: .5em .65em .5em .75em; background: #e9e4d7 url('img/app/whatsapp-chat-bg.webp') center / 20em; }
  .story-chat .story-card-from { padding: 0; border: 0; }
  .story-chat-thread { padding: 0; background: none; }
  .story-chat .story-card-name { display: none; }
  .story-chat .story-card-from img { height: calc(var(--card) * 1.7); }
  .story-chat-thread { display: grid; align-items: center; }
  .story-chat-thread > * { grid-area: 1 / 1; }
  .story-chat-in, .story-chat-out { justify-self: start; align-self: center; max-width: none; white-space: nowrap; }
  .story-chat .story-card-done { white-space: nowrap; }
  [data-journey-enhanced] .story-chat .story-chat-line.is-off { opacity: 0; translate: 0 -8px; scale: .97; }
  .story-journey:not([data-journey-enhanced]) .story-journey-chapter .story-chat .story-chat-line { display: none; }
  /* What hangs beside a head keeps near it: on a wide window the people are
     in the middle, far from the screen's edge. */
  .story-bubble { right: max(4%, calc(50% - var(--scene-h) * .62)); font-size: calc(var(--card) * 1.15); }
  /* 1 */
  .story-actor-counter { --h: 60; --stand: .7; }
  .story-bubble { --y: 1; }
  /* A card that lists products is one line at a time here, in a strip over
     the scene: the picture is small, and the people keep their room. Its
     title is the first line, so the strip never stands empty. */
  .story-card-list { top: 2px; left: 50%; right: auto; translate: -50% 0; display: grid; align-items: center; width: auto; padding: .4em; }
  .story-card-list > * { grid-area: 1 / 1; }
  .story-card-list .story-card-action { display: none; }
  .story-card-list .story-card-title { display: flex; align-items: center; min-height: 2.65em; padding: 0 .9em; font-size: 1em; white-space: nowrap; }
  .story-card-list .story-card-row { min-height: 2.65em; padding-right: .9em; }
  .story-card-list .story-card-row b { display: inline; }
  .story-card-list .story-card-foot { margin: 0; }
  .story-card-list .story-card-done { white-space: nowrap; }
  [data-journey-enhanced] .story-card-list[data-at]:not(.is-on) { translate: -50% 12px; }
  [data-journey-enhanced] .story-card-list :is(.story-card-title, .story-card-row).is-off { opacity: 0; translate: 0 -8px; scale: .97; }
  .story-journey:not([data-journey-enhanced]) .story-journey-chapter .story-card-list :is(.story-card-title, .story-card-row) { display: none; }
  /* 3 */
  /* The sofa is the widest thing in the story: it stops short of the screen's edges. */
  .story-actor-sofa { --x: 50; --h: 60; --stand: .72; height: min(calc(var(--h) * 1%), calc(var(--journey-w, 100vw) * .62)); }
  .story-chat { --y: 2; left: auto; right: max(3%, calc(50% - var(--scene-h) * .62)); }
  /* 4 */
  .story-actor-joao { --x: 50; --h: 62; }
  /* 5 */
  /* The two of them stand either side of the middle, a bag's width apart. */
  .story-actor-julia-store { --x: 50; --shift: -.2; --h: 60; }
  .story-actor-agnaldo { --x: 50; --shift: .2; --h: 60; }
  .story-card-delivered { top: 2px; left: 50%; translate: -50% 0; padding: .35em; }
}
@media (max-width: 700px) {
  .story-journey-copy > p { font-size: 18px; }
}
/* A short phone: the button in the top bar is enough, the picture needs the room. */
@media (max-width: 900px) and (max-height: 640px) {
  [data-journey-enhanced] .story-journey-actions { display: none; }
}
/* A low, wide screen: the cards are at their smallest letter, so they give up a
   little padding to stay clear of the heads under them. */
@media (min-width: 901px) and (min-aspect-ratio: 2301/2000) and (max-height: 800px) {
  .story-card { gap: .45em; padding: .8em; }
  .story-card-offer, .story-chat { --y: 1; }
}