/* Prototype 04 (Halaman): one fragrance, one continuous page in its world. Brand tokens from
   ../assets/base.css; the world's colours (--field, --glow, --c100..--c700, --next-*) come from data.js.
   Chapters alternate the world's field, its deep shade and its 100 (Eat Hungry Tiger), no rules between. */
:root {
  --deep: color-mix(in oklab, var(--field) 52%, #000);
  --h2: clamp(34px, 3.4vw, 56px);
  --statement: clamp(26px, 2.5vw, 36px);
  --small: 0.9375rem;
  --lead: 1.375rem; /* scale: 13 / 15 / 17 / 22 / statement / h2 / display */
  --nav: 84px;
}
html { background: var(--deep); }
body { background: var(--field); color: var(--ivory-50); overflow-x: clip; font-size: 1.0625rem; line-height: 1.6; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
main, .footer { overflow-x: clip; } /* objects cross the side trims on purpose; the page never scrolls sideways */
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
.skip { position: absolute; z-index: 60; left: 12px; top: 12px; padding: 10px 14px; background: var(--ivory-50); color: var(--ink); }
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; }
.label { display: block; margin-bottom: 28px; font: 600 var(--small)/1.4 var(--font-body); color: var(--c300); }

/* Buttons: the site's square button (base.css); primary is filled. */
.button { font-size: var(--small); }
.button.fill { border-color: var(--ivory-50); background: var(--ivory-50); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .button.fill:hover { background: var(--c100); border-color: var(--c100); } }

/* ---------- Header: the site bar over the stage. */
.nav {
  position: absolute; z-index: 30; inset: 0 0 auto; display: flex; align-items: center; gap: 40px;
  height: var(--nav); padding: 0 var(--margin); font-size: var(--small); font-weight: 500;
}
.logo img { width: 112px; height: auto; }
.links { margin-left: auto; align-self: stretch; }
.links > ul { display: flex; gap: 32px; height: 100%; }
.links > ul > li { display: flex; align-items: center; }
.links a, .lang a, .menu a, .worlds a, .footer a { text-decoration: underline transparent; text-underline-offset: 6px; transition: text-decoration-color 180ms ease; }
.links > ul > li > a:hover, .links > ul > li > a[aria-current], .lang a:hover, .lang a[aria-current] { text-decoration-color: currentColor; }
.lang { display: flex; gap: 12px; }
/* Fragrances flyout (Diptyque): one tile per world, the bottle on its own colour, name and core line.
   Opens on hover and on keyboard focus; floating, so it may cast a shadow. */
.sub > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sub-panel {
  position: absolute; top: var(--nav); right: var(--margin); display: grid; grid-template-columns: repeat(5, 184px);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.3); visibility: hidden; opacity: 0; transform: translateY(-8px); /* taste-skill-ignore: real overlay (menu panel) */
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s 260ms;
}
.sub:hover .sub-panel, .sub:focus-within .sub-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.sub-panel li { background: var(--tile); }
.sub-panel a { display: grid; grid-template-rows: 172px auto 1fr; height: 100%; padding: 0 18px 20px; overflow: hidden; color: var(--ivory-50); text-decoration: none; }
.sub-panel img { height: 190px; width: auto; margin: -6px auto 0; transition: transform 400ms var(--ease-out); }
.sub-panel b { margin-top: 14px; font: 400 1.375rem/1.1 var(--font-heading); }
.sub-panel span { margin-top: 6px; font-size: 0.8125rem; line-height: 1.4; }
.sub-panel a:hover img, .sub-panel a:focus-visible img { transform: translateY(-8px); }
.sub-panel a[aria-current] b { text-decoration: underline; text-underline-offset: 5px; }
.sub-panel a:focus-visible { outline-offset: -4px; }
.menu { display: none; }

/* ---------- Chapters 1-2 share one layer stack, so the sticky bottle (Chanel) sits between the
   stage's name and its front objects, then steps aside for the Feeling. */
