/** Shopify CDN: Minification failed

Line 559:0 Unexpected "}"

**/
/* Reverie Night. The shop in the language of the Reverie posters: night photography,
   a chrome wordmark, thin HUD frames and small tracked labels.
   One loud moment: the headlights igniting in the opening. Mobile first. */

:root {
  color-scheme: dark;
  --asphalt: #050507;    /* the photos' own black */
  --tarmac: #111216;     /* raised surfaces */
  --kerb: #24262b;
  --chrome: #a9aeb5;     /* secondary text, from the wordmark */
  --dim: #767c84;        /* small print */
  --headlight: #eef1f5;  /* primary text */
  --xenon: #b9d3ff;      /* the one accent: LED headlight blue-white */
  --brake: #ff9e8f;      /* errors */
  --line: rgb(255 255 255 / .09);
  --line-strong: rgb(255 255 255 / .18);
  --hud: rgb(238 241 245 / .55);

  --display: "Michroma", "Eurostile", "Microgramma", "Arial Black", sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: 20px;
  --max: 1280px;
  --inline: max(var(--gutter), calc((100% - var(--max)) / 2));
  --section-space: clamp(72px, 10vw, 136px);
  --header-h: 64px;
  --radius: 8px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 700px) { :root { --gutter: 32px; } }
@media (min-width: 1000px) { :root { --gutter: 48px; --header-h: 76px; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); background: var(--asphalt); }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--asphalt);
  color: var(--headlight);
  font: 400 16px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
main { flex: 1; outline: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; text-wrap: balance; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgb(185 211 255 / .32); }
:focus-visible { outline: 2px solid var(--xenon); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px; left: 8px;
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--headlight);
  color: var(--asphalt);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -200%;
}
.skip-link:focus { translate: 0 0; }

/* ---------- Type ---------- */

.display-1 {
  font: 400 clamp(1.6rem, 1.05rem + 2.5vw, 3.1rem)/1.16 var(--display);
  letter-spacing: -.02em;
}
.display-2 {
  font: 400 clamp(1.35rem, 1rem + 1.6vw, 2.3rem)/1.2 var(--display);
  letter-spacing: -.015em;
}
.display-3 {
  font: 400 clamp(1.05rem, .9rem + .8vw, 1.5rem)/1.3 var(--display);
  letter-spacing: -.01em;
}
/* The small tracked labels from the Reverie posters */
.hud-label {
  font: 400 10.5px/1.75 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hud);
}
.note { font-size: 13px; line-height: 1.55; color: var(--dim); }

.text-link {
  display: inline-block;
  color: var(--headlight);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(185 211 255 / .5);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color .2s, text-decoration-color .2s;
}
.text-link:hover { color: var(--xenon); text-decoration-color: var(--xenon); }
.text-link--quiet { color: var(--chrome); font-weight: 400; font-size: 14px; text-decoration-color: var(--line-strong); }

.rte { color: var(--chrome); max-width: 40em; text-wrap: pretty; }
.rte > * + * { margin-top: 1em; }
.rte h2, .rte h3, .rte h4 { margin-top: 1.8em; color: var(--headlight); font: 600 1.15rem/1.35 var(--text); }
.rte h2 { font-size: 1.3rem; }
.rte strong { color: var(--headlight); font-weight: 600; }
.rte a { color: var(--headlight); text-decoration-color: var(--xenon); text-underline-offset: 4px; }
.rte a:hover { color: var(--xenon); }
.rte ul, .rte ol { padding-left: 1.25em; }
.rte li + li { margin-top: .4em; }
.rte table { width: 100%; border-collapse: collapse; font-size: 15px; }
.rte th, .rte td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }

/* ---------- HUD frame: four corner brackets ---------- */

.hud-frame {
  --c: var(--hud);
  --s: 16px;
  --w: 1px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) left bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--s);
  background-repeat: no-repeat;
}

/* ---------- Wordmark ---------- */

.wordmark { width: 100%; height: auto; aspect-ratio: 1023 / 163; overflow: visible; }

/* ---------- Buttons and fields ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 600 15px/1.2 var(--text);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s, transform .1s;
}
.button:active { transform: scale(.985); }
.button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.button--light { background: var(--headlight); color: #0a0b0d; }
.button--light:hover:not([disabled]) { background: #fff; box-shadow: 0 0 36px rgb(185 211 255 / .32); }
.button--ghost { background: rgb(5 5 7 / .35); border-color: var(--line-strong); color: var(--headlight); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.button--ghost:hover { border-color: var(--xenon); }
.button--wide { width: 100%; }
.button.is-busy { opacity: .75; cursor: progress; }

.field { display: grid; gap: 8px; }
.field + .field { margin-top: 18px; }
.field-label { display: block; font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chrome); }
.input, .select {
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(17 18 22 / .85);
  color: var(--headlight);
  font: 400 16px/1.4 var(--text); /* 16px keeps iOS from zooming in on focus */
  transition: border-color .2s, box-shadow .2s;
}
textarea.input { padding: 16px 18px; min-height: 160px; resize: vertical; }
.input::placeholder { color: #666c74; }
.input:hover, .select:hover { border-color: rgb(255 255 255 / .3); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--xenon);
  box-shadow: 0 0 0 4px rgb(185 211 255 / .14), 0 0 28px rgb(185 211 255 / .12);
}
.input[aria-invalid="true"] { border-color: var(--brake); }
.select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23a9aeb5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
}

.form-status { margin-top: 12px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--xenon); }
.form-status--error { color: var(--brake); }
.form-status ul { padding-left: 1.1em; }

