/* GLN 11 — Sound made visible. Night palette, one lamp colour, a clock and some lines. */

@font-face { font-family: "Sofia Sans"; src: url("fonts/sofia-sans-var-latin.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Sofia Sans Condensed"; src: url("fonts/sofia-sans-condensed-var-latin.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("fonts/sofia-sans-extra-condensed-var-latin.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Azeret Mono"; src: url("fonts/azeret-mono-var-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* size-matched local fallbacks, so a late font doesn't shove the layout */
/* Chinese: Noto Sans SC (variable 250–600), subset to this page's Chinese strings; only fetched when the page is in Chinese */
@font-face { font-family: "GLN Sans SC"; src: url("fonts/noto-sans-sc-gln.woff2") format("woff2"); font-weight: 250 600; font-style: normal; font-display: swap; unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF, U+2014, U+2018-201D, U+2026, U+00B7; }
@font-face { font-family: "GLN SC fb"; src: local("PingFang SC"), local("Microsoft YaHei"), local("Hiragino Sans GB"), local("Source Han Sans SC"); }
@font-face { font-family: "Sofia Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 93%; ascent-override: 98%; descent-override: 26%; }
@font-face { font-family: "Sofia Cond Fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 78%; ascent-override: 118%; descent-override: 30%; }
@font-face { font-family: "Azeret Fallback"; src: local("Consolas"), local("Courier New"); size-adjust: 97%; }

:root {
  --night: #05060A;
  --moon: #E9E6DC;
  --moon-2: #C8C5BB;   /* running text, a step below the moon */
  --mist: #9A9CA4;     /* secondary text: 7:1 on night */
  --dim: #4B4E57;      /* lines and rules only, never text */
  --lamp: #FFB347;     /* the GLN room and the calls to action */
  --lamp-hi: #FFC572;
  --deep: #0B0D13;     /* the wall in the drawing, the fields */

  /* 1px up to 1440 wide, growing to 1.5px at 2560: layout, display type, spacing */
  --u: clamp(1px, calc(1px + (100vw - 1440px) / 2240), 1.5px);
  /* 1px up to 1440, 1.25px at 2560: running text */
  --t: clamp(1px, calc(1px + (100vw - 1440px) / 4480), 1.25px);

  --gutter: clamp(20px, 4.4vw, 128px);
  --head-h: calc(var(--u) * 76);
  --measure: calc(var(--t) * 640);

  --f-clock: "Sofia Sans Extra Condensed", "Sofia Cond Fallback", "Arial Narrow", sans-serif;
  --f-disp: "Sofia Sans Condensed", "Sofia Cond Fallback", "Arial Narrow", sans-serif;
  --f-text: "Sofia Sans", "Sofia Fallback", Arial, sans-serif;
  --f-mono: "Azeret Mono", "Azeret Fallback", Consolas, monospace;

  --fs-body: calc(var(--t) * 17);
  --fs-small: calc(var(--t) * 15);
  --fs-stamp: calc(var(--t) * 14.5);
  --fs-cap: calc(var(--t) * 12.5);
  --fs-h1: calc(var(--u) * 50);
  --fs-h2: calc(var(--u) * 44);
  --fs-h3: calc(var(--t) * 22);

  /* the night stage */
  --night-len: 6;
  --clock-size: min(calc(var(--u) * 300), 33vh, 60vw);
  --clock-top: calc(var(--head-h) + 2.6vh);
  --y-fan: 59%;
  --y-gln: 77%;
  --amp: min(calc(var(--u) * 84), 9.5vh);

  --ease-out: cubic-bezier(.16, .84, .24, 1);
  --ease-soft: cubic-bezier(.4, .1, .2, 1);
}
@supports (height: 1svh) {
  :root { --clock-size: min(calc(var(--u) * 300), 33svh, 60vw); --clock-top: calc(var(--head-h) + 2.6svh); --amp: min(calc(var(--u) * 84), 9.5svh); }
}
@media (max-width: 767px) {
  :root {
    --head-h: 60px;
    --fs-body: 16.5px;
    --fs-small: 15px;
    --fs-stamp: 14px;
    --fs-cap: 12.5px;
    --fs-h1: 35px;
    --fs-h2: 31px;
    --fs-h3: 21px;
    --night-len: 5.6;
    --clock-size: min(196px, 54vw, 25vh);
    --y-fan: 58.5%;
    --y-gln: 77%;
    --amp: min(66px, 8vh);
  }
  @supports (height: 1svh) { :root { --clock-size: min(196px, 54vw, 25svh); --amp: min(66px, 8svh); } }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--moon); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--moon-2);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  font-weight: 380;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: normal; }
address { font-style: normal; }
::selection { background: var(--lamp); color: var(--night); }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; border-radius: 2px; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 16px; background: var(--moon); color: var(--night);
  transform: translateY(-200%); text-decoration: none;
}
.skip:focus { transform: none; }

/* ---------- type ---------- */
.h2 {
  font-family: var(--f-disp);
  font-weight: 290;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--moon);
  text-wrap: balance;
}
.h3 {
  font-family: var(--f-disp);
  font-weight: 420;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--moon);
}
.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--moon); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.78em) / 100% 1px no-repeat;
  transition: color .3s var(--ease-soft), background-size .4s var(--ease-out);
}
.text-link:hover { color: var(--lamp); }
.stamp, time { font-family: var(--f-mono); font-weight: 330; font-size: var(--fs-stamp); letter-spacing: -0.01em; color: var(--mist); font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 26);
  border: 0; border-radius: 2px; cursor: pointer;
  font-family: var(--f-text); font-weight: 520; font-size: var(--fs-small); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft), transform .2s var(--ease-soft);
}
.btn--lamp { background: var(--lamp); color: var(--night); }
.btn--lamp:hover { background: var(--lamp-hi); }
.btn--lamp:active { transform: translateY(1px); }
.btn--small { min-height: 44px; padding: 0 calc(var(--u) * 18); }

