/* ============================================================================
   AZURITE. Page styles on top of the scrollcraft floor.
   Tokens first, then the veil and chrome, then the home acts, then the other
   pages, then reduced motion, then mobile.
   ========================================================================== */

/* Two files, three axes between them. Bodoni Moda keeps its optical size axis
   and has its weight pinned at the 400 the site asks for; Archivo carries the
   whole text weight range in one file, with the tabular figures the clock and
   the specification tables need. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --sc-canvas:     #050b1a;
  --sc-surface:    #0c1730;
  --sc-ink:        #f3f5fa;
  --sc-ink-soft:   #97a3bf;
  --sc-accent:     #7aa6ff;
  --sc-accent-ink: #050b1a;
  --sc-font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sc-font-text:    "Archivo", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --sc-font-mono:    "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --sc-shadow-color: 222 60% 3%;
  --sc-r-sm: 2px; --sc-r-md: 3px; --sc-r-lg: 4px;
  --sc-track-tight: -0.012em;
  --sc-leading-none: 0.96;

  /* page-local */
  --az-hair: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --az-hair-strong: color-mix(in oklab, var(--sc-ink) 34%, transparent);
  /* three ranks of label, all fluid, where there used to be one fixed size
     carrying the section eyebrow and a table key alike */
  --az-label-lg: clamp(0.76rem, 0.71rem + 0.22vw, 0.86rem);
  --az-label:    clamp(0.72rem, 0.69rem + 0.13vw, 0.79rem);
  --az-label-sm: clamp(0.68rem, 0.66rem + 0.08vw, 0.72rem);
  --az-text-weight: 300;
  --az-safe-t: env(safe-area-inset-top, 0px);
  --az-safe-b: env(safe-area-inset-bottom, 0px);
  --az-safe-l: env(safe-area-inset-left, 0px);
  --az-safe-r: env(safe-area-inset-right, 0px);
  --az-bar-h: calc(4.25rem + var(--az-safe-t));
  --az-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --az-ease-over: cubic-bezier(0.34, 1.56, 0.64, 1);
  --az-ease-fly: cubic-bezier(0.34, 1.18, 0.64, 1);
  --hour: 0;
  --day: 0;            /* 0 midnight .. 1 noon, from the crown */
  --vd: min(52vmin, 20rem);   /* the veil dial */
}
/* the light ground: the range on the home page and the light pages */
.range, .phero--light, .compare, .lightrow, .band--light, .rsv, .notes, .turn, .principles {
  --sc-canvas: #f4f5f7; --sc-surface: #ffffff; --sc-ink: #0b1020; --sc-ink-soft: #56607a; --sc-accent: #1f4fd1; --sc-accent-ink: #f4f5f7;
  --az-hair: rgba(11, 16, 32, 0.14); --az-hair-strong: rgba(11, 16, 32, 0.3);
  --az-text-weight: 380;
  --sc-shadow-color: 222 30% 30%;
  color: var(--sc-ink); background: var(--sc-canvas);
}

.skip { position: fixed; left: var(--sc-gutter); top: -4rem; z-index: 100; padding: 0.6em 1em; background: var(--sc-ink); color: var(--sc-canvas); font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; border-radius: var(--sc-r-pill); transition: top 200ms; }
.skip:focus { top: 0.8rem; outline: 2px solid var(--sc-accent); outline-offset: 3px; }
/* the <picture> is only a wrapper for the format choice: the <img> stays the box */
picture { display: contents; }
html { background: var(--sc-canvas); }
body { overflow-x: clip; }
.js body { min-height: 100vh; }
main { position: relative; z-index: 2; }
main.page { min-height: 100vh; }

/* --------------------------------------------------------------- type --- */
.sc-display { font-weight: 400; font-optical-sizing: auto; }
.sc-display em { font-style: italic; font-weight: 400; }
/* a Didone thins as its optical size rises. At display sizes let it track, and
   below that hold it back, or a 19 px section head is set in 19 px hairlines
   reversed out of navy and half of it disappears. */
.crown__hour, .menu__clock, .numbers__big, .finish__list dt, .piece__row--name dd,
.menu__piece-name, .others__name, .diagram__name, .whero__line, .principle__title,
.making__list h3, .compare__table thead th, .caption__name, .foot__mark, .bar__mark, .site-foot__mark {
  font-variation-settings: "opsz" 12;
}
.bar__mark, .foot__mark, .site-foot__mark { font-variation-settings: "opsz" 16; }
.sc-lede { font-weight: var(--az-text-weight); }
.sc-body { font-weight: var(--az-text-weight); font-size: var(--sc-t-base); line-height: 1.62; color: var(--sc-ink); max-width: 56ch; margin: 0 0 1.1em; text-wrap: pretty; }
.sc-body:last-child { margin-bottom: 0; }
.eyebrow {
  font-size: var(--az-label-lg); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sc-ink-soft); font-weight: 500; margin: 0 0 var(--sc-5);
}
h1, h2, h3 { color: var(--sc-ink); }
::selection { background: var(--sc-ink); color: var(--sc-canvas); }
.sect__head { margin-bottom: var(--sc-8); max-width: 40rem; }
.sect__head .sc-display { margin: 0; }
.sect__head .sc-body { margin-top: var(--sc-5); color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- cta --- */
.cta {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sc-ink); text-decoration: none; padding: 0.7em 0; position: relative;
  transition: color var(--sc-d-base) var(--az-ease);
}
.cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.15em; height: 1px;
  background: currentColor; transform-origin: left; transform: scaleX(1);
  transition: transform 420ms var(--az-ease);
}
.cta__arrow { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 420ms var(--az-ease-over); }
.cta--primary {
  padding: 0.95em 1.6em; border: 1px solid var(--az-hair-strong); border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-ink) 4%, transparent);
  transition: background 320ms var(--az-ease), color 320ms var(--az-ease), border-color 320ms var(--az-ease);
}
.cta--primary::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cta:hover::after { transform: scaleX(0); transform-origin: right; }
  .cta:hover .cta__arrow { transform: translate(3px, -3px); }
  .cta--primary:hover { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
}
.cta:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
/* the pull is instant, the release springs back past centre and settles */
[data-magnet], [data-sc-magnet] {
  will-change: transform;
  transition: transform 520ms var(--az-ease-over), background 320ms var(--az-ease), color 320ms var(--az-ease), border-color 320ms var(--az-ease);
}
[data-magnet].is-pulling, [data-sc-magnet].is-pulling { transition: transform 60ms linear; }

/* --------------------------------------------------------------- veil --- */
/* One element: the loader on the home page, the curtain between pages. */
.veil { position: fixed; inset: 0; z-index: 90; pointer-events: none; color: var(--sc-ink); }
.veil[data-state="off"] { display: none; }
.veil[data-state="closing"], .veil[data-state="closed"] { pointer-events: auto; }
.no-js .veil { display: none; }
.veil__ground {
  position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 46%, var(--sc-surface) 0%, var(--sc-canvas) 78%);
}
/* the one full-screen colour moment on the site was the only flat surface on
   it. The grain rides inside the ground so it opens with the iris. */
.veil__ground::after {
  content: ""; position: absolute; inset: -50%; pointer-events: none; opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}
