/* ============================================================================
   K3 — the Kimi-prototype design language (Casetify school) on the shared
   spine, recoloured: white paper shell, black 900 uppercase display, pill
   grammar, one flat Head Case yellow accent at rest — and the Chameleon
   costume change re-colouring the whole chrome per world/brand after entry.
   ========================================================================== */
:root {
  --bg: #FFFFFF;
  --ink: #000000;
  --muted: #6E6E6E;
  --line: #D8D8D8;
  --card-bg: #F7F7F7;
  --accent: #BCD635;          /* Head Case lime (brand skill) — Cem 2026-08-09,
                                 was worlds yellow #FFB612; always a field
                                 behind dark ink, per the lime skill rules */
  --accent-ink: #131313;
  --ok: #1B7A3E;
  --radius: 14px;
  --font-display: 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

/* THE COSTUME CHANGE — same mechanism as Chameleon: world tokens on genre
   pages, brand tokens deeper in. The K3 grammar stays; the colours swap. */
html.is-skinned {
  --bg: var(--skin-bg);
  --ink: var(--skin-ink);
  --muted: color-mix(in srgb, var(--skin-ink) 62%, var(--skin-bg));
  --line: color-mix(in srgb, var(--skin-ink) 16%, var(--skin-bg));
  --card-bg: color-mix(in srgb, var(--skin-ink) 6%, var(--skin-bg));
  --accent: var(--skin-accent);
  --accent-ink: var(--skin-accent-ink);
}
html.is-skinned .confirm-ok,
html.is-skinned .card-fit.is-yes { color: var(--ink); }

/* The 700 ms signature belongs to the chrome that recolours. */
body, .site-head, .site-foot, .ribbon, .finder-box, .confirm-card,
.set-card, .gate, .card-badge, .bag-chip-count {
  transition: background-color var(--dur-costume) ease,
              color var(--dur-costume) ease,
              border-color var(--dur-costume) ease;
}
/* Controls answer the finger, not the costume change. `box-shadow` joins the
   list so .world-chip's inset fill and its label colour move together instead
   of the fill snapping while the colour crawls. */
.btn, .type-tile, .device-opt, .brand-card, .world-chip,
.cfg-pill, .cfg-card, .cfg-addon {
  transition: background-color var(--dur-feedback) ease,
              color var(--dur-feedback) ease,
              border-color var(--dur-feedback) ease,
              box-shadow var(--dur-feedback) ease;
}
/* …and they borrow the signature's pace for the one beat it is running
   (boot.js applyBrandSkin sets and clears this). The list is restated rather
   than overriding `transition-duration`, because a blanket duration override
   would also stretch the press scale below to 700 ms for the first beat after
   every in-site navigation — a press has to answer the finger even mid-wash. */
html.is-costuming .btn, html.is-costuming .type-tile,
html.is-costuming .device-opt, html.is-costuming .brand-card,
html.is-costuming .world-chip, html.is-costuming .cfg-pill,
html.is-costuming .cfg-card, html.is-costuming .cfg-addon {
  transition: background-color var(--dur-costume) ease,
              color var(--dur-costume) ease,
              border-color var(--dur-costume) ease,
              box-shadow var(--dur-costume) ease,
              transform var(--dur-press) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  body, .site-head, .site-foot, .ribbon, .finder-box, .confirm-card,
  .set-card, .gate, .card-badge, .bag-chip-count,
  .btn, .type-tile, .device-opt, .brand-card, .world-chip,
  .cfg-pill, .cfg-card, .cfg-addon,
  html.is-costuming .btn, html.is-costuming .type-tile,
  html.is-costuming .device-opt, html.is-costuming .brand-card,
  html.is-costuming .world-chip, html.is-costuming .cfg-pill,
  html.is-costuming .cfg-card, html.is-costuming .cfg-addon {
    transition: none;
  }
}

/* ---- chrome: ribbon, header, footer --------------------------------------- */
.ribbon { background: var(--accent); color: var(--accent-ink);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .72rem; }
.brand-mark { display: none; }
.brand-word { font-weight: 900; letter-spacing: -.01em; font-size: 1.2rem;
  text-transform: uppercase; }
.brand-word b { color: var(--accent); }
.head-nav a { font-weight: 600; }
.head-search, .device-chip, .bag-chip, .finder-recent { border-radius: 999px; }
/* Device lock worn loudly (Apple "for your device" pattern, round 11). */
.device-chip.is-locked { background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); font-weight: 700; }
.device-chip.is-locked .device-chip-dot { background: var(--accent-ink); }
.card-fit.is-yes { display: inline-block; margin-top: .4rem;
  background: color-mix(in srgb, var(--ok) 12%, var(--bg)); color: var(--ok);
  border-radius: 999px; padding: .18rem .65rem; font-weight: 700;
  font-size: .75rem; }
.card-fit.is-yes::before { content: '✓ '; }
html.is-skinned .card-fit.is-yes {
  background: color-mix(in srgb, var(--ink) 10%, var(--bg)); }

.site-foot { background: var(--ink); color: var(--bg); border-top: 0; }
.site-foot .foot-legal,
.site-foot .foot-variations { color: color-mix(in srgb, var(--bg) 55%, var(--ink)); }
.site-foot .foot-variations a { color: var(--bg); }

/* ---- buttons: pills, black primary ---------------------------------------- */
.btn { border-radius: 999px; font-weight: 800; letter-spacing: .02em; }
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bag-checkout { border-radius: 999px; background: var(--ink); color: var(--bg); }
.bag-suggest-add, .bag-discount-apply, .bag-discount input { border-radius: 999px; }
.market-chip { border-radius: 999px; font-size: .8rem; }

