/* GLN — draft 21, "GLN, in the dark". Black field, a tall serif, light as the only ornament. */

:root {
  --black: #000;
  --panel: #0b0b0c;
  --white: #f5f3ee;
  --grey: #9a9894;
  --champ: #c9b48a;
  --line: rgba(201, 180, 138, .34);
  --dim: #3b3a37;

  --serif: "Imbue", "Imbue Fallback", "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;

  /* 1px up to 1440, growing to 1.5px at 2560 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) * .000446), 1.5px);
  --gx: clamp(20px, 5vw, calc(80 * var(--u)));
  --col: calc((100vw - 2 * var(--gx)) / 12);

  /* spacing scale: module rhythm and chapter padding */
  --gap-mod: clamp(96px, 24vh, 320px);
  --gap-chapter: clamp(100px, 18vh, 240px);
  --ease: cubic-bezier(.19, .64, .16, 1);
  --ease-io: cubic-bezier(.62, 0, .26, 1);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

/* 16px up to 1440, 21px at 2560 */
html { font-size: clamp(16px, calc(16px + (100vw - 1440px) * .004464), 21px); background: var(--black); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--black); color: var(--grey);
  font: 300 1rem/1.62 var(--sans); letter-spacing: .006em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
button, input, select { font: inherit; color: inherit; }
::selection { background: var(--champ); color: var(--black); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--white); color: var(--black); text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }
:focus-visible { outline: 1px solid var(--champ); outline-offset: 4px; }

.rule { border: 0; height: 1px; margin: 0 var(--gx); background: var(--line); }

/* ---------- type ---------- */
.display, .statement__text, .tt__big, .mod__title, .quiet__title, .cfg__title, .visit__title, .foot__mark, .wordmark {
  font-family: var(--serif); font-optical-sizing: auto; color: var(--white);
}
.display { font-weight: 280; font-size: clamp(48px, 7.4vw, calc(112 * var(--u))); line-height: 1.02; letter-spacing: -.004em; }
.tag { font-size: .8125rem; line-height: 1.4; color: var(--grey); letter-spacing: .01em; }

/* ---------- buttons ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: calc(50 * var(--u)); padding: 0 calc(30 * var(--u));
  border: 1px solid rgba(245, 243, 238, .62); border-radius: 999px; background: transparent;
  color: var(--white); font: 400 .9375rem/1 var(--sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.pill:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.pill:focus-visible { outline: 1px solid var(--champ); outline-offset: 5px; }
.pill--solid { background: var(--white); color: var(--black); border-color: var(--white); }
.pill--solid:hover { background: transparent; color: var(--white); border-color: rgba(245, 243, 238, .62); }
@media (max-width: 767px) { .pill { min-height: 48px; padding: 0 24px; } }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: calc(84 * var(--u));
  display: flex; align-items: center; gap: calc(40 * var(--u)); padding: 0 var(--gx);
  transition: transform .7s var(--ease), background-color .6s ease;
}
.nav::after { content: ""; position: absolute; left: var(--gx); right: var(--gx); bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .6s ease; }
.nav.is-solid { background: rgba(0, 0, 0, .86); }
.nav.is-solid::after { opacity: 1; }
.nav.is-hidden { transform: translateY(-101%); }
.wordmark { font-size: calc(27 * var(--u)); font-weight: 380; letter-spacing: .24em; text-decoration: none; margin-right: auto; padding: 8px 0; }
.nav__links ul { display: flex; gap: calc(34 * var(--u)); margin: 0; padding: 0; list-style: none; }
.nav__links a { font-size: .875rem; letter-spacing: .02em; color: var(--grey); text-decoration: none; padding: 12px 0; transition: color .3s; }
.nav__links a:hover { color: var(--white); }
.pill--nav { min-height: calc(42 * var(--u)); padding: 0 calc(22 * var(--u)); font-size: .8125rem; }
.pill__short { display: none; }
@media (max-width: 860px) {
  .nav { height: 64px; }
  .nav.is-solid { background: #000; }
  .nav__links { display: none; }
  .wordmark { font-size: 22px; }
  .pill--nav { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .pill__long { display: none; }
  .pill__short { display: inline; }
}

/* ---------- 1 · hero ---------- */
.hero { position: relative; height: var(--vh); min-height: 560px; overflow: hidden; background: var(--black); container-type: inline-size; }
.hero__stage, .hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img, .hero__sweep-in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__canvas { opacity: 0; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1); }
.hero-live .hero__canvas { opacity: 1; }
.hero-live .hero__poster, .hero-live .hero__sweep { visibility: hidden; transition: visibility 0s linear 1.2s; }
.custom-model .hero__poster, .custom-model .hero__sweep { display: none; }
.custom-model .hero__canvas { transition: none; }

