/* Homepage "My Explorations." (owner 2026-10-13): the inDrive card, version H1 of design/prototypes/homepage/indrive-cover-H1.html.
   The Work card component (.cs-card: width, 1250 x 402 ratio, radius, the italic uppercase caption, the Read disc) with a cover
   built in HTML / CSS; every size inside the cover is in cqw of the card, so it scales with it. js/explorations.js: the Read disc. */
.explore { padding: 0 var(--page-margin) var(--sp-160); display: flex; flex-direction: column; gap: var(--sp-80); }   /* as .articles (components.css) */
@media (max-width: 1189.98px) { .page--home .explore { padding-bottom: var(--hm-sec-pad); gap: var(--hm-sec-gap); } }
@media (max-width: 767.98px) { .page--home .explore { padding-bottom: var(--hm-sec-pad-phone); gap: var(--hm-sec-gap-phone); } }
/* v4.3 B1 (owner 2026-10-14): full width, from the heading's left edge to the end of the sub-label line. A grid: one card fills the
   row; .ex-list--2 halves, .ex-list--3 thirds on desktop; one column on phones. Gap = the Work cards' gap; card height = the Work
   card height (the Work cover width x 402 / 1250, so 402 at 1440), whatever the column width. */
.ex-list { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--ex-n, 1), minmax(0, 1fr)); gap: var(--sp-70);
  --ex-h: calc(min(var(--cs-card-w), 100cqw - var(--tl-col-w) - var(--sp-57)) * var(--n-ex-ar)); }
.page--home .ex-list .ex-card { width: 100%; }
.ex-list--2 { --ex-n: 2; }
.ex-list--3 { --ex-n: 3; }
@media (max-width: 1189.98px) { .ex-list { gap: var(--card-gap); --ex-h: calc(100cqw * var(--n-ex-ar)); } }
@media (max-width: 767.98px) { .ex-list { --ex-n: 1; } }
/* v4.3 B2: the cover's sizes come from the card height (cqh), so the text block and the illustration keep their 1440 sizes when the
   card gets wider; below 1190 the card has the Work ratio again and the composition is the one it always had. 1 old cqw = 3.1095 cqh. */
.page--home .ex-cover { aspect-ratio: auto; height: var(--ex-h); }
.ex-cover { container-type: size; overflow: hidden; border-radius: var(--r-media); isolation: isolate; background: var(--g-ex-cover); }
.ex-cover__in { position: absolute; inset: 0; transition: transform var(--wf-dur) var(--ease-out); }
@media (hover: hover) { .ex-card:hover .ex-cover__in, .ex-card:focus-visible .ex-cover__in { transform: scale(var(--ex-hover-zoom)); } }   /* the Work covers' 4 % hover zoom */
.page--home .ex-cover .ex-illo { position: absolute; left: auto; top: auto; right: 15.55cqh; bottom: -3.11cqh; z-index: 1; width: 130.6cqh; height: auto; max-width: none; border-radius: 0; }
.ex-txt { position: absolute; z-index: 3; left: 19.9cqh; top: 50%; transform: translateY(-50%); display: grid; gap: 4.975cqh; max-width: 136.8cqh; }
.ex-logo { display: block; height: 8.365cqh; width: auto; margin: 0 0 1.71cqh 1.741cqh; }   /* the official mark, sized and placed as the approved card's logo artwork */
.ex-hl { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: 12.75cqh; line-height: 1.12; letter-spacing: -0.025em; color: var(--c-idv-ink); text-wrap: balance; text-transform: none; }
.ex-sub { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-medium); font-size: 4.198cqh; line-height: 1.3; color: var(--c-ex-sub); }
/* the highlight bar (site-wide rule, tools/gen/marks.py): a sharp ink layer, lime words */
.ex-mark { position: relative; z-index: 0; padding: 0 var(--mk-pr, 0.26em) 0 var(--mk-pl, 0.26em); margin-left: 0.04em; background: none; color: var(--c-idv-lime); white-space: nowrap; border-radius: 0; }
.ex-mark::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: var(--mk-t); bottom: var(--mk-b); background: var(--c-idv-ink); border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .ex-cover__in { transition: none; } .ex-card:hover .ex-cover__in { transform: none; } }
@media (max-width: 767.98px) { .page--home .explore .section-title { font-size: min(var(--fs-56), calc((100vw - 2 * var(--page-margin)) / 7.8)); } }   /* "EXPLORATIONS." is one long word: it fits the phone column */
/* R16 (owner 2026-10-13): phones. The Work cards keep their 1250 x 402 ratio here, which would set the headline at about 14 px, so the
   cover gets a phone composition inside the same card: logo and headline top left (headline at least 22 px, the bar kept), the subline
   hidden, the illustration bottom right, clear of the text. */
