/* The dark moments: hero, finder teaser, scent finder. Uses the tokens from web/css/tokens.css. */
.xp { --g: 16px; background: var(--night); color: var(--night-ink); font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
.xp *, .xp *::before, .xp *::after { box-sizing: border-box; }
.xp-mono { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; margin: 0; }
[tabindex="-1"]:focus { outline: none; }
/* Every control in the dark sections draws a ring on keyboard focus (a heading focused by script does not). */
.xp :focus-visible:not([tabindex="-1"]) { outline: 2px solid var(--night-ink); outline-offset: 3px; }
.xp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.xp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px;
  font: 500 12px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 0; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
}
.xp-btn--night { color: var(--night-ink); }
.xp-btn:hover:not(:disabled), .xp-btn:focus-visible { background: var(--night-ink); color: var(--night); }
.xp-btn:disabled { opacity: .35; cursor: default; }
.xp-btn.is-done { background: var(--night-ink); color: var(--night); }
.xp-link { background: none; border: 0; padding: 0; color: inherit; text-decoration: none; cursor: pointer; }
.xp-link:hover, .xp-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .xp { --g: 32px; } }

/* ---------- HERO ---------- */
/* One screen in every path: a gallery of posters (mount.js), and on top of it, when it can, the 3D (hero.js). */
.xp-hero { position: relative; height: 100vh; height: 100svh; }
.xp-stage { position: relative; height: 100%; overflow: hidden; contain: strict; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.xp-poster, .xp-poster img, .xp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.xp-poster { background: var(--night); }
.xp-poster img { object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.xp-poster img.is-on { opacity: 1; }
.xp-canvas { opacity: 0; transition: opacity .9s var(--ease); }
.xp-hero.is-live .xp-stage { cursor: grab; }
.xp-hero.is-dragging .xp-stage { cursor: grabbing; }
.xp-hero.is-live .xp-canvas { opacity: 1; }
.xp-hero.is-live .xp-poster { opacity: 0; transition: opacity .9s var(--ease) .1s; }
/* Back to the posters at once (a lost context, a failure): never a dark canvas over a live HUD. */
.xp-hero.is-cut .xp-canvas, .xp-hero.is-cut .xp-poster, .xp-hero.is-cut .xp-poster img { transition: none; }
/* Lite draws the scene once and has no camera passes: its grade (a vignette) is this layer. The portrait posters
   are lite renders (render.html tier=lite) under the same layer, so the hand-over to the lite 3D on a phone or
   tablet changes nothing on screen. A plain alpha layer: a blend mode over a live WebGL canvas (the old overlay
   grain) makes iOS composite the whole screen through an extra pass every frame, the last thing a phone in Low
   Power Mode can spare. */
.xp-hero { --xp-grade: radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(8,9,9,.5) 100%); }
/* With the film grain the full rung's print pass draws: a still tile of plain alpha (no blend mode, so nothing extra to
   composite), 128 px drawn at 64 CSS px so each grain is a device pixel or two on a phone. */
.xp-hero--lite.is-live .xp-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("assets/plate/grain.png") 0 0 / 64px 64px repeat, var(--xp-grade); }
@media (max-aspect-ratio: 9/10) {
  .xp-hero:not(.is-live) .xp-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--xp-grade); }
}
/* The posters rung (a software renderer, or a device the 3D could not keep smooth): the poster moves a little
   against the cursor and follows a finger, on the compositor only (mount.js sets the three variables). */
.xp-hero--posters .xp-poster img { transform: translate3d(calc(var(--xp-tx, 0) * -1.4% + var(--xp-dx, 0px)), calc(var(--xp-ty, 0) * -0.9%), 0) scale(1.04);
  transition: opacity .6s var(--ease), transform .45s var(--ease); will-change: transform; }