/* ---- hero: left rail over a cleared scene (R21, Cem 2026-08-12) ------------
   The campaign video was Higgsfield-re-edited: the Pixel phones and the
   baked-in headline are gone, so the LEFT quarter is clean white wall +
   lime panel. Our copy now lives there as a vertically-centred left rail,
   and the desk scene runs unobstructed to the right. Light treatment:
   dark ink, legibility from a LEFT-side veil + text halos — never a
   full-width wash over the scene. */
.hero.has-bg { justify-content: center; color: #131313;
  min-height: min(88vh, 900px); }
/* Wide regions overflow the 16:9 video vertically; anchor the crop HIGH so
   the excess comes out of the bottom (empty desk) — centred cropping was
   beheading the balloon dog/tablet, worsened by the clip's own push-in
   (Cem, R21d). */
.hero.has-bg .hero-bg img, .hero.has-bg .hero-bg video {
  object-position: left 22%; }
/* Narrow viewports crop the video hard — aim at the product side; the
   cleared left area is empty wall and can go. */
@media (max-width: 700px) {
  .hero.has-bg .hero-bg img, .hero.has-bg .hero-bg video {
    object-position: 72% center; }
}
/* The veil is LEFT-weighted (R21): it backs the copy rail and fades out
   before the desk scene, so the video reads at full punch — the old
   bottom wash was dulling it (Cem). */
.hero.has-bg .hero-bg::after { background: linear-gradient(90deg,
  rgba(255, 255, 255, .50) 0%, rgba(255, 255, 255, .22) 32%,
  rgba(255, 255, 255, 0) 52%); }
@media (max-width: 700px) {
  /* Narrow crops put the copy OVER the scene, so the wash must carry the
     legibility on its own — stronger than the desktop rail veil. */
  .hero.has-bg { justify-content: flex-end; }
  .hero.has-bg .hero-bg::after { background: linear-gradient(180deg,
    rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, .42) 55%,
    rgba(255, 255, 255, .66) 100%); }
}
.hero.has-bg .hero-title { text-shadow: 0 1px 2px rgba(255, 255, 255, .65),
  0 2px 22px rgba(255, 255, 255, .55); }
.hero.has-bg .hero-sub, .hero.has-bg .hero-worlds-label {
  text-shadow: 0 1px 14px rgba(255, 255, 255, .75); }
.hero.has-bg .hero-sub, .hero.has-bg .hero-device,
.hero.has-bg .hero-worlds-label { color: rgba(19, 19, 19, .78); }
.hero.has-bg .world-chip { border-color: rgba(19, 19, 19, .38);
  color: #131313; background: rgba(255, 255, 255, .55); }
/* Callouts fold into the left rail as compact glass cards (R21): they
   were full-width white slabs dulling the video's lower half (Cem). */
.hero.has-bg .hero-callouts { max-width: 46rem; margin: 1.3rem 0 0;
  padding: 0 clamp(1.25rem, 4vw, 4.5rem) 2.4rem; gap: .7rem; }
.hero.has-bg .callout { background: rgba(255, 255, 255, .58); color: #131313;
  border-color: rgba(19, 19, 19, .18);
  box-shadow: 0 6px 18px rgba(19, 19, 19, .08);
  padding: .75rem .95rem .8rem; }
.hero.has-bg .callout .callout-title { font-size: .88rem; }
.hero.has-bg .callout .callout-cta { font-size: .8rem; margin-top: .25rem; }
.hero.has-bg .callout:hover { border-color: rgba(19, 19, 19, .45);
  background: rgba(255, 255, 255, .85); }
@media (max-width: 700px) {
  .hero.has-bg .hero-callouts { grid-template-columns: 1fr; }
}
.hero.has-bg .finder-box { box-shadow: 0 12px 30px rgba(19, 19, 19, .18); }
/* Finder rests compact so the hero breathes; it comes to the foreground —
   wider + lifted — on hover or keyboard/touch focus, in place. */
@media (min-width: 701px) {
  .hero.has-bg .finder { max-width: 21rem;
    transition: max-width .3s ease; }
  .hero.has-bg .finder:hover, .hero.has-bg .finder:focus-within {
    max-width: 34rem; }
  .hero.has-bg .finder:hover .finder-box,
  .hero.has-bg .finder:focus-within .finder-box {
    box-shadow: 0 18px 48px rgba(19, 19, 19, .32); }
}
.hero.has-bg .finder-recent-item { color: #131313;
  border-color: rgba(19, 19, 19, .4); }
.hero.has-bg .finder-recents-label { color: rgba(19, 19, 19, .7); }
/* Copy rail pinned to the viewport-left over the cleared wall (R21) —
   not the 1280px content grid; the arrow points left of it. */
.hero.has-bg .hero-inner { text-align: left; max-width: 46rem; width: 100%;
  margin: 0; padding: 2.4rem clamp(1.25rem, 4vw, 4.5rem) 0; }
.hero-kicker { display: inline-block; background: var(--accent);
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; padding: .38rem .95rem; border-radius: 999px; }
.hero.has-bg .hero-kicker { color: var(--accent-ink); }
.hero-title { font-weight: 900; text-transform: uppercase;
  letter-spacing: -.03em; line-height: .95;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem); max-width: 18ch; }
.hero-title em { font-style: normal; }
.hero.has-bg .hero-sub { max-width: 46ch; margin-inline: 0;
  color: rgba(19, 19, 19, .78); }
.hero.has-bg .finder { margin: 0; }
.finder-box { border-radius: 999px; border-width: 2px; }
.finder-results { border-radius: 18px; }
.finder-item:first-child { padding-top: .8rem; }
.finder-item:last-child { padding-bottom: .8rem; }
.hero.has-bg .hero-worlds { justify-content: flex-start; }
.world-chip { font-weight: 700; }
.callout { border-radius: 18px; }