.signup { margin-top: 24px; max-width: 34rem; }
.signup .field-label { margin-bottom: 8px; }
.signup-row { display: grid; gap: 10px; }
.signup .note { margin-top: 12px; }
@media (min-width: 560px) { .signup-row { grid-template-columns: minmax(0, 1fr) auto; } }

/* Quantity stepper */
.qty {
  display: inline-grid;
  grid-template-columns: 44px 44px 44px;
  align-items: center;
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(17 18 22 / .6);
}
.qty input {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}
.qty input::-webkit-inner-spin-button, .qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus-visible { outline-offset: -4px; border-radius: 6px; }
.qty-btn {
  display: grid;
  place-items: center;
  height: 100%;
  border: 0;
  background: none;
  color: var(--chrome);
  cursor: pointer;
}
.qty-btn:hover { color: var(--headlight); }
.qty-btn:focus-visible { outline-offset: -4px; border-radius: 8px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgb(5 5 7 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s, border-color .35s;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding-inline: var(--inline);
}
.brand { display: block; flex: none; padding: 8px 0; transition: opacity .35s, visibility .35s; }
.brand-wordmark { width: 128px; }
.nav { display: none; margin-left: auto; }
.nav-list { display: flex; gap: 34px; list-style: none; }
.nav-list a {
  font: 400 11px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chrome);
  text-decoration: none;
  padding: 10px 0;
  transition: color .2s;
}
.nav-list a:hover, .nav-list a[aria-current="page"] { color: var(--headlight); }
.nav-list a[aria-current="page"] { text-decoration: underline 1px var(--xenon); text-underline-offset: 8px; }

.header-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.cart-link, .menu-toggle summary {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: var(--headlight);
  cursor: pointer;
}
.cart-link:hover, .menu-toggle summary:hover { background: rgb(255 255 255 / .06); }
.cart-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--xenon);
  color: var(--asphalt);
  font: 600 11px/18px var(--text);
  text-align: center;
}
.cart-count.is-empty { display: none; }
.cart-count.is-bumped { animation: bump .5s var(--ease-out); }
@keyframes bump { 40% { scale: 1.35; } }

.menu-toggle summary { list-style: none; }
.menu-toggle summary::-webkit-details-marker { display: none; }
.menu-toggle .when-open, .menu-toggle[open] .when-closed { display: none; }
.menu-toggle[open] .when-open { display: block; }
.menu-panel {
  position: fixed;
  inset: var(--header-h) 0 auto;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 28px;
  background: var(--asphalt);
  border-block: 1px solid var(--line);
  box-shadow: 0 40px 80px rgb(0 0 0 / .7);
}
.menu-panel ul { list-style: none; }
.menu-panel li + li { border-top: 1px solid var(--line); }
.menu-panel a { display: block; padding: 18px 0; font: 400 1.05rem/1.3 var(--display); color: var(--headlight); text-decoration: none; }
.menu-panel a[aria-current="page"] { color: var(--xenon); }
@media (prefers-reduced-motion: no-preference) {
  .menu-toggle[open] .menu-panel { animation: drop .28s var(--ease-out); }
}
@keyframes drop { from { opacity: 0; translate: 0 -8px; } }

@media (min-width: 900px) {
  .brand-wordmark { width: 150px; }
  .nav { display: block; }
  .header-actions { margin-left: 12px; }
  .menu-toggle { display: none; }
}

/* On the homepage the header floats over the opening photo; the big wordmark is the logo there. */
.template-index .site-header { position: fixed; inset: 0 0 auto; }
.hero-in-view .template-index .site-header {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-in-view .template-index .brand { opacity: 0; visibility: hidden; }
/* line the header up with the opening's corner labels */
@media (min-width: 900px) { .template-index .header-inner { padding-inline: 42px; } }

/* ---------- Opening (hero) ---------- */

/* The film is the opening. On top of it only the logo, and one way into the shop. */
.hero {
  --pad: 20px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) var(--pad) calc(var(--pad) + 8px);
  background: var(--asphalt);
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
.hero-frame { position: absolute; inset: 0; transition: opacity .8s ease; }
.hero-frame picture { display: block; width: 100%; height: 100%; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; }

/* With the theme's own photo the frame keeps the photo's proportions and is sized like
   object-fit: cover, so the light flares stay on the headlights at every crop. */
.hero--ignition .hero-frame {
  --ar: .5625;
  --fx: .15;
  --fw: max(100cqw, 100cqh * var(--ar));
  --fh: max(100cqh, 100cqw / var(--ar));
  inset: auto;
  width: var(--fw);
  height: var(--fh);
  left: calc((100cqw - var(--fw)) * var(--fx));
  top: calc((100cqh - var(--fh)) * var(--fy, .5));
}
@supports not (width: 1cqw) {
  .hero--ignition .hero-frame { inset: 0; width: auto; height: auto; }
}

.hero-night { position: absolute; inset: 0; background: var(--asphalt); opacity: 0; pointer-events: none; }

/* The night film: hidden until it really plays, then it fades over the photo. While it is
   loading the photo waits in the dark, so the page never flips from one car to the other. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.video-pending .hero-frame { opacity: 0; transition: none; }
.video-on .hero-video { opacity: 1; }
.video-on .hero-frame { visibility: hidden; transition: visibility 0s .9s; }
.video-on .hero-night { visibility: hidden; } /* the film brings its own dark */
.film-sync .hero-video { transition: none; }
.film-sync .hero-frame { opacity: 0; }

.flare {
  position: absolute;
  width: 12%;
  aspect-ratio: 2.4;
  translate: -50% -50%;
  rotate: -14deg;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(222 234 255 / .7) 14%, rgb(185 211 255 / .24) 42%, rgb(185 211 255 / 0) 100%);
  mix-blend-mode: screen;
  opacity: .32;
  pointer-events: none;
}
/* headlight positions in the poster photo (shares of the frame) */
.flare-outer { left: 37%; top: 52.8%; }
.flare-inner { left: 12.3%; top: 57.2%; width: 6%; aspect-ratio: 1.4; rotate: 0deg; }

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(5 5 7 / .7) 0%, rgb(5 5 7 / .25) 24%, transparent 40%, transparent 66%, rgb(5 5 7 / .6) 88%, rgb(5 5 7 / .85) 100%);
}

