/* ============================================================================
   ASTROVE CANADA — DOCUMENT STYLES
   ----------------------------------------------------------------------------
   Night for the arrival, daylight from the table down. One display face, one
   text face, both already self-hosted. Territory colour enters as a mark: the
   fruit chapters through --cv-territory, and the same 3 px bar beside a
   fruit's name wherever it is linked (index rail, mobile menu, occasions,
   next-fruit route). No gradients as decoration, no borders as decoration;
   rules and space do the structure. The one carded surface is the occasions
   grid, on the day-lift ground.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--cv-night); scroll-padding-top: 4rem; }
body {
  margin: 0; background: var(--cv-day); color: var(--cv-ink);
  font-family: var(--cv-font-text); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3 { font-family: var(--cv-font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6.5vw, 5rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; }
h3 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cv-signal); outline-offset: 3px; }
.cv-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cv-eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cv-ink-faint); margin-bottom: 0.9rem; }
.cv-lede { max-width: var(--cv-measure); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; margin-top: 1.4rem; color: var(--cv-ink-soft); }
.cv-note { font-size: 0.85rem; color: var(--cv-ink-faint); max-width: var(--cv-measure); }

/* The territory mark: a short 3 px bar in the chapter's colour, used before
   a fruit's name wherever it is linked. Never as text colour (an index set in
   a territory hue measured 1.7 to 2.6:1 on ivory, axe, checkpoint 04b). */
.cv-fruit__index::before, .cv-fruits__index a::before, .cv-menu__panel a[data-sku]::before, .cv-occasion__fruits a::before { content: ''; flex: none; height: 3px; background: var(--cv-territory); }

.cv-skip { position: absolute; left: var(--cv-gutter); top: -4rem; background: var(--cv-ink); color: var(--cv-bone); padding: 0.6rem 1rem; z-index: 20; }
.cv-skip:focus { top: 0.5rem; }
.cv-prototype { background: var(--cv-ink); color: var(--cv-bone-dim); font-size: 0.78rem; padding: 0.45rem var(--cv-gutter); letter-spacing: 0.02em; }

.cv-mast { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1.5rem; padding: 0.9rem var(--cv-gutter);
  background: color-mix(in srgb, var(--cv-night) 78%, transparent); color: var(--cv-bone); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cv-mast__brand { font-family: var(--cv-font-display); font-size: 1.3rem; letter-spacing: 0.12em; text-decoration: none; }
.cv-mast__nav { display: flex; gap: 1.2rem; margin-left: auto; font-size: 0.9rem; }
.cv-mast__nav a { text-decoration: none; color: var(--cv-bone-dim); }
.cv-mast__nav a:hover { color: var(--cv-bone); }
/* The inline nav carries the three chapters from 641 px; the discovery and
   information links join from 900 px, where six labels fit beside the brand
   and the language switch in both languages. */
.cv-mast__nav a[data-nav="secondary"] { display: none; }
@media (min-width: 900px) { .cv-mast__nav a[data-nav="secondary"] { display: inline; } }
/* large phones held sideways (932x430, 956x440) are wide enough for the secondary links but not for them and the language switch:
   keep the header as it is at 896 so nothing is pushed off the right edge */
@media (min-width: 900px) and (max-height: 520px) and (orientation: landscape) { .cv-mast__nav a[data-nav="secondary"] { display: none; } }
.cv-mast__lang { display: inline-flex; align-items: baseline; gap: 0.45rem; text-decoration: none; border: 1px solid var(--cv-rule-night); padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.85rem; }
.cv-mast__lang span { font-weight: 500; letter-spacing: 0.06em; }
.cv-mast__lang em { font-style: normal; color: var(--cv-bone-dim); }
@media (max-width: 640px) { .cv-mast { gap: 0.8rem; } .cv-mast__nav { display: none; } .cv-mast__lang { margin-left: auto; } }

/* Mobile menu: a native disclosure in the mast, no script. Open, its panel
   hangs from the mast's bottom edge on the night-lift ground and lists the
   table, the five fruits, the process, the discovery and information
   sections and the other language. The summary's chevron turns when open;
   the summary closes it again. */
.cv-menu { position: static; }
.cv-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid var(--cv-rule-night); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.85rem; color: var(--cv-bone); user-select: none; -webkit-user-select: none; }
.cv-menu > summary::-webkit-details-marker { display: none; }
.cv-menu > summary::after { content: ''; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); transition: transform 160ms ease; }
.cv-menu[open] > summary::after { transform: translateY(0.12rem) rotate(-135deg); }
.cv-menu__panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; background: var(--cv-night-lift); color: var(--cv-bone); padding: 0.4rem var(--cv-gutter) max(1rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cv-rule-night); max-height: calc(100vh - 4rem); max-height: calc(100svh - 4rem); overflow-y: auto; }
.cv-menu__panel a { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0; text-decoration: none; color: var(--cv-bone); border-bottom: 1px solid var(--cv-rule-night); font-size: 1rem; }
.cv-menu__panel a:last-child { border-bottom: 0; }
.cv-menu__panel a[data-sku] { font-family: var(--cv-font-display); font-size: 1.35rem; padding: 0.7rem 0; }
.cv-menu__panel a[data-sku]::before { width: 1.2rem; }
.cv-menu__panel .cv-menu__lang { margin-top: 0.4rem; gap: 0.5rem; align-items: baseline; }
.cv-menu__lang span { font-weight: 500; letter-spacing: 0.06em; }
.cv-menu__lang em { font-style: normal; color: var(--cv-bone-dim); }
@media (min-width: 641px) { .cv-menu { display: none; } }

/* Arrival: a tall native-scroll track with a pinned stage. The fallback
   table sits in the HTML and is visible from the first paint. */
.cv-descent { position: relative; height: 420vh; background: var(--cv-night); color: var(--cv-bone); }
.cv-descent__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cv-descent__fallback, .cv-descent__stage { position: absolute; inset: 0; }
.cv-descent__fallback img, .cv-descent__stage canvas, .cv-descent__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-descent__still { transition: opacity 120ms linear; }
/* Candidate review only: a composed product frame is shown whole, on the
   night ground, so every pack front survives any viewport; the default
   received media keeps cover. */
.cv-descent__still[data-fit="contain"] { object-fit: contain; background: var(--cv-night); }
.cv-descent[data-candidate-fit="contain"] .cv-descent__fallback img { object-fit: contain; background: var(--cv-night); }
.cv-descent__stage[hidden] { display: none; }
.cv-descent__frames { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* --cv-hud-lift is set by the controller: while the pinned stage's bottom
   sits below the viewport (first paint, under the header and the prototype
   notice), the HUD is lifted by that overflow so the DRAFT badge and the
   controls are inside the first screen in every mode. */
.cv-descent__hud { position: absolute; left: var(--cv-gutter); bottom: calc(max(1.5rem, env(safe-area-inset-bottom, 0px)) + var(--cv-hud-lift, 0px)); display: grid; gap: 0.5rem; max-width: 22rem; width: calc(100% - 2 * var(--cv-gutter)); }
.cv-descent__notice { font-size: 0.72rem; line-height: 1.35; color: var(--cv-signal); letter-spacing: 0.02em; margin: 0; }
.cv-descent[data-frames-loading="true"] .cv-descent__shot::after { content: ' …'; color: var(--cv-bone-dim); }
/* The scrim is the element's own background (not a pseudo-element), so its
   composited colour is determinable by tools and by eye: 78% night over any
   frame leaves bone text above 7:1. */
.cv-descent__hud { background: color-mix(in srgb, var(--cv-night) 78%, transparent); padding: 1.1rem 1.3rem; border-radius: 0.9rem; }
.cv-descent__draft { font-family: var(--cv-font-text); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-night); background: var(--cv-signal); padding: 0.25rem 0.6rem; border-radius: 0.3rem; justify-self: start; }
.cv-descent__shot { font-family: var(--cv-font-display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1; }
.cv-descent__hint { font-size: 0.8rem; color: var(--cv-bone-dim); letter-spacing: 0.08em; text-transform: uppercase; }
.cv-descent__bar { height: 2px; background: var(--cv-rule-night); }
.cv-descent__bar i { display: block; height: 100%; width: calc(var(--u, 1) * 100%); background: var(--cv-bone); }
.cv-descent__skip { justify-self: start; margin-top: 0.4rem; font-size: 0.85rem; color: var(--cv-bone); text-decoration: none; border: 1px solid var(--cv-rule-night); padding: 0.55rem 1rem; border-radius: 999px; background: color-mix(in srgb, var(--cv-night) 55%, transparent); }
.cv-descent[data-descent-mode="still"], .cv-descent[data-descent-mode="fallback"] { height: 100vh; height: 100svh; }
.cv-descent[data-descent-mode="still"] .cv-descent__hint, .cv-descent[data-descent-mode="fallback"] .cv-descent__hint, .cv-descent[data-descent-mode="still"] .cv-descent__skip { display: none; }
@media (prefers-reduced-motion: reduce) { .cv-descent { height: 100vh; height: 100svh; } .cv-descent__hint, .cv-descent__skip { display: none; } .cv-descent__still { transition: none; } }
/* The compact HUD: a thin full-width strip along the bottom edge, below the
   pack bottoms of the terminal composition. Used (a) on landscape phones at
   any shot (04d rotation proof: the panel sat over the left pouches) and (b)
   from u 0.78 on EVERY viewport (checkpoint 05 actual-frame proof:
   at u 1 the panel covered the Alphonso pack on desktop and the bottom row
   on portrait phones). The badge keeps its own wrapping row so provenance
   stays readable without widening the strip. */
@media (max-height: 520px) and (orientation: landscape) {
  .cv-descent__hud { left: 0; right: 0; bottom: var(--cv-hud-lift, 0px); width: 100%; max-width: none; border-radius: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.4rem var(--cv-gutter); background: color-mix(in srgb, var(--cv-night) 82%, transparent); }
  .cv-descent__notice { display: none; }
  .cv-descent__hint { display: none; }
  .cv-descent__shot { font-size: 1rem; white-space: nowrap; }
  .cv-descent__bar { flex: 1; min-width: 4rem; }
  .cv-descent__skip { margin-top: 0; padding: 0.35rem 0.8rem; font-size: 0.8rem; white-space: nowrap; }
  .cv-descent__draft { font-size: 0.6rem; padding: 0.2rem 0.45rem; flex-basis: 100%; }
}
.cv-descent[data-descent-terminal="true"] .cv-descent__hud { left: 0; right: 0; bottom: var(--cv-hud-lift, 0px); width: 100%; max-width: none; border-radius: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.4rem var(--cv-gutter); background: color-mix(in srgb, var(--cv-night) 82%, transparent); }
.cv-descent[data-descent-terminal="true"] .cv-descent__hint { display: none; }
.cv-descent[data-descent-terminal="true"] .cv-descent__shot { font-size: 1rem; white-space: nowrap; }
.cv-descent[data-descent-terminal="true"] .cv-descent__bar { flex: 1; min-width: 4rem; }
.cv-descent[data-descent-terminal="true"] .cv-descent__skip { margin-top: 0; padding: 0.35rem 0.8rem; font-size: 0.8rem; white-space: nowrap; }
.cv-descent[data-descent-terminal="true"] .cv-descent__draft { font-size: 0.6rem; padding: 0.2rem 0.45rem; flex-basis: 100%; }
.cv-descent[data-descent-terminal="true"] .cv-descent__notice { flex-basis: 100%; font-size: 0.62rem; }

/* Territory colours per SKU, from content/canada/skus.js. In the stylesheet
   rather than inline style attributes, because the engine's CSP hashes its
   inline styles and would report every attribute. Any element carrying
   data-sku (a chapter, a rail link, a menu row, an occasion card, a route)
   gets its fruit's territory. */
[data-sku="alphonso-mango"] { --cv-territory: var(--cv-alphonso-mango); --cv-territory-ink: #3a1d05; }
[data-sku="java-plum"] { --cv-territory: var(--cv-java-plum); --cv-territory-ink: #f6ecff; }
[data-sku="pineapple"] { --cv-territory: var(--cv-pineapple); --cv-territory-ink: #2a2605; }
[data-sku="pink-guava"] { --cv-territory: var(--cv-pink-guava); --cv-territory-ink: #3b0a18; }
[data-sku="papaya"] { --cv-territory: var(--cv-papaya); --cv-territory-ink: #3a1406; }

main { max-width: var(--cv-wide); margin: 0 auto; padding: 0 var(--cv-gutter); }
.cv-table { position: relative; padding: calc(clamp(3rem, 8vw, 6rem) + clamp(3rem, 8vh, 5.5rem)) 0 clamp(2rem, 5vw, 4rem); }
/* Jay 17 Oct: no hard cut from the dusk valley to the page; the stone's shaded edge dissolves into the paper */
.cv-table::before { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; top: 0; /* full bleed (body clips overflow-x) */ height: clamp(4rem, 11vh, 7.5rem); background: linear-gradient(180deg, rgb(128, 118, 119) 0%, rgba(176, 168, 164, 0.75) 35%, rgba(243, 236, 223, 0) 100%); pointer-events: none; }
/* Two routes out of the table: a primary button into the fruit, a quiet one
   to the process. Same pill as every other control on the page. */
.cv-table__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.cv-table__packs { list-style: none; padding: 0; margin: clamp(2rem, 5vw, 3.5rem) 0 1.2rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.6rem); border-top: 1px solid var(--cv-rule); padding-top: 1.6rem; }
.cv-table__pack a { display: grid; gap: 0.5rem; text-decoration: none; }
.cv-table__pack img { width: 100%; height: auto; display: block; }
.cv-table__pack span { font-family: var(--cv-font-display); font-size: 1.1rem; }
.cv-table__pack em { font-style: normal; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-ink-faint); }
/* Territory as a mark on hover, never as small text colour on ivory (1.7 to 2.6:1). */
.cv-table__pack a:hover span, .cv-table__pack a:focus-visible span { text-decoration: underline; text-decoration-color: var(--cv-territory); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
@media (max-width: 760px) { .cv-table__packs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cv-table__pack:nth-child(n+4) { grid-column: span 1; } }
@media (max-width: 460px) { .cv-table__packs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cv-fruits { padding: clamp(3rem, 8vw, 6rem) 0 0; border-top: 1px solid var(--cv-rule); }
/* Index rail: the five fruits as pills under the chapter heading, each with
   its territory mark. The first article's own top padding spaces it. */
.cv-fruits__index { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--cv-rule); }
.cv-fruits__index a { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; border: 1px solid var(--cv-rule); border-radius: 999px; padding: 0.45rem 0.9rem 0.45rem 0.8rem; font-size: 0.9rem; }
.cv-fruits__index a::before { width: 0.9rem; }
.cv-fruits__index a:hover { border-color: var(--cv-territory); }
/* The fruit chapter: the product is the subject. Every received master is a
   cutout (packs 32 %, piles 48 %, macros 58 % transparent), so the three
   shots sit directly on the day ground, no box, centred in a stage whose
   height follows the viewport: the stage, its three stations and the name
   share one screen on a 1440×900 desktop and a 390×844 phone. Desktop: the
   stage on the left spans two equal rows from their top (so longer French
   facts never push its controls below the fold); the name sits at the end
   of the first row and the facts at the start of the second, so the text
   straddles the stage's middle. Phone: name, stage, facts, in that order. */
.cv-fruit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; grid-template-areas: "media head" "media body"; align-content: center; column-gap: clamp(1.5rem, 5vw, 5rem); padding: clamp(3rem, 7vw, 6rem) 0; border-top: 1px solid var(--cv-rule); }
.cv-fruit:first-of-type { border-top: 0; }
.cv-fruit__head { grid-area: head; align-self: end; padding-bottom: 0.3rem; }
.cv-fruit__body { grid-area: body; align-self: start; }
.cv-media { grid-area: media; align-self: start; min-width: 0; }
.cv-fruit__index { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--cv-ink-soft); margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.6rem; }
/* The territory colour stays as a mark, not as 12 px text: an index set in
   a territory hue measured 1.7 to 2.6:1 on ivory (axe, checkpoint 04b). */
.cv-fruit__index::before { width: 1.6rem; }
.cv-fruit__subtitle { margin-top: 0.5rem; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--cv-ink-soft); }
.cv-fruit__sense { margin-top: 1.2rem; max-width: 30rem; font-size: 1.1rem; line-height: 1.55; color: var(--cv-ink-soft); }
/* Product facts: a quiet two-column list under a rule. Ingredient, Added,
   Canada. Small caps for the terms at the faint ink (about 5.2:1), the
   values in the soft ink. */
.cv-fruit__facts { margin: 1.6rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--cv-rule); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55rem 1.4rem; max-width: 30rem; font-size: 0.92rem; line-height: 1.5; }
.cv-fruit__facts > div { display: contents; }
.cv-fruit__facts dt { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cv-ink-faint); padding-top: 0.25em; }
.cv-fruit__facts dd { margin: 0; color: var(--cv-ink-soft); }
/* Routes: small pills. The next-fruit pill carries the next chapter's
   territory on its border and names the fruit. */
