/* Hero 06 · One temperature, floor to ceiling */
:root {
  /* 1px up to 1440 wide, growing to 1.5px at 2560 (layout, display type); --t grows to 1.28px (running text) */
  --u: clamp(1px, calc(1px + (100vw - 1440px) * 0.000446), 1.5px);
  --t: clamp(1px, calc(1px + (100vw - 1440px) * 0.00025), 1.28px);
  --gutter: max(20px, min(5vw, calc(var(--u) * 72)));
  --ink-dark: #17110c;
  --ink-light: #fdf9f4;
  --serif: "Libre Caslon Display", "Caslon Fallback", "Times New Roman", serif;
  --sans: "Red Hat Text", "Red Hat Fallback", Arial, sans-serif;
  --room: 2.7; /* metres from floor to ceiling in the section */
  --deep-heat: #241a16;
  --deep-cool: #161b28;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--deep-heat); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dark);
  background: var(--deep-heat);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px;
  background: var(--ink-dark); color: var(--ink-light); text-decoration: none; font-weight: 500;
}
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ink: each text block takes the dark or light ink main.js computes for the light behind it */
/* no colour transition: a crossfade would pass through the light's own tone. The readouts sit where the floor
   light passes through mid-tones during a change, so they carry a soft glow in the opposite tone. */
[data-ink] { color: var(--ink-dark); }
[data-ink-now="light"] { color: var(--ink-light); }
.reading, .scale__cap { text-shadow: 0 0 0.9em rgb(255 250 244 / 0.3); }
.reading[data-ink-now="light"] { text-shadow: 0 0 0.7em rgb(18 16 44 / 0.4); }
/* when neither ink reaches AA over the light behind a reading (only for a moment mid-change, as the floor light
   passes through mid-tones), main.js sets data-guard and the reading gets a small frosted chip in the opposite tone */
.reading::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(var(--u) * -14); right: calc(var(--u) * 4); top: calc(var(--u) * -6); bottom: calc(var(--u) * -32);
  border-radius: calc(var(--u) * 10);
  background: rgb(255 250 244 / 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.25s ease;
}
.reading[data-ink-now="light"]::before { background: rgb(18 16 42 / 0.38); }
.reading[data-guard]::before { opacity: 1; }