.hero-lockup { grid-row: 1; justify-self: center; width: min(86vw, 960px); text-align: center; }
.hero-wordmark { filter: drop-shadow(0 6px 26px rgb(0 0 0 / .65)); }
.hero-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(12px, 2vw, 22px);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--chrome);
}
.hero-tagline::before, .hero-tagline::after { content: ""; width: clamp(24px, 8vw, 120px); height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.hero-tagline::after { scale: -1 1; }

.hero-actions { grid-row: 3; display: flex; gap: 8px; }
.hero-shop { flex: 1; justify-content: space-between; gap: 18px; padding: 0 22px; }
.hero-shop-price { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: #3b3f46; }
.hero-video-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgb(5 5 7 / .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--headlight);
  cursor: pointer;
  transition: border-color .2s ease;
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { border-color: var(--xenon); }
/* pause: two bars; play: a triangle */
.hero-video-icon { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.hero-video-toggle.is-paused .hero-video-icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
  translate: 2px 0;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.ignited) .hero--ignition .hero-night { animation: night-lifts 2.6s cubic-bezier(.6, 0, .3, 1) both; }
  html:not(.ignited) .hero--ignition .flare { animation: drl-on 2.8s linear both; }
  /* the chrome logo strikes, drops and comes on with the running lights, never brighter than it rests */
  html:not(.ignited) .hero--ignition .hero-wordmark { animation: lit 1.3s linear both; }
  html:not(.ignited) .hero--ignition .wordmark-glint { animation: glint 1.4s 1.95s cubic-bezier(.5, 0, .3, 1) both; }
  html:not(.ignited) .hero--ignition .hero-tagline { animation: arrive .9s 1.9s var(--ease-out) both; }
  html:not(.ignited) .hero--ignition .hero-actions { animation: arrive 1s 2.2s var(--ease-out) both; }
  /* waiting for the film: everything holds its first frame */
  .video-pending :is(.hero-night, .flare, .hero-wordmark, .wordmark-glint, .hero-tagline, .hero-actions) { animation-play-state: paused; }
  .video-pending .hero-wordmark { opacity: 0; }
  /* with the film playing, the logo follows the film's own frames (set from the hero script), not a clock of its own */
  .film-sync .hero-wordmark, html:not(.ignited) .hero--ignition.film-sync .hero-wordmark { animation: none; }
}
@keyframes night-lifts { 0%, 30% { opacity: .97; } 100% { opacity: 0; } }
/* The ignition, frame by frame at 30 fps: a faint glow, a strike, a drop, a second strike, dark, then on.
   The same table drives the headlights in the film and the logo on the page (see sections/hero.liquid). */
@keyframes drl-on {
  0%, 13.02% { opacity: 0; scale: .9; }
  13.10%, 14.21% { opacity: 0.11; scale: 1.00; }
  14.29%, 15.40% { opacity: 0.52; scale: 1.02; }
  15.48%, 16.60% { opacity: 0.43; scale: 1.01; }
  16.67%, 17.79% { opacity: 0.07; scale: 1.00; }
  17.86%, 18.98% { opacity: 0.02; scale: 1.00; }
  19.05%, 20.17% { opacity: 0.38; scale: 1.01; }
  20.24%, 21.36% { opacity: 0.10; scale: 1.00; }
  21.43%, 22.55% { opacity: 0.00; scale: 1.00; }
  22.62%, 23.74% { opacity: 0.00; scale: 1.00; }
  23.81%, 24.93% { opacity: 0.81; scale: 1.02; }
  25.00%, 26.12% { opacity: 0.79; scale: 1.02; }
  26.19% { opacity: 0.75; scale: 1.01; }
  33.33% { opacity: 0.60; scale: 1.01; }
  40.48% { opacity: 0.50; scale: 1.00; }
  47.62% { opacity: 0.44; scale: 1.00; }
  54.76% { opacity: 0.40; scale: 1.00; }
  61.90% { opacity: 0.37; scale: 1.00; }
  69.05% { opacity: 0.35; scale: 1.00; }
  76.19% { opacity: 0.34; scale: 1.00; }
  83.33% { opacity: 0.33; scale: 1.00; }
  90.48% { opacity: 0.33; scale: 1.00; }
  97.62% { opacity: 0.33; scale: 1.00; }
  100% { opacity: .32; scale: 1; }
}
@keyframes hud-in { from { opacity: 0; scale: 1.03; } }
@keyframes lit {
  0%, 28.05% { opacity: 0; }
  28.21%, 30.62% { opacity: 0.17; }
  30.77%, 33.18% { opacity: 0.68; }
  33.33%, 35.74% { opacity: 0.57; }
  35.90%, 38.31% { opacity: 0.09; }
  38.46%, 40.87% { opacity: 0.03; }
  41.03%, 43.44% { opacity: 0.52; }
  43.59%, 46.00% { opacity: 0.14; }
  46.15%, 48.56% { opacity: 0.00; }
  48.72%, 51.13% { opacity: 0.00; }
  51.28%, 53.69% { opacity: 0.93; }
  53.85%, 56.26% { opacity: 0.93; }
  61.54% { opacity: 0.94; }
  71.79% { opacity: 0.97; }
  82.05% { opacity: 0.99; }
  92.31% { opacity: 1.00; }
  100% { opacity: 1; }
}
}
@keyframes glint { from { transform: translateX(0); } to { transform: translateX(1700px); } }
@keyframes arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes fade { from { opacity: 0; } }