.xp-hero--posters.is-swiping .xp-poster img { transition: opacity .6s var(--ease), transform .06s linear; }
.xp-hud { position: absolute; inset: 0; pointer-events: none; padding: var(--g); }
.xp-hud a, .xp-hud button { pointer-events: auto; }
.xp-hud-tag { position: absolute; left: var(--g); top: var(--g); }
.xp-hud-index { position: absolute; right: calc(var(--g) - 4px); top: calc(var(--g) - 4px); white-space: pre; }
@media (max-width: 600px) { .xp-hud-index { right: auto; left: calc(var(--g) - 4px); top: calc(var(--g) + 22px); } }
.xp-hud-n { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 4px; min-width: 24px; min-height: 24px; cursor: pointer; opacity: .7; }
.xp-hud-n[aria-current] { opacity: 1; }
.xp-hud-n:hover, .xp-hud-n:focus-visible { opacity: 1; outline: 1px solid var(--night-ink); outline-offset: -1px; }
/* The name stands on the floor line, under the centred bottle (the poster's or the 3D's --xp-floor), never under anything. */
.xp-hud-foot { position: absolute; left: 0; right: 0; top: calc(var(--xp-floor, 70%) + 1.2svh); display: grid; justify-items: center;
  grid-template: "prev copy next" auto ". cta ." auto / 44px minmax(0, 1fr) 44px; column-gap: 8px; row-gap: 14px; padding: 0 var(--g);
  transition: top .6s var(--ease); }
.xp-hud-copy { grid-area: copy; text-align: center; min-width: 0; transition: opacity .18s linear, transform .18s var(--ease); }
.xp-hud-name { margin: 0; font-family: var(--font-display); font-weight: 300; font-stretch: 125%; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(30px, 5.4vw, 84px); line-height: .95; letter-spacing: .01em; text-shadow: 0 1px 24px rgba(0,0,0,.55); }
.xp-hud-meta { margin-top: 10px; opacity: .78; }
.xp-hud-cta { grid-area: cta; transition: opacity .18s linear, background-color .25s var(--ease), color .25s var(--ease); background: rgba(18,20,20,.35); }
.xp-hud-arrow { align-self: center; width: 44px; height: 44px; border: 1px solid rgba(237,235,230,.45); border-radius: 0; background: rgba(18,20,20,.25); color: var(--night-ink);
  font: 400 18px/1 var(--font-mono); cursor: pointer; transition: border-color .25s var(--ease), opacity .25s; }
.xp-hud-prev { grid-area: prev; } .xp-hud-next { grid-area: next; }
.xp-hud-arrow:hover:not([aria-disabled="true"]), .xp-hud-arrow:focus-visible { border-color: var(--night-ink); outline: 1px solid var(--night-ink); outline-offset: 2px; }
.xp-hud-arrow[aria-disabled="true"] { opacity: .45; cursor: default; }
.is-out { opacity: 0; }
.xp-hud-copy.is-out { transform: translateY(6px); }
@media (max-aspect-ratio: 9/10) { .xp-hud-foot { top: calc(var(--xp-floor, 60%) + 1.2svh); } }
@media (min-width: 768px) {
  .xp-hud-foot { grid-template: "prev copy next" auto ". cta ." auto / 52px auto 52px; justify-content: center; column-gap: clamp(24px, 4vw, 64px); }
}
@media (prefers-reduced-motion: reduce) { .xp-poster img { transition-duration: .25s; } .xp-hud-foot { transition: none; } }

/* ---------- FINDER TEASER ---------- */
.xp-teaser { border-top: 1px solid var(--night-rule); border-bottom: 1px solid var(--night-rule); overflow: hidden; }
.xp-teaser-link { position: relative; display: grid; color: inherit; text-decoration: none; padding: var(--g);
  grid-template: "tag" auto "title" auto "bottle" auto "meta" auto "cta" auto / 1fr; gap: 16px; min-height: 92svh; align-content: space-between; }
.xp-teaser-tag { grid-area: tag; }
.xp-teaser-title { grid-area: title; font-family: var(--font-display); font-stretch: 125%; font-weight: 300; text-transform: uppercase;
  font-size: clamp(44px, 13.4vw, 200px); line-height: .9; letter-spacing: -.01em; position: relative; z-index: 1; }
