/* Hero 02 · Warm like sunlight */

:root {
  --wall: #9e958b;          /* average of the shaded wall, shown before the still decodes */
  --ink: #1d1814;
  --ink-2: #26201b;
  --paper: #ebe5da;         /* limewash in daylight */
  --paper-ink: #2a241f;
  --line: rgba(29, 24, 20, 0.34);
  /* layout unit: 1px up to 1440, 1.5px at 2560 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) / 2240), 1.5px);
  --gutter: clamp(20px, 6.2vw, 160px);
  --copy-w: min(44vw, calc(760 * var(--u)));
  --hero-h: max(100svh, 560px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --display: "Castoro", "Castoro Fallback", Georgia, serif;
  --text: "Work Sans", "Work Sans Fallback", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html { font-size: clamp(16px, calc(0.4464vw + 9.57px), 21px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.55 var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- header */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: calc(40 * var(--u));
  padding: calc(22 * var(--u)) var(--gutter);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.nav--solid { background: rgba(235, 229, 218, 0.95); box-shadow: 0 1px 0 rgba(29, 24, 20, 0.12); }
.nav { transition: background-color .5s var(--ease), box-shadow .5s var(--ease), transform .6s var(--ease); }
.nav--away { transform: translateY(-100%); }
.nav:focus-within { transform: none; }
.wordmark {
  font: 400 calc(30 * var(--u))/1 var(--display);
  letter-spacing: 0.06em;
  text-decoration: none;
  margin-right: auto;
  padding: 10px 0;
}
.wordmark--small { font-size: 1.15em; margin-right: .5em; letter-spacing: .06em; }
.nav__links { display: flex; gap: calc(32 * var(--u)); }
.nav__links a {
  font-size: calc(15 * var(--u)); text-decoration: none; letter-spacing: 0.01em;
  padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.nav__links a:hover { background-size: 100% 1px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(44px, calc(50 * var(--u)));
  padding: 0 calc(24 * var(--u));
  font: 500 calc(15 * var(--u))/1 var(--text); letter-spacing: 0.015em;
  text-decoration: none; border-radius: 1px; white-space: nowrap;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn--solid { background: var(--ink); color: #f1ebe2; }
.btn--solid:hover { background: #3a3129; }
.btn--line { padding: 0 2px; border-bottom: 1px solid currentColor; border-radius: 0; min-height: max(44px, calc(50 * var(--u))); }
.btn--line:hover { border-bottom-color: transparent; }
.btn--nav { min-height: max(44px, calc(46 * var(--u))); font-size: calc(14 * var(--u)); padding: 0 calc(20 * var(--u)); }

/* ---------------------------------------------------------------- hero, shared */
.hero { position: relative; background: var(--wall); color: var(--ink); }
.hero__stage { position: absolute; inset: 0; overflow: hidden; }
.shot, .shot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.shot img { object-fit: cover; object-position: 55% 72%; }
@media (max-aspect-ratio: 124/100) { .shot img { object-position: 56% 62%; } }
@media (max-aspect-ratio: 64/100) { .shot img { object-position: 60% 62%; } }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .7s var(--ease); }
.hero__canvas.is-live { opacity: 1; }

.display {
  font: 400 clamp(40px, min(calc(90 * var(--u)), 6.6vw), 200px)/1.02 var(--display);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
  max-width: 11.5em;
}
.lede {
  font-size: clamp(1rem, calc(19 * var(--u)), 1.35rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 26em;
  margin-top: calc(26 * var(--u));
  font-weight: 420;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)) calc(30 * var(--u)); margin-top: calc(40 * var(--u)); }

.season { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.season__btn {
  appearance: none; border: 0; background: none; color: inherit; cursor: pointer;
  font: 500 calc(14 * var(--u))/1 var(--text); letter-spacing: 0.02em;
  min-height: 44px; min-width: 44px; padding: 0 4px; font-weight: 400;
  text-decoration: underline transparent; text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color .4s var(--ease);
}
.season__btn[aria-pressed="true"] { font-weight: 600; }
.season__btn:hover { text-decoration-color: currentColor; }
.season__track { position: relative; width: calc(84 * var(--u)); height: 1px; background: var(--line); }
.season__dot {
  position: absolute; top: 50%; left: 0; width: calc(9 * var(--u)); height: calc(9 * var(--u));
  margin: calc(-4.5 * var(--u)) 0 0 calc(-4.5 * var(--u)); border-radius: 50%; background: var(--ink);
  transform: translateX(calc(var(--p, 0) * 84 * var(--u)));
}
.caption { font-size: max(12px, calc(13 * var(--u))); letter-spacing: .02em; color: var(--ink); }

/* ---------------------------------------------------------------- hero, live (pinned) */
.motion .hero { height: var(--hero-h); overflow: hidden; }
.motion .shot--winter, .motion .hero__stage--summer { display: none; }
.motion .hero__copy {
  position: absolute; z-index: 2; left: var(--gutter); top: 50%;
  transform: translateY(-50%);
  width: var(--copy-w);
  display: grid;
}
.motion .state { grid-area: 1 / 1; }
.motion .state--summer { opacity: 0; pointer-events: none; }
.motion .state--summer.is-on { pointer-events: auto; }
.motion .season { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(26 * var(--u) + 1.5svh); }
.motion .caption { position: absolute; z-index: 2; right: var(--gutter); bottom: calc(38 * var(--u) + 1.5svh); }

/* ---------------------------------------------------------------- hero, stills (reduced motion, no WebGL, no JS) */
html:not(.motion) .hero { display: grid; }
html:not(.motion) .hero > .hero__stage { position: relative; grid-area: 1 / 1; height: var(--hero-h); }
html:not(.motion) .shot--start { display: none; }
html:not(.motion) .hero__copy { display: contents; }
html:not(.motion) .state { position: relative; z-index: 1; padding: calc(120 * var(--u)) var(--gutter) calc(140 * var(--u)); }
html:not(.motion) .state--winter { grid-area: 1 / 1; align-self: center; }
html:not(.motion) .state > :not(.hero__stage) { max-width: var(--copy-w); }
html:not(.motion) .state--summer {
  grid-area: 2 / 1; min-height: var(--hero-h); isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
}
html:not(.motion) .hero__stage--summer { z-index: -1; }
html:not(.motion) .season { grid-area: 1 / 1; align-self: end; z-index: 1; margin: 0 var(--gutter) calc(30 * var(--u) + 1.5svh); }
html:not(.motion) .caption { grid-area: 2 / 1; align-self: end; justify-self: end; z-index: 1; margin: 0 var(--gutter) calc(40 * var(--u) + 1.5svh); }

/* ---------------------------------------------------------------- intro (CSS; the headline lines may be taken over by SplitText) */
.js .nav > *, .js .lede, .js .actions, .js .season, .js .caption { opacity: 0; }
.js.go .nav > * { animation: fadeIn .8s var(--ease) both; }
.js.go .nav > :nth-child(2) { animation-delay: .08s; }
.js.go .nav > :nth-child(3) { animation-delay: .16s; }
.js.go .state--winter .lede { animation: rise .95s var(--ease) .32s both; }
.js.go .state--summer .lede { animation: none; }
.js.go .state--winter .actions { animation: rise .95s var(--ease) .46s both; }
.js.go .season { animation: fadeIn .9s var(--ease) .62s both; }
.js.go .caption { animation: fadeIn .9s var(--ease) .75s both; }
.js .state--summer .lede { opacity: 1; }
.js #hero-title { opacity: 0; }
.js.intro-js #hero-title { opacity: 1; }
.js.intro-css #hero-title { animation: rise 1s var(--ease) both; }
.js .shot--start img { animation: fadeIn .4s ease-out both; }
.no-libs .nav > *, .no-libs .lede, .no-libs .actions, .no-libs .season, .no-libs .caption, .no-libs #hero-title { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .js.go .state--winter .lede, .js.go .state--winter .actions, .js.intro-css #hero-title { animation-name: fadeIn; animation-duration: .5s; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.line-mask { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------------------------------------------------------------- follow-on */
.more {
  padding: calc(150 * var(--u)) var(--gutter) calc(140 * var(--u));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(40 * var(--u)) calc(80 * var(--u));
  background: var(--paper); color: var(--paper-ink);
}
.more__title { font: 400 clamp(32px, calc(52 * var(--u)), 4.4vw)/1.08 var(--display); margin: 0; letter-spacing: -0.01em; max-width: 9em; }
.more__text { display: grid; gap: 1.1em; font-size: clamp(1.05rem, calc(19 * var(--u)), 1.3rem); line-height: 1.6; max-width: 34em; }
.back { grid-column: 2; justify-self: start; font-size: calc(16 * var(--u)); padding: 12px 0; text-underline-offset: 5px; }

.foot {
  padding: calc(34 * var(--u)) var(--gutter) calc(40 * var(--u));
  background: var(--paper); color: var(--paper-ink);
  border-top: 1px solid rgba(42, 36, 31, .16);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 40px;
  font-size: max(14px, calc(14 * var(--u)));
}
.foot a { text-underline-offset: 3px; }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .nav { gap: 18px; padding-top: 14px; padding-bottom: 14px; }
  .nav__links { display: none; }
  .wordmark { font-size: 26px; }
  .more { grid-template-columns: 1fr; }
  .back { grid-column: 1; }
}
@media (max-aspect-ratio: 124/100) {
  :root { --copy-w: 100%; }
  .motion .hero__copy { top: calc(84px + 2.5svh); transform: none; width: auto; right: var(--gutter); }
  html:not(.motion) .state--winter { align-self: start; padding-top: calc(84px + 2.5svh); }
  .display { font-size: clamp(38px, 7.6vw, 64px); }
}
@media (max-aspect-ratio: 64/100) {
  .display { font-size: clamp(32px, 9.4vw, 46px); max-width: 10em; }
  .lede { max-width: 22em; margin-top: 14px; font-size: 1rem; }
  .actions { margin-top: 22px; }
  .motion .hero__copy { top: calc(72px + 1.5svh); }
  .motion .caption { display: none; }
}
@media (max-width: 420px) {
  .actions { gap: 12px 22px; }
  .season__track { width: 56px; }
  .season__dot { transform: translateX(calc(var(--p, 0) * 56px)); }
}
/* short landscape screens (phones on their side, zoomed-in laptops): keep the copy inside the visible part */
@media (max-height: 620px) and (min-aspect-ratio: 5/4) {
  .display { font-size: clamp(28px, 10.5svh, 64px); }
  .lede { font-size: 15px; margin-top: 12px; }
  .actions { margin-top: 18px; }
  .motion .hero__copy { top: calc(50svh + 22px); }
  .nav { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------------------------------------------------------------- language switch */
.lang { display: inline-flex; align-items: center; flex: none; }
.lang__b {
  appearance: none; border: 0; background: none; color: inherit; cursor: pointer;
  min-height: 44px; min-width: 44px; padding: 0 4px;
  font: 400 calc(14 * var(--u))/1 var(--text); letter-spacing: 0.02em;
  text-decoration: underline transparent; text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color .4s var(--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 { text-decoration-color: currentColor; }
.lang__b[aria-pressed="true"] { font-weight: 600; text-decoration-color: currentColor; }
.lang__sep { opacity: .45; font-size: calc(14 * var(--u)); }
@media (max-width: 420px) {
  .nav { gap: 10px; }
  .lang__b { min-width: 44px; padding: 0 2px; }
  html:lang(zh) .btn--nav { padding: 0 14px; }
}

/* ---------------------------------------------------------------- Simplified Chinese */
:root {
  --zh-sans: "GLN Sans SC", "GLN Sans SC Fallback", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  --zh-serif: "GLN Serif SC", "GLN Serif SC Fallback", "Songti SC", "Source Han Serif SC", serif;
}
html:lang(zh) { --text: "Work Sans", var(--zh-sans); --display: "Castoro", var(--zh-serif); }
html:lang(zh) .wordmark { font-family: "Castoro", "Castoro Fallback", Georgia, serif; }
html:lang(zh) body { line-height: 1.8; letter-spacing: 0; line-break: strict; }
html:lang(zh) .btn, html:lang(zh) .nav__links a, html:lang(zh) .season__btn, html:lang(zh) .caption { letter-spacing: 0; }
html:lang(zh) .display {
  font-weight: 500; letter-spacing: 0; line-height: 1.3; max-width: none; text-wrap: balance;
  font-size: clamp(34px, min(calc(64 * var(--u)), 4.4vw), 140px);
}
html:lang(zh) .lede { line-height: 1.8; max-width: 24em; font-weight: 400; text-wrap: pretty; }
html:lang(zh) .more__title { font-weight: 500; letter-spacing: 0; line-height: 1.3; max-width: 8em; font-size: clamp(28px, calc(44 * var(--u)), 3.8vw); text-wrap: balance; }
html:lang(zh) .more__text { line-height: 1.85; max-width: 32em; text-wrap: pretty; }
html:lang(zh) .foot { line-height: 1.75; }
@media (max-aspect-ratio: 124/100) { html:lang(zh) .display { font-size: clamp(32px, 6.4vw, 54px); } }
@media (max-aspect-ratio: 64/100) { html:lang(zh) .display { font-size: clamp(28px, 8.2vw, 40px); } html:lang(zh) .lede { max-width: 20em; line-height: 1.75; } }
@media (max-height: 620px) and (min-aspect-ratio: 5/4) { html:lang(zh) .display { font-size: clamp(26px, 9svh, 54px); } }