@media (min-width: 600px) {
  .hero { --pad: 24px; }
  .hero-tagline { font-size: 11px; }
  .hero-actions { justify-self: center; width: min(100%, 460px); }
}

/* Desktop: logo top left in the dark, the way in bottom right, the car between them. */
@media (min-width: 900px) and (min-aspect-ratio: 13/10) {
  .hero {
    --pad: 28px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: calc(var(--header-h) + 56px) calc(var(--pad) + clamp(28px, 3.4vw, 64px)) calc(var(--pad) + 30px);
  }
  .hero--ignition .hero-frame { --ar: 1.6014; --fx: .25; --fy: .55; }
  .flare-outer { left: 37%; top: 66.5%; width: 12%; aspect-ratio: 2.4; rotate: -14deg; }
  .flare-inner { left: 12.2%; top: 79%; width: 6%; aspect-ratio: 1.4; rotate: 0deg; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgb(5 5 7 / .65) 0%, transparent 18%),
      radial-gradient(50% 42% at 20% 22%, rgb(5 5 7 / .55) 0%, transparent 70%),
      radial-gradient(40% 36% at 92% 96%, rgb(5 5 7 / .7) 0%, transparent 75%);
  }
  .hero-lockup { grid-column: 1; grid-row: 1; justify-self: start; width: min(40vw, 820px); text-align: left; }
  .hero-wordmark { width: 100%; }
  .hero-tagline { justify-content: flex-start; margin-top: clamp(16px, 1.6vw, 26px); font-size: 11.5px; }
  .hero-tagline::before { display: none; }
  .hero-tagline::after { scale: 1 1; width: clamp(40px, 6vw, 110px); background: linear-gradient(90deg, var(--line-strong), transparent); }
  .hero-actions { grid-column: 2; grid-row: 3; justify-self: end; width: auto; }
  .hero-shop { flex: none; padding: 0 26px; }
}

/* very wide screens: show more of the car's front and the ground */
@media (min-width: 900px) and (min-aspect-ratio: 18/10) {
  .hero--ignition .hero-frame { --fy: .74; }
}

/* ---------- Shared section frame ---------- */

.feature, .highlights, .steps, .gallery, .story, .newsletter,
.product, .cart, .listing, .page {
  padding: var(--section-space) var(--inline);
}
.section-head { display: grid; gap: 14px; }
.steps-head, .gallery-head, .newsletter-head { display: grid; gap: 12px; }

/* ---------- Product drop ---------- */

.feature { display: grid; gap: 48px; }
.feature-media { padding: 10px; }
.feature-media, .scan-stage { perspective: 1400px; }
/* on the product page the photo fills its frame: a touch of extra size keeps the edges covered while it tilts */
.scan-stage .feature-photo { scale: 1.035; }
.feature-photo {
  position: relative;
  container-type: inline-size;
  transform: rotateY(calc(var(--mx, 0) * 5deg)) rotateX(calc(var(--my, 0) * -5deg));
  transition: transform .7s var(--ease-out);
}
.feature-photo img { width: 100%; }
.feature-photo > .hud-frame { inset: -10px; translate: calc(var(--mx, 0) * -7px) calc(var(--my, 0) * -7px); transition: translate .7s var(--ease-out); }
/* soft glare that follows the pointer */
.feature-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at calc(50% + var(--mx, 0) * 50%) calc(50% + var(--my, 0) * 50%), rgb(220 232 255 / .16), transparent 46%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.feature-media:hover .feature-photo::after { opacity: 1; }

/* Callouts: a point on the bottle, a reticle around it, a leader line and a label.
   The callouts float a little above the photo (they move further than the photo on tilt). */
.callouts {
  position: absolute;
  inset: 0;
  z-index: 1;
  list-style: none;
  translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 14px);
  transition: translate .7s var(--ease-out);
}
.callout { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transition: opacity .3s; }
.callout-point { position: absolute; inset: 0; }
.callout-point::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border: 1.5px solid var(--xenon);
  border-radius: 50%;
  background: rgb(5 5 7 / .45);
  box-shadow: 0 0 14px rgb(185 211 255 / .7);
}
.callout-ring {
  position: absolute;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border: 1px solid var(--xenon);
  border-radius: 50%;
  opacity: 0;
}
.callout-reticle {
  --c: var(--xenon);
  --s: 5px;
  --w: 1.5px;
  position: absolute;
  width: 23px;
  height: 23px;
  translate: -50% -50%;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right top / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right top / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) left bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--s),
    linear-gradient(var(--c) 0 0) right bottom / var(--s) var(--w),
    linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--s);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 4px rgb(185 211 255 / .8));
}
.callout-line {
  position: absolute;
  top: 0;
  height: 1px;
  width: calc(var(--len) * 1cqw - 13px);
  background: rgb(238 241 245 / .75);
  box-shadow: 0 0 6px rgb(0 0 0 / .6);
  transition: background-color .3s;
}
.callout--left .callout-line { right: 13px; transform-origin: right; }
.callout--right .callout-line { left: 13px; transform-origin: left; }
.callout-label {
  position: absolute;
  top: 0;
  translate: 0 -50%;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.6;
  color: var(--headlight);
  text-shadow: 0 1px 10px rgb(0 0 0 / .9), 0 0 2px rgb(0 0 0 / .8);
  transition: color .3s;
}
.callout--left .callout-label { right: calc(var(--len) * 1cqw + 8px); text-align: right; }
.callout--right .callout-label { left: calc(var(--len) * 1cqw + 8px); }
/* pointing at one callout brings it forward */
.callouts:has(.callout:hover) .callout:not(:hover) { opacity: .4; }
.callout:hover .callout-line { background: var(--xenon); }
.callout:hover .callout-label { color: var(--xenon); }