.xp-teaser-bottle { grid-area: bottle; justify-self: center; width: min(70vw, 420px); aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.2s var(--ease); }
.xp-teaser-meta { grid-area: meta; border-top: 1px solid var(--night-rule); padding-top: 12px; }
.xp-teaser-cta { grid-area: cta; justify-self: start; }
.xp-teaser-link:hover .xp-teaser-bottle { transform: translateY(-8px) scale(1.02); }
.xp-teaser-link:hover .xp-teaser-cta { background: var(--night-ink); color: var(--night); }
@media (min-width: 900px) {
  .xp-teaser-link { min-height: 0; height: min(86vh, 820px); grid-template: "tag bottle" auto "title bottle" 1fr "meta bottle" auto "cta bottle" auto / 1fr minmax(320px, 36%); column-gap: var(--g); }
  .xp-teaser-title { align-self: center; }
  .xp-teaser-bottle { width: 100%; height: 100%; align-self: stretch; }
}
.xp-wipe { position: fixed; z-index: 2147483000; border-radius: 50%; background: var(--night); transform: scale(0); transition: transform .62s cubic-bezier(.7,0,.2,1); pointer-events: none; }
.xp-wipe.is-on { transform: scale(1); }

/* ---------- SCENT FINDER ---------- */
/* One fixed stage behind the page (canvas, or the plain photograph layer), a shade for legibility, and the
   steps on top. Steps lay out empty .xp-anchor boxes; finder.js fits a bottle into each. */
html:has(.xp-finder-page), .xp-finder-page { background: var(--night); }
.xp-finder-page { margin: 0; min-height: 100svh; }
.xp-finder { position: relative; min-height: 100svh; overflow-x: clip; --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.6,0,.85,.35); }
.xp-gl, .xp-mood, .xp-shade { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xp-gl { display: block; opacity: 0; transition: opacity 1s var(--ease); }
.xp-finder.is-live .xp-gl { opacity: 1; }
.xp-mood { overflow: hidden; background: var(--night); }
.xp-mood img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0; filter: saturate(.8) brightness(.5);
  transition: opacity .9s var(--ease); }
.xp-mood img.is-on { opacity: 1; }
.xp-finder.is-live .xp-mood { visibility: hidden; transition: visibility 0s 1s; }
.xp-shade { background: linear-gradient(180deg, rgba(18,20,20,.72) 0, rgba(18,20,20,0) 26%, rgba(18,20,20,0) 46%, rgba(18,20,20,.78) 78%, rgba(18,20,20,.9) 100%); }
.xp-finder[data-step="intro"] .xp-shade { background: linear-gradient(180deg, rgba(18,20,20,.5) 0, rgba(18,20,20,0) 20%, rgba(18,20,20,0) 55%, rgba(18,20,20,.85) 100%); }
/* The result's first screen is the three bottles: the shade stays light over them, and the list below brings its own ground. */
.xp-finder[data-step="result"] .xp-shade { background: linear-gradient(180deg, rgba(18,20,20,.55) 0, rgba(18,20,20,.12) 30%, rgba(18,20,20,.2) 80%, rgba(18,20,20,.5) 100%); }
.xp-finder.is-live .xp-res-list, .xp-finder.is-live .xp-layer, .xp-finder.is-live .xp-result-foot { background: rgba(18,20,20,.9); box-shadow: 0 0 0 100vmax rgba(18,20,20,.9); clip-path: inset(0 -100vmax); }