@media (max-width: 767.98px) {
  .ex-txt { left: 4.2cqw; top: 3.6cqw; transform: none; gap: 1.4cqw; max-width: 60cqw; }
  .ex-logo { height: max(var(--ex-logo-min-phone), 3.4cqw); margin: 0; }
  .ex-hl { font-size: max(var(--ex-hl-min-phone), 6.1cqw); line-height: 1.1; text-wrap: wrap; }
  .ex-sub { display: none; }
  .page--home .ex-cover .ex-illo { right: 1.5cqw; bottom: -1cqw; width: 33cqw; }
}

/* ===== the foodpanda card (owner 2026-10-20; design/prototypes/homepage/foodpanda-card-B.html, version B) =====
   The same Work card component as inDrive. The approved artboard is 1360 x 402: every size is that artboard's px times --fpu
   (1/402 of the card height), so the card scales like the inDrive cover. Text left, the two debit cards anchored right. */
.fpx-cover { --fpu: calc(100cqh / 402); background: var(--g-fpx-cover); color: var(--c-white); }
.fpx-brand { position: absolute; z-index: 3; left: calc(84 * var(--fpu)); top: calc(52 * var(--fpu)); display: flex; align-items: center; gap: calc(12 * var(--fpu));
  font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: calc(26 * var(--fpu)); line-height: 1; }