.veil__dial {
  position: absolute; left: calc(50% - var(--vd) / 2); top: calc(50% - var(--vd) / 2); width: var(--vd); height: var(--vd);
  --fx: 0px; --fy: 0px; --fs: 1;
  will-change: transform, opacity;
}
.veil__dial::before { content: ""; position: absolute; inset: -3%; border-radius: 50%; background: var(--sc-canvas); }
.veil__face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.veil__ring { fill: none; stroke: var(--az-hair-strong); stroke-width: 0.9; }
.veil__ticks line { stroke: var(--sc-ink-soft); stroke-width: 0.8; opacity: 0.55; }
.veil__ticks line.is-major { stroke: var(--sc-ink); opacity: 0.9; stroke-width: 1; }
.veil__arc {
  fill: none; stroke: var(--sc-accent); stroke-width: 1.2; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 100px 100px;
  stroke-dasharray: 578; stroke-dashoffset: 578;
  transition: stroke-dashoffset 420ms linear;
}
.veil__hand {
  position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; border-radius: 1px; background: var(--sc-ink);
  transform-origin: 50% 100%; transform: rotate(0deg);
  transition: transform 900ms var(--az-ease); will-change: transform;
}
.veil__hand--h { height: 26%; }
.veil__hand--m { height: 38%; }
.veil__hand--s { height: 41%; width: 1px; left: calc(50% - 0.5px); background: var(--sc-accent); transition: transform 240ms var(--az-ease-over); }
.veil__hub { position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--sc-ink); }
.veil__echo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; will-change: transform, opacity; }
.veil__echo circle { fill: none; stroke: var(--sc-ink); stroke-width: 0.7; }
.veil__mark {
  position: absolute; left: var(--sc-gutter); top: 0; height: var(--az-bar-h); margin: 0; display: flex; align-items: center;
  font-family: var(--sc-font-display); font-size: 1.05rem; letter-spacing: 0.4em; text-indent: 0.1em; color: var(--sc-ink);
}
.veil__status {
  position: absolute; left: var(--sc-gutter); bottom: clamp(2rem, 6vh, 4rem); margin: 0; display: flex; gap: 1.2em; align-items: baseline;
  font-size: var(--az-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft);
  --fx: 0px; --fy: 0px; will-change: transform, opacity;
}
.veil__pct { color: var(--sc-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-size: var(--sc-t-sm); }
.veil__unit { opacity: 0.55; }
body:not([data-page="home"]) .veil__status { display: none; }
body:not([data-page="home"]) .veil__arc { stroke-dashoffset: 0; }   /* the curtain wears the finished ring */
/* the handoff: the drawing flies onto the watch, echo rings leave for the far
   and near planes, the number flies to the bar and becomes the time */
.veil.is-handoff .veil__dial {
  transform: translate(var(--fx), var(--fy)) scale(var(--fs)); opacity: 0;
  transition: transform 1050ms var(--az-ease-fly), opacity 640ms ease 430ms;
}
.veil.is-handoff .veil__echo--far { animation: veil-echo-far 1150ms var(--az-ease) forwards; }
.veil.is-handoff .veil__echo--near { animation: veil-echo-near 950ms var(--az-ease) forwards; }
@keyframes veil-echo-far { 0% { opacity: 0.55; transform: none; } 100% { opacity: 0; transform: translate(9%, -9%) scale(0.5); } }
@keyframes veil-echo-near { 0% { opacity: 0.45; transform: none; } 100% { opacity: 0; transform: translate(-12%, 14%) scale(2.7); } }
.veil.is-handoff .veil__mark { opacity: 0; transition: opacity 320ms ease 480ms; }
.veil.is-handoff .veil__status {
  transform: translate(var(--fx), var(--fy)); opacity: 0;
  transition: transform 820ms var(--az-ease) 120ms, opacity 240ms ease 900ms;
}
.veil.is-handoff .veil__arc { stroke-dashoffset: 0; }
/* opening on any other page: the coin behind the drawing goes first, then the drawing */
.veil[data-state="opening"] .veil__dial { transform: scale(1.1); opacity: 0; transition: transform 760ms var(--az-ease), opacity 520ms ease 140ms; }
.veil[data-state="opening"] .veil__dial::before { opacity: 0; transition: opacity 380ms ease 60ms; }
.veil.is-handoff .veil__dial::before { opacity: 0; transition: opacity 200ms ease; }
.veil[data-state="opening"] .veil__mark { opacity: 0; transition: opacity 360ms ease 320ms; }
/* closing: the drawing arrives over the page while the ground closes around it */
.veil[data-state="closing"] .veil__dial { transform: scale(0.84); opacity: 0; }
.veil[data-state="closing"].is-closing .veil__dial { transform: none; opacity: 1; transition: transform 620ms var(--az-ease-over), opacity 300ms ease; }
.veil[data-state="closing"] .veil__mark { opacity: 0; }
.veil[data-state="closing"].is-closing .veil__mark { opacity: 1; transition: opacity 300ms ease 300ms; }

/* -------------------------------------------------------------- stage --- */
.stage {
  position: fixed; inset: 0; z-index: 1; overflow: hidden;
  background: var(--sc-canvas);
}
.stage.is-off { visibility: hidden; }
.stage__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__poster { position: absolute; inset: 0; display: none; }
.stage__poster img { width: 100%; height: 100%; object-fit: cover; }
.stage.is-poster .stage__poster { display: block; }
.stage.is-poster .stage__gl { display: none; }
.stage__haze {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 62% 45%, transparent 35%, color-mix(in oklab, var(--sc-canvas) 55%, transparent) 100%),
    linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 80%, transparent), transparent 28%);
}
/* the scene gets 'lit' by the crown: the haze thins toward noon */
.stage__haze { opacity: calc(1 - var(--day) * 0.45); }