/* ---------------- header ---------------- */
.nav {
  position: absolute; z-index: 10; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: calc(var(--u) * 40);
  padding: calc(var(--u) * 22) var(--gutter) 0;
}
.wordmark {
  font-family: var(--serif); font-size: calc(var(--u) * 34); line-height: 1; letter-spacing: 0.02em;
  text-decoration: none; padding: 6px 0; min-height: 44px; display: inline-flex; align-items: center;
}
.nav__links { margin-left: auto; }
.nav__links ul { display: flex; gap: calc(var(--u) * 30); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: calc(var(--t) * 15); font-weight: 450; text-decoration: none; letter-spacing: 0.005em;
  display: inline-flex; align-items: center; min-height: 44px;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.8em) / 0 1px no-repeat;
  transition: background-size 0.35s ease;
}
.nav__links a:hover { background-size: 100% 1px; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  min-height: max(44px, calc(var(--u) * 48)); padding: 0 calc(var(--u) * 24);
  border-radius: 999px; text-decoration: none;
  font-family: var(--sans); font-size: max(15px, calc(var(--t) * 15)); font-weight: 550; letter-spacing: 0.01em;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn--solid, .btn--nav { background: var(--ink-dark); color: var(--ink-light); }
.btn--solid:hover, .btn--nav:hover { background: color-mix(in srgb, var(--ink-dark) 82%, #fff); }
.btn--nav { min-height: max(44px, calc(var(--u) * 44)); padding: 0 calc(var(--u) * 20); }
.btn--quiet, .seg {
  background: rgb(255 250 244 / 0.46);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: inset 0 0 0 1px rgb(23 17 12 / 0.12);
}
.btn--quiet { color: var(--ink-dark); }
.btn--quiet:hover { background: rgb(255 250 244 / 0.66); }
.btn:focus-visible, .seg input:focus-visible + label { outline: 2px solid var(--ink-dark); outline-offset: 3px; }

/* ---------------- hero ---------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
}
.hero__light { position: absolute; inset: 0; z-index: -1; background: #e9a868; }
.still { position: absolute; inset: 0; opacity: 0; }
.still--hb { opacity: 1; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.gl-live .hero__canvas { opacity: 1; }
.still__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: soft-light;
  background: url(img/blue-noise-64.png) 0 0 / 64px 64px;
}
.gl-live .still__grain { display: none; }

/* The four composed stills: floor at the bottom, ceiling at the top, mixed in linear light like the shader.
   Blend order bottom-up: profile, room falloff (multiply), core scatter (screen), vignette (multiply). */
/* generated from the field model (vertical profile averaged over the churn, room falloff, core, vignette) */
.still--hb {
  background: radial-gradient(ellipse 79% 65% at 50% 50% in srgb-linear, #ffffff 0%, #ffffff 23%, #fefefe 38%, #fdfdfd 54%, #fcfcfc 65%, #fafafa 77%, #f7f7f7 88%, #f4f4f4 100%),
    radial-gradient(ellipse 130svh 113svh at 60% 50% in srgb-linear, #4d4d4c 0%, #403f3f 12%, #21191c 25%, #0c0c0c 38%, #060505 50%, #030303 62%, #010101 75%, #010101 88%, #000000 100%),
    radial-gradient(ellipse 130svh 113svh at 60% 50% in srgb-linear, #ffffff 0%, #ffffff 12%, #fffeff 25%, #f9f4f7 38%, #f4edf1 50%, #f0e7ec 62%, #ede2e8 75%, #eadee6 88%, #e9dce4 100%),
    linear-gradient(to top in srgb-linear, #424eba 0%, #4c56be 5%, #5f63c4 10%, #7971c7 15%, #977dc3 20%, #b185b9 25%, #c48aab 30%, #d28f9a 35%, #df9585 40%, #e99b70 45%, #efa063 50%, #f3a460 55%, #f7a962 60%, #fbae65 65%, #ffb368 70%, #ffb76b 75%, #ffbb6e 80%, #ffbd70 85%, #ffbf71 90%, #ffbd70 95%, #ffbb6e 100%);
  background-blend-mode: multiply, screen, multiply, normal;
}
.still--hg {
  background: radial-gradient(ellipse 79% 65% at 50% 50% in srgb-linear, #ffffff 0%, #ffffff 23%, #fefefe 38%, #fdfdfd 54%, #fcfcfc 65%, #fafafa 77%, #f7f7f7 88%, #f4f4f4 100%),
    radial-gradient(ellipse 173svh 113svh at 60% 50% in srgb-linear, #575552 0%, #504d48 12%, #3e3329 25%, #271b18 38%, #13110f 50%, #0c0b09 62%, #070605 75%, #040303 88%, #020202 100%),
    radial-gradient(ellipse 173svh 113svh at 60% 50% in srgb-linear, #ffffff 0%, #ffffff 12%, #ffffff 25%, #fff9f2 38%, #fef0e7 50%, #fae8dc 62%, #f7e2d4 75%, #f5ddcd 88%, #f3dac8 100%),
    linear-gradient(to top in srgb-linear, #ebb78d 0%, #ebb78d 5%, #ebb78d 10%, #ebb78d 15%, #ebb78e 20%, #ebb78e 25%, #ebb88e 30%, #ecb88e 35%, #ecb88e 40%, #ecb88e 45%, #ecb88e 50%, #ecb88e 55%, #ecb88e 60%, #ecb88e 65%, #edb88e 70%, #edb98e 75%, #edb98e 80%, #edb98f 85%, #edb98f 90%, #edb98f 95%, #edb98f 100%);
  background-blend-mode: multiply, screen, multiply, normal;
}
.still--cb {
  background: radial-gradient(ellipse 79% 65% at 50% 50% in srgb-linear, #ffffff 0%, #ffffff 23%, #fefefe 38%, #fdfdfd 54%, #fcfcfc 65%, #fafafa 77%, #f7f7f7 88%, #f4f4f4 100%),
    radial-gradient(ellipse 130svh 113svh at 60% 50% in srgb-linear, #4d4d4d 0%, #3f3f40 12%, #1b1a22 25%, #0c0c0c 38%, #050506 50%, #030303 62%, #010101 75%, #010101 88%, #000000 100%),
    radial-gradient(ellipse 130svh 113svh at 60% 50% in srgb-linear, #ffffff 0%, #ffffff 12%, #fffeff 25%, #f7f5fb 38%, #f0edf6 50%, #ebe8f2 62%, #e7e3ef 75%, #e4dfed 88%, #e2ddeb 100%),
    linear-gradient(to top in srgb-linear, #3d55bd 0%, #435bc0 5%, #4d66c4 10%, #5872ca 15%, #637ed0 20%, #6c89d6 25%, #7593db 30%, #7d9be0 35%, #85a2e3 40%, #8fa6e3 45%, #9ca7df 50%, #aba6d7 55%, #baa4ce 60%, #c9a4c1 65%, #daa7af 70%, #ebac98 75%, #f7b286 80%, #feb77e 85%, #ffbb7c 90%, #febb7a 95%, #fbb979 100%);
  background-blend-mode: multiply, screen, multiply, normal;
}
.still--cg {
  background: radial-gradient(ellipse 79% 65% at 50% 50% in srgb-linear, #ffffff 0%, #ffffff 23%, #fefefe 38%, #fdfdfd 54%, #fcfcfc 65%, #fafafa 77%, #f7f7f7 88%, #f4f4f4 100%),
    radial-gradient(ellipse 173svh 113svh at 60% 50% in srgb-linear, #545657 0%, #4b4e51 12%, #303640 25%, #1a1b2c 38%, #111218 50%, #0a0b0c 62%, #060607 75%, #030404 88%, #020202 100%),
    radial-gradient(ellipse 173svh 113svh at 60% 50% in srgb-linear, #ffffff 0%, #ffffff 12%, #ffffff 25%, #f6fbff 38%, #ecf2ff 50%, #e4ecfd 62%, #dde6fb 75%, #d7e2f9 88%, #d3dff8 100%),
    linear-gradient(to top in srgb-linear, #a8c3df 0%, #a8c3df 5%, #a8c3df 10%, #a8c3df 15%, #a8c3df 20%, #a9c3df 25%, #a9c4e0 30%, #a9c4e0 35%, #a9c4e0 40%, #a9c4e0 45%, #a9c4e0 50%, #a9c4e0 55%, #a9c4e0 60%, #a9c4e0 65%, #a9c4e0 70%, #a9c5e1 75%, #aac5e1 80%, #aac5e1 85%, #aac5e1 90%, #aac5e1 95%, #aac5e1 100%);
  background-blend-mode: multiply, screen, multiply, normal;
}
/* without JavaScript the radios still swap the stills */
html:not(.js) .hero:has(#sys-gln:checked) .still--hg,
html:not(.js) .hero:has(#mode-cool:checked) .still--cb { opacity: 1; }
html:not(.js) .hero:has(#sys-gln:checked):has(#mode-cool:checked) .still--cg { opacity: 1; }

.hero__copy {
  position: absolute; z-index: 2;
  left: var(--gutter); top: 21%;
  width: min(calc(var(--u) * 820), 60vw);
}
h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(42px, 8.4vw, calc(var(--u) * 112));
  line-height: 0.98; letter-spacing: -0.012em;
  font-kerning: normal;
}
h1 .line { display: block; }
.hero__sub {
  margin: calc(var(--u) * 30) 0 0;
  max-width: 31em;
  font-size: clamp(16px, 1.25vw, calc(var(--t) * 18));
  line-height: 1.52; font-weight: 420;
}
.hero__controls { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 34); }
.seg { display: inline-flex; margin: 0; padding: 4px; border: 0; border-radius: 999px; min-width: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(44px, calc(var(--u) * 44)); padding: 0 calc(var(--u) * 20);
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: max(15px, calc(var(--t) * 15)); font-weight: 500; letter-spacing: 0.01em; color: var(--ink-dark);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.seg label:hover { background: rgb(255 250 244 / 0.5); }
.seg input:checked + label { background: var(--ink-dark); color: var(--ink-light); }
.hero__cta { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 16); }

/* ---------------- the scale on the right edge ---------------- */
.scale {
  position: absolute; z-index: 2; margin: 0;
  right: var(--gutter); top: 0; bottom: 0; width: calc(var(--u) * 250);
  pointer-events: none;
  --line-0: var(--ink-dark); --line-1: var(--ink-dark); --line-2: var(--ink-dark);
}
.scale::before { /* the hairline, floor to just under the header */
  content: ""; position: absolute; right: 0; bottom: 0; width: 1px; height: calc(100% * 2.42 / var(--room));
  background: linear-gradient(to top, var(--line-2) 0%, var(--line-2) 22%, var(--line-1) 30%, var(--line-1) 52%, var(--line-0) 60%, var(--line-0) 100%);
  opacity: 0.55;
  transition: background 0.9s ease;
}
.scale__cap {
  position: absolute; right: calc(var(--u) * 16); bottom: calc(100% * 2.42 / var(--room)); transform: translateY(50%);
  font-size: max(12px, calc(var(--t) * 12.5)); font-weight: 500; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap;
}
.scale__list { list-style: none; margin: 0; padding: 0; }
.reading {
  position: absolute; right: 0;
  bottom: calc(100% * var(--h) / var(--room));
  display: flex; flex-direction: column; align-items: flex-end;
  padding-right: calc(var(--u) * 16);
}
.reading::after { /* tick at the exact height */
  content: ""; position: absolute; right: 0; bottom: 0; width: calc(var(--u) * 150); height: 1px;
  background: linear-gradient(to left, currentColor, transparent);
  opacity: 0.7;
}
.reading__v {
  display: flex; align-items: baseline; gap: 0.08em;
  font-family: var(--serif); font-size: clamp(26px, 3vw, calc(var(--u) * 44)); line-height: 1;
  padding-bottom: calc(var(--u) * 8);
}
/* Caslon's figures are proportional, so each digit sits in a fixed cell (tabular by hand); the last digit is
   right-aligned in its cell so the unit always starts at the same distance from the ink */
.num { display: inline-flex; }
.num .d { display: inline-block; width: 0.56em; text-align: center; }
.num .d:last-child { text-align: right; }
.num .dot { display: inline-block; width: 0.22em; text-align: center; }
.unit { font-family: var(--sans); font-size: max(0.4em, 11px); font-weight: 500; letter-spacing: 0.02em; transform: translateY(-0.95em); }
.reading__k {
  position: absolute; right: calc(var(--u) * 16); top: 100%; padding-top: calc(var(--u) * 7);
  font-size: max(12px, calc(var(--t) * 13)); font-weight: 450; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; text-align: right;
}

/* ---------------- follow-on ---------------- */
.more {
  position: relative; z-index: 1;
  padding: calc(var(--u) * 150) var(--gutter) calc(var(--u) * 130);
  background: var(--deep-heat); color: #f4ece4;
  transition: background-color 1.2s ease;
}
.hero[data-mode="cool"] ~ .more { background: var(--deep-cool); }
.more__text {
  margin: 0; max-width: 23em;
  font-family: var(--serif); font-size: clamp(26px, 2.6vw, calc(var(--u) * 42)); line-height: 1.22; letter-spacing: -0.005em;
}
.more__back {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(var(--u) * 44);
  font-size: max(16px, calc(var(--t) * 16)); font-weight: 500; text-underline-offset: 0.3em; text-decoration-thickness: 1px;
}
.foot {
  padding: calc(var(--u) * 26) var(--gutter) calc(var(--u) * 34);
  background: #120d0b; color: #cbbfb5;
  font-size: max(14px, calc(var(--t) * 14));
}
.foot p { margin: 0; }
.nw { white-space: nowrap; }
.deg { margin-left: -0.08em; }
/* check hook (?notext): glyphs and ticks vanish, the pill backings stay, so the light behind the text can be measured */
.notext .hero *, .notext .nav, .notext .nav * { color: transparent !important; transition: none !important; }
.notext .scale::before { display: none; }

/* ---------------- intro (CSS, started by the inline script) ---------------- */
@keyframes lift-in { from { opacity: 0; filter: blur(8px); transform: translateY(0.05em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.js.motion h1 .line, .js.motion .hero__sub, .js.motion .hero__controls, .js.motion .hero__cta, .js.motion .scale, .js.motion .nav { opacity: 0; }
.js.motion.go h1 .line { animation: lift-in 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js.motion.go h1 .line + .line { animation-delay: 0.07s; }
.js.motion.go .hero__sub { animation: lift-in 0.6s 0.13s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.js.motion.go .hero__controls { animation: fade-in 0.5s 0.24s ease both; }
.js.motion.go .hero__cta { animation: fade-in 0.5s 0.3s ease both; }
.js.motion.go .scale { animation: fade-in 0.6s 0.2s ease both; }
.js.motion.go .nav { animation: fade-in 0.5s ease both; }

/* ---------------- small screens ---------------- */
@media (max-width: 899px) {
  .hero__copy { top: 15%; width: calc(100% - var(--gutter) * 2 - 110px); }
  .scale { width: 110px; }
  .reading::after { width: 64px; }
  .nav__links { display: none; }
  .btn--nav { margin-left: auto; }
}
@media (max-width: 560px) {
  .hero { min-height: 640px; }
  /* the headline runs above the readouts and may use the full width; the rest of the copy keeps clear of them */
  .hero__copy { top: 13%; width: calc(100% - var(--gutter) * 2); }
  .hero__copy > :not(h1) { max-width: calc(100% - 100px); } /* a clear gutter before the readouts */
  h1 { font-size: clamp(40px, 11.6vw, 52px); }
  .hero__sub { margin-top: 18px; }
  .hero__controls { margin-top: 22px; gap: 8px; }
  .hero__cta { gap: 8px; margin-top: 10px; }
  .seg label { padding: 0 14px; }
  .btn { padding: 0 18px; }
  .scale { width: 72px; }
  .reading { padding-right: 10px; }
  .reading__v { font-size: 23px; padding-bottom: 4px; }
  .reading__k { right: 10px; font-size: 12px; padding-top: 5px; }
  .reading__m, .reading__w { display: block; }
  .reading__c, .reading__x { display: none; }
  .reading::after { width: 46px; }
  .scale__cap { right: 10px; font-size: 12px; }
  /* at the floor there is no room below the tick: the label goes above the value */
  .reading:last-child .reading__k { position: static; order: -1; padding: 0 0 4px; }
  .reading::before { left: -8px; right: 2px; top: -4px; bottom: -34px; }
  .reading:last-child::before { bottom: -3px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__canvas, .seg label, .btn, .more { transition: none; }
}

/* ---------------- language switch (EN / 中文) ---------------- */
.lang { display: inline-flex; align-items: center; flex: none; }
@media (min-width: 900px) { .nav__links + .lang { margin-left: calc(var(--u) * -12); } }
.lang__b {
  position: relative; min-height: 44px; min-width: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer;
  font: 500 max(14px, calc(var(--t) * 14))/1 var(--sans); letter-spacing: 0.02em; color: inherit; opacity: 0.62;
  transition: opacity 0.3s ease;
}
.lang__b--zh { font-family: "GLN Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif; letter-spacing: 0; }
.lang__b:hover, .lang__b[aria-pressed="true"] { opacity: 1; }
.lang__b::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform 0.35s ease;
}
.lang__b[aria-pressed="true"]::after { transform: scaleX(1); }
.lang__sep { opacity: 0.4; font-size: 13px; }
@media (max-width: 899px) {
  .lang { margin-left: auto; }
  .lang ~ .btn--nav { margin-left: 0; }
}
@media (max-width: 560px) {
  .nav { gap: 8px; }
  .lang__b { min-width: 40px; padding: 0 4px; }
}

/* ---------------- Chinese (:lang(zh)) ---------------- */
html:lang(zh) {
  --serif: "Libre Caslon Display", "GLN Serif SC", "Songti SC", "SimSun", serif;
  --sans: "Red Hat Text", "GLN Sans SC", "GLN SC Fallback", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
}
html:lang(zh) body { line-height: 1.8; line-break: strict; }
html:lang(zh) h1, html:lang(zh) .more__text { font-family: "GLN Serif SC", "Libre Caslon Display", "Songti SC", "SimSun", serif; }
html:lang(zh) h1 { font-size: clamp(34px, 6.2vw, calc(var(--u) * 84)); line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
html:lang(zh) .hero__sub { line-height: 1.85; max-width: min(27em, 100%); text-wrap: pretty; }
@media (max-width: 560px) { html:lang(zh) .hero__sub { max-width: calc(100% - 100px); } }
html:lang(zh) .seg label, html:lang(zh) .btn, html:lang(zh) .nav__links a, html:lang(zh) .reading__k,
html:lang(zh) .scale__cap, html:lang(zh) .unit { letter-spacing: 0; }
html:lang(zh) .more__text { line-height: 1.6; letter-spacing: 0; max-width: 20em; text-wrap: pretty; }
html:lang(zh) .foot { line-height: 1.8; }
@media (max-width: 560px) {
  html:lang(zh) h1 { font-size: clamp(32px, 10vw, 42px); }
}