/* FERLUNO showroom — 2026-10-18 rebuild on the section grammar of the internal page blueprint (measured rhythm,
   roles and timings only; own copy, palette, mark and components). 2026-10-20: a light site (the door hero stays a
   night opening) and the shop navigation at the top (categories and types with real product icons).
   Sections: 1 tokens · 2 base & type roles · 3 header: shop navigation, panels, type chips, sheet ·
   4 door hero + portal · 5 blocks · 6 category, groups · 7 product · 8 about, contact, footer · 9 motion · 10 widths. */

/* ------------------------------------------------------------------ 1. tokens */
/* Until Inter arrives (display=swap) the text is set in a local Arial scaled to Inter's measures, so the swap
   does not move the hero copy (CLS) */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

:root {
  /* night palette: the door hero only (and photographs) */
  --ink: #070612;
  --ink-soft: #121027;
  --ink-raised: #1c1835;
  --bone: #f3f2fa;
  --bone-dim: #aaa6bc;
  --violet: #9b8cff;
  /* day palette (contrast on paper / paper-alt, WCAG 2.x) */
  --paper: #ffffff;           /* page, base bands */
  --paper-alt: #f4f3f9;       /* alternate band; tiles on paper (violet-tinted, not a neutral grey) */
  --paper-sunk: #ecebf2;      /* media placeholder, hover on alt surfaces */
  --graphite: #17161f;        /* text-1: 17.9:1 / 16.3:1 */
  --graphite-2: #5c5a69;      /* text-2: 6.7:1 / 6.1:1 */
  --graphite-3: #6b6977;      /* text-3 (legal, codes): 5.4:1 / 4.9:1 */
  --violet-ink: #5641cf;      /* links, eyebrows, focus: 6.9:1 / 6.2:1; white on it 6.9:1 */
  --violet-deep: #4733b8;     /* hover / pressed of violet-ink: 8.6:1 */
  --violet-mark: #6b57e6;     /* wordmark dot, progress fills, current ring (non-text, 5.1:1) */
  --violet-wash: #f0edff;     /* selected item ground, contact band */
  --hair: rgba(23, 22, 31, .10);
  --hair-strong: rgba(23, 22, 31, .22);
  --control-edge: #8a8797;    /* outline of outlined controls: 3.5:1 / 3.2:1 */
  --glass-day: rgba(255, 255, 255, .82);
  --shadow-float: 0 1px 2px rgba(23, 22, 31, .06), 0 12px 32px rgba(23, 22, 31, .10);
  --shadow-panel: 0 2px 6px rgba(23, 22, 31, .05), 0 32px 80px rgba(23, 22, 31, .16);
  --scrim-day: rgba(23, 22, 31, .20);

  /* roles (day) */
  --bg: var(--paper);
  --bg-alt: var(--paper-alt);
  --surface: var(--paper-alt);
  --media-ph: var(--paper-sunk);
  --text-1: var(--graphite);
  --text-2: var(--graphite-2);
  --text-3: var(--graphite-3);
  --link: var(--violet-ink);
  --accent: var(--violet-ink);
  --focus: var(--violet-ink);
  --mark: var(--violet-mark);
  --line: var(--hair);
  --line-strong: var(--hair-strong);
  --btn-bg: var(--graphite);
  --btn-fg: #ffffff;
  --btn-hover-bg: var(--violet-ink);
  --btn-hover-fg: #ffffff;
  --quiet-bg: rgba(23, 22, 31, .06);
  --quiet-hover: rgba(23, 22, 31, .10);
  --hover-bg: rgba(23, 22, 31, .05);

  /* type: Inter 400 / 600, sentence case */
  --font-display: Inter, "Inter Variable", "Inter Fallback", Arial, Helvetica, sans-serif;
  --font-text: Inter, "Inter Variable", "Inter Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-statement: 80px;  --lh-statement: 1.05;  --ls-statement: -0.03em;
  --fs-h2: 48px;         --lh-h2: 1.08;         --ls-h2: -0.02em;
  --fs-stat: 40px;       --lh-stat: 1;
  --fs-card: 28px;       --lh-card: 1.14;
  --fs-lead: 21px;       --lh-lead: 1.38;
  --fs-body: 17px;       --lh-body: 1.47;       --lh-caption: 1.29;
  --fs-meta: 14px;       --lh-meta: 1.29;
  --fs-legal: 12px;      --lh-legal: 1.33;

  /* grid and measures */
  --page: min(1260px, 87.5vw);
  --gutter: max(16px, calc((100% - var(--page)) / 2));
  --measure-intro: 840px;
  --measure-h2: 680px;
  --measure-caption: 460px;
  --measure-long: 1050px;

  /* spacing */
  --sp-chapter: 128px;
  --sp-gallery: 144px;
  --sp-after-autoplay: 200px;
  --sp-eyebrow-statement: 20px;
  --sp-statement-intro: 26px;
  --sp-intro-cta: 16px;
  --sp-lockup-media: 64px;
  --sp-header-media: 48px;
  --sp-media-caption: 24px;
  --gap-tiles: 20px;

  /* shapes (owner decision 2026-10-18: 28 px on tiles and cards, none on chapter media) */
  --r-tile: 28px;
  --r-small: 20px;
  --r-panel: 32px;
  --r-pill: 999px;

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-reveal: cubic-bezier(.455, .03, .515, .955);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-ui: cubic-bezier(.4, 0, .6, 1);
  --ease-hover: cubic-bezier(0, 0, .5, 1);
  --t-reveal-opacity: .9s;
  --t-reveal-move: .7s;
  --reveal-distance: 30px;
  --t-crossfade: .5s;
  --t-caption: .3s;
  --t-hover: .3s;
  --t-nav: .23s;

  /* tiles in rails (≥1069) */
  --tile-h: 480px;
  --tile-wide: 696px;
  --tile-narrow: 372px;
  --slide-w: 833px;
  --slide-h: 707px;
  --card-w: 372px;
  --card-h: 516px;

  /* the header (shop navigation): its slot in the page is always --header-full tall; the fixed bar inside is full at
     the top of a page and compact after the first scroll (home: after the door runway). --header is the bar's
     height now (sticky offsets); the door hero and its portal are laid out under the full bar (--header-full). */
  --nav-row: 52px;            /* wordmark, About, quote */
  --nav-full: 182px;          /* + group labels and the category bar (64 px icons, two-line labels) */
  --nav-compact: 76px;        /* one row: wordmark, the bar (40 px icons, short labels), quote */
  --nav-types: 52px;          /* category routes: the type chips under the compact bar */
  --header-full: var(--nav-full);
  --header: var(--nav-full);
  /* home hero (owner decision 2026-10-18): the pinned door + portal runway is at most ~1.5-2 screens.
     --door-run: scroll that opens the door; --portal-run: scroll of the move-in after it */
  --door-run: 74vh;
  --portal-run: 70vh;
  --stage-h: max(280px, calc(100vh - var(--header-full)));
  color-scheme: light;
}

@supports (height: 100svh) {
  :root {
    --stage-h: max(280px, calc(100svh - var(--header-full)));
  }
}

/* tiles flip with the band: grey tiles on white bands, white tiles on grey bands */
.bg-alt {
  --surface: var(--paper);
}

/* the night scope: the door hero. Targeted directly (js rewrites the hero's class list); .is-night is the same scope
   for markup that a renderer writes (never added afterwards) */
.hero,
.is-night {
  color-scheme: dark;
  --bg: var(--ink);
  --bg-alt: var(--ink-soft);
  --surface: var(--ink-raised);
  --media-ph: var(--ink-raised);
  --text-1: var(--bone);
  --text-2: var(--bone-dim);
  --text-3: rgba(243, 242, 250, .56);
  --link: #c9b6ff;
  --accent: #c9b6ff;
  --focus: #c9b6ff;
  --mark: #c9b6ff;
  --line: rgba(243, 242, 250, .16);
  --line-strong: rgba(243, 242, 250, .32);
  --btn-bg: var(--bone);
  --btn-fg: var(--ink);
  --btn-hover-bg: #c9b6ff;
  --btn-hover-fg: var(--ink);
  --quiet-bg: rgba(243, 242, 250, .1);
  --quiet-hover: rgba(243, 242, 250, .18);
  --hover-bg: rgba(243, 242, 250, .1);
  color: var(--text-1);
}

/* phones held upright (the m/ frame set, js HERO_MQ.portrait): the doorway light fills a third of the screen,
   so its cooling keeps a longer share of the (shorter) runway */
@media (max-aspect-ratio: 7/10) and (max-width: 600px) {
  :root {
    --door-run: 60vh;
    --portal-run: 100vh;
  }
}

/* ------------------------------------------------------------------ 2. base & type roles */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text-1);
}

html {
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video {
  display: block;
  width: 100%;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
}

.page-shell {
  width: var(--page);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--graphite);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* roles (blueprint §1.3) */
.eyebrow-h {
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: -0.01em;
  color: var(--accent);
}

.statement {
  font-family: var(--font-display);
  font-size: var(--fs-statement);
  font-weight: 600;
  line-height: var(--lh-statement);
  letter-spacing: var(--ls-statement);
  color: var(--text-1);
  overflow-wrap: break-word;
}

.h2 {
  max-width: var(--measure-h2);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--text-1);
}

.dot {
  color: var(--mark);
}

.intro-text {
  max-width: var(--measure-intro);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.005em;
  color: var(--text-2);
}

.intro-text p + p {
  margin-top: 1em;
}

.intro-text strong {
  font-weight: 400;
  color: var(--text-1);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
}

.caption {
  max-width: var(--measure-caption);
  font-size: var(--fs-body);
  line-height: var(--lh-caption);
  color: var(--text-2);
}

.caption .cap-lead {
  display: inline;
  font: inherit;
  color: var(--text-1);
}

.caption .cap-text {
  display: inline;
}

.meta {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-2);
}

.legal {
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
  color: var(--text-3);
}

/* text link with a chevron */
.link-chevron {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  color: var(--link);
  font-size: var(--fs-body);
  line-height: 1.24;
}

button.link-chevron {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}

.link-chevron svg {
  width: .5em;
  height: .82em;
  flex: none;
  transform: translateY(.09em);
}

.link-chevron:hover span {
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* buttons: graphite pill (primary; bone inside the night hero) and quiet pill */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.17;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease-hover), color var(--t-hover) var(--ease-hover);
}

.btn:hover {
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
}

.btn--quiet {
  background: var(--quiet-bg);
  color: var(--text-1);
}

.btn--quiet:hover {
  background: var(--quiet-hover);
  color: var(--text-1);
}

.btn--small {
  min-height: 36px;
  padding: 8px 16px;
  font-size: var(--fs-meta);
}

/* ------------------------------------------------------------------ 3. header: shop navigation, panels, type chips, sheet */
/* The header's slot in the page is --header-full tall (the door hero is laid out under it). The bar itself is fixed
   and opaque paper over every route, the night door included (at 88 % white over the stage it read as a grey strip).
   Full (top of a page): the wordmark row, then the 3 group clusters of category links with 64 px product icons.
   Compact (after the first scroll; home: after the door runway): one row, the wordmark, the categories at 40 px with
   short names, the quote; category routes add the type chips. The switch fades and moves the two renderings
   (transform / opacity only); only the bar's own height changes, nothing in the page moves. */