/* ---- sections: 900 display ------------------------------------------------- */
.section-h { font-weight: 900; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

/* ---- gates → editorial mosaic (first world gets the 2×2 tile) -------------- */
.gate { position: relative; overflow: hidden; border: 0; border-radius: 18px;
  background: var(--card-bg); }
@media (min-width: 900px) {
  .gates-grid { grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-rows: 215px; grid-auto-flow: dense; }
  .gate:first-child { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 899px) { .gate { aspect-ratio: 4 / 3; } }
.gate-art { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* E2 (Cem 2026-09-13): the label was a SOLID white pill that grew to two
   lines and sat over the middle of the tile, hiding the products it was
   advertising. Dark glass, anchored bottom-left on a 12px inset, one line,
   never wrapping: the photograph stays the tile. Why .55 black and not the
   .45 sketched in the brief — the Sports tile is near-white cloud, and white
   text over .45 there is 3.4:1; .55 puts the worst case at 4.7:1 (AA).
   backdrop-filter is progressive: the @supports fallback is opaque enough to
   carry the same contrast on its own. */
.gate-info { position: absolute; left: 12px; right: 12px; bottom: 12px;
  width: fit-content; max-width: calc(100% - 24px);
  background: rgba(0, 0, 0, .55); color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px; padding: .42rem 1rem;
  display: flex; align-items: baseline; gap: .45rem;
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2);
  white-space: nowrap; overflow: hidden; }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .gate-info { background: rgba(0, 0, 0, .72); }
}
.gate:hover .gate-info { background: rgba(0, 0, 0, .68); }
.gate-name { font-family: var(--font-body); font-size: .94rem; font-weight: 800;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gate-name::after { content: ' ·'; opacity: .5; }
.gate-line { display: none; }
.gate-cta { font-size: .88rem; font-weight: 700; opacity: .92; flex: none; }
/* At 390px a tile is ~205px wide: "Comics & Fantasy · Shop now →" cannot fit
   on one line, so the CTA collapses to its arrow and the name keeps the pill. */
/* At 390px a gate tile is ~171px wide: "Comics & Fantasy · Shop now →"
   cannot fit on one line, so the CTA collapses to its arrow and the one
   over-long world name swaps to its short form (cards.js). Everything then
   sits at 14.4px with room to spare — no ellipsis, no wrap. */
@media (max-width: 700px) {
  .gate-info { padding: .38rem .78rem; gap: .3rem; }
  .gate-name { font-size: .9rem; }
  .gate-name::after { content: none; }
  .gate-name-long:has(+ .gate-name-short) { display: none; }
  .gate-name-short { display: inline; }
  .gate-cta { font-size: 0; }
  .gate-cta::after { content: '→'; font-size: .95rem; font-weight: 800; }
}

/* ---- design cards ----------------------------------------------------------- */
.card-art { border-radius: 14px; border: 0; }
.card-badge { border-radius: 999px; font-weight: 900; font-size: .62rem;
  letter-spacing: .1em; }
.card-name { font-weight: 800; }

/* ---- shop-by-product rail — richer cards (Cem, round 10) -------------------- */
.bytype .type-grid { display: flex; overflow-x: auto; gap: 1rem;
  padding: .3rem .3rem 1rem; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.bytype .type-grid::-webkit-scrollbar { display: none; }
.bytype .type-card { flex: 0 0 12.5rem; text-align: center;
  scroll-snap-align: start; background: var(--card-bg); border-radius: 18px;
  padding: 1rem .8rem 1.1rem; }
@media (hover: hover) and (pointer: fine) {
  .bytype .type-card {
    transition: transform var(--dur-lift) ease, box-shadow var(--dur-lift) ease; }
  .bytype .type-card:hover { transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(19, 19, 19, .14); }
}
.bytype .type-card-art { width: 10.9rem; height: 10.9rem; aspect-ratio: auto;
  border-radius: 50%; margin: 0 auto; border: 0;
  box-shadow: inset 0 0 0 1px var(--line); }
.bytype .type-card-name { font-size: .9rem; font-weight: 800; margin-top: .7rem; }
.bytype .type-card-count { font-size: .74rem; font-weight: 600;
  display: inline-block; margin-top: .3rem; padding: .15rem .6rem;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); }

/* ---- set story → dark community band ---------------------------------------- */
#app > .setstory { background: var(--ink); color: var(--bg);
  border-radius: 22px; padding: 2.6rem; }
.setstory-copy > p { color: color-mix(in srgb, var(--bg) 78%, var(--ink)); }
.setstory .btn-primary { background: var(--bg); color: var(--ink);
  border-color: var(--bg); }
.setstory-media img { border: 0; border-radius: 18px; }
@media (max-width: 960px) { #app > .setstory { padding: 1.6rem; } }

/* ---- genre / brand / hub / PDP surfaces -------------------------------------- */
.genre-hero { border-radius: 18px; }
.genre-hero-copy h1 { text-transform: uppercase; font-weight: 900;
  letter-spacing: -.02em; }
.brand-card { border-radius: 18px; }
.brand-card-name { font-weight: 800; }
.brand-card:hover { background: var(--b-bg); color: var(--b-ink); }
.brand-card:hover .brand-card-line { color: var(--b-ink); opacity: .8; }
.brand-card:hover .brand-card-cta { color: var(--b-accent, var(--b-ink)); }
.brand-hero { border-radius: 22px; }
.brand-hero-name { text-transform: uppercase; font-weight: 900;
  letter-spacing: -.02em; }
.type-hero h1 { text-transform: uppercase; font-weight: 900; }
.setstory-media img, .brand-set-media img, .hub-art img, .pdp-art img,
.imgbox { border-radius: 18px; }
.atmos img { border-radius: 14px; }
.type-tile { border-radius: 14px; }
.type-tile.is-current { box-shadow: 0 0 0 2px var(--accent); }
.confirm-card { border-radius: 14px; }
.set-card { border-radius: 14px; }
.device-dialog, .bag-panel { border-radius: 18px; }
.bag-panel { border-radius: 18px 0 0 18px; }
.pdp-name { font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; }
.confirm-price { font-weight: 900; font-size: 1.7rem; }
.proof strong { font-weight: 800; }

/* ---- K3 configurator (PDP) ---------------------------------------------------- */
.cfg { margin-top: 1.1rem; }
.cfg-group { margin: 0 0 1.25rem; }
.cfg-label { display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; font-size: .78rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .55rem; }
.cfg-label .cfg-value { color: var(--muted); font-weight: 600;
  text-transform: none; letter-spacing: 0; text-align: right; }
.cfg-pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.cfg-pill { border: 1.5px solid var(--line); background: none;
  border-radius: 999px; padding: .5rem 1rem; font-size: .85rem; font-weight: 700; }
.cfg-pill:hover { border-color: var(--ink); }
.cfg-pill.is-current { background: var(--ink); border-color: var(--ink);
  color: var(--bg); }
.cfg-pill.is-current::before { content: '✓ '; }
.cfg-pill.is-unavail { opacity: .45; cursor: not-allowed; }
.cfg-more { font-size: .82rem; color: var(--muted); margin-top: .5rem; }
/* W7 two-level device picker (brand → model) — replaces the pill wall past
   ~8 covered devices; same border grammar as pills/cards. */
.cfg-selects { display: grid; grid-template-columns: minmax(9rem, 2fr) 3fr;
  gap: .6rem; }
.cfg-select { display: grid; gap: .3rem; }
.cfg-select > span { font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.cfg-select select { width: 100%; min-height: 44px; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--bg); color: var(--ink);
  font: inherit; font-size: .9rem; font-weight: 700; padding: .5rem 2.2rem .5rem .8rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; }
.cfg-select select:hover { border-color: var(--ink); }
.cfg-select select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 480px) { .cfg-selects { grid-template-columns: 1fr; } }
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .6rem; }
.cfg-card { border: 1.5px solid var(--line); background: none;
  border-radius: 14px; padding: .8rem .9rem; text-align: left;
  display: grid; gap: .15rem; align-content: start; }