/* The listen button: a small round speaker grille of a disc, and a plain label */
.listen-btn {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 14);
  min-height: 48px; padding: 0 calc(var(--u) * 22) 0 0;
  background: none; border: 0; cursor: pointer; color: var(--moon);
  font-family: var(--f-text); font-weight: 480; font-size: var(--fs-small); letter-spacing: 0.01em;
  border-radius: 999px;
}
.listen-btn__disc {
  position: relative; display: grid; place-items: center;
  width: calc(var(--u) * 52); height: calc(var(--u) * 52); min-width: 48px; min-height: 48px;
  border-radius: 50%; border: 1px solid rgba(233, 230, 220, .42);
  transition: border-color .35s var(--ease-soft), background-color .35s var(--ease-soft);
}
.listen-btn__disc::after {   /* a faint ring that shows sound is on */
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid var(--lamp); opacity: 0; transform: scale(.9);
  transition: opacity .4s var(--ease-soft), transform .6s var(--ease-out);
}
.listen-btn svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.listen-btn .i-stop { display: none; fill: currentColor; stroke: none; }
.listen-btn:hover .listen-btn__disc { border-color: var(--moon); }
.listen-btn.is-on .listen-btn__disc { border-color: var(--lamp); color: var(--lamp); }
.listen-btn.is-on .listen-btn__disc::after { opacity: .45; transform: none; }
.listen-btn.is-on .i-phones { display: none; }
.listen-btn.is-on .i-stop { display: block; }
.listen-btn--big { gap: calc(var(--u) * 18); font-size: calc(var(--t) * 18); }
.listen-btn:focus-visible { outline-offset: 6px; }