body[data-nav="compact"] {
  --header: var(--nav-compact);
}

body[data-nav="compact"][data-route="category"] {
  --header: calc(var(--nav-compact) + var(--nav-types));
}

.site-header {
  position: relative;
  z-index: 30;
  height: var(--header-full);
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  height: var(--header);
  border-bottom: 1px solid var(--hair);
  background: var(--paper);
  color: var(--text-1);
  color-scheme: light;
  transition: height var(--t-nav) var(--ease-out-cubic);
}

.nav__top {
  position: relative;
  z-index: 2;
  width: var(--page);
  height: var(--nav-row);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  pointer-events: none;
  transition: transform var(--t-nav) var(--ease-out-cubic);
}

/* the row lies over the compact category row: only its own controls take the pointer */
.nav__top > * {
  pointer-events: auto;
}

.wordmark,
.footer-mark {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.wordmark span,
.footer-mark span {
  color: var(--mark);
}

.nav__util {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--fs-meta);
}

.nav__about {
  color: var(--text-2);
  font-weight: 600;
  transition: color var(--t-hover) var(--ease-hover);
}

.nav__about:hover {
  color: var(--text-1);
}

/* tablets / phones: the whole tree in a sheet (desktop has the bar and its panels) */
.nav__all {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--quiet-bg);
  color: var(--text-1);
  font-size: var(--fs-meta);
  font-weight: 600;
  white-space: nowrap;
}

.nav__all:hover {
  background: var(--quiet-hover);
}

.nav__all svg {
  width: 13px;
  height: 13px;
}

.nav__all-short {
  display: none;
}

.nav-quote {
  gap: 0;
  min-height: 36px;
  padding: 8px 16px;
  font-size: var(--fs-meta);
  font-weight: 600;
}

.nav-quote .long {
  margin-right: .26em;
}

/* the category bar (full) */
.nav-bar {
  width: var(--page);
  margin-inline: auto;
}

.nav-groups,
.nav-cats,
.nav-subs,
.nav-mini,
.nav-mini__group,
.nav-types ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-groups {
  display: flex;
  padding-top: 2px;
  transition: visibility 0s linear 0s;
}

/* the full bar fades by its parts: an opacity or transform on the list itself would hide (and re-anchor) the fixed
   panel inside it */
.nav-glabel,
.nav-catlink {
  transition: opacity var(--t-nav) var(--ease-out-cubic), transform var(--t-nav) var(--ease-out-cubic);
}

.nav-group {
  flex: var(--n, 1) 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nav-group + .nav-group {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--hair);
  transition: border-color var(--t-nav) var(--ease-out-cubic);
}

.nav-glabel {
  height: 16px;
  padding-left: 6px;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: .01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-cats {
  display: flex;
}

.nav-cat {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.nav-catlink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px 8px;
  border-radius: 16px;
  color: var(--text-1);
  text-align: center;
}

/* a product icon: a cut-out on its tile (the contact shadow is css, so one file works on any ground) */
.nav-ico {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s, 64px);
  height: var(--s, 64px);
  overflow: hidden;
  border-radius: calc(var(--s, 64px) * .28);
  background: var(--paper-alt);
  transition: background-color var(--t-hover) var(--ease-hover);
}

.nav-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1.5px 1.5px rgba(23, 22, 31, .16));
  transition: transform var(--t-hover) var(--ease-out-cubic);
}

/* no checked cut-out yet: the model's catalogue photo, cropped to the tile */
.nav-ico img.is-photo {
  object-fit: cover;
  filter: none;
}

.nav-ico::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow var(--t-hover) var(--ease-hover);
}

/* "All": the first three type icons fanned in one tile */
.nav-ico--all img {
  position: absolute;
  top: 18%;
  width: 64%;
  height: 64%;
}

.nav-ico--all img:nth-child(1) {
  left: 0;
  transform: scale(.84);
}

.nav-ico--all img:nth-child(2) {
  right: 0;
  transform: scale(.84);
}

.nav-ico--all img:nth-child(3) {
  left: 18%;
  z-index: 1;
}

.nav-label {
  display: -webkit-box;
  max-width: 108px;
  min-height: 32px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nav-label__short {
  display: none;
}

.nav-cat:hover .nav-ico,
.nav-cat.is-open .nav-ico,
.nav-mini__item:hover .nav-ico,
.nav-mini__item.is-open .nav-ico {
  background: var(--paper-sunk);
}

.nav-cat:hover .nav-catlink .nav-ico img,
.nav-cat.is-open .nav-catlink .nav-ico img,
.nav-mini__item:hover .nav-ico img {
  transform: translateY(-2px) scale(1.05);
}

.nav-cat.is-current .nav-catlink .nav-ico::after,
.nav-mini__item.is-current .nav-ico::after,
.nav-sub[aria-current="page"] .nav-ico::after {
  box-shadow: inset 0 0 0 2px var(--violet-mark);
}

.nav-cat.is-current .nav-label,
.nav-mini__item.is-current .nav-mini__label {
  color: var(--violet-ink);
}

/* the open category: a paper caret joins its tile to the panel below the bar */
.nav-cat.is-open .nav-catlink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  z-index: 41;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--paper);
  box-shadow: -1px -1px 0 var(--hair);
  transform: rotate(45deg);
}

/* the disclosure button of a category's panel: keyboard (focus-visible) and touch screens only; a mouse opens the
   panel by hovering */
.nav-more {
  position: absolute;
  top: 0;
  right: calc(50% - 44px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(23, 22, 31, .18);
  color: var(--text-1);
  opacity: 0;
  pointer-events: none;
}

.nav-more svg {
  width: 10px;
  height: 10px;
  transition: transform .3s var(--ease-ui);
}

.nav-more[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-more:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

@media (hover: none) and (min-width: 1069px) {
  .nav-more {
    opacity: 1;
    pointer-events: auto;
  }
}

/* the compact row: 40 px icons and short names between the wordmark and the quote */
.nav-mini {
  position: absolute;
  top: 0;
  left: calc(var(--gutter) + 132px);
  right: calc(var(--gutter) + 176px);
  z-index: 1;
  height: var(--nav-compact);
  display: flex;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-nav) var(--ease-out-cubic), transform var(--t-nav) var(--ease-out-cubic), visibility 0s linear var(--t-nav);
}

.nav-mini::-webkit-scrollbar {
  display: none;
}

.nav-mini__group {
  display: flex;
  flex: none;
}

.nav-mini__group + .nav-mini__group {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid var(--hair);
}

.nav-mini__item {
  flex: none;
  width: 80px;
}

.nav-minilink {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  padding: 9px 2px 0;
  color: var(--text-1);
}

.nav-mini__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-nav="compact"] .nav__top {
  transform: translateY(calc((var(--nav-compact) - var(--nav-row)) / 2));
}

body[data-nav="compact"] .nav__about {
  visibility: hidden;
}

body[data-nav="compact"] .nav-groups {
  visibility: hidden;
  transition-delay: var(--t-nav);
  pointer-events: none;
}

body[data-nav="compact"] .nav-glabel,
body[data-nav="compact"] .nav-catlink {
  opacity: 0;
  transform: translateY(-12px);
}

body[data-nav="compact"] .nav-group + .nav-group {
  border-left-color: transparent;
}

body[data-nav="compact"] .nav-mini {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* the panel of a category stays usable while the full bar it lives in is hidden (compact state) */
.nav-panel {
  position: fixed;
  top: var(--header);
  left: 50%;
  z-index: 39;
  width: var(--page);
  max-height: calc(100vh - var(--header) - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 28px 32px 30px;
  border-top: 1px solid var(--hair);
  border-radius: 0 0 var(--r-tile) var(--r-tile);
  background: var(--paper);
  box-shadow: var(--shadow-panel);
  color: var(--text-1);
  text-align: left;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%);
}

.nav-panel:not([hidden]) {
  animation: nav-panel-in var(--t-nav) var(--ease-out-cubic);
}

.nav-panel[hidden] {
  display: none;
}

@keyframes nav-panel-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}

.nav-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 20px;
}

.nav-panel__group {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

.nav-panel__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.nav-panel__count {
  color: var(--text-3);
  font-size: var(--fs-meta);
}

.nav-panel__all {
  margin-left: auto;
  font-size: var(--fs-meta);
  font-weight: 600;
}

.nav-panel__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 32px;
  align-items: start;
}

.nav-panel.is-wide .nav-panel__body {
  grid-template-columns: minmax(0, 1fr);
}

.nav-subs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 12px;
}

.nav-panel.is-wide .nav-subs {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.nav-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 6px 12px;
  border-radius: 22px;
  color: var(--text-1);
  text-align: center;
  transition: background-color var(--t-hover) var(--ease-hover);
}

.nav-sub .nav-ico {
  border-radius: 24px;
}

.nav-sub:hover .nav-ico {
  background: var(--paper-sunk);
}

.nav-sub:hover .nav-ico img {
  transform: translateY(-2px) scale(1.05);
}

.nav-sub__label {
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 18px;
}

.nav-sub__count {
  margin-top: -6px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 14px;
}

.nav-feat {
  padding-left: 28px;
  border-left: 1px solid var(--hair);
}

.nav-feat__label {
  margin-bottom: 12px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}

.nav-feat ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-feat img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  background: var(--paper-sunk);
  transition: transform .5s var(--ease-hover);
}

.nav-feat a {
  display: block;
  color: var(--text-1);
}

.nav-feat span {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
}

.nav-feat small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

/* category routes, compact: the type chips under the row */
.nav-types {
  position: absolute;
  top: var(--nav-compact);
  left: 0;
  right: 0;
  height: var(--nav-types);
  border-top: 1px solid var(--hair);
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-nav) var(--ease-out-cubic), visibility 0s linear var(--t-nav);
}

.nav-types[hidden] {
  display: none;
}

body[data-nav="compact"][data-route="category"] .nav-types {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.nav-types ul {
  width: var(--page);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-types ul::-webkit-scrollbar {
  display: none;
}

.nav-types li {
  flex: none;
}

.type-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 4px;
  border-radius: var(--r-pill);
  background: var(--paper-alt);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease-hover), box-shadow var(--t-hover) var(--ease-hover);
}

.type-chip .nav-ico {
  border-radius: var(--r-pill);
  background: var(--paper);
}

.type-chip small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 400;
}

.type-chip:hover {
  background: var(--paper-sunk);
}

.type-chip.is-spy {
  background: var(--violet-wash);
  box-shadow: inset 0 0 0 1.5px var(--violet-mark);
}

.type-chip[aria-current="page"] {
  background: var(--graphite);
  box-shadow: none;
  color: #fff;
}

.type-chip[aria-current="page"] small {
  color: rgba(255, 255, 255, .74);
}

/* the "All categories" sheet: the whole tree expanded (tablets, phones) */
.nav-sheet {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  background: var(--paper);
  color: var(--text-1);
  color-scheme: light;
}

.nav-sheet::backdrop {
  background: var(--scrim-day);
}