button.cfg-card:hover { border-color: var(--ink); }
.cfg-card.is-current { border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); }
.cfg-card.is-current .cfg-card-name::before { content: '✓ '; }
.cfg-card.is-unavail { border-style: dashed; opacity: .7; }
.cfg-card-name { font-weight: 800; font-size: .9rem; }
.cfg-card-note { color: var(--muted); font-size: .76rem; }
.cfg-card-delta { font-weight: 800; font-size: .8rem; margin-top: .2rem; }
.cfg-card-thumb { width: 100%; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--card-bg); margin-bottom: .35rem; }
.cfg-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Design-variation swatches (round 17): image-led, same card grammar. */
.cfg-styles { display: flex; flex-wrap: wrap; gap: .6rem; }
.cfg-style { border: 1.5px solid var(--line); background: none; border-radius: 14px;
  padding: .55rem .6rem .5rem; display: grid; justify-items: center; gap: .3rem; }
button.cfg-style:hover { border-color: var(--ink); }
.cfg-style.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.cfg-style.is-current .cfg-style-name::before { content: '✓ '; }
.cfg-style.is-unavail { border-style: dashed; opacity: .55; }
.cfg-style-name { font-weight: 800; font-size: .8rem; }
.cfg-style-note { color: var(--muted); font-size: .72rem; }
.cfg-style-thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
  background: var(--card-bg); }
.cfg-style-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cfg-addons { display: grid; gap: .6rem; }
.cfg-addon { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .8rem;
  align-items: center; border: 1.5px dashed var(--line); border-radius: 14px;
  padding: .7rem .8rem; background: none; text-align: left; }
.cfg-addon img { border-radius: 10px; }
.cfg-addon:hover { border-color: var(--ink); }
.cfg-addon-info { display: grid; gap: .1rem; }
.cfg-addon-name { font-weight: 800; font-size: .85rem; }
.cfg-addon-meta { color: var(--muted); font-size: .72rem; }
.cfg-addon-reason { font-size: .75rem; color: var(--muted); font-style: italic; }
.cfg-addon-price { font-weight: 800; font-size: .85rem; white-space: nowrap; }
.cfg-addon[aria-pressed="true"] { border-style: solid; border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); }
.cfg-addon[aria-pressed="true"] .cfg-addon-price::before { content: '✓ '; }
.cfg-add-all { width: 100%; margin-top: .6rem; border: 1.5px solid var(--ink);
  background: none; border-radius: 999px; padding: .65rem 1rem;
  font-size: .88rem; font-weight: 800; }
.cfg-add-all:hover { background: var(--ink); color: var(--bg); }
.cfg .confirm-row { margin-top: 1.4rem; }

/* Press feedback for the K3-only controls (the shared set is in base.css).
   `.btn` and `.device-opt` are in both lists: the control rule at the top of
   this file loads after base.css and would otherwise drop their press
   transition, so they are restated here with colour AND transform. */