/* the scanner that runs down the photo once and locks onto each callout as it passes */
.scanline {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(214 228 255 / .95) 20%, #fff 50%, rgb(214 228 255 / .95) 80%, transparent);
  box-shadow: 0 0 18px 2px rgb(185 211 255 / .6);
  opacity: 0;
  pointer-events: none;
}
.scanline::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: linear-gradient(180deg, transparent, rgb(185 211 255 / .14));
}

.feature-label { color: var(--xenon); }
.feature-copy h2 { margin-top: 10px; }
.feature-copy h2 a { text-decoration: none; }
.feature-copy h2 a:hover { color: var(--xenon); }
.feature-lede { margin-top: 16px; max-width: 30em; color: var(--chrome); font-size: 17px; }
.spec { margin-top: 28px; border-top: 1px solid var(--line); }
.spec-row { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec dt { font-size: 10px; }
.spec dd { font-size: 15px; color: var(--headlight); }
.feature-copy .price { margin-top: 28px; }
.feature-copy .product-form { margin-top: 16px; max-width: 30rem; }
.feature-copy .text-link { margin-top: 24px; }
@media (min-width: 600px) {
  .callout-label { font-size: 10.5px; }
}
@media (min-width: 1000px) {
  .feature { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(56px, 7vw, 120px); align-items: center; }
}

/* ---------- Price ---------- */

.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.price-now { font: 600 1.4rem/1.2 var(--text); color: var(--headlight); }
.price-was { color: var(--dim); }
.price--sale .price-now { color: var(--xenon); }
.price-note { font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

/* ---------- Product form ---------- */

.product-form .field-label { margin-bottom: 8px; }
.product-form .select { margin-bottom: 14px; }
.buy-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.quick-checkout { margin-top: 10px; }
.quick-checkout .shopify-payment-button__button { border-radius: var(--radius); min-height: 54px; overflow: hidden; }
.quick-checkout .shopify-payment-button__more-options { color: var(--chrome); }
.cart-added { margin-top: 12px; font-size: 14px; color: var(--xenon); }
.cart-added a { color: var(--headlight); text-underline-offset: 4px; }

/* ---------- Highlights (optional section): a spec sheet ---------- */

.highlights { display: grid; gap: 28px; border-top: 1px solid var(--line); }
.highlight { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); }
.highlight:last-child { border-bottom: 1px solid var(--line); }
.highlight dt { font: 400 1rem/1.35 var(--display); letter-spacing: -.01em; }
.highlight dd { color: var(--chrome); max-width: 34em; }
@media (min-width: 700px) {
  .highlight { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: baseline; }
}

/* ---------- Steps ---------- */

.steps { border-top: 1px solid var(--line); }
.steps-text { max-width: 32em; color: var(--chrome); }
.step-list { display: grid; margin-top: 44px; list-style: none; border-top: 1px solid var(--line-strong); }
.step { padding: 24px 0 30px; border-bottom: 1px solid var(--line); }
.step-count { color: var(--xenon); }
.step h3 { margin-top: 18px; font: 400 1.1rem/1.3 var(--display); letter-spacing: -.01em; }
.step p:last-child { margin-top: 10px; color: var(--chrome); max-width: 28em; }
@media (min-width: 900px) {
  .step-list { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .step { padding: 28px 32px 40px; border-bottom: 0; }
  .step:first-child { padding-left: 0; }
  .step + .step { border-left: 1px solid var(--line); }
  .step h3 { margin-top: 56px; font-size: 1.25rem; }
}

/* ---------- Gallery ---------- */

.gallery { padding-inline: 0; border-top: 1px solid var(--line); }
.gallery-head { padding-inline: var(--inline); }
.gallery-head p:last-child { max-width: 32em; color: var(--chrome); }
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(76vw, 420px);
  gap: 14px;
  margin-top: 40px;
  padding: 4px var(--inline) 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--inline);
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--kerb) transparent;
}
.gallery-strip li { scroll-snap-align: start; }
.gallery-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery-strip figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.gallery-strip figcaption::before { content: ""; width: 18px; height: 1px; background: var(--xenon); }
@media (min-width: 1000px) {
  .gallery-strip { grid-auto-columns: calc((min(100vw, var(--max) + 2 * var(--gutter)) - 2 * var(--gutter) - 2 * 20px) / 3); gap: 20px; }
}
/* where you are in the strip, and a way through it without a trackpad */
.gallery-controls { display: flex; align-items: center; gap: 8px; margin: 10px var(--inline) 0; }
.gallery-controls[hidden] { display: none; }
.gallery-progress { position: relative; flex: 1; height: 1px; margin-right: 16px; background: var(--line-strong); }
.gallery-progress span {
  position: absolute;
  top: -1px;
  left: calc(var(--o, 0) * 100%);
  width: calc(var(--w, .3) * 100%);
  height: 3px;
  background: var(--xenon);
  transition: left .25s ease-out;
}
.gallery-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: none;
  color: var(--headlight);
  font: 400 15px/1 var(--mono);
  cursor: pointer;
  transition: border-color .2s ease, opacity .2s ease;
}
.gallery-step:hover:not(:disabled) { border-color: var(--headlight); }
.gallery-step:disabled { opacity: .3; cursor: default; }