/* ---------- header ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--head-h);
  display: flex; align-items: center; gap: calc(var(--u) * 36);
  padding: 0 var(--gutter);
  background: linear-gradient(var(--night), rgba(5, 6, 10, .86) 70%, rgba(5, 6, 10, 0));
}
.wordmark {
  font-family: var(--f-disp); font-weight: 560; font-size: calc(var(--u) * 24);
  letter-spacing: 0.16em; color: var(--moon); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; margin-right: auto;
}
.site-nav { display: flex; gap: calc(var(--u) * 30); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-small); color: var(--mist); text-decoration: none;
  transition: color .3s var(--ease-soft);
}
.site-nav a:hover { color: var(--moon); }
@media (max-width: 900px) { .site-nav { display: none; } }

/* ---------- the night (hero + pinned sequence) ---------- */
.night { position: relative; }
.night__track { position: relative; }
.night__stage { position: relative; }
.clock {
  font-family: var(--f-clock);
  font-weight: 110;
  font-size: var(--clock-size);
  line-height: .8;
  letter-spacing: 0;
  color: var(--moon);
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  user-select: none;
}
.clock__d { display: inline-block; width: var(--dw, .36em); text-align: center; }
.clock__colon { display: inline-block; width: .17em; text-align: center; transform: translateY(-.045em); }

.night__log {
  display: flex; justify-content: center; align-items: baseline; gap: .9em;
  font-size: var(--fs-small); color: var(--moon-2); min-height: 1.6em;
}
.night__log-time { font-family: var(--f-mono); font-weight: 330; font-size: var(--fs-stamp); color: var(--mist); }

.hero-copy { text-align: center; }
.hero-copy__in { display: flex; flex-direction: column; align-items: center; }
.hero-copy__title {
  font-family: var(--f-disp); font-weight: 280; font-size: var(--fs-h1);
  line-height: 1.04; letter-spacing: -0.008em; color: var(--moon); text-wrap: balance;
}
.hero-copy__lede { margin-top: calc(var(--u) * 16); max-width: 34em; color: var(--moon-2); text-wrap: pretty; }
.hero-copy__acts { margin-top: calc(var(--u) * 26); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 6); }
.hero-copy__sound-note { font-size: var(--fs-cap); color: var(--mist); }

.night__tape { position: relative; }
.night__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.night__slot { position: absolute; left: 0; right: 0; pointer-events: none; }
.lane-label {
  position: absolute; left: var(--gutter); margin: 0;
  font-family: var(--f-disp); font-weight: 400; font-size: calc(var(--t) * 17); letter-spacing: 0.005em;
  line-height: 1.2; color: var(--moon);
}
.lane-label--gln { color: var(--lamp); }
.lane-label::before {   /* a small dot beside the room you are hearing, while sound is on */
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 0; border-radius: 50%;
  background: currentColor; vertical-align: .18em; opacity: 0; transform: translateX(0) scale(0);
  transition: opacity .3s var(--ease-soft), transform .4s var(--ease-out);
}
/* the text moves .55em right while the dot appears in place: the label slides, the dot is pulled back by the same amount */
.lane-label { transition: transform .4s var(--ease-out); }
.lane-label.is-heard { transform: translateX(.55em); }
.lane-label.is-heard::before { opacity: 1; transform: translateX(-.55em) scale(1); }
.night__hint, .night__note {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: var(--fs-cap); color: var(--mist); letter-spacing: 0.01em;
}
.night__hint { font-family: var(--f-mono); font-weight: 330; font-size: var(--fs-stamp); }
.night__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }

/* motion: the stage is pinned while the track scrolls past it */
.motion .night__track { height: calc(var(--night-len) * 100vh); }
@supports (height: 1svh) { .motion .night__track { height: calc(var(--night-len) * 100svh); } }
.motion .night__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
@supports (height: 1svh) { .motion .night__stage { height: 100svh; } }
.motion .clock { position: absolute; left: 0; right: 0; top: var(--clock-top); z-index: 2; }
.motion .night__log { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--clock-top) + var(--clock-size) * .8 + var(--u) * 16); z-index: 2; opacity: 0; }
.motion .hero-copy { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--clock-top) + var(--clock-size) * .8 + var(--u) * 38); z-index: 3; }
.motion .night__tape { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.motion .night__slot--fan { top: calc(var(--y-fan) - var(--amp)); height: calc(var(--amp) * 2); }
.motion .night__slot--gln { top: calc(var(--y-gln) - var(--amp)); height: calc(var(--amp) * 2); }
.motion .lane-label--fan { top: calc(var(--y-fan) - var(--amp) * 1.34 - 2.3em); opacity: 0; }
.motion .lane-label--gln { top: calc(var(--y-gln) - 2.9em); opacity: 0; }
.motion .night__hint { top: calc(var(--y-gln) + var(--u) * 26); }
.motion .night__note { bottom: calc(var(--u) * 22 + 1.5vh); opacity: 0; transition: bottom .5s var(--ease-out); }
.motion.sound-on .night__note { bottom: calc(var(--u) * 96 + 1.5vh); }
/* the anchor for "The night" sits where the first fan start is under the playhead */
.motion .night__anchor { top: calc((var(--night-len) - 1) * 100vh * .088); }
@supports (height: 1svh) { .motion .night__anchor { top: calc((var(--night-len) - 1) * 100svh * .088); } }

/* reduced motion or no pinning: a plain stacked layout, the whole night drawn at once */
html:not(.motion) .night__stage { padding: calc(var(--head-h) + 6vh) 0 0; }
html:not(.motion) .night__log { display: none; }
html:not(.motion) .hero-copy { margin-top: calc(var(--u) * 36); padding: 0 var(--gutter); }
html:not(.motion) .night__tape { height: clamp(340px, 34vw, 640px); margin-top: calc(var(--u) * 70); }
html:not(.motion) .night__slot--fan { top: calc(40% - var(--amp)); height: calc(var(--amp) * 2); }
html:not(.motion) .night__slot--gln { top: calc(76% - var(--amp)); height: calc(var(--amp) * 2); }
html:not(.motion) .lane-label--fan { top: calc(40% - var(--amp) * 1.34 - 2.3em); }
html:not(.motion) .lane-label--gln { top: calc(76% - 2.9em); }
html:not(.motion) .night__hint { display: none; }
html:not(.motion) .night__note { top: calc(100% + 6px); }
html:not(.motion) .night__after { padding-top: calc(var(--u) * 150); }
html:not(.js) .night__tape { height: auto; margin-top: calc(var(--u) * 40); }
html:not(.js) .night__canvas, html:not(.js) .lane-label { display: none; }

.night__after {
  position: relative; z-index: 2;
  padding: calc(var(--u) * 120) var(--gutter) calc(var(--u) * 84);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.night__after-lede { margin-top: calc(var(--u) * 22); max-width: 36em; text-wrap: pretty; }
.log {
  list-style: none; margin: calc(var(--u) * 56) 0 calc(var(--u) * 40); padding: 0;
  display: grid; grid-template-columns: repeat(4, auto); gap: calc(var(--u) * 12) calc(var(--u) * 48);
  text-align: left; font-size: var(--fs-small); color: var(--moon-2);
}
.log li { display: grid; grid-template-columns: 3.6em auto; gap: .6em; align-items: baseline; }
@media (max-width: 1100px) { .log { grid-template-columns: repeat(3, auto); } }
@media (max-width: 767px) { .log { grid-template-columns: repeat(2, auto); gap: 10px 22px; } }
@media (max-width: 420px) { .log { grid-template-columns: 1fr; } }

/* ---------- silence as a shape: the dividers ---------- */
.hush { position: relative; height: calc(var(--u) * 88); margin: 0; }
.hush canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
html:not(.motion) .hush canvas, html:not(.js) .hush canvas { display: none; }
html:not(.motion) .hush::before, html:not(.js) .hush::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--dim);
}