.hero__copy {
  position: absolute; left: var(--gx); bottom: calc(96 * var(--u)); z-index: 2;
  width: min(calc(5.6 * var(--col)), 100% - 2 * var(--gx));
}
.hero__copy .display { margin-bottom: calc(30 * var(--u)); }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; }
.hero__sub { max-width: 30em; margin-bottom: calc(38 * var(--u)); font-size: 1.0625rem; color: var(--grey); }
.hero__caption { position: absolute; right: var(--gx); bottom: calc(40 * var(--u)); z-index: 2; font-size: .8125rem; color: #7d7b77; }

/* sweep: a narrow strip moves across; the poster inside it moves the other way, so the strip
   reveals a brightened, fixed image. Both are transform animations, so they run on the compositor
   even while the main thread is busy. */
.hero__sweep {
  --bw: 6.4cqw; --x0: 53.4cqw; --x1: 71.8cqw; --top: 6%; --bot: 80%;
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--bw); overflow: hidden; opacity: 0; pointer-events: none;
  transform: translate3d(var(--x0), 0, 0); will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%, transparent), linear-gradient(transparent var(--top), #000 calc(var(--top) + 4%), #000 calc(var(--bot) - 6%), transparent var(--bot));
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(90deg, transparent, #000 50%, transparent), linear-gradient(transparent var(--top), #000 calc(var(--top) + 4%), #000 calc(var(--bot) - 6%), transparent var(--bot));
          mask-composite: intersect;
}
.hero__sweep-in { position: absolute; top: 0; left: 0; width: 100cqw; max-width: none; height: 100%; transform: translate3d(calc(-1 * var(--x0)), 0, 0); filter: sepia(.2) brightness(3.6) contrast(1.1); will-change: transform; }
@media (max-aspect-ratio: 4/5) { .hero__sweep { --bw: 14cqw; --x0: 18cqw; --x1: 68cqw; --top: 8%; --bot: 58%; } }

.js .hero__poster { opacity: 0; }
.js .hero .ln > span { transform: translate3d(0, 110%, 0); }
.js .hero__sub, .js .hero__copy .pill, .js .hero__caption, .js .nav { opacity: 0; }

.go .hero__sweep { animation: sweep-move 1050ms cubic-bezier(.4, 0, .36, 1) both, sweep-fade 1050ms linear both; }
.go .hero__sweep-in { animation: sweep-counter 1050ms cubic-bezier(.4, 0, .36, 1) both; }
.go .hero__poster { animation: keylight 850ms cubic-bezier(.3, 0, .2, 1) 500ms both; }
.go .hero .ln > span { animation: rise 820ms var(--ease) both; }
.go .hero .ln:nth-of-type(1) > span { animation-delay: 480ms; }
.go .hero .ln:nth-of-type(2) > span { animation-delay: 590ms; }
.go .hero__sub { animation: fade 650ms ease 780ms both; }
.go .hero__copy .pill { animation: fade 650ms ease 860ms both; }
.go .hero__caption, .go .nav { animation: fade 650ms ease 900ms both; }

@keyframes sweep-move { from { transform: translate3d(var(--x0), 0, 0); } to { transform: translate3d(var(--x1), 0, 0); } }
@keyframes sweep-counter { from { transform: translate3d(calc(-1 * var(--x0)), 0, 0); } to { transform: translate3d(calc(-1 * var(--x1)), 0, 0); } }
@keyframes sweep-fade { 0% { opacity: 0; } 9% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes keylight { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-aspect-ratio: 4/5) {
  .hero__copy { bottom: 44px; width: calc(100% - 2 * var(--gx)); }
  .hero__caption { display: none; }
}
@media (max-width: 767px) {
  .hero__sub { font-size: 1rem; margin-bottom: 26px; }
  .hero__copy .display { margin-bottom: 18px; }
}

/* ---------- 2 · statement ---------- */
.statement { padding: calc(230 * var(--u)) var(--gx) calc(210 * var(--u)); }
.statement__text {
  max-width: 17.5em; font-weight: 270; font-size: clamp(36px, 5.2vw, calc(80 * var(--u))); line-height: 1.12; letter-spacing: -.002em;
}
.motion .statement__text {
  --lit: -20%;
  background: linear-gradient(90deg, var(--white) calc(var(--lit) - 14%), #fffaf0 var(--lit), var(--dim) calc(var(--lit) + 9%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statement__note { max-width: 34em; margin: calc(56 * var(--u)) 0 0 calc(4 * var(--col) + 6px); font-size: 1.0625rem; }
@media (max-width: 900px) {
  .statement { padding: 120px var(--gx) 110px; }
  .statement__note { margin-left: 0; margin-top: 36px; font-size: 1rem; }
}

/* ---------- 3 · turntable ---------- */
/* Default (no JS, reduced motion, libraries missing): a still stage and every line in order.
   With .motion the section pins and the lines replace one another as the panel turns. */
.turntable { position: relative; }
.tt__pin { position: relative; display: grid; }
.tt__stage { position: relative; height: min(88vh, 1100px); min-height: 460px; }
.tt__canvas, .cfg__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.still img { width: 100%; height: 100%; object-fit: cover; }
.tt__stage .still, .cfg__stage .still { position: absolute; inset: 0; }
.js .still { display: none; }
.js.no-webgl .still { display: block; }

.dims { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; pointer-events: none; }
.dims line { stroke: var(--champ); stroke-width: 1; vector-effect: non-scaling-stroke; shape-rendering: geometricPrecision; }
.dims__wall { stroke-dasharray: 2 5; opacity: .75; }
.dims__label, .dims__wall-label { fill: var(--champ); font: 400 calc(14 * var(--u)) var(--sans); letter-spacing: .04em; }
.dims__wall-label { fill: #8d7f63; }

.tt__lines { position: relative; margin: 0; padding: 48px var(--gx) 24px; list-style: none; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.tt__line { position: relative; }
.tt__big { overflow: hidden; padding-bottom: .08em; margin-bottom: calc(18 * var(--u)); font-weight: 280; font-size: clamp(28px, 2.6vw, calc(42 * var(--u))); line-height: 1.08; }
.tt__big > span { display: block; }
.tt__small { max-width: 27em; font-size: 1rem; }

.tt__progress { position: absolute; left: var(--gx); right: var(--gx); top: calc(min(88vh, 1100px) - 70px); z-index: 2; }
html:not(.js) .tt__progress, .no-libs .tt__progress { display: none; }
.tt__rail { position: relative; height: 1px; background: rgba(245, 243, 238, .14); }
.tt__fill { position: absolute; inset: 0; background: var(--champ); transform-origin: 0 50%; transform: scaleX(0); }
.tt__stops { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.tt__stops button {
  display: block; min-height: 44px; padding: calc(12 * var(--u)) 0 0; border: 0; background: none; cursor: pointer;
  font-size: .8125rem; letter-spacing: .02em; color: #7d7b77; text-align: left; transition: color .4s;
}
.tt__stops button:hover { color: var(--white); }
.tt__stops button[aria-current="true"] { color: var(--champ); }

/* pinned */
.motion .turntable { height: calc(var(--vh) * 4.4); }
.motion .tt__pin { position: sticky; top: 0; display: block; height: var(--vh); min-height: 600px; overflow: hidden; }
.motion .tt__stage { position: absolute; inset: 0; height: auto; min-height: 0; }
.motion .tt__lines { position: absolute; left: var(--gx); bottom: calc(150 * var(--u)); z-index: 2; display: block; padding: 0; width: min(calc(5.4 * var(--col)), 100% - 2 * var(--gx)); }
.motion .tt__line { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.motion .tt__line.is-active { position: relative; opacity: 1; visibility: visible; transition: opacity .9s ease .12s; }
.motion .tt__big { font-size: clamp(34px, 4.1vw, calc(64 * var(--u))); }
.motion .tt__big > span { transform: translate3d(0, 104%, 0); transition: transform .9s var(--ease) .1s; }
.motion .tt__line.is-active .tt__big > span { transform: none; }
.motion .tt__progress { top: auto; bottom: calc(52 * var(--u)); }
.motion .tt__lines, .motion .tt__progress { opacity: var(--tt-fade, 0); }
.motion .tt__stage, .motion .tt__lines, .motion .tt__progress { translate: 0 var(--tt-shift, 0px); }
@media (max-width: 767px) {
  .motion .tt__lines { bottom: 104px; width: calc(100% - 2 * var(--gx)); }
  .motion .tt__big { font-size: 32px; margin-bottom: 12px; }
  .motion .tt__progress { bottom: 22px; }
}

/* ---------- 4 · details ---------- */
.details { padding: var(--gap-chapter) var(--gx) 0; }
.mod { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); align-items: center; margin-bottom: var(--gap-mod); }
.mod:last-child { margin-bottom: var(--gap-chapter); }
.mod__media { margin: 0; }
.mod--a .mod__media { grid-column: 1 / span 8; }
.mod--a .mod__text { grid-column: 10 / span 3; }
.mod--b .mod__media { grid-column: 5 / span 8; grid-row: 1; }
.mod--b .mod__text { grid-column: 1 / span 3; grid-row: 1; }
.unit { margin-left: -.04em; letter-spacing: -.035em; }   /* Imbue sets ° with a wide side-bearing */
.mod__title { font-weight: 290; font-size: clamp(32px, 3.4vw, calc(54 * var(--u))); line-height: 1.1; margin-bottom: calc(24 * var(--u)); }
.mod__text p { max-width: 24em; }
.mod__media .tag { margin-top: calc(14 * var(--u)); }
/* materials: leather (tall) and veneer (wide) as one pair, same height, aligned */
.mod--pair .mod__pair { grid-column: 4 / span 9; grid-row: 1; display: grid; grid-template-columns: .52fr 1fr; column-gap: calc(24 * var(--u)); align-items: stretch; }
.mod--pair .mod__text { grid-column: 1 / span 3; }
.mod--pair .mod__pair .mod__media { grid-column: auto; grid-row: auto; }
/* the tall image takes the veneer's height instead of setting its own */
.mod--pair .mod__media--tall { position: relative; }
.mod--pair .mod__media--tall .slit { position: absolute; inset: 0; }
.mod--pair .mod__media--tall picture { height: 100%; }
.mod--pair .mod__media--tall img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }

.slit { position: relative; overflow: hidden; background: #050505; }
.slit img { width: 100%; height: auto; transform-origin: 50% 50%; }
.motion .slit { --open: 0; --line: 0; clip-path: inset(calc(50% - var(--open) * 50%) 0 calc(50% - var(--open) * 50%) 0); }
.motion .slit.is-open { clip-path: none; }
.slit::before, .slit::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 2; pointer-events: none;
  background: #fff6e8; box-shadow: 0 0 12px 1px rgba(255, 238, 205, .45); opacity: 0;
}
.motion .slit::before, .motion .slit::after { opacity: calc(var(--line) * (1 - var(--open) * var(--open))); transform: scaleX(var(--line)); }
.motion .slit::before { top: calc(50% - var(--open) * 50%); }
.motion .slit::after { bottom: calc(50% - var(--open) * 50%); }

@media (max-width: 900px) {
  .details { padding: 110px var(--gx) 20px; }
  .mod { display: block; margin-bottom: 110px; }
  .mod__text { margin-top: 28px; }
  .mod--b .mod__text { display: block; }
  .mod--pair .mod__pair { column-gap: 10px; }
}

/* ---------- 5 · quiet ---------- */
.quiet { position: relative; height: max(var(--vh), 640px); overflow: hidden; background: var(--black); }
.quiet__img, .quiet__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.quiet__img img { object-fit: cover; object-position: 60% 50%; }
.quiet__shade { position: absolute; inset: 0; background: #000; opacity: 0; }
.motion .quiet__shade { opacity: .78; }
.quiet__copy { position: absolute; left: var(--gx); top: 50%; transform: translateY(-50%); width: min(calc(5.2 * var(--col)), 100% - 2 * var(--gx)); }
.quiet__title { font-weight: 270; font-size: clamp(34px, 4vw, calc(62 * var(--u))); line-height: 1.14; }
.quiet__tag { position: absolute; right: var(--gx); bottom: calc(32 * var(--u)); }
@media (max-aspect-ratio: 4/5) {
  .quiet__img img { object-position: 50% 50%; }
  .quiet::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .86) 55%); }
  .quiet__copy { top: auto; bottom: 64px; transform: none; z-index: 2; width: calc(100% - 2 * var(--gx)); }
  .quiet__tag { z-index: 2; bottom: 20px; }
}

/* ---------- 6 · configure ---------- */
.configure { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); padding: calc(160 * var(--u)) var(--gx) calc(170 * var(--u)); align-items: center; }
.cfg__stage {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent); mask-composite: intersect;
}
.cfg__stage { position: relative; grid-column: 1 / span 7; height: min(calc(var(--vh) - 120px), calc(1080 * var(--u))); min-height: 560px; margin-left: calc(-1 * var(--gx)); }
.cfg__panel { grid-column: 8 / span 5; max-width: calc(560 * var(--u)); }
.cfg__title { font-weight: 290; font-size: clamp(34px, 3.6vw, calc(58 * var(--u))); line-height: 1.08; margin-bottom: calc(18 * var(--u)); }
.cfg__lead { margin-bottom: calc(44 * var(--u)); max-width: 26em; }
.cfg__form { display: grid; gap: calc(34 * var(--u)); margin-bottom: calc(40 * var(--u)); }
.cfg__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.cfg__group legend { padding: 0; margin-bottom: calc(14 * var(--u)); font-size: .875rem; color: var(--white); letter-spacing: .02em; }
.swatches { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }
.swatch { position: relative; display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 44px; min-height: 44px; border-radius: 50%; cursor: pointer; }
.swatch input, .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch__dot { width: 62%; height: 62%; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .5s var(--ease); pointer-events: none; }
.swatch::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; transition: border-color .4s; pointer-events: none; }
.swatch:hover::after { border-color: rgba(245, 243, 238, .3); }
.swatch:has(input:checked)::after { border-color: var(--champ); }
.swatch:has(input:focus-visible) { outline: 1px solid var(--champ); outline-offset: 3px; }
.swatch--custom .swatch__dot { width: 46%; height: 46%; }
.swatch--custom::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px dashed rgba(216, 211, 201, .7); pointer-events: none; }
.cfg__finish { margin-top: calc(14 * var(--u)); min-height: 3.2em; font-size: .9375rem; }
.cfg__finish-name { color: var(--white); margin-right: .35em; }
.seg { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.seg label { position: relative; display: inline-flex; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 calc(20 * var(--u)); border: 1px solid rgba(245, 243, 238, .22); border-radius: 999px; font-size: .9375rem; color: var(--grey); font-variant-numeric: tabular-nums; transition: border-color .35s, color .35s; pointer-events: none; }
.seg label:hover span { border-color: rgba(245, 243, 238, .5); color: var(--white); }
.seg input:checked + span { border-color: var(--champ); color: var(--white); }
.seg input:focus-visible + span { outline: 1px solid var(--champ); outline-offset: 3px; }
.cfg__hint { margin-top: 10px; font-size: .8125rem; color: #7d7b77; }
.cfg__summary { padding-top: calc(24 * var(--u)); margin-bottom: calc(32 * var(--u)); border-top: 1px solid var(--line); color: var(--white); max-width: 30em; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .configure { display: block; padding: 90px var(--gx) 100px; }
  /* the preview stays in view (below the header) while the controls scroll under it */
  .cfg__stage { position: sticky; top: 64px; z-index: 3; height: min(42vh, 420px); min-height: 260px; margin: 0 calc(-1 * var(--gx)) 32px;
    background: #000; border-bottom: 1px solid var(--line); -webkit-mask-image: none; mask-image: none; }
  .cfg__panel { max-width: none; }
}

/* ---------- 7 · visit ---------- */
.visit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); padding: calc(170 * var(--u)) var(--gx) calc(190 * var(--u)); }
.visit__intro { grid-column: 1 / span 5; }
.visit__title { font-weight: 290; font-size: clamp(34px, 3.6vw, calc(58 * var(--u))); line-height: 1.08; margin-bottom: calc(26 * var(--u)); max-width: 11em; }
.visit__intro > p { max-width: 28em; margin-bottom: calc(48 * var(--u)); }
.visit__facts { margin: 0; display: grid; gap: calc(20 * var(--u)); }
.visit__facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em; padding-top: calc(16 * var(--u)); border-top: 1px solid rgba(245, 243, 238, .1); }
.visit__facts dt { color: #7d7b77; font-size: .875rem; padding-top: .1em; }
.visit__facts dd { margin: 0; color: var(--white); }
.visit__facts a { text-decoration-color: var(--line); text-underline-offset: .25em; }
.visit__form { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)) calc(24 * var(--u)); align-content: start; padding-top: calc(10 * var(--u)); }
.field { display: grid; gap: 10px; min-width: 0; }
.field label { font-size: .875rem; color: var(--white); letter-spacing: .02em; }
.field input, .field select {
  width: 100%; min-height: calc(56 * var(--u)); padding: 0 calc(18 * var(--u)); border: 1px solid rgba(245, 243, 238, .18); border-radius: 0;
  background: var(--panel); color: var(--white); font-size: 1rem; transition: border-color .3s;
  -webkit-appearance: none; appearance: none;
}
.field select { padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(-45deg, transparent 50%, var(--grey) 50%); background-size: 5px 5px; background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%; background-repeat: no-repeat; }
.field input:hover, .field select:hover { border-color: rgba(245, 243, 238, .36); }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--champ); }
.field input[aria-invalid="true"] { border-color: #b98a74; }
.field__err { min-height: 1.3em; font-size: .8125rem; color: #d2a590; }
.field__err:empty { min-height: 0; }
.visit__config { grid-column: 1 / -1; padding: calc(16 * var(--u)) 0; border-top: 1px solid var(--line); color: var(--white); font-size: .9375rem; }
.visit__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)) calc(28 * var(--u)); margin-top: calc(8 * var(--u)); }
.visit__note { font-size: .875rem; }
.visit__status { grid-column: 1 / -1; color: var(--white); }
.visit__status:empty { display: none; }
@media (max-width: 900px) {
  .visit { display: block; padding: 100px var(--gx) 110px; }
  .visit__form { margin-top: 64px; grid-template-columns: 1fr; }
  .visit__facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- footer ---------- */
.foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); align-items: end; padding: calc(90 * var(--u)) var(--gx) calc(64 * var(--u)); border-top: 1px solid var(--line); margin: 0 var(--gx); padding-left: 0; padding-right: 0; }
.foot__mark { grid-column: 1 / span 5; font-size: clamp(64px, 9vw, calc(150 * var(--u))); font-weight: 300; letter-spacing: .2em; line-height: .9; }
.foot__text { grid-column: 7 / span 6; display: grid; gap: 8px; font-size: .875rem; }
.foot__text a { color: var(--white); text-decoration-color: var(--line); text-underline-offset: .25em; }
@media (max-width: 900px) {
  .foot { display: block; padding: 70px 0 48px; }
  .foot__text { margin-top: 36px; }
}