.nav-sheet[open] {
  animation: sheet-fade .18s ease-out;
}

@keyframes sheet-fade {
  from {
    opacity: 0;
  }
}

.nav-sheet__top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 max(16px, calc((100% - 760px) / 2));
  border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.nav-sheet__title {
  font-size: 17px;
  line-height: 1.2;
}

.nav-sheet__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--quiet-bg);
  color: var(--text-1);
}

.nav-sheet__close:hover {
  background: var(--quiet-hover);
}

.nav-sheet__close svg {
  width: 13px;
  height: 13px;
}

.nav-sheet__body {
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: 40px;
}

.nav-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 24px 16px 0;
  font-size: var(--fs-meta);
}

.nav-sheet__foot a {
  color: var(--link);
  font-weight: 600;
}

/* the tree (the sheet; larger on the #collections / #group-<id> pages) */
.tree__group {
  padding: 20px 0 4px;
}

.tree__glabel {
  padding: 0 16px;
  color: var(--text-3);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: .01em;
}

.tree__glabel a:hover {
  color: var(--text-1);
}

.tree__cat {
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--hair);
}

.tree__catrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  color: var(--text-1);
}

.tree__catname {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
}

.tree__catname small {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 400;
}

.tree__all {
  margin-left: auto;
  color: var(--link);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.tree__subs {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 2px 80px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.tree__subs::-webkit-scrollbar {
  display: none;
}

.tree__subs li {
  flex: none;
}

.tree__subs a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 76px;
  color: var(--text-1);
  text-align: center;
}

.tree__sublabel {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tree__subcount {
  margin-top: -3px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 14px;
}

.tree a:hover .nav-ico {
  background: var(--paper-sunk);
}

main {
  min-height: calc(100vh - var(--header-full));
}

.loading-view,
.error-view {
  min-height: calc(100vh - var(--header-full));
  display: grid;
  place-items: center;
  text-align: center;
}

.loading-view p {
  font-weight: 600;
  letter-spacing: .2em;
}

.error-view {
  align-content: center;
  gap: 20px;
}

.error-view a {
  color: var(--link);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ 4. door hero + portal */
/* Home hero "The Door Opens" (the night scope, §1): a pinned stage over a scroll runway; js/showroom.js scrubs the frame
   sequence (media/hero-door/) on the canvas while the copy fades out. The runway is --door-run (the door)
   + --portal-run (the next block comes through it): ~1.5 screens on a desktop, ~1.6 on a phone. */
.hero {
  position: relative;
  background: var(--ink);
}

.hero.hero--door:not(.is-still) {
  height: calc(var(--stage-h) + var(--door-run) + var(--portal-run));
  /* the night is the pinned stage's own ground: the runway's last screen (header already compact, stage un-pinned)
     shows the day page, never an ink band under the bar */
  background: var(--paper);
}

.hero-stage {
  position: sticky;
  top: var(--header-full);
  height: calc(100vh - var(--header-full));
  height: calc(100svh - var(--header-full));
  min-height: 280px;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero.is-still .hero-stage {
  position: relative;
  top: auto;
}

.hero-lqip,
.hero-poster,
.hero-poster img,
.hero-canvas,
.hero-scrim,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* js/showroom.js places the poster and the placeholder on the exact rect the canvas draws at the first frame */
.hero-poster img {
  max-width: none;
  object-fit: cover;
  object-position: 100% 0%;
}

/* ~0.3 KB blurred frame (manifest.lqip) under the poster while it downloads */
.hero-lqip {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: blur(12px);
}

.hero-canvas {
  display: block;
}

/* Move-in through the open door (sequence only; js drives transform + opacity, nothing else):
   .hero-dim  - the facade falls into shadow around the doorway (a fixed vignette, opacity only);
   .hero-bloom - the foyer light in the doorway gap and its spill on the jambs ("screen" while it runs). */
.hero-dim,
.hero-bloom {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.hero-dim {
  inset: 0;
  background: radial-gradient(ellipse 62% 74% at 50% 48%, rgba(7, 6, 18, .22) 0%, rgba(7, 6, 18, .6) 42%,
    rgba(7, 6, 18, .9) 72%, rgba(7, 6, 18, .97) 100%);
}

.hero-bloom {
  top: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  transform-origin: 0 0;
  background: radial-gradient(closest-side, rgba(255, 220, 170, .92) 0%, rgba(255, 196, 128, .62) 34%,
    rgba(240, 156, 86, .26) 64%, rgba(214, 120, 60, .08) 84%, rgba(200, 110, 50, 0) 100%);
}

.hero-scrim,
.hero-shade {
  pointer-events: none;
}

/* side layout: copy in a left column that stays clear of the door at the first frame */
.hero-scrim {
  background: linear-gradient(90deg, rgba(7, 6, 18, .86) 0, rgba(7, 6, 18, .72) calc(var(--copy-r, 40vw) * .7),
    rgba(7, 6, 18, .4) var(--copy-r, 40vw), rgba(7, 6, 18, 0) var(--door-l, 50vw));
}

.hero-shade {
  background: linear-gradient(0deg, var(--ink) 0, rgba(7, 6, 18, .6) 4%, rgba(7, 6, 18, 0) 11%);
}

.hero-copy {
  position: relative;
  padding-block: 40px clamp(48px, 9vh, 104px);
}

.hero-copy__inner {
  max-width: min(40vw, 600px);
}

.hero-name {
  font-family: var(--font-text);
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.19;
  letter-spacing: -0.01em;
}

/* the statement's lines are set in the data (\n): never re-wrapped, the font shrinks instead (js fitHeading), so
   a narrow column next to the door keeps "Metalwork / with presence." on its two lines */
.hero-statement {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(40px, min(5.6vw, 10.5vh), 80px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: var(--ls-statement);
  white-space: nowrap;
}

.hero-meta {
  margin-top: 14px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: rgba(243, 242, 250, .88);
  text-wrap-style: balance;
}

.hero-intro {
  max-width: 30rem;
  margin-top: 18px;
  color: rgba(243, 242, 250, .84);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.42;
}

.hero-cta {
  margin-top: 22px;
}

/* the glass plate: the only text that sits on the photograph (blueprint §1.4) */
.hero-plate {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  max-width: 100%;
  margin-top: 22px;
  padding: 8px 8px 8px 20px;
  border-radius: var(--r-pill);
  background: rgba(22, 19, 41, .62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(243, 242, 250, .12);
}

.hero-plate p {
  min-width: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: rgba(243, 242, 250, .9);
  text-wrap-style: balance;
}

/* band layout (phones, portrait screens, narrow windows): copy in a band below the door */
.hero[data-hero-layout="band"] .hero-scrim {
  background: linear-gradient(0deg, rgba(7, 6, 18, .92) 0%, rgba(7, 6, 18, .76) 16%, rgba(7, 6, 18, .3) 28%, rgba(7, 6, 18, 0) 37%);
}

.hero[data-hero-layout="band"] .hero-copy {
  padding-block: 24px max(22px, env(safe-area-inset-bottom));
}

.hero[data-hero-layout="band"] .hero-copy__inner {
  max-width: 560px;
}

.hero[data-hero-layout="band"] .hero-name {
  font-size: 17px;
}

.hero[data-hero-layout="band"] .hero-statement {
  margin-top: 6px;
  font-size: clamp(34px, 10vw, 56px);
  line-height: 1.08;
}

.hero[data-hero-layout="band"] .hero-intro {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.42;
}

.hero[data-hero-layout="band"] .hero-meta {
  margin-top: 8px;
}

.hero[data-hero-layout="band"] .hero-cta {
  margin-top: 12px;
}

.hero[data-hero-layout="band"] .hero-plate {
  margin-top: 14px;
}

/* compact: too little height next to / under the door for the full copy -> no subline;
   tight: still too little -> no meta, plate text or link either, a smaller statement */
.hero[data-hero-compact="true"] .hero-intro,
.hero[data-hero-compact="tight"] .hero-intro,
.hero[data-hero-compact="tight"] .hero-meta,
.hero[data-hero-compact="tight"] .hero-cta,
.hero[data-hero-compact="tight"] .hero-plate p {
  display: none;
}

/* lean (band only): the plate's line goes, the name, statement, meta line and links stay */
.hero[data-hero-compact="lean"] .hero-intro,
.hero[data-hero-compact="lean"] .hero-plate p {
  display: none;
}

/* with its line gone the plate is just its button: no glass capsule around it */
.hero[data-hero-compact="lean"] .hero-copy__inner .hero-plate,
.hero[data-hero-compact="tight"] .hero-copy__inner .hero-plate {
  width: auto;
  padding: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero[data-hero-layout="band"][data-hero-compact="lean"] .hero-statement {
  font-size: clamp(34px, 10.3vw, 48px);
}

.hero[data-hero-layout="band"][data-hero-compact="lean"] .hero-plate {
  margin-top: 16px;
}

/* lean / tight: the small name (the page's h1) stays for screen readers only, it takes no room under the door
   (the wordmark is in the header right above) */
.hero[data-hero-compact="lean"] .hero-name,
.hero[data-hero-compact="tight"] .hero-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero[data-hero-compact="lean"] .hero-statement,
.hero[data-hero-compact="tight"] .hero-statement {
  margin-top: 0;
}

.hero[data-hero-layout="band"][data-hero-compact="true"] .hero-statement {
  font-size: clamp(30px, 8.6vw, 44px);
}

.hero[data-hero-layout="band"][data-hero-compact="tight"] .hero-copy {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.hero[data-hero-layout="band"][data-hero-compact="tight"] .hero-statement {
  font-size: clamp(34px, 10.3vw, 40px);
}

.hero[data-hero-compact="tight"] .hero-plate {
  margin-top: 10px;
}

.hero[data-hero-layout="side"][data-hero-compact="true"] .hero-copy {
  padding-block: 16px clamp(20px, 6vh, 56px);
}

.hero[data-hero-layout="side"][data-hero-compact="tight"] .hero-copy {
  padding-block: 12px clamp(16px, 4vh, 40px);
}

/* Portal: right after the door hero, the first chapter's lockup is a stage-high box pinned under the header
   over the end of the hero runway (the wrapper overlaps the runway by stage + --portal-run + --portal-lead,
   the open-door pause measured by js). While it comes through the door (.is-moving) the window has a fixed
   feathered mask and js moves and scales only transforms. With no class and no inline styles it is the landed
   state: plain page content. Anywhere else (still hero, reduced motion, Save-Data) it is a plain wrapper. */
.portal,
.portal__window {
  position: relative;
}

.portal__veil,
.portal__bg,
.portal-run__spacer {
  display: none;
}

.hero--door:not(.is-still) + .portal-run {
  position: relative;
  margin-top: calc(-1 * (var(--stage-h) + var(--portal-run) + var(--portal-lead, 0px)));
  /* the wrapper lies over the whole pinned stage (it is pulled up over the runway): it must not take the clicks
     and taps meant for the hero's buttons; only the portal box itself is interactive */
  pointer-events: none;
}

.hero--door:not(.is-still) + .portal-run > .portal {
  pointer-events: auto;
}

/* while the door is still closed the portal box is clipped away (inset 50%): no hits either */
.hero--door:not(.is-still) + .portal-run > .portal[style*="inset(50%)"] {
  pointer-events: none;
}

.hero--door:not(.is-still) + .portal-run > .portal {
  position: sticky;
  top: var(--header-full);
  overflow: hidden;
  overflow: clip;
}

.hero--door:not(.is-still) + .portal-run .portal__window {
  transform-origin: 0 0;
}

.hero--door:not(.is-still) + .portal-run .portal__bg {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-origin: 0 0;
  /* through the doorway: the day page */
  background: var(--paper);
}

/* the section inside the portal has no ground of its own (portal__bg is the ground): its box never shows as a hard
   rectangle in the doorway light */
.portal .blk {
  background: transparent;
}

.hero--door:not(.is-still) + .portal-run .portal__content {
  position: relative;
  z-index: 1;
  min-height: var(--stage-h);
  display: grid;
  align-content: center;
  transform-origin: 0 0;
}

.hero--door:not(.is-still) + .portal-run .blk--portal {
  padding-block: 40px;
}

.hero--door:not(.is-still) + .portal-run .portal__veil {
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 1000px;
  height: 1000px;
  opacity: 0;
  pointer-events: none;
  transform-origin: 0 0;
}

.hero--door:not(.is-still) + .portal-run > .portal.is-moving > .portal__window {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  will-change: transform;
}

.portal.is-moving .portal__bg {
  will-change: transform;
}

.portal.is-moving .portal__veil,
.portal.is-moving .portal__content {
  will-change: transform, opacity;
}

.portal__veil > i {
  position: absolute;
  inset: 0;
}

.portal__amber {
  background: radial-gradient(closest-side, rgba(236, 156, 82, 1) 0%, rgba(214, 130, 62, .94) 40%,
    rgba(160, 90, 40, .62) 72%, rgba(96, 52, 26, 0) 100%);
}

.portal__core {
  background: radial-gradient(closest-side, rgba(255, 236, 206, 1) 0%, rgba(255, 216, 166, .9) 32%,
    rgba(248, 186, 118, .5) 64%, rgba(232, 152, 86, 0) 100%);
}

.hero--door:not(.is-still) + .portal-run > .portal-run__spacer {
  display: block;
  height: calc(var(--portal-run) + var(--portal-lead, 0px));
}

/* ------------------------------------------------------------------ 5. blocks (home grammar) */
.blk {
  position: relative;
  padding-block: var(--sp-chapter);
  background: var(--bg);
}

.blk.bg-alt {
  background: var(--bg-alt);
}

.blk--carousel,
.blk--cards,
.blk--values,
.blk--faq,
.blk--siblings {
  padding-block: var(--sp-gallery);
}

.blk--autoplay {
  padding-block: var(--sp-chapter) var(--sp-after-autoplay);
}

.blk.is-flush {
  padding-top: 0;
}

.blk--chapter.has-then {
  padding-bottom: var(--sp-chapter);
}

.blk--portal {
  padding-block: var(--sp-chapter) 0;
}

.blk--portal + .chapter-rest {
  padding-top: var(--sp-lockup-media);
}

/* After the door: the landed portal box is a stage high with the lockup centred in it; the chapter's media comes
   up into the empty part under the lockup (js: --portal-tail = box bottom - last line), so lockup -> media is the
   blueprint's --sp-lockup-media (the media's own margin). It waits (hidden) until the portal has landed, so
   nothing of it shows over the door during the move-in. */
.hero--door:not(.is-still) + .portal-run + .chapter-rest {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--portal-tail, 0px));
  padding-top: 0;
  background: transparent;
}

.hero--door:not(.is-still) + .portal-run:is([data-phase="moving"], [data-phase="lite"]) + .chapter-rest {
  visibility: hidden;
}

/* the lockup: eyebrow -> statement -> intro -> links */
.lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lockup--center {
  align-items: center;
  text-align: center;
}

.lockup--center .intro-text {
  margin-inline: auto;
}

.lockup > * + .statement {
  margin-top: var(--sp-eyebrow-statement);
}

.lockup > * + .intro-text {
  margin-top: var(--sp-statement-intro);
}

.lockup__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin-top: calc(var(--sp-intro-cta) + 10px);
}

.lockup--center .lockup__links {
  justify-content: center;
}

.lockup--left .intro-text {
  max-width: 760px;
}

.chapter__media {
  margin-top: var(--sp-lockup-media);
}

.chapter__after {
  margin-top: var(--sp-lockup-media);
}

.chapter__after .intro-text {
  margin-inline: auto;
  text-align: center;
}

.chapter__after.is-left .intro-text {
  margin-inline: 0;
  text-align: left;
}

.chapter__after .lockup__links {
  justify-content: center;
}

.chapter__after.is-left .lockup__links {
  justify-content: flex-start;
}

/* media: a frame with a focus point; chapter media is never rounded, tiles are. Photos are never brightened,
   letterboxed or shadowed on paper: a dark photo stays a lit window in its rounded frame */
.media {
  position: relative;
  overflow: hidden;
  background: var(--media-ph);
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 50%) var(--fy, 50%);
}

.media.is-contain img,
.media.is-contain video {
  object-fit: contain;
}

/* a product without background (transparent cut-out) stands on the page colour: no surface, no rounding */
.media.is-cutout,
.card__media.media {
  background: transparent;
  border-radius: 0;
}

/* a 1 px inner hairline over tiles, so the few near-white photo edges keep their shape on paper */
.tile .media::after,
.model .media::after,
.mosaic__media:not(.is-cutout)::after,
.step__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(23, 22, 31, .06);
  pointer-events: none;
}

.media--chapter {
  aspect-ratio: var(--ar, 1260 / 800);
  max-height: 86vh;
}

.chapter__media--full .media--chapter {
  width: var(--page);
  margin-inline: auto;
}

.chapter__media--medium .media--chapter {
  width: min(var(--page), 73vw);
  margin-inline: auto;
}

.chapter__media--narrow .media--chapter {
  width: min(var(--page), 56vw);
  margin-inline: auto;
}

.chapter__media--bleed .media--chapter {
  width: 100%;
  max-height: 92vh;
}

/* wider than the page, cropped at the window's edges */
.chapter__media--wide {
  overflow: hidden;
}

.chapter__media--wide .media--chapter {
  width: 124%;
  margin-left: -12%;
  aspect-ratio: 1786 / 900;
  max-height: none;
}

/* several frames side by side (F03: three doors) */
.media-row {
  width: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  gap: var(--gap-tiles);
}

.media-row .media--chapter {
  aspect-ratio: 3 / 4;
  max-height: none;
}

/* one-shot video controls */
.media__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--glass-day);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(23, 22, 31, .14);
  color: var(--graphite);
}

/* over a photo the focus ring gets a white halo (violet-ink alone is ~3:1 against a dark photo) */
.media__toggle:focus-visible {
  box-shadow: 0 0 0 5px #fff;
}

.media__toggle svg {
  width: 14px;
  height: 14px;
}

.media__toggle:hover {
  background: rgba(255, 255, 255, .96);
}

.media video {
  transition: opacity .4s ease-out;
}

/* section head: h2 on the left, link on the right */
.blk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
}

.blk-head .h2 {
  flex: 1 1 420px;
}

.blk-head__link {
  flex: none;
  padding-bottom: 6px;
}

.blk-head__intro {
  flex-basis: 100%;
  max-width: var(--measure-intro);
  margin-top: 4px;
}

.blk-head + .rail,
.blk-head + .autoplay,
.blk-head + .tiles,
.blk-head + .faq,
.blk-head + .values-grid {
  margin-top: var(--sp-header-media);
}

/* horizontal snap rails (blueprint E / m4) */
.rail {
  position: relative;
}

.rail__track {
  display: flex;
  gap: var(--gap-tiles);
  margin: 0;
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.rail__track::-webkit-scrollbar {
  display: none;
}

.rail__item {
  flex: none;
  width: var(--tile-narrow);
  scroll-snap-align: start;
}

.rail__item--wide {
  width: var(--tile-wide);
}

.rail__item--slide {
  width: var(--slide-w);
}

.rail__item--card {
  width: var(--card-w);
}

.tile {
  display: block;
  color: inherit;
}

.tile .media {
  height: var(--tile-h);
  border-radius: var(--r-tile);
  transform: translateZ(0);
}

.rail__item--slide .tile .media {
  height: auto;
  aspect-ratio: 833 / 707;
}

.tile .media img {
  transition: transform .6s var(--ease-hover);
}

a.tile:hover .media img {
  transform: scale(1.03);
}

.tile + .caption,
.tile-cell .caption {
  margin-top: var(--sp-media-caption);
  padding-right: 12px;
}

.rail__controls {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 28px;
}

.paddle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--quiet-bg);
  color: var(--text-1);
  transition: background-color var(--t-hover) var(--ease-hover), opacity var(--t-hover);
}