.chapters { position: relative; isolation: isolate; }
.rail { position: absolute; inset: 0 0 auto; z-index: 4; height: max(100svh, 680px); pointer-events: none; }
.stage-bottle {
  position: absolute; left: 50%; bottom: -4vh; height: 76vh; width: auto; max-width: none;
  transform: translateX(-50%); filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.3)); /* taste-skill-ignore: a cut-out object or bottle needs its contact shadow to sit in the light (P1) */
}

/* ---------- 1. Stage: P1 Panggung with Eat Hungry Tiger's full-width name. */
.stage { position: relative; height: 100svh; min-height: 680px; overflow: hidden; touch-action: pan-y; }
/* The world's light (art-bible.md), as P1. Brand exception to "no gradients": it is the moment's light. */
.stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(48% 66% at 50% 52%, var(--glow), transparent 72%); } /* taste-skill-ignore: brand exception, the world's pool of light (art-bible.md, P1) */
.strip {
  position: absolute; z-index: 2; top: calc(var(--nav) + 5vh); left: var(--margin); width: max-content; white-space: nowrap;
  font: 400 15vw/0.86 var(--font-heading); letter-spacing: -0.035em; color: var(--c300);
}
.props { position: absolute; inset: 0; pointer-events: none; }
.prop {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1vw);
  transform: translate(-50%, -50%) rotate(calc(var(--r) * 1deg));
}
.prop i { display: block; transform: translate(calc(var(--px, 0) * var(--d) * -40px), calc(var(--py, 0) * var(--d) * -28px)); transition: transform 600ms var(--ease-out); }
.prop img { width: 100%; height: auto; }
.prop.back { z-index: 1; --d: 0.25; --t: 6; filter: blur(1.2px) brightness(0.82); }
.prop.back i { opacity: 0.85; }
.prop.mid { z-index: 3; --d: 0.55; --t: 16; filter: drop-shadow(0 18px 22px rgb(0 0 0 / 0.28)); } /* taste-skill-ignore: a cut-out object or bottle needs its contact shadow to sit in the light (P1) */
.prop.front { z-index: 6; --d: 1; --t: 34; filter: blur(1.4px) drop-shadow(0 30px 40px rgb(0 0 0 / 0.3)); } /* taste-skill-ignore: a cut-out object or bottle needs its contact shadow to sit in the light (P1) */
.stage-copy { position: absolute; z-index: 8; left: var(--margin); bottom: 15vh; width: min(28vw, 400px); }
.stage-statement { margin-bottom: 28px; font: 400 var(--lead)/1.4 var(--font-heading); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.concentration { font-size: var(--small); }
.stage-side { position: absolute; z-index: 8; right: var(--margin); bottom: 15vh; width: min(26vw, 380px); }
.headline { font: 400 var(--lead)/1.3 var(--font-heading); }
.cue { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; min-height: 44px; font-size: var(--small); font-weight: 500; text-decoration: none; }
.cue svg { width: 20px; height: 20px; }
.ai-note { margin-top: 20px; max-width: 34ch; font-size: 0.8125rem; line-height: 1.45; opacity: 0.8; }

/* ---------- 2. The Feeling: the story on the field, then a memory and an invitation, then a question. */
.feeling { position: relative; padding: 24svh var(--margin) 28svh; }
.feeling-copy { position: relative; z-index: 8; width: min(58vw, 860px); }
.story { font: 400 var(--statement)/1.28 var(--font-heading); }
.then { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px; max-width: 640px; color: var(--c100); }
.ask { margin-top: 112px; max-width: 20em; font: italic 400 var(--statement)/1.2 var(--font-heading); color: var(--c300); }

/* ---------- 3. The Scene: the picture bleeds off the left half, the deep half holds the words. */
.scene { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: max(100svh, 760px); background: var(--deep); }
.scene-pic { position: relative; overflow: hidden; }
.scene-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim for the title only: the picture's lower third darkens so the words hold on any frame. */
.scene-pic::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgb(0 0 0 / 0.55)); } /* taste-skill-ignore: neutral scrim over the photo, for the title */
.scene-title { position: absolute; z-index: 1; left: var(--margin); right: 40px; bottom: 56px; max-width: 11em; font: italic 400 clamp(36px, 4.2vw, 68px)/1.02 var(--font-heading); letter-spacing: -0.015em; }
.scene-copy { position: relative; display: flex; flex-direction: column; gap: 48px; padding: 128px var(--margin) 96px 6vw; }
.question { max-width: 16em; font: 400 var(--statement)/1.2 var(--font-heading); color: var(--c100); }
.peek { position: absolute; right: calc(-0.4 * var(--margin)); bottom: 12%; width: min(14vw, 210px); aspect-ratio: 3 / 4; transform: rotate(5deg); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
.scene-body { max-width: 30em; color: var(--c100); }
.scene-body strong { font-weight: 600; color: var(--c300); }
.scene .props { overflow: visible; }

/* ---------- 4. The Objects (KÖPPEN live list). Default, no script or reduced motion: every object
   with its line, one row each. The pinned live list below only runs with motion. */
.objects { background: var(--c100); color: var(--ink); }
.objects-pin { padding: 160px var(--margin); }
.objects .label { color: var(--ink); }
.olist li { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 40px; padding: 28px 0; }
.olist button {
  padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
  font: 400 clamp(40px, 5.2vw, 88px)/1 var(--font-heading); letter-spacing: -0.02em; color: var(--ink);
}
.olist figure { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; align-items: center; gap: 32px; }
.float { position: relative; }
.float img { width: 100%; height: auto; filter: drop-shadow(0 30px 34px rgb(122 52 18 / 0.32)); } /* taste-skill-ignore: a cut-out object or bottle needs its contact shadow to sit in the light (P1) */
.olist figcaption { max-width: 22em; font: italic 400 var(--lead)/1.3 var(--font-heading); }

.motion .objects { height: calc(100svh + var(--n) * 55svh); }
.motion .objects-pin { position: sticky; top: 0; height: 100svh; min-height: 640px; padding: 15svh var(--margin) 0; overflow: hidden; }
.motion .olist li { display: block; padding: 0; }
.motion .olist button { color: var(--c700); transition: color 260ms ease; }
.motion .olist li.is-on button { color: var(--ink); }
@media (hover: hover) { .motion .olist button:hover { color: var(--ink); } }
.motion .olist figure {
  position: absolute; z-index: 1; left: 44vw; right: var(--margin); top: 12svh; bottom: 6svh; display: grid; grid-template-columns: none;
  grid-template-rows: 1fr auto; justify-items: center; gap: 24px;
  opacity: 0; transform: translateY(32px) scale(0.92); pointer-events: none;
  transition: opacity 360ms ease, transform 700ms var(--ease-out);
}
.motion .olist li.is-on figure { opacity: 1; transform: none; }
/* The world's light behind the active object (as the stage's pool of light). */
.motion .olist figure::before { content: ''; position: absolute; inset: 0 0 18%; z-index: -1; background: radial-gradient(closest-side, var(--c300), transparent); opacity: 0.8; } /* taste-skill-ignore: brand exception, the world's pool of light (art-bible.md, P1) */
.motion .float { align-self: center; width: min(30vw, 52svh); transform: translate(calc(var(--px, 0) * -36px), calc(var(--py, 0) * -24px)) rotate(-6deg); transition: transform 600ms var(--ease-out); }
.motion .olist figcaption { text-align: center; }

/* ---------- 5. The Scent (Eat Hungry Tiger "What's inside"): deep half with the words, bright half with the bottle. */
.scent { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: max(100svh, 820px); }
.scent-copy { padding: 128px var(--margin) 96px; background: var(--deep); }
.scent-copy h2 { margin-bottom: 40px; font: 400 clamp(40px, 5.2vw, 88px)/0.95 var(--font-heading); letter-spacing: -0.025em; color: var(--c300); }
.profile { max-width: 34em; margin-bottom: 56px; }
.notes { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 12px 48px; }
.notes dt { font-weight: 600; color: var(--c300); }
.notes dd { font-size: var(--small); max-width: 14em; }
.ph { color: var(--c100); }
.buy { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 24px; margin-top: 64px; }
.buy fieldset { display: flex; gap: 8px; padding: 0; border: 0; }
.buy legend { padding: 0; margin-bottom: 12px; }
.buy label { position: relative; cursor: pointer; }
.buy input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.buy label span, .buy label small { display: block; }
.buy label span { padding: 8px 16px 0; border: 2px solid rgb(255 255 255 / 0.32); border-bottom: 0; font-weight: 600; }
.buy label small { padding: 0 16px 8px; border: 2px solid rgb(255 255 255 / 0.32); border-top: 0; font-size: 0.8125rem; }
.buy input:checked ~ span, .buy input:checked ~ small { border-color: var(--ivory-50); background: rgb(255 255 255 / 0.08); }
.buy input:disabled ~ span, .buy input:disabled ~ small { opacity: 0.55; cursor: not-allowed; }
.buy input:focus-visible ~ span { outline: 2px solid var(--gold); outline-offset: 2px; }
.scent-stage { position: relative; overflow: hidden; background: var(--c500); }
.moods {
  position: absolute; inset: 7% 0 auto; height: 2.72em; padding: 0; list-style: none;
  font: italic 400 clamp(64px, 8.6vw, 156px)/0.86 var(--font-heading); letter-spacing: -0.035em; color: var(--c700);
}
/* One word per item, so the three read as three words, not a wrapped headline. */
.moods li { position: absolute; left: 50%; translate: -50% 0; top: calc(var(--i) * 0.86em); white-space: nowrap; }
.scent-bottle { position: absolute; z-index: 4; left: 50%; bottom: -7%; height: 62%; width: auto; max-width: none; transform: translateX(-50%) rotate(-5deg); filter: drop-shadow(0 40px 50px rgb(90 30 0 / 0.4)); } /* taste-skill-ignore: a cut-out object or bottle needs its contact shadow to sit in the light (P1) */

/* ---------- 6. Next moment (MANA flavour stage). Default, no scroll timeline: the next world as it lands. */
.next { position: relative; background: var(--next-field); }
.next-pin { position: relative; height: 100svh; min-height: 680px; overflow: hidden; background: var(--field); }
.wipe { position: absolute; inset: 0; background: var(--next-field); }
.nb { position: absolute; z-index: 4; left: 50%; bottom: -4vh; height: 70vh; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 40px 60px rgb(0 0 0 / 0.3)); } /* taste-skill-ignore: a cut-out object or bottle needs its contact shadow to sit in the light (P1) */
.nb-from { opacity: 0; }
.next-name {
  position: absolute; z-index: 2; inset: calc(var(--nav) + 2vh) var(--margin) auto; text-align: center; text-decoration: none;
  font: 400 clamp(96px, 13.5vw, 240px)/0.86 var(--font-heading); letter-spacing: -0.035em; color: var(--next-c300);
}
.next-name:hover, .next-name:focus-visible { color: var(--ivory-50); }
.next-copy { position: absolute; z-index: 8; left: var(--margin); bottom: 9vh; max-width: 340px; }
.next-copy p { font: italic 400 var(--lead)/1.3 var(--font-heading); }
.step { position: absolute; z-index: 8; bottom: 9vh; right: var(--margin); display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid currentColor; transition: background-color 180ms ease, color 180ms ease; }
.step-prev { right: calc(var(--margin) + 68px); }
.step svg { width: 24px; height: 24px; }
.step:hover { background: var(--ivory-50); color: var(--next-field); }
/* Byredo: the five names in a plain row, also the way back to the other worlds. */
.worlds ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding: 40px var(--margin); font: 400 var(--lead)/1.2 var(--font-heading); }
.worlds a { display: inline-block; padding: 6px 0; }
.worlds a:hover, .worlds a[aria-current] { text-decoration-color: currentColor; }