/* ---------- Story: a full-bleed night panel ---------- */

.story { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: min(92svh, 900px); }
.story-media { position: absolute; inset: 0; z-index: -1; }
.story-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--asphalt) 0%, rgb(5 5 7 / .45) 26%, rgb(5 5 7 / .55) 55%, rgb(5 5 7 / .94) 82%, var(--asphalt) 100%);
}
.story-hud { inset: 16px; }
.story-copy { position: relative; display: grid; gap: 18px; max-width: 38rem; }
.story-title { font: 400 clamp(1.6rem, 1rem + 2.8vw, 3.2rem)/1.15 var(--display); letter-spacing: -.02em; }
.story .rte { color: #c3c8cf; font-size: 16.5px; }
.story .button { justify-self: start; margin-top: 8px; }
@media (min-width: 1000px) {
  .story { align-items: center; }
  .story-hud { inset: 28px; }
  .story-media img { object-position: 50% 26%; }
  .story-media::after {
    background:
      linear-gradient(90deg, rgb(5 5 7 / .92) 0%, rgb(5 5 7 / .7) 40%, rgb(5 5 7 / .15) 75%),
      linear-gradient(180deg, var(--asphalt) 0%, transparent 18%, transparent 80%, var(--asphalt) 100%);
  }
}

/* ---------- Newsletter ---------- */

.newsletter-text { max-width: 32em; color: var(--chrome); }
@media (min-width: 1000px) {
  .newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; }
  .newsletter .signup { margin-top: 0; }
}

/* ---------- Product page ---------- */

.product { display: grid; gap: 28px; padding-top: 0; }
.product-gallery { margin-inline: calc(-1 * var(--inline)); }
.product-media {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  scrollbar-width: none;
}
.product-media::-webkit-scrollbar { display: none; }
.product-media li { scroll-snap-align: start; background: var(--tarmac); }
.product-media img, .product-media .placeholder { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.placeholder { fill: var(--kerb); background: var(--tarmac); }

.crumbs { font: 400 10.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--chrome); text-decoration: none; }
.crumbs a:hover { color: var(--headlight); }
.product-info h1 { margin-top: 14px; }
.product-sub { margin-top: 8px; color: var(--chrome); }
.product-info [data-price-area] { margin-top: 22px; }
.product-info .product-form { margin-top: 18px; }

.assurances { display: grid; gap: 10px; margin-top: 26px; list-style: none; font-size: 14px; color: var(--chrome); }
.assurances:empty { display: none; }
.assurances li { display: flex; align-items: baseline; gap: 12px; }
.assurances li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 5px;
  border: solid var(--xenon);
  border-width: 0 0 1.6px 1.6px;
  rotate: -45deg;
  translate: 0 -3px;
}
.product-description { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--line); }

.accordions { margin-top: 28px; }
.accordion { border-top: 1px solid var(--line); }
.accordion:last-child { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { color: var(--chrome); transition: rotate .25s var(--ease-out); }
.accordion[open] summary .icon { rotate: 45deg; }
.accordion .rte { padding-bottom: 22px; font-size: 15px; }

@media (min-width: 1000px) {
  .product {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
    padding-top: 40px;
  }
  .product-gallery { margin-inline: 0; }
  .product-media { grid-auto-flow: row; gap: 12px; overflow: visible; }
  .product-info { position: sticky; top: calc(var(--header-h) + 32px); }
  .product-info h1 { margin-top: 18px; }
}

/* ---------- Cart ---------- */

.cart h1 { margin-bottom: 32px; }
.cart-form { display: grid; gap: 40px; }
.cart-lines { list-style: none; border-top: 1px solid var(--line); }
.cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line-media { display: block; overflow: hidden; background: var(--tarmac); aspect-ratio: 4 / 5; }
.cart-line-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-line-title { font-weight: 600; text-decoration: none; }
.cart-line-title:hover { color: var(--xenon); }
.cart-line-variant, .cart-line-discount { margin-top: 2px; font-size: 14px; color: var(--chrome); }
.cart-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 14px; }
.cart-line-actions .qty { height: 46px; grid-template-columns: 40px 40px 40px; }
.cart-line-price { font-weight: 600; white-space: nowrap; }

.cart-summary {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 26px;
  background: var(--tarmac);
  border: 1px solid var(--line);
}
.cart-row { display: flex; justify-content: space-between; gap: 16px; color: var(--chrome); }
.cart-total { color: var(--headlight); font-weight: 600; font-size: 1.15rem; }
.cart-summary .note { margin-top: -4px; }
.cart-summary .text-link { justify-self: center; }
.empty-state { display: grid; justify-items: start; gap: 24px; color: var(--chrome); }