/* phones: small text no smaller than 15–16 px */
@media (max-width: 767px) {
  .foot__text, .visit__note, .cfg__finish, .field label, .cfg__group legend { font-size: 1rem; }
  .tag, .cfg__hint, .tt__stops button, .visit__facts dt { font-size: .9375rem; }
  .swatches { gap: 8px; }
  .swatch { width: 44px; height: 44px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
.rm .hero__poster, .rm .hero__sub, .rm .hero__copy .pill, .rm .hero__caption, .rm .nav { opacity: 1; }
.rm .hero .ln > span { transform: none; }
.rm .hero__sweep { display: none; }

/* ---------- language switch: EN / 中文 ---------- */
.lang { display: flex; align-items: center; flex: none; }
.lang__btn { min-width: 44px; min-height: 44px; padding: 0 6px; background: none; border: 0; font: 300 .8125rem/1 var(--sans); letter-spacing: .04em; color: var(--grey); cursor: pointer; transition: color .3s; }
.lang__btn[aria-pressed="true"] { color: var(--white); box-shadow: inset 0 -1px 0 -0 transparent; text-decoration: underline; text-decoration-color: var(--champ); text-underline-offset: .5em; text-decoration-thickness: 1px; }
.lang__btn:hover { color: var(--white); }
.lang__btn[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif; letter-spacing: 0; }
.lang__sep { color: #4a4946; font-size: .75rem; }
@media (max-width: 860px) { .nav { gap: 12px; } }

/* ---------- Simplified Chinese ---------- */
:root:lang(zh) {
  --serif: "Imbue", "Noto Sans SC", "Noto Sans SC Fallback", "Imbue Fallback", serif;
  --sans: "Hanken Grotesk", "Noto Sans SC", "Noto Sans SC Fallback", "Hanken Fallback", sans-serif;
}
:lang(zh) body { line-height: 1.85; letter-spacing: 0; }
:lang(zh) .display { font-weight: 300; font-size: clamp(34px, 5.2vw, calc(80 * var(--u))); line-height: 1.3; letter-spacing: .02em; }
:lang(zh) .mod__title { font-weight: 300; font-size: clamp(24px, 2.5vw, calc(40 * var(--u))); line-height: 1.4; letter-spacing: .02em; text-wrap: balance; }
:lang(zh) .quiet__title { font-weight: 300; font-size: clamp(26px, 2.9vw, calc(46 * var(--u))); line-height: 1.4; letter-spacing: .02em; text-wrap: balance; }
:lang(zh) .cfg__title, :lang(zh) .visit__title { font-weight: 300; font-size: clamp(26px, 2.7vw, calc(44 * var(--u))); line-height: 1.35; letter-spacing: .02em; }
:lang(zh) .tt__big { font-weight: 300; font-size: clamp(22px, 2vw, calc(32 * var(--u))); line-height: 1.4; }
:lang(zh) .motion .tt__big { font-size: clamp(26px, 3vw, calc(46 * var(--u))); }
:lang(zh) .statement__text { font-weight: 300; line-height: 1.5; letter-spacing: .02em; }
:lang(zh) .nav__links a, :lang(zh) .pill, :lang(zh) .tag { letter-spacing: .04em; }
:lang(zh) p { text-wrap: pretty; }
@media (max-width: 767px) {
  :lang(zh) .display { font-size: clamp(32px, 9vw, 44px); }
  :lang(zh) .motion .tt__big { font-size: 24px; }
}