.stub { padding: 160px var(--margin); background: var(--deep); }
.stub p { max-width: 26em; font: 400 var(--statement)/1.3 var(--font-heading); }

/* ---------- Footer (Yellowbird): stays in the world's deep colour, the wordmark across the width. */
.footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr); gap: 40px 24px; padding: 96px var(--margin) 48px; background: var(--deep); color: var(--c100); }
.footer h2 { margin-bottom: 16px; font: 600 var(--small)/1.55 var(--font-body); color: var(--c300); }
.footer li { line-height: 2; }
.footer a:hover { text-decoration-color: currentColor; }
.footer-note { align-self: end; font-size: 0.8125rem; line-height: 1.45; opacity: 0.8; }
.footer-mark { grid-column: 1 / -1; margin-top: 64px; }
.footer-mark img { width: 100%; height: auto; }

/* ---------- Motion layer: transform and opacity only, scroll-driven where supported. */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .then [data-reveal]:nth-child(2) { transition-delay: 90ms; }

@supports (animation-timeline: view()) {
  /* Chanel: the bottle stays while the stage gives way to the Feeling, stepping aside and tilting. */
  .motion .full .chapters { view-timeline: --chapters block; }
  .motion .full .rail { position: sticky; top: 0; margin-bottom: calc(-1 * max(100svh, 680px)); }
  .motion .full .stage-bottle { --bx: 25vw; --by: 2vh; --bs: 0.8; --br: 7deg; animation: beat linear both; animation-timeline: --chapters; animation-range: contain 0% contain 100%; }
  @keyframes beat {
    0%, 6% { translate: 0 0; scale: 1; rotate: 0deg; }
    48%, 100% { translate: var(--bx) var(--by); scale: var(--bs); rotate: var(--br); }
  }
  /* Objects travel at their depth's speed through the chapters (front fastest). */
  .motion :is(.feeling, .scene, .scent) { view-timeline: --chapter block; }
  .motion :is(.feeling, .scene, .scent) .prop { animation: travel linear both; animation-timeline: --chapter; }
  @keyframes travel { from { translate: 0 calc(var(--t) * 1svh); } to { translate: 0 calc(var(--t) * -1svh); } }

  /* Posh Stink: one gesture, one fragrance. The next field wipes up, the bottles cross-fade, the next world's objects gather. */
  .motion .next-track { view-timeline: --next block; height: 200svh; }
  .motion .next-pin { position: sticky; top: 0; }
  .motion .wipe { animation: wipe linear both; animation-timeline: --next; animation-range: entry 20% contain 0%; }
  @keyframes wipe { from { transform: translateY(100%); } to { transform: none; } }
  .motion .nb-from { animation: leave linear both; animation-timeline: --next; animation-range: entry 50% contain 10%; }
  @keyframes leave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6vh) scale(0.86); } }
  .motion .nb-to { animation: land linear both; animation-timeline: --next; animation-range: contain 0% contain 30%; }
  @keyframes land { from { opacity: 0; transform: translateY(12vh) scale(1.2); } to { opacity: 1; transform: none; } }
  .motion .next .prop { animation: gather linear both; animation-timeline: --next; animation-range: contain 0% contain 40%; }
  @keyframes gather { from { opacity: 0; translate: calc((var(--x) - 50) * 0.5vw) 24svh; } to { opacity: 1; translate: 0 0; } }
  .motion .next-name { animation: land linear both; animation-timeline: --next; animation-range: contain 0% contain 30%; }
}