@media (min-width: 1000px) {
  .cart-form { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
  .cart-summary { position: sticky; top: calc(var(--header-h) + 32px); }
  .cart-line { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 24px; }
}

/* ---------- Listings, pages, search ---------- */

.listing-head { display: grid; gap: 16px; margin-bottom: 40px; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 40px 20px;
  list-style: none;
}
.card-link { display: block; text-decoration: none; }
.card-media { overflow: hidden; background: var(--tarmac); aspect-ratio: 4 / 5; }
.card-media img, .card-media svg { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.card-link:hover .card-media img { scale: 1.03; }
.card-title { margin-top: 14px; font: 600 1.05rem/1.35 var(--text); }
.card .price { margin-top: 4px; }
.card .price-now { font-size: 1rem; }

.search-form { display: grid; gap: 10px; max-width: 36rem; }
@media (min-width: 560px) { .search-form { grid-template-columns: minmax(0, 1fr) auto; } }

.pagination { display: flex; justify-content: center; gap: 24px; margin-top: 48px; color: var(--chrome); }
.pagination a { color: var(--headlight); }

.page { max-width: calc(46rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.page h1 { margin-bottom: 28px; }
.page--center { min-height: 55svh; display: grid; align-content: center; justify-items: start; gap: 20px; }
.page--center h1 { margin-bottom: 0; }
.page--center p { color: var(--chrome); }
.contact-form { margin-top: 40px; max-width: 34rem; }
.contact-form .button { margin-top: 26px; }
.article-list { display: grid; list-style: none; border-top: 1px solid var(--line); }
.article-link { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--chrome); }
.article-link h2 { color: var(--headlight); font: 600 1.25rem/1.35 var(--text); }
.article-link:hover h2 { color: var(--xenon); }
.article-image { margin: 0 0 32px; }

/* Shopify's own policy pages (privacy, returns, terms, shipping) */
.shopify-policy__container {
  max-width: calc(46rem + 2 * var(--gutter)) !important;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) var(--section-space) !important;
}
.shopify-policy__title h1 { margin-bottom: 28px; font: 400 clamp(1.4rem, 1rem + 2vw, 2.4rem)/1.2 var(--display); letter-spacing: -.02em; }
.shopify-policy__body { color: var(--chrome); }
.shopify-policy__body h2, .shopify-policy__body h3, .shopify-policy__body strong { color: var(--headlight); }
.shopify-policy__body a { color: var(--headlight); text-decoration-color: var(--xenon); }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); color: var(--chrome); font-size: 15px; }
.footer-inner { display: grid; gap: 36px; padding: 56px var(--inline) 40px; }
.footer-brand p + p { margin-top: 12px; max-width: 24em; }
.footer-social { display: flex; gap: 6px; margin-left: -10px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--chrome); }
.footer-social a:hover { color: var(--headlight); background: var(--tarmac); }
.footer-col h2 { margin-bottom: 14px; font: 400 10.5px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--hud); }
.footer-col ul { list-style: none; display: grid; gap: 4px; }
.footer-col a { display: inline-block; padding: 4px 0; color: var(--chrome); text-decoration: none; }
.footer-col a:hover { color: var(--headlight); }
.footer-company p { line-height: 1.75; }
.footer-mark { padding: 8px var(--inline) 28px; }
.footer-wordmark { opacity: .9; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 22px var(--inline) calc(26px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font: 400 10.5px/1.6 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.payment-icons { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.payment-icon { width: 38px; height: 24px; }
@media (min-width: 700px) { .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .footer-inner { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 72px; }
}

/* ---------- Password page ---------- */

body.template-password { min-height: 100svh; background: transparent; }
.password-backdrop { position: fixed; inset: 0; z-index: -1; background: var(--asphalt); }
.password-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: .34; }
.password-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 5 7 / .45), var(--asphalt) 92%); }
.password {
  display: grid;
  align-content: center;
  min-height: 100svh;
  max-width: calc(36rem + 2 * var(--gutter));
  margin: 0 auto;
  padding: 64px var(--gutter);
}
.password-wordmark { width: min(360px, 76vw); margin-bottom: 44px; }
.password h1 { margin-bottom: 14px; }
.password > p { color: var(--chrome); }
.password-entry { margin-top: 40px; color: var(--chrome); font-size: 14px; }
.password-entry summary { cursor: pointer; width: fit-content; }
.password-entry .note { margin-top: 12px; }
.password-entry .note a { color: var(--chrome); }
@media (prefers-reduced-motion: no-preference) {
  .password-wordmark .wordmark-glint { animation: glint 1.6s .6s cubic-bezier(.5, 0, .3, 1) both; }
}

/* ---------- Motion ----------
   Everything below only runs when the browser allows motion. Content is never hidden
   without JavaScript: the hidden starting states hang off .motion-ok, which the layout
   sets before the first paint and removes again if theme.js does not start. */

/* page to page: the old page dims, the new one lights up; the header stays in place */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .25s ease-in both; }
::view-transition-new(root) { animation: vt-in .75s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; filter: brightness(.2); } }

/* a thin xenon line runs along the top while the next page loads */
.nav-progress {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--xenon));
  box-shadow: 0 0 12px var(--xenon);
  transform-origin: left;
  scale: 0 1;
  opacity: 0;
  pointer-events: none;
}
.is-navigating .nav-progress { opacity: 1; animation: nav-progress 2.4s cubic-bezier(.1, .7, .2, 1) forwards; }
@keyframes nav-progress { to { scale: .9 1; } }

/* header slides away while scrolling down, comes back on the way up */
.motion-ok .site-header { transition: translate .45s var(--ease-out), background-color .35s, border-color .35s; }
.header-hidden .site-header { translate: 0 -101%; }

/* buttons: a light sweep on hover */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgb(185 211 255 / .45) 50%, transparent 70%);
  translate: -120% 0;
  pointer-events: none;
}
.button--ghost::after { background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .14) 50%, transparent 70%); }
.motion-ok .button:hover:not([disabled])::after { translate: 120% 0; transition: translate .75s var(--ease-out); }

/* scroll reveals */
.motion-ok [data-reveal] {
  transition: opacity .9s var(--ease-out), translate 1s var(--ease-out), clip-path 1.25s cubic-bezier(.7, 0, .2, 1);
  transition-delay: calc(min(var(--i, 0), 8) * 90ms);
}
.motion-ok [data-reveal="up"]:not(.is-in) { opacity: 0; translate: 0 28px; }
/* buttons that reveal keep their own hover transitions, without the stagger delay */
.motion-ok .button[data-reveal] {
  transition: opacity .9s var(--ease-out), translate 1s var(--ease-out), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
  transition-delay: calc(min(var(--i, 0), 8) * 90ms), calc(min(var(--i, 0), 8) * 90ms), 0s, 0s, 0s, 0s;
}
.motion-ok [data-reveal="fade"]:not(.is-in) { opacity: 0; }
.motion-ok [data-reveal="title"] { clip-path: inset(-.4em -.3em -.4em -.3em); }
.motion-ok [data-reveal="title"]:not(.is-in) { clip-path: inset(-.4em -.3em 100% -.3em); translate: 0 .45em; opacity: 0; }
.motion-ok [data-reveal="wipe"] { clip-path: inset(0); }
.motion-ok [data-reveal="wipe"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
/* the product page photo opens from the top down, quickly, with the scanner riding just behind the edge */
.motion-ok .scan-stage[data-reveal="wipe"] { transition: clip-path .75s cubic-bezier(.4, 0, .2, 1); }
.motion-ok .scan-stage[data-reveal="wipe"]:not(.is-in) { clip-path: inset(0 0 100% 0); }
.motion-ok [data-reveal="glint"]:not(.is-in) { opacity: 0; }
.motion-ok [data-reveal="glint"].is-in .wordmark-glint { animation: glint 1.6s .35s cubic-bezier(.5, 0, .3, 1) both; }
/* rows: content rises, and a light runs along the line underneath */
.motion-ok [data-reveal="row"] { position: relative; }
.motion-ok [data-reveal="row"]:not(.is-in) { opacity: 0; translate: 0 16px; }
.motion-ok [data-reveal="row"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--xenon), transparent) no-repeat;
  background-size: 35% 100%;
  background-position: -60% 0;
  opacity: 0;
  pointer-events: none;
}
.motion-ok [data-reveal="row"].is-in::after { animation: row-sweep 1.4s calc(min(var(--i, 0), 8) * 90ms + .15s) var(--ease-out) both; }
@keyframes row-sweep {
  0% { opacity: 0; background-position: -60% 0; }
  15% { opacity: 1; }
  100% { opacity: 0; background-position: 160% 0; }
}
/* gallery captions: the little line draws in after the photo */
.motion-ok .gallery-strip figcaption::before { transition: width .7s .5s var(--ease-out); }
.motion-ok .gallery-strip li:not(.is-in) figcaption::before { width: 0; }

/* the product photo: scanner and lock-on */
.motion-ok [data-scan]:not(.is-live) :is(.callout-point, .callout-reticle, .callout-ring, .callout-line, .callout-label) { opacity: 0; }
.motion-ok [data-scan].is-live .scanline { animation: scan 1.9s .2s linear both; }
@keyframes scan {
  0% { top: 0; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.motion-ok [data-scan].is-live .callout { --t: calc(.2s + var(--yn, 50) * .019s); }
.motion-ok [data-scan].is-live .callout-point { animation: point-in .3s var(--t) var(--ease-out) both; }
.motion-ok [data-scan].is-live .callout-reticle { animation: lock-on .7s var(--t) both; }
.motion-ok [data-scan].is-live .callout-ring { animation: ping 3.2s calc(var(--t) + .6s) ease-out infinite; }
.motion-ok [data-scan].is-live .callout-line { animation: draw .45s calc(var(--t) + .35s) var(--ease-out) both; }
.motion-ok [data-scan].is-live .callout-label { animation: fade .01s calc(var(--t) + .6s) both; }
@keyframes point-in { from { scale: 0; opacity: 0; } }
@keyframes lock-on {
  0% { opacity: 0; scale: 2.8; rotate: 45deg; }
  45% { opacity: 1; scale: .82; rotate: 0deg; }
  58% { opacity: .2; }
  70% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
@keyframes ping {
  0% { opacity: .9; scale: 1; }
  60%, 100% { opacity: 0; scale: 3.4; }
}
@keyframes draw { from { scale: 0 1; } }

/* scroll-linked depth, where the browser supports it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline: --hero block; }
    .hero-media { animation: hero-drift linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero-lockup { animation: hero-fade linear both; animation-timeline: --hero; animation-range: exit 0% exit 55%; }
    @keyframes hero-drift { to { translate: 0 20%; scale: 1.05; } }
    @keyframes hero-fade { to { opacity: 0; translate: 0 -6vh; filter: blur(5px); } }

    .story { view-timeline: --story block; }
    .story-media img { scale: 1.16; animation: story-pan linear both; animation-timeline: --story; animation-range: cover 0% cover 100%; }
    @keyframes story-pan { from { translate: 0 -6%; } to { translate: 0 6%; } }

    .gallery { view-timeline: --gallery block; }
    .gallery-strip img { animation: settle linear both; animation-timeline: --gallery; animation-range: entry 0% cover 45%; }
    @keyframes settle { from { scale: 1.18; } to { scale: 1; } }

    /* touch screens have no pointer to tilt the product photo: tilt it with the scroll instead */
    @media (hover: none) {
      .feature .feature-photo { animation: photo-tilt linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
      @keyframes photo-tilt { from { transform: rotateX(10deg); } to { transform: rotateX(-7deg); } }
    }
  }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}