/* ----------------------------------------------------------------- bar --- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); height: var(--az-bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: calc(var(--sc-gutter) + var(--az-safe-l)) calc(var(--sc-gutter) + var(--az-safe-r));
  padding-top: var(--az-safe-t); color: var(--sc-ink);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 700ms var(--az-ease) 300ms, transform 800ms var(--az-ease-over) 300ms, color 500ms var(--az-ease);
}
.is-loaded .bar { opacity: 1; transform: none; }
.bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, #050b1a 88%, transparent) 0%, color-mix(in oklab, #050b1a 74%, transparent) 70%, color-mix(in oklab, #050b1a 40%, transparent) 100%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent);
  transition: opacity 400ms var(--az-ease);
}
.bar.is-scrolled::before { opacity: 1; }
.bar--ink { color: #0b1020; }
.bar--ink::before { background: linear-gradient(to bottom, rgba(244, 245, 247, 0.94) 0%, rgba(244, 245, 247, 0.84) 70%, rgba(244, 245, 247, 0.5) 100%); }
body.menu-open .bar::before { opacity: 0; }
body.menu-open .bar { color: #f3f5fa; }
.bar__mark {
  justify-self: start; font-family: var(--sc-font-display); font-size: 1.05rem; letter-spacing: 0.4em; text-indent: 0.1em;
  text-decoration: none; color: inherit; position: relative; padding: 0.4em 0;
}
.bar__mark::after { content: ""; position: absolute; left: 0; right: 0.4em; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 420ms var(--az-ease); }
@media (hover: hover) and (pointer: fine) { .bar__mark:hover::after { transform: scaleX(1); transform-origin: left; } }
.bar__time {
  justify-self: center; margin: 0; display: flex; gap: 0.8em; align-items: baseline;
  font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8;
}
.bar__clock { font-variant-numeric: tabular-nums; letter-spacing: 0.12em; font-size: 0.8rem; }
.bar__zone { opacity: 0.75; }
.bar__right { justify-self: end; display: flex; align-items: center; gap: clamp(1.2rem, 2.6vw, 2.6rem); }
.bar__cta {
  font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; color: inherit; position: relative; padding: 0.5em 0;
}
.bar__cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.1em; height: 1px; background: currentColor; transform: scaleX(0.3); transform-origin: left; opacity: 0.5; transition: transform 460ms var(--az-ease), opacity 300ms; }
@media (hover: hover) and (pointer: fine) { .bar__cta:hover::after { transform: scaleX(1); opacity: 1; } }
.bar__menu {
  appearance: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 0.5em 0;
  display: inline-flex; align-items: center; gap: 0.75em; font: inherit; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
}
.bar__burger { position: relative; width: 1.35rem; height: 0.55rem; display: block; }
.bar__burger i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 520ms var(--az-ease-over), top 320ms var(--az-ease), width 320ms var(--az-ease); }
.bar__burger i:first-child { top: 0; }
.bar__burger i:last-child { top: 100%; width: 70%; }
@media (hover: hover) and (pointer: fine) { .bar__menu:hover .bar__burger i:last-child { width: 100%; } }
.bar__menu[aria-expanded="true"] .bar__burger i { top: 50%; width: 100%; }
.bar__menu[aria-expanded="true"] .bar__burger i:first-child { transform: rotate(45deg); }
.bar__menu[aria-expanded="true"] .bar__burger i:last-child { transform: rotate(-45deg); }
.bar__menu:focus-visible, .bar__cta:focus-visible, .bar__mark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }

/* ---------------------------------------------------------------- menu --- */
.menu { position: fixed; inset: 0; z-index: 58; color: #f3f5fa; --sc-ink: #f3f5fa; --sc-ink-soft: #97a3bf; }
.menu[hidden] { display: none; }
.menu__ground { position: absolute; inset: 0; background: var(--sc-surface); clip-path: inset(0 0 100% 0); transition: clip-path 760ms var(--sc-ease-in-out); }
.menu.is-open .menu__ground { clip-path: inset(0 0 0 0); }
.menu.is-fast .menu__ground { transition-duration: 200ms; }
.menu__inner {
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sc-8);
  padding: calc(var(--az-bar-h) + 2rem) calc(var(--sc-gutter) + var(--az-safe-r)) calc(2.5rem + var(--az-safe-b)) calc(var(--sc-gutter) + var(--az-safe-l));
  align-items: end; overflow: auto; overscroll-behavior: contain;
}
.menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1em; }
.menu__link {
  display: flex; align-items: baseline; gap: clamp(0.8rem, 2vw, 1.6rem); text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-display); font-size: clamp(2.3rem, 5.6vw, 5rem); line-height: 1.08; padding: 0.06em 0;
  opacity: 0; transform: translateY(44px) rotate(1.2deg); transform-origin: left;
  transition: opacity 500ms var(--az-ease), transform 900ms var(--az-ease-over), color 300ms;
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) .menu__link { transition-delay: 260ms; }
.menu.is-open .menu__list li:nth-child(2) .menu__link { transition-delay: 330ms; }
.menu.is-open .menu__list li:nth-child(3) .menu__link { transition-delay: 400ms; }
.menu.is-open .menu__list li:nth-child(4) .menu__link { transition-delay: 470ms; }
.menu.is-open .menu__list li:nth-child(5) .menu__link { transition-delay: 540ms; }
.menu__num { font-family: var(--sc-font-text); font-size: var(--az-label); letter-spacing: 0.2em; color: var(--sc-ink-soft); min-width: 2.2em; transition: color 300ms; }
.menu__name { position: relative; display: inline-block; transition: transform 500ms var(--az-ease-over); }
.menu__name::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.05em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 460ms var(--az-ease); }
@media (hover: hover) and (pointer: fine) {
  .menu__link:hover .menu__name { transform: translateX(0.18em); }
  .menu__link:hover .menu__name::after { transform: scaleX(1); transform-origin: left; }
  .menu__link:hover .menu__num { color: var(--sc-ink); }
}
.menu__link[aria-current="page"] .menu__name { font-style: italic; }
.menu__link[aria-current="page"] .menu__num { color: var(--sc-accent); }
.menu__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; }
.menu__aside { display: grid; gap: var(--sc-6); align-content: end; opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--az-ease) 500ms, transform 700ms var(--az-ease) 500ms; }
.menu.is-open .menu__aside { opacity: 1; transform: none; }
.menu__eyebrow { font-size: var(--az-label-lg); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0; }
.menu__pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
.menu__piece { display: grid; gap: 0.45rem; text-decoration: none; color: inherit; }
.menu__piece img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sc-r-md); background: #e9ebef; transition: transform 600ms var(--az-ease), box-shadow 600ms var(--az-ease); }
@media (hover: hover) and (pointer: fine) { .menu__piece:hover img { transform: translateY(-4px); box-shadow: var(--sc-e3); } }
.menu__piece-name { font-family: var(--sc-font-display); font-size: 1.1rem; }
.menu__piece-dial { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-weight: var(--az-text-weight); }
.menu__hour { display: grid; gap: 0.5rem; padding-top: var(--sc-5); border-top: 1px solid var(--az-hair); }
.menu__label { font-size: var(--az-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.menu__clock { margin: 0; display: flex; gap: 0.8em; align-items: baseline; font-family: var(--sc-font-display); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.menu__hourname { font-family: var(--sc-font-text); font-size: var(--az-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.hour-range { appearance: none; -webkit-appearance: none; width: 100%; height: 2.75rem; background: none; margin: 0; cursor: pointer; }
.hour-range::-webkit-slider-runnable-track { height: 1px; background: var(--az-hair-strong); }
.hour-range::-moz-range-track { height: 1px; background: var(--az-hair-strong); }
.hour-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; border-radius: 50%; border: 1px solid var(--sc-ink); background: var(--sc-canvas); box-shadow: inset 0 0 0 0.3rem var(--sc-canvas), inset 0 0 0 1rem var(--sc-ink); transition: transform 300ms var(--az-ease-over); }
.hour-range::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 1px solid var(--sc-ink); background: var(--sc-ink); }
.hour-range:hover::-webkit-slider-thumb, .hour-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.hour-range:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.menu__reset { appearance: none; border: 0; background: none; padding: 0.3em 0; justify-self: start; font: inherit; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); cursor: pointer; border-bottom: 1px solid var(--az-hair); transition: color 200ms, border-color 200ms; }
.menu__reset:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.menu__reset[hidden] { display: none; }
.menu__foot { margin: 0; display: flex; justify-content: space-between; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); }
.menu__foot a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--az-hair); transition: color 200ms, border-color 200ms; }
.menu__foot a:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
body.menu-open { overflow: hidden; }
body.menu-open .index, body.menu-open .crown { opacity: 0 !important; visibility: hidden !important; }

/* --------------------------------------------------------------- index --- */
.index {
  position: fixed; right: var(--sc-gutter); top: 50%; transform: translateY(-50%); z-index: var(--sc-z-chrome);
  opacity: 0; visibility: hidden; transition: opacity 500ms var(--az-ease), visibility 0s linear 500ms;
}
.index.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.index__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.index__item {
  appearance: none; background: none; border: 0; padding: 0.45em 0 0.45em 1.6em; cursor: pointer; position: relative;
  font: inherit; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft);
  text-align: left; transition: color var(--sc-d-base) var(--az-ease), transform 700ms var(--az-ease-over), opacity 500ms var(--az-ease);
  opacity: 0; transform: translateX(28px);
}
.index.is-on .index__item { opacity: 1; transform: none; }
.index.is-on li:nth-child(1) .index__item { transition-delay: 0ms; }
.index.is-on li:nth-child(2) .index__item { transition-delay: 45ms; }
.index.is-on li:nth-child(3) .index__item { transition-delay: 90ms; }
.index.is-on li:nth-child(4) .index__item { transition-delay: 135ms; }
.index.is-on li:nth-child(5) .index__item { transition-delay: 180ms; }
.index.is-on li:nth-child(6) .index__item { transition-delay: 225ms; }
.index.is-on li:nth-child(7) .index__item { transition-delay: 270ms; }
.index__item::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0.9em; height: 1px; background: currentColor; opacity: 0.5;
  transform-origin: left; transition: transform 420ms var(--az-ease), opacity 300ms;
}
.index__item.is-active { color: var(--sc-ink); }
.index__item.is-active::before { transform: scaleX(1.5); opacity: 1; }
.index__item.is-past { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .index.is-on .index__item:hover { color: var(--sc-ink); transform: translateX(3px); transition-delay: 0s; }
  .index__item:hover::before { transform: scaleX(1.3); opacity: 1; }
}
.index__item:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* ------------------------------------------------------------- anatomy --- */
.anatomy { background: transparent; }
.anatomy__copy { bottom: auto; top: 50%; translate: 0 -50%; max-width: min(40rem, 44vw); }
.anatomy__title { margin-bottom: var(--sc-6); }
.anatomy__t1, .anatomy__t2 { display: block; }
.anatomy__t2 { font-style: italic; padding-left: 0.04em; }
.anatomy__lede { margin-bottom: var(--sc-7); max-width: 34ch; }
.anatomy__ctas { display: flex; flex-wrap: wrap; gap: 0.5rem 2.2rem; align-items: center; }

/* entrance choreography, fired by the handoff */
.anatomy__copy > * { opacity: 0; transform: translateY(38px); transition: opacity 900ms var(--az-ease), transform 1200ms var(--az-ease-over); }
.is-loaded .anatomy__copy > * { opacity: 1; transform: none; }
.is-loaded .anatomy__copy > :nth-child(1) { transition-delay: 380ms; }
.is-loaded .anatomy__copy > :nth-child(2) { transition-delay: 470ms; }
.is-loaded .anatomy__copy > :nth-child(3) { transition-delay: 640ms; }
.is-loaded .anatomy__copy > :nth-child(4) { transition-delay: 780ms; }

/* labels attached to layers */
.labels { position: absolute; inset: 0; pointer-events: none; z-index: 12; }

/* the part caption: on desktop it takes the field the headline leaves */
.caption {
  display: grid; gap: 0.6rem; position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%; max-width: 24rem; margin: 0; z-index: 12;
  opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--az-ease), transform 700ms var(--az-ease-over);
}
.caption.is-on { opacity: 1; transform: none; }
.caption__name { font-family: var(--sc-font-display); font-size: var(--sc-t-3xl); line-height: 1; color: var(--sc-ink); }
.caption__text { font-size: var(--sc-t-lg); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); max-width: 26ch; line-height: 1.45; }

