/* =====================================================================
   SOL / sorcerics — styles
   Layout units: the design deck is 1366 x 768 pt per screen. One deck
   point = var(--u) = 100vw / 1366, so every measurement below is the
   deck value multiplied by --u (e.g. calc(55 * var(--u)) = x 55pt).
   ===================================================================== */

/* ---------- fonts (Satoshi, self-hosted from Fontshare) ---------- */
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/Satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --u: calc(100vw / 1366);                 /* 1 deck point */
  --mint: #a2e4b8;
  --mint-2: #a1e3b8;
  --black: #000000;
  --white: #ffffff;
  --ink: #262626;
  --ink-2: #282828;
  --grey: #6d6d6d;
  --stage: #eaeaea;
  --box: #aaaaaa;
  --dot-off: #c4c4c4;
  --red: #ea1b1b;

  --font: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type (10/2 sync): FIXED sizes — what the 16:9 deck gives at its 1366
     width (the old fluid values there). Text no longer grows or shrinks with
     the screen width; positions still do (--u). Narrower screens get their
     own values by overriding these tokens in a breakpoint (see RESPONSIVE). */
  --fs-nav:   10px;      /* menu, footer, small labels (deck 8pt, floored) */
  --fs-body:  13px;
  --fs-md:    18px;
  --fs-h:     25px;      /* headings, library rooms */
  --fs-btn:   12px;      /* pill buttons */
  --fs-cell:  17px;      /* order detail boxes */
  --fs-cta:   18.4px;    /* Pre-Order NOW */
  /* FUTURE IS HERE spans the deck width: 164.9px, only smaller when the
     screen is too narrow to hold it on one line (it is never clipped). */
  --fs-display: min(164.9px, calc(164.9 * var(--u)));
  --lh: 1.2;
  --lh-footer: 21.2px;

  /* Logos are treated as type: fixed sizes next to the text (deck widths at
     1366). The files: public/assets/logo.svg (one place to replace them). */
  --logo-sol-w: 22.2px;        --logo-sol-ratio: 22.2 / 9.2;
  --logo-sorcerics-w: 63.2px;  --logo-sorcerics-ratio: 193.441 / 31.808;
  --logo-footer-w: 62px;

  /* Header row: SOL, the HOME switch, the first menu line and sorcerics
     share one line box (deck y35, 8pt menu at a 1.79 line height) and are
     centred on it. --header-h = the room the fixed header takes on the
     desktop: --nav-lines (set per page by Base.astro from the visible menu
     items) lines of the menu; content that must start below the header uses
     it instead of a hard-coded height. */
  --nav-top: calc(35 * var(--u));
  --nav-line: calc(var(--fs-nav) * 1.79);
  --header-h: calc(var(--nav-top) + var(--nav-lines, 5) * var(--nav-line));

  /* z-index tiers (Chakra-style semantic scale: nothing in <main> can
     ever out-stack the nav because <main> is an isolated context at 0) */
  --z-base: 0;
  --z-raised: 10;
  --z-film: 20;
  --z-footer: 25;
  --z-cover: 30;
  --z-sticky: 1100;   /* fixed nav */
  --z-overlay: 1300;  /* modals / loaders */

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* --vh: the visible area with the browser UI shown (page-fit sections, centring).
     --vhl: the LARGE viewport (100vh on iOS/Android = toolbar collapsed) for pinned
     full-screen media, so nothing is left uncovered when the mobile toolbar hides. */
  --vh: 100vh;
  --vhl: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.is-locked, html.is-locked body { overflow: hidden; height: 100%; }
body {
  font-family: var(--font);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--ink);
  background: var(--black);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.theme-light { background: var(--white); }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

/* Site cursor (9/23 sync): the 16px mint disc from sorcerics.com
   (rgb 175 218 195), with the hotspot at the centre of the disc (8 8) instead
   of the image's top-left corner. Gated on a fine pointer rather than viewport
   width, so it stays at every width on mouse/trackpad devices and never
   applies to touch input. */
@media (any-pointer: fine) {
  html, html * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23afdac3'/%3E%3C/svg%3E") 8 8, auto !important; }
}

main { position: relative; isolation: isolate; z-index: var(--z-base); }
/* Sticky footer (10/2 sync): <main> is a column at least one screen tall
   and the footer (its last child) is pushed to the bottom of it. Content
   shorter than the screen → the footer sits at the bottom of the screen;
   longer → the footer follows the content. It never covers anything and is
   never pushed off the screen by empty space — so no section may claim a
   full screen it does not fill (no max(var(--vh), …) heights on short pages). */
main { display: flex; flex-direction: column; min-height: var(--vh); }
main > * { flex-shrink: 0; }
main > .footer { margin-top: auto; }
section { position: relative; }
[data-theme="dark"]  { background: var(--black); color: var(--mint); }
[data-theme="light"] { background: var(--white); color: var(--ink); }

/* Wordmarks: symbols of public/assets/logo.svg filled with currentColor, so
   they take the page's colour (mint on dark pages, ink on light ones, grey
   in the footer). */
.wm { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }   /* with the symbols' overflow="visible": round letter bottoms on the box edge are not clipped flat */
.dot { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: var(--mint); vertical-align: middle; }
/* Button (9/23 sync, new deck p12-15): anything the deck styles as a button
   behaves as one, whatever its tag. A mint pill (141.5 x 22.5pt, 12pt label)
   at rest; hover and keyboard focus invert it — the fill disappears and the
   label turns light (mint on the dark pages, as deck p14/15 show). */