.cfg-pill, .cfg-card, .cfg-style, .cfg-addon, .cfg-add-all, .cfg-more,
.moment-bell, .pdp-thumb, .btn, .device-opt {
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-feedback) ease,
              color var(--dur-feedback) ease,
              border-color var(--dur-feedback) ease,
              box-shadow var(--dur-feedback) ease;
}
.cfg-pill:active, .cfg-card:active, .cfg-style:active, .cfg-addon:active,
.cfg-add-all:active, .cfg-more:active, .moment-bell:active, .pdp-thumb:active {
  transform: scale(0.97);
}
.cfg-pill.is-unavail:active, .cfg-card.is-unavail:active,
.cfg-style.is-unavail:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  /* This block is later in the file than the costume-change twin above and has
     equal specificity, so it has to restate `transition: none` for the shared
     selectors — otherwise the rule above would be silently undone and the only
     thing still holding the line would be base.css's global `!important`
     reset (audit F6, which is slated to be replaced). */
  .cfg-pill, .cfg-card, .cfg-style, .cfg-addon, .cfg-add-all, .cfg-more,
  .moment-bell, .pdp-thumb, .btn, .device-opt { transition: none; }
  .cfg-pill:active, .cfg-card:active, .cfg-style:active, .cfg-addon:active,
  .cfg-add-all:active, .cfg-more:active, .moment-bell:active, .pdp-thumb:active {
    transform: none;
  }
}

/* ---- Moments hub + home rail (M1, K3-first) --------------------------------- */
.moments-head { padding-bottom: 0 !important; }
.moments-head .section-h { font-size: clamp(2rem, 4.5vw, 3.2rem);
  text-transform: uppercase; }
.moment-shelf { padding-top: 2rem !important; }
.moment-grid { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.moment-card { background: var(--card-bg); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column; }
.moment-art { aspect-ratio: 16 / 9; overflow: hidden; }
.moment-art img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .moment-art img { transition: transform var(--dur-zoom) ease; }
  .moment-card:hover .moment-art img { transform: scale(1.04); }
}
.moment-info { padding: 1rem 1.1rem 1.2rem; display: flex;
  flex-direction: column; gap: .35rem; flex: 1; }
.moment-date { display: inline-block; align-self: flex-start;
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  padding: .22rem .75rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
.moment-card.is-past .moment-date { background: var(--card-bg);
  color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.moment-name { font-weight: 900; font-size: 1.2rem; letter-spacing: -.01em; }
.moment-line { color: var(--muted); font-size: .9rem; }
.moment-brands { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.moment-brands .world-chip { font-size: .8rem; padding: .3rem .8rem; }
.moment-bell { align-self: flex-start; margin-top: .7rem;
  border: 1.5px solid var(--ink); background: none; border-radius: 999px;
  padding: .45rem 1rem; font-size: .82rem; font-weight: 800; }
.moment-bell .moment-bell-on { display: none; }
.moment-bell[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.moment-bell[aria-pressed="true"] .moment-bell-on { display: inline; }
.moment-bell[aria-pressed="true"] .moment-bell-off { display: none; }

.moments-rail-all { font-weight: 800; margin-left: .5rem; }
.moments-rail-grid { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.moment-tile { display: grid; gap: .3rem; align-content: start;
  text-decoration: none; background: var(--card-bg); border-radius: 18px;
  padding: 1.1rem 1.2rem 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .moment-tile {
    transition: transform var(--dur-lift) ease, box-shadow var(--dur-lift) ease; }
  .moment-tile:hover { transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(19, 19, 19, .14); }
}
.moment-tile-when { display: inline-block; justify-self: start;
  background: var(--accent); color: var(--accent-ink); border-radius: 999px;
  padding: .2rem .7rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; }
.moment-tile-name { font-weight: 900; font-size: 1.05rem; }
.moment-tile-line { color: var(--muted); font-size: .84rem; }

/* Touch floor (Hallmark gate) — coarse pointers AND narrow viewports (D4). */
@media (pointer: coarse), (max-width: 640px) {
  .cfg-pill, .cfg-card, .cfg-addon, .cfg-more, .cfg-add-all, .cfg-style,
  .pdp-thumb, .moment-bell, .moment-tile { min-height: 44px; }
  .cfg-pill { display: inline-flex; align-items: center; }
}

/* Sticky buy row on mobile (audit D3, Casetify pattern): price + CTA pin to
   the viewport bottom while the configurator is on screen. */
@media (max-width: 640px) {
  .cfg .confirm-row { position: sticky; bottom: .55rem; z-index: 30;
    background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
    padding: .55rem .7rem; box-shadow: 0 10px 28px rgba(19, 19, 19, .16); }
}

/* ---- E1 (Cem 2026-09-13): the phone hero ------------------------------------
   First load at 390px stacked a search box, a device sentence, a "Fans are
   in" rail and two callout cards on top of a detailed product photograph —
   five layers arguing. home.js now moves the rail and the cards below the
   hero (.hero-spill), and what stays gets a scrim instead of a wash: the
   photo keeps full punch at the top and dissolves into the page ground under
   the search stack, so the box and its one line read on paper, not on a
   desk. Desktop (the left-rail hero over cleared wall) is untouched. */
@media (max-width: 640px) {
  .hero.has-bg { justify-content: flex-end; min-height: min(66vh, 580px); }
  .hero.has-bg .hero-bg::after {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--bg) 8%, transparent) 28%,
      color-mix(in srgb, var(--bg) 46%, transparent) 50%,
      color-mix(in srgb, var(--bg) 84%, transparent) 70%,
      color-mix(in srgb, var(--bg) 97%, transparent) 86%,
      var(--bg) 100%); }
  .hero.has-bg .hero-inner { padding: 1.6rem clamp(1.25rem, 4vw, 4.5rem) 1rem; }
  /* On the scrim the copy is ink on paper — the halos that carried it over
     the photograph now only smear it. */
  .hero.has-bg .hero-device { text-shadow: none; color: var(--ink); }
  .hero.has-bg .finder-recents-label { color: var(--muted); text-shadow: none; }
  .hero.has-bg .finder-recent-item { color: var(--ink); border-color: var(--line); }
  .hero.has-bg .finder-box { box-shadow: 0 8px 22px rgba(19, 19, 19, .14); }
  .hero-spill { padding-top: 1rem; }
}

/* G4 R1/R2/R6 — the promise under the buy button (Cem's I16 facts, rendered
   only with checkout ON and a READY manifest, so none of this matches on the
   dark path). K3 grammar: 900-weight ink for the shipping promise, muted for
   the rest, one lime dot between the trust facts. No new fonts, no new
   colours — --ink / --muted / --accent / --line only. */
.pdp-shipping .pdp-ship-cost { font-weight: 800; color: var(--ink);
  letter-spacing: -.01em; }
.pdp-delivery { color: var(--muted); }
.pdp-trust { margin-top: .6rem; letter-spacing: .01em; }
.pdp-trust li + li::before { color: var(--accent); font-weight: 900; }
.pdp-trust a:hover { color: var(--ink); }
.bag-delivery { color: var(--muted); text-align: center; }

/* Casetify density (Cem 2026-09-14) — the pill grammar K3 already speaks
   (999px, 1.5px border, 800 weight), in --ok green for a free promise and
   --muted for a fee. No new colour, no new font: --ok / --muted / --ink /
   --line only, and none of it matches on the dark path. */
.pdp-ship-pill, .bag-ship-pill { font-weight: 800; letter-spacing: .01em; }
.pdp-ship-pill[data-ship="free"], .bag-ship-pill {
  background: color-mix(in srgb, var(--ok) 10%, var(--bg)); }
.bag-ship-banner { border-radius: 14px; }
.bag-ship-banner[data-state="free"] { background: color-mix(in srgb, var(--ok) 10%, var(--bg)); }
.bag-ship-banner-text { font-weight: 800; letter-spacing: -.01em; }
/* The costume change: half the brand skins are dark shells, where the flat
   #1B7A3E fails contrast — so the free-shipping green is mixed towards the
   skin's own ink (light on a dark skin, deep on a light one). It still reads
   green, which is the signal; .confirm-ok drops to ink for the same reason. */
html.is-skinned .pdp-ship-pill[data-ship="free"],
html.is-skinned .bag-ship-pill,
html.is-skinned .bag-ship-banner[data-state="free"] .bag-ship-banner-text {
  color: color-mix(in srgb, var(--ok) 55%, var(--ink)); }
html.is-skinned .pdp-ship-pill[data-ship="free"],
html.is-skinned .bag-ship-pill,
html.is-skinned .bag-ship-banner[data-state="free"] {
  background: color-mix(in srgb, var(--ok) 10%, var(--bg)); }
html.is-skinned .bag-ship-banner[data-state="free"] {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--ink)); }
/* The sticky buy row at 390 px: the pill rides on the price line, so the row
   tightens ONLY when a pill is actually in it (the dark path keeps its
   1.2rem price↔button gap untouched). */