/* ---------- listen ---------- */
.listen {
  padding: calc(var(--u) * 96) var(--gutter) calc(var(--u) * 100);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.listen__lede { margin-top: calc(var(--u) * 22); max-width: 34em; text-wrap: pretty; }
.listen__label { margin-top: calc(var(--u) * 14); font-size: var(--fs-small); color: var(--lamp); }
.player { width: 100%; margin-top: calc(var(--u) * 8); display: flex; flex-direction: column; align-items: center; }
/* the scope runs edge to edge, like every other line on the page; the listen disc sits on it */
.scope {
  --scope-h: calc(var(--u) * 230);
  --disc: max(60px, calc(var(--u) * 84));
  position: relative; width: calc(100% + var(--gutter) * 2); margin: 0 calc(var(--gutter) * -1);
}
.scope__canvas { display: block; width: 100%; height: var(--scope-h); }
.scope .listen-btn--big {
  position: absolute; left: 50%; top: calc(var(--scope-h) / 2 - var(--disc) / 2); translate: -50% 0;
  flex-direction: column; gap: calc(var(--u) * 12); padding: 0;
}
.scope .listen-btn--big .listen-btn__disc { width: var(--disc); height: var(--disc); background: var(--night); }
.scope .listen-btn--big .listen-btn__text { padding: 2px 12px; background: var(--night); border-radius: 2px; white-space: nowrap; }
.scope__now { margin-top: calc(var(--u) * 6); display: flex; justify-content: center; gap: .9em; align-items: baseline; font-size: var(--fs-small); color: var(--moon-2); }
.scope__time { font-family: var(--f-mono); font-weight: 330; font-size: var(--fs-stamp); color: var(--mist); }
.mixer {
  width: min(100%, calc(var(--u) * 900)); margin-top: calc(var(--u) * 44);
  display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 22);
}
.mixer__room { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 18); }
.mixer__end {
  min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-small); color: var(--moon); white-space: nowrap;
  transition: color .3s var(--ease-soft);
}
.mixer__end--gln { color: var(--lamp); }
.mixer__end:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.mixer__vol { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * 18); width: min(100%, calc(var(--u) * 420)); justify-self: center; }
.mixer__vol label { font-size: var(--fs-small); color: var(--mist); }
.listen__caption { margin-top: calc(var(--u) * 28); max-width: 36em; min-height: 3.2em; color: var(--moon-2); text-wrap: pretty; }
.listen__keys { margin-top: calc(var(--u) * 10); font-size: var(--fs-cap); color: var(--mist); }
.nojs-note { display: none; margin-top: 16px; font-size: var(--fs-small); color: var(--mist); }
html:not(.js) .nojs-note { display: block; }
html:not(.js) .listen-btn, html:not(.js) .mixer, html:not(.js) .scope, html:not(.js) .listen__keys, html:not(.js) .hero-copy__acts { display: none; }
@media (max-width: 600px) {
  .mixer__room { grid-template-columns: 1fr 1fr; }
  .mixer__room .range--room { grid-column: 1 / -1; grid-row: 1; }
  .mixer__end { justify-self: start; }
  .mixer__end--gln { justify-self: end; }
}

/* a range that is a single line, like everything else here */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: none; cursor: pointer; margin: 0; --fill: 0%; }
.range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--moon) var(--fill), var(--dim) var(--fill)); }
.range::-moz-range-track { height: 1px; background: var(--dim); }
.range::-moz-range-progress { height: 1px; background: var(--moon); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8.5px; border-radius: 50%; background: var(--night); border: 1px solid var(--moon); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--night); border: 1px solid var(--moon); }
.range--room::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--moon), var(--lamp)); opacity: .7; }
.range--room::-moz-range-track { background: linear-gradient(90deg, var(--moon), var(--lamp)); }
.range--room::-moz-range-progress { background: none; }
.range--room::-webkit-slider-thumb { background: var(--thumb, var(--moon)); border-color: var(--thumb, var(--moon)); }
.range--room::-moz-range-thumb { background: var(--thumb, var(--moon)); border-color: var(--thumb, var(--moon)); }
.range:focus-visible { outline-offset: 2px; }