.cv-fruit__routes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.cv-fruit__routes a { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; border: 1px solid var(--cv-rule); border-radius: 999px; padding: 0.45rem 0.9rem; font-size: 0.85rem; line-height: 1.3; }
.cv-fruit__routes a:hover { border-color: var(--cv-ink); }
.cv-fruit__routes .cv-fruit__route--next { border-color: var(--cv-territory); }
.cv-fruit__route--next span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-ink-faint); }
.cv-fruit__route--next em { font-style: normal; }
@media (max-width: 820px) { .cv-fruit { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "head" "media" "body"; row-gap: 1.4rem; } .cv-fruit__head, .cv-fruit__body { align-self: auto; } .cv-fruit__head { padding-bottom: 0; } }

.cv-media { display: grid; gap: 0.8rem; }
/* The stage has no ground of its own. Its height comes from the viewport:
   on desktop the viewport less 17.5 rem (mast, chapter padding, stations and
   the control row), between 20 and 46 rem, so the stage and its controls
   share one screen from 820 px of height up; on phones 60 % of the height
   or 1.2 times the width, whichever is less, so a pack reads at about three
   quarters of the screen width and a pile fills it. Shots are centred and
   contained, never stretched, never cropped. */
.cv-media__stage { position: relative; height: clamp(20rem, 100vh - 17.5rem, 46rem); height: clamp(20rem, 100svh - 17.5rem, 46rem); }
.cv-media__shot { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; transform: scale(0.985); transition: opacity 260ms ease, transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.cv-media__shot[data-active="true"] { opacity: 1; transform: none; pointer-events: auto; }
.cv-media__shot picture { display: contents; }
.cv-media__shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.cv-media[data-media-enlargeable] .cv-media__shot img { cursor: zoom-in; }
/* One light from above. A drop-shadow follows each cutout's silhouette: the
   pouch stands, the pieces and the macro sit. It is the stage's only effect. */
.cv-media__shot[data-kind="pack"] img { filter: drop-shadow(0 22px 26px rgba(43, 36, 24, 0.22)); }
.cv-media__shot[data-kind="product-pile"] img { filter: drop-shadow(0 12px 16px rgba(43, 36, 24, 0.16)); }
.cv-media__shot[data-kind="macro"] img { max-height: 96%; filter: drop-shadow(0 16px 22px rgba(43, 36, 24, 0.18)); }
/* Under the stage: the three stations (the primary control), then one quiet
   row with the caption (shot name and its honest status), the count, the
   enlarge control and the two arrows. Controls stay subordinate: small,
   rule-bordered, ink on ivory. */
.cv-media__stations { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cv-media__stations button, .cv-process__addresses button { display: inline-flex; gap: 0.5rem; align-items: baseline; border: 1px solid var(--cv-rule); background: transparent; padding: 0.45rem 0.8rem; border-radius: 999px; cursor: pointer; font-size: 0.85rem; }
.cv-media__stations button span, .cv-process__addresses button span { color: var(--cv-ink-faint); font-variant-numeric: tabular-nums; }
.cv-media__stations button em, .cv-process__addresses button em { font-style: normal; }
.cv-media__stations button:hover { border-color: var(--cv-ink); }
.cv-media__stations button[aria-selected="true"], .cv-process__addresses button[aria-pressed="true"] { background: var(--cv-territory, var(--cv-ink)); color: var(--cv-territory-ink, var(--cv-bone)); border-color: transparent; }
.cv-media__stations button[aria-selected="true"] span, .cv-process__addresses button[aria-pressed="true"] span { color: inherit; }
.cv-media__chrome { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--cv-ink-faint); }
.cv-media__caption { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-right: auto; min-width: 0; }
.cv-media__caption span { color: var(--cv-ink); }
.cv-media__caption em { font-style: normal; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cv-media__arrows { display: flex; gap: 0.4rem; }
.cv-media__arrows button, .cv-process__controls > button { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--cv-rule); background: transparent; cursor: pointer; display: grid; place-items: center; }
.cv-media__arrows button:hover { border-color: var(--cv-ink); }
.cv-media__arrows svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cv-media__enlarge { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--cv-rule); background: transparent; border-radius: 999px; padding: 0.45rem 0.85rem; cursor: pointer; font-size: 0.85rem; color: var(--cv-ink); }
.cv-media__enlarge svg { width: 0.95rem; height: 0.95rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cv-media__enlarge:hover { border-color: var(--cv-ink); }
.cv-media__enlarge[hidden] { display: none; }
/* Narrow phones: the control row becomes two rows, the caption above, then
   the count at the left and the enlarge control with the arrows at the
   right, so nothing wraps mid-row. */
@media (max-width: 480px) { .cv-media__chrome { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "caption caption caption" "count enlarge arrows"; align-items: center; row-gap: 0.6rem; } .cv-media__caption { grid-area: caption; margin-right: 0; } .cv-media__count { grid-area: count; } .cv-media__enlarge { grid-area: enlarge; } .cv-media__arrows { grid-area: arrows; } }
/* Touch: every control in the stage's rows meets a 44 px target. */
@media (pointer: coarse) { .cv-media__stations button, .cv-media__enlarge { min-height: 44px; } .cv-media__arrows button { width: 44px; height: 44px; } }
@media (max-width: 820px) { .cv-media__stage { height: min(60vh, 120vw); height: min(60svh, 120vw); } }
@media (prefers-reduced-motion: reduce) { .cv-media__shot { transition: none; transform: none; } }

/* The enlargement: the page's one modal, a native <dialog> on the night
   ground (the cutouts sit there as they do in the arrival). The image is
   never drawn larger than its own pixels (its width and height attributes
   are the source size) and never larger than the figure's own grid row:
   the image is absolutely centred in the figure, so max-height: 100%
   resolves against the row the two bars leave, however tall they wrap
   (a fixed viewport-minus-9rem cap overlapped the bottom bar at 320×568
   and on a landscape phone). */
.cv-lightbox { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: var(--cv-night); color: var(--cv-bone); }
.cv-lightbox::backdrop { background: var(--cv-night); }
.cv-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.cv-lightbox__bar, .cv-lightbox__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.9rem var(--cv-gutter); }
.cv-lightbox__foot { padding-bottom: max(0.9rem, env(safe-area-inset-bottom, 0px)); }
.cv-lightbox__title { font-family: var(--cv-font-display); font-size: 1.25rem; margin-right: auto; }
.cv-lightbox__close { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--cv-rule-night); background: transparent; color: var(--cv-bone); border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; font-size: 0.85rem; }
.cv-lightbox__close svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cv-lightbox__close:hover, .cv-lightbox .cv-media__arrows button:hover { border-color: var(--cv-bone); }
.cv-lightbox .cv-media__arrows button { border-color: var(--cv-rule-night); color: var(--cv-bone); }
.cv-lightbox__figure { position: relative; margin: 0; min-height: 0; }
.cv-lightbox__figure picture { display: contents; }
.cv-lightbox__figure img { position: absolute; inset: 0 var(--cv-gutter); margin: auto; display: block; width: auto; height: auto; max-width: calc(100% - 2 * var(--cv-gutter)); max-height: 100%; object-fit: contain; }
.cv-lightbox__caption { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-right: auto; font-size: 0.9rem; }
.cv-lightbox__caption em { font-style: normal; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cv-bone-dim); }
.cv-lightbox__count { font-size: 0.85rem; color: var(--cv-bone-dim); font-variant-numeric: tabular-nums; }
html.cv-lightbox-open { overflow: hidden; }
@media (pointer: coarse) { .cv-lightbox__close { min-height: 44px; } }

.cv-process { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--cv-rule); --cv-territory: var(--cv-process); --cv-territory-ink: var(--cv-process-deep); }
.cv-process__steps { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; border-top: 1px solid var(--cv-rule); }
.cv-process__steps li { padding-top: 1rem; }
.cv-process__steps span { font-size: 0.78rem; color: var(--cv-ink-faint); font-variant-numeric: tabular-nums; }
.cv-process__steps strong { display: block; font-family: var(--cv-font-display); font-weight: 400; font-size: 1.5rem; margin: 0.2rem 0 0.4rem; }
.cv-process__steps p { font-size: 0.95rem; color: var(--cv-ink-soft); }
@media (max-width: 760px) { .cv-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cv-process__shell { display: grid; gap: 0.9rem; background: var(--cv-process-deep); color: var(--cv-bone); padding: clamp(1rem, 3vw, 2rem); }
.cv-process__frame { position: relative; aspect-ratio: 16 / 9; background: #020814; overflow: hidden; }
.cv-process__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 320ms ease; }
.cv-process__layer[data-active="true"] { opacity: 1; }
.cv-process__shell[data-process-motion="still"] .cv-process__layer { transition: none; }
.cv-process__caption { font-size: 0.9rem; color: var(--cv-bone); font-variant-numeric: tabular-nums; }
.cv-process__controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cv-process__controls > button { border-color: var(--cv-rule-night); }
.cv-process__controls > button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cv-process__addresses { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cv-process__addresses button { border-color: var(--cv-rule-night); color: var(--cv-bone); }
/* Station numbers on the deep process ground: bone, never the ivory-ground faint ink (which measured 1.08:1 here). */
.cv-process__addresses button span { color: var(--cv-bone-dim); }
.cv-process__concept { font-size: 0.85rem; color: var(--cv-bone-dim); max-width: var(--cv-measure); }
.cv-process__unavailable { font-size: 0.9rem; }

/* Occasions: four serving suggestions as cards on the day-lift ground, each
   topped by the territory bar of its first fruit, each naming its fruits as
   links with their own marks. */
.cv-occasions { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--cv-rule); }
.cv-occasions__grid { list-style: none; padding: 0; margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.8rem, 1.5vw, 1.2rem); }
.cv-occasion { background: var(--cv-day-lift); border-top: 3px solid var(--cv-territory); padding: clamp(1.2rem, 2.2vw, 1.8rem); display: grid; gap: 0.7rem; align-content: start; }
.cv-occasion h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); }
.cv-occasion p { font-size: 0.95rem; color: var(--cv-ink-soft); }
.cv-occasion__fruits { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-top: 0.4rem; }
.cv-occasion__fruits a { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; text-decoration: none; color: var(--cv-ink); }
.cv-occasion__fruits a::before { width: 0.7rem; }
.cv-occasion__fruits a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 900px) { .cv-occasions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .cv-occasions__grid { grid-template-columns: minmax(0, 1fr); } }

/* Information: range statements as a two-column definition list, each
   term in the display face over its detail, rules between. */
.cv-info { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--cv-rule); }
.cv-info__facts { margin: clamp(2rem, 4vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 4rem); border-top: 1px solid var(--cv-rule); }
.cv-info__facts > div { padding: 1.2rem 0; border-bottom: 1px solid var(--cv-rule); display: grid; gap: 0.4rem; align-content: start; }
.cv-info__facts dt { font-family: var(--cv-font-display); font-size: 1.35rem; line-height: 1.15; }
.cv-info__facts dd { margin: 0; font-size: 0.95rem; color: var(--cv-ink-soft); max-width: 34rem; }
.cv-info > .cv-note { margin-top: 1.4rem; }
@media (max-width: 640px) { .cv-info__facts { grid-template-columns: minmax(0, 1fr); } }

/* Questions: native disclosures under rules. The question is the summary in
   the display face; a chevron turns when the answer is open. */
.cv-faq { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--cv-rule); }
.cv-faq__list { margin-top: clamp(2rem, 4vw, 3rem); max-width: 46rem; border-top: 1px solid var(--cv-rule); }
.cv-faq__item { border-bottom: 1px solid var(--cv-rule); }
.cv-faq__item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 1.1rem 0; font-family: var(--cv-font-display); font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.25; }
.cv-faq__item > summary::-webkit-details-marker { display: none; }
.cv-faq__item > summary::after { content: ''; flex: none; width: 0.55rem; height: 0.55rem; border-right: 1.5px solid var(--cv-ink-faint); border-bottom: 1.5px solid var(--cv-ink-faint); transform: translateY(-0.25rem) rotate(45deg); transition: transform 160ms ease; }
.cv-faq__item[open] > summary::after { transform: translateY(0) rotate(-135deg); }
.cv-faq__item > p { padding: 0 0 1.4rem; max-width: var(--cv-measure); color: var(--cv-ink-soft); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .cv-faq__item > summary::after, .cv-menu > summary::after { transition: none; } }

.cv-harvest { padding: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--cv-rule); display: grid; gap: 1rem; max-width: var(--cv-measure); }
/* The pill button, as a <button> (harvest, disabled) or a link (table
   actions). Primary fills with the ink; quiet keeps the rule. */
.cv-button { border: 1px solid var(--cv-rule); background: transparent; padding: 0.8rem 1.3rem; border-radius: 999px; justify-self: start; display: inline-flex; align-items: center; text-decoration: none; line-height: 1.2; cursor: pointer; }
.cv-button[disabled] { color: var(--cv-ink-faint); cursor: not-allowed; }
.cv-button--primary { background: var(--cv-ink); border-color: var(--cv-ink); color: var(--cv-bone); }
.cv-button--primary:hover { background: color-mix(in srgb, var(--cv-ink) 84%, var(--cv-signal)); border-color: transparent; }
.cv-button--quiet:hover { border-color: var(--cv-ink); }
.cv-foot { background: var(--cv-night); color: var(--cv-bone-dim); padding: 2.5rem var(--cv-gutter) max(2.5rem, env(safe-area-inset-bottom, 0px)); display: grid; gap: 0.4rem; font-size: 0.82rem; }
/* Footer: the section list ("On this page"), the language, then the entity
   lines. Bone for the links, the dim bone for labels (about 9:1 on night). */
.cv-foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; padding-bottom: 1.3rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--cv-rule-night); font-size: 0.85rem; }
.cv-foot__links span, .cv-foot__lang span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cv-bone-dim); }
.cv-foot__links span { align-self: center; }
.cv-foot__links a, .cv-foot__lang a { color: var(--cv-bone); text-decoration: none; }
.cv-foot__links a:hover, .cv-foot__lang a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.cv-foot__lang { margin-bottom: 0.6rem; }
.cv-foot__lang span { margin-right: 0.5rem; }

.cv-process__shell[hidden] { display: none; } /* hidden until real footage (Jay 17 Oct) */

/* ============================================================================
   THE TRAIL (prototype, ?trail; 17 Oct 2026). The fruit section is the walk:
   a pinned stage (the 3D trail), the intro, the five fruit articles as trail
   markers, a trail map. Without .cv-trail-on nothing here applies.
   ========================================================================== */
