/* GLN 08 — the seasons. Colour is temperature; every temperature numeral is set at a width and
   weight that match its value (cold = condensed and light, hot = wide and heavy, 25° = neutral). */

/* Bricolage Grotesque and Onest (Google Fonts, SIL OFL), latin subset, self-hosted */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Onest"; src: url("fonts/onest-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
/* Chinese: Noto Sans SC (SIL OFL), variable wght 300–800, subset to this page's Chinese strings. It is only in the
   font stacks under :lang(zh), so the English page never downloads it. */
@font-face { font-family: "GLN Sans SC"; src: url("fonts/noto-sans-sc-var.woff2") format("woff2"); font-weight: 300 800; font-display: swap; unicode-range: U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "GLN SC Fallback"; src: local("PingFang SC"), local("Microsoft YaHei"), local("Hiragino Sans GB"), local("Source Han Sans SC"); size-adjust: 100%; }

:root {
  /* live palette (main.js rewrites these from the current outdoor temperature) */
  --light: #E8F1FF;
  --mid: #9CC7FF;
  --deep: #1E2A4A;
  --ink: #1B2644;
  /* constants */
  --paper: #FFF6E8;
  --cold: #3F7AD0;
  --hot: #EE5526;
  --pw: 78;           /* wordmark width axis, follows the page temperature */
  --pg: 520;
  --wd: 92;           /* neutral (25°) axes used by all headings */
  --wg: 560;
  /* Large screens: 1440 and below are the design as drawn (both factors = 1px). From 1440 to 2560
     layout and display type grow to 1.6x (--u) and running text to 1.28x (--t), then stop. */
  --u: clamp(1px, calc(1px + (100vw - 1440px) * 0.000536), 1.6px);
  --t: clamp(1px, calc(1px + (100vw - 1440px) * 0.00025), 1.28px);
  --gut: clamp(20px, 4.4vw, calc(72 * var(--u)));
  --display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
:root:lang(zh) {
  --display: "Bricolage Grotesque", "GLN Sans SC", "GLN SC Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
  --text: "Onest", "GLN Sans SC", "GLN SC Fallback", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--light);
  color: var(--ink);
  font: 400 calc(17 * var(--t))/1.55 var(--text);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--light); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 50;
  background: var(--ink); color: var(--light); padding: 12px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- the temperature field ---------- */
.field {
  position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; z-index: -1;
  display: none;
  background:
    radial-gradient(90% 70% at 85% 105%, var(--mid) 0%, transparent 70%),
    radial-gradient(70% 60% at 0% 20%, color-mix(in oklab, var(--mid) 55%, transparent) 0%, transparent 75%),
    var(--light);
}
.fx .field { display: block; }
.field-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.gl-ready .field-canvas { opacity: 1; }