/* the crown */
.crown {
  position: fixed; right: calc(var(--sc-gutter) + var(--az-safe-r)); bottom: calc(clamp(2rem, 6vh, 4rem) + var(--az-safe-b)); z-index: var(--sc-z-chrome);
  display: grid; justify-items: center; gap: 0.6rem; width: 9.5rem;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.92);
  transition: opacity 600ms var(--az-ease), transform 700ms var(--az-ease), visibility 0s linear 600ms;
}
.is-loaded .crown.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 800ms var(--az-ease) 950ms, transform 1000ms var(--az-ease-over) 950ms, visibility 0s; }
.is-loaded.is-settled .crown.is-on { transition-delay: 0s; }
.crown__label { font-size: var(--az-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }
.crown__dial { position: relative; width: 6.5rem; height: 6.5rem; }
.crown__ring { width: 100%; height: 100%; overflow: visible; }
.crown__ring circle { fill: none; stroke: var(--az-hair-strong); stroke-width: 0.8; }
.crown__ring line { stroke: var(--sc-ink-soft); stroke-width: 0.8; opacity: 0.6; }
.crown__ring line.is-major { stroke: var(--sc-ink); opacity: 1; }
.crown__dial { touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.crown__sun { fill: var(--sc-accent); stroke: none; transform-origin: 50px 50px; transform: rotate(calc(var(--hour) * 15deg)); transition: fill 400ms; }
.crown__knob {
  position: absolute; left: 50%; top: 50%; width: 1.4rem; height: 1.4rem; margin: -0.7rem 0 0 -0.7rem;
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  border-radius: 50%; border: 1px solid var(--sc-ink); background: var(--sc-canvas); cursor: grab; padding: 0;
  transform: rotate(calc(var(--hour) * 15deg)) translateY(-2.86rem);
  box-shadow: var(--sc-e2);
  transition: box-shadow 200ms, scale 200ms var(--az-ease-over);
}
.crown__knob::after { content: ""; position: absolute; inset: 0.35rem; border-radius: 50%; background: var(--sc-ink); }
.crown__knob:active, .crown.is-dragging .crown__knob { cursor: grabbing; scale: 1.15; }
.crown__readout { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; pointer-events: none; }
.crown__hour { font-family: var(--sc-font-display); font-size: 1.15rem; color: var(--sc-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.crown__name { display: block; font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.15em; }
.crown__range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.crown:has(.crown__range:focus-visible) .crown__knob { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.crown__reset {
  appearance: none; border: 0; background: none; padding: 0.3em 0; font: inherit; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sc-ink-soft); cursor: pointer; border-bottom: 1px solid var(--az-hair); transition: color 200ms, border-color 200ms;
}
.crown__reset:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.crown__reset[hidden] { display: none; }

/* -------------------------------------------------------------- inside --- */
.act--inside { position: relative; z-index: 2; }
/* the lead-in used to be a viewport of nothing before the camera moved */
.inside__travel { height: 65vh; height: 65svh; }
.inside__travel--after { height: 85vh; height: 85svh; }
.inside__copy { position: relative; inset: auto; left: auto; bottom: auto; padding-inline: var(--sc-gutter); max-width: min(40rem, 60vw); min-height: 60vh; display: grid; align-content: center; }
.inside__copy .sc-lede { margin-top: var(--sc-6); max-width: 34ch; }
.inside__more { margin: var(--sc-6) 0 0; }

/* --------------------------------------------------------------- range --- */
.act--range { position: relative; z-index: 3; }
.range { position: relative; padding-block: calc(var(--sc-section) * 1.15) var(--sc-section); }
.range--page { padding-block: 0 var(--sc-section); }
.range__sheet { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: transparent; box-shadow: 0 -18px 48px -12px rgba(0, 0, 0, 0.55); }
.range__head { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: var(--sc-7); margin-bottom: calc(var(--sc-9) + 1rem); }
.range__title { margin: 0; }
.range__t1, .range__t2 { display: block; }
.range__t2 { padding-left: 0.04em; }
.range__intro { margin: 0 0 0.5em; justify-self: end; max-width: 26ch; text-align: right; font-weight: var(--az-text-weight); color: var(--sc-ink-soft); }
.range__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.piece--offset { margin-top: clamp(2rem, 7vw, 6rem); }
.piece__link { display: block; color: inherit; text-decoration: none; }
.piece__link:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 6px; border-radius: var(--sc-r-md); }
.piece__fig {
  position: relative; margin: 0; aspect-ratio: 4 / 5; background: #e9ebef; overflow: hidden; border-radius: var(--sc-r-md);
  transition: transform 700ms var(--az-ease), box-shadow 700ms var(--az-ease);
}
.piece__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1100ms var(--az-ease); }
.piece__sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(55% 55% at calc(var(--mx, 0.5) * 100%) calc(var(--my, 0.5) * 100%), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 45%, transparent 72%);
  transition: opacity 500ms var(--az-ease);
}
.piece__view {
  position: absolute; right: 1rem; bottom: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e2);
  transform: translateY(8px) scale(0.9); opacity: 0; transition: transform 500ms var(--az-ease-over), opacity 300ms var(--az-ease);
}
.piece__view svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) {
  .piece__link:hover .piece__fig { transform: translateY(-6px); box-shadow: var(--sc-e3); }
  .piece__link:hover .piece__img { transform: scale(1.045); }
  .piece__link:hover .piece__sheen { opacity: 1; }
  .piece__link:hover .piece__view { transform: none; opacity: 1; }
  .piece__link:hover .piece__row--name dd { font-style: italic; }
}
.piece__label { margin: var(--sc-5) 0 0; padding: 0; display: grid; gap: 0.35rem; }
.piece__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; padding-bottom: 0.35rem; border-bottom: 1px solid var(--az-hair); }
.piece__row dt { font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.piece__row dd { margin: 0; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); }
.piece__row--name { border-bottom-color: var(--az-hair-strong); padding-bottom: 0.6rem; margin-bottom: 0.3rem; }
.piece__row--name dd { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); line-height: 1; transition: font-style 200ms; }
.range__note { margin: var(--sc-9) 0 0; text-align: center; font-size: var(--az-label-lg); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* --------------------------------------------------------------- close --- */
.act--close { position: relative; z-index: 2; }
.close { background: transparent; }
.close__copy { bottom: auto; top: 50%; translate: 0 -50%; max-width: min(38rem, 44vw); }
.close__title { margin-bottom: var(--sc-6); }
.close__title em { display: block; padding-left: 0.04em; }
.close__lede { margin-bottom: var(--sc-7); max-width: 32ch; }
.foot {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sc-6) var(--sc-gutter) calc(var(--sc-6) + var(--az-safe-b));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--sc-6);
  font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in oklab, var(--sc-ink) 82%, transparent);
  background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
}
.foot__ring { margin: 0; }
.foot__links { display: flex; gap: 1.6rem; justify-content: center; }
.foot__links a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms; }
.foot__links a:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.foot__note { margin: 0; grid-column: 1 / -1; text-align: center; letter-spacing: 0.08em; text-transform: none; font-weight: var(--az-text-weight); font-size: var(--sc-t-xs); line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 72%, transparent); }
.foot__mark { margin: 0; justify-self: end; font-family: var(--sc-font-display); letter-spacing: 0.4em; text-indent: 0.4em; color: var(--sc-ink); font-size: 0.95rem; }