.xp-finder-bar { position: fixed; z-index: 3; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px var(--g); border-bottom: 1px solid rgba(237,235,230,.14); background: linear-gradient(rgba(18,20,20,.82), rgba(18,20,20,.55));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.xp-progress { display: flex; gap: 10px; white-space: pre; }
.xp-progress[hidden] { display: flex; visibility: hidden; }
.xp-progress-n { font: inherit; letter-spacing: inherit; color: var(--night-ink); background: none; border: 0; padding: 4px 0; cursor: pointer; opacity: .55; }
.xp-progress-n.is-on { opacity: 1; }
.xp-progress-n[aria-disabled="true"] { opacity: .25; cursor: default; }
.xp-sound { min-width: 9ch; text-align: right; }
.xp-bar-end { display: flex; gap: 14px; align-items: center; }
.xp-finder-bar > *, .xp-bar-end > * { white-space: nowrap; }
.xp-finder-bar .xp-link { padding: 4px 0; min-height: 24px; }
/* A phone's bar holds the way back, the five numbers, the basket and the sound on one line. */
@media (max-width: 599px) { .xp-finder-bar { gap: 8px; } .xp-finder-bar .xp-mono { font-size: 11px; } .xp-progress { gap: 6px; } .xp-bar-end { gap: 10px; } .xp-sound { min-width: 0; } }
@media (max-width: 379px) { .xp-finder-bar .xp-mono { letter-spacing: 0; } .xp-progress { gap: 4px; } }
/* /finder also loads shop.css (for the basket drawer): keep the finder's own scroll and its oversized photographs. */
html:has(.xp-finder-page), .xp-finder-page { scroll-behavior: auto; }
.xp-mood img { max-width: none; }

.xp-steps { position: relative; z-index: 1; min-height: 100svh; touch-action: pan-y; }
.xp-step { min-height: 100svh; padding: calc(56px + var(--g)) var(--g) var(--g); display: grid; gap: 14px; grid-template-rows: auto minmax(150px, 1fr) auto; }
.xp-anchor { position: relative; min-height: 0; }
/* The name's own box: the huge type is drawn into it on the stage, so it never sits behind a bottle. */
.xp-word { position: relative; min-height: 0; }
.xp-step--q { grid-template-rows: auto 9svh minmax(150px, 1fr) auto; }
.xp-finder--still .xp-word { display: none; }
@media (max-width: 899px) {
  .xp-finder--still .xp-intro { grid-template-rows: auto 1fr auto; }
  .xp-finder--still .xp-step--q { grid-template-rows: auto minmax(150px, 1fr) auto; }
}
.xp-still { display: none; }
.xp-finder--still .xp-still { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* The result without the stage is its own layout: three stills, each at least 40% of the screen high, with the
   names under them, and no block left empty for the stage. */
.xp-finder--still .xp-res-top { min-height: 0; grid-template-rows: auto auto; }
.xp-finder--still .xp-res-word { display: none; }
.xp-finder--still .xp-res-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.xp-finder--still .xp-res-col { order: 0; height: auto; }
.xp-finder--still .xp-res-col .xp-anchor { height: 42svh; margin: 0; }
.xp-finder--still .xp-res-cap { display: block; }
@media (max-width: 599px) {
  .xp-finder--still .xp-res-row { grid-template-columns: 1fr 1fr; }
  .xp-finder--still .xp-res-col--1 { grid-column: 1 / -1; }
  .xp-finder--still .xp-res-col--1 .xp-anchor { height: 44svh; }
  .xp-finder--still .xp-res-col--2 .xp-anchor, .xp-finder--still .xp-res-col--3 .xp-anchor { height: 40svh; }
}

/* Type */
.xp-q-label { opacity: .8; }
.xp-q-title, .xp-intro-title { font-family: var(--font-display); font-stretch: 125%; font-weight: 300; text-transform: uppercase; margin: 0;
  font-size: clamp(30px, 8.2vw, 88px); line-height: .94; letter-spacing: -.01em; outline: none; }
.xp-q-head { display: flex; flex-direction: column; gap: 10px; }
.xp-q-hint { opacity: .6; }
.xp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.xp-w > span { display: inline-block; }

/* Enter: lines rise one after another. Leave: the whole screen lifts and fades. ~700 ms together. */
.is-entering .xp-w > span { animation: xp-up .58s var(--ease-out) both; animation-delay: calc(.1s + min(var(--d), 8) * .035s); }
.is-entering .xp-rv { animation: xp-in .58s var(--ease-out) both; animation-delay: calc(.1s + min(var(--d), 8) * .035s); }
.xp-step.is-leaving { position: absolute; left: 0; right: 0; pointer-events: none; animation: xp-leave .3s var(--ease-in) both; }
@keyframes xp-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes xp-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes xp-leave { to { opacity: 0; transform: translateY(-28px); } }

/* Intro */
.xp-intro { grid-template-rows: auto 11svh 1fr auto; }
.xp-intro-foot { display: flex; flex-direction: column; gap: 14px; }
.xp-intro-title { font-size: clamp(44px, 12.6vw, 168px); line-height: .9; }
.xp-intro-copy { max-width: 32ch; font-size: 16px; line-height: 1.45; margin: 0; opacity: .85; }
.xp-intro-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.xp-intro-act .xp-mono { opacity: .6; font-size: 11px; }
.xp-btn--solid { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); min-width: 132px; }
.xp-btn--solid:hover:not(:disabled), .xp-btn--solid:focus-visible { background: transparent; color: var(--night-ink); }

/* Options: one list for single and multiple choice */
.xp-q-body { display: flex; flex-direction: column; gap: 12px; }
.xp-opts { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(237,235,230,.2); }
.xp-opts li { border-bottom: 1px solid rgba(237,235,230,.2); }
.xp-opt { width: 100%; display: flex; align-items: center; gap: 14px; padding: 15px 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; position: relative; }
.xp-opt-label { flex: 1; font-family: var(--font-display); font-stretch: 112%; font-weight: 400; text-transform: uppercase; font-size: clamp(19px, 5vw, 40px); line-height: 1; transition: transform .45s var(--ease); }
.xp-opt-n { opacity: .55; min-width: 4.2ch; }
.xp-opt-sw { width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 0 1px rgba(237,235,230,.35); transform: scale(.6); opacity: .5; transition: transform .4s var(--ease), opacity .4s; }
.xp-opt::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--night-ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.xp-opt:hover .xp-opt-label, .xp-opt:focus-visible .xp-opt-label { transform: translateX(10px); }
.xp-opt:focus-visible { outline-offset: -2px; }
.xp-opt.is-on::after, .xp-opt:hover::after { transform: scaleX(1); }
.xp-opt.is-on .xp-opt-sw, .xp-opt:hover .xp-opt-sw { transform: none; opacity: 1; }
.xp-opt.is-on .xp-opt-n::before { content: "[ "; } .xp-opt.is-on .xp-opt-n::after { content: " ]"; }
.xp-opt.is-on .xp-opt-n { opacity: 1; }
.xp-step-foot { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.xp-pick-count { opacity: .7; }

/* Name */
.xp-type-input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--night-ink); color: var(--night-ink); border-radius: 0;
  font-family: var(--font-display); font-stretch: 112%; font-weight: 300; text-transform: uppercase; font-size: clamp(24px, 6vw, 56px); padding: 6px 0 10px; outline: none; }