/* Static tones: used without JS, with reduced motion, or if the scripts fail. */
html:not(.live) [data-tone="cold"] { --light: #E8F1FF; --mid: #9CC7FF; --deep: #1E2A4A; --ink: #1B2644; }
html:not(.live) [data-tone="mild"] { --light: #F1F2D0; --mid: #C6D782; --deep: #28361B; --ink: #243118; }
html:not(.live) [data-tone="hot"]  { --light: #FFD39A; --mid: #FF8A3D; --deep: #5A1E1E; --ink: #521B1B; }
html:not(.live) [data-tone="deep"] { --light: #FFD39A; --mid: #FF8A3D; --deep: #5A1E1E; --ink: #521B1B; }
html:not(.live) [data-tone="cold"],
html:not(.live) [data-tone="mild"],
html:not(.live) [data-tone="hot"] { color: var(--ink); }
html:not(.fx) [data-tone="cold"],
html:not(.fx) [data-tone="mild"],
html:not(.fx) [data-tone="hot"] {
  background:
    radial-gradient(60% 45% at 88% 55%, color-mix(in oklab, var(--mid) 70%, transparent) 0%, transparent 100%),
    radial-gradient(50% 40% at 6% 40%, color-mix(in oklab, var(--mid) 38%, transparent) 0%, transparent 100%),
    var(--light);
}
html:not(.live) .bar { position: absolute; }

/* ---------- header ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: calc(10 * var(--u)) var(--gut);
  color: var(--ink);
  transition: transform .6s var(--ease-out), background-color .35s ease, color .35s ease;
}
.bar.is-hidden { transform: translateY(-110%); }
.bar.is-solid { background: color-mix(in oklab, var(--light) 90%, transparent); }
.bar.on-deep { color: var(--paper); }
.bar.on-deep.is-solid { background: rgb(90 30 30 / .94); }
.bar.on-deep .btn-bar { background: var(--paper); color: #5A1E1E; }
.wordmark {
  font-family: var(--display);
  font-size: calc(30 * var(--u)); line-height: 1; letter-spacing: -.01em;
  font-variation-settings: "wdth" var(--pw), "wght" var(--pg);
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.bar-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bar-nav a {
  display: inline-flex; align-items: center; min-height: calc(44 * var(--t)); padding: 0 calc(12 * var(--t));
  font-size: calc(15.5 * var(--t)); font-weight: 500; text-decoration: none;
}
.bar-nav a:hover { text-decoration: underline; }
.bar-nav { margin-left: auto; }

/* language switch: EN / 中文 */
.lang { display: flex; flex: none; border: 1.5px solid currentColor; border-radius: 999px; overflow: hidden; }
.lang button {
  min-width: 44px; min-height: calc(44 * var(--t)); padding: 0 calc(12 * var(--t)); border: 0; margin: 0;
  background: transparent; color: inherit; cursor: pointer;
  font: 500 calc(14.5 * var(--t))/1 var(--text);
  transition: background-color .2s ease, color .2s ease;
}
.lang button[lang="zh-CN"] { font-family: "GLN SC Fallback", "PingFang SC", "Microsoft YaHei", sans-serif; } /* system CJK on the English page */
html:lang(zh) .lang button[lang="zh-CN"] { font-family: var(--text); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--light); }
.bar.on-deep .lang button[aria-pressed="true"] { background: var(--paper); color: #5A1E1E; }
.lang button:focus-visible { outline-offset: -4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(50 * var(--t)); padding: 0 calc(24 * var(--t)); border: 0; border-radius: 999px;
  background: var(--ink); color: var(--light);
  font: 500 calc(16 * var(--t))/1 var(--text); text-decoration: none; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .35s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--ink) 82%, #000); }
.btn:active { transform: translateY(0); }
.btn-bar { min-height: calc(44 * var(--t)); padding: 0 calc(18 * var(--t)); font-size: calc(15 * var(--t)); }

/* ---------- shared type ---------- */
.h2, .h3, .stage-title {
  font-family: var(--display);
  font-variation-settings: "wdth" var(--wd), "wght" var(--wg);
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
.h2 { font-size: clamp(42px, 5.6vw, calc(81 * var(--u))); line-height: .98; }
.h3 { font-size: clamp(32px, 3.4vw, calc(49 * var(--u))); line-height: 1.02; }
.split .ch { font-variation-settings: "wdth" var(--wd), "wght" var(--wg); }
.split .ln-mask { padding: .1em .02em .14em; margin: -.1em -.02em -.14em; }
.fn {
  font-size: .72em; vertical-align: super; line-height: 0; margin-left: .15em;
  text-decoration: none; font-weight: 600;
  display: inline-block; padding: 6px 4px; margin-block: -6px;
}
.fn:hover { text-decoration: underline; }
.fn { position: relative; }
.fn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.contact a { min-height: 44px; }
[data-t] { font-variation-settings: "wdth" var(--wd), "wght" var(--wg); }

/* ---------- hero ---------- */
.hero {
  --hn: clamp(96px, min(25svh, 15.5vw), calc(300 * var(--u)));
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 1fr auto;
  column-gap: calc(24 * var(--u)); row-gap: calc(32 * var(--u));
  padding: calc(104 * var(--u)) var(--gut) calc(44 * var(--u));
}
.hero-lines {
  grid-column: 1 / 8; grid-row: 1; align-self: center;
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: var(--hn); line-height: .8; letter-spacing: -.045em;
}
.hl { display: block; white-space: nowrap; }
.hl .num { display: inline-block; font-variation-settings: "wdth" var(--wd), "wght" var(--wg); font-feature-settings: "tnum" 1; }
.hl[data-t="4.1"] { --wd: 75; --wg: 236; }
.hl[data-t="29.3"] { --wd: 96.3; --wg: 689; }
.hl .lab {
  font-family: var(--text); font-size: clamp(18px, 1.55vw, calc(22.5 * var(--u))); font-weight: 500;
  letter-spacing: 0; margin-left: .35em; vertical-align: baseline;
}
.hl-in .lab::after { content: ""; }
.hero-lines .ch { display: inline-block; }
.hero-lines .chm { display: inline-block; overflow: clip; padding: .14em .03em .06em; margin: -.14em -.03em -.06em; vertical-align: baseline; }

.window { grid-column: 8 / 13; grid-row: 1 / 3; align-self: center; justify-self: end; width: 100%; max-width: calc(560 * var(--u)); }
.panes {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); padding: calc(8 * var(--u));
  height: min(64svh, calc(700 * var(--u)));
  background: var(--ink);
}
.pane { position: relative; overflow: hidden; min-height: 0; }
.pane picture, .pane img { width: 100%; height: 100%; }
.pane img { object-fit: cover; }
.pane-tag {
  position: absolute; left: 0; bottom: 0;
  padding: calc(6 * var(--t)) calc(12 * var(--t)) calc(7 * var(--t)); background: var(--ink); color: var(--light);
  font-size: calc(14 * var(--t)); font-weight: 500; line-height: 1.2;
}
.window figcaption { margin-top: calc(10 * var(--u)); font-size: calc(14.5 * var(--t)); }

.hero-foot { grid-column: 1 / 7; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: calc(22 * var(--u)); }
.lede { font-size: clamp(17px, 1.3vw, calc(19 * var(--t))); line-height: 1.5; max-width: 44ch; }

/* ---------- the year (pinned stage) ---------- */
.year { position: relative; }
.stage {
  position: relative;
  height: 100svh; min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: calc(32 * var(--u));
  padding: calc(88 * var(--u)) var(--gut) calc(32 * var(--u));
  overflow: hidden;
}
.readout { display: flex; flex-direction: column; min-height: 0; }
.stage-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px calc(16 * var(--u)); }
.stage-title { font-size: clamp(22px, 1.9vw, calc(27.4 * var(--u))); line-height: 1.1; }
.stage-hint { font-size: calc(15 * var(--t)); }
.out { margin-top: clamp(18px, 4svh, calc(44 * var(--u))); }
.where { font-size: calc(15 * var(--t)); font-weight: 500; }
.roll {
  height: 1.12em; overflow: hidden; margin-top: 2px;
  font-family: var(--display); font-size: clamp(30px, 3.3vw, calc(47.5 * var(--u))); line-height: 1.12;
  font-variation-settings: "wdth" 88, "wght" 470; letter-spacing: -.02em;
}
.roll-list { margin: 0; padding: 0; list-style: none; will-change: transform; }
.roll-list li { height: 1.12em; }
.big-out {
  font-family: var(--display);
  font-size: clamp(92px, min(13.2vw, 23svh), calc(224 * var(--u))); line-height: .84; letter-spacing: -.04em;
  font-variation-settings: "wdth" 75, "wght" 236;
  font-feature-settings: "tnum" 1;
  white-space: nowrap; margin-top: .04em;
}
.big-out .vp { letter-spacing: 0; margin: 0 .035em 0 .01em; }
.big-out .u, .big-in .u { font-size: .34em; letter-spacing: 0; vertical-align: .95em; margin-left: .08em; font-variation-settings: "wdth" 90, "wght" 480; }
.diff { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--t)); font-weight: 500; }
.extra { font-size: calc(15 * var(--t)); min-height: 1.5em; }
.in { margin-top: clamp(16px, 3svh, calc(34 * var(--u))); padding-top: calc(14 * var(--u)); border-top: 1.5px solid var(--ink); max-width: calc(420 * var(--u)); }
.big-in {
  font-family: var(--display); font-size: clamp(44px, 4.4vw, calc(63 * var(--u))); line-height: .95; letter-spacing: -.03em;
  font-variation-settings: "wdth" 92, "wght" 560; font-feature-settings: "tnum" 1; margin-top: 4px;
}
.in-note { font-size: calc(15 * var(--t)); margin-top: 4px; }
.caps { position: relative; margin-top: auto; min-height: 8.2em; max-width: 27.5em; font-size: calc(16 * var(--t)); }
.cap { position: absolute; left: 0; right: 0; bottom: 0; font-size: 1em; line-height: 1.5; opacity: 0; visibility: hidden; }
.cap-m { display: block; font-family: var(--display); font-size: 1.25em; line-height: 1.2; font-variation-settings: "wdth" 88, "wght" 600; margin-bottom: 4px; }
.cap[data-at="0"] { opacity: 1; visibility: visible; }

.dial-wrap { position: relative; min-height: 0; container-type: size; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(18 * var(--u)); }
.dial { position: relative; flex: none; width: min(100cqw - 24px, 100cqh - calc(64 * var(--t))); aspect-ratio: 1; }
.dial-photos { position: absolute; inset: 31.2%; border-radius: 50%; overflow: hidden; background: var(--mid); transform: translateZ(0); }
.dp { position: absolute; inset: 0; opacity: 0; }
.dp img { width: 100%; height: 100%; object-fit: cover; }
.dp[data-season="0"] { opacity: 1; }
.dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial-svg .ref { fill: none; stroke: var(--ink); stroke-opacity: .22; stroke-width: 1.2; stroke-dasharray: 1.5 7; }
.dial-svg .band { fill: none; stroke: var(--paper); stroke-opacity: .92; }
.dial-svg .lobe-cold { fill: var(--cold); fill-opacity: .42; }
.dial-svg .lobe-hot { fill: var(--hot); fill-opacity: .72; }
.dial-svg .in-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.dial-svg .loop { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linejoin: round; }
.dial-svg .photo-ring { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.dial-svg .tk { stroke: var(--ink); stroke-width: 1.3; stroke-opacity: .5; }
.dial-svg .tk-m { stroke-width: 2.6; stroke-opacity: 1; }
.dial-svg .ml { fill: var(--ink); font-family: var(--text); font-size: var(--lab-fs, 21px); font-weight: 450; }
.dial-svg .ml.on { font-weight: 650; }
.dial-svg .marker { stroke: var(--ink); stroke-width: 1.4; }
.dial-svg .ref-t { fill: var(--ink); font-family: var(--text); font-size: var(--ref-fs, 15px); font-weight: 500; }
.dial-svg .gap { stroke-width: 7; stroke-linecap: round; }
.dial-svg .gap-cold { stroke: var(--cold); }
.dial-svg .gap-hot { stroke: var(--hot); }
.dial-svg .dot-in { fill: var(--paper); stroke: var(--ink); stroke-width: 3; }
.dial-svg .dot-out { fill: var(--ink); stroke: var(--paper); stroke-width: 3; }
.dial-key { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px calc(8 * var(--t)); font-size: calc(14.5 * var(--t)); }
.k { display: inline-block; width: calc(14 * var(--t)); height: calc(14 * var(--t)); border-radius: 50%; margin-left: calc(10 * var(--t)); vertical-align: -.12em; }
.k-cold { background: color-mix(in oklab, var(--cold) 70%, var(--light)); }
.k-hot { background: var(--hot); }
.k-in { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }

.year-table { border-collapse: collapse; }
.live .year-table {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html:not(.live) .stage { height: auto; min-height: 0; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); row-gap: 40px; padding-bottom: 12vh; overflow: visible; }
html:not(.live) .stage-hint { display: none; }
html:not(.live) .dial-wrap { container-type: normal; }
html:not(.live) .dial { width: min(calc(640 * var(--u)), 100%); margin-bottom: calc(44 * var(--t)); }
html:not(.live) .caps { min-height: 0; margin-top: 28px; display: grid; gap: 18px; }
html:not(.live) .cap { position: static; opacity: 1; visibility: visible; }
html:not(.live) .year-table { grid-column: 1 / -1; width: 100%; max-width: calc(900 * var(--u)); font-size: calc(15.5 * var(--t)); }
.year-table caption { text-align: left; font-weight: 500; padding-bottom: 10px; }
.year-table th, .year-table td { text-align: left; padding: 7px 12px 7px 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 30%, transparent); font-weight: 400; }
.year-table thead th { font-weight: 600; }

/* ---------- the room ---------- */
.room-intro {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); row-gap: calc(28 * var(--u));
  padding: 22svh var(--gut) 14svh;
}
.room-intro .h2 { grid-column: 1 / 7; }
.room-intro-text { grid-column: 7 / 13; display: grid; gap: calc(16 * var(--u)); max-width: 60ch; padding-top: .6em; font-size: calc(18 * var(--t)); }
.spec { font-size: calc(15.5 * var(--t)); padding-top: calc(14 * var(--u)); border-top: 1.5px solid var(--ink); }