/* -------------------------------------------------------------- drawer --- */
.drawer { position: fixed; inset: 0; z-index: 80; }
.drawer[hidden] { display: none; }
.drawer__backdrop { position: absolute; inset: 0; background: color-mix(in oklab, #050b1a 70%, transparent); opacity: 0; transition: opacity 500ms var(--az-ease); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel {
  --sc-ink: #f3f5fa; --sc-ink-soft: #97a3bf; --sc-accent: #7aa6ff; --az-hair: rgba(243, 245, 250, 0.16); --az-hair-strong: rgba(243, 245, 250, 0.34);
  position: absolute; top: 0; right: 0; bottom: 0; width: min(30rem, 100%);
  background: var(--sc-surface); color: var(--sc-ink); border-left: 1px solid var(--az-hair);
  box-shadow: var(--sc-e3); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--az-bar-h) + 1rem) clamp(1.5rem, 4vw, 3rem) calc(3rem + var(--az-safe-b));
  transform: translateX(100%); transition: transform 640ms var(--sc-ease-drawer);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close {
  position: absolute; top: 1.2rem; right: 1.2rem; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--az-hair-strong); background: none; color: var(--sc-ink); cursor: pointer; display: grid; place-items: center;
  transition: background 200ms, transform 300ms var(--az-ease-over);
}
.drawer__close svg { width: 0.9rem; height: 0.9rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.drawer__close:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); transform: rotate(90deg); }
.drawer .form > * { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--az-ease), transform 700ms var(--az-ease); }
.drawer.is-open .form > * { opacity: 1; transform: none; }
.drawer.is-open .form > :nth-child(1) { transition-delay: 180ms; }
.drawer.is-open .form > :nth-child(2) { transition-delay: 240ms; }
.drawer.is-open .form > :nth-child(3) { transition-delay: 300ms; }
.drawer.is-open .form > :nth-child(4) { transition-delay: 360ms; }
.drawer.is-open .form > :nth-child(5) { transition-delay: 420ms; }
.drawer.is-open .form > :nth-child(6) { transition-delay: 480ms; }
.drawer.is-open .form > :nth-child(7) { transition-delay: 540ms; }
.drawer.is-open .form > :nth-child(8) { transition-delay: 600ms; }
.drawer.is-open .form > :nth-child(9) { transition-delay: 660ms; }
.drawer.is-open .form > :nth-child(10) { transition-delay: 720ms; }
.form__title { margin: 0 0 var(--sc-4); }
.form__lede { margin: 0 0 var(--sc-7); color: var(--sc-ink-soft); font-weight: var(--az-text-weight); max-width: 34ch; }
.form__nojs { color: var(--sc-accent); }
.field { position: relative; margin-bottom: var(--sc-6); }
.field__input {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--az-hair-strong); padding: 1.1rem 0 0.55rem; font-size: var(--sc-t-base); font-weight: var(--az-text-weight);
  color: var(--sc-ink); border-radius: 0; font-family: inherit;
}
.field__label {
  position: absolute; left: 0; top: 1.05rem; font-size: var(--sc-t-base); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); pointer-events: none;
  transform-origin: left; transition: transform 300ms var(--az-ease), color 200ms;
}
.field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label { transform: translateY(-1.05rem) scale(0.72); letter-spacing: 0.16em; text-transform: uppercase; }
.field__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--sc-ink); transform: scaleX(0); transform-origin: left; transition: transform 460ms var(--az-ease); }
.field__input:focus ~ .field__line { transform: scaleX(1); }
.field__input:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
.field.is-invalid .field__input { border-bottom-color: #ff8a8a; }
.field__error { margin: 0.4rem 0 0; font-size: var(--sc-t-xs); color: #e05a5a; min-height: 1em; letter-spacing: 0.04em; }
.choice { border: 0; padding: 0; margin: 0 0 var(--sc-6); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice__legend { font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.8rem; width: 100%; }
.choice__opt { position: relative; }
.choice__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__opt span {
  display: inline-block; padding: 0.55em 1em; border: 1px solid var(--az-hair-strong); border-radius: var(--sc-r-pill);
  font-size: var(--sc-t-sm); font-weight: 400; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms, transform 300ms var(--az-ease-over);
}
.choice__opt input:checked + span { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); }
.choice__opt input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.choice__opt:hover span { transform: translateY(-1px); border-color: var(--sc-ink); }
.form__hour { display: grid; gap: 0.4rem; margin: 0 0 var(--sc-6); padding-bottom: 0.9rem; border-bottom: 1px solid var(--az-hair); }
.form__hour-row { display: flex; align-items: baseline; gap: 0.9em; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); }
.form__hour-out { font-family: var(--sc-font-display); font-size: 1.25rem; letter-spacing: 0.04em; color: var(--sc-ink); text-transform: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.form__hour-name { font-size: var(--az-label); }
.form__hour-reset { appearance: none; border: 0; background: none; padding: 0.3em 0; justify-self: start; font: inherit; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); cursor: pointer; border-bottom: 1px solid var(--az-hair); transition: color 200ms, border-color 200ms; }
.form__hour-reset:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.form__hour-reset[hidden] { display: none; }
.form__submit { width: 100%; justify-content: center; }
.form__submit.is-sending .cta__arrow { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { margin: var(--sc-5) 0 0; min-height: 1.5em; font-weight: var(--az-text-weight); color: var(--sc-ink); }
.form__status.is-ok { color: var(--sc-accent); }
.form__fine { margin: var(--sc-6) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.form__after { margin: var(--sc-4) 0 0; }
.form__after[hidden] { display: none; }
.form__forget { appearance: none; border: 0; background: none; padding: 0.3em 0; font: inherit; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); cursor: pointer; border-bottom: 1px solid var(--az-hair); transition: color 200ms, border-color 200ms; }
.form__forget:hover { color: var(--sc-ink); border-color: var(--sc-ink); }
.turn--dark { --sc-canvas: #050b1a; --sc-surface: #0c1730; --sc-ink: #f3f5fa; --sc-ink-soft: #97a3bf; --az-hair: rgba(243, 245, 250, 0.16); --az-hair-strong: rgba(243, 245, 250, 0.34); color: var(--sc-ink); background: var(--sc-canvas); }
.gallery--pair { padding-top: var(--sc-section); }
.form.is-sent .field, .form.is-sent .choice, .form.is-sent .form__hour, .form.is-sent .form__submit { display: none; }
body.drawer-open { overflow: hidden; }

/* ============================================================ pages ====== */
/* reveals */
[data-in]:not([data-in-stagger]) { opacity: 0; transform: translateY(26px); transition: opacity 800ms var(--az-ease), transform 1000ms var(--az-ease-over); }
[data-in]:not([data-in-stagger]).in { opacity: 1; transform: none; }
[data-in-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--az-ease), transform 900ms var(--az-ease-over); }
[data-in-stagger].in > * { opacity: 1; transform: none; }
.no-js [data-in], .no-js [data-in-stagger] > * { opacity: 1; transform: none; }
img[data-fade] { opacity: 0; transition: opacity 900ms var(--az-ease); }
img[data-fade].is-loaded, .no-js img[data-fade] { opacity: 1; }
.gallery__frame { overflow: hidden; border-radius: var(--sc-r-md); background: color-mix(in oklab, var(--sc-ink) 6%, var(--sc-canvas)); }
.gallery__frame img { display: block; width: 100%; height: auto; }
.gallery__frame [data-parallax] { scale: 1.14; will-change: transform; }

/* page hero, light (collection, reserve, notes) */
.phero { padding: calc(var(--az-bar-h) + clamp(4rem, 12vh, 9rem)) 0 clamp(3rem, 8vh, 6rem); }
.phero--tight { padding-bottom: clamp(2rem, 5vh, 4rem); }
.phero__inner > * { opacity: 0; transform: translateY(38px); transition: opacity 900ms var(--az-ease), transform 1200ms var(--az-ease-over); }
.is-loaded .phero__inner > * { opacity: 1; transform: none; }
.is-loaded .phero__inner > :nth-child(1) { transition-delay: 300ms; }
.is-loaded .phero__inner > :nth-child(2) { transition-delay: 400ms; }
.is-loaded .phero__inner > :nth-child(3) { transition-delay: 560ms; }
.phero__title { margin: 0 0 var(--sc-6); }
.phero__title span, .phero__title em { display: block; }
.phero__title em { padding-left: 0.04em; }
.phero__lede { max-width: 44ch; }

/* page hero, photographic (watch pages, the house) */
.whero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.whero__pic { position: absolute; inset: 0; }
.whero__img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.whero__scrim { position: absolute; inset: 0; background:
  linear-gradient(to right, rgba(5, 11, 26, 0.86) 0%, rgba(5, 11, 26, 0.55) 34%, rgba(5, 11, 26, 0.05) 62%, transparent 80%),
  linear-gradient(to top, rgba(5, 11, 26, 0.9), rgba(5, 11, 26, 0.35) 40%, transparent 70%); }
.whero__copy { position: relative; z-index: 2; padding-top: calc(var(--az-bar-h) + 4rem); padding-bottom: clamp(3rem, 10vh, 7rem); max-width: 42rem; margin-inline: 0; }
.whero__copy > * { opacity: 0; transform: translateY(38px); transition: opacity 900ms var(--az-ease), transform 1200ms var(--az-ease-over); }
.is-loaded .whero__copy > * { opacity: 1; transform: none; }
.is-loaded .whero__copy > :nth-child(1) { transition-delay: 320ms; }
.is-loaded .whero__copy > :nth-child(2) { transition-delay: 400ms; }
.is-loaded .whero__copy > :nth-child(3) { transition-delay: 520ms; }
.is-loaded .whero__copy > :nth-child(4) { transition-delay: 640ms; }
.is-loaded .whero__copy > :nth-child(5) { transition-delay: 760ms; }
.whero__title { margin: 0 0 var(--sc-4); }
.whero__title em { color: var(--sc-accent); }
.whero__line { margin: 0 0 var(--sc-5); font-family: var(--sc-font-display); font-style: italic; font-size: var(--sc-t-xl); color: var(--sc-ink); }
.whero__lede { margin-bottom: var(--sc-7); max-width: 38ch; }
.whero__ctas { display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; align-items: center; }
.whero--house .whero__lede { max-width: 42ch; }

/* calibre hero */
.chero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.chero__pic { position: absolute; inset: 0; }
.chero__img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.chero__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5, 11, 26, 0.9) 0%, rgba(5, 11, 26, 0.5) 40%, transparent 68%), linear-gradient(to top, rgba(5, 11, 26, 0.85), transparent 55%); }
.chero__copy { position: relative; z-index: 2; padding-top: calc(var(--az-bar-h) + 4rem); padding-bottom: clamp(3rem, 10vh, 7rem); max-width: 44rem; margin-inline: 0; }
.chero__copy > * { opacity: 0; transform: translateY(38px); transition: opacity 900ms var(--az-ease), transform 1200ms var(--az-ease-over); }
.is-loaded .chero__copy > * { opacity: 1; transform: none; }
.is-loaded .chero__copy > :nth-child(1) { transition-delay: 320ms; }
.is-loaded .chero__copy > :nth-child(2) { transition-delay: 420ms; }
.is-loaded .chero__copy > :nth-child(3) { transition-delay: 580ms; }
.chero__copy .sc-display { margin-bottom: var(--sc-6); }
.chero__copy .sc-lede { max-width: 40ch; }