.xp-type-input::placeholder { color: var(--night-ink); opacity: .35; }
.xp-suggest { list-style: none; margin: 0; padding: 0; max-height: 30svh; overflow: auto; overscroll-behavior: contain; }
.xp-suggest li { border-bottom: 1px solid rgba(237,235,230,.16); }
.xp-sug { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 0; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.xp-sug::before { content: ""; width: 8px; height: 8px; background: var(--c); flex: none; opacity: .8; }
.xp-sug-name { flex: 1; font-family: var(--font-display); font-stretch: 112%; text-transform: uppercase; font-size: 17px; }
.xp-sug-brand { opacity: .55; }
.xp-sug.is-on .xp-sug-name::before { content: "[ "; font-family: var(--font-mono); } .xp-sug.is-on .xp-sug-name::after { content: " ]"; font-family: var(--font-mono); }
.xp-sug:hover .xp-sug-name { text-decoration: underline; text-underline-offset: 4px; }
.xp-sug-none { padding: 14px 0; opacity: .6; }

/* Result */
.xp-result { display: flex; flex-direction: column; gap: 0; padding-bottom: calc(var(--g) * 2); }
.xp-res-top { min-height: 0; display: grid; grid-template-rows: auto 12svh 44svh; gap: 10px; }
.xp-res-row { display: grid; grid-template-columns: 1fr 1.8fr 1fr; gap: 0; min-height: 0; align-items: end; }
.xp-res-col { display: grid; grid-template-rows: 1fr auto; gap: 10px; min-height: 0; height: 100%; }
.xp-res-col--1 { order: 2; } .xp-res-col--2 { order: 1; } .xp-res-col--3 { order: 3; }
.xp-res-col .xp-anchor { min-height: 0; }
.xp-res-col--2 .xp-anchor, .xp-res-col--3 .xp-anchor { margin-top: 18%; }
.xp-res-cap { text-align: center; font-size: 11px; min-height: calc(3em + 11px); border-top: 1px solid rgba(237,235,230,.25); padding-top: 10px; }
.xp-res-list { display: grid; grid-template-columns: 1fr; }
.xp-res-item, .xp-layer { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border-top: 1px solid rgba(237,235,230,.2); padding: 22px 0 28px; }
.xp-res-rank { opacity: .65; }
.xp-res-name { font-family: var(--font-display); font-stretch: 125%; font-weight: 300; text-transform: uppercase; margin: 0; line-height: .92; font-size: clamp(36px, 10vw, 84px); letter-spacing: -.01em; }
.xp-res-meta { opacity: .75; }
.xp-layer-how { opacity: 1; }
.xp-notes { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; margin: 4px 0 6px; width: 100%; border-top: 1px solid rgba(237,235,230,.2); }
.xp-notes dt, .xp-notes dd { padding: 9px 0; border-bottom: 1px solid rgba(237,235,230,.2); margin: 0; }
.xp-notes dt { opacity: .6; }
.xp-notes dd { text-transform: none; letter-spacing: .02em; }
.xp-layer { display: grid; grid-template-columns: 34% 1fr; gap: 16px; align-items: stretch; }
.xp-layer-art { position: relative; min-height: 260px; }
.xp-layer-art .xp-anchor { position: absolute; inset: 0; }
.xp-layer-body { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.xp-layer .xp-res-name { font-size: clamp(28px, 7vw, 64px); }
.xp-result-foot { border-top: 1px solid rgba(237,235,230,.2); padding-top: 16px; }
/* On a phone the three bottles stack: the match across the width, the other two side by side under it, each
   anchor tall enough that the bottle, not the still life, sets its size (finder.js stands them alone here). */
@media (max-width: 599px) {
  .xp-res-top { grid-template-rows: auto 10svh auto; }
  .xp-res-row { grid-template-columns: 1fr 1fr; row-gap: 14px; align-items: stretch; }
  .xp-res-col { height: auto; }
  .xp-res-col--1 { order: 0; grid-column: 1 / -1; }
  .xp-res-col--2 { order: 1; } .xp-res-col--3 { order: 2; }
  .xp-res-col .xp-anchor { height: 40svh; }
  .xp-res-col--2 .xp-anchor, .xp-res-col--3 .xp-anchor { height: 30svh; margin-top: 0; }
  .xp-res-cap { min-height: 0; }
}

@media (min-width: 900px) {
  .xp-step { padding-top: calc(64px + var(--g)); }
  .xp-step--q { grid-template: "head word" 15vh "head anchor" 1fr "body anchor" auto / minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); }
  .xp-step--q .xp-q-head { grid-area: head; }
  .xp-step--q .xp-word { grid-area: word; }
  .xp-step--q .xp-anchor { grid-area: anchor; }
  .xp-step--q .xp-q-body { grid-area: body; align-self: end; }
  .xp-intro { grid-template: "label label" auto "word word" 15vh "anchor anchor" 1fr "foot foot" auto / 1fr 1fr; }
  .xp-intro .xp-word { grid-area: word; }
  .xp-intro .xp-anchor { grid-area: anchor; }
  .xp-intro-foot { grid-area: foot; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: var(--g); }
  .xp-intro-title { grid-row: span 2; font-size: clamp(56px, 7.4vw, 132px); }
  .xp-intro-copy { justify-self: end; text-align: right; }
  .xp-intro-act { justify-self: end; flex-direction: row-reverse; }
  .xp-step-foot { justify-content: flex-end; }
  .xp-shade { background: linear-gradient(90deg, rgba(18,20,20,.82) 0, rgba(18,20,20,.45) 42%, rgba(18,20,20,0) 62%), linear-gradient(180deg, rgba(18,20,20,.55) 0, rgba(18,20,20,0) 18%); }
  .xp-finder[data-step="intro"] .xp-shade { background: linear-gradient(180deg, rgba(18,20,20,.5) 0, rgba(18,20,20,0) 20%, rgba(18,20,20,0) 60%, rgba(18,20,20,.8) 100%); }
  .xp-res-top { min-height: 0; grid-template-rows: auto 15vh 52vh; }
  .xp-res-word { grid-row: 2; grid-column: 1; }
  .xp-res-row { grid-row: 3; grid-column: 1; }
  .xp-step--q .xp-anchor { margin: 1vh 0 5vh; }
  .xp-res-row { gap: var(--g); grid-template-columns: repeat(3, 1fr); }
  .xp-res-col--1, .xp-res-col--2, .xp-res-col--3 { order: 0; }
  .xp-res-col .xp-anchor { min-height: 0; height: 52vh; margin: 0; }
  .xp-res-cap { display: none; }
  .xp-res-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--g); }
  .xp-res-name { font-size: clamp(34px, 3.6vw, 64px); }
  .xp-layer { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--g); }
  .xp-layer-art { min-height: 380px; }
  .xp-layer-body .xp-notes { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .is-entering .xp-w > span, .is-entering .xp-rv, .xp-step.is-leaving { animation: none; }
  .xp-mood img { transition-duration: .4s; }
}