.season {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); row-gap: calc(32 * var(--u));
  align-items: center;
  min-height: 100svh; padding: 10svh var(--gut);
}
.season-winter .season-photo { grid-column: 1 / 8; }
.season-winter .season-text { grid-column: 8 / 13; padding-left: clamp(0px, 2vw, calc(32 * var(--u))); }
.season-summer .season-text { grid-column: 1 / 6; }
.season-summer .season-photo { grid-column: 6 / 13; margin-right: calc(-1 * var(--gut)); }
.season-photo img { width: 100%; }
.season-winter .season-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 78%; max-height: 82svh; }
.season-summer .season-photo img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 50%; max-height: 80svh; }
.season-photo figcaption { font-size: calc(14.5 * var(--t)); margin-top: calc(10 * var(--u)); }
.season-text { display: flex; flex-direction: column; gap: calc(18 * var(--u)); }
.season-text > p { max-width: 46ch; }
.when { font-size: calc(15 * var(--t)); font-weight: 500; }

.felt { margin: calc(14 * var(--u)) 0 0; display: grid; gap: 2px; max-width: calc(440 * var(--u)); }
.felt > div { display: grid; grid-template-columns: minmax(0, calc(150 * var(--u))) minmax(0, 1fr); column-gap: calc(18 * var(--u)); align-items: baseline; }
.felt dt { font-size: calc(15 * var(--t)); font-weight: 500; }
.felt dd {
  order: -1; margin: 0; text-align: right;
  font-family: var(--display); font-size: clamp(44px, 4.4vw, calc(63.4 * var(--u))); line-height: 1; letter-spacing: -.03em;
  font-feature-settings: "tnum" 1;
}
.felt-sum { border-top: 2px solid var(--ink); padding-top: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.felt-note { font-size: calc(14.5 * var(--t)); }

/* ---------- damp ---------- */
.damp { padding: 18svh var(--gut) 16svh; }
.damp-head { display: grid; gap: calc(10 * var(--u)); }
.damp-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px calc(22 * var(--u)); }
.damp-num .big {
  font-family: var(--display); font-size: clamp(88px, 15vw, calc(216 * var(--u))); line-height: .86; letter-spacing: -.045em;
  font-feature-settings: "tnum" 1; white-space: nowrap;
}
.damp-num-lab { font-size: calc(18 * var(--t)); font-weight: 500; max-width: 18ch; }
.damp-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); row-gap: calc(28 * var(--u)); margin-top: 7svh; align-items: start; }
.damp-text { grid-column: 1 / 6; display: grid; gap: calc(16 * var(--u)); max-width: 46ch; font-size: calc(18 * var(--t)); }
.damp-photo { grid-column: 7 / 13; }
.damp-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.damp-photo figcaption { font-size: calc(14.5 * var(--t)); margin-top: calc(10 * var(--u)); }