.paddle svg {
  width: 9px;
  height: 15px;
}

.paddle:hover:not(:disabled) {
  background: var(--quiet-hover);
}

.paddle:disabled {
  opacity: .36;
  cursor: default;
}

.rail.is-static .rail__controls {
  visibility: hidden;
}

/* a rail of 4 or fewer items stands as a static row: nothing to page or swipe */
.tile-row__list {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 32px var(--gap-tiles);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile-row .rail__item {
  width: auto;
  min-width: 0;
}

.tile-row .tile .media {
  height: auto;
  aspect-ratio: 4 / 5;
}

.tile-row .rail__item--wide .tile .media,
.tile-row .rail__item--slide .tile .media {
  aspect-ratio: 3 / 2;
}

.blk-head + .tile-row {
  margin-top: var(--sp-header-media);
}

/* autoplay highlights rail (blueprint B / m3) */
.autoplay {
  position: relative;
}

.autoplay .rail__track {
  scroll-snap-type: x mandatory;
}

.autoplay__item {
  flex: none;
  width: min(88vw, 1260px);
  scroll-snap-align: center;
}

.autoplay .rail__track {
  scroll-padding-inline: 0;
  padding-inline: max(16px, calc((100% - min(88vw, 1260px)) / 2));
}

.autoplay__card {
  position: relative;
  display: block;
  color: var(--text-1);
}

/* the frame (2.06:1, rounded); the title sits under it as its caption (the light frames carry no ink field) */
.autoplay__card .media {
  position: relative;
  aspect-ratio: 2.06 / 1;
  overflow: hidden;
  border-radius: var(--r-tile);
  transform: translateZ(0);
}

.autoplay__card .media img {
  transform: scale(1.06);
  transition: transform 6s linear;
}

.autoplay__item.is-current .autoplay__card .media img,
.autoplay.is-static .autoplay__card .media img {
  transform: scale(1);
}

.autoplay__title {
  margin-top: 20px;
  padding-inline: 4px;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
}

/* the autoplay control (own design, not a floating capsule): a row under the cards with a counter, a segmented
   hairline (one step per card; the current one fills over the dwell) and a text button */
.autoplay__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}

.autoplay__count {
  flex: none;
  min-width: 4.6em;
  font-size: var(--fs-meta);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--text-2);
}