/* specification */
.spec { padding-block: var(--sc-section); }
.spec__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--sc-8); align-items: start; }
.spec__list { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sc-7); }
.spec__list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--az-hair); align-items: baseline; }
.spec__list dt { font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.spec__list dd { margin: 0; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); }

/* gallery */
.gallery { padding-block: 0 var(--sc-section); display: grid; gap: var(--sc-9); }
.gallery__wide { margin: 0; }
.gallery__wide .gallery__frame { border-radius: 0; aspect-ratio: 16 / 9; }
.gallery__wide .gallery__frame img { height: 100%; object-fit: cover; }
.gallery__cap { display: grid; gap: 0.4rem; margin-top: var(--sc-5); font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); max-width: 44ch; }
.gallery__cap .eyebrow { margin: 0; }
.gallery__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9); align-items: center; }
.gallery__tall { margin: 0; }
.gallery__tall .gallery__frame { aspect-ratio: 2 / 3; }
.gallery__tall .gallery__frame img { height: 100%; object-fit: cover; }
.gallery__text .sc-display { margin: 0 0 var(--sc-6); }

.gallery__dark { margin: 0; position: relative; }
.gallery__dark .gallery__frame { border-radius: 0; aspect-ratio: 16 / 8; }
.gallery__dark .gallery__frame img { height: 100%; object-fit: cover; }
.gallery__over { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.5rem, 5vh, 3.5rem); display: grid; gap: 0.5rem; max-width: 34ch; color: #f3f5fa; text-shadow: 0 1px 12px rgba(5, 11, 26, 0.7); }
.gallery__over .eyebrow { margin: 0; color: #c7cfe2; }
.gallery__over-text { font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); line-height: 1.5; }
.gallery__pair--flip { direction: rtl; }
.gallery__pair--flip > * { direction: ltr; }
.module { padding-block: var(--sc-section); border-top: 1px solid var(--az-hair); }
.module--light { border-top: 0; }
.module__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--sc-4) var(--sc-9); align-items: start; }
.module__inner .eyebrow { grid-column: 1 / -1; }
.module__title { margin: 0; }
.module__body { margin: 0; font-size: var(--sc-t-lg); font-weight: var(--az-text-weight); line-height: 1.5; color: var(--sc-ink); max-width: 44ch; text-wrap: pretty; }
.notes__forget { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin: var(--sc-5) 0 0; }
.notes__forget-status { font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); }
/* turn: the model view */
.turn { padding-block: var(--sc-section); }
.turn__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sc-9); align-items: center; }
.turn__copy .sc-display { margin: 0 0 var(--sc-6); }
.turn__stage { position: relative; aspect-ratio: 4 / 5; max-width: 30rem; margin-inline: auto; width: 100%; border-radius: var(--sc-r-md); overflow: hidden; background: #e9ebef; cursor: ew-resize; touch-action: pan-y; }
.turn__stage:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.turn__still { width: 100%; height: 100%; object-fit: cover; display: block; }
.turn__strip { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 2400% 100%; background-position: calc(var(--f) * (100% / 23)) 0; opacity: 0; transition: opacity 400ms var(--az-ease); }
.turn__stage.is-turning .turn__strip.is-ready { opacity: 1; }
.turn__hint { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font-size: var(--az-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink-soft); padding: 0.5em 1em; border: 1px solid var(--az-hair); border-radius: var(--sc-r-pill); background: color-mix(in oklab, var(--sc-canvas) 70%, transparent); transition: opacity 300ms; }
.turn__stage.is-turning .turn__hint { opacity: 0; }

/* the other two */
.others { padding-block: var(--sc-section); }
.others__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.others__card { position: relative; display: block; overflow: hidden; border-radius: var(--sc-r-md); background: #e9ebef; aspect-ratio: 5 / 6; color: #0b1020; text-decoration: none; }
.others__card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1100ms var(--az-ease); }
.others__card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(to top, rgba(244, 245, 247, 0.96) 0%, rgba(244, 245, 247, 0.94) 40%, rgba(244, 245, 247, 0.5) 70%, transparent 100%);
}
.others__cap { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; }
.others__name { font-family: var(--sc-font-display); font-size: var(--sc-t-xl); }
.others__dial { font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: #56607a; }
@media (hover: hover) and (pointer: fine) {
  .others__card:hover img { transform: scale(1.04); }
  .others__card:hover .piece__sheen { opacity: 1; }
  .others__card:hover .others__name { font-style: italic; }
}

/* compare */
.compare { padding-block: var(--sc-section); }
.compare__scroll { overflow-x: auto; }
.compare__table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); min-width: 42rem; }
.compare__table th, .compare__table td { text-align: left; padding: 0.9rem 1rem 0.9rem 0; border-bottom: 1px solid var(--az-hair); vertical-align: top; }
.compare__table thead th { font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); padding-bottom: 1.2rem; border-bottom-color: var(--az-hair-strong); }
.compare__table thead th:first-child { font-family: var(--sc-font-text); font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.compare__table tbody th { font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; width: 11rem; }
.compare__same td { color: var(--sc-ink-soft); }

/* in the light */
.lightrow { padding-block: 0 var(--sc-section); }
.lightrow__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.lightrow__link { display: block; text-decoration: none; color: inherit; }
.lightrow__link img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--sc-r-md); display: block; transition: transform 900ms var(--az-ease), box-shadow 700ms var(--az-ease); }
.lightrow__cap { display: flex; justify-content: space-between; margin-top: 0.8rem; font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); }
.lightrow__cap span:first-child { color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .lightrow__link:hover img { transform: translateY(-6px); box-shadow: var(--sc-e3); } }

/* band */
.band { padding-block: var(--sc-section); border-top: 1px solid var(--az-hair); }
.band__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sc-7); align-items: end; }
.band__title { margin: 0; grid-column: 1; }
.band__lede { margin: 0; font-weight: var(--az-text-weight); color: var(--sc-ink-soft); max-width: 36ch; }
.band__ctas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem; align-items: center; margin-top: var(--sc-4); }