.fpx-brand img { display: block; width: auto; height: calc(40 * var(--fpu)); }
.fpx-txt { position: absolute; z-index: 3; left: calc(84 * var(--fpu)); top: calc(118 * var(--fpu)); width: calc(500 * var(--fpu)); }
.fpx-hl { margin: 0; font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: calc(50 * var(--fpu)); line-height: 1.12; letter-spacing: -0.03em; text-transform: none; --mk-lh2: 0.56em; }
.fpx-mark { position: relative; z-index: 0; padding: 0 0.16em; background: none; color: var(--c-fpx-pink); border-radius: 0; white-space: nowrap; }
.fpx-mark::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--mk-t) - 1px); bottom: calc(var(--mk-b) + 1px); background: var(--c-white); border-radius: 0; }   /* the same box, even space above and below the letters (tools/gen/marks.py mark_even); 1px up: Chrome draws the ink about 1px above the font bounds here (measured at 1440 and 390) */
/* clear space above the bar (owner 2026-10-23; inDrive's bar already clears its line by 0.12em or more, unchanged, tools/gen/marks.py clear): a zero-width strut that lifts only the bar's line when needed */
.fpx-mark::after { content: ""; display: inline-block; width: 0; height: calc(var(--mk-c, 0em) - var(--mk-lh2)); vertical-align: baseline; }
.fpx-sub { margin: calc(22 * var(--fpu)) 0 0; font-family: var(--font-figtree); font-weight: var(--fw-medium); font-size: calc(18 * var(--fpu)); line-height: 1.3; opacity: 0.92; }
.fpx-cc { position: absolute; z-index: 2; width: calc(330 * var(--fpu)); height: calc(208 * var(--fpu)); border-radius: calc(18 * var(--fpu)); padding: calc(20 * var(--fpu)) calc(22 * var(--fpu)); color: var(--c-white); overflow: hidden; font-family: var(--font-figtree); }
.fpx-cc--dark { right: calc(190 * var(--fpu)); top: calc(66 * var(--fpu)); transform: rotate(-9deg); background: var(--g-fpx-cc-dark); box-shadow: 0 calc(30 * var(--fpu)) calc(50 * var(--fpu)) calc(-20 * var(--fpu)) rgb(40 0 15 / 0.6); }
.fpx-cc--blue { right: calc(70 * var(--fpu)); top: calc(150 * var(--fpu)); transform: rotate(5deg); background: var(--g-fpx-cc-blue); box-shadow: 0 calc(40 * var(--fpu)) calc(60 * var(--fpu)) calc(-20 * var(--fpu)) rgb(30 0 40 / 0.6); }
.fpx-cc__lbl { display: block; font-weight: var(--fw-bold); font-size: calc(15 * var(--fpu)); line-height: 1; letter-spacing: 0.14em; }
.fpx-cc__sub { display: block; margin-top: calc(6 * var(--fpu)); font-weight: var(--fw-semibold); font-size: calc(10 * var(--fpu)); line-height: 1; letter-spacing: 0.16em; opacity: 0.7; }
.fpx-cc__chip { position: absolute; left: calc(22 * var(--fpu)); top: calc(78 * var(--fpu)); width: calc(42 * var(--fpu)); height: calc(32 * var(--fpu)); border-radius: calc(6 * var(--fpu)); background: var(--g-fpx-chip); }
.fpx-cc__num { position: absolute; left: calc(22 * var(--fpu)); top: calc(132 * var(--fpu)); font-weight: var(--fw-semibold); font-size: calc(18 * var(--fpu)); line-height: 1; letter-spacing: 0.12em; white-space: nowrap; }
.fpx-cc__holder { position: absolute; left: calc(22 * var(--fpu)); bottom: calc(18 * var(--fpu)); font-weight: var(--fw-semibold); font-size: calc(8 * var(--fpu)); line-height: 1.5; letter-spacing: 0.14em; opacity: 0.75; }
.fpx-cc__holder b { display: block; font-size: calc(12 * var(--fpu)); opacity: 1; }
.fpx-cc__pill { position: absolute; right: calc(18 * var(--fpu)); top: calc(18 * var(--fpu)); font-weight: var(--fw-semibold); font-size: calc(12 * var(--fpu)); line-height: 1; padding: calc(6 * var(--fpu)) calc(10 * var(--fpu)); border-radius: var(--r-pill); }
.fpx-cc--dark .fpx-cc__pill { background: #111111; border: 1.5px solid rgb(255 255 255 / 0.25); }
.fpx-cc--blue .fpx-cc__pill { background: #0F2A3A; border: 1.5px solid #4FD1A5; color: #D9FFF1; }
.fpx-cc__visa { position: absolute; right: calc(22 * var(--fpu)); bottom: calc(16 * var(--fpu)); font-weight: var(--fw-extrabold, 800); font-style: italic; font-size: calc(28 * var(--fpu)); line-height: 1; }
/* phones (the static list only): the headline at least 22 px top left, the subline hidden, the verified card small at the bottom right */
@media (max-width: 767.98px) {
  .fpx-brand { left: 4.2cqw; top: 3.6cqw; font-size: max(12px, 3.4cqw); } .fpx-brand img { height: max(16px, 4.6cqw); }
  .fpx-txt { left: 4.2cqw; top: 12cqw; width: 58cqw; } .fpx-hl { font-size: max(var(--ex-hl-min-phone), 6.1cqw); line-height: 1.1; --mk-lh2: 0.55em; } .fpx-sub { display: none; }
  .fpx-cc--dark { display: none; } .fpx-cc--blue { right: -6cqw; top: auto; bottom: -4cqw; transform: rotate(5deg) scale(0.7); transform-origin: right bottom; }
}

/* ===== the reel (owner 2026-10-20; design/prototypes/homepage/explorations-reel-v9.html): js/explorations-reel.js =====
   html.ex-reel (set before the section renders, only without Reduce Motion) shows the pinned reel and hides the list; without
   JavaScript or with Reduce Motion the list of the two cards shows instead. The pin's height is reserved here (no layout shift):
   one screen plus 3 moves of 0.9 screens = 3.7 screens. */
.ex-reel-pin { display: none; }
.ex-list-wrap { display: flex; flex-direction: column; gap: inherit; }
.ex-reel .page--home .explore, .ex-reel .explore { gap: 0; }
.ex-reel .ex-list-wrap { display: none; }
.ex-reel .ex-reel-pin { display: block; position: relative; height: calc(100svh * 2.2); margin-inline: calc(-1 * var(--page-margin)); }
.ex-reel-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 2.4vh, 28px); overflow: hidden; padding-top: var(--nav-h); box-sizing: border-box; }   /* the content sits below the fixed site nav */
.ex-reel-sticky > .section-head, .ex-reel-meta { padding-inline: var(--page-margin); }
.ex-reel-stage { position: relative; }
.ex-reel-cv { display: block; width: 100%; height: var(--ex-reel-h, 420px); cursor: grab; touch-action: pan-y; }
.ex-reel-cv.is-drag { cursor: grabbing; }
.ex-reel-cv:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.ex-reel-meta { display: flex; align-items: center; gap: var(--sp-16); font-family: var(--font-figtree); font-size: var(--fs-12); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-grey-8e8e8e); font-variant-numeric: tabular-nums; }
.ex-reel-bar { flex: 1; max-width: 220px; height: 2px; position: relative; overflow: hidden; background: var(--c-grey-2c2c2d); }
.ex-reel-bar i { position: absolute; inset: 0; background: var(--c-brand); transform-origin: left; transform: scaleX(0); }
.ex-reel-skip { position: absolute; left: -9999px; top: 0; }
.ex-reel-skip:focus { left: var(--page-margin); top: var(--sp-16); z-index: 5; padding: var(--sp-10) var(--sp-14); border-radius: var(--r-8); background: var(--c-card-2); color: var(--c-white); }
.page--home .cs-card__media .fpx-brand img { position: static; width: auto; height: calc(40 * var(--fpu)); max-width: none; border-radius: 0; }   /* not the card's media image rule */
/* the foodpanda card's Folds (owner 2026-10-21; the inDrive card's path, js/folds.js): the two debit cards are one transparent layer
   (design/source-assets/folds-layers/foodpanda-cards-layer@2x.png, the card's own HTML at its 1360 x 402 artboard), drawn over the
   gradient folds and anchored right at the artboard's shape, so the cards sit exactly where the HTML cards were. Phones keep the
   HTML cards (today's phone card); the layer and its folds are not used there. */