.autoplay__count span {
  color: var(--text-1);
}

.autoplay__steps {
  flex: 1;
  display: flex;
  gap: 6px;
  max-width: 520px;
}

/* each step is a 44 px tall target; the visible line is 2 px */
.ap-step {
  flex: 1;
  min-width: 24px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  align-items: center;
}

.ap-step i {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background: rgba(23, 22, 31, .16);
  transition: background-color .3s;
}

.ap-step:hover i {
  background: rgba(23, 22, 31, .32);
}

.ap-step b {
  position: absolute;
  inset: 0;
  background: var(--mark);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.autoplay.is-static .ap-step[aria-current="true"] b {
  transform: none;
}

.ap-toggle {
  flex: none;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--link);
  font-size: var(--fs-body);
}

.ap-toggle:hover {
  text-decoration: underline;
  text-underline-offset: .18em;
}

.autoplay.is-static .ap-toggle {
  display: none;
}

/* tiles grid (L / M / S mixes) */
.tiles {
  display: grid;
  gap: 32px var(--gap-tiles);
}

.tiles--thirds {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tiles--halves {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tiles--l-s {
  grid-template-columns: 2fr 1fr;
}

.tiles--s-l {
  grid-template-columns: 1fr 2fr;
}

.tiles--l-m-s {
  grid-template-columns: 5fr 4fr 3fr;
}

.tile-cell .media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-tile);
}

.tiles--l-s .tile-cell:first-child .media,
.tiles--s-l .tile-cell:last-child .media,
.tiles--halves .tile-cell .media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
}

.tiles--l-s .tile-cell,
.tiles--s-l .tile-cell,
.tiles--halves .tile-cell {
  display: grid;
  grid-template-rows: 1fr auto;
}

.tile-cell .caption {
  max-width: none;
}

.tile-cell .meta {
  margin-top: 4px;
}

.blk .tiles-wrap {
  margin-top: var(--sp-lockup-media);
}

/* stats */
.stats-block {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 40px 80px;
  align-items: start;
}

.stats-block.is-solo {
  grid-template-columns: 1fr;
}

.stats-block .intro-text {
  max-width: 640px;
}

.stats-block__text .h2 + .intro-text {
  margin-top: 22px;
}

.stats-block__icon {
  display: block;
  margin-bottom: 20px;
  color: var(--accent);
}

.stats-block__icon svg {
  width: 44px;
  height: 44px;
}

.stats-block__text .lockup__links {
  margin-top: 18px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
}

.stat {
  min-width: 140px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 600;
  line-height: var(--lh-stat);
  letter-spacing: -0.02em;
}

.stat--text .stat__value {
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}

.stat__label {
  max-width: 200px;
  margin-top: 8px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--text-2);
}

.then {
  margin-top: var(--sp-lockup-media);
}

.then > * + * {
  margin-top: var(--sp-chapter);
}

.then > .then-item--photo + *,
.then > * + .then-item--photo {
  margin-top: var(--sp-lockup-media);
}

/* band: rounded raised plate with two photos and a line */
.band {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 24px;
  border-radius: var(--r-panel);
  background: var(--surface);
}

.band__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.band__media .media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-small);
}

.band__text {
  padding: 16px 24px 16px 0;
}

.band__line {
  font-size: var(--fs-card);
  line-height: var(--lh-card);
}

.band .stat {
  margin-top: 28px;
}

.band .link-chevron {
  margin-top: 24px;
}

/* full-width photo, no rounding */
.then-photo .media {
  height: min(67vw, 965px);
}

.then-photo.is-bleed {
  width: 100%;
}

/* parallax pair (one per page, m8) */
.parallax {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 0 var(--gap-tiles);
  align-items: start;
}

.parallax__back .media,
.parallax__front .media {
  border-radius: var(--r-tile);
  aspect-ratio: 4 / 5;
}

.parallax__back,
.parallax__front {
  will-change: transform;
}

.parallax__side {
  display: grid;
  gap: 48px;
  padding-top: 18%;
}

.parallax__front .media {
  aspect-ratio: 1 / 1;
}

/* steps of a process (the "tabs" data): all side by side, each with its media and caption */
.steps__list {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 40px var(--gap-tiles);
  margin: var(--sp-header-media) 0 0;
  padding: 0;
  list-style: none;
}

.step {
  min-width: 0;
}

.step__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-tile);
  transform: translateZ(0);
}

.step__label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
}

.step__n {
  color: var(--accent);
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.step__text {
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-caption);
}

/* close-ups (detail): the whole piece beside its curated close-ups, all at once */
.mosaic {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 40px var(--gap-tiles);
  align-items: start;
}

.blk-head + .mosaic {
  margin-top: var(--sp-header-media);
}

.mosaic__media {
  border-radius: var(--r-tile);
  transform: translateZ(0);
}

.mosaic__media--whole,
.mosaic__media--whole.is-cutout {
  aspect-ratio: var(--ar, .6);
  max-height: 82vh;
  border-radius: var(--r-tile);
  background: var(--surface);
}

.mosaic__media--whole.is-contain img {
  padding: 6% 8%;
}

.mosaic__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px var(--gap-tiles);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mosaic__item .mosaic__media {
  aspect-ratio: 1 / 1;
}

.mosaic__caption {
  max-width: none;
  margin-top: 14px;
}

/* the piece's own caption and link close the grid */
.mosaic__note {
  align-self: end;
  padding: 0 4px 6px;
}

.mosaic__note .mosaic__caption {
  margin-top: 0;
}

.mosaic__link {
  margin-top: 14px;
}

/* cards row (blueprint F) + their sheet */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: var(--card-h);
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--surface);
  transition: transform var(--t-hover) var(--ease-hover);
}

.card:hover {
  transform: scale(calc((var(--card-w-px, 372) + 6) / var(--card-w-px, 372)));
}

.card__body {
  padding: 30px 30px 0;
}

.card__label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--accent);
}

.card__title {
  margin-top: 8px;
}

.card__text {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-2);
}

.card__media {
  flex: 1;
  min-height: 0;
  margin-top: 22px;
}

.card__media.media {
  background: transparent;
}

/* values: three cards with icons */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-tiles);
}

.value {
  padding: 36px 32px 40px;
  border-radius: var(--r-tile);
  background: var(--surface);
}

.value svg {
  width: 44px;
  height: 44px;
  color: var(--accent);
}

.value .card-title {
  margin-top: 28px;
}

.value p {
  margin-top: 12px;
  color: var(--text-2);
}

/* FAQ: every question with its answer, open */
.faq {
  margin-top: var(--sp-header-media);
  border-bottom: 1px solid var(--line);
}

.faq__item {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px 40px;
  padding: 26px 0 28px;
  border-top: 1px solid var(--line);
}

.faq__q {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
}

.faq__a {
  max-width: var(--measure-long);
  padding-top: 4px;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.faq__a p + p {
  margin-top: .8em;
}

/* breadcrumbs: Home › Group › Category › Type */
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-2);
}

.breadcrumbs li {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.breadcrumbs a:hover {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.breadcrumbs__sep {
  color: var(--text-3);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-1);
}

/* ------------------------------------------------------------------ 6. category, groups */
/* A category page opens on the shop: breadcrumbs, the title with its count, the type row; then the models grouped
   by type (every model shown, in the taxonomy's order); the collection's story follows the models. */
.blk.cat-head {
  padding-block: 32px 8px;
}

.cat-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 18px;
}

.cat-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  min-width: 0;
}

.cat-head__h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.cat-head__meta {
  color: var(--text-3);
  font-size: var(--fs-body);
}

.cat-head__quote {
  flex: none;
}

.cat-head__lede {
  max-width: 760px;
  margin-top: 10px;
  color: var(--text-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* the type row: All, then each type with its icon and count */
.type-row {
  margin-top: 24px;
}

.type-row__list {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--gutter)) 0;
  padding: 2px var(--gutter) 6px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.type-row__list::-webkit-scrollbar {
  display: none;
}

.type-row__list li {
  flex: none;
}

.type-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 128px;
  padding: 10px 6px 12px;
  border-radius: 22px;
  color: var(--text-1);
  text-align: center;
  transition: background-color var(--t-hover) var(--ease-hover);
}

.type-tile .nav-ico {
  border-radius: 22px;
}

.type-tile:hover .nav-ico {
  background: var(--paper-sunk);
}

.type-tile:hover .nav-ico img {
  transform: translateY(-2px) scale(1.04);
}

.type-tile__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.type-tile__label {
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: 17px;
}

.type-tile__count {
  color: var(--text-3);
  font-size: 12px;
  line-height: 14px;
}

.type-tile[aria-current="page"] {
  background: var(--violet-wash);
}

.type-tile[aria-current="page"] .nav-ico::after,
.type-tile.is-spy .nav-ico::after {
  box-shadow: inset 0 0 0 2px var(--violet-mark);
}

.type-tile[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 22px;
  height: 3px;
  margin-left: -11px;
  border-radius: 3px;
  background: var(--violet-mark);
}

/* railings: the location links (stair, balcony) as plain chips */
.facet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.facet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 16px;
  border: 1px solid var(--control-edge);
  border-radius: var(--r-pill);
  color: var(--text-1);
  font-size: var(--fs-meta);
  font-weight: 600;
}

.facet-chip small {
  color: var(--text-3);
  font-size: 12px;
  font-weight: 400;
}

.facet-chip:hover {
  background: var(--hover-bg);
}

.facet-chip[aria-current="page"] {
  border-color: var(--graphite);
  background: var(--graphite);
  color: #fff;
}

.facet-chip[aria-current="page"] small {
  color: rgba(255, 255, 255, .74);
}

/* shelves: one per type, every model shown */
.blk.blk--shelves {
  padding-block: 8px calc(var(--sp-chapter) * .625);
}

.shelf {
  padding-top: 36px;
  scroll-margin-top: calc(var(--nav-compact) + var(--nav-types) + 16px);
}

.shelf + .shelf {
  margin-top: 28px;
  border-top: 1px solid var(--line);
}

.shelf__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}

.shelf__h {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 600;
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
}