@media (max-width: 640px) {
  .cfg .confirm-row:has(.pdp-ship-pill) { gap: .7rem; }
  .cfg .confirm-row:has(.pdp-ship-pill) .confirm-price { font-size: 1.5rem; }
}

/* ==== HOME REDESIGN (Cem 2026-09-25 — bake-off rounds 1–5, feat/home-redesign) ====
   Split hero (Astra pattern): headline + search on the page ground, launch
   carousel right; the big Sports gate rotates; "Discover our products" is a
   lifestyle-tile bento that cycles on hover; the set story shows four shots.
   Motion honours prefers-reduced-motion (rotate.js stops every timer). */

/* ---- split hero ------------------------------------------------------------ */
#app > .hero-split { max-width: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(400px, 34vw, 500px); background: var(--bg); color: var(--ink); }
.hero-split .split-copy { display: flex; flex-direction: column; justify-content: center;
  gap: .8rem; max-width: 44rem;
  padding: 2.2rem 2rem 2.2rem clamp(1.25rem, 5.5vw, 5rem); }
.hero-split .hero-title { font-size: clamp(2.2rem, 4vw, 3.6rem); line-height: .96;
  letter-spacing: -.03em; text-wrap: balance; max-width: none; }
.hero-split .hero-sub { font-size: 1.1rem; color: var(--muted); margin: 0; max-width: 34rem; }
.hero-split .hero-finder { max-width: 26rem; margin: .4rem 0 0; }
.hero-split .finder-box { box-shadow: 0 12px 30px rgba(19, 19, 19, .14); }
.hero-split .hero-secondary { margin-top: 0; }
.hero-split .hero-worlds { justify-content: flex-start; }
.hero-split .split-art { position: relative; overflow: hidden; background: var(--card-bg); }
.hero-split .hero-slides { position: absolute; inset: 0; }
.hero-split .hero-slides .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s; }
.hero-split .hero-slides .slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.hero-split .hero-slides picture { display: contents; }
.hero-split .hero-slides img { width: 100%; height: 100%; object-fit: cover;
  object-position: right center; }
/* The banner's baked-in headline sits at its left edge; cropping from the
   right keeps the products and lets the caption pill carry the line. */
/* Below 860px (where the hero stacks) the square banner files are served;
   their own headline sits in the top quarter, so a bottom-anchored 4:3 crop
   drops it and keeps the products. File swap, stack and crop share the
   breakpoint. */
@media (max-width: 860px) { .hero-split .hero-slides img { object-position: center bottom; } }
.hero-cap { position: absolute; right: 1rem; bottom: 1rem; z-index: 3;
  display: flex; align-items: center; gap: .9rem; }