.page--home .ex-cover .fpx-layer { position: absolute; left: auto; top: 0; right: 0; z-index: 2; width: auto; height: 100%; aspect-ratio: 1360 / 402; max-width: none; border-radius: 0; }
@media (min-width: 768px) { .fpx-cc { display: none; } }
@media (max-width: 767.98px) { .page--home .ex-cover .fpx-layer, .fp-card .folds-pic { display: none; } }
/* the reel's resting captions (owner 2026-10-21): real links in the live Work caption style (.cs-card__title), placed on each card's
   caption band by js/explorations-reel.js; the canvas draws the same text only while the reel moves (a ~120 ms crossfade) */
.ex-reel-caps { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* the live card (js/explorations-reel.js): the real card over the centred canvas card at rest; the bar is the reel's own caption */
.ex-reel-live { position: absolute; left: 0; top: 0; width: 100%; height: var(--ex-reel-h, 420px); pointer-events: none; overflow: hidden; }
.ex-reel-live .ex-card { position: absolute; left: 0; top: 0; width: var(--ex-live-w); margin: 0; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity;
  transition: none; }   /* hides at once when the reel moves (the glitch fix: a fading card stayed put while the ribbon moved) */
.ex-reel-live .ex-card.is-live { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 160ms linear; }
.ex-reel-live .cs-card__bar { display: none; }
/* the sharp layer on touch screens (js/explorations-reel.js): each visible card's full-resolution cover over its canvas card at rest */
.ex-reel-still { position: absolute; left: 0; top: 0; width: 100%; height: var(--ex-reel-h, 420px); pointer-events: none; overflow: hidden; }
.ex-reel-still img { position: absolute; left: 0; top: 0; max-width: none; object-fit: cover; object-position: 0 50%; opacity: 0; visibility: hidden; transition: none; }
.ex-reel-still img.is-on { opacity: 1; visibility: visible; transition: opacity 160ms linear; }
.ex-reel-live .ex-cover { border-radius: var(--ex-live-r); overflow: hidden; isolation: isolate; }   /* the art, the folds layer and the hover zoom stay inside the card's frame */
.ex-reel-cap { position: absolute; left: 0; top: 0; margin: 0; overflow: hidden; display: block; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; pointer-events: auto; will-change: transform; }   /* one line, an ellipsis if it ever runs longer (owner 2026-10-22) */
.ex-reel-cap[hidden] { display: none; }
.ex-reel-cap.is-2 { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }   /* phones: two lines, never cut */
/* phones (owner 2026-10-22; design/prototypes/homepage/explorations-reel-v14.html): the stage is top-aligned and as tall as its
   content; the pin is pulled up by the nav's height so the heading keeps the page's normal gap above it and clears the nav while
   pinned; cards 32 px under the subtitle, the counter 24 px under the captions; the subtitle on one line */
@media (max-width: 639.98px) {
  .ex-reel .ex-reel-pin { margin-top: calc(-1 * var(--nav-h)); }
  .ex-reel-sticky { height: auto; justify-content: flex-start; gap: 0; }
  .ex-reel-sticky > .section-head, .ex-reel-meta { position: relative; z-index: 1; }
  .ex-reel-stage { margin-top: calc(var(--sp-32) - var(--ex-reel-padt, 0px)); }   /* the canvas (the safe zone) starts 24 px under the subtitle */
  .ex-reel-meta { margin-top: calc(var(--sp-18) - var(--ex-reel-padb, 0px)); }   /* 24 px under the captions' text (the band ends 6 px below it), 16 px under the canvas */
  .explore .section-sub__label { font-size: var(--ex-sub-fs-phone); letter-spacing: var(--ex-sub-ls-phone); white-space: nowrap; }   /* single spaces between the tags, one line */
}