/* ---------- deep band: visit + footer ---------- */
/* the band is always July at dusk: a fixed full stop after the changing field */
.deep { --band: #5A1E1E; --deep: var(--band); --light: #FFD39A; --ink: #521B1B; background: var(--band); color: var(--paper); }
.deep ::selection { background: var(--paper); color: var(--deep); }
.visit {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); row-gap: calc(48 * var(--u));
  padding: 18svh var(--gut) 14svh;
}
.visit-copy { grid-column: 1 / 7; display: flex; flex-direction: column; gap: calc(24 * var(--u)); }
.visit-copy > p { max-width: 42ch; font-size: calc(19 * var(--t)); }
.contact { margin: calc(12 * var(--u)) 0 0; display: grid; gap: calc(12 * var(--u)); max-width: calc(460 * var(--u)); }
.contact > div { display: grid; grid-template-columns: calc(110 * var(--t)) minmax(0, 1fr); gap: calc(16 * var(--u)); padding-top: calc(12 * var(--u)); border-top: 1px solid color-mix(in oklab, var(--paper) 40%, transparent); }
.contact dt { font-size: calc(15 * var(--t)); }
.contact dd { margin: 0; }
.contact a { display: inline-block; padding: 8px 0; margin: -8px 0; }

.form { grid-column: 8 / 13; display: flex; flex-direction: column; gap: calc(22 * var(--u)); align-self: start; }
.fld { display: flex; flex-direction: column; gap: calc(6 * var(--t)); border: 0; margin: 0; padding: 0; min-width: 0; }
.fld label, .fld legend { font-size: calc(15 * var(--t)); font-weight: 500; }
.opt { font-weight: 400; margin-left: 6px; }
.form input[type="text"], .form input[type="tel"], .form textarea {
  width: 100%; min-height: calc(50 * var(--t)); padding: calc(10 * var(--t)) 0;
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 2px solid color-mix(in oklab, var(--paper) 70%, transparent); border-radius: 0;
  font: 400 calc(18 * var(--t))/1.4 var(--text);
}
.form textarea { resize: vertical; min-height: calc(92 * var(--t)); }
.form input:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; border-bottom-color: var(--paper); }
.form [aria-invalid="true"] { border-bottom-color: #FFB38A; }
.err { font-size: calc(14.5 * var(--t)); color: #FFD0B0; min-height: 0; }
.err:empty { display: none; }
.days { flex-direction: row; flex-wrap: wrap; gap: calc(10 * var(--t)); }
.days legend { padding: 0; margin-bottom: calc(10 * var(--t)); width: 100%; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: calc(44 * var(--t)); padding: 0 calc(18 * var(--t)); border: 1.5px solid color-mix(in oklab, var(--paper) 75%, transparent); border-radius: 999px; cursor: pointer; font-size: calc(15.5 * var(--t)); transition: background-color .2s ease, color .2s ease; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip:has(input:checked) { background: var(--paper); color: var(--deep); border-color: var(--paper); }
.chip:has(input:focus-visible) { outline: 3px solid var(--paper); outline-offset: 3px; }
.btn-light { background: var(--paper); color: var(--deep); align-self: flex-start; }
.btn-light:hover { background: #fff; }
.form-status { font-size: calc(16 * var(--t)); font-weight: 500; }
.form-status:empty { display: none; }
.form-small { font-size: calc(14.5 * var(--t)); }

.foot { padding: 6svh var(--gut) calc(40 * var(--u)); }
.ribbon { display: grid; gap: calc(10 * var(--u)); padding-bottom: calc(44 * var(--u)); border-bottom: 1px solid color-mix(in oklab, var(--paper) 35%, transparent); }
.rb-row { display: grid; grid-template-columns: calc(84 * var(--t)) minmax(0, 1fr); align-items: center; gap: calc(12 * var(--t)); }
.rb-name { font-size: calc(14.5 * var(--t)); font-weight: 500; }
.rb-bar { display: block; height: calc(12 * var(--u)); border-radius: 999px; }
.rb-out { transform-origin: left center; }
.rb-in { background: var(--paper); }
.rb-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 4px 0 0 calc(96 * var(--t)); padding: 0; list-style: none; }
.rb-months li { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: calc(14 * var(--t)); line-height: 1.3; }
.rb-v { font-variant-numeric: tabular-nums; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(24 * var(--u)); row-gap: calc(24 * var(--u)); padding-top: calc(36 * var(--u)); }
.foot-brand { grid-column: 1 / 5; display: grid; gap: calc(8 * var(--u)); align-content: start; }
.wordmark-foot { font-size: calc(64 * var(--u)); min-height: 0; display: block; }
.foot-notes { grid-column: 6 / 13; display: grid; gap: calc(10 * var(--u)); font-size: calc(15 * var(--t)); max-width: 70ch; }
.fn-mark { font-weight: 600; margin-right: 4px; }

/* ---------- Chinese typography ---------- */
:lang(zh) body { line-height: 1.85; }
:lang(zh) p, :lang(zh) dd, :lang(zh) dt, :lang(zh) legend, :lang(zh) figcaption { text-wrap: pretty; }
:lang(zh) .h2, :lang(zh) .h3, :lang(zh) .stage-title { letter-spacing: 0; }
:lang(zh) .h2 { font-size: clamp(34px, 4.2vw, calc(62 * var(--u))); line-height: 1.26; }
:lang(zh) .h3 { font-size: clamp(27px, 2.6vw, calc(38 * var(--u))); line-height: 1.32; }
:lang(zh) .stage-title { font-size: clamp(21px, 1.7vw, calc(25 * var(--u))); line-height: 1.3; }
:lang(zh) .split .ln-mask { padding: .14em .02em .18em; margin: -.14em -.02em -.18em; }
:lang(zh) .hl .lab { margin-left: .4em; letter-spacing: .02em; }
:lang(zh) .lede { line-height: 1.85; max-width: 28em; }
:lang(zh) .roll, :lang(zh) .cap-m { letter-spacing: 0; }
:lang(zh) .cap { line-height: 1.75; }
:lang(zh) .caps { max-width: 24em; min-height: 9.4em; }
:lang(zh) .season-text > p, :lang(zh) .damp-text, :lang(zh) .visit-copy > p { max-width: 30em; }
:lang(zh) .room-intro-text { max-width: 32em; }
:lang(zh) .damp-num-lab { max-width: 11em; }
:lang(zh) .btn { letter-spacing: .02em; }
:lang(zh) .foot-notes { line-height: 1.8; }

/* ---------- intro: pure CSS, starts at first paint, done by about 1.6 s ----------
   Runs only when the inline head script has set .fx (JS on, motion allowed); otherwise the hero is static.
   0.08-1.0 s the window opens like a blind going up; 0.14-0.85 s the numerals rise;
   0.42-1.45 s 4° condenses and 29° expands (an exponential approach, like Newton's cooling) while 25° holds;
   0.55 s labels; 0.75-1.35 s text and button. */
@media (prefers-reduced-motion: no-preference) {
  .fx .panes { animation: gln-blind .92s cubic-bezier(.45, 0, .2, 1) .08s both; }
  .fx .pane img { animation: gln-settle 1.35s cubic-bezier(.22, 1, .36, 1) .08s both; }
  .fx .pane-tag { animation: gln-fade .45s ease-out .85s both; }
  .fx .hero-lines .ch { animation: gln-rise .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.14s + var(--i) * .04s); }
  .fx .hl[data-t="4.1"] .num { animation: gln-cool 1.03s cubic-bezier(.16, 1, .3, 1) .42s both; }
  .fx .hl[data-t="29.3"] .num { animation: gln-heat 1.03s cubic-bezier(.16, 1, .3, 1) .42s both; }
  .fx .hero-lines .lab { animation: gln-fade .55s ease-out .55s both; }
  .fx .hero-foot, .fx .window figcaption { animation: gln-fade .6s ease-out .75s both; }
}
@keyframes gln-blind { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gln-settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes gln-rise { from { transform: translateY(115%); } to { transform: none; } }
@keyframes gln-cool { from { font-variation-settings: "wdth" 92, "wght" 560; } to { font-variation-settings: "wdth" 75, "wght" 236; } }
@keyframes gln-heat { from { font-variation-settings: "wdth" 92, "wght" 560; } to { font-variation-settings: "wdth" 96.3, "wght" 689; } }
@keyframes gln-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .bar-nav a { padding: 0 8px; font-size: 15px; }
  .hero-lines { grid-column: 1 / 8; }
  .window { grid-column: 8 / 13; }
  .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .season-winter .season-photo { grid-column: 1 / 7; }
  .season-winter .season-text { grid-column: 7 / 13; }
  .season-summer .season-text { grid-column: 1 / 7; }
  .season-summer .season-photo { grid-column: 7 / 13; }
}

@media (max-width: 860px) {
  .bar-nav { display: none; }
  .hero { --hn: clamp(96px, 27vw, 200px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding-top: 92px; row-gap: 28px; }
  .hero-lines, .window, .hero-foot { grid-column: 1; grid-row: auto; }
  .window { max-width: none; justify-self: stretch; }
  .panes { height: min(56vw, 360px); }

  .stage { display: flex; flex-direction: column; padding: 70px var(--gut) 12px; column-gap: 0; }
  .readout {
    flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px;
    grid-template-areas: "head head" "where in" "roll in" "big in" "diff diff" "extra extra" "caps caps";
  }
  .live .extra { display: none; }
  .stage-head { grid-area: head; }
  .out { display: contents; }
  .out .where { grid-area: where; margin-top: 10px; }
  .roll { grid-area: roll; }
  .big-out { grid-area: big; }
  .diff { grid-area: diff; }
  .extra { grid-area: extra; }
  .in { grid-area: in; margin-top: 0; padding: 6px 0 4px 14px; border-top: 0; border-left: 1.5px solid var(--ink); align-self: end; }
  .in .where { max-width: 7.5em; line-height: 1.3; }
  .in-note { display: none; }
  .caps { grid-area: caps; min-height: 7.3em; margin-top: 6px; max-width: none; }
  .cap { font-size: 15.5px; line-height: 1.45; }
  .cap-m { font-size: 17px; margin-bottom: 2px; }
  .dial-wrap { flex: 1 1 0; margin: 4px calc(-1 * var(--gut)) 0; gap: 8px; }
  .dial { width: min(100cqw - 40px, 100cqh - 34px); }
  .dial-key { font-size: 13px; gap: 2px 2px; }
  :lang(zh) .caps { min-height: 8.6em; }
  .k { margin-left: 8px; width: 12px; height: 12px; }
  html:not(.live) .stage { display: grid; grid-template-columns: minmax(0, 1fr); }
  html:not(.live) .readout { grid-template-columns: minmax(0, 1fr) auto; }
  html:not(.live) .caps { display: grid; }
  html:not(.live) .dial { width: min(640px, 100% - 44px); }

  .room-intro { grid-template-columns: minmax(0, 1fr); padding-top: 14svh; }
  .room-intro .h2, .room-intro-text { grid-column: 1; }
  .season { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 8svh var(--gut); }
  .season-winter .season-photo, .season-winter .season-text, .season-summer .season-text, .season-summer .season-photo { grid-column: 1; padding-left: 0; }
  .season-summer .season-photo { order: -1; }
  .season-photo { margin-inline: calc(-1 * var(--gut)); }
  .season-summer .season-photo { margin-right: calc(-1 * var(--gut)); }
  .season-photo figcaption { padding-inline: var(--gut); }
  .season-winter .season-photo img { aspect-ratio: 4 / 3; }

  .damp-body { grid-template-columns: minmax(0, 1fr); }
  .damp-text, .damp-photo { grid-column: 1; }

  .visit { grid-template-columns: minmax(0, 1fr); padding-top: 12svh; }
  .visit-copy, .form { grid-column: 1; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-brand, .foot-notes { grid-column: 1; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .wordmark { font-size: 27px; }
  .hero { --hn: 28.5vw; }
  .hl .lab { font-size: 17px; margin-left: .3em; }
  .lede { font-size: 17px; }
  .stage-hint { display: none; }
  .roll { font-size: 28px; }
  .big-out { font-size: min(24vw, 13svh); }
  .big-in { font-size: 38px; }
  .diff { font-size: 15px; margin-top: 8px; }
  .extra { font-size: 14.5px; min-height: 2.9em; }
  .where { font-size: 14.5px; }
  .rb-row { grid-template-columns: 64px minmax(0, 1fr); }
  .rb-months { margin-left: 76px; }
  .rb-months li { font-size: 12.5px; }
  .rb-rest { display: none; }
  .rb-v { display: none; }
  .visit { padding-bottom: 8svh; }
  .contact > div { grid-template-columns: 84px minmax(0, 1fr); }
  .felt > div { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
}

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