.hero-cap-line { background: rgba(0, 0, 0, .55); color: #fff;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px;
  padding: .42rem 1rem; font-weight: 800; font-size: .94rem; text-decoration: none;
  white-space: nowrap; -webkit-backdrop-filter: blur(12px) saturate(1.2);
  backdrop-filter: blur(12px) saturate(1.2); }
.hero-cap-line:hover { background: rgba(0, 0, 0, .7); }
.hero-cap-cta { font-weight: 700; opacity: .85; margin-left: .45rem; }
@media (max-width: 860px) {
  #app > .hero-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-split .split-copy { min-width: 0; }
  .hero-split .split-art { order: -1; aspect-ratio: 4 / 3; }
  .hero-split .split-copy { padding: 1.5rem 1.25rem 2rem; max-width: none; }
  .hero-cap { left: 1rem; right: auto; bottom: auto; top: 1rem; }
}

/* ---- rotation dots (hero: buttons; gates + tiles: passive) ------------------ */
.rot-dots { display: flex; gap: 6px; }
.rot-dots > * { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0;
  background: rgba(255, 255, 255, .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
  transition: width .2s ease; }
.rot-dots > .on { width: 20px; background: #fff; }
/* Hero dots are buttons: 8px visual on a 24px hit area (K3 tap-target floor). */
.rot-dots > button { cursor: pointer; width: 24px; height: 24px; padding: 8px;
  background-clip: content-box; box-shadow: none; position: relative; }
.rot-dots > button::after { content: ''; position: absolute; inset: 8px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
.rot-dots > button.on { width: 36px; }
.rot-dots > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gate .rot-dots, .tile .rot-dots { position: absolute; top: 10px; right: 10px; z-index: 3; }
.gate .rot-dots > *, .tile .rot-dots > * { width: 6px; height: 6px; }
.gate .rot-dots > .on, .tile .rot-dots > .on { width: 16px; }

/* ---- gate rotation (the big Sports tile) ------------------------------------ */
.gate-art.rot .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s; }
.gate-art.rot .slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.gate-art.rot .slide img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Discover our products: bento ----------------------------------------- */
.discover .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: clamp(170px, 19vw, 260px); gap: 12px; }
/* 18px like the gates above them (the K3 mosaic radius), not the token 14. */
.tile { position: relative; display: block; border-radius: 18px; overflow: hidden;
  text-decoration: none; background: var(--card-bg); }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s; }
.tile .slide.on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.tile .slide img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .tile .slide img { transition: transform var(--dur-zoom) ease; }
  .tile:hover .slide img { transform: scale(1.03); }
}
.tile .rot-dots { opacity: 0; transition: opacity .2s ease; }
@media (hover: hover) and (pointer: fine) { .tile.rot:hover .rot-dots { opacity: 1; } }
.tile:focus-visible .rot-dots { opacity: 1; }
.tile-lbl { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex;
  align-items: center; gap: 8px; background: #fff; color: #131313; border-radius: 999px;
  padding: 7px 8px 7px 14px; font-weight: 800; font-size: 14px; }
.tile-lbl em { font-style: normal; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.discover .shelf-range { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .discover .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(150px, 44vw, 220px); }
  .tile.big { grid-column: span 2; grid-row: span 2; }
  .tile.last { grid-column: span 2; }
}

/* ---- set story with four shots (2×2) ---------------------------------------- */
.setstory-four .setstory-media { grid-template-columns: 1fr 1fr; gap: .8rem; }
.setstory-four .setstory-media figure { position: relative; margin: 0; border-radius: 18px;
  overflow: hidden; aspect-ratio: 1; }
.setstory-four .setstory-media img { width: 100%; height: 100%; object-fit: cover;
  transform: none; }
.setstory-four .setstory-media figcaption { position: absolute; left: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .hero-split .hero-slides .slide, .gate-art.rot .slide, .tile .slide { transition: none; }
}

/* ==== ASK P1 — the hero "folded panel" (agentic-commerce brief §1, Cem 2026-09-26: D1 trimmed) ====
   The plate is the Ask panel shown closed: the panel's radius (--disc-r 18.2px),
   its shadow, its send button and its sentence. One lime field (the ASK tab),
   one row of device pill + TRY chips, no recents on the door. */
.hero-ask { position: relative; max-width: 28rem; min-width: 0; margin-top: .4rem; padding: 14px;
  background: #FBFBFA; border: 1px solid var(--line); border-radius: 18.2px;
  box-shadow: 0 12px 30px rgba(19, 19, 19, .10); cursor: text;
  transition: box-shadow 180ms var(--ease-out), transform 180ms var(--ease-out); }
/* Shadow only on hover/focus — no lift: a moving plate reads as "not stable"
   to pointer automation and the pill inside it is the click target. */
.hero-ask:hover, .hero-ask:focus-within { box-shadow: 0 18px 44px rgba(19, 19, 19, .16); }
.hero-ask:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--accent), 0 0 0 6px var(--ink); }
.hero-ask-tab { position: absolute; top: -10px; left: 16px; font-size: .68rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: var(--accent-ink);
  border-radius: 999px; padding: .2rem .6rem; }
.hero-ask-lead { margin: 0 0 .55rem .2rem; font-size: .92rem; font-weight: 700; color: var(--ink); }
.hero-split .hero-ask .hero-finder { max-width: none; margin: 0; }
.hero-split .hero-ask .finder-box { background: var(--bg); min-height: 62px; box-shadow: none;
  padding: .25rem .3rem .25rem .95rem; }
.hero-ask .finder-input { font-size: 1.05rem; }
.hero-ask-send { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 0;
  background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; }