/* ---------- Tablet */
@media (max-width: 1023px) {
  .footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-note { grid-column: 1 / -1; }
  /* Portrait tablet: the bottle stands above the words, the words share the floor in two columns. */
  .stage-bottle { top: 25svh; bottom: auto; height: 48svh; }
  .stage-copy, .stage-side { width: 40vw; bottom: 6svh; }
  .next-copy { max-width: 26vw; }
  .feeling-copy { width: 60vw; }
  .motion .full .stage-bottle { --bx: 30vw; --bs: 0.7; }
  .notes { grid-template-columns: 1fr; }
}

/* ---------- Phone: its own composition (390). */
@media (max-width: 760px) {
  :root { --nav: 64px; }
  .nav { gap: 16px; }
  .logo img { width: 92px; }
  .links, .lang { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 4px; list-style: none; cursor: pointer; font-weight: 500; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; inset: var(--nav) 0 auto; padding: 8px 20px 24px; background: var(--ivory-50); color: var(--ink); }
  .menu nav a, .menu nav span { display: block; padding: 10px 0; font-size: 1.0625rem; }
  .menu nav ul ul a { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
  .menu nav ul ul a::before { content: ''; width: 18px; height: 18px; background: var(--tile); }
  .menu nav a[aria-current] { text-decoration-color: currentColor; }
  .menu-lang { display: flex; gap: 20px; padding-top: 8px; }

  .stage { min-height: 700px; }
  .rail { height: max(100svh, 700px); }
  .strip { top: calc(var(--nav) + 8px); white-space: normal; line-height: 0.84; }
  .strip .line { display: block; }
  .prop { left: calc((var(--x) * 1.1 - 5) * 1%); width: calc(var(--w) * 2.1vw); }
  .stage .prop { top: calc((6 + var(--y) * 0.5) * 1%); }
  .stage-bottle { top: 25svh; bottom: auto; height: 44svh; }
  .stage-copy { left: 20px; right: 20px; bottom: 40px; width: auto; }
  .stage-statement { margin-bottom: 20px; font-size: 1.0625rem; }
  .stage-side { display: none; }

  .feeling { padding: 18svh 20px 24svh; }
  .feeling-copy { width: auto; }
  .motion .full .stage-bottle { --bx: 36vw; --by: 8svh; --bs: 0.5; --br: 10deg; }
  .story { font-size: 24px; }
  .then { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; padding-right: 22vw; }
  .ask { margin-top: 64px; font-size: 24px; padding-right: 12vw; }
  /* Phone: the travelling objects keep to the right trim, beside the words, not on them. */
  .feeling .prop.mid { --x: 92 !important; }
  .feeling .prop.mid + .prop.mid { --y: 96 !important; }

  .scene { grid-template-columns: 1fr; }
  .scene-pic { height: 78svh; min-height: 520px; }
  .scene-copy { padding: 72px 20px 88px; gap: 40px; }
  .question { padding-right: 18vw; font-size: 24px; }
  .peek { right: -14px; top: 40px; bottom: auto; width: 27vw; }
  .scene .prop.front { --x: 90 !important; top: 38%; width: calc(var(--w) * 1.6vw); } /* right trim, clear of the left-set title */
  .scent .prop.front { top: 45%; }

  .objects-pin { padding: 96px 20px; }
  .olist li { grid-template-columns: 1fr; gap: 16px; }
  .olist figure { grid-template-columns: 120px 1fr; gap: 20px; }
  .motion .objects-pin { padding: 13svh 20px 0; }
  .motion .objects-pin { display: flex; flex-direction: column; }
  .motion .olist { margin-top: auto; padding-bottom: 6svh; }
  .motion .olist button { font-size: 34px; line-height: 1.1; }
  .motion .olist figure { left: 20px; right: 20px; top: 20svh; bottom: auto; height: 37svh; grid-template-rows: 1fr auto; gap: 12px; }
  .motion .float { width: min(56vw, 30svh); }
  .motion .olist figcaption { font-size: 1.0625rem; }

  .scent { grid-template-columns: 1fr; }
  .scent-stage { order: -1; height: 86svh; min-height: 560px; }
  .scent-copy { padding: 72px 20px 88px; }
  .notes { grid-template-columns: 1fr; }
  .moods { font-size: 21vw; }
  .scent-bottle { height: 60%; }

  .next-pin { min-height: 640px; }
  .next-name { z-index: 5; font-size: 22vw; }
  .next-name .line { display: block; }
  .nb { top: 31svh; bottom: auto; height: 42svh; }
  .next-copy { left: 20px; right: 92px; bottom: 32px; max-width: none; }
  .next-copy p { font-size: 20px; }
  .step { bottom: 32px; right: 20px; width: 48px; height: 48px; }
  .step-prev { display: none; }
  .worlds ul { flex-direction: column; padding: 32px 20px 40px; }

  .footer { grid-template-columns: 1fr 1fr; padding: 72px 20px 40px; }
  .footer-mark { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .prop i, .float, .sub-panel, .olist figure { transition-duration: 1ms !important; }
}