.shelf__h a {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shelf__h .nav-ico {
  border-radius: 14px;
}

.shelf__h a:hover span {
  text-decoration: underline;
  text-underline-offset: .14em;
  text-decoration-thickness: 1px;
}

.shelf__count {
  color: var(--text-3);
  font-size: var(--fs-body);
}

.blk--shelves.is-single .shelf {
  padding-top: 20px;
}

.model-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 32px 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.model {
  min-width: 0;
}

.model .media {
  aspect-ratio: var(--card-ar, 4 / 5);
  border-radius: var(--r-small);
}

/* a landscape model in a portrait frame: a mounted print on its card */
.model .media.is-contain {
  background: var(--surface);
}

.model .media.is-contain img {
  padding: 6%;
  border-radius: 10px;
}

.model .media img {
  transition: transform .5s var(--ease-hover);
}

.model a:hover .media img {
  transform: scale(1.04);
}

.model__name {
  margin-top: 12px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.model__code {
  margin-top: 2px;
  font-size: var(--fs-legal);
  line-height: var(--lh-legal);
  color: var(--text-3);
  letter-spacing: .04em;
}

.model__facts {
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* the other collections of the group: a static row of their icons */
.siblings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: var(--sp-header-media) 0 0;
  padding: 0;
  list-style: none;
}

.sibling {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 8px 18px;
  border-radius: var(--r-tile);
  background: var(--surface);
  color: var(--text-1);
  text-align: center;
  transition: transform var(--t-hover) var(--ease-hover);
}

.sibling .nav-ico {
  background: var(--paper-alt);
  border-radius: 24px;
}

.bg-alt .sibling .nav-ico {
  background: var(--paper-alt);
}

.sibling:hover .nav-ico img {
  transform: translateY(-2px) scale(1.04);
}

.sibling__name {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
}

.sibling__count {
  margin-top: -6px;
  color: var(--text-3);
  font-size: var(--fs-meta);
}

/* #collections and #group-<id>: the shop tree as a page */
.blk.groups-page {
  padding-block: 32px calc(var(--sp-chapter) * .75);
}

.tree--page {
  margin-top: 28px;
}

.tree--page .tree__group {
  padding: 36px 0 0;
}

.tree--page .tree__glabel {
  padding: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--fs-card);
  line-height: var(--lh-card);
  letter-spacing: -0.012em;
  color: var(--text-1);
}

.tree--page.is-one .tree__glabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.tree--page .tree__cat {
  padding: 24px 0 26px;
}

.tree--page .tree__catrow {
  gap: 18px;
  padding: 0;
}

.tree--page .tree__catname {
  font-size: 21px;
}

.tree--page .tree__catname small {
  font-size: var(--fs-meta);
}

.tree--page .tree__all {
  font-size: var(--fs-body);
}

.tree--page .tree__subs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 12px 8px;
  padding: 18px 0 0 82px;
  overflow: visible;
}

.tree--page .tree__subs a {
  width: auto;
  padding: 8px 4px 10px;
  border-radius: 20px;
}

.tree--page .tree__sublabel {
  font-size: 13px;
  line-height: 16px;
}

/* ------------------------------------------------------------------ 7. product */
.product-top {
  padding-top: 40px;
}

.product-top .lockup {
  margin-top: 56px;
}

.product-top .eyebrow-h {
  font-size: var(--fs-lead);
}

.product-top h1 {
  margin-top: 12px;
  font-size: 64px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.product-frame {
  position: relative;
  width: fit-content;
  max-width: var(--page);
  margin: var(--sp-lockup-media) auto 0;
}

.product-frame .media {
  width: min(var(--page), calc(min(80vh, 1000px) * var(--ar, .75)));
  max-width: var(--w, 100%);
  aspect-ratio: var(--ar, 3 / 4);
}

.product-frame .hero-plate {
  position: absolute;
  left: 50%;
  bottom: 22px;
  margin: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  /* day glass, near-opaque: its 14 px line keeps >= 4.5:1 over any photo */
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 3px rgba(23, 22, 31, .14), inset 0 0 0 1px rgba(23, 22, 31, .06);
}

.product-frame .hero-plate p {
  color: var(--graphite);
}

.product-frame .hero-plate .btn {
  background: var(--graphite);
  color: #fff;
}

.product-frame .hero-plate .btn:hover {
  background: var(--violet-ink);
}

.product-intro {
  padding-block: var(--sp-chapter) 0;
}

.product-intro .intro-text {
  margin-inline: auto;
}

.blk--specs .stats {
  margin-top: 40px;
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap-tiles);
  margin-top: 48px;
}

.specs section {
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.specs h3 {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-2);
}

.specs ul {
  margin-top: 10px;
}

.specs li {
  font-size: var(--fs-body);
  line-height: 1.45;
}

.specs li + li {
  margin-top: 4px;
}

/* ------------------------------------------------------------------ 8. about, contact band, footer */
.about-top .lockup {
  margin-top: 0;
}

.about-image {
  margin-top: var(--sp-lockup-media);
}

.about-image .media {
  aspect-ratio: 16 / 9;
  max-height: 80vh;
}

.contact-band {
  padding-block: var(--sp-chapter);
  background: var(--violet-wash);
  color: var(--graphite);
}

.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px 60px;
}

.contact-inner > * {
  grid-column: 1;
}

.contact-inner .contact-eyebrow {
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--violet-ink);
}

.contact-inner h2 {
  max-width: 900px;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
}

.contact-inner > p:not(.contact-eyebrow) {
  max-width: 620px;
  color: var(--graphite-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.contact-inner .dot {
  color: var(--violet-ink);
}

.contact-inner .btn {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
  background: var(--graphite);
  color: #fff;
}

.contact-inner .btn:hover {
  background: var(--violet-ink);
}

.email-link {
  width: max-content;
  max-width: 100%;
  font-size: var(--fs-body);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.site-footer {
  width: var(--page);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px 60px;
  padding-block: 56px 40px;
  color: var(--text-2);
  font-size: var(--fs-meta);
}

.site-footer .footer-mark {
  color: var(--text-1);
}

.site-footer p {
  margin-top: 10px;
}

.footer-contact a {
  color: var(--text-1);
  font-weight: 600;
}

/* the site-wide index: every collection in the nav's order, About */
.footer-index-wrap {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.footer-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .7fr);
  gap: 28px 40px;
}

.footer-index__group {
  font-family: var(--font-text);
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: var(--lh-meta);
  color: var(--text-1);
}

.footer-index__group a:hover {
  color: var(--link);
}

.footer-index ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.footer-index li + li {
  margin-top: 7px;
}

.footer-index li a {
  color: var(--text-2);
}

.footer-index li a:hover {
  color: var(--text-1);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.footer-index li small {
  margin-left: 4px;
  color: var(--text-3);
  font-size: 12px;
}

.footer-copy {
  grid-column: 1 / -1;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-legal);
  color: var(--text-3);
}

/* ------------------------------------------------------------------ 9. motion: staggered fade-up (m1) */
html.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--t-reveal-opacity) var(--ease-reveal), transform var(--t-reveal-move) var(--ease-reveal);
  transition-delay: var(--d, 0s);
}

html.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .nav-panel:not([hidden]),
  .nav-sheet[open] {
    animation: none !important;
  }

  /* no icon lift; the compact switch is a cross-fade only */
  .nav-ico img,
  .nav-sub:hover .nav-ico img,
  .type-tile:hover .nav-ico img,
  .sibling:hover .nav-ico img {
    transform: none !important;
  }

  body[data-nav="compact"] .nav-glabel,
  body[data-nav="compact"] .nav-catlink,
  .nav-mini {
    transform: none !important;
  }
}