.hero-ask-send:hover { opacity: .85; }
.hero-ask-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; align-items: center; }
.hero-ask-device, .hero-try { display: inline-flex; align-items: center; gap: .35rem; min-height: 36px;
  padding: .3rem .8rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg);
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
.hero-ask-device { border-color: var(--ink); font-weight: 700; margin: 0; }
.hero-ask-device .hero-device-change, .hero-ask-device .hero-device-start { text-decoration: none; color: var(--muted); font-weight: 600; }
.hero-ask-device:hover .hero-device-change, .hero-ask-device:hover .hero-device-start { text-decoration: underline; }
.hero-try::before { content: '→'; font-weight: 800; }
.hero-try:hover { border-color: var(--ink); }
.hero-ask .finder-results { left: 14px; right: 14px; }
@media (max-width: 860px) {
  /* Brief §1.4: the TRY row must clear the fold on a 390×844 — shorter art,
     tighter top, one scrolling row of pills. */
  .hero-split .split-art { max-height: 30dvh; }
  .hero-split .split-copy { padding-top: 1.1rem; gap: .6rem; }
  /* The plate's lead line says the job on phones; the sub line goes. */
  .hero-split .hero-sub { display: none; }
  .hero-ask { max-width: none; min-width: 0; width: 100%; }
  .hero-split .hero-ask .finder-box { min-height: 56px; }
  .hero-ask-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .hero-ask-row::-webkit-scrollbar { display: none; }
  .hero-ask-row > * { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .hero-ask-device, .hero-try { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hero-ask { transition: none; } }

/* ---- Home v3 (Cem 2026-10-02, bake-off C): the photo hero + floating composer ----
   The hero lives in the page container like every section under it (no more
   full-bleed strip against a 1280px grid); the headline sits on the image;
   the chat composer floats under the stage and is the open seam. */
#app > .hero-photo { max-width: 1280px; margin: 0 auto; padding: 1.6rem 1.25rem 0;
  display: flex; flex-direction: column; align-items: center; gap: 0; background: var(--bg); min-height: 0; }
.hero-photo .hero-stage { position: relative; width: 100%; height: clamp(320px, 32vw, 460px);
  border-radius: 22px; overflow: hidden; background: var(--card-bg); }
.hero-photo .hero-slides { position: absolute; inset: 0; }
.hero-photo .hero-slides .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s; }
.hero-photo .hero-slides .slide.on { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.hero-photo .hero-slides picture { display: contents; }
.hero-photo .hero-slides img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-photo .hero-shade { position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .58)); pointer-events: none; }
.hero-photo .hero-title { position: absolute; left: clamp(1.1rem, 3vw, 2.5rem); bottom: 1.6rem; z-index: 2;
  color: #fff; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: .96; letter-spacing: -.03em;
  max-width: 12ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); margin: 0; }
.hero-photo .hero-cap { right: 1.25rem; bottom: 1.4rem; }
/* the composer: 760px, pulled 32px over the stage's bottom edge */
.hero-photo .hero-composer { position: relative; z-index: 3; width: min(760px, 100%); max-width: none; margin: -32px 0 0;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.hero-photo .hero-composer:hover, .hero-photo .hero-composer:focus-within { box-shadow: none; }
.hero-photo .hero-composer .hero-finder { width: 100%; max-width: none; margin: 0; }
.hero-photo .hero-composer .finder-box { min-height: 64px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--bg); box-shadow: 0 14px 34px rgba(19, 19, 19, .14); padding-left: 1.2rem; }
.hero-photo .hero-composer .finder-input { font-size: 1.05rem; }
.hero-photo .hero-composer .hero-ask-send { width: 48px; height: 48px; }
.hero-photo .hero-ask-row { justify-content: center; margin-top: 0; flex-wrap: nowrap; }
.hero-photo .hero-ask-row > * { white-space: nowrap; }
.hero-photo .hero-ask-device { border-color: var(--line); font-weight: 700; }
.hero-photo .hero-ask-device::before { content: '→'; font-weight: 800; }
.hero-photo .hero-ask-device .hero-device-start { color: var(--ink); font-weight: 700; }
.hero-photo .hero-ask-device, .hero-photo .hero-try { background: var(--bg); }
@media (max-width: 860px) {
  #app > .hero-photo { padding: .9rem .9rem 0; }
  .hero-photo .hero-stage { height: auto; aspect-ratio: 4 / 3; max-height: 34dvh; border-radius: 18px; }
  .hero-photo .hero-slides img { object-position: center bottom; }
  .hero-photo .hero-title { font-size: clamp(1.7rem, 8.4vw, 2.3rem); left: 1rem; bottom: 3.4rem; max-width: 11ch; }
  .hero-photo .hero-cap { left: auto; right: .7rem; top: .7rem; bottom: auto; max-width: calc(100% - 1.4rem); gap: .5rem; }
  .hero-photo .hero-cap-line { overflow: hidden; text-overflow: ellipsis; max-width: 62vw; font-size: .82rem; padding: .35rem .8rem; }
  .hero-photo .hero-composer { margin-top: -28px; width: 100%; }
  .hero-photo .hero-composer .finder-box { min-height: 56px; }
  .hero-photo .hero-ask-row { justify-content: flex-start; width: 100%; }
}
/* ---- Home v3: the collections bento (the genre worlds in the mosaic) ---- */
.collections-bento .tile-lbl { font-size: 15px; padding: 8px 16px; white-space: nowrap; }
.collections-bento .tile-lbl em { display: none; }
.tile-lbl-short { display: none; }
@media (max-width: 760px) {
  .collections-bento .tile-lbl { font-size: 13px; padding: 6px 12px; }
  .tile-lbl-short { display: inline; } .tile-lbl-long { display: none; }
}