.btn {
  --btn-bg: var(--mint); --btn-fg: var(--black); --btn-fg-on: var(--mint);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.3em 1.25em; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover, .btn:focus-visible { background: transparent; color: var(--btn-fg-on); }
.btn:focus-visible { outline: none; }
[data-theme="light"] .btn { --btn-bg: var(--stage); --btn-fg: var(--ink); --btn-fg-on: var(--grey); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =====================================================================
   NAV — SOL wordmark (left), vertical menu (centre), sorcerics (right).
   Deck: SOL at x37 y37 (21x8), menu at x659 y35 (8pt, 14.3pt pitch),
   sorcerics right edge at x1327. Active item = mint dot 23pt to the left.
   On the home page the nav starts vertically centred and rides up with
   the first scroll until it sticks to the top (see src/scripts/intro.ts).
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; width: 100%; height: 0;
  z-index: var(--z-sticky);
  color: var(--mint);
  pointer-events: none;
  will-change: transform;
  transition: color 0.45s var(--ease);
}
.nav > * { pointer-events: auto; }
.nav.on-light { color: var(--ink-2); }
.nav.is-intro { pointer-events: none; }
.nav.is-intro > * { pointer-events: none; }

/* The wordmarks sit like type on the menu's first line: fixed size, SOL
   centred on that line box (its capitals line up with the menu's), and
   sorcerics on the same bottom line as SOL, as in the deck (p6: both in
   one 9.2pt band) — its lowercase letters stand on the text's baseline. */
.nav { --logo-base: calc(var(--nav-top) + (var(--nav-line) + var(--logo-sol-w) / (var(--logo-sol-ratio))) / 2); }
.nav__brand, .nav__maker { position: absolute; height: auto; top: calc(var(--logo-base) - var(--logo-h)); }
.nav__brand { --logo-h: calc(var(--logo-sol-w) / (var(--logo-sol-ratio))); left: calc(36.4 * var(--u)); width: var(--logo-sol-w); aspect-ratio: var(--logo-sol-ratio); }
.nav__maker { --logo-h: calc(var(--logo-sorcerics-w) / (var(--logo-sorcerics-ratio))); right: calc(38.4 * var(--u)); width: var(--logo-sorcerics-w); aspect-ratio: var(--logo-sorcerics-ratio); }


/* HOME 1 / 2 / 3 switch (intro-skip versions to compare), right of the SOL wordmark */
.nav__home { position: absolute; left: calc(36.4 * var(--u) + var(--logo-sol-w) + 15.4px); top: var(--nav-top); display: flex; align-items: baseline; font-size: var(--fs-nav); line-height: 1.79; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; }
.nav__home a { opacity: 0.5; transition: opacity 0.3s var(--ease); }
.nav__home a:hover, .nav__home a:focus-visible, .nav__home a.is-active { opacity: 1; }
.nav__sep { opacity: 0.5; margin: 0 0.5em; }

.nav__menu {
  position: absolute; left: calc(659 * var(--u)); top: var(--nav-top);
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: var(--fs-nav); line-height: 1.79; font-weight: 500; letter-spacing: 0.01em;
  text-transform: uppercase;
}
.nav__menu a { position: relative; display: block; opacity: 0.5; transition: opacity 0.3s var(--ease); white-space: nowrap; }
.nav__menu a:hover, .nav__menu a:focus-visible, .nav__menu a.is-active { opacity: 1; }
.nav__menu a.is-active::before {
  content: ""; position: absolute; left: -2.875em; top: 50%; width: 1em; height: 1em;
  border-radius: 50%; background: var(--mint); transform: translateY(-50%);
}
.nav__row { display: flex; align-items: flex-start; }
.nav__row.is-active::before { content: ""; position: absolute; left: -2.875em; top: 0.9em; width: 1em; height: 1em; border-radius: 50%; background: var(--mint); transform: translateY(-50%); }
.nav__row a.is-active::before { display: none; }
.nav__sub { display: flex; flex-direction: column; margin-left: 4em; }
.nav__sub a { opacity: 0.5; }
.nav__sub a.is-active { opacity: 1; }
.nav__sub a.is-active::before { display: none; }
.nav__panel, .nav__toggle { display: none; }   /* mobile only (see RESPONSIVE) */

/* =====================================================================
   HOME · 1 — Cover / intro (9/23 sync, corrected 9/26)
   A fixed black layer over the page: mint dot blinks -> "Elevating the Art
   of Living" types out -> SOL + sorcerics slide to the edges, the menu
   appears and rises to the top. Scrolling then lifts the curtain: it moves
   up and turns transparent together, unrelated to the menu, until it is
   gone (deck p7 -> p8). src/scripts/intro.ts · setupIntro / setupCurtain.
   ===================================================================== */
.cover {
  position: fixed; left: 0; top: 0; width: 100%; z-index: var(--z-cover);
  height: var(--vhl); background: rgba(0, 0, 0, var(--cover-a, 1));
  overflow: hidden; pointer-events: none; will-change: transform;
}
.cover.is-gone { display: none; }
.intro {
  position: absolute; left: 0; right: 0; top: 0; height: var(--vh);   /* centred in the visible area, like the nav */
  display: flex; align-items: center; justify-content: center;
  color: var(--mint); font-size: var(--fs-body); font-weight: 500; white-space: nowrap;
}
.intro__text { display: inline-block; }
.intro__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); margin-left: 3px; vertical-align: -0.02em; opacity: 0; }
.intro__text:empty + .intro__dot { margin-left: 0; }
.intro.is-done { display: none; }

/* =====================================================================
   HOME · 2 — Film (scroll-scrubbed frame sequence)
   The first section in the flow; the scrub starts at scroll 0.
   --film-len = how many viewport heights the frames are spread over.
   ===================================================================== */
.film {
  --film-len: 4;                 /* viewport heights the 240 frames are spread over */
  position: relative; z-index: var(--z-film);
  height: calc((1 + var(--film-len)) * var(--vhl));
  background: var(--black);
}
/* Touch devices: a flick covers far more pixels than a wheel notch, so the film
   gets twice the scroll length (frames per scrolled pixel halves). */