/* numbers */
.numbers { padding-block: var(--sc-7); border-top: 1px solid var(--az-hair); border-bottom: 1px solid var(--az-hair); }
.numbers__row { list-style: none; margin: 0; padding-block: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-6); }
.numbers__row li { display: grid; gap: 0.4rem; }
.numbers__big { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; color: var(--sc-ink); font-variant-numeric: tabular-nums; }
.numbers__unit { font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* diagram */
.diagram__now { display: none; }
.diagram { padding-block: var(--sc-section); }
.diagram__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sc-8) var(--sc-9); align-items: start; }
.diagram__head { grid-column: 1 / -1; margin-bottom: 0; }
.diagram__plate { position: relative; border-radius: 50%; overflow: visible; }
.diagram__img { display: block; width: 100%; height: auto; border-radius: var(--sc-r-md); }
.diagram__dot {
  position: absolute; width: 2rem; height: 2rem; margin: -1rem 0 0 -1rem; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 55%, transparent); background: color-mix(in oklab, var(--sc-canvas) 55%, transparent);
  color: var(--sc-ink); font: inherit; font-size: var(--az-label-sm); letter-spacing: 0.08em; display: grid; place-items: center;
  transition: transform 400ms var(--az-ease-over), background 250ms, border-color 250ms, box-shadow 250ms;
}
.diagram__dot::after { content: ""; position: absolute; inset: -0.75rem; border-radius: 50%; }
.diagram__dot::before { content: ""; position: absolute; inset: -0.55rem; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--sc-ink) 20%, transparent); opacity: 0; transform: scale(0.7); transition: opacity 300ms, transform 500ms var(--az-ease-over); }
.diagram__dot.is-active, .diagram__dot:hover { background: var(--sc-ink); color: var(--sc-canvas); border-color: var(--sc-ink); transform: scale(1.15); }
.diagram__dot.is-active::before { opacity: 1; transform: none; }
.diagram__dot:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.diagram__list { list-style: none; margin: 0; padding: 0; display: grid; }
.diagram__item {
  display: grid; grid-template-columns: 2.4rem 9rem 1fr; gap: 1rem; align-items: baseline; padding: 0.8rem 0; border-bottom: 1px solid var(--az-hair); cursor: default;
  transition: color 250ms, padding-left 400ms var(--az-ease);
}
.diagram__item .diagram__num { font-size: var(--az-label-sm); letter-spacing: 0.1em; color: var(--sc-ink-soft); }
.diagram__name { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }
.diagram__desc { font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); line-height: 1.5; }
.diagram__item.is-active { padding-left: 0.6rem; }
.diagram__item.is-active .diagram__name { font-style: italic; }
.diagram__item.is-active .diagram__num { color: var(--sc-accent); }

.diagram[data-active]:not([data-active=""]) .diagram__item:not(.is-active) { color: color-mix(in oklab, var(--sc-ink) 55%, transparent); }

/* finishing, caseback */
.finish, .back { padding-block: var(--sc-section); }
.finish__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sc-9); align-items: center; }
.finish__fig { margin: 0; }
.finish__fig .gallery__frame { aspect-ratio: 16 / 10; }
.finish__fig .gallery__frame img { height: 100%; object-fit: cover; }
.finish__copy .sc-display { margin: 0 0 var(--sc-6); }
.finish__list { margin: 0; padding: 0; display: grid; }
.finish__list > div { padding: 0.9rem 0; border-bottom: 1px solid var(--az-hair); display: grid; gap: 0.3rem; }
.finish__list dt { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }
.finish__list dd { margin: 0; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); }
.back__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--sc-9); align-items: center; }
.back__copy .sc-display { margin: 0 0 var(--sc-6); }
.back__fig { margin: 0; max-width: 28rem; justify-self: end; width: 100%; }
.back__fig .gallery__frame { aspect-ratio: 4 / 5; }
.back__fig .gallery__frame img { height: 100%; object-fit: cover; }

/* the house */
.manifesto { padding-block: var(--sc-section); }
.manifesto__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sc-9); align-items: start; }
.manifesto__col .sc-display { margin: 0; }
.manifesto__text .sc-body { font-size: var(--sc-t-lg); line-height: 1.5; margin-bottom: 1.2em; }
.principles { padding-block: var(--sc-section); }
.principles__row { list-style: none; margin: 0; padding-block: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-8); }
.principle { display: grid; gap: var(--sc-4); align-content: start; padding-top: var(--sc-5); border-top: 1px solid var(--az-hair-strong); }
.principle__num { font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; color: var(--sc-ink); }
.principle__title { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); }
.atelier { padding-block: var(--sc-section); }
.atelier__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sc-7); align-items: end; }
.atelier__wide, .atelier__tall { margin: 0; }
.atelier__wide .gallery__frame { aspect-ratio: 3 / 2; }
.atelier__tall .gallery__frame { aspect-ratio: 2 / 3; }
.atelier__grid .gallery__frame img { height: 100%; object-fit: cover; }
.making { padding-block: 0 var(--sc-section); }
.making__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-7) var(--sc-7); }
.making__list li { display: grid; gap: 0.5rem; padding-top: var(--sc-4); border-top: 1px solid var(--az-hair); }
.making__list h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); }
.making__list p { margin: 0; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); line-height: 1.55; }
.making__num { font-size: var(--az-label-sm); letter-spacing: 0.2em; color: var(--sc-ink-soft); }

/* reserve */
.rsv { padding-block: var(--sc-6) var(--sc-section); }
.rsv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-10); align-items: start; }
.rsv__form { max-width: 32rem; }
.rsv__form .form__title { display: none; }
.rsv__form .form > .eyebrow { display: none; }
.rsv__form .form__lede { margin-top: 0; }
.rsv__aside { display: grid; gap: var(--sc-7); }
.rsv__fig { margin: 0; }
.rsv__fig .gallery__frame { aspect-ratio: 3 / 2; }
.rsv__fig .gallery__frame img { height: 100%; object-fit: cover; }
.rsv__facts { margin: 0; padding: 0; display: grid; }
.rsv__facts > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--az-hair); align-items: baseline; }
.rsv__facts dt { font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
.rsv__facts dd { margin: 0; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); line-height: 1.55; }

/* notes */
.notes { padding-block: var(--sc-6) var(--sc-section); }
.notes__grid { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--sc-9); align-items: start; }
.notes__nav { position: sticky; top: calc(var(--az-bar-h) + 1rem); display: grid; gap: 0.6rem; }
.notes__nav a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; padding: 0.3em 0; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms, padding-left 300ms var(--az-ease); }
.notes__nav a:hover { color: var(--sc-ink); border-color: var(--sc-ink); padding-left: 0.4em; }
.notes__body { display: grid; gap: var(--sc-9); max-width: 40rem; }
.note .sc-display { margin: 0 0 var(--sc-5); }

/* site footer */
.site-foot { position: relative; z-index: 2; padding-block: var(--sc-8) calc(var(--sc-6) + var(--az-safe-b)); border-top: 1px solid var(--az-hair); background: var(--sc-canvas); color: var(--sc-ink-soft); }
.site-foot__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sc-7) var(--sc-9); align-items: start; }
.site-foot__ring { margin: 0; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; }
.site-foot__nav { display: grid; grid-template-columns: repeat(3, auto); gap: var(--sc-8); }
.site-foot__nav div { display: grid; gap: 0.5rem; }
.site-foot__head { margin: 0 0 0.4rem; font-size: var(--az-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink); }
.site-foot__nav a { color: var(--sc-ink-soft); text-decoration: none; font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); transition: color 200ms, padding-left 300ms var(--az-ease); }
.site-foot__nav a:hover { color: var(--sc-ink); padding-left: 0.3em; }
.site-foot__note { margin: 0; font-size: var(--sc-t-xs); font-weight: var(--az-text-weight); line-height: 1.6; max-width: 34rem; }
.site-foot__mark { margin: 0; grid-column: 1 / -1; font-family: var(--sc-font-display); font-size: clamp(3rem, 12vw, 11rem); line-height: 0.9; letter-spacing: 0.22em; padding-left: 0.22em; color: color-mix(in oklab, var(--sc-ink) 10%, transparent); text-align: center; overflow: hidden; }