/* ---------- why it's quiet ---------- */
.why {
  padding: calc(var(--u) * 104) var(--gutter) calc(var(--u) * 116);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.why__lede { margin-top: calc(var(--u) * 22); max-width: 30em; text-wrap: pretty; }
.why__figure {
  width: min(100%, calc(var(--u) * 1560)); margin-top: calc(var(--u) * 80);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1.15fr);
  gap: calc(var(--u) * 48); align-items: center; text-align: left;
}
.why__col p { margin-top: calc(var(--u) * 10); font-size: var(--fs-small); line-height: 1.6; }
.why__col .h3 + p + .h3 { margin-top: calc(var(--u) * 34); }
.why__col--out { text-align: right; align-self: end; padding-bottom: calc(var(--u) * 40); }
.why__svg { width: 100%; height: auto; overflow: visible; }
.why__lines line, .why__lines path, .why__lines rect, .why__lines circle { stroke: var(--dim); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.why__solid { fill: var(--deep); }
.why__unit { stroke: rgba(233, 230, 220, .55) !important; }
.why__fins line, .why__fins rect { stroke: rgba(233, 230, 220, .3) !important; }
.why__pipe { stroke: rgba(233, 230, 220, .42) !important; }
.why__pipe--hidden { stroke-dasharray: 5 6; }
.why__panel { stroke: var(--moon) !important; fill: var(--night); }
.why__panel-fins line { stroke: rgba(233, 230, 220, .45) !important; }
.why__fitting { fill: var(--night); stroke: var(--moon) !important; }
.why__bed { stroke: rgba(233, 230, 220, .28) !important; }
.why__wave-out { fill: none; stroke: rgba(233, 230, 220, .62); stroke-width: 1; vector-effect: non-scaling-stroke; }
.why__wave-in { fill: none; stroke: var(--lamp); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.why__svg-label { font-family: var(--f-mono); font-weight: 330; font-size: 16px; fill: var(--mist); }
.why__svg-label--in { fill: var(--lamp); }
.why__more {
  width: min(100%, calc(var(--u) * 1180)); margin-top: calc(var(--u) * 110);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--u) * 96); text-align: left;
}
.why__felt p { margin-top: calc(var(--u) * 12); max-width: 34em; }
.why__felt p + p { margin-top: calc(var(--u) * 14); color: var(--moon); }
.spec { margin: calc(var(--u) * 14) 0 0; }
.spec div { display: grid; grid-template-columns: 6.2em 1fr; gap: 1em; padding: calc(var(--u) * 11) 0; border-top: 1px solid var(--dim); }
.spec div:last-child { border-bottom: 1px solid var(--dim); }
.spec dt { font-size: var(--fs-small); color: var(--mist); }
.spec dd { margin: 0; font-size: var(--fs-small); color: var(--moon-2); }
.spec__note { margin-top: calc(var(--u) * 10); font-size: var(--fs-cap); color: var(--mist); }
@media (max-width: 1000px) {
  .why__figure { grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .why__svg { grid-column: 1 / -1; grid-row: 1; }
  .why__col--out { text-align: left; align-self: start; padding: 0; }
  .why__more { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 600px) {
  .why__figure { grid-template-columns: 1fr; }
  .why__svg-label { font-size: 26px; }
}

/* ---------- glimpses ---------- */
.glimpses {
  padding: calc(var(--u) * 104) var(--gutter) calc(var(--u) * 120);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.glimpses__list {
  list-style: none; margin: calc(var(--u) * 80) 0 0; padding: 0;
  width: min(100%, calc(var(--u) * 1320));
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: calc(var(--u) * 72); align-items: start;
  text-align: left;
}
.glimpse figure { margin: 0; }
.glimpse--a { margin-top: calc(var(--u) * 90); }
.glimpse--b { margin-top: 0; }
.glimpse--c { margin-top: calc(var(--u) * 170); }
.glimpse__frame { position: relative; background: #000; }
.glimpse__frame img { width: 100%; }
.glimpse figcaption { margin-top: calc(var(--u) * 16); max-width: 22em; font-size: var(--fs-small); line-height: 1.55; color: var(--moon-2); }
.glimpse figcaption .stamp { display: block; margin-bottom: 4px; }
.tag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 2px 7px; background: rgba(5, 6, 10, .72);
  font-size: var(--fs-cap); color: var(--moon-2); letter-spacing: 0.01em; line-height: 1.5;
}
@media (max-width: 767px) {
  .glimpses__list { grid-template-columns: 1fr; gap: 56px; }
  .glimpse--a, .glimpse--b, .glimpse--c { margin-top: 0; }
  .glimpse--a { width: 88%; }
  .glimpse--b { width: 70%; justify-self: end; }
  .glimpse--c { width: 70%; }
}

/* ---------- visit ---------- */
.visit {
  padding: calc(var(--u) * 110) var(--gutter) calc(var(--u) * 120);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: calc(var(--u) * 96);
  align-items: start; width: min(100%, calc(var(--u) * 1440 + 2 * var(--gutter))); margin: 0 auto;
}
.visit__media { position: relative; margin-top: calc(var(--u) * 10); }
.visit__body { max-width: calc(var(--u) * 640); }
.visit__body > p { margin-top: calc(var(--u) * 18); max-width: 34em; }
.visit__body > .h2 + p { margin-top: calc(var(--u) * 24); }
.visit__address { margin-top: calc(var(--u) * 30); display: flex; flex-direction: column; align-items: flex-start; font-size: var(--fs-small); color: var(--moon-2); line-height: 1.7; }
.visit__form { margin-top: calc(var(--u) * 40); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 20) calc(var(--u) * 24); }
.visit__form .field:nth-child(3) { grid-column: 1 / -1; }
.visit__form .btn { justify-self: start; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-small); color: var(--mist); }
.field input, .field select {
  min-height: 48px; padding: 10px 12px;
  background: var(--deep); border: 1px solid var(--dim); border-radius: 2px;
  color: var(--moon); font-size: max(16px, var(--fs-small));
  transition: border-color .25s var(--ease-soft);
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(-45deg, transparent 50%, var(--mist) 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field input:hover, .field select:hover { border-color: #6d707a; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; border-color: var(--lamp); }
.field input[aria-invalid="true"] { border-color: #E98A6B; }
.field__err { min-height: 0; font-size: var(--fs-cap); color: #F0A48A; }
.field__err:empty { display: none; }
.form__status { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--moon); }
.form__status:empty { display: none; }
@media (max-width: 900px) {
  .visit { grid-template-columns: 1fr; gap: 48px; }
  .visit__media { width: 88%; }
}
@media (max-width: 520px) { .visit__form { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-foot {
  padding: calc(var(--u) * 90) var(--gutter) calc(var(--u) * 120);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--u) * 10);
}
.wordmark--foot { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--u) * 30); }
.site-foot__line { color: var(--moon-2); }
.site-foot__small { max-width: 44em; font-size: var(--fs-cap); color: var(--mist); }
.site-foot .text-link { margin-top: calc(var(--u) * 10); font-size: var(--fs-small); }

/* ---------- the sound dock (only while sound is on) ---------- */
.dock {
  position: fixed; z-index: 40; left: 50%; bottom: calc(var(--u) * 20);
  translate: -50% 0;
  display: flex; align-items: center; gap: calc(var(--u) * 14);
  padding: 6px 6px 6px calc(var(--u) * 18);
  background: rgba(11, 13, 19, .94); border: 1px solid #262932; border-radius: 999px;
  font-size: var(--fs-small); color: var(--moon-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dock[hidden] { display: none; }
.dock__live { width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); }
.dock__time { font-family: var(--f-mono); font-weight: 330; font-size: var(--fs-stamp); color: var(--mist); min-width: 3.2em; }
.dock__rooms { display: flex; border: 1px solid #2e313a; border-radius: 999px; padding: 2px; }
.dock__room {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--mist); font-size: var(--fs-small); white-space: nowrap;
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.dock__room[aria-pressed="true"] { background: #20232b; color: var(--moon); }
.dock__room--gln[aria-pressed="true"] { color: var(--lamp); }
.dock__stop {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--moon); color: var(--night); font-weight: 560; font-size: var(--fs-small); white-space: nowrap;
}
.dock__stop:hover { background: #fff; }
@media (max-width: 560px) {
  .dock { left: 10px; right: 10px; bottom: 10px; translate: none; justify-content: space-between; gap: 8px; padding-left: 14px; }
  .dock__time { display: none; }
  .dock__room { padding: 0 11px; }
}

/* ---------- intro (CSS only, so it never waits for a CDN) ---------- */
@keyframes digitIn { from { opacity: 0; transform: translateY(.05em); } to { opacity: 1; transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.intro .clock__d, .intro .clock__colon { animation: digitIn .95s var(--ease-out) both paused; }
.intro .clock > :nth-child(2) { animation-delay: .07s; }
.intro .clock > :nth-child(3) { animation-delay: .2s; animation-name: fadeIn; }
.intro .clock > :nth-child(4) { animation-delay: .12s; }
.intro .clock > :nth-child(5) { animation-delay: .17s; }
.intro .hero-copy__title { animation: riseIn .8s var(--ease-out) .26s both paused; }
.intro .hero-copy__lede { animation: riseIn .8s var(--ease-out) .38s both paused; }
.intro .hero-copy__acts { animation: riseIn .8s var(--ease-out) .48s both paused; }
.intro .site-head, .intro .night__hint { animation: fadeIn .7s var(--ease-soft) .55s both paused; }
.intro.fonts-go .clock__d, .intro.fonts-go .clock__colon, .intro.fonts-go .hero-copy__title, .intro.fonts-go .hero-copy__lede,
.intro.fonts-go .hero-copy__acts, .intro.fonts-go .site-head, .intro.fonts-go .night__hint { animation-play-state: running; }

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

/* ---------- language switch and Chinese ---------- */
.i18n-wait body { visibility: hidden; }
.lang { display: flex; flex: none; border: 1px solid rgba(233, 230, 220, .28); border-radius: 999px; overflow: hidden; }
.lang button {
  min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--f-text); font-size: var(--fs-cap); font-weight: 520; color: var(--mist);
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}
.lang button + button { border-left: 1px solid rgba(233, 230, 220, .28); }
.lang button[aria-pressed="true"] { background: var(--moon); color: var(--night); }
.lang button:not([aria-pressed="true"]):hover { color: var(--moon); }
.lang button:focus-visible { outline: 2px solid var(--moon); outline-offset: -4px; }
@media (max-width: 560px) { .site-head { gap: 10px; } .lang button { min-width: 40px; padding: 0 9px; } .site-head .btn--small { padding: 0 12px; } }

html[data-lang="zh"] {
  --f-clock: "Sofia Sans Extra Condensed", "GLN Sans SC", "GLN SC fb", "Arial Narrow", sans-serif;
  --f-disp: "Sofia Sans Condensed", "GLN Sans SC", "GLN SC fb", "Arial Narrow", sans-serif;
  --f-text: "Sofia Sans", "GLN Sans SC", "GLN SC fb", Arial, sans-serif;
  --f-mono: "Azeret Mono", "GLN Sans SC", "GLN SC fb", Consolas, monospace;
}
:lang(zh) body { line-height: 1.8; }
:lang(zh) i, :lang(zh) em { font-style: normal; }
:lang(zh) .hero-copy__title { font-weight: 300; font-size: calc(var(--fs-h1) * .88); line-height: 1.3; letter-spacing: .02em; }
:lang(zh) .h2 { font-weight: 300; font-size: calc(var(--fs-h2) * .86); line-height: 1.3; letter-spacing: .01em; }
:lang(zh) .h3 { font-weight: 400; line-height: 1.4; }
:lang(zh) p { text-wrap: pretty; }
:lang(zh) .wordmark, :lang(zh) .btn, :lang(zh) .site-nav a { letter-spacing: 0; }
:lang(zh) .wordmark { letter-spacing: 0.16em; }
:lang(zh) .lane-label { letter-spacing: .02em; }