/* The rule above leaves transition-property at "all"; the hero copy is laid out from measured sizes (column,
   statement fit), so it changes instantly. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .hero-copy * {
    transition-property: none !important;
  }
}

/* ------------------------------------------------------------------ 10. widths: 735-1068 and ≤734 */
@media (max-width: 1068px) {
  :root {
    --fs-statement: 64px;
    --fs-h2: 40px;
    --fs-card: 24px;
    --sp-chapter: 104px;
    --sp-gallery: 120px;
    --tile-h: 388px;
    --tile-wide: 560px;
    --tile-narrow: 300px;
    --slide-w: 640px;
    --card-w: 320px;
    --card-h: 470px;
  }

  /* tablets: the bar scrolls sideways (56 px icons, the names on two lines), no hover panels; "All categories"
     opens the whole tree */
  .nav__all {
    display: inline-flex;
  }

  .nav-bar {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  /* the edge fade only while the bar shows: a mask clips everything outside the bar's box, the compact row too */
  body:not([data-nav="compact"]) .nav-bar {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }

  .nav-bar::-webkit-scrollbar {
    display: none;
  }

  .nav-groups {
    width: max-content;
  }

  .nav-group {
    flex: none;
  }

  .nav-cat {
    flex: none;
    width: 92px;
    scroll-snap-align: start;
  }

  .nav-catlink .nav-ico {
    --s: 56px !important;
  }

  .nav-catlink {
    padding-top: 6px;
  }

  .nav-label {
    max-width: 88px;
  }

  .nav-more,
  .nav-panel {
    display: none !important;
  }

  .nav-mini {
    right: calc(var(--gutter) + 290px);
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
    mask-image: linear-gradient(90deg, #000 88%, transparent);
  }

  .nav-mini__item {
    width: 74px;
  }

  body[data-nav="compact"] .nav__about {
    display: none;
  }

  .model-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .product-top h1 {
    font-size: 52px;
  }

  .footer-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .stats-block,
  .band {
    grid-template-columns: 1fr;
  }

  .band__text {
    padding: 0 8px 12px;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .tiles--thirds,
  .tiles--l-m-s {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq__item {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 734px) {
  :root {
    --page: calc(100% - 48px);
    --gutter: 24px;
    /* phones: the wordmark row and the category strip, always (no compact row); category routes fold the strip
       away while scrolling down and show the type chips instead */
    --nav-full: 136px;
    --nav-compact: 136px;
    --fs-statement: 40px;
    --lh-statement: 1.1;
    --fs-h2: 32px;
    --lh-h2: 1.125;
    --fs-card: 21px;
    --fs-lead: 19px;
    --lh-lead: 1.42;
    --fs-body: 15px;
    --lh-body: 1.43;
    --fs-stat: 36px;
    --sp-chapter: 80px;
    --sp-gallery: 96px;
    --sp-after-autoplay: 128px;
    --sp-eyebrow-statement: 10px;
    --sp-statement-intro: 18px;
    --sp-intro-cta: 14px;
    --sp-lockup-media: 40px;
    --sp-header-media: 32px;
    --sp-media-caption: 16px;
    --gap-tiles: 12px;
    --tile-h: 340px;
    --tile-wide: min(320px, 82vw);
    --tile-narrow: min(260px, 68vw);
    --slide-w: min(311px, 80vw);
    --card-w: min(260px, 72vw);
    --card-h: 392px;
  }

  body[data-nav="compact"][data-route="category"] {
    --header: calc(var(--nav-row) + var(--nav-types));
  }

  body[data-nav="compact"][data-route="category"][data-nav-reveal] {
    --header: var(--nav-full);
  }

  .nav__top {
    width: auto;
    padding: 0 16px;
    gap: 8px;
  }

  body[data-nav="compact"] .nav__top {
    transform: none;
  }

  .nav__about {
    display: none;
  }

  .nav__util {
    gap: 8px;
  }

  .nav__all {
    padding: 7px 12px;
    font-size: 13px;
  }

  .nav__all-long {
    display: none;
  }

  .nav__all-short {
    display: inline;
  }

  .nav-quote {
    padding: 8px 14px;
  }

  .nav-quote .long {
    display: none;
  }

  .nav-quote {
    text-transform: capitalize;
  }

  /* the category strip, under the wordmark row on every route */
  .nav-bar,
  body:not([data-nav="compact"]) .nav-bar {
    width: 100%;
    height: calc(var(--nav-full) - var(--nav-row));
    padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }

  .nav-groups {
    padding-top: 0;
  }

  .nav-glabel {
    display: none;
  }

  .nav-group + .nav-group {
    margin-left: 6px;
    padding-left: 6px;
  }

  .nav-cat {
    width: 78px;
  }

  .nav-catlink {
    gap: 5px;
    padding: 4px 0 6px;
  }

  .nav-catlink .nav-ico {
    --s: 52px !important;
  }

  .nav-label {
    display: block;
    max-width: 78px;
    min-height: 0;
    font-size: 12px;
    line-height: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-label__full {
    display: none;
  }

  .nav-label__short {
    display: inline;
  }

  .nav-mini {
    display: none;
  }

  /* phones keep the strip in the compact state (it is the shop) ... */
  body[data-nav="compact"] .nav-groups {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body[data-nav="compact"] .nav-glabel,
  body[data-nav="compact"] .nav-catlink {
    opacity: 1;
    transform: none;
  }

  body[data-nav="compact"] .nav-group + .nav-group {
    border-left-color: var(--hair);
  }

  /* ... except on category routes while scrolling down: the type chips take its place */
  body[data-nav="compact"][data-route="category"]:not([data-nav-reveal]) .nav-groups {
    visibility: hidden;
    pointer-events: none;
  }

  body[data-nav="compact"][data-route="category"]:not([data-nav-reveal]) .nav-catlink {
    opacity: 0;
    transform: translateY(-8px);
  }

  .nav-types {
    top: var(--nav-row);
  }

  .nav-types ul {
    width: auto;
    padding: 0 16px;
  }

  body[data-nav="compact"][data-route="category"][data-nav-reveal] .nav-types {
    opacity: 0;
    visibility: hidden;
  }

  .tree__subs {
    padding-left: 16px;
  }

  /* chapters: lockups move to the left, except those marked phoneCenter */
  .lockup--center:not(.is-phone-center) {
    align-items: flex-start;
    text-align: left;
  }

  .lockup--center:not(.is-phone-center) .lockup__links {
    justify-content: flex-start;
  }

  .chapter__after .intro-text {
    text-align: left;
  }

  .chapter__media--medium .media--chapter,
  .chapter__media--narrow .media--chapter {
    width: var(--page);
  }

  .chapter__media--wide .media--chapter {
    width: 148%;
    margin-left: -24%;
    aspect-ratio: 4 / 3;
  }

  .media img,
  .media video {
    object-position: var(--fxp, var(--fx, 50%)) var(--fyp, var(--fy, 50%));
  }

  .media--chapter {
    aspect-ratio: var(--ar-phone, 4 / 5);
  }

  .media-row {
    width: min(87vw, 100%);
    gap: 8px;
  }

  .rail__item--slide .tile .media {
    aspect-ratio: 311 / 400;
  }

  .rail__controls {
    display: none;
  }

  .tile-row__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .autoplay__item {
    width: min(321px, 84vw);
  }

  .autoplay .rail__track {
    padding-inline: max(16px, calc((100% - min(321px, 84vw)) / 2));
    gap: 12px;
  }

  .autoplay__card .media {
    aspect-ratio: 321 / 480;
  }

  .autoplay__title {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.24;
  }

  .autoplay__bar {
    gap: 14px;
    margin-top: 14px;
  }

  .autoplay__steps {
    gap: 4px;
  }

  .tiles--thirds,
  .tiles--halves,
  .tiles--l-s,
  .tiles--s-l,
  .tiles--l-m-s {
    grid-template-columns: 1fr;
  }

  .tiles.is-phone-rail {
    display: flex;
    gap: var(--gap-tiles);
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .tiles.is-phone-rail::-webkit-scrollbar {
    display: none;
  }

  .tiles.is-phone-rail .tile-cell {
    flex: none;
    width: var(--tile-narrow);
    scroll-snap-align: start;
  }

  .stats {
    flex-direction: column;
    gap: 28px;
  }

  .band {
    padding: 12px;
  }

  .then-photo .media {
    height: 120vw;
  }

  .parallax {
    grid-template-columns: 1fr;
  }

  .parallax__side {
    grid-template-columns: 1fr;
    padding-top: 0;
    margin-top: -18%;
    gap: 32px;
  }

  .parallax__front {
    width: 62%;
    margin-left: auto;
  }

  .steps__list {
    gap: 28px 12px;
  }

  .step__label {
    margin-top: 12px;
    font-size: 17px;
  }

  .step__text {
    font-size: var(--fs-meta);
  }

  .mosaic {
    grid-template-columns: 1fr;
  }

  .mosaic__media--whole {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .mosaic__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .mosaic__caption {
    font-size: var(--fs-meta);
  }

  .card__body {
    padding: 24px 22px 0;
  }

  .card__text {
    font-size: var(--fs-meta);
  }

  .faq__item {
    padding: 20px 0 22px;
  }

  .model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 12px;
  }

  .blk.cat-head {
    padding-top: 20px;
  }

  .cat-head__row {
    margin-top: 12px;
  }

  .cat-head__quote {
    display: none;
  }

  /* breadcrumbs on one line: Group › Category › Type */
  .breadcrumbs ol {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }

  .breadcrumbs li:first-child {
    display: none;
  }

  .breadcrumbs li:last-child {
    min-width: 0;
  }

  .breadcrumbs li:last-child span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* the type row as pill chips */
  .type-row {
    margin-top: 16px;
  }

  .type-tile {
    flex-direction: row;
    width: auto;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    border-radius: var(--r-pill);
    background: var(--paper-alt);
    text-align: left;
    white-space: nowrap;
  }

  .type-tile .nav-ico {
    --s: 44px !important;
    border-radius: var(--r-pill);
    background: var(--paper);
  }

  .type-tile__text {
    align-items: flex-start;
    gap: 0;
  }

  .type-tile[aria-current="page"] {
    background: var(--graphite);
  }

  .type-tile[aria-current="page"] .type-tile__label,
  .type-tile[aria-current="page"] .type-tile__count {
    color: #fff;
  }

  .type-tile[aria-current="page"] .nav-ico::after {
    box-shadow: none;
  }

  .type-tile[aria-current="page"]::after {
    display: none;
  }

  .shelf {
    padding-top: 28px;
  }

  .shelf__h a {
    gap: 12px;
  }

  .shelf__h .nav-ico {
    --s: 40px !important;
    border-radius: 12px;
  }

  .siblings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree--page .tree__subs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-left: 0;
  }

  .tree--page .tree__catrow .nav-ico {
    --s: 52px !important;
  }

  .tree--page .tree__catname {
    font-size: 17px;
  }

  .product-top h1 {
    font-size: 40px;
  }

  .product-frame .media {
    width: var(--page);
  }

  .product-frame .hero-plate {
    position: static;
    margin-top: 14px;
    transform: none;
    white-space: normal;
  }

  .specs {
    grid-template-columns: 1fr;
  }

  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-inner .btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .hero-copy__inner .hero-plate {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 380px) {
  .hero-plate p {
    font-size: 13px;
  }

  .nav__all svg {
    display: none;
  }
}

/* ------------------------------------------------------------------ integration 2026-10-18: rhythm after the new visuals
   The real copy + visuals made home 35 screens (stride) against the blueprint's 24-30: sections after the door get a
   tighter rhythm (3/4 of the measured paddings), continuation blocks 5/8, and the tallest frames are
   capped. The portal lockup and the doors' media right after it keep their spacing (the move-in is tuned to it). */
/* :where() keeps these at the specificity of the rules they replace, so is-flush / has-then still apply */
.blk:where(:not(.blk--portal):not(.chapter-rest):not(.product-top):not(.product-intro):not(.cat-head):not(.blk--shelves):not(.groups-page)) {
  padding-block: calc(var(--sp-chapter) * .75);
}

:where(.blk--carousel, .blk--cards, .blk--values, .blk--faq, .blk--siblings).blk {
  padding-block: calc(var(--sp-gallery) * .75);
}

:where(.blk--autoplay).blk {
  padding-block: calc(var(--sp-chapter) * .75) calc(var(--sp-after-autoplay) * .7);
}

.blk--chapter.has-then:where(:not(.chapter-rest)) {
  padding-bottom: calc(var(--sp-chapter) * .75);
}

.then > * + * {
  margin-top: calc(var(--sp-chapter) * .625);
}

.chapter__media--wide .media--chapter {
  aspect-ratio: 1786 / 800;
}

.then-photo .media {
  height: min(60vw, 864px);
}

/* the parallax pair of cut-outs: whole objects on the page colour, square frames */
.parallax__back .media.is-cutout {
  aspect-ratio: 1 / 1;
}

/* product page: one article, so its parts sit closer together; the lists in four columns */
.product-page .product-top {
  padding-bottom: calc(var(--sp-chapter) * .5);
}

.product-page .product-intro {
  padding-top: calc(var(--sp-chapter) * .5);
}

.product-page .blk--detail {
  padding-block: calc(var(--sp-chapter) * .75) calc(var(--sp-chapter) * .5);
}

.product-page .blk--specs {
  padding-top: calc(var(--sp-chapter) * .5);
}

.product-page .specs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-page .product-frame .media {
  width: min(var(--page), calc(min(72vh, 900px) * var(--ar, .75)));
}

@media (max-width: 1068px) {
  .product-page .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 734px) {
  .chapter__media--wide .media--chapter {
    aspect-ratio: 4 / 3;
  }

  /* a wide frame with its own vertical phone file (visual V12) is shown whole, edge to edge */
  .chapter__media--wide.has-portrait .media--chapter {
    width: 100%;
    margin-left: 0;
    aspect-ratio: var(--ar-phone, 4 / 5);
  }

  .then-photo .media {
    height: 120vw;
  }

  .product-page .specs {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ verification fixes 2026-10-18 */
/* hero statement: the blueprint's 64 px step between 735 and 1068 (the compact copy modes and the fit to the column
   next to the door still make it smaller where the stage has no room) */
@media (min-width: 735px) and (max-width: 1068px) {
  .hero[data-hero-layout] .hero-statement {
    font-size: 64px;
  }
}

/* rail headings (F06, F07, F10-F12, category rails): the "View all ..." link sits under the heading, as on phones */
@media (min-width: 735px) {
  .blk--carousel .blk-head,
  .then-item--carousel .blk-head {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
  }

  .blk--carousel .blk-head .h2,
  .then-item--carousel .blk-head .h2 {
    flex: none;
  }

  .blk--carousel .blk-head__link,
  .then-item--carousel .blk-head__link {
    padding-bottom: 0;
  }
}

/* F06 / F09 chapter frames (73 % wide): at most 655 px tall on wide screens */
@media (min-width: 1069px) {
  .chapter__media--medium .media--chapter {
    max-height: 655px;
  }
}

/* phones: the values (F16) as a swipe rail like the tiles */
@media (max-width: 734px) {
  .values-grid {
    display: flex;
    gap: var(--gap-tiles);
    width: 100%;
    margin-inline: 0;
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .values-grid::-webkit-scrollbar {
    display: none;
  }

  .values-grid .value {
    flex: none;
    width: min(260px, 72vw);
    padding: 28px 24px 30px;
    scroll-snap-align: start;
  }
}

/* side layout in a narrow column (1024 x 768, the still hero next to an open door): the plate's line goes above
   its button instead of wrapping to three lines beside it */
.hero-copy__inner {
  container-type: inline-size;
}

@container (max-width: 430px) {
  .hero[data-hero-layout="side"] .hero-plate {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 14px 14px 18px;
    border-radius: 24px;
  }
}

/* ------------------------------------------------------------------ short screens (2026-10-20)
   A phone on its side or a low wide window: the header is one row from the start - the wordmark, the categories at
   40 px with short names (scrolling sideways), Categories and the quote - so the shop never takes half the height.
   Category routes keep the type chips under it. */
@media (max-height: 560px) and (orientation: landscape) {
  :root {
    --nav-full: var(--nav-compact);
    --nav-compact: 76px;
  }

  body[data-nav="compact"][data-route="category"],
  body[data-nav="compact"][data-route="category"][data-nav-reveal] {
    --header: calc(var(--nav-compact) + var(--nav-types));
  }

  .nav__top,
  body[data-nav] .nav__top {
    transform: translateY(calc((var(--nav-compact) - var(--nav-row)) / 2));
  }

  .nav__about {
    display: none;
  }

  body[data-nav] .nav-groups {
    visibility: hidden;
    pointer-events: none;
  }

  body[data-nav] .nav-glabel,
  body[data-nav] .nav-catlink {
    opacity: 0;
  }

  body[data-nav] .nav-mini {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* the bar's edge fade would clip the row above it */
  .nav-bar,
  body:not([data-nav="compact"]) .nav-bar {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .nav-types,
  body[data-nav] .nav-types {
    top: var(--nav-compact);
  }

  body[data-nav="compact"][data-route="category"][data-nav-reveal] .nav-types {
    opacity: 1;
    visibility: visible;
  }

  .nav-more,
  .nav-panel {
    display: none !important;
  }

  .nav__all {
    display: inline-flex;
  }
}

@media (max-height: 560px) and (orientation: landscape) and (max-width: 734px) {
  .nav-mini {
    left: 132px;
    right: 212px;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }

  .nav-mini__item {
    width: 70px;
  }
}

/* ------------------------------------------------------------------ 2026-10-20 nav review fixes */
/* a chevron after every category name in the full bar: "types inside", on every desktop (a mouse opens the panel by
   hovering; the round button stays the keyboard / touch control) */
.nav-label__chev {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 4px;
  color: var(--text-3);
  vertical-align: 1px;
  transition: transform .3s var(--ease-ui), color var(--t-hover) var(--ease-hover);
}

.nav-label__chev svg {
  display: block;
  width: 100%;
  height: 100%;
}

.nav-cat:hover .nav-label__chev,
.nav-cat.is-open .nav-label__chev {
  color: var(--text-1);
}

.nav-cat.is-open .nav-label__chev {
  transform: rotate(180deg);
}

/* touch desktops: the 24 px disclosure button keeps its look, its hit area is 44 x 44 */
.nav-more::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

/* 1069-1199 px: the full bar shows the short names (no clipped "Grills & outdoor…") */
@media (min-width: 1069px) and (max-width: 1199px) {
  .nav-label__full {
    display: none;
  }

  .nav-label__short {
    display: inline;
  }
}

@media (max-width: 1068px) {
  .nav-label__chev {
    display: none;
  }
}

/* railings' location links in the panel head and in the tree (Stair 25 · Balcony 13) */
.facet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.facet-chips .facet-chip {
  min-height: 30px;
  padding: 4px 12px;
}

.nav-panel__facets {
  align-self: center;
}

.tree__facets {
  padding: 8px 16px 0 80px;
}

/* a type's shelf opened by the copy of the catalogue category merged into it (fences, pergolas, the vanity wall) */
.shelf__lede {
  max-width: 62ch;
  margin: -4px 0 18px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

/* the header's type chips: the strip fades at its edges while it overflows (no hard-clipped chip at the shell edge) */
.nav-types ul {
  width: calc(var(--page) + 32px);
  padding-inline: 16px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 24px), transparent);
}

/* phones */
@media (max-width: 734px) {
  .nav-types ul {
    width: auto;
  }

  /* the strip's first snap point is its start: building it never scrolls it (no scroll event, no early door frames) */
  .nav-bar,
  body:not([data-nav="compact"]) .nav-bar {
    scroll-padding-inline: 16px;
  }

  /* breadcrumbs: only the parent, as one back link ("‹ Doors with one sidelight"); the H1 names the current item */
  .breadcrumbs ol {
    display: block;
    overflow: visible;
  }

  .breadcrumbs li {
    display: none;
  }

  .breadcrumbs li.breadcrumbs__parent {
    display: block;
    min-width: 0;
  }

  .breadcrumbs__parent .breadcrumbs__sep {
    display: none;
  }

  .breadcrumbs__parent a {
    display: block;
    overflow: hidden;
    color: var(--text-2);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .breadcrumbs__parent a::before {
    content: "‹";
    margin-right: 6px;
    font-weight: 400;
  }

  /* the "All categories" sheet: every type of every category on screen, four to a row (no sideways strips) */
  .nav-sheet .tree__subs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 6px;
    padding: 10px 16px 4px;
    overflow: visible;
  }

  .nav-sheet .tree__subs a {
    width: auto;
  }

  .nav-sheet .tree__facets {
    padding: 8px 16px 0;
  }

  /* the product photo fills the content column, like the quote plate under it */
  .product-page .product-frame .media {
    width: 100%;
    margin-inline: auto;
  }

  .product-frame .hero-plate p {
    white-space: nowrap;
  }
}

.nav-label__tail {
  white-space: nowrap;
}

/* focus targets of a route change (the page heading, a type's shelf): no ring, they are not controls */
.shelf:focus,
main h1[tabindex="-1"]:focus {
  outline: none;
}

/* ------------------------------------------------------------------ 11. real URLs, quote request, phone (2026-10-29) */
/* an old #token link (#category-gates) is moved to its page before anything is painted (the inline head script sets
   the class; js/showroom.js removes it once the page is drawn; a 3 s failsafe shows the page in any case) */
html.route-migrating body {
  visibility: hidden;
  animation: route-unhide 0s linear 3s forwards;
}

@keyframes route-unhide {
  to {
    visibility: visible;
  }
}

/* 2026-10-29 fix: the prerendered home is the 1440 x 900 snapshot, but the hero's layout depends on the screen (copy
   beside or under the door, poster and placeholder on the canvas's first-frame rect, the portal clipped shut). Until
   js/showroom.js has placed it (.is-placed, set in the same task as the layout), the stage shows only its ink ground:
   no desktop composition on a phone, no jump (layout shift 0). html.hero-pending is set by the head script; the script
   tag removes it on error at once, and 4 s after it has run (a script that ran but never placed the hero: shown as it
   is; never on a timer that a slow phone's download could outrun). */
html.hero-pending .hero--door:not(.is-placed) :is(.hero-lqip, .hero-poster, .hero-copy, .hero-scrim, .hero-shade),
html.hero-pending .hero--door:not(.is-still):not(.is-placed) + .portal-run {
  visibility: hidden;
}

/* the prerendered bar's icons wait for the script (data-icon-src, no src): no broken-image glyph meanwhile (clipped,
   not hidden: the script's on-screen test reads visibility and opacity) */
img[data-icon-src]:not([src]) {
  clip-path: inset(50%);
}

/* Save-Data / 2g (the head script sets html.hero-wait): the prerendered moving hero's poster (frame 1) waits under
   its placeholder until js/showroom.js has drawn the still hero (reduced motion: the <picture> picks the still frame) */
html.hero-wait .hero:not(.is-still) .hero-poster,
html.hero-wait .hero:not(.is-still) .hero-canvas {
  visibility: hidden;
}

/* the phone (site.json contact.phone; nothing is drawn while it is null) */
.nav__phone {
  color: var(--text-1);
  font-weight: 600;
  white-space: nowrap;
}

.nav__phone:hover {
  color: var(--link);
}

.footer-contact .footer-tel {
  display: block;
  width: max-content;
  margin-top: 6px;
}

.contact-inner .tel-link {
  grid-column: 1;
}

@media (max-width: 1068px) {
  .nav__phone {
    display: none;
  }
}

/* the request form: the quote sheet (any "Request a quote" link) and the /quote/ page */
.quote-sheet {
  width: min(680px, 100vw);
  max-width: 100vw;
  max-height: min(92dvh, 940px);
  margin: auto;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: var(--r-tile);
  background: var(--paper);
  color: var(--text-1);
  color-scheme: light;
  box-shadow: var(--shadow-panel);
}

.quote-sheet::backdrop {
  background: var(--scrim-day);
}

.quote-sheet[open] {
  animation: sheet-fade .18s ease-out;
}

.quote-sheet__top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px 0 28px;
  border-bottom: 1px solid var(--hair);
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.quote-sheet__title {
  font-size: 19px;
  line-height: 1.2;
}

.quote-sheet__body {
  padding: 20px 28px 28px;
}

.quote-sheet__lede,
.quote-sheet__alt,
.quote-page__alt {
  color: var(--text-2);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}

.quote-sheet__alt,
.quote-page__alt {
  margin-top: 18px;
}

.quote-sheet__alt a,
.quote-page__alt a {
  color: var(--link);
  font-weight: 600;
}

.quote-form {
  margin-top: 18px;
}

.quote-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.quote-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.quote-field--wide {
  grid-column: 1 / -1;
}

.quote-field[hidden] {
  display: none;
}

.quote-field label {
  color: var(--text-1);
  font-size: var(--fs-meta);
  font-weight: 600;
}

.quote-field__opt,
.quote-field__hint {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 400;
}

.quote-field input,
.quote-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--control-edge);
  border-radius: 12px;
  background: var(--paper);
  color: var(--text-1);
  font: inherit;
  font-size: 16px;
  line-height: 1.35;
}

.quote-field textarea {
  min-height: 112px;
  resize: vertical;
}

.quote-field input[type="file"] {
  padding: 10px;
  font-size: var(--fs-meta);
}

.quote-field input:focus-visible,
.quote-field textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.quote-field [aria-invalid="true"] {
  border-color: #b42318;
}

.quote-field__error {
  color: #b42318;
  font-size: 13px;
}

/* the honeypot: out of sight and out of the tab order (people never fill it in) */
.quote-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.quote-form__note {
  margin-top: 14px;
  color: var(--text-2);
  font-size: var(--fs-meta);
}

.quote-form__actions {
  margin-top: 18px;
}

.quote-form__status {
  margin-top: 12px;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}

.quote-form__status:empty {
  display: none;
}

.quote-form__status[data-kind="error"] {
  color: #b42318;
}

.quote-form__status[data-kind="sent"] {
  color: var(--text-1);
  font-weight: 600;
}

.quote-form__status a {
  color: var(--link);
  font-weight: 600;
}

.quote-page__body {
  max-width: 760px;
  margin-top: 24px;
}

@media (max-width: 734px) {
  .quote-sheet {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .quote-sheet__top {
    padding: 0 12px 0 16px;
  }

  .quote-sheet__body {
    padding: 16px 16px 28px;
  }

  .quote-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}