/* ------------------------------------------------------------- no js --- */
.is-fallback .veil { display: none; }
.is-fallback .stage__poster { display: block; }
.is-fallback .stage__gl, .is-fallback .index, .is-fallback .crown, .is-fallback .caption { display: none; }
.is-fallback [data-in], .is-fallback [data-in-stagger] > *, .is-fallback img[data-fade] {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.no-js .bar, .no-js .anatomy__copy > *, .no-js .phero__inner > *, .no-js .whero__copy > *, .no-js .chero__copy > * { opacity: 1; transform: none; }
.no-js .stage__poster { display: block; }
.no-js .stage__gl, .no-js .index, .no-js .crown, .no-js .caption { display: none; }
.no-js .form__submit { display: none; }

/* ------------------------------------------------------ reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .veil__hand, .veil__arc, .veil__dial, .veil__status, .veil__mark { transition: none !important; animation: none !important; }
  .cta::after, .cta__arrow, .index__item, .piece__fig, .piece__img, .piece__view, .drawer__panel, .crown__knob, .menu__link, .menu__ground, .menu__aside, .bar__burger i { transition: none; }
  .anatomy__copy > *, .phero__inner > *, .whero__copy > *, .chero__copy > *, .crown, .bar, [data-in], [data-in-stagger] > * { transition-duration: 1ms; transition-delay: 0s; }
  .drawer.is-open .form > * { transition-delay: 0s; }
  .form__submit.is-sending .cta__arrow { animation: none; }
  .gallery__frame [data-parallax] { scale: 1; transform: none !important; }
  .menu.is-open .menu__link { transition-delay: 0s; }
}

/* -------------------------------------------------------------- mobile --- */
@media (max-width: 1100px) {
  .spec__inner { grid-template-columns: 1fr; }
  .diagram__inner { grid-template-columns: 1fr; }
  .diagram__now {
    display: grid; gap: 0.3rem; margin: 0.9rem 0 0; padding: 0.9rem 1rem; min-height: 5.4rem;
    border: 1px solid var(--az-hair); border-radius: var(--sc-r-md);
    background: color-mix(in oklab, var(--sc-ink) 5%, transparent);
    transition: border-color 300ms var(--az-ease), background 300ms var(--az-ease);
  }
  .diagram__now.is-on { border-color: var(--az-hair-strong); background: color-mix(in oklab, var(--sc-ink) 9%, transparent); }
  .diagram__now-name { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); line-height: 1.15; color: var(--sc-ink); font-variation-settings: "opsz" 12; }
  .diagram__now.is-on .diagram__now-name { font-style: italic; }
  .diagram__now-desc { font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); line-height: 1.45; }
  /* the plate and its readout stick together, so a number tapped while the
     reader is halfway down the list still answers where they can see it */
  .diagram__stick {
    position: sticky; top: calc(var(--az-bar-h) + 0.5rem); z-index: 1;
    padding-bottom: 0.6rem; background: var(--sc-canvas);
  }
  .diagram__plate { max-width: 76vw; margin-inline: auto; }
  .diagram__dot { width: 2.1rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem; }
  .numbers__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  :root { --az-bar-h: calc(3.6rem + var(--az-safe-t)); --vd: min(64vw, 18rem); }
  .bar { grid-template-columns: 1fr auto; }
  .bar__time { display: none; }
  .bar__mark { font-size: 0.95rem; }
  .bar__cta { display: none; }
  .bar__menu-text { display: none; }
  .bar__menu { min-width: 44px; min-height: 44px; justify-content: center; margin-right: -0.6rem; padding: 0; }
  .menu__inner { grid-template-columns: 1fr; align-content: start; gap: var(--sc-5); padding-block: calc(var(--az-bar-h) + 1rem) calc(1.5rem + var(--az-safe-b)); }
  .menu__link { font-size: clamp(1.9rem, 8.2vw, 3rem); line-height: 1; padding: 0.1em 0; }
  .menu__list { gap: 0.5rem; }
  .menu__aside { gap: var(--sc-4); }
  .menu__pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .menu__piece img { aspect-ratio: 1 / 1; }
  .menu__piece-name { font-size: 1rem; }
  .index { display: none; }
  .anatomy__copy { inset-inline: var(--sc-gutter); top: calc(var(--az-bar-h) + 1.5rem); translate: none; max-width: none; }
  .anatomy__title { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-4); }
  .anatomy__lede { font-size: var(--sc-t-base); margin-bottom: var(--sc-5); max-width: 28ch; }
  .anatomy__ctas { gap: 0.2rem 1.6rem; }
  .labels { display: none; }
  .caption {
    gap: 0.25rem; left: var(--sc-gutter); right: var(--sc-gutter); top: auto; translate: none; bottom: clamp(7rem, 22vh, 11rem); max-width: none;
  }
  .caption__name { font-family: var(--sc-font-text); font-size: var(--az-label-lg); letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink); font-weight: 500; line-height: 1.2; }
  .caption__text { font-size: var(--sc-t-sm); font-weight: var(--az-text-weight); color: var(--sc-ink-soft); max-width: 30ch; line-height: 1.45; }
  .crown { right: calc(var(--sc-gutter) + var(--az-safe-r)); left: calc(var(--sc-gutter) + var(--az-safe-l)); bottom: calc(clamp(1.2rem, 4vh, 2.5rem) + var(--az-safe-b)); width: auto; grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; gap: 0.9rem; }
  .crown__label { order: 0; }
  .crown__dial { order: 1; width: 3.4rem; height: 3.4rem; justify-self: end; }
  .crown__knob { width: 1.05rem; height: 1.05rem; margin: -0.525rem 0 0 -0.525rem; transform: rotate(calc(var(--hour) * 15deg)) translateY(-1.5rem); }
  .crown__knob::after { inset: 0.28rem; }
  .crown__readout { display: none; }
  .crown__reset { order: 2; }
  .inside__travel { height: 55svh; }
  .inside__travel--after { height: 67svh; }
  .inside__copy { max-width: none; min-height: 0; padding-block: var(--sc-7); background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 18%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 82%, transparent); }
  .compare__table { min-width: 0; }
  .compare__table thead { display: none; }
  .compare__table tr { display: grid; grid-template-columns: 1fr; gap: 0.15rem; padding: 0.8rem 0; border-bottom: 1px solid var(--az-hair); }
  .compare__table th, .compare__table td { border: 0; padding: 0; }
  .compare__table tbody th { width: auto; margin-bottom: 0.3rem; }
  .compare__table td { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; }
  .compare__table td::before { content: attr(data-col); font-size: var(--az-label-sm); letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 500; }
  .module__inner { grid-template-columns: 1fr; }
  .gallery__pair--flip { direction: ltr; }
  .gallery__dark .gallery__frame { aspect-ratio: 4 / 5; }
  .range__head { grid-template-columns: 1fr; gap: var(--sc-5); margin-bottom: var(--sc-8); }
  .range__intro { justify-self: start; text-align: left; }
  .range__grid { grid-template-columns: 1fr; gap: var(--sc-8); }
  .piece--offset { margin-top: 0; }
  .piece__row { grid-template-columns: 5.5rem 1fr; }
  .close__copy { inset-inline: var(--sc-gutter); top: calc(var(--az-bar-h) + 1.5rem); translate: none; max-width: none; }
  .close__title { font-size: var(--sc-t-2xl); }
  .foot { grid-template-columns: 1fr; gap: var(--sc-3); text-align: left; padding-bottom: calc(1.4rem + var(--az-safe-b)); }
  .foot__links { justify-content: flex-start; gap: 1rem; flex-wrap: wrap; }
  .foot__note { text-align: left; }
  .foot__mark { justify-self: start; }
  .drawer__panel { width: 100%; border-left: 0; }
  /* pages */
  .phero { padding-top: calc(var(--az-bar-h) + 3rem); }
  .phero__title { font-size: var(--sc-t-2xl); }
  .whero, .chero { min-height: 92svh; }
  .whero__copy, .chero__copy { padding-bottom: 3rem; }
  .whero__scrim { background: linear-gradient(to top, rgba(5, 11, 26, 0.94) 0%, rgba(5, 11, 26, 0.7) 40%, rgba(5, 11, 26, 0.15) 70%, transparent 100%); }
  .whero__img, .chero__img { object-position: 60% 30%; }
  .gallery__pair, .turn__inner, .finish__inner, .back__inner, .manifesto__inner, .atelier__grid, .rsv__grid, .notes__grid, .band__inner { grid-template-columns: 1fr; }
  .spec__list { grid-template-columns: 1fr; }
  .gallery { gap: var(--sc-8); }
  .gallery__wide .gallery__frame { aspect-ratio: 4 / 3; }
  .others__row { grid-template-columns: 1fr; }
  .lightrow__row { grid-template-columns: 1fr; }
  .numbers__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diagram__item { grid-template-columns: 2rem 1fr; }
  .diagram__desc { grid-column: 2; }
  .diagram__dot { width: 1.7rem; height: 1.7rem; margin: -0.85rem 0 0 -0.85rem; }
  .principles__row, .making__list { grid-template-columns: 1fr; gap: var(--sc-6); }
  .back__fig { justify-self: start; max-width: 22rem; }
  .notes__nav { position: static; grid-auto-flow: column; justify-content: start; gap: 1.2rem; }
  .site-foot__inner { grid-template-columns: 1fr; }
  .site-foot__nav { grid-template-columns: 1fr 1fr; gap: var(--sc-6); }
  .band__ctas { margin-top: var(--sc-2); }
}
@media (max-width: 380px) {
  .anatomy__title { font-size: 2.1rem; }
  .crown__label { display: none; }
  .numbers__row { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 640px) and (max-width: 860px) {
  .caption { bottom: 5.5rem; }
  .anatomy__lede { display: none; }
  /* a short phone: the menu still has to hold five links, three thumbnails and
     the hour control without becoming a scroller */
  .menu__inner { gap: var(--sc-4); }
  .menu__link { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .menu__pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .menu__piece img { aspect-ratio: 3 / 2; }
  .menu__piece-dial { display: none; }
}