html.cv-trail-on #fruit { position: relative; height: calc(var(--trail-screens, 9.5) * 100svh); margin: 0; padding: 0; }
.cv-trail__pin { position: sticky; top: 0; height: 100svh; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; background: #0d1428; color: #f6efe2; }
.cv-trail__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-trail__pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 75% 70% at 50% 46%, rgba(4,6,16,0) 55%, rgba(4,6,16,.5) 100%), var(--trail-grain, none); background-size: auto, 128px 128px; animation: cv-trail-grain 0.9s steps(6) infinite; }
@keyframes cv-trail-grain { 0% { background-position: 0 0, 0 0; } 33% { background-position: 0 0, -37px 21px; } 66% { background-position: 0 0, 18px -44px; } 100% { background-position: 0 0, -9px 12px; } }
@media (prefers-reduced-motion: reduce) { .cv-trail__pin::after { animation: none; } }
.cv-trail__intro, .cv-trail__cards, .cv-trail__map { z-index: 2; }
.cv-trail__intro { position: absolute; left: 0; right: 0; top: 18svh; text-align: center; padding: 0 var(--cv-gutter); pointer-events: none; text-shadow: 0 2px 24px rgba(5,8,20,.6); }
.cv-trail__intro h2 { color: #fffaf0; margin: .4rem auto 0; max-width: 18ch; }
.cv-trail__intro .cv-eyebrow { color: rgba(255,247,230,.82); }
.cv-trail__intro .cv-fruits__index { display: none; }
.cv-trail__cards { position: absolute; inset: 0; pointer-events: none; }
.cv-trail__card { position: absolute; top: 50%; width: min(25rem, calc(100vw - 2 * var(--cv-gutter))); margin: 0 !important; padding: 1.4rem 1.5rem 1.2rem; translate: 0 -50%; opacity: 0;
  background: linear-gradient(180deg, rgba(14,20,40,.72), rgba(10,14,30,.82)); border: 1px solid rgba(255,247,230,.14); border-radius: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #f6efe2; box-shadow: 0 24px 60px rgba(0,0,0,.35); will-change: opacity, transform; }
.cv-trail__card.is-right { right: max(var(--cv-gutter), 5vw); }
.cv-trail__card.is-left { left: max(var(--cv-gutter), 5vw); }
.cv-trail__card .cv-media { display: none; }
.cv-trail__card, .cv-trail__card .cv-fruit__body, .cv-trail__card .cv-fruit__head { display: block; grid-template-columns: none; max-width: none; width: auto; }
.cv-trail__card { width: min(25rem, calc(100vw - 2 * var(--cv-gutter))); }
.cv-trail__card h3, .cv-trail__card .cv-fruit__sense { color: #fffaf0; }
.cv-trail__card .cv-fruit__index, .cv-trail__card .cv-fruit__subtitle, .cv-trail__card dt { color: rgba(246,239,226,.66); }
.cv-trail__card dd { color: rgba(246,239,226,.9); }
.cv-trail__card a { color: #f6efe2; border-color: rgba(246,239,226,.3); }
.cv-trail__map { position: absolute; right: max(var(--cv-gutter), 2vw); top: calc(4.6rem + 2vh); width: 84px; height: 98px; opacity: .9; pointer-events: none; }
.cv-trail__map-path { fill: none; stroke: rgba(246,239,226,.42); stroke-width: 1.4; stroke-dasharray: 2 3; }
.cv-trail__map-stop { fill: rgba(10,14,30,.6); stroke: var(--c); stroke-width: 1.6; transition: fill .4s ease; }
.cv-trail__map-stop.is-seen { fill: var(--c); }
.cv-trail__map-me { fill: #fffaf0; }
@media (max-width: 760px) {
  .cv-trail__card { top: auto; bottom: max(1rem, env(safe-area-inset-bottom, 0px)); translate: none; left: var(--cv-gutter) !important; right: var(--cv-gutter) !important; width: auto; padding: 1.1rem 1.2rem 1rem; }
  .cv-trail__card:not(.is-bench) .cv-fruit__facts div:nth-child(3), .cv-trail__card:not(.is-bench) .cv-fruit__routes a:not(.cv-fruit__route--next) { display: none; }
  .cv-trail__intro { top: 14svh; }
  .cv-trail__map { width: 64px; height: 75px; }
}

/* ============================================================================
   BASECAMP AT DAWN and the dusk trailhead (?trail; 17 Oct 2026). With the trail
   on, the page keeps one light: dusk hero, a dusk trailhead, the night trail,
   then the morning (a fixed dawn sky behind everything below the trail, the
   sections on frosted panels). Colours come from the same tokens, re-set here.
   ========================================================================== */
html.cv-trail-on body { background: #0d1428; }
html.cv-trail-on .cv-table, html.cv-basecamp-on main > section:not(#fruit):not(#arrival), html.cv-basecamp-on .cv-foot {
  --cv-ink: #f4ede1; --cv-ink-soft: rgba(244,237,225,.8); --cv-ink-faint: rgba(244,237,225,.62); --cv-rule: rgba(244,237,225,.16); --cv-day: #141b36; --cv-bone: #141b36; --cv-day-lift: rgba(255,255,255,.06); color: var(--cv-ink); }
html.cv-trail-on .cv-table { background: linear-gradient(180deg, rgb(128,118,119) 0%, #2a3150 22%, #182042 60%, #111a35 100%); width: 100vw; margin-left: calc(50% - 50vw); padding-left: max(var(--cv-gutter), calc(50vw - var(--cv-wide) / 2 + var(--cv-gutter))); padding-right: max(var(--cv-gutter), calc(50vw - var(--cv-wide) / 2 + var(--cv-gutter))); box-sizing: border-box; }
html.cv-trail-on .cv-table::before { display: none; }
.cv-basecamp__sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.cv-basecamp__sky.is-on { opacity: 1; }
html.cv-basecamp-on main, html.cv-basecamp-on .cv-foot { position: relative; z-index: 1; }
html.cv-basecamp-on main > section:not(#fruit):not(#arrival):not(#table) { margin: clamp(1.5rem, 4vh, 3rem) 0; padding: clamp(1.6rem, 4vw, 3rem); border: 1px solid rgba(244,237,225,.12); border-top: 1px solid rgba(244,237,225,.12); border-radius: 26px;
  background: rgba(14,18,40,calc(.62 - .12 * var(--dawn, 0))); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
html.cv-basecamp-on .cv-occasion { background: rgba(255,255,255,.05); }
html.cv-basecamp-on .cv-foot { background: rgba(10,12,26,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html.cv-basecamp-on #harvest { margin-bottom: 40vh !important; }   /* room for the camp below it */

/* ============================================================================
   THE BRIDGE and THE BENCHMARK CLEARING (?trail; Astra's brief, 17 Oct). The
   settled hero holds one more screen (--cv-tail) while its table leaves; the
   trail section overlaps that screen and fades in over it, so there is no
   section between them. The table section now follows the walk (on the dawn
   sky). The Alphonso clearing: a compact caption, its action opening the
   article itself as a scrollable sheet; a named fruit index.
   ========================================================================== */
@property --cv-tail { syntax: '<length>'; inherits: false; initial-value: 0px; }
html.cv-bridge-on .cv-descent[data-descent-mode="live"] { --cv-tail: 110svh; height: calc(420vh + var(--cv-tail)); z-index: 0; }
html.cv-bridge-on main { position: relative; z-index: 1; }
html.cv-bridge-on:has(.cv-descent[data-descent-mode="live"]) #fruit { margin-top: calc(-110svh - 100svh); height: calc(var(--trail-screens, 9.5) * 100svh + 110svh); background: none; border-top: 0; }
html.cv-bridge-on .cv-descent .cv-hero > *, html.cv-bridge-on .cv-descent .cv-hero__packs { filter: opacity(max(0, 1 - 2.4 * var(--cv-leave, 0))); }   /* on the children: a filter on .cv-hero would capture its fixed phone button */
.cv-hero__packs.is-leaving, .cv-hero__packs.is-leaving * { pointer-events: none !important; }
html.cv-bridge-on .cv-table { background: none; }
.cv-trail__card { --cv-ink: #f6efe2; --cv-ink-faint: rgba(246,239,226,.62); --cv-rule: rgba(246,239,226,.22); }
.cv-trail__note { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: min(22rem, 34vw); color: #fffaf0; opacity: 0; visibility: hidden; text-shadow: 0 1px 18px rgba(6,10,24,.55); will-change: opacity, transform; }
.cv-trail__note.is-left { left: max(var(--cv-gutter), 6vw); }
.cv-trail__note.is-right { right: max(var(--cv-gutter), 6vw); }
.cv-trail__note::before { content: ""; position: absolute; inset: -2.5rem -3rem; z-index: -1; background: radial-gradient(closest-side, rgba(8,12,28,.4), rgba(8,12,28,0)); pointer-events: none; }
.cv-trail__note-name { font-family: var(--cv-font-display); font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.02; margin: 0; }
.cv-trail__note-line { margin: .6rem 0 0; font-size: 1.05rem; line-height: 1.4; color: rgba(255,250,240,.92); }
.cv-trail__note-fact { margin: .2rem 0 0; font-size: .92rem; color: rgba(246,239,226,.74); }
.cv-trail__explore { margin-top: 1.1rem; font: inherit; font-size: .95rem; line-height: 1.2; padding: .72rem 1.3rem; border-radius: 999px; border: 0; background: #fffaf0; color: #141b36; cursor: pointer; text-shadow: none; }
.cv-trail__explore:hover { background: #fff; }
.cv-trail__explore:focus-visible, .cv-trail__close:focus-visible { outline: 2px solid #fffaf0; outline-offset: 3px; }
.cv-trail__note-small { margin: .95rem 0 0; font-size: .68rem; letter-spacing: .02em; color: rgba(246,239,226,.55); }
.cv-trail__card.is-bench .cv-fruit__index, .cv-trail__card.is-bench .cv-trail__close { display: none; }
.cv-trail__card.is-bench.is-open { top: calc(4.6rem + 1vh); bottom: 1.4rem; translate: none; left: auto !important; right: max(var(--cv-gutter), 3vw) !important; width: min(31rem, 42vw); overflow-y: auto; overscroll-behavior: contain; padding-top: 1rem; z-index: 4; }
.cv-trail__card.is-bench.is-open .cv-trail__close { display: inline-flex; position: sticky; top: 0; float: right; z-index: 2; margin: 0 0 .4rem .6rem; font: inherit; font-size: .82rem; padding: .42rem .9rem; border-radius: 999px; border: 1px solid rgba(246,239,226,.3); background: rgba(10,14,30,.88); color: #f6efe2; cursor: pointer; }
.cv-trail__card.is-bench.is-open .cv-media { display: grid; margin: .9rem 0 1.1rem; }
.cv-trail__card.is-bench .cv-media__stage { height: clamp(15rem, 40vh, 24rem); }
.cv-trail__card.is-bench .cv-media__shot img { max-height: clamp(15rem, 40vh, 24rem); }
.cv-trail__index { position: absolute; z-index: 3; left: max(var(--cv-gutter), 2.5vw); bottom: 1.4rem; display: flex; flex-wrap: nowrap; gap: .3rem 1.3rem; margin: 0; padding: 0; border: 0; }
.cv-trail__index a { border: 0; border-radius: 0; padding: .35rem 0; gap: .45rem; font-size: .8rem; color: rgba(246,239,226,.56); text-shadow: 0 1px 10px rgba(6,10,24,.6); }
.cv-trail__index a::before { width: .55rem; height: 2px; opacity: .75; transition: width .3s ease; }
.cv-trail__index a.is-current, .cv-trail__index a:hover { color: #fffaf0; }
.cv-trail__index a.is-current::before { width: 1.2rem; opacity: 1; }
/* THE SURPRISES (?trail; Astra's brief, 17 Oct): a named button over each object (invisible until focused), one
   editorial caption near its object, powder at the edge of the view; reduced motion gets them as quiet text */
.cv-gags { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cv-gag { position: absolute; pointer-events: auto; padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; visibility: hidden; -webkit-tap-highlight-color: transparent; }
.cv-gag:focus-visible { outline: 2px solid #fffaf0; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(8,12,28,.35); }
.cv-gag.is-done, .cv-gag:disabled { cursor: default; }
.cv-gag__caption { position: absolute; margin: 0; transform: translate(-50%, -100%); padding: 0 .2rem .45rem; font-family: var(--cv-font-display); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.2; white-space: nowrap; color: #fffaf0; text-shadow: 0 1px 14px rgba(6,10,24,.8), 0 0 2px rgba(6,10,24,.6); opacity: 0; pointer-events: none; }
.cv-gag__edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; }
html.cv-trail-detail .cv-gags { visibility: hidden; }
.cv-gag-notes { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem .6rem; margin: -.6rem 0 1.2rem; font-size: .82rem; }
.cv-gag-notes__btn { font: inherit; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--cv-rule); background: transparent; color: var(--cv-ink); cursor: pointer; }
.cv-gag-notes__btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.cv-gag-notes__said { flex-basis: 100%; margin: .2rem 0 0; font-family: var(--cv-font-display); font-style: italic; font-size: 1.05rem; min-height: 1.3em; }
.cv-gag-notes.is-dusted .cv-gag-notes__said { text-shadow: 0 0 1px rgba(255,255,255,.9); }
.cv-trail-still { margin: 1rem 0 1.4rem; }
.cv-trail-still img { display: block; width: 100%; height: auto; border-radius: 14px; }
.cv-trail-still figcaption { margin-top: .45rem; font-size: .72rem; color: var(--cv-ink-faint); }
@media (max-width: 760px) {
  .cv-trail__note { top: auto; translate: none; left: 0 !important; right: 0 !important; bottom: 0; width: auto; padding: 2.6rem var(--cv-gutter) max(1.1rem, env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(8,12,28,0), rgba(8,12,28,.6) 34%, rgba(8,12,28,.78)); }
  .cv-trail__note::before { display: none; }
  .cv-trail__note-name { font-size: 1.9rem; }
  .cv-trail__note-line { font-size: .98rem; margin-top: .45rem; }
  .cv-trail__explore { margin-top: .85rem; }
  .cv-trail__note-small { margin-top: .75rem; }
  .cv-trail__card.is-bench.is-open { top: calc(3.6rem + 5svh); bottom: 0; left: 0 !important; right: 0 !important; width: auto; border-radius: 20px 20px 0 0; padding-bottom: max(1.4rem, env(safe-area-inset-bottom, 0px)); }
  .cv-trail__card.is-bench .cv-media__stage { height: 34svh; }
  .cv-trail__card.is-bench .cv-media__shot img { max-height: 34svh; }
  .cv-trail__index { left: 0; right: 0; bottom: auto; top: calc(3.9rem + env(safe-area-inset-top, 0px)); padding: 0 var(--cv-gutter); overflow-x: auto; scrollbar-width: none; gap: 1.05rem; }
  .cv-trail__index::-webkit-scrollbar { display: none; }
  .cv-trail__index a { flex: none; white-space: nowrap; font-size: .72rem; }
  .cv-trail__map { display: none; }
}
@media (max-width: 760px) {
  .cv-trail__card { padding: 0.9rem 1rem 0.85rem; }
  .cv-trail__card h3 { font-size: 1.35rem; }
  .cv-trail__card .cv-fruit__subtitle { display: none; }
  .cv-trail__card .cv-fruit__sense { font-size: 0.9rem; line-height: 1.45; margin: .35rem 0 .2rem; }
  .cv-trail__card .cv-fruit__facts { font-size: 0.8rem; }
  html.cv-basecamp-on #harvest { margin-bottom: 30vh !important; }
}

/* ============================================================================
   IMPOSSIBLE WEATHER (proof screen, ?weather; 18 Oct 2026). One full-screen
   surreal collage below the hero: pastel sky, the hero's valley, a rose and
   peach-gold cloud, the exact pack settling into it, a lowercase headline.
   The hero holds one screen (--cv-tail) while the scene comes in through haze.
   Transforms come from weather.js as custom properties on the pin.
   ========================================================================== */
html.cv-weather-on .cv-descent[data-descent-mode="live"] { --cv-tail: 100svh; height: calc(420vh + var(--cv-tail)); z-index: 0; }
html.cv-weather-on main { position: relative; z-index: 1; }
html.cv-weather-on .cv-descent .cv-hero > *, html.cv-weather-on .cv-descent .cv-hero__packs { filter: opacity(max(0, 1 - 2.4 * var(--cv-leave, 0))); }
.cv-weather { position: relative; height: 340svh; margin: 0; padding: 0; width: 100vw; margin-left: calc(50% - 50vw); }
html.cv-weather-on:has(.cv-descent[data-descent-mode="live"]) .cv-weather { margin-top: -200svh; height: 440svh; }
.cv-weather__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; visibility: hidden; opacity: 0; isolation: isolate; color: #2a2230; }
.cv-weather__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #b6cee5 0%, #cdc9df 30%, #efc2cf 62%, #f8d6bd 100%); }
.cv-weather__valley { position: absolute; left: 0; bottom: -2svh; width: 100%; height: 40svh; object-fit: cover; object-position: 50% 35%; transform: translate3d(0, var(--valley-y, 0), 0); }
.cv-weather__cloud { position: absolute; left: 63%; top: 30svh; width: min(58vw, 92svh); transform: translate3d(-50%, var(--cloud-y, 0), 0); pointer-events: none; }
.cv-weather__pack { position: absolute; left: 63%; top: 37svh; width: min(17vw, 24svh); height: auto; transform: translate3d(-50%, var(--pack-y, 0), 0) rotate(var(--pack-r, -7deg)); filter: drop-shadow(0 18px 22px rgba(120, 60, 80, .22)); }
.cv-weather__cloud--front { transform: translate3d(-50%, var(--cloud-y, 0), 0); }
.cv-weather__words { position: absolute; left: max(var(--cv-gutter), 7vw); top: 34svh; max-width: min(34rem, 44vw); transform: translate3d(0, var(--words-y, 0), 0); opacity: var(--words-o, 1); }
.cv-weather__title { position: relative; margin: 0; font-family: var(--cv-font-text); font-weight: 600; font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: .9; letter-spacing: -.045em; text-transform: lowercase; color: #34233a; }
.cv-weather__line { display: block; }
.cv-weather__ghosts { position: absolute; left: 0; top: 0; right: 0; pointer-events: none; }
.cv-weather__ghost { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.cv-weather__foot { position: absolute; left: max(var(--cv-gutter), 7vw); top: 64svh; max-width: 22rem; transform: translate3d(0, var(--words-y, 0), 0); opacity: var(--words-o, 1); }
.cv-weather__text { margin: 0; max-width: 21rem; font-size: .92rem; line-height: 1.5; color: rgba(42, 34, 48, .82); }
.cv-weather__link { display: inline-block; margin-top: 1rem; font-size: .9rem; color: #2a2230; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1rem; }
.cv-weather__link:focus-visible { outline: 2px solid #2a2230; outline-offset: 4px; }
.cv-weather__haze { position: absolute; inset: -10%; pointer-events: none; opacity: var(--haze, 1); background: radial-gradient(ellipse 70% 55% at 50% 60%, rgba(255, 238, 236, .96), rgba(250, 214, 220, .9) 55%, rgba(236, 196, 214, .86)); }
.cv-weather.is-still { height: 100svh; }
.cv-weather.is-still .cv-weather__pin { position: relative; visibility: visible; opacity: 1; }
.cv-weather.is-still .cv-weather__haze { display: none; }
@media (max-width: 760px) {
  .cv-weather__valley { height: 26svh; object-position: 42% 40%; }
  .cv-weather__cloud { left: 50%; top: 40svh; width: 140vw; }
  .cv-weather__cloud--front { transform: translate3d(-50%, var(--cloud-y, 0), 0); }
  .cv-weather__pack { left: 52%; top: 44svh; width: 42vw; }
  .cv-weather__words { left: var(--cv-gutter); right: var(--cv-gutter); top: 15svh; max-width: none; }
  .cv-weather__title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .cv-weather__foot { left: var(--cv-gutter); right: var(--cv-gutter); top: auto; bottom: max(5svh, env(safe-area-inset-bottom, 0px)); max-width: none; }
  .cv-weather__text { font-size: .86rem; }
  .cv-weather__foot::before { content: ""; position: absolute; inset: -2.2rem calc(-1 * var(--cv-gutter)) -6svh; z-index: -1; background: linear-gradient(180deg, rgba(248, 226, 226, 0), rgba(248, 226, 226, .78) 40%); }
}

/* ============================================================================
   FRUIT WORLDS (proof screen, ?space; 18 Oct 2026, recomposed per Astra's
   brief). Inky space; a complete banded planet about a third of the width,
   near centre and slightly right, with air around it; a broad coral-orange
   landscape across the lower quarter; the exact pouch standing on it as the
   scale; a compact bold headline at the planet's left edge, the copy at its
   right. The hero holds one screen (--cv-tail) and lifts while the planet
   comes down. Transforms come from space.js as custom properties on the pin.
   ========================================================================== */
html.cv-space-on .cv-descent[data-descent-mode="live"] { --cv-tail: 100svh; height: calc(420vh + var(--cv-tail)); z-index: 0; }
html.cv-space-on main { position: relative; z-index: 1; }
html.cv-space-on .cv-descent .cv-hero > *, html.cv-space-on .cv-descent .cv-hero__packs { filter: opacity(max(0, 1 - 2.4 * var(--cv-leave, 0))); }
html.cv-space-on .cv-descent__stage { transform: translate3d(0, calc(var(--cv-leave, 0) * 34svh), 0); filter: brightness(calc(1 - .65 * var(--cv-leave, 0))); }
.cv-space { position: relative; height: 300svh; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0; background: #05060b; }
html.cv-space-on:has(.cv-descent[data-descent-mode="live"]) .cv-space { margin-top: -200svh; height: 400svh; background: none; }
.cv-space__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; visibility: hidden; opacity: 0; isolation: isolate; background: #05060b; color: #fffaf3; --horizon: 76svh; }
.cv-space__sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-space__planet { position: absolute; left: 53%; top: 40svh; width: min(30vw, 50svh); height: auto; transform: translate3d(-50%, calc(-50% + var(--planet-y, 0px)), 0); }
.cv-space__ground { position: absolute; left: 0; top: var(--horizon); width: 100%; height: calc(100svh - var(--horizon) + 2px); object-fit: cover; object-position: 50% 0; transform: translate3d(0, var(--ground-y, 0px), 0); }
.cv-space__stand { position: absolute; left: 64%; top: var(--horizon); width: min(11.5vw, 19svh); height: calc(100svh - var(--horizon)); transform: translate3d(-50%, var(--stand-y, 0px), 0); }
.cv-space__pack { position: absolute; left: 0; bottom: 34%; width: 100%; height: auto; transform: translateY(9.4%); filter: drop-shadow(0 2px 3px rgba(40, 10, 0, .35)); }   /* the cut-out's transparent foot (9.4%) sits below the ground line */
.cv-space__shade { position: absolute; left: 0; bottom: 34%; width: 100%; aspect-ratio: 1500 / 2353; transform: translateY(9.4%); pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(98deg, rgba(255, 236, 214, 0) 30%, rgba(120, 70, 60, .38) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(110, 40, 10, .28) 100%);
  -webkit-mask: url(/ca/assets/received/alphonso-mango.pack-640.webp) center / 100% 100% no-repeat; mask: url(/ca/assets/received/alphonso-mango.pack-640.webp) center / 100% 100% no-repeat; }
.cv-space__contact { position: absolute; left: 50%; bottom: calc(34% - 5px); width: 116%; height: 11%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 6, 0, .85), rgba(36, 6, 0, .3) 60%, rgba(36, 6, 0, 0)); }
.cv-space__cast { position: absolute; left: 46%; bottom: calc(34% - 2px); width: 150%; height: 20%; transform-origin: 0 100%; transform: skewX(-58deg) scaleY(.9); border-radius: 40% 60% 50% 50%; background: radial-gradient(ellipse at 18% 85%, rgba(50, 10, 0, .62), rgba(50, 10, 0, .25) 45%, rgba(50, 10, 0, 0) 72%); filter: blur(2px); }
.cv-space__title { position: absolute; left: 22vw; top: 41svh; margin: 0; font-family: var(--cv-font-text); font-weight: 600; font-size: clamp(2.2rem, 3.9vw, 4.4rem); line-height: .92; letter-spacing: -.04em; text-transform: lowercase; color: #fffaf3; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); transform: translate3d(0, var(--words-y, 0px), 0); opacity: var(--words-o, 1); }
.cv-space__title span { display: block; }
.cv-space__copy { position: absolute; left: 68.5vw; top: 43svh; width: min(17rem, 19vw); transform: translate3d(0, var(--words-y, 0px), 0); opacity: var(--words-o, 1); }
.cv-space__text { margin: 0; font-size: .8rem; line-height: 1.45; color: rgba(255, 250, 243, .82); }
.cv-space__link { display: inline-block; margin-top: .7rem; font-size: .8rem; color: #fffaf3; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1rem; }
.cv-space__link:focus-visible { outline: 2px solid #fffaf3; outline-offset: 4px; }
.cv-space.is-still { height: 100svh; }
.cv-space.is-still .cv-space__pin { position: relative; visibility: visible; opacity: 1; }
@media (max-width: 760px) {
  .cv-space__pin { --horizon: 72svh; }
  .cv-space__planet { left: 57%; top: 28svh; width: 62vw; }
  .cv-space__stand { left: 70%; width: 36vw; }
  .cv-space__pack, .cv-space__shade { bottom: 22%; }
  .cv-space__contact { bottom: calc(22% - 3px); }
  .cv-space__cast { bottom: calc(22% - 2px); }
  .cv-space__title { left: var(--cv-gutter); top: 44svh; font-size: clamp(2.1rem, 10.5vw, 2.9rem); }
  .cv-space__copy { left: var(--cv-gutter); top: 57.5svh; width: 70vw; }
  .cv-space__text { font-size: .78rem; }
}

/* ============================================================================
   DISCOVERY (still composition, ?discovery; 18 Oct 2026). FLOAT (the chosen
   direction): the couple looks up at the exact pouch suspended in space, two
   faint far planets. STANDING (?discovery=standing): ARCHIVED for reference,
   no longer developed. Light
   from the upper left throughout; shadows fall to the right. Positions are in
   viewport units so each layout is composed, not cropped; the ground plates
   carry footprints that end at the couple's feet.
   ========================================================================== */
.cv-disc { position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0; background: #05060b; }
.cv-disc__frame { position: relative; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; color: #fffaf3; --horizon: 66.7svh; }
.cv-disc__sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-disc__ground, .cv-disc__ground img { position: absolute; left: 0; top: var(--horizon); width: 100%; height: calc(100svh - var(--horizon) + 1px); display: block; object-fit: fill; }
.cv-disc__ground img { position: static; }
.cv-disc__planet { position: absolute; left: 84%; top: 22svh; width: 5.5vw; transform: translate(-50%, -50%); filter: brightness(.72) saturate(.85); }
.cv-disc__pack { position: absolute; left: 62%; bottom: 23.3svh; height: 69svh; aspect-ratio: 1500 / 2353; transform: translateX(-50%); }
.cv-disc__pouch { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateY(9.4%); }   /* the cut-out's transparent foot sits below the ground line */
.cv-disc__shade { position: absolute; inset: 0; transform: translateY(9.4%); pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(96deg, rgba(255, 238, 220, 0) 35%, rgba(110, 60, 50, .42) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 74%, rgba(120, 44, 12, .3) 100%);
  -webkit-mask: url(/ca/assets/received/alphonso-mango.pack-827.webp) center / 100% 100% no-repeat; mask: url(/ca/assets/received/alphonso-mango.pack-827.webp) center / 100% 100% no-repeat; }
.cv-disc__contact { position: absolute; left: 50%; bottom: -2.5%; width: 104%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(36, 6, 0, .8), rgba(36, 6, 0, .28) 60%, rgba(36, 6, 0, 0)); }
.cv-disc__cast { position: absolute; left: 50%; bottom: -3%; width: 170%; height: 11%; transform-origin: 0 100%; transform: skewX(-62deg); border-radius: 40% 60% 50% 50%; background: radial-gradient(ellipse at 14% 80%, rgba(56, 12, 0, .55), rgba(56, 12, 0, .2) 50%, rgba(56, 12, 0, 0) 74%); filter: blur(3px); }
.cv-disc__couple { position: absolute; left: 31.3vw; top: 73.7svh; height: 26.3svh; aspect-ratio: 900 / 1000; }
.cv-disc__couple img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-disc__feet { position: absolute; left: 24%; top: 69%; width: 62%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(40, 8, 0, .6), rgba(40, 8, 0, 0)); }
.cv-disc__feet::after { content: ""; position: absolute; left: 45%; top: 10%; width: 140%; height: 120%; transform-origin: 0 50%; transform: skewX(-60deg); background: radial-gradient(ellipse at 10% 50%, rgba(50, 10, 0, .38), rgba(50, 10, 0, 0) 70%); filter: blur(2px); }
.cv-disc__title { position: absolute; left: max(var(--cv-gutter), 7vw); top: 21svh; margin: 0; font-family: var(--cv-font-text); font-weight: 600; font-size: clamp(2.2rem, 3.6vw, 4.2rem); line-height: .92; letter-spacing: -.04em; text-transform: lowercase; color: #fffaf3; }
.cv-disc__title span { display: block; }
.cv-disc__copy { position: absolute; left: max(var(--cv-gutter), 7vw); top: 34svh; width: min(18rem, 22vw); }
.cv-disc__copy p { margin: 0; font-size: .8rem; line-height: 1.45; color: rgba(255, 250, 243, .78); }
.cv-disc__copy a { display: inline-block; margin-top: .7rem; font-size: .82rem; color: #fffaf3; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .1rem; }
.cv-disc__copy a:focus-visible { outline: 2px solid #fffaf3; outline-offset: 4px; }
/* the far planets: one small, one fainter (both subordinate to the pouch) */
.cv-disc__planet--far { left: 16%; top: 13svh; width: 2.2vw; filter: brightness(.5) saturate(.6); }
.cv-disc--standing .cv-disc__planet--far { display: none; }
/* FLOAT (Jay, 18 Oct): the reference's arrangement with the pouch in the planet's place; the couple below, overlapping
   its lower edge from far in front; headline at its left, copy at its right; no ground shadow (it is high above) */
.cv-disc--float .cv-disc__frame { --horizon: 75svh; }
.cv-disc--float .cv-disc__pack { left: 51%; bottom: auto; top: 8.4svh; height: 60.9svh; }   /* the pouch itself spans about 14 to 63 percent of the height; clear sky below it */
.cv-disc--float .cv-disc__pouch, .cv-disc--float .cv-disc__shade { transform: none; }
.cv-disc--float .cv-disc__shade { background: linear-gradient(98deg, rgba(255, 238, 220, 0) 38%, rgba(70, 40, 50, .45) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(150, 60, 20, .22) 92%); }
.cv-disc--float .cv-disc__contact, .cv-disc--float .cv-disc__cast { display: none; }
.cv-disc--float .cv-disc__pack::after { content: ""; position: absolute; inset: -18% -30%; z-index: -1; background: radial-gradient(closest-side, rgba(255, 196, 80, .14), rgba(255, 196, 80, 0)); }
.cv-disc--float .cv-disc__planet { left: 82%; top: 20svh; width: 4.6vw; filter: brightness(.7) saturate(.85); }
.cv-disc--float .cv-disc__couple { left: 39.1vw; top: 72.8svh; height: 26.9svh; }   /* heads about 75 percent down: a clear gap under the pouch */
.cv-disc--float .cv-disc__title { left: 15vw; top: 36svh; }
.cv-disc--float .cv-disc__copy { left: 66vw; top: 38svh; width: min(17rem, 19vw); }
@media (max-width: 760px) {
  .cv-disc__frame { --horizon: 60svh; }
  .cv-disc__planet { left: 14%; top: 39svh; width: 10vw; }
  .cv-disc__pack { left: 60%; bottom: 30svh; height: 48.6svh; }
  .cv-disc__couple { left: 12vw; top: 81svh; height: 18.7svh; }
  .cv-disc__title { left: var(--cv-gutter); top: 10.5svh; font-size: clamp(2rem, 9.4vw, 2.7rem); }
  .cv-disc__copy { left: var(--cv-gutter); top: 21svh; width: 78vw; }
  .cv-disc__copy p { font-size: .76rem; }
  .cv-disc__planet--far { left: 10%; top: 25svh; width: 4vw; }
  /* phone, first view: the headline, the scene and the action only; the product's facts are in its article just below */
  .cv-disc--float .cv-disc__frame { --horizon: 68svh; }
  .cv-disc--float .cv-disc__pack { left: 52%; top: 23.6svh; height: 41svh; }
  .cv-disc--float .cv-disc__planet { left: 84%; top: 22svh; width: 7vw; }
  .cv-disc--float .cv-disc__planet--far { left: 15%; top: 42svh; width: 3vw; }
  .cv-disc--float .cv-disc__couple { left: 28.7vw; top: 73.6svh; height: 17.4svh; }
  .cv-disc--float .cv-disc__title { left: var(--cv-gutter); top: 10svh; }
  .cv-disc--float .cv-disc__copy { left: var(--cv-gutter); top: 20.5svh; width: auto; }
  .cv-disc--float .cv-disc__copy p { display: none; }
  .cv-disc--float .cv-disc__copy a { margin-top: 0; }
}

/* ============================================================================
   THE WORLDS (?worlds; 18 Oct 2026): the complete below-hero draft in the
   floating direction. The hero holds one screen and darkens to night; five
   colour worlds (one sticky stage, one layer per fruit, positioned by
   worlds.js); the fruit articles as sheets; the table recap, the process,
   occasions, information, questions and the ending in the same dark world.
   Each world's composition is set here per fruit, in viewport units, so the
   desktop and phone layouts are composed rather than cropped.
   ========================================================================== */
html.cv-worlds-on body { background: #05060b; }
html.cv-worlds-on .cv-descent[data-descent-mode="live"] { --cv-tail: 100svh; height: calc(420vh + var(--cv-tail)); z-index: 0; }
html.cv-worlds-on main { position: relative; z-index: 1; }
html.cv-worlds-on .cv-descent .cv-hero > *, html.cv-worlds-on .cv-descent .cv-hero__packs { filter: opacity(max(0, 1 - 2.6 * var(--cv-leave, 0))); }
html.cv-worlds-on .cv-descent__stage { transform: translate3d(0, calc(var(--cv-leave, 0) * 30svh), 0); filter: brightness(max(0, 1 - 1.9 * var(--cv-leave, 0))); }   /* the valley sinks and goes to night before the first world appears: no double exposure */
html.cv-worlds-on #fruit { position: relative; height: calc(100svh + 750svh); margin: 0; padding: 0; border: 0; width: 100vw; margin-left: calc(50% - 50vw); background: none; }
html.cv-worlds-on:has(.cv-descent[data-descent-mode="live"]) #fruit { margin-top: -200svh; height: calc(100svh + 100svh + 750svh); }
.cv-worlds__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #05060b; color: #fffaf3; opacity: var(--show, 1); }
.cv-worlds__sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-worlds__wash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--wash, 0); background: radial-gradient(ellipse 80% 70% at 55% 45%, var(--wash-c, #ffd21a), transparent 75%); mix-blend-mode: screen; }
.cv-worlds__veil { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(2, 3, 8, .45)); }
.cv-world { position: absolute; inset: 0; z-index: 1; visibility: hidden; --horizon: 75svh; }
.cv-world__glow { position: absolute; left: 0; right: 0; top: calc(var(--horizon) - 30svh); height: 32svh; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pack) 16%, transparent)); opacity: .55; pointer-events: none; }
.cv-world__planet { position: absolute; left: var(--pl-x, 82%); top: var(--pl-y, 20svh); width: var(--pl-w, 4.6vw); transform: translate3d(-50%, calc(-50% + var(--far-y, 0px)), 0); filter: hue-rotate(var(--hue)) brightness(.72) saturate(.9); }
.cv-world__planet--far { left: var(--pf-x, 16%); top: var(--pf-y, 13svh); width: var(--pf-w, 2.2vw); filter: hue-rotate(calc(var(--hue) + 40deg)) brightness(.48) saturate(.6); }
.cv-world__ground, .cv-world__ground img { position: absolute; left: 0; top: var(--horizon); width: 100%; height: calc(100svh - var(--horizon) + 1px); display: block; object-fit: fill; }
.cv-world__ground { transform: translate3d(0, var(--near-y, 0px), 0); }
.cv-world__ground img { position: static; }
.cv-world__couple { position: absolute; left: var(--c-x); top: var(--c-y); height: var(--c-h); aspect-ratio: 900 / 1000; transform: translate3d(0, var(--near-y, 0px), 0); opacity: var(--couple-o, 1); }
.cv-world__couple img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-world__feet { position: absolute; left: 24%; top: 69%; width: 62%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 4, 10, .55), rgba(10, 4, 10, 0)); }
.cv-world__feet::after { content: ""; position: absolute; left: 45%; top: 10%; width: 140%; height: 120%; transform-origin: 0 50%; transform: skewX(-60deg); background: radial-gradient(ellipse at 10% 50%, rgba(10, 4, 10, .32), rgba(10, 4, 10, 0) 70%); filter: blur(2px); }
.cv-world__pack { position: absolute; left: var(--p-x); top: var(--p-y); height: var(--p-h); aspect-ratio: 827 / 1297; transform: translate3d(-50%, var(--pack-y, 0px), 0) rotate(calc(var(--p-r, 0deg) + var(--pack-r, 0deg))); will-change: transform; }
.cv-world__pack::before { content: ""; position: absolute; inset: 0 -20%; z-index: -1; background: radial-gradient(closest-side, color-mix(in srgb, var(--pack) 22%, transparent), transparent); opacity: .5; }
.cv-world__pouch { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-world__shade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(98deg, rgba(255, 238, 220, 0) 40%, rgba(60, 40, 60, .4) 100%);
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.cv-world__words { position: absolute; left: var(--w-x); top: var(--w-y); width: var(--w-w, 22vw); opacity: var(--words-o, 1); transform: translate3d(0, var(--words-y, 0px), 0); }
.cv-world__title { margin: 0; font-family: var(--cv-font-text); font-weight: 600; font-size: clamp(2rem, 3.2vw, 3.8rem); line-height: .94; letter-spacing: -.04em; text-transform: lowercase; color: #fffaf3; text-shadow: 0 2px 26px rgba(0, 0, 0, .4); text-wrap: balance; }
.cv-world__tag { margin: .9rem 0 0; font-family: var(--cv-font-display); font-style: italic; font-size: clamp(1.2rem, 1.7vw, 1.9rem); line-height: 1.15; color: color-mix(in srgb, var(--pack) 55%, #fffaf3); }
.cv-world__explore { margin-top: 1rem; font: inherit; font-size: .86rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255, 250, 243, .55); background: rgba(5, 6, 11, .35); color: #fffaf3; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cv-world__explore:hover { background: #fffaf3; color: #141018; }
.cv-world__explore:focus-visible, .cv-worlds__close:focus-visible { outline: 2px solid #fffaf3; outline-offset: 3px; }
/* the five compositions (desktop) */
.cv-world--alphonso-mango { --mask: url(/ca/assets/received/alphonso-mango.pack-827.webp); --p-x: 51%; --p-y: 8svh; --p-h: 60.6svh; --c-x: 39.1vw; --c-y: 72.85svh; --c-h: 26.9svh; --w-x: 10vw; --w-y: 34svh; --w-w: 26vw; --pl-x: 82%; --pl-y: 20svh; }
.cv-world--java-plum { --mask: url(/ca/assets/received/java-plum.pack-827.webp); --p-x: 64%; --p-y: 10.6svh; --p-h: 54.4svh; --p-r: 3deg; --c-x: 23.1vw; --c-y: 74.2svh; --c-h: 26.9svh; --w-x: 8vw; --w-y: 22svh; --w-w: 26vw; --pl-x: 32%; --pl-y: 60svh; --pl-w: 3.4vw; --pf-x: 90%; --pf-y: 15svh; }
.cv-world--pineapple { --mask: url(/ca/assets/received/pineapple.pack-827.webp); --p-x: 35%; --p-y: 6.1svh; --p-h: 59.3svh; --p-r: -2deg; --c-x: 61.1vw; --c-y: 72.6svh; --c-h: 26.9svh; --w-x: 62vw; --w-y: 20svh; --w-w: 26vw; --pl-x: 91%; --pl-y: 60svh; --pl-w: 3.6vw; --pf-x: 12%; --pf-y: 16svh; --pf-w: 2.4vw; }
.cv-world--pink-guava { --horizon: 80svh; --mask: url(/ca/assets/received/pink-guava.pack-827.webp); --p-x: 56%; --p-y: 8.35svh; --p-h: 47svh; --c-x: 44.9vw; --c-y: 81.3svh; --c-h: 20svh; --w-x: 8vw; --w-y: 50svh; --w-w: 26vw; --pl-x: 80%; --pl-y: 26svh; --pl-w: 6vw; --pf-x: 30%; --pf-y: 18svh; --pf-w: 3vw; }
.cv-world--papaya { --mask: url(/ca/assets/received/papaya.pack-827.webp); --p-x: 58%; --p-y: 4.5svh; --p-h: 65.5svh; --p-r: 2deg; --c-x: 17.1vw; --c-y: 73.7svh; --c-h: 26.9svh; --w-x: 74vw; --w-y: 30svh; --w-w: 20vw; --pl-x: 10%; --pl-y: 60svh; --pl-w: 3.4vw; --pf-x: 40%; --pf-y: 12svh; --pf-w: 2vw; }
.cv-worlds__sound { position: fixed; z-index: 30; right: max(var(--cv-gutter), 2vw); bottom: max(1.1rem, env(safe-area-inset-bottom, 0px)); font: inherit; font-size: .78rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(255, 250, 243, .4); background: rgba(5, 6, 11, .55); color: #fffaf3; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cv-worlds__sound[aria-pressed="true"] { border-color: rgba(255, 250, 243, .8); }
.cv-worlds__sound:focus-visible { outline: 2px solid #fffaf3; outline-offset: 3px; }
html.cv-worlds-sheet .cv-worlds__sound { display: none; }
/* the index of five names */
.cv-worlds__index { position: absolute; z-index: 4; left: max(var(--cv-gutter), 2.5vw); bottom: 1.4rem; display: flex; flex-wrap: nowrap; gap: .3rem 1.3rem; margin: 0; padding: 0; border: 0; }
.cv-worlds__index a { border: 0; border-radius: 0; padding: .35rem 0; gap: .45rem; font-size: .8rem; color: rgba(255, 250, 243, .6); text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.cv-worlds__index a::before { width: .55rem; height: 2px; opacity: .8; transition: width .3s ease; }
.cv-worlds__index a.is-current, .cv-worlds__index a:hover { color: #fffaf3; }
.cv-worlds__index a.is-current::before { width: 1.2rem; opacity: 1; }
/* the sheets: each fruit's own article */
.cv-worlds__sheets { position: relative; z-index: 40; }
.cv-worlds__sheet { position: fixed !important; top: calc(4.6rem + 1vh); bottom: 1.4rem; right: max(var(--cv-gutter), 3vw); width: min(32rem, 42vw); margin: 0 !important; padding: 1rem 1.5rem 1.4rem; overflow-y: auto; overscroll-behavior: contain; display: block !important; grid-template-columns: none !important;
  background: linear-gradient(180deg, rgba(16, 18, 32, .94), rgba(8, 10, 22, .96)); border: 1px solid rgba(255, 250, 243, .14); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); color: #f6efe2;
  --cv-ink: #f6efe2; --cv-ink-soft: rgba(246, 239, 226, .8); --cv-ink-faint: rgba(246, 239, 226, .62); --cv-rule: rgba(246, 239, 226, .2); opacity: 0; transform: translate3d(14px, 0, 0); pointer-events: none; transition: opacity .25s ease, transform .3s ease; }
.cv-worlds__sheet.is-open { opacity: 1; transform: none; pointer-events: auto; }
.cv-worlds__sheet .cv-fruit__index { display: none; }
.cv-worlds__sheet .cv-fruit__head, .cv-worlds__sheet .cv-fruit__body, .cv-worlds__sheet .cv-media { max-width: none; width: auto; }
.cv-worlds__sheet h3, .cv-worlds__sheet .cv-fruit__sense { color: #fffaf3; }
.cv-worlds__sheet .cv-media { display: grid; margin: .9rem 0 1.1rem; }
.cv-worlds__sheet .cv-media__stage { height: clamp(14rem, 38vh, 24rem); }
.cv-worlds__sheet .cv-media__shot img { max-height: clamp(14rem, 38vh, 24rem); }
.cv-worlds__sheet a { color: #f6efe2; }
.cv-worlds__close { position: sticky; top: 0; float: right; z-index: 2; margin: 0 0 .4rem .6rem; font: inherit; font-size: .82rem; padding: .42rem .9rem; border-radius: 999px; border: 1px solid rgba(246, 239, 226, .3); background: rgba(10, 12, 24, .9); color: #f6efe2; cursor: pointer; }
/* the recap, the process and the sections after: the same night, one accent each */
html.cv-worlds-on main > section:not(#fruit) { --cv-ink: #f4ede1; --cv-ink-soft: rgba(244, 237, 225, .8); --cv-ink-faint: rgba(244, 237, 225, .62); --cv-rule: rgba(244, 237, 225, .16); --cv-day: #0b0d18; --cv-bone: #0b0d18; color: var(--cv-ink); }
html.cv-worlds-on .cv-table, html.cv-worlds-on .cv-occasions, html.cv-worlds-on .cv-info, html.cv-worlds-on .cv-faq { position: relative; width: 100vw; margin-left: calc(50% - 50vw); box-sizing: border-box; padding: clamp(4rem, 10vh, 7rem) max(var(--cv-gutter), calc(50vw - var(--cv-wide) / 2 + var(--cv-gutter))); border-top: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 0%, color-mix(in srgb, var(--accent, #ffd21a) 10%, transparent), transparent 70%), url(/ca/space/sky.webp) center / cover, #05060b; }
html.cv-worlds-on .cv-table { --accent: #ffd21a; } html.cv-worlds-on .cv-occasions { --accent: #ff5f95; } html.cv-worlds-on .cv-info { --accent: #d4ff1a; } html.cv-worlds-on .cv-faq { --accent: #e2457e; }
html.cv-worlds-on .cv-table::before { display: none; }
html.cv-worlds-on .cv-table h2, html.cv-worlds-on .cv-occasions h2, html.cv-worlds-on .cv-info h2, html.cv-worlds-on .cv-faq h2, html.cv-worlds-on .cv-process h2, html.cv-worlds-on .cv-harvest h2 { color: #fffaf3; }
html.cv-worlds-on .cv-table h2, html.cv-worlds-on .cv-occasions h2, html.cv-worlds-on .cv-info h2, html.cv-worlds-on .cv-faq h2 { font-family: var(--cv-font-text); font-weight: 600; text-transform: lowercase; letter-spacing: -.035em; font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: .95; }
html.cv-worlds-on .cv-table__packs { border-top-color: rgba(244, 237, 225, .14); }
html.cv-worlds-on .cv-table__pack img { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); transition: transform .5s ease; }
html.cv-worlds-on .cv-table__pack:nth-child(odd) img { transform: translateY(-10px) rotate(-2deg); } html.cv-worlds-on .cv-table__pack:nth-child(even) img { transform: translateY(8px) rotate(2deg); }
html.cv-worlds-on .cv-button--primary { background: #fffaf3; color: #141018; border-color: #fffaf3; }
html.cv-worlds-on .cv-button--quiet { color: #fffaf3; border-color: rgba(255, 250, 243, .4); }
html.cv-worlds-on .cv-occasion { background: rgba(255, 255, 255, .04); border: 1px solid rgba(244, 237, 225, .12); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
html.cv-worlds-on .cv-faq__item { border-color: rgba(244, 237, 225, .14); }
html.cv-worlds-on .cv-info__facts { border-color: rgba(244, 237, 225, .14); }
/* the process: Pineapple, four steps, the step in view lit in its lime */
html.cv-worlds-on .cv-process { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 340svh; padding: 0; border: 0; background: #05060b; }
.cv-worlds__proc-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 0 max(var(--cv-gutter), 7vw);
  background: radial-gradient(ellipse 50% 40% at 75% 55%, rgba(212, 255, 26, .1), transparent 70%), url(/ca/space/sky.webp) center / cover, #05060b; }
.cv-worlds__proc-pin > :not(.cv-worlds__process) { grid-column: 1; }
.cv-worlds__proc-pin h2 { font-family: var(--cv-font-text); font-weight: 600; text-transform: lowercase; letter-spacing: -.035em; font-size: clamp(2rem, 3.4vw, 3.6rem); line-height: .95; margin: .4rem 0 2rem; }
.cv-worlds__proc .cv-process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .2rem; border: 0; }
.cv-worlds__proc .cv-process__steps li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .6rem; padding: .9rem 0; border-top: 1px solid rgba(244, 237, 225, .12); opacity: .42; transition: opacity .4s ease; }
.cv-worlds__proc .cv-process__steps li.is-on { opacity: 1; }
.cv-worlds__proc .cv-process__steps li span { grid-row: span 2; color: #d4ff1a; font-variant-numeric: tabular-nums; }
.cv-worlds__proc .cv-process__steps li strong { font-size: 1.15rem; font-weight: 600; }
.cv-worlds__proc .cv-process__steps li p { margin: .2rem 0 0; color: rgba(244, 237, 225, .78); }
.cv-worlds__process { grid-column: 2; grid-row: 1 / span 4; position: relative; height: min(64svh, 40vw); }
.cv-worlds__process img { position: absolute; left: 50%; top: 50%; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: opacity .6s ease, transform .9s ease; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.cv-worlds__process .is-pack { height: 88%; }
.cv-worlds__proc[data-step="0"] .is-pack, .cv-worlds__proc[data-step="3"] .is-pack { opacity: 1; transform: translate(-50%, -50%); }
.cv-worlds__proc[data-step="1"] .is-pile { opacity: 1; transform: translate(-50%, -50%); }
.cv-worlds__proc[data-step="2"] .is-macro { opacity: 1; transform: translate(-50%, -50%); }
.cv-worlds__process .is-frost { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 230, 255, .35), transparent); mix-blend-mode: screen; opacity: 0; transition: opacity .6s ease; }
.cv-worlds__proc[data-step="1"] .is-frost { opacity: 1; }
.cv-worlds__process .is-vapour { position: absolute; left: 30%; right: 30%; top: 0; height: 40%; background: radial-gradient(ellipse at 50% 100%, rgba(230, 240, 255, .28), transparent 70%); filter: blur(6px); opacity: 0; transition: opacity .6s ease; }
.cv-worlds__proc[data-step="2"] .is-vapour { opacity: 1; animation: cv-vapour 3.2s ease-in-out infinite; }
@keyframes cv-vapour { 0%, 100% { transform: translateY(6%); } 50% { transform: translateY(-6%); } }
/* the ending: the couple and the five pouches, the sign-up line */
html.cv-worlds-on .cv-harvest.cv-worlds__end { position: relative; width: 100vw; max-width: none; margin: 0 0 0 calc(50% - 50vw) !important; min-height: 100svh; box-sizing: border-box; padding: 0 max(var(--cv-gutter), 7vw); display: grid; align-content: center; justify-items: center; text-align: center; overflow: hidden; isolation: isolate; color: #fffaf3; background: url(/ca/space/sky.webp) center / cover, #05060b; --horizon: 75svh; }
.cv-worlds__ending { position: absolute; inset: 0; z-index: -1; }
html.cv-worlds-on .cv-harvest.cv-worlds__end > :not(.cv-worlds__ending) { justify-self: center; }
.cv-worlds__five { position: absolute; left: 0; right: 0; top: 13svh; height: 28svh; }
.cv-worlds__five img { position: absolute; top: 0; height: 100%; transform: translateX(-50%); filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .5)); }
.cv-worlds__five img:nth-child(1) { left: 24%; top: 12%; height: 74%; transform: translateX(-50%) rotate(-6deg); } .cv-worlds__five img:nth-child(2) { left: 37%; top: 3%; height: 86%; transform: translateX(-50%) rotate(-2deg); }
.cv-worlds__five img:nth-child(3) { left: 50%; top: 0; height: 96%; } .cv-worlds__five img:nth-child(4) { left: 63%; top: 3%; height: 86%; transform: translateX(-50%) rotate(2deg); } .cv-worlds__five img:nth-child(5) { left: 76%; top: 12%; height: 74%; transform: translateX(-50%) rotate(6deg); }

html.cv-worlds-on .cv-harvest.cv-worlds__end h2 { font-family: var(--cv-font-text); font-weight: 600; text-transform: lowercase; letter-spacing: -.04em; font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: .95; margin-top: 18svh; }
html.cv-worlds-on .cv-harvest.cv-worlds__end p { color: rgba(255, 250, 243, .78); }
html.cv-worlds-on .cv-foot { background: #05060b; color: rgba(244, 237, 225, .8); --cv-ink: #f4ede1; --cv-ink-faint: rgba(244, 237, 225, .6); --cv-rule: rgba(244, 237, 225, .14); border-top: 1px solid rgba(244, 237, 225, .1); }
/* reduced motion: every world as a still screen in the page flow, no stage, no bridge */
html.cv-worlds-still #fruit { height: auto; margin-top: 0; }
html.cv-worlds-still .cv-worlds__stage { position: relative; height: auto; opacity: 1; }
html.cv-worlds-still .cv-world { position: relative; height: 100svh; min-height: 560px; visibility: visible; opacity: 1; }
html.cv-worlds-still .cv-worlds__index { position: sticky; bottom: 1.4rem; padding: 0 0 1.4rem; }
html.cv-worlds-still .cv-process { height: auto; } html.cv-worlds-still .cv-worlds__proc-pin { position: relative; height: auto; min-height: 100svh; padding-top: 6rem; padding-bottom: 6rem; }
html.cv-worlds-still .cv-worlds__proc .cv-process__steps li { opacity: 1; } html.cv-worlds-still .cv-worlds__process .is-pack { opacity: 1; transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) { .cv-worlds__sheet, .cv-worlds__process img, .cv-worlds__process span { transition: none; } .cv-worlds__process .is-vapour { animation: none; } }
@media (max-width: 760px) {
  .cv-world { --horizon: 68svh; --w-x: var(--cv-gutter); --w-y: 10svh; --w-w: auto; --pl-x: 84%; --pl-y: 22svh; --pl-w: 7vw; --pf-x: 15%; --pf-y: 42svh; --pf-w: 3vw; }
  .cv-world__words { right: var(--cv-gutter); }
  .cv-world__title { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
  .cv-world__tag { margin-top: .45rem; font-size: 1.15rem; }
  .cv-world__explore { margin-top: .8rem; padding: .5rem .95rem; font-size: .82rem; }
  .cv-world--alphonso-mango { --p-x: 52%; --p-y: 27.5svh; --p-h: 37svh; }   /* its name wraps to two lines on phones: the pouch sits a little lower */
  .cv-world--java-plum { --p-x: 58%; --p-y: 24.3svh; --p-h: 37.1svh; --c-x: 14.1vw; --c-y: 74.3svh; --c-h: 17.4svh; --pl-x: 16%; --pl-y: 50svh; --pf-x: 86%; --pf-y: 24svh; }
  .cv-world--pineapple { --p-x: 45%; --p-y: 23svh; --p-h: 40.8svh; --c-x: 48.7vw; --c-y: 73.4svh; --c-h: 17.4svh; --pl-x: 86%; --pl-y: 46svh; --pf-x: 12%; --pf-y: 26svh; }
  .cv-world--pink-guava { --horizon: 72svh; --p-x: 55%; --p-y: 24.7svh; --p-h: 33.4svh; --c-x: 37.9vw; --c-y: 80svh; --c-h: 14svh; --pl-x: 84%; --pl-y: 25svh; --pl-w: 10vw; --pf-x: 16%; --pf-y: 58svh; }
  .cv-world--papaya { --p-x: 54%; --p-y: 21.6svh; --p-h: 44.5svh; --c-x: 15.4vw; --c-y: 74.1svh; --c-h: 17.4svh; --pl-x: 86%; --pl-y: 60svh; --pf-x: 14%; --pf-y: 30svh; }
  .cv-worlds__index { left: 0; right: 0; bottom: auto; top: calc(3.9rem + env(safe-area-inset-top, 0px)); padding: 0 var(--cv-gutter); overflow-x: auto; scrollbar-width: none; gap: 1.05rem; }
  .cv-worlds__index::-webkit-scrollbar { display: none; }
  .cv-worlds__index a { flex: none; white-space: nowrap; font-size: .72rem; }
  .cv-world { --w-y: 12.5svh; }
  .cv-worlds__sheet { top: calc(3.6rem + 5svh); bottom: 0; left: 0; right: 0 !important; width: auto; border-radius: 20px 20px 0 0; transform: translate3d(0, 20px, 0); padding-bottom: max(1.4rem, env(safe-area-inset-bottom, 0px)); }
  .cv-worlds__sheet .cv-media__stage { height: 34svh; } .cv-worlds__sheet .cv-media__shot img { max-height: 34svh; }
  .cv-worlds__proc-pin { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; align-content: start; padding-top: 5.5rem; gap: 0; }
  .cv-worlds__process { grid-column: 1; grid-row: auto; height: 30svh; margin-top: 1rem; }
  .cv-worlds__proc .cv-process__steps li { padding: .55rem 0; } .cv-worlds__proc-pin h2 { margin-bottom: 1rem; }
  html.cv-worlds-on .cv-harvest.cv-worlds__end { --horizon: 70svh; }
  .cv-worlds__five { top: 16svh; height: 16svh; }
  html.cv-worlds-on .cv-harvest.cv-worlds__end h2 { margin-top: 14svh; }
}

/* ============================================================================
   THE WORLDS — reading and integration pass (18 Oct 2026, after Astra's
   whole-journey review): product names in their own case; one pouch at a time
   through a hand-over; a faint valley under the first sky (no blank beat);
   restrained light around each pouch that never dims or recolours its label;
   a solid reading sheet over a dimmed, inert scene; a simpler phone index with
   real touch targets; the sound switch kept clear of words and links.
   ========================================================================== */
html.cv-worlds-on .cv-descent__stage { filter: brightness(max(.26, 1 - 1.6 * var(--cv-leave, 0))); }
.cv-world__title { text-transform: none; letter-spacing: -.03em; line-height: 1; }
.cv-world__tag { color: color-mix(in srgb, var(--pack) 45%, #fffaf3); }
.cv-world__pack { opacity: var(--pack-o, 1); }
/* light, not paint: a cool sky rim on the upper-left edge, a faint glow of the fruit's own colour, a soft fall of shadow toward the ground */
.cv-world__shade { display: none; }
.cv-world__pouch { filter: drop-shadow(-1.5px -1px 0 rgba(214, 232, 255, .42)) drop-shadow(0 0 26px color-mix(in srgb, var(--pack) 26%, transparent)) drop-shadow(0 30px 34px rgba(0, 0, 0, .42)); }
html.cv-worlds-still .cv-world__pack { opacity: 1; }

/* the sheet: a solid surface over a dimmed scene */
.cv-worlds__scrim { position: fixed; inset: 0; z-index: 39; background: rgba(4, 4, 9, .74); opacity: 0; pointer-events: none; transition: opacity .25s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.cv-worlds-sheet .cv-worlds__scrim { opacity: 1; pointer-events: auto; }
.cv-worlds__sheet { background: #0e0f1a; border-color: rgba(255, 250, 243, .12); z-index: 40; }
.cv-worlds__sheet .cv-fruit__intro { margin-top: 1.2rem; max-width: 30rem; font-size: 1.1rem; line-height: 1.55; color: #fffaf3; }
.cv-fruit__intro { margin-top: 1.2rem; max-width: 30rem; font-size: 1.1rem; line-height: 1.55; color: var(--cv-ink-soft); }
.cv-worlds__close { min-height: 44px; padding: .5rem 1.1rem; background: #1b1d2c; }
html.cv-worlds-sheet .cv-worlds__index { visibility: hidden; }

/* the index: the five names on wide screens, larger; on phones five colour marks (each still names its fruit) */
.cv-worlds__index a { font-size: .9rem; padding: .55rem 0; min-height: 44px; }
.cv-worlds__index a:focus-visible { outline: 2px solid #fffaf3; outline-offset: 4px; }

/* the sound switch: never over words or links; safe areas respected */
.cv-worlds__sound { right: max(var(--cv-gutter), 2vw, env(safe-area-inset-right, 0px)); bottom: max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + .5rem)); min-height: 44px; padding: .5rem 1rem; }

/* the rest of the night: sentence-case headings, warm ink */
html.cv-worlds-on .cv-table h2, html.cv-worlds-on .cv-occasions h2, html.cv-worlds-on .cv-info h2, html.cv-worlds-on .cv-faq h2, html.cv-worlds-on .cv-harvest.cv-worlds__end h2 { text-transform: none; font-family: var(--cv-font-display); font-weight: 400; letter-spacing: -.015em; }
.cv-foot__line { margin: 0 0 1.2rem; font-family: var(--cv-font-display); font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); color: var(--cv-ink); }

@media (max-width: 760px) {
  .cv-worlds__index { top: auto; bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + .4rem)); left: max(var(--cv-gutter), env(safe-area-inset-left, 0px)); right: auto; padding: 0; gap: .15rem; overflow: visible; }
  .cv-worlds__index a { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; color: transparent; text-shadow: none; }
  .cv-worlds__index a::before { width: 10px !important; height: 10px; border-radius: 50%; opacity: .55; background: var(--cv-territory); box-shadow: 0 0 0 1px rgba(255, 250, 243, .35); transition: transform .25s ease, opacity .25s ease; }
  .cv-worlds__index a.is-current::before { width: 10px !important; opacity: 1; transform: scale(1.45); box-shadow: 0 0 0 1.5px #fffaf3; }
  .cv-worlds__sound { font-size: .74rem; padding: .45rem .85rem; }
  .cv-worlds__sheet { top: calc(64px + env(safe-area-inset-top, 0px) + 1.5svh); background: #0e0f1a; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .cv-worlds__sheet { top: calc(64px + .5rem); bottom: .5rem; width: min(30rem, 56vw); }
  .cv-worlds__sheet .cv-media__stage { height: 46svh; } .cv-worlds__sheet .cv-media__shot img { max-height: 46svh; }
}
/* the pouch's shadow on its ground, soft and offset away from the upper-left light: it floats above this place */
.cv-world__cast { position: absolute; z-index: 1; left: calc(var(--p-x) + var(--p-h) * .1); top: calc(var(--horizon) + (100svh - var(--horizon)) * .3); width: calc(var(--p-h) * .8); height: calc(var(--p-h) * .11); transform: translate3d(-50%, calc(-50% + var(--near-y, 0px)), 0);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, .12) 60%, transparent); filter: blur(5px); opacity: calc(var(--pack-o, 1) * .9); pointer-events: none; }

/* After the process: daylight. Occasions, information and questions on a warm paper surface with warm ink; one lead
   image (the shared table) with the sharing moment beside it, the other moments smaller below. */
html.cv-worlds-on main > section.cv-worlds__occ:not(#fruit), html.cv-worlds-on main > section.cv-worlds__day:not(#fruit) { --cv-ink: #2b1d12; --cv-ink-soft: rgba(43, 29, 18, .78); --cv-ink-faint: rgba(43, 29, 18, .6); --cv-rule: rgba(43, 29, 18, .14); --cv-day: #f6ecdc; --cv-bone: #f6ecdc; --cv-day-lift: #fff8ec;
  background: #f6ecdc; color: var(--cv-ink); }
html.cv-worlds-on .cv-occasions.cv-worlds__occ { background: radial-gradient(90% 60% at 20% 0%, #fde3b4 0%, transparent 70%), linear-gradient(180deg, #f8e7cc 0%, #f6ecdc 40%); }
html.cv-worlds-on .cv-occasions.cv-worlds__occ h2, html.cv-worlds-on .cv-worlds__day h2 { color: #2b1d12; }
html.cv-worlds-on .cv-occasions.cv-worlds__occ .cv-eyebrow, html.cv-worlds-on .cv-worlds__day .cv-eyebrow { color: #a3521d; }
.cv-worlds__occ .cv-occasions__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
html.cv-worlds-on .cv-worlds__occ .cv-occasion { background: #fff8ec; border: 0; border-radius: 18px; box-shadow: 0 1px 0 rgba(43, 29, 18, .06), 0 18px 40px -24px rgba(90, 50, 20, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cv-worlds__occ .cv-occasion.is-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); padding: 0; overflow: hidden; }
.cv-worlds__occ .cv-occasion.is-lead > :not(.cv-worlds__occ-photo) { grid-column: 2; padding-right: clamp(1.2rem, 3vw, 2.6rem); }
.cv-worlds__occ .cv-occasion.is-lead h3 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.cv-worlds__occ .cv-occasion.is-lead p { font-size: 1.05rem; }
.cv-worlds__occ-photo { grid-column: 1; grid-row: 1 / span 4; display: block; height: 100%; }
.cv-worlds__occ-photo img { display: block; width: 100%; height: 100%; min-height: 22rem; object-fit: cover; }
.cv-worlds__occ-fruit { width: 4.6rem; height: 4.6rem; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(90, 50, 20, .25)); }
.cv-worlds__occ .cv-occasion__fruits a { color: #2b1d12; }
html.cv-worlds-on .cv-worlds__day .cv-faq__item { border-color: rgba(43, 29, 18, .14); }
html.cv-worlds-on .cv-worlds__day .cv-info__facts dt { color: #a3521d; }
@media (max-width: 760px) {
  .cv-worlds__occ .cv-occasions__grid { grid-template-columns: minmax(0, 1fr); }
  .cv-worlds__occ .cv-occasion.is-lead { grid-template-columns: minmax(0, 1fr); padding: 0 0 1.4rem; }
  .cv-worlds__occ .cv-occasion.is-lead > :not(.cv-worlds__occ-photo) { grid-column: 1; padding: 0 1.2rem; }
  .cv-worlds__occ-photo { grid-row: auto; } .cv-worlds__occ-photo img { min-height: 0; height: auto; aspect-ratio: 3 / 4; }
  .cv-worlds__occ .cv-occasion:not(.is-lead) { grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
  .cv-worlds__occ .cv-occasion:not(.is-lead) > :not(.cv-worlds__occ-fruit) { grid-column: 2; }
  .cv-worlds__occ .cv-occasion:not(.is-lead) .cv-worlds__occ-fruit { grid-row: 1 / span 3; width: 4rem; height: 4rem; }
}
html.cv-worlds-on main > section.cv-worlds__occ:not(#fruit) .cv-occasion h3, html.cv-worlds-on main > section.cv-worlds__day:not(#fruit) dd, html.cv-worlds-on main > section.cv-worlds__day:not(#fruit) summary { color: #2b1d12; }
.cv-worlds__occ .cv-occasion.is-lead { order: -1; }
/* the recap: "Five fruits. Find your favourite." with a compact chooser (each pouch goes to its world) */
html.cv-worlds-on #table .cv-table__packs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 2rem); margin: clamp(1.6rem, 4vh, 2.6rem) 0 0; padding: 0; list-style: none; border: 0; max-width: 60rem; }
html.cv-worlds-on #table .cv-table__pack a { display: grid; justify-items: center; gap: .6rem; text-decoration: none; color: #fffaf3; font-size: .9rem; text-align: center; padding: .4rem 0; border-radius: 12px; }
html.cv-worlds-on #table .cv-table__pack img { height: clamp(7rem, 20svh, 12rem); width: auto; }
html.cv-worlds-on #table .cv-table__pack a:hover img, html.cv-worlds-on #table .cv-table__pack a:focus-visible img { transform: translateY(-6px) rotate(0deg); }
html.cv-worlds-on #table .cv-table__pack a:focus-visible { outline: 2px solid #fffaf3; outline-offset: 4px; }
html.cv-worlds-on #table .cv-table__pack em { display: none; }   /* the review note is said once, under the heading */
@media (max-width: 760px) { html.cv-worlds-on #table .cv-table__packs { gap: .3rem; } html.cv-worlds-on #table .cv-table__pack img { height: 22vw; } html.cv-worlds-on #table .cv-table__pack a { font-size: .64rem; line-height: 1.15; gap: .35rem; } }
/* the closing invitation at dusk: warm light rising toward the horizon behind the five pouches */
.cv-worlds__ending::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 28, 0) 0%, rgba(70, 36, 60, .35) 38%, rgba(214, 112, 62, .55) calc(var(--horizon, 75svh) - 2svh), rgba(255, 176, 102, .7) var(--horizon, 75svh), transparent calc(var(--horizon, 75svh) + .5svh)); }
.cv-worlds__ending .cv-world__ground, .cv-worlds__five { z-index: 1; }
@media (max-height: 520px) and (orientation: landscape) {
  /* phones held sideways: the index becomes the five colour marks, and the sound switch sits beside them on the ground band, below every world's words */
  .cv-worlds__index { left: max(var(--cv-gutter), env(safe-area-inset-left, 0px)); bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); gap: .15rem; }
  .cv-worlds__index a { position: relative; width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; color: transparent; text-shadow: none; }
  .cv-worlds__index a::before { width: 10px !important; height: 10px; border-radius: 50%; opacity: .55; background: var(--cv-territory); box-shadow: 0 0 0 1px rgba(255, 250, 243, .35); }
  .cv-worlds__index a.is-current::before { opacity: 1; transform: scale(1.45); box-shadow: 0 0 0 1.5px #fffaf3; }
  .cv-worlds__sound { left: calc(max(var(--cv-gutter), env(safe-area-inset-left, 0px)) + 236px); right: auto; bottom: max(.5rem, env(safe-area-inset-bottom, 0px)); top: auto; }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* sideways phones: every world's words start just under the header and end above the ground band, where the index and the sound switch live */
  html.cv-worlds-on .cv-world .cv-world__words { top: calc(64px + env(safe-area-inset-top, 0px) + .6rem); max-height: calc(100svh - 64px - 5.2rem); }
  html.cv-worlds-on .cv-world .cv-world__title { font-size: clamp(1.5rem, 4.4vw, 2.1rem); }
  html.cv-worlds-on .cv-world .cv-world__tag { margin-top: .35rem; font-size: 1rem; }
  html.cv-worlds-on .cv-world .cv-world__explore { margin-top: .55rem; min-height: 40px; padding: .4rem .9rem; font-size: .8rem; }
}
.cv-worlds__sound { transition: opacity .3s ease, visibility .3s; }
.cv-worlds__sound.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
.cv-worlds__stage { overflow: clip; }   /* clip, not hidden: focusing an Explore button can never scroll the scene inside its frame */

/* ============================================================================
   THE FOUR DIMENSIONS (19 Oct 2026; Astra's component study ported into the
   pack worlds). Doors: unboxed, numbered, editorial. The dialog frame never
   changes; each composition changes material, light and its relation to the
   fruit. Only transform and opacity animate (WAAPI, in dimensions.js).
   ========================================================================== */
.cv-world__doors { display: block; margin-top: 1.1rem; width: min(19rem, 100%); pointer-events: auto; }
.cv-world__doors-intro { display: block; margin-bottom: .55rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 250, 243, .6); }
.cv-world__door { display: grid; grid-template-columns: 1.4rem 1fr 1rem; column-gap: .7rem; align-items: center; width: 100%; min-height: 44px; padding: .62rem 0; border: 0; border-bottom: 1px solid rgba(255, 250, 243, .28); background: none; color: #fffaf3; font: inherit; text-align: left; cursor: pointer; position: relative; }
.cv-world__door:first-of-type { border-top: 1px solid rgba(255, 250, 243, .28); }
.cv-world__door-no { font-size: .6rem; color: color-mix(in srgb, var(--pack) 70%, #fff); align-self: start; padding-top: .3rem; }
.cv-world__door-t { font-size: 1.05rem; letter-spacing: -.01em; }
.cv-world__door-h { grid-column: 2; font-size: .7rem; color: rgba(255, 250, 243, .62); }
.cv-world__door-a { grid-column: 3; grid-row: 1; font-size: .9rem; transition: transform .2s ease; }
.cv-world__door:hover .cv-world__door-a, .cv-world__door:focus-visible .cv-world__door-a { transform: translate(2px, -2px); }
.cv-world__door::after { content: ""; position: absolute; inset: 0 -.6rem; background: rgba(255, 255, 255, .06); opacity: 0; transition: opacity .15s; pointer-events: none; }
.cv-world__door:hover::after { opacity: 1; }
.cv-world__door:focus-visible { outline: 2px solid #fffaf3; outline-offset: 4px; }

html.cv-dim-open, html.cv-dim-open body { overflow: hidden; }
dialog.cv-dim { border: 0; padding: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; color: inherit; background: transparent; overflow: hidden; }
dialog.cv-dim::backdrop { background: #11120f; opacity: .92; }
.cv-dim__shell { --gutter: clamp(18px, 4.5vw, 76px); --ink: #11120f; height: 100%; overflow: auto; overscroll-behavior: contain; position: relative; isolation: isolate; display: flex; flex-direction: column; font-family: var(--cv-font-text); }
.cv-dim__head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding: max(.5rem, env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) .5rem max(var(--gutter), env(safe-area-inset-left, 0px)); border-bottom: 1px solid currentColor; background: inherit; }
.cv-dim__mark { font-family: var(--cv-font-display); font-size: 1.3rem; letter-spacing: .2em; white-space: nowrap; } .cv-dim__mark span { font-size: .75rem; margin-left: .2rem; vertical-align: top; }
.cv-dim__fruit { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.cv-dim__back { display: flex; align-items: center; gap: .9rem; min-height: 44px; padding: .4rem 0; border: 0; background: none; color: inherit; font: inherit; font-size: .8rem; cursor: pointer; }
.cv-dim__back > span:first-child { font-size: 1.4rem; line-height: 1; }
.cv-dim__esc { border: 1px solid currentColor; font-size: .55rem; padding: .2rem .3rem; opacity: .5; letter-spacing: .08em; }
.cv-dim__host { flex: 1 0 auto; position: relative; }
.cv-dim__foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; padding: .3rem max(var(--gutter), env(safe-area-inset-right, 0px)) max(.3rem, env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); border-top: 1px solid currentColor; background: inherit; }
.cv-dim__fruits { display: flex; gap: .2rem; }
.cv-dim__fruits button { min-width: 44px; min-height: 44px; display: grid; justify-items: center; align-content: center; gap: .35rem; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cv-dim__swatch { width: 11px; height: 11px; border-radius: 50%; background: var(--swatch); position: relative; }
.cv-dim__fruits button[aria-pressed="true"] .cv-dim__swatch::after { content: ""; position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 50%; opacity: .6; }
.cv-dim__fruit-label { font-size: .58rem; opacity: 0; transition: opacity .15s; white-space: nowrap; }
.cv-dim__fruits button:is([aria-pressed="true"], :hover, :focus-visible) .cv-dim__fruit-label { opacity: 1; }
.cv-dim__nav { display: flex; gap: clamp(.8rem, 2.4vw, 2.2rem); }
.cv-dim__nav button { display: flex; gap: .5rem; align-items: center; min-height: 44px; padding: .4rem 0; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font: inherit; font-size: .78rem; cursor: pointer; }
.cv-dim__nav button span { font-size: .6rem; opacity: .55; }
.cv-dim__nav button[aria-current="page"] { border-bottom-color: currentColor; }
.cv-dim__shell :is(button, summary, [tabindex="0"], input):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

/* the views */
.cv-dv { position: relative; min-height: max(520px, calc(100svh - 142px)); overflow: hidden; isolation: isolate; }
.cv-dv__mark { position: absolute; left: var(--gutter); top: 1.6rem; z-index: 3; margin: 0; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.cv-dv__eyebrow { margin: 0 0 1.1rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.cv-dv__title, .cv-dv__word { margin: 0; font-family: var(--cv-font-text); font-weight: 500; line-height: .9; letter-spacing: -.065em; outline: none; font-size: clamp(3.6rem, 8.4vw, 8.8rem); }
.cv-dv__title em { font-family: var(--cv-font-display); font-weight: 400; letter-spacing: -.06em; }
.cv-dv__caption, .cv-dv__imgnote { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.cv-dv__review { margin-top: .8rem; font-size: .66rem; color: #e0401f; }

/* NUTRITION: warm botanical paper; the ingredient as a word; the real pieces; a precise ledger */
.cv-dim__shell[data-subject="nutrition"] { background: #ebe6d4; color: #17251b; }
.cv-dv--nutrition { min-height: max(600px, calc(100svh - 142px)); }
.cv-dv__nhead { position: absolute; left: var(--gutter); top: 22%; z-index: 2; }
.cv-dv__word { font-size: clamp(5.4rem, 13vw, 13.5rem); letter-spacing: -.08em; }
.cv-dv__lede { margin: 2rem 0 0; font-size: .96rem; line-height: 1.5; }
.cv-dv__pieces { position: absolute; left: 29%; top: 7%; width: 45%; height: 80%; object-fit: contain; transform: rotate(-12deg); z-index: 1; filter: drop-shadow(0 26px 30px rgba(70, 50, 20, .18)); }
.cv-dv--nutrition .cv-dv__caption { position: absolute; left: var(--gutter); bottom: 1.6rem; margin: 0; }
.cv-dv__ledger { position: absolute; right: var(--gutter); top: 22%; width: 24%; z-index: 2; }
.cv-dv__ledger > div { padding: 1.2rem 0; border-top: 1px solid rgba(23, 37, 27, .34); }
.cv-dv__ledger span { display: block; margin-bottom: .7rem; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; }
.cv-dv__ledger strong { font-size: 1.4rem; font-weight: 400; line-height: 1.2; }
.cv-dv__ledger p { margin: 0; font-size: .86rem; line-height: 1.5; }
.cv-dv__ledger details { padding: 1.1rem 0; border-top: 1px solid rgba(23, 37, 27, .34); border-bottom: 1px solid rgba(23, 37, 27, .34); }
.cv-dv__ledger summary { display: flex; justify-content: space-between; gap: .8rem; min-height: 44px; align-items: center; font-size: .74rem; cursor: pointer; list-style: none; }
.cv-dv__ledger summary::-webkit-details-marker { display: none; }
.cv-dv__pending { margin: .8rem 0 0 !important; font-size: .74rem !important; }
.cv-dv__one { position: absolute; left: 16%; bottom: -14%; z-index: -1; font-family: var(--cv-font-display); font-size: clamp(18rem, 34vw, 31rem); line-height: 1; color: rgba(23, 37, 27, .05); }

/* TASTE: a dark warm field; the real macro at scale; the lens only when asked */
.cv-dim__shell[data-subject="taste"] { background: #24170d; color: #fff0cb; }
.cv-dv__thead { position: absolute; left: var(--gutter); top: 22%; z-index: 2; width: 40%; pointer-events: none; }
.cv-dv__desc { margin: 1.8rem 0 0; max-width: 21rem; font-size: .96rem; line-height: 1.6; }
.cv-dv__stage { position: absolute; top: 0; right: -3%; width: 60%; height: 100%; overflow: hidden; touch-action: pan-y; }
.cv-dv__stage[data-lens-active="true"] { touch-action: none; }
.cv-dv__macro { width: 100%; height: 100%; object-fit: contain; display: block; }
.cv-dv__lens { position: absolute; left: 0; top: 0; z-index: 2; width: 190px; height: 190px; border: 1px solid rgba(255, 240, 203, .8); border-radius: 50%; overflow: hidden; background: #24170d; box-shadow: 0 0 0 6px rgba(36, 23, 13, .47); pointer-events: none; }
.cv-dv__lens[hidden] { display: none; }
.cv-dv__lens img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; object-fit: contain; transform-origin: 0 0; }
.cv-dv__controls { position: absolute; left: var(--gutter); bottom: 1.8rem; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; }
.cv-dv__lens-toggle { display: flex; align-items: center; gap: 1.8rem; min-height: 44px; padding: .5rem 0; border: 0; border-bottom: 1px solid currentColor; background: none; color: inherit; font: inherit; font-size: .78rem; cursor: pointer; }
.cv-dv__controls label { display: flex; align-items: center; gap: .7rem; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.cv-dv__controls input { width: 5.6rem; accent-color: #ffcf5b; }
.cv-dv__hint { width: 100%; font-size: .58rem; opacity: .6; }
.cv-dv__notes { position: absolute; right: var(--gutter); bottom: 1.8rem; z-index: 2; display: flex; gap: 1.2rem; }
.cv-dv__notes span { padding-top: .6rem; border-top: 1px solid rgba(255, 240, 203, .45); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.cv-dv__notes .cv-dv__closer { text-transform: none; letter-spacing: 0; font-family: var(--cv-font-display); font-style: italic; font-size: .95rem; }
.cv-dv--taste .cv-dv__review { position: absolute; right: var(--gutter); bottom: .4rem; margin: 0; }

/* ORIGINS: the fruit's own illustrative place; type in the scene */
.cv-dim__shell[data-subject="origins"] { background: #143423; color: #f4ecd9; }
.cv-dv__bg, .cv-dv__shade { position: absolute; inset: 0; }
.cv-dv__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; display: block; }
.cv-dv__shade { background: linear-gradient(90deg, rgba(11, 33, 30, .86), rgba(11, 33, 30, .1) 60%), linear-gradient(0deg, rgba(11, 33, 30, .7), transparent 80%); }
.cv-dv__ohead { position: absolute; left: var(--gutter); top: 21%; z-index: 2; }
.cv-dv__story { position: absolute; right: var(--gutter); bottom: 2.4rem; width: 30%; z-index: 2; }
.cv-dv__rule { display: block; width: 40px; height: 1px; margin-bottom: 1.5rem; background: currentColor; }
.cv-dv__story > p { margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.4; letter-spacing: -.01em; }
.cv-dv__story .cv-dv__latin { font-size: .95rem; opacity: .85; }
.cv-dv__story small { display: block; margin-top: 1rem; font-size: .66rem; line-height: 1.6; opacity: .82; }
.cv-dv__story .cv-dv__caption { display: block; margin-top: 1.4rem; }

/* RITUALS: a warm pause; the moment chooses the place; the real pieces */
.cv-dim__shell[data-subject="rituals"] { background: #edcfb1; color: #351b15; }
.cv-dv__window { position: absolute; top: 0; right: 0; width: 43%; height: 100%; overflow: hidden; }
.cv-dv__window img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 50%; display: block; }
.cv-dv__rhead { position: absolute; left: var(--gutter); top: 22%; z-index: 2; }
.cv-dv__line { margin: 1.8rem 0 0; max-width: 24rem; font-size: 1rem; line-height: 1.5; }
.cv-dv__piece { position: absolute; right: 25%; bottom: -14%; width: 34%; height: 58%; z-index: 1; pointer-events: none; }
.cv-dv__piece img { width: 100%; height: 100%; object-fit: contain; transform: rotate(12deg); }
.cv-dv__moments { position: absolute; left: var(--gutter); bottom: 2rem; z-index: 2; width: 26%; display: flex; flex-direction: column; }
.cv-dv__moments button { display: flex; align-items: center; gap: 1.1rem; min-height: 44px; padding: .55rem 0; border: 0; border-top: 1px solid rgba(53, 27, 21, .38); background: none; color: inherit; font: inherit; font-size: .58rem; text-align: left; opacity: .62; cursor: pointer; }
.cv-dv__moments button span:first-of-type { flex: 1; font-size: .86rem; }
.cv-dv__moments button[aria-pressed="true"] { opacity: 1; }
.cv-dv__imgnote { position: absolute; right: var(--gutter); bottom: 1.2rem; z-index: 2; margin: 0; color: #fff9eb; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }

/* phones: one column, native internal scrolling, close in the head, navigation at the foot */
@media (max-width: 760px) {
  .cv-world__doors { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; width: 100%; margin-top: .7rem; }
  .cv-world__doors-intro { grid-column: 1 / 3; margin-bottom: .2rem; font-size: .52rem; }
  .cv-world__door { grid-template-columns: 1rem 1fr .8rem; column-gap: .45rem; padding: .35rem 0; border-top: 1px solid rgba(255, 250, 243, .28); border-bottom: 0; }
  .cv-world__door-h { display: none; } .cv-world__door-t { font-size: .92rem; }
  .cv-dim__shell { --gutter: 20px; }
  .cv-dim__head { min-height: 60px; } .cv-dim__mark { font-size: 1rem; letter-spacing: .12em; } .cv-dim__fruit { display: none; } .cv-dim__esc { display: none; } .cv-dim__back { font-size: .76rem; gap: .6rem; }
  .cv-dim__foot { flex-direction: column; align-items: stretch; gap: 0; padding-top: .1rem; }
  .cv-dim__fruits { justify-content: space-between; } .cv-dim__fruit-label { opacity: .6; font-size: .54rem; }
  .cv-dim__nav { justify-content: space-between; gap: .4rem; } .cv-dim__nav button { font-size: .74rem; gap: .3rem; }
  .cv-dv { min-height: auto; padding: 4.2rem var(--gutter) 2rem; overflow: visible; display: flex; flex-direction: column; gap: 1.2rem; }
  .cv-dv__mark { top: 1.4rem; }
  .cv-dv__nhead, .cv-dv__thead, .cv-dv__ohead, .cv-dv__rhead, .cv-dv__ledger, .cv-dv__story, .cv-dv__controls, .cv-dv__notes, .cv-dv__moments, .cv-dv__caption, .cv-dv__imgnote { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .cv-dv__title { font-size: clamp(3.2rem, 15vw, 4.4rem); } .cv-dv__word { font-size: clamp(4.6rem, 25vw, 7rem); }
  .cv-dv__lede, .cv-dv__desc, .cv-dv__line { margin-top: 1rem; font-size: .9rem; }
  .cv-dv__pieces { position: relative; left: auto; top: auto; width: 100%; height: 300px; transform: rotate(-8deg); order: 2; }
  .cv-dv--nutrition .cv-dv__ledger { order: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; } .cv-dv__ledger details { grid-column: 1 / 3; }
  .cv-dv--nutrition .cv-dv__caption { order: 4; }
  .cv-dv__one { font-size: 22rem; left: -6%; bottom: auto; top: 3rem; }
  .cv-dv__stage { position: relative; right: auto; top: auto; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); height: 340px; order: 2; }
  .cv-dv__lens { width: 132px; height: 132px; }
  .cv-dv--taste .cv-dv__controls { order: 3; } .cv-dv--taste .cv-dv__notes { order: 4; } .cv-dv--taste .cv-dv__review { position: relative; right: auto; bottom: auto; order: 5; }
  .cv-dv--origins { min-height: calc(100svh - 160px); justify-content: flex-end; }
  .cv-dv--origins .cv-dv__ohead { margin-bottom: auto; padding-top: 1rem; }
  .cv-dv__shade { background: linear-gradient(0deg, rgba(11, 33, 30, .94), rgba(11, 33, 30, .25) 70%); }
  .cv-dv__story > p { font-size: 1.12rem; }
  .cv-dv__window { position: relative; width: calc(100% + 2 * var(--gutter)); height: 300px; margin: 0 calc(-1 * var(--gutter)); order: 3; }
  .cv-dv__piece { right: -4%; bottom: auto; top: 46%; width: 62%; height: 180px; z-index: 3; }
  .cv-dv--rituals .cv-dv__moments { order: 2; } .cv-dv--rituals .cv-dv__imgnote { order: 4; color: inherit; text-shadow: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .cv-world__doors { display: grid; grid-template-columns: 1fr 1fr; column-gap: .8rem; width: min(21rem, 42vw); margin-top: .4rem; }
  .cv-world__doors-intro, .cv-world__door-h { display: none; } .cv-world__door { padding: .2rem 0; min-height: 40px; border-top: 1px solid rgba(255, 250, 243, .28); border-bottom: 0; } .cv-world__door-t { font-size: .84rem; }
  .cv-dim__head { min-height: 52px; } .cv-dim__foot { min-height: 52px; } .cv-dim__fruit-label { display: none; }
  .cv-dv { min-height: calc(100svh - 104px); }
  .cv-dv__title { font-size: 3rem; } .cv-dv__word { font-size: 5rem; }
  .cv-dv__nhead, .cv-dv__thead, .cv-dv__ohead, .cv-dv__rhead { top: 3.4rem; }
  .cv-dv__ledger { top: 3.4rem; width: 30%; } .cv-dv__ledger > div { padding: .6rem 0; }
  .cv-dv__lede, .cv-dv__desc, .cv-dv__line { margin-top: .7rem; font-size: .82rem; }
  .cv-dv__story { width: 42%; bottom: 1rem; } .cv-dv__story > p { font-size: 1rem; }
  .cv-dv__moments { width: 34%; bottom: .6rem; } .cv-dv__controls { bottom: .6rem; } .cv-dv__notes { bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .cv-dim *, .cv-world__door * { transition: none !important; animation: none !important; } }
/* phones: the doors as their own strip above the fruit index (they fade with the world's words) */
.cv-world__doors.is-strip { position: absolute; z-index: 4; left: 16px; right: 16px; bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px) + .4rem) + 50px); width: auto; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: .2rem; padding: .15rem .5rem; border-radius: 14px; background: rgba(5, 6, 11, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: var(--words-o, 1); }
.cv-world__doors.is-strip .cv-world__doors-intro, .cv-world__doors.is-strip .cv-world__door-h, .cv-world__doors.is-strip .cv-world__door-a { display: none; }
.cv-world__doors.is-strip .cv-world__door { grid-template-columns: auto 1fr; column-gap: .3rem; justify-items: start; padding: .2rem 0; border: 0; min-height: 44px; }
.cv-world__doors.is-strip .cv-world__door-t { font-size: .8rem; }
.cv-world__doors.is-strip .cv-world__door-no { font-size: .52rem; padding-top: 0; align-self: center; }
@media (max-height: 520px) and (orientation: landscape) { .cv-world__doors.is-strip { left: auto; right: max(16px, env(safe-area-inset-right, 0px)); width: min(26rem, 52vw); bottom: .5rem; } }
html.cv-worlds-still .cv-world__doors.is-strip { opacity: 1; }
@media (max-width: 760px) { .cv-dv__piece { top: auto; bottom: 3.2rem; right: -6%; width: 58%; height: 170px; } }   /* the pieces sit in the photograph, never on the moment list */
@media (max-height: 520px) and (orientation: landscape) { .cv-dv__thead { width: 48%; } .cv-dv--taste .cv-dv__title { font-size: 2.3rem; } .cv-dv--taste .cv-dv__desc { font-size: .76rem; margin-top: .5rem; max-width: 19rem; } .cv-dv__hint { display: none; } }
@media (min-width: 761px) and (min-height: 521px) { .cv-world--pink-guava { --w-y: 24svh; } }   /* room for the four doors under its words */
@media (min-width: 761px) and (min-height: 521px) { .cv-world--alphonso-mango { --w-y: 26svh; } }   /* the French name wraps to three lines: keep its doors on screen */
.cv-world__doors.is-strip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5, 6, 11, .72); }   /* measured: a live blur over the moving worlds cost style/paint time on a throttled phone; a plain backing reads the same */

/* Integrated candidate corrections, 20 October 2026. */
/* Candidate against 8bba78c. Append after canada.css for isolated review.
   Keep the floating packs and existing interaction/motion engine.
   Content clearance is structural; do not reduce essential type to fit. */

/* Jay rejected the muddy brown Taste field. Keep the warm colour in the
   fruit itself; cool blue, neutral white and one static light field surround it. */
.cv-dim__shell[data-subject="taste"] {
  background: #102b57;
  color: #f4f7fc;
}
.cv-dv--taste {
  background: radial-gradient(ellipse at 77% 44%, #28578a 0%, #193e6d 36%, #102b57 73%);
}
.cv-dim__shell[data-subject="taste"] .cv-dv__lens {
  background: #193e6d;
  border-color: #d8ebff;
  box-shadow: 0 0 0 6px rgb(16 43 87 / 50%);
}
.cv-dim__shell[data-subject="taste"] .cv-dv__notes span {
  border-color: rgb(244 247 252 / 45%);
}
.cv-dim__shell[data-subject="taste"] .cv-dv__controls input { accent-color: #cce4ff; }
.cv-dim__shell[data-subject="taste"] .cv-dv__review { color: #dbe8f7; opacity: 1; }
.cv-dim__shell[data-subject="taste"] .cv-dv__hint { opacity: .85; }

/* The phone footer has two real rows. Prevent flex shrink from hiding its
   second row below the viewport; long French fruit names wrap within five
   equal touch targets rather than fading into tiny one-line labels. */
.cv-dim__head, .cv-dim__foot { flex-shrink: 0; }
@media (max-width: 760px) {
  .cv-dim__foot { min-height: auto; padding-top: .5rem; row-gap: .25rem; }
  .cv-dim__fruits {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .25rem;
  }
  .cv-dim__fruits button { min-width: 0; min-height: 56px; padding: .25rem 0; }
  .cv-dim__fruit-label {
    display: block;
    opacity: 1;
    font-size: 11px;
    line-height: 1.25;
    min-height: 2.5em;
    white-space: normal;
    text-align: center;
  }
  .cv-dim__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .cv-dim__nav button { min-width: 44px; min-height: 44px; font-size: 12px; justify-content: center; text-align: center; }
  .cv-dim__nav button span { display: none; }
  .cv-dv__hint, .cv-dv__review { font-size: 12px; line-height: 1.5; }
  .cv-dv__notes { flex-wrap: wrap; gap: .75rem 1.2rem; }
  .cv-dv__notes span { font-size: 11px; }
}
@media (min-width: 761px) and (min-height: 521px) {
  .cv-world__words {
    top: max(100px, 18svh);
  }
  .cv-world__doors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.25rem;
    width: 100%;
  }
  .cv-world__doors-intro {
    grid-column: 1 / -1;
  }
  .cv-world__door {
    grid-template-columns: 1fr 1rem;
    column-gap: .4rem;
    min-height: 48px;
    border-top: 1px solid rgba(255, 250, 243, .28);
    border-bottom: 0;
  }
  .cv-world__door-no { display: none; }
  .cv-world__door-t { grid-column: 1; font-size: .95rem; }
  .cv-world__door-a { grid-column: 2; }
  .cv-world__door-h { grid-column: 1 / -1; }
  .cv-world--java-plum { --pl-x: 88%; --pl-y: 54svh; }
  .cv-world--papaya { --w-x: 74vw; --w-w: 22vw; }
}

/* Taste copy and lens controls must never share absolute coordinates.
   Let longer tasting notes and French text determine the panel height. */
@media (min-width: 761px) {
  .cv-dv--taste {
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    align-content: center;
    gap: 1rem 2rem;
    padding: 4.2rem var(--gutter) 1rem;
  }
  .cv-dv--taste :is(.cv-dv__thead, .cv-dv__stage, .cv-dv__controls, .cv-dv__notes, .cv-dv__review) {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }
  .cv-dv--taste .cv-dv__thead { grid-area: 1 / 1; align-self: center; }
  .cv-dv--taste .cv-dv__title { font-size: clamp(3.6rem, 6.8vw, 7rem); }
  .cv-dv--taste .cv-dv__stage { grid-area: 1 / 2; height: clamp(260px, 40svh, 440px); align-self: center; }
  .cv-dv--taste .cv-dv__controls { grid-area: 2 / 1; align-self: start; }
  .cv-dv--taste .cv-dv__notes { grid-area: 2 / 2; align-self: end; justify-self: end; }
  .cv-dv--taste .cv-dv__review { grid-area: 3 / 1 / auto / -1; color: inherit; opacity: .8; }
}

/* On a phone, Guava's two-line name puts Explore across the pouch corner.
   This stays within its existing world; other fruit compositions are kept. */
@media (max-width: 760px) and (min-height: 521px) {
  .cv-world--pink-guava { --p-y: 32svh; }
  .cv-world__explore { min-height: 44px; }
}
@media (max-width: 360px) and (min-height: 521px) {
  .cv-world--pink-guava { --pl-x: 90%; --pl-y: 43svh; }
  .cv-world__doors.is-strip .cv-world__door-no { display: none; }
  .cv-world__doors.is-strip .cv-world__door {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

/* Rituals gets a content-sized first column. The picture can stay absolute,
   but the sentence and the moment choices must grow together in normal flow. */
@media (min-width: 761px) {
  .cv-dv--rituals {
    display: grid;
    grid-template-columns: minmax(0, 49%) 1fr;
    align-content: center;
    row-gap: 1.5rem;
    padding: 5rem var(--gutter) 3rem;
  }
  .cv-dv--rituals .cv-dv__rhead,
  .cv-dv--rituals .cv-dv__moments {
    position: relative;
    grid-column: 1;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
  }
  .cv-dv--rituals .cv-dv__rhead { grid-row: 1; }
  .cv-dv--rituals .cv-dv__moments { grid-row: 2; max-width: 24rem; }
  .cv-dv--rituals .cv-dv__title {
    font-size: clamp(3.6rem, 6.5vw, 7rem);
  }
  .cv-dv--rituals .cv-dv__line { max-width: 24rem; }
  .cv-dv--rituals .cv-dv__piece {
    right: 8%;
    bottom: 3%;
    width: 26%;
    height: 35%;
  }
}
/* Journey-end links need the same reachable touch area as panel controls. */
.cv-occasion__fruits a,
.cv-foot__links a,
.cv-foot__lang a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
@media (max-width: 540px) {
  /* Keep the fruit beside the heading; release the paragraph from the
     narrow icon column so French remains comfortable to read. */
  .cv-worlds__occ .cv-occasion:not(.is-lead) .cv-worlds__occ-fruit {
    grid-row: 1;
  }
  .cv-worlds__occ .cv-occasion:not(.is-lead) > p:not(.cv-worlds__occ-fruit),
  .cv-worlds__occ .cv-occasion:not(.is-lead) > .cv-occasion__fruits {
    grid-column: 1 / -1;
  }
}

/* Narrow landscape phones need two content columns and two control rows.
   Keep the fruit floating, with full-size tap targets and visible language/menu. */
@media (max-width: 760px) and (max-height: 520px) and (orientation: landscape) {
  .cv-mast { gap: .8rem; }
  .cv-mast__nav { display: none; }
  .cv-mast__lang { margin-left: auto; }
  .cv-menu { display: block; }
  html.cv-worlds-on .cv-world {
    --p-x: 75%;
    --p-y: 80px;
    --p-h: min(46svh, calc(100svh - 200px));
    --w-x: max(20px, env(safe-area-inset-left, 0px));
    --w-w: 44vw;
    --pl-x: 94%;
    --pl-y: 24svh;
    --pf-x: 51%;
    --pf-y: 66svh;
  }
  html.cv-worlds-on .cv-world .cv-world__words {
    right: auto;
    top: 80px;
    max-height: none;
  }
  html.cv-worlds-on .cv-world .cv-world__title { font-size: 1.55rem; line-height: 1.04; }
  html.cv-worlds-on .cv-world .cv-world__explore { min-height: 44px; }
  .cv-world__doors.is-strip {
    left: auto;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 52px);
    width: 48vw;
  }
  .cv-world__doors.is-strip .cv-world__door-no { display: none; }
  .cv-world__doors.is-strip .cv-world__door {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .cv-worlds__index { left: max(12px, env(safe-area-inset-left, 0px)); }
  .cv-worlds__sound {
    left: auto;
    right: max(12px, env(safe-area-inset-right, 0px));
  }
}

/* RELEASE: the sign-up at the end of the journey (scripts/export-canada-release.js; the landing's form and wording).
   44px targets, the consent box unticked, the result read aloud; on the journey's night ending it reads light on dark. */
.cv-signup { display: grid; gap: .75rem; width: min(34rem, 100%); text-align: left; margin-top: .6rem; }
.cv-signup__label { font-size: .9rem; }
.cv-signup__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.cv-signup__row input { flex: 1 1 14rem; min-height: 48px; padding: 0 1rem; border-radius: 999px; border: 1px solid currentColor; background: rgba(255, 250, 243, .08); color: inherit; font: inherit; }
.cv-signup__row input::placeholder { color: currentColor; opacity: .55; }
.cv-signup__row .cv-button { min-height: 48px; }
.cv-signup__row .cv-button[disabled] { opacity: .7; cursor: progress; }
.cv-signup__consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; line-height: 1.45; cursor: pointer; }
.cv-signup__consent input { flex: none; width: 22px; height: 22px; margin: .1rem 0 0; accent-color: #ff4b16; }
.cv-signup__small { font-size: .8rem; line-height: 1.5; opacity: .8; margin: 0; }
.cv-signup__small a, .cv-signup__privacy a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.cv-signup__result { min-height: 1.4em; margin: 0; font-size: .92rem; line-height: 1.45; outline: none; }
.cv-signup__result[data-kind="ok"] { color: #b7f5c4; }
.cv-signup__result[data-kind="error"] { color: #ffc2a8; }
.cv-signup [aria-invalid="true"] { outline: 2px solid #ffc2a8; outline-offset: 2px; }
.cv-signup.is-done .cv-signup__row { opacity: .6; }
.cv-signup__privacy { width: min(34rem, 100%); text-align: left; font-size: .82rem; line-height: 1.5; opacity: .85; }
.cv-signup__privacy > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
html.cv-worlds-on .cv-harvest.cv-worlds__end .cv-signup, html.cv-worlds-on .cv-harvest.cv-worlds__end .cv-signup__privacy { justify-self: center; color: #fffaf3; }
html.cv-worlds-on .cv-harvest.cv-worlds__end .cv-signup p { color: rgba(255, 250, 243, .82); }
.cv-review-banner { position: sticky; top: 0; z-index: 100; margin: 0; padding: .5rem 1rem; background: #ffd21a; color: #141018; font: 600 .78rem/1.3 var(--cv-font-text, sans-serif); text-align: center; }
.cv-missing-page { background: #06040f; color: #fffaf3; min-height: 100svh; margin: 0; }
.cv-missing { max-width: 40rem; margin: 0 auto; padding: 14svh 1.25rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.cv-missing h1 { font-family: var(--cv-font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 3.4rem); margin: 1rem 0 0; }
.cv-missing .cv-button { color: #fffaf3; border-color: rgba(255, 250, 243, .4); min-height: 44px; }
/* with the sign-up the ending is taller than a screen: start below the five pouches instead of centring (which pushed the
   heading over them), and read the form on a dark glass panel so the small print stays legible over the light sand */
html.cv-worlds-on .cv-harvest.cv-worlds__end:has(.cv-signup) { align-content: start; padding-top: 44svh; padding-bottom: 10svh; gap: .9rem; }
html.cv-worlds-on .cv-harvest.cv-worlds__end:has(.cv-signup) h2 { margin-top: 0; }
html.cv-worlds-on .cv-harvest.cv-worlds__end .cv-signup, html.cv-worlds-on .cv-harvest.cv-worlds__end .cv-signup__privacy { box-sizing: border-box; padding: 1.1rem 1.25rem; border-radius: 18px; background: rgba(6, 4, 15, .62); border: 1px solid rgba(255, 250, 243, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.cv-worlds-on .cv-harvest.cv-worlds__end .cv-signup__privacy { padding-block: .2rem; }
@media (max-width: 760px) { html.cv-worlds-on .cv-harvest.cv-worlds__end:has(.cv-signup) { padding-top: 36svh; } }