@media (hover: none) and (pointer: coarse) { .film { --film-len: 8; } }
.film__sticky { position: sticky; top: 0; height: var(--vhl); width: 100%; overflow: hidden; background: #e9e9e6; }
.film__canvas, .film__vimeo { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__scrim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.42), rgba(0,0,0,0.12) 32%, rgba(0,0,0,0) 52%); }
.film__cap { position: absolute; color: var(--mint); font-size: var(--fs-body); line-height: calc(16 / 13); font-weight: 500; opacity: 0; will-change: opacity, transform; text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.film__cap--right { left: calc(923 * var(--u)); top: calc(165 * var(--u)); max-width: calc(420 * var(--u)); }
.film__cap--bottom { left: 50%; top: calc(650 * var(--u)); transform: translateX(-50%); white-space: nowrap; }
.film__cap a { display: inline-block; padding: 0.4em 0; }
.film__hint { position: absolute; left: 50%; bottom: calc(28 * var(--u)); transform: translateX(-50%); width: 1px; height: calc(34 * var(--u)); background: var(--mint); opacity: 0.8; transform-origin: top; animation: hintPulse 2s var(--ease) infinite; }
@keyframes hintPulse { 0% { transform: translateX(-50%) scaleY(0); opacity: 0; } 40% { transform: translateX(-50%) scaleY(1); opacity: 0.8; } 100% { transform: translateX(-50%) scaleY(1); opacity: 0; } }

/* =====================================================================
   HOME · 3 — Product intro (deck p10-13)
   ===================================================================== */
/* One screen, scrolled through like any section. (It used to be pinned for
   three screens so the deck's arrows could draw; the arrows are gone.) */
.pintro { height: var(--vhl); }
.pintro__sticky { position: relative; height: 100%; overflow: hidden; }
.pintro__device { position: absolute; left: calc(330 * var(--u)); top: calc(180 * var(--u)); width: calc(712 * var(--u)); z-index: 1; }   /* new deck p12: body x479-909, y237-659 */
.pintro__copy { position: absolute; left: calc(53 * var(--u)); top: calc(549 * var(--u)); z-index: 2; font-size: var(--fs-body); line-height: calc(15.6 / 13); color: var(--mint); }
.pintro__more, .pintro__price { position: absolute; z-index: 2; top: calc(610.5 * var(--u)); width: 141.5px; height: 22.5px; padding: 0 0.8em; font-size: var(--fs-btn); font-weight: 700; line-height: 1; white-space: nowrap; }
.pintro__more { left: calc(55 * var(--u)); }
.pintro__price { left: calc(1064 * var(--u)); }
/* =====================================================================
   LAYERS — one component (Layers.astro) on the home page (new deck p15-18)
   and under the library, which follows the home design (10/05).
   The bar (layers part fix, 9/30): title x37 (18pt) with one 8pt line under
   it on the left; the email form from x539 (x539-827), placeholder and "Get
   Notified" in 8pt on one line over a 2pt rule. The description has its own
   column that ends 24px before the form and wraps there, so it never runs
   under the form — not on a narrow screen (fixed-size type), not when the
   text gets longer.
   Home (--photos): a full screen; two 325pt circular crops of one photo at
   x170 / x830.5, y225 (the mint discs of p15 turn into them as they rise);
   the bar at y629. Under the library: the bar alone, 41pt down (deck p47).
   ===================================================================== */
.layers { padding: calc(41 * var(--u)) 0 16px; }
.layers--photos { padding: 0; min-height: var(--vh); height: max(var(--vh), calc(768 * var(--u))); overflow: hidden; }
.layers--photos .layers__bar { position: absolute; left: 0; right: 0; top: calc(50% + (245 * var(--u))); }
.layers__bar { display: grid; grid-template-columns: calc(502.1 * var(--u) - 24px) max(calc(288 * var(--u)), 240px); column-gap: 24px; align-items: start; padding: 0 calc(37 * var(--u)); }
.layers__circle {
  position: absolute; top: calc(50% - (159.3 * var(--u)));
  width: calc(325.3 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  background-image: url("/product/lounge.webp"); background-repeat: no-repeat;
}
.layers__circle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); opacity: var(--veil, 1); transition: opacity 0.1s linear; }
/* crops as percentages so they hold at any circle size (deck p17 image boxes) */
.layers__circle--a { left: calc(170 * var(--u)); background-size: 247.8% auto; background-position: 1.04% 78.86%; }
.layers__circle--b { left: calc(830.5 * var(--u)); background-size: 304.8% auto; background-position: 69.04% 70.15%; }
.layers__copy { min-width: 0; color: var(--mint); }
[data-theme="light"] .layers__copy { color: var(--black); }
.layers__copy h2 { position: relative; display: inline-block; font-size: var(--fs-md); font-weight: 700; line-height: 1.39; text-transform: uppercase; }
.layers__copy h2 .red { position: absolute; left: calc(100% + 5.7px); top: -1.4px; width: 8.6px; height: 8.6px; border-radius: 50%; background: var(--red); }
.layers__copy p { font-size: var(--fs-nav); line-height: 1.39; }
.layers__more { display: inline-block; font-size: var(--fs-nav); line-height: 1.39; color: #9e9e9e; text-transform: uppercase; transition: color 0.25s var(--ease); }
.layers__line { display: flex; flex-wrap: wrap; column-gap: 1.5em; }
.layers__more:hover, .layers__more:focus-visible { color: var(--black); }
[data-theme="dark"] .layers__more:hover, [data-theme="dark"] .layers__more:focus-visible { color: var(--mint); }
/* Email sign-up (Mailchimp embedded form, see setupNotify) */
/* the form sits 10pt below the title's top; the space under it holds the
   status line (sent / error), so that never runs into what follows */
.layers__form { --rule: var(--mint); --on: var(--white); position: relative; margin: calc(10 * var(--u)) 0 calc(8 * var(--u) + 15px); color: var(--mint); font-size: var(--fs-nav); }
[data-theme="light"] .layers__form { --rule: var(--black); --on: var(--black); color: var(--black); }
.layers__field { display: flex; align-items: center; gap: 1em; padding-bottom: calc(7.1 * var(--u)); border-bottom: 2px solid var(--rule); }
.layers__email { flex: 1 1 auto; min-width: 0; padding: 0.2em 0; border: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: 500; }
.layers__email::placeholder { color: inherit; opacity: 0.75; }
[data-theme="light"] .layers__email::placeholder { color: #9e9e9e; opacity: 1; }
.layers__email:focus { outline: none; }
.layers__field:focus-within { --rule: var(--on); }
.layers__submit { flex: 0 0 auto; padding: 0.2em 0; font-size: inherit; font-weight: 500; white-space: nowrap; transition: color 0.25s var(--ease); }
.layers__submit:hover, .layers__submit:focus-visible { color: var(--on); outline: none; }
.layers__submit[disabled] { opacity: 0.6; }
.layers__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.layers__status { position: absolute; left: 0; top: calc(100% + (8 * var(--u))); min-height: 1.2em; font-size: var(--fs-nav); line-height: 1.5; }
.layers__form.is-error .layers__status { color: var(--red); }
.layers__form.is-done .layers__field { visibility: hidden; }

/* =====================================================================
   FOOTER (new deck p16 dark / p47 light) — Footer.astro, the last child
   of <main> on every page; a sticky footer (see main above). sorcerics wordmark x37 y650 (62pt) with the
   copyright on the last row (y712); four link columns at x218 / 333 / 448 /
   563, rows 21.2pt apart, 8pt #9e9e9e. The deck's email field (GET UPDATES)
   is left out on purpose: email sign-up lives in the Layers form only.
   Outside links (socials, legal, about) are COLUMNS in Footer.astro; those
   without a URL yet render as inert text.
   ===================================================================== */
.footer {
  --footer-pt: 79;                                   /* space above the first row, deck p16 */
  /* Never covered by page content (10/2 sync): its own layer above every
     section (the film, Layers' circles, absolutely placed copy); only the
     fixed header and the home curtain are above it. */
  position: relative; z-index: var(--z-footer);
  display: flex; align-items: stretch;
  padding: calc(var(--footer-pt) * var(--u)) calc(37 * var(--u)) calc(43 * var(--u));
  font-size: var(--fs-nav); font-weight: 500; line-height: var(--lh-footer);
  text-transform: uppercase; letter-spacing: 0.01em; color: #9e9e9e;
}
.footer[data-theme="dark"] { --footer-on: var(--mint); }
.footer[data-theme="light"] { --footer-on: var(--black); }
.footer__brand { flex: 0 0 calc(181 * var(--u)); display: flex; flex-direction: column; justify-content: space-between; }
.footer__logo { display: block; width: var(--logo-footer-w); height: auto; aspect-ratio: var(--logo-sorcerics-ratio); margin-top: 6px; }
.footer__cols { display: flex; }
.footer__cols ul { list-style: none; width: calc(115 * var(--u)); min-width: 10.5em; }   /* fits "PRIVACY & COOKIES" (fixed type) on one line */
.footer a { transition: color 0.25s var(--ease); }
.footer a[href]:hover, .footer a[href]:focus-visible { color: var(--footer-on); }

/* =====================================================================
   DEVICE PAGE (deck p24-41)
   Every screen: product render centred at the top, copy block at
   x55 / y429 (heading 25pt, body 13pt grey at +45pt), right column x961.
   ===================================================================== */
/* New deck (p29-44): every screen after FUTURE IS HERE sits 57pt lower than
   in the first deck — renders, copy and the mint marks alike. --dv-dy moves
   them all at once (margin-top shifts the absolutely placed boxes). */
/* min-height: one screen, and at least enough for the copy block (x55
   y429+dy, fixed type) so it never runs into the next section or the footer
   on short screens. */
.dv { --dv-dy: 57; min-height: max(var(--vh), calc((429 + var(--dv-dy)) * var(--u) + 260px)); overflow: hidden; }
.dv--photo, .dv--future { --dv-dy: 0; }
.dv__img, .dv__copy, .dv__ring, .dv__sq, .dv__mount, .dv__wall, .dv__shelf, .dv__rot-img { margin-top: calc(var(--dv-dy) * var(--u)); }
.dv--photo { height: calc(478 * var(--u)); min-height: 0; background: #1c1a15; }
.dv--photo img { width: 100%; height: 100%; object-fit: cover; }

.dv__img { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; }
.dv__img--future { width: calc(909 * var(--u)); left: calc(662.5 * var(--u)); top: 0; }
.dv__img--dual   { width: calc(695 * var(--u)); left: calc(668.5 * var(--u)); }
.dv__img--back   { width: calc(694 * var(--u)); left: calc(683 * var(--u)); }
.dv__img--front  { width: calc(795 * var(--u)); left: calc(651.5 * var(--u)); top: calc(-65 * var(--u)); }
.dv__img--top    { width: calc(694 * var(--u)); left: calc(666 * var(--u)); }
.dv__img--side   { width: calc(695 * var(--u)); left: calc(651.5 * var(--u)); }
.dv__img--side2  { width: calc(694 * var(--u)); left: calc(683 * var(--u)); }
.dv__img--angle  { width: calc(694 * var(--u)); left: calc(683 * var(--u)); }
.dv__img--xray   { width: calc(694 * var(--u)); left: calc(628 * var(--u)); top: calc(-22 * var(--u)); }

.dv__copy { position: absolute; left: calc(55 * var(--u)); top: calc(429 * var(--u)); z-index: 2; max-width: calc(560 * var(--u)); }
.dv__copy h2, .dv__copy h1, .dv__col h3 { font-size: var(--fs-h); font-weight: 700; line-height: var(--lh); text-transform: uppercase; color: var(--black); letter-spacing: -0.005em; }
.dv__copy p, .dv__col p { font-size: var(--fs-body); line-height: calc(15.5 / 13); color: var(--grey); font-weight: 500; }
.dv__copy h2 + p, .dv__col h3 + p { margin-top: calc(15 * var(--u)); }
.dv__copy p + p { margin-top: calc(15.5 / 13 * 1em); }
.dv__copy p + h2 { margin-top: calc(14 * var(--u)); }
/* The right-hand blocks are stacked in one column (deck y143 and y291): the
   first takes at least the deck's 148pt, so the second lands on y291 — or
   lower when the fixed-size text needs more room on a narrow screen. */
.dv__cols { position: absolute; left: calc(961 * var(--u)); top: calc(143 * var(--u)); z-index: 2; margin-top: calc(var(--dv-dy) * var(--u)); display: flex; flex-direction: column; }
.dv__col { position: relative; max-width: calc(370 * var(--u)); min-width: 200px; }
.dv__col--1 { min-height: calc(148 * var(--u)); padding-bottom: 12px; }
.dv__col--3 { top: calc(429 * var(--u)); }

/* FUTURE IS HERE (deck p25): 164.9pt, spans x32-x1335, title over the render */
.dv--future { height: max(var(--vh), calc(768 * var(--u))); }
.dv__future-title { position: absolute; left: 0; width: 100%; top: calc(349 * var(--u)); z-index: 2; text-align: center; font-size: var(--fs-display); font-weight: 700; line-height: 1.35; letter-spacing: -0.028em; color: var(--black); white-space: nowrap; }
.dv__future-cta { position: absolute; left: 50%; transform: translateX(-50%); top: calc(570 * var(--u)); z-index: 2; font-size: var(--fs-cta); font-weight: 700; color: var(--black); white-space: nowrap; padding: 0.3em 0.6em; }
.dv__future-cta:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* mint annotations (deck p26/27/34/35/36) */
.dv__ring { position: absolute; z-index: 2; border-radius: 50%; border: calc(10 * var(--u)) solid var(--mint-2); width: calc(97 * var(--u)); height: calc(97 * var(--u)); pointer-events: none; }
.dv__ring--l { left: calc(468 * var(--u)); top: calc(193 * var(--u)); }
.dv__ring--r { left: calc(804 * var(--u)); top: calc(193 * var(--u)); }
.dv__sq { position: absolute; z-index: 2; left: calc(709 * var(--u)); width: calc(147 * var(--u)); height: calc(129 * var(--u)); border: calc(10 * var(--u)) solid var(--mint-2); pointer-events: none; }
.dv__sq::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(97 * var(--u)); height: calc(97 * var(--u)); transform: translate(-50%, -50%); border-radius: 50%; border: calc(10 * var(--u)) solid var(--mint-2); }
.dv__sq--1 { top: calc(171 * var(--u)); }
.dv__sq--2 { top: calc(340 * var(--u)); }
.dv__mount { position: absolute; z-index: 2; left: calc(616 * var(--u)); top: calc(173 * var(--u)); width: calc(133 * var(--u)); height: calc(133 * var(--u)); border-radius: 50%; border: calc(10 * var(--u)) solid var(--mint-2); pointer-events: none; }
.dv__mount::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(97 * var(--u)); height: calc(97 * var(--u)); transform: translate(-50%, -50%); border-radius: 50%; background: var(--mint-2); }
.dv__wall { position: absolute; z-index: 2; left: calc(440 * var(--u)); top: calc(51 * var(--u)); width: calc(6 * var(--u)); height: calc(529 * var(--u)); background: var(--mint-2); }
.dv__shelf { position: absolute; z-index: 2; left: calc(419 * var(--u)); top: calc(520 * var(--u)); width: calc(528 * var(--u)); height: calc(6 * var(--u)); background: var(--mint-2); }
.dv__glowb { position: absolute; z-index: 0; left: calc(454 * var(--u)); top: calc(484 * var(--u)); width: calc(568 * var(--u)); height: calc(284 * var(--u)); background: radial-gradient(circle calc(235 * var(--u)) at 50% 100%, rgba(118,204,146,0.95), rgba(162,228,184,0.5) 45%, rgba(162,228,184,0) 100%); pointer-events: none; opacity: 0; }   /* new deck p42: 568x284 at (454,484), brightest at the bottom edge under the lens */
/* "Atmosphere starts from SOL": the green glow under the product switches on
   like an LED (a short flicker, then steady) as the section arrives. */
.dv__img--lit { opacity: 0; }
.dv__glowb.is-lit, .dv__glowb.is-lit ~ .dv__img--lit { animation: ledOn 1.6s linear 0.15s forwards; }
@keyframes ledOn { 0% { opacity: 0; } 8% { opacity: 0.55; } 14% { opacity: 0.1; } 24% { opacity: 0.8; } 30% { opacity: 0.35; } 100% { opacity: 1; } }

/* rotation scrub (deck p29-32): sticky stage, 5 renders, a mint glow that travels */
.dv--rot { height: calc(4 * var(--vhl)); min-height: 0; overflow: visible; }
.dv__stage { position: sticky; top: 0; height: var(--vhl); overflow: hidden; background: var(--white); }
.dv__rot-img { position: absolute; top: calc(-65 * var(--u)); left: calc(651.5 * var(--u)); width: calc(795 * var(--u)); transform: translateX(-50%); opacity: 0; will-change: opacity; }
.dv__rot-img:first-of-type { opacity: 1; }
.dv__rot-vimeo { position: absolute; inset: 0; }
.dv__glow { position: absolute; left: 0; top: 0; width: calc(360 * var(--u)); height: calc(360 * var(--u)); border-radius: 50%; margin: calc(-180 * var(--u)) 0 0 calc(-180 * var(--u)); background: radial-gradient(circle, rgba(162,228,184,0.95), rgba(162,228,184,0) 68%); filter: blur(calc(14 * var(--u))); will-change: transform; pointer-events: none; }

/* =====================================================================
   ORDER PAGE (new deck p19-26)
   Stage 834x505 at (37,149) in #eaeaea, panel column at x911 from y212.
   ===================================================================== */
/* --order-top: the stage's top, deck y149 — but never under the fixed
   header: on narrow screens the menu (with SOL / ACC under ORDER) would
   otherwise run into the product image. The panel keeps its place
   relative to the stage (deck: 63pt lower). */
.order { --order-top: max(calc(149 * var(--u)), calc(var(--header-h) + 6px)); height: calc(var(--order-top) + 619 * var(--u)); }   /* the deck screen (768pt); no full-screen minimum, so the footer is not pushed off a tall screen */
.order__stage { position: absolute; left: calc(37 * var(--u)); top: var(--order-top); width: calc(834.3 * var(--u)); height: calc(504.6 * var(--u)); background: var(--stage); overflow: hidden; }
.order__view { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease), visibility 0.45s; }
.order__view.is-on { opacity: 1; visibility: visible; }

.order__slides { position: absolute; inset: 0; }
.order__slide { position: absolute; left: 50%; top: 50%; width: calc(412 * var(--u)); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s var(--ease); }
.order__slide.is-on { opacity: 1; }
.order__dots { position: absolute; z-index: 2; left: 0; right: 0; top: calc(464.5 * var(--u)); display: flex; justify-content: center; gap: calc(9 * var(--u)); }
.order__dots button { width: calc(8 * var(--u)); height: calc(8 * var(--u)); min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--dot-off); padding: 0; transition: background 0.3s var(--ease); }
.order__dots button.is-on { background: var(--mint-2); }
.order__chev { position: absolute; top: 50%; width: calc(28 * var(--u)); height: calc(40 * var(--u)); min-width: 22px; min-height: 30px; transform: translateY(-50%); color: var(--mint-2); display: grid; place-items: center; }
.order__chev svg { width: 55%; height: auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.order__chev--prev { left: calc(20 * var(--u)); }
.order__chev--next { right: calc(20 * var(--u)); }
/* Mouse / trackpad (10/2 sync): each arrow owns half of the image area. The
   arrow shows only while the pointer is over its half (or it has keyboard
   focus), and a click anywhere in that half moves the gallery. Touch screens
   keep the always-visible arrows above (mobile behaviour to be decided). */
@media (hover: hover) {
  .order__chev { top: 0; bottom: 0; width: 50%; height: auto; min-width: 0; min-height: 0; transform: none; display: flex; align-items: center; }
  .order__chev--prev { left: 0; justify-content: flex-start; padding-left: calc(20 * var(--u)); }
  .order__chev--next { right: 0; justify-content: flex-end; padding-right: calc(20 * var(--u)); }
  .order__chev svg { width: calc(max(22px, 28 * var(--u)) * 0.55); opacity: 0; transition: opacity 0.25s var(--ease); }
  .order__chev:hover svg, .order__chev:focus-visible svg { opacity: 1; }
  .order__chev:focus-visible { outline: none; }
}

.order__faq { position: absolute; left: calc(70 * var(--u)); top: calc(63 * var(--u)); right: calc(51 * var(--u)); font-size: var(--fs-md); font-weight: 500; color: var(--ink); }
.faq__item { position: relative; }
.faq__q { display: flex; align-items: center; gap: calc(14 * var(--u)); width: 100%; text-align: left; padding: 0; line-height: 1.28; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease); line-height: 1.28; color: var(--ink); }
.faq__a p { padding: 0 0 calc(31 * var(--u)); }
.faq__item.is-open .faq__a { max-height: 20em; }

.order__details { position: absolute; inset: 0; }
.order__grid { position: absolute; left: calc(72 * var(--u)); top: calc(70 * var(--u)); width: calc(690 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: calc(144 * var(--u)) calc(208 * var(--u)); gap: calc(12 * var(--u)) calc(11 * var(--u)); }
.order__cell { background: var(--box); padding: calc(10 * var(--u)) calc(12 * var(--u)); font-size: var(--fs-cell); font-weight: 500; color: var(--ink); }
.order__subtabs { position: absolute; left: calc(325 * var(--u)); top: calc(463 * var(--u)); display: flex; gap: calc(35 * var(--u)); font-size: var(--fs-nav); font-weight: 500; }
.order__subtabs button { opacity: 0.45; padding: 0.2em 0; }
.order__subtabs button.is-on { opacity: 1; }
.order__need { position: absolute; right: calc(72 * var(--u)); top: calc(463 * var(--u)); font-size: var(--fs-nav); font-weight: 500; color: var(--ink-2); padding: 0.2em 0; }

.order__panel { position: absolute; left: calc(911 * var(--u)); top: calc(var(--order-top) + 63 * var(--u)); width: calc(178 * var(--u)); color: var(--ink); }
.order__name { font-size: var(--fs-md); font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.order__sub { font-size: var(--fs-body); font-weight: 700; line-height: 1.2; }
.order__tabs { display: flex; gap: calc(42 * var(--u)); margin-top: calc(15 * var(--u)); font-size: var(--fs-nav); font-weight: 500; }
.order__tabs button { position: relative; opacity: 0.45; padding: 0.2em 0; transition: opacity 0.3s var(--ease); }
.order__tabs button.is-on, .order__tabs button:hover { opacity: 1; }
.order__tabs button.is-on::before { content: ""; position: absolute; left: -2.25em; top: 50%; width: 1em; height: 1em; border-radius: 50%; background: var(--mint-2); transform: translateY(-50%); }
.order__swatches { display: flex; align-items: center; gap: calc(22 * var(--u)); margin-top: calc(18 * var(--u)); }
.order__swatch { position: relative; width: 17px; height: 17px; border-radius: 50%; background: var(--stage); }
.order__swatch.is-on::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--mint-2); }
.order__swatch-label { font-size: var(--fs-nav); font-weight: 500; opacity: 0.7; }
.order__buy { margin: calc(19 * var(--u)) 0 0 calc(-4 * var(--u)); font-size: var(--fs-body); font-weight: 700; }
.order__how { display: block; text-align: right; margin-top: calc(18 * var(--u)); font-size: var(--fs-nav); font-weight: 700; }
.order__how:hover { text-decoration: underline; }
.order__account { display: block; text-align: right; margin-top: calc(8 * var(--u)); font-size: var(--fs-nav); font-weight: 700; }
.order__account[hidden] { display: none; }
.order__account:hover { text-decoration: underline; }
.order__msg { margin-top: calc(10 * var(--u)); font-size: var(--fs-nav); color: var(--red); }
.order__msg:empty { display: none; }

.ship { margin-top: calc(22 * var(--u)); display: none; }
.ship.is-on { display: block; }
.ship h3 { font-size: var(--fs-body); font-weight: 700; text-transform: uppercase; }
.ship__row { display: grid; grid-template-columns: 1fr; gap: 0 calc(12 * var(--u)); margin-top: calc(12 * var(--u)); }
.ship__row--2 { grid-template-columns: 1fr 1fr; }
.ship label { display: block; font-size: var(--fs-nav); font-weight: 700; }
.ship input, .ship select { display: block; width: 100%; margin-top: 0.2em; padding: 0.35em 0; border: 0; border-bottom: 1px solid rgba(0,0,0,0.18); background: transparent; font-size: var(--fs-nav); font-weight: 500; border-radius: 0; }
.ship input:focus, .ship select:focus { outline: none; border-bottom-color: var(--mint-2); }
.ship__note { margin-top: calc(14 * var(--u)); font-size: var(--fs-nav); opacity: 0.5; }
.ship__submit { display: inline-flex; align-items: center; gap: 12px; margin-top: calc(12 * var(--u)); font-size: var(--fs-nav); font-weight: 700; padding: 0.2em 0; }
.ship__submit .dot { width: 8px; height: 8px; background: var(--mint-2); }
.ship__done { margin-top: calc(14 * var(--u)); font-size: var(--fs-nav); color: var(--ink); display: none; }
.ship.is-sent .ship__done { display: block; }
.ship.is-sent form { display: none; }

.order__acc { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); padding: calc(45 * var(--u)) calc(105 * var(--u)); align-content: start; }
.order__acc .order__cell { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: space-between; }
.order__acc .order__cell span { font-size: var(--fs-nav); font-weight: 500; opacity: 0.7; }

/* =====================================================================
   LIBRARY PAGE (new deck p45-50)
   Left column x37 from y148: LIBRARY, the rooms (25pt, 28.5pt pitch; Lounge
   is a room like the others) with the chosen room's scenarios under it
   (13pt, 15.6pt pitch).
   SEARCH x359 y148 over the video (x359 y217, 648x327); text under the
   video at y565; ORDER THIS EXPERIENCE right-aligned at x1327. Below: the
   Layers component (as on the home page) and the footer.
   ===================================================================== */
/* --lib-top: the top row (LIBRARY, SEARCH, ORDER THIS EXPERIENCE), deck y148
   — never under the fixed header on narrow screens (as on the order page).
   --lib-sh: the search row (68.5pt, y148 → the video at y216.5). With the
   search switched off (settings/site.json) the whole row goes, not just the
   field: --lib-sh is 0, so the video's top lines up with the tops of
   LIBRARY and ORDER THIS EXPERIENCE, and the text under the video and the
   section itself move up by the same amount.
   "Lines up" = with the tops of the capitals (measured: 5px below the
   25px text's line box, --lib-cap); ORDER THIS EXPERIENCE (30pt line
   pitch instead of 28.5) is raised by half the difference so both side
   menus start on the same line.
   Height: the deck screen (768pt, less the row when there is no search;
   at least 560px for the fixed-size room list on narrow screens); no
   full-screen minimum, so the footer is not pushed off a tall screen. */
.lib { --lib-top: max(calc(148 * var(--u)), calc(var(--header-h) + 6px)); --lib-sh: 0; --lib-cap: 5px; height: max(calc(var(--lib-top) + (551.5 + var(--lib-sh)) * var(--u)), 560px); overflow: hidden; color: var(--ink); }
.lib--search { --lib-sh: 68.5; --lib-cap: 0px; }   /* with the search: the deck's positions (video at y216.5) */
.lib h1, .lib h2, .lib__rooms > li > button, .lib__order { font-size: var(--fs-h); font-weight: 700; line-height: calc(28.5 / 25); text-transform: uppercase; color: var(--black); }
.lib__nav { position: absolute; left: calc(37 * var(--u)); top: var(--lib-top); max-width: calc(300 * var(--u)); }
.lib__nav h1 { margin-bottom: calc(4 * var(--u)); }
/* Search (deck p45 -> p46): the magnifier slides 419pt to the right while the
   2pt black underline (x475-868) draws in. (The deck's mint disc after SEARCH
   is the cursor, not a design element — see the site cursor.) */
/* (Hidden while settings/site.json features.librarySearch is false.) The
   magnifier follows the SEARCH text (fixed type) instead of a fixed x, so the
   two never overlap on narrow screens, and it is centred on the capitals. */
.lib__search { position: absolute; left: calc(359 * var(--u)); top: var(--lib-top); display: flex; align-items: center; }
.lib__search h2 { cursor: pointer; }
.lib__search-box { position: relative; flex: 0 0 auto; margin-left: 11px; width: calc(418.8 * var(--u) + 21px); height: 28.5px; }
.lib__search-field { position: absolute; left: 4.7px; top: 0; width: calc(393 * var(--u)); height: 100%; }
.lib__search-field input { width: 100%; height: 100%; border: 0; background: transparent; font-size: var(--fs-body); font-weight: 500; color: var(--ink); padding: 0; border-radius: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease) 0.25s; }
.lib__search-field input:focus { outline: none; }
.lib__search-field input::-webkit-search-cancel-button, .lib__search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.lib__search-line { position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease); }
.lib__search-btn { position: absolute; left: 0; top: calc(50% - 10.5px + var(--search-dy, 0px)); width: 21px; height: 21px; display: grid; place-items: center; color: var(--black); transition: transform 0.6s var(--ease); }
.lib__search-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lib__search.is-open .lib__search-btn { transform: translateX(calc(418.8 * var(--u))); }
.lib__search.is-open .lib__search-line { transform: scaleX(1); }
.lib__search.is-open .lib__search-field input { opacity: 1; pointer-events: auto; }
.is-placeholder, .is-placeholder button { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.55; }
.lib__order { position: absolute; right: calc(39 * var(--u)); top: calc(var(--lib-top) - 0.75px); text-align: right; white-space: nowrap; line-height: calc(30 / 25); }
.lib__order:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* rooms: all black until one is chosen, then the others go grey (deck p47) */
.lib__rooms { list-style: none; }
.lib__rooms > li > button { display: block; text-align: left; transition: color 0.3s var(--ease); }
.lib__rooms.has-pick > li > button { color: #9e9e9e; }
.lib__rooms.has-pick > li > button.is-on, .lib__rooms > li > button:hover { color: var(--black); }
.lib__scenes { list-style: none; margin: calc(4 * var(--u)) 0 calc(24 * var(--u));   /* the room after an open list sits where LOUNGE does in deck p45 */ font-size: var(--fs-body); line-height: calc(15.6 / 13); color: var(--grey); }
.lib__scenes[hidden] { display: none; }
.lib__scenes button { text-align: left; color: inherit; line-height: inherit; transition: color 0.2s var(--ease); }
.lib__scenes button.is-on, .lib__scenes button:hover { color: var(--black); }
.lib__video { position: absolute; left: calc(359 * var(--u)); top: calc(var(--lib-top) + var(--lib-sh) * var(--u) + var(--lib-cap)); width: calc(648 * var(--u)); height: calc(327 * var(--u)); background: #9e9e9e; overflow: hidden; }
.lib__video img { width: 100%; height: 100%; object-fit: cover; border: 0; }
.lib__video .vimeo { position: absolute; inset: 0; background: var(--black); }
.lib__video img { filter: saturate(0.85); }
.lib__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); }
.lib__play svg { width: calc(52 * var(--u)); min-width: 36px; height: auto; fill: currentColor; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.25)); }
.lib__video.is-playing .lib__play, .lib__video.is-playing img { display: none; }
.lib__video.is-empty .lib__play { display: none; }
/* Text under the video: the library description on first entry, hidden once a
   room is chosen; a scenario's own description when one is picked. */
.lib__desc { position: absolute; left: calc(359.6 * var(--u)); top: calc(var(--lib-top) + (348.5 + var(--lib-sh)) * var(--u) + var(--lib-cap)); width: calc(648 * var(--u)); font-size: var(--fs-body); line-height: calc(15.6 / 13); color: var(--ink-2); }
.lib__desc p + p { margin-top: calc(15.6 / 13 * 1em); }
.lib__desc[hidden] { display: none; }
/* Layers under the library: the footer follows 40pt lower (deck p47). */
.layers:not(.layers--photos) + .footer { --footer-pt: 40; }

/* =====================================================================
   SIMPLE PAGES (wiki / careers)
   ===================================================================== */
.simple { min-height: var(--vh); }
/* One-viewport pages (wiki, careers, 404): the section fills the space
   above the footer, so nothing scrolls unless the content is taller. */
main.fit > section { flex: 1 0 auto; min-height: 0; }
/* the copy is in the flow at y429 (padding), so a short screen makes the page
   taller instead of putting the copy over the footer */
.simple { padding: calc(429 * var(--u)) 0 8px calc(55 * var(--u)); }
.simple__copy { position: relative; max-width: calc(560 * var(--u)); min-width: 280px; }
.simple__copy h1 { font-size: var(--fs-h); font-weight: 700; line-height: var(--lh); text-transform: uppercase; color: var(--black); }
.simple__copy p { font-size: var(--fs-body); line-height: calc(15.5 / 13); color: var(--grey); margin-top: calc(15 * var(--u)); }
.simple__copy a { color: var(--black); }
.simple__copy a:hover { text-decoration: underline; }
/* Wiki articles (src/content/wiki/), under the intro, same column */
.wiki { position: relative; margin-top: 48px; max-width: calc(560 * var(--u)); min-width: 280px; list-style: none; }
.wiki__item + .wiki__item { margin-top: 40px; }
.wiki__item h2 { font-size: var(--fs-md); font-weight: 700; line-height: var(--lh); text-transform: uppercase; color: var(--black); }
.wiki__item p { margin-top: 10px; font-size: var(--fs-body); line-height: calc(15.5 / 13); color: var(--grey); }
.wiki__video { margin-top: 16px; background: var(--black); }

/* ---------- Vimeo (src/components/Vimeo.astro) ----------
   The box is a size container; the iframe is sized from the clip's
   proportions (--ratio = width / height) so it covers or fits the box
   without letterboxing inside the player. "fluid" boxes take the clip's
   proportions at their width. Background players are not clickable (they
   would swallow the scroll and the cursor). */
.vimeo { position: relative; overflow: hidden; container-type: size; }
.vimeo iframe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; display: block; }
.vimeo--cover iframe { width: max(100cqw, calc(100cqh * var(--ratio))); height: max(100cqh, calc(100cqw / var(--ratio))); }
.vimeo--contain iframe { width: min(100cqw, calc(100cqh * var(--ratio))); height: min(100cqh, calc(100cqw / var(--ratio))); }
.vimeo--fluid { container-type: normal; aspect-ratio: var(--ratio); }
.vimeo--fluid iframe { width: 100%; height: 100%; }
.vimeo iframe[aria-hidden="true"] { pointer-events: none; }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* =====================================================================
   RESPONSIVE — the deck is desktop-only; below 760px the fixed deck
   coordinates are replaced by a stacked flow with fixed pixel type.
   ===================================================================== */
@media (max-width: 760px) {
  /* Mobile nav (layers part fix p2, a 376pt-wide phone frame; --mu = 1 frame
     point): SOL top-left, sorcerics bottom-left, a two-dot menu button
     top-right. The button opens a black 90% panel (226pt) that slides in
     from the left with the menu (10pt, 24.4pt pitch, x164) on it; the dots
     turn into the X, centred on the same point (x338.5 y41.2). */
  :root { --mu: calc(100vw / 376); --fs-nav: 10px; --fs-body: 14px; --fs-md: 17px; --fs-h: 24px; --fs-cell: 15px; --fs-cta: 16px; --fs-display: min(49px, 12.6vw); }
  .nav__home { left: calc(24.9 * var(--mu)); top: calc(51 * var(--mu)); }   /* HOME 1-4 test switch: under SOL */
  /* wordmarks keep their fixed (type-like) size: SOL centred on the menu
     button's row (y41.2), sorcerics' top 35.8pt above the bottom edge */
  .nav__brand { left: calc(24.9 * var(--mu)); top: calc(41.2 * var(--mu) - var(--logo-h) / 2); }
  .nav__maker { left: calc(24.2 * var(--mu)); right: auto; top: calc(var(--vh) - (35.8 * var(--mu))); transition: color 0.45s var(--ease), opacity 0.3s var(--ease); }
  .nav.mk-light .nav__maker { color: var(--ink-2); }
  .nav.mk-dark .nav__maker { color: var(--mint); }
  .nav.mk-off:not(.is-open) .nav__maker { opacity: 0; visibility: hidden; transition: color 0.45s var(--ease), opacity 0.3s var(--ease), visibility 0s linear 0.3s; }

  .nav__panel {
    display: block; position: absolute; left: 0; top: 0; width: calc(226.2 * var(--mu)); height: var(--vhl);
    background: rgba(0, 0, 0, 0.9); transform: translateX(-100%); pointer-events: none;
    transition: transform 0.55s var(--ease);
  }
  .nav__menu {
    left: calc(164.2 * var(--mu)); top: calc(30 * var(--mu)); line-height: 24.4px;
    opacity: 0; visibility: hidden; transform: translateX(calc(-226.2 * var(--mu)));
    transition: transform 0.55s var(--ease), opacity 0.35s var(--ease), visibility 0s linear 0.55s;
  }
  .nav__row.is-active::before { top: 12.2px; }
  .nav__row { flex-direction: column; }
  .nav__sub { margin-left: 1.2em; }

  .nav__toggle {
    display: block; position: absolute; right: calc(37.5 * var(--mu) - 22px); top: calc(41.2 * var(--mu) - 22px);
    width: 44px; height: 44px; transition: color 0.45s var(--ease);
  }
  .nav__toggle i {
    position: absolute; left: 50%; top: 50%;
    width: 8.6px; height: 8.6px; margin: -4.3px 0 0 -4.3px;
    border-radius: 50%; background: currentColor;
    transition: transform 0.45s var(--ease), width 0.45s var(--ease), height 0.45s var(--ease), margin 0.45s var(--ease), border-radius 0.45s var(--ease);
  }
  .nav__toggle i:first-child { transform: translateX(-7.75px); }
  .nav__toggle i:last-child  { transform: translateX(7.75px); }

  .nav.is-open { color: var(--mint); }
  .nav.is-open .nav__maker { color: var(--mint); }
  .nav.is-open.on-light .nav__toggle { color: var(--ink-2); }
  .nav.is-open .nav__panel { transform: none; pointer-events: auto; }
  .nav__home { transition: opacity 0.3s var(--ease), visibility 0s linear 0s; }
  .nav.is-open .nav__home { opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s; }   /* the HOME 1-4 test switch would sit under the menu */
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav.is-open .nav__toggle i { width: 15.6px; height: 2px; margin: -1px 0 0 -7.8px; border-radius: 0; }
  .nav.is-open .nav__toggle i:first-child { transform: rotate(45deg); }
  .nav.is-open .nav__toggle i:last-child  { transform: rotate(-45deg); }

  .intro { font-size: 15px; }
  .film__cap--right { left: 20px; right: 20px; top: 24vh; max-width: none; }
  .film__cap--bottom { top: auto; bottom: 14vh; }

  .pintro { height: auto; }
  .pintro__sticky { position: static; height: auto; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 150px 20px 60px; }
  .pintro__device { position: static; width: 82%; margin: 0 auto; }
  .pintro__copy, .pintro__price, .pintro__more { position: static; }
  .pintro__price, .pintro__more { align-self: flex-start; }

  /* Layers (layers part fix p2): title / line / form stacked, 25pt from
     the left. Home: one screen, the whole photo in one 325pt circle at x25
     y225, the stack at the bottom with the rule 62pt above the bottom edge.
     Under the library: the same stack on its own. */
  .layers { padding: 32px 0 24px; }
  .layers--photos {
    display: flex; flex-direction: column; justify-content: flex-end;
    height: var(--vh); min-height: 600px; padding: 0 0 calc(61.8 * var(--mu));
  }
  .layers--photos .layers__bar { position: static; }
  .layers__bar { display: flex; flex-direction: column; gap: calc(6 * var(--mu)); padding: 0 calc(25.3 * var(--mu)); }
  .layers__circle { top: calc(50% - (159.3 * var(--mu))); width: calc(325.3 * var(--mu)); }
  .layers__circle--a { left: calc(25.3 * var(--mu)); background-size: 143.1% auto; background-position: 3.56% 86.7%; }
  .layers__circle--b { display: none; }
  .layers__form { width: calc(288 * var(--mu)); max-width: 100%; margin-left: calc(1.4 * var(--mu)); }
  .layers__field { padding-bottom: calc(7.1 * var(--mu)); }

  .footer { flex-direction: column-reverse; gap: 28px; padding: 48px 20px 32px; }
  .footer__brand { flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: space-between; }
  .footer__logo { margin-top: 0; }
  .footer__cols { flex-wrap: wrap; row-gap: 16px; }
  .footer__cols ul { width: 50%; }

  .dv { min-height: 0; padding: 0 20px 56px; }
  .dv--photo { height: 48vh; padding: 0; }
  .dv__img, .dv__img--future, .dv__img--dual, .dv__img--back, .dv__img--front, .dv__img--top, .dv__img--side, .dv__img--side2, .dv__img--angle, .dv__img--xray { position: relative; left: auto; top: auto; transform: none; width: 92%; margin: 40px auto 0; }
  .dv__copy, .dv__col, .dv__cols { position: static; max-width: none; margin-top: 18px; }
  .dv__col--1 { min-height: 0; padding-bottom: 0; }
  .dv--future { height: auto; padding-top: 80px; text-align: center; }
  .dv--future .dv__img--future { margin-top: 0; }
  .dv__future-title { position: static; margin-top: -8vw; }
  .dv__future-cta { position: static; transform: none; display: inline-block; margin-top: 8px; }
  .dv__ring, .dv__sq, .dv__mount, .dv__wall, .dv__shelf, .dv__glowb { display: none; }
  .dv--rot { height: auto; padding: 0; }
  .dv__stage { position: relative; height: auto; padding: 40px 20px; }
  .dv__rot-img { position: relative; left: auto; top: auto; transform: none; width: 92%; margin: 0 auto; display: none; }
  .dv__rot-img:first-of-type { display: block; opacity: 1; }
  .dv__rot-vimeo { position: relative; inset: auto; width: 100%; aspect-ratio: var(--ratio); }
  .dv__glow { display: none; }


  .order { height: auto; padding: 160px 16px 40px; }
  /* the stage grows with the active view (FAQ answers, details) instead of clipping */
  .order__stage { position: relative; left: auto; top: auto; width: 100%; height: auto; min-height: 50vw; }
  .order__view { position: relative; inset: auto; display: none; opacity: 1; visibility: visible; transition: none; }
  .order__view.is-on { display: block; }
  /* the other mode's view (ACC on the SOL page and vice versa) stays out:
     `display: block` above must not override the hidden attribute */
  .order__view[hidden] { display: none; }
  .order__slides { position: relative; aspect-ratio: 834 / 505; }
  .order__slide { width: 55%; }
  .order__dots { top: auto; bottom: 12px; }
  .order__faq { position: static; padding: 16px 16px 20px; font-size: 14px; }
  .order__details { position: static; padding: 16px; }
  .order__grid { position: static; width: 100%; grid-template-rows: 110px 190px; }
  .order__subtabs { position: static; margin-top: 14px; }
  .order__need { position: static; display: inline-block; margin-top: 10px; }
  .order__panel { position: static; width: auto; margin-top: 28px; }
  .order__acc { position: static; padding: 16px; }

  .lib { height: auto; min-height: 0; padding: 150px 20px 40px; display: flex; flex-direction: column; }
  .lib__nav, .lib__search, .lib__order, .lib__video, .lib__desc { position: relative; left: auto; right: auto; top: auto; max-width: none; }
  .lib__nav { order: 1; }
  .lib__search { order: 2; margin-top: 28px; }
  .lib__search-box { display: flex; align-items: center; gap: 10px; width: auto; height: 32px; margin-left: 10px; }
  .lib__search-field { position: relative; left: auto; order: 2; width: 0; height: 100%; overflow: hidden; transition: width 0.5s var(--ease); }
  .lib__search.is-open .lib__search-field { width: 45vw; }
  .lib__search-btn { position: relative; top: var(--search-dy, 0px); transition: none; }
  .lib__search.is-open .lib__search-btn { transform: none; }
  .lib__video { order: 3; width: 100%; height: auto; aspect-ratio: 648 / 327; margin-top: 16px; }
  .lib__desc { order: 4; width: auto; margin-top: 14px; }
  .lib__order { order: 5; margin-top: 28px; text-align: left; white-space: normal; display: block; }

  .simple { padding: 160px 20px 60px; }
  .simple__copy { position: static; max-width: none; }
  .wiki { margin: 40px 0 0; max-width: none; min-width: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .film__hint { animation: none; }
  .nav { transition: none; }
}