/* GLN hero 05 · Take the box off the wall — clay room, one headline, one pinned scene. */

:root {
  --wall: #D7DBD3;
  --floor: #C9C3B8;
  --paper: #F2F0EB;
  --graphite: #4A4E52;
  --ink: #202427;
  --ink-2: #3E4447;
  --ink-3: #4A4F52; /* 4.7:1 on the floor tone #C9C3B8 of #more and the footer (was #555B5E, 3.97:1) */
  /* layout unit: 1px up to 1440, 1.5px at 2560 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) / 2240), 1.5px);
  --gutter: max(20px, min(5.83vw, calc(84 * var(--u))));
  --ease: cubic-bezier(.2, .7, .1, 1);
  --font: "Epilogue", "Epilogue Fallback", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: clamp(16px, calc(16px + (100vw - 1440px) * 5 / 1120), 21px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wall); color: var(--ink);
  font-family: var(--font); font-weight: 400; font-size: 1rem; line-height: 1.5;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, canvas { display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 30; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; 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(36 * var(--u));
  height: calc(76 * var(--u)); min-height: 60px; padding: 0 var(--gutter);
}
.nav { transition: transform .5s var(--ease), background-color .4s ease, box-shadow .4s ease; }
.nav--solid { background: rgba(201, 195, 184, .94); box-shadow: 0 1px 0 rgba(32, 36, 39, .1); }
.nav--away { transform: translateY(-100%); }
.static .nav, html:not(.js) .nav { background: rgba(215, 219, 211, .94); box-shadow: 0 1px 0 rgba(32, 36, 39, .08); }
.nav__mark {
  font-weight: 600; font-size: calc(23 * var(--u)); letter-spacing: 0.07em; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center; margin-right: auto;
}
.nav__links { display: flex; gap: calc(30 * var(--u)); }
.nav__links a {
  font-size: 0.9375rem; color: var(--ink-2); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 0.8em) / 0 1px no-repeat;
  transition: background-size .45s var(--ease), color .3s;
}
.nav__links a:hover { color: var(--ink); background-size: 100% 1px; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4em; border-radius: 999px;
  font: 500 1rem/1 var(--font); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn--solid { background: #2A2F32; color: var(--paper); }
.btn--solid:hover { background: #3A4145; }
.btn--line { border: 1px solid rgba(32, 36, 39, .34); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--nav { min-height: 44px; font-size: 0.9375rem; padding: 0 1.2em; }

/* ---------------------------------------------------------------- hero */
.hero { position: relative; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; background: var(--wall); }
.hero__stage { position: absolute; inset: 0; background: var(--wall); }
.hero__poster img, .hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 85% 0%;
}
.hero__poster img { opacity: 0; transition: opacity .4s ease-out; }
.poster-ready .hero__poster img, html:not(.js) .hero__poster img { opacity: 1; }
.hero__canvas { opacity: 0; transition: opacity .6s cubic-bezier(.3, .1, .2, 1); }
.hero__stage.is-live .hero__canvas { opacity: 1; }
.hero__grain {
  position: absolute; inset: 0; pointer-events: none;
  background: url(img/grain.png) 0 0 / 192px 192px; mix-blend-mode: overlay; opacity: .22;
}

.hero__copy {
  position: absolute; z-index: 2;
  left: var(--gutter); top: 40%;
  width: min(44vw, calc(1180 * var(--u)));
}
.hero__title {
  margin: 0; font-weight: 560; font-size: clamp(2.6rem, 5.55vw, 10rem);
  line-height: 0.95; letter-spacing: -0.038em; color: var(--ink);
  font-variation-settings: "wght" 560;
}
.hero__title .line { display: block; overflow: hidden; padding: 0.02em 0 0.1em; margin-bottom: -0.1em; }
.hero__title .line > span { display: inline-block; }
.hero__subs { display: grid; margin-top: calc(34 * var(--u)); max-width: 25em; }
.sub { grid-area: 1 / 1; margin: 0; font-size: 1.25rem; line-height: 1.42; color: var(--ink-2); letter-spacing: -0.005em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(38 * var(--u)); }

.hero__hint { position: absolute; z-index: 2; left: var(--gutter); bottom: calc(40 * var(--u)); display: none; }
.hero__hint p {
  margin: 0; display: flex; align-items: center; gap: 14px;
  font-size: 0.875rem; letter-spacing: 0.01em; color: var(--ink-3);
}
.hero__hint p::before { content: ""; width: calc(36 * var(--u)); height: 1px; background: currentColor; opacity: .6; }
@media (min-aspect-ratio: 1551/1000) { .live .hero__hint { display: block; } }
.motion .hero__hint { opacity: 0; }
.motion.go .hero__hint { animation: fade .8s .6s ease-out both; }

/* portrait screens: text at the bottom, the scene above it */
@media (max-aspect-ratio: 999/1000) {
  .hero__poster img, .hero__canvas { object-position: 50% 0%; }
  .hero__copy { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .hero__title { font-size: clamp(2.5rem, 11.2vw, 6rem); }
  .sub { font-size: clamp(1.0625rem, 2.6vw, 1.375rem); }
  .hero__subs { margin-top: 18px; max-width: 30em; }
  .hero__actions { margin-top: 24px; }
}
/* squarer landscape windows (design frame M): the text sits low on the left */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 31/20) {
  .hero__poster img, .hero__canvas { object-position: 75% 0%; }
  .hero__copy { top: auto; bottom: 8%; width: min(52vw, calc(900 * var(--u))); }
  .hero__title { font-size: clamp(2.6rem, 6.1vw, 8rem); }
}
@media (max-width: 760px) {
  .nav__links { display: none; }
}
@media (max-width: 380px) {
  .hero__actions .btn { padding: 0 1.1em; }
}

/* intro: the headline rises line by line, the rest follows (CSS, started by .go from the head script) */
.motion .nav { opacity: 0; }
.motion.go .nav { animation: fade .7s .05s ease-out both; }
.motion .hero__title .line > span { transform: translateY(108%); }
.motion.go .hero__title .line > span { animation: rise .95s var(--ease) both; }
.motion.go .hero__title .line:nth-child(2) > span { animation-delay: .09s; }
.motion .hero__subs, .motion .hero__actions { opacity: 0; }
.motion.go .hero__subs { animation: lift .8s .26s var(--ease) both; }
.motion.go .hero__actions { animation: lift .8s .36s var(--ease) both; }
.intro-done .hero__title .line > span, .intro-done .hero__subs, .intro-done .hero__actions { animation: none !important; transform: none; opacity: 1; }
.intro-done .nav, .intro-done .hero__hint { animation: none !important; opacity: 1; }
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.live .sub--after { visibility: hidden; }

/* ---------------------------------------------------------------- stills (reduced motion, no WebGL, no JS) */
.compare { display: none; }
.static .hero, html:not(.js) .hero { height: auto; min-height: 0; overflow: visible; padding: calc(150 * var(--u)) var(--gutter) calc(96 * var(--u)); }
.static .hero__stage, html:not(.js) .hero__stage { display: none; }
.static .hero__copy, html:not(.js) .hero__copy { position: static; width: auto; max-width: calc(1200 * var(--u)); }
.static .hero__title, html:not(.js) .hero__title { font-size: clamp(2.6rem, 5.2vw, 9rem); }
.static .sub--after, html:not(.js) .sub--after { display: none; }
.static .compare, html:not(.js) .compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u));
  margin-top: calc(72 * var(--u));
}
.compare__item { margin: 0; }
.compare__item img { width: 100%; height: auto; border-radius: calc(6 * var(--u)); background: #cfd3cb; }
.compare figcaption { margin-top: 14px; font-size: 1rem; color: var(--ink-2); max-width: 34em; }
@media (max-width: 760px) {
  .static .compare, html:not(.js) .compare { grid-template-columns: 1fr; gap: 32px; }
  .static .hero, html:not(.js) .hero { padding-top: 110px; }
}

/* ---------------------------------------------------------------- more */
.more { background: var(--floor); color: var(--ink); }
.more__inner {
  padding: calc(150 * var(--u)) var(--gutter) calc(130 * var(--u));
  max-width: calc(1500 * var(--u));
}
.more__title { margin: 0 0 calc(40 * var(--u)); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-3); }
.more p {
  margin: 0; max-width: 30em; font-size: clamp(1.375rem, 2.1vw, 2.5rem); line-height: 1.28; letter-spacing: -0.018em; font-weight: 450;
  font-variation-settings: "wght" 450;
}
.more p + p { margin-top: 0.5em; }
.more__back {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(56 * var(--u));
  font-size: 1rem; font-weight: 500; text-underline-offset: 0.3em; text-decoration-thickness: 1px;
}
.more__back:hover { text-decoration-thickness: 2px; }

.foot { background: var(--floor); border-top: 1px solid rgba(32, 36, 39, .12); padding: 26px var(--gutter) 34px; color: var(--ink-3); font-size: 0.9375rem; }
.foot p { margin: 0; }
.foot p + p { margin-top: 4px; }

/* ---------------------------------------------------------------- language switch */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang { display: inline-flex; align-items: center; flex: none; }
.lang__b {
  position: relative; min-height: 44px; min-width: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer;
  font: 500 0.875rem/1 var(--font); letter-spacing: 0.02em; color: var(--ink-3); transition: color .3s;
}
/* system CJK faces here, so an English page never downloads the Chinese subset for two characters */
.lang__b--zh { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", sans-serif; letter-spacing: 0; }
.lang__b::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .45s var(--ease); }
.lang__b:hover, .lang__b[aria-pressed="true"] { color: var(--ink); }
.lang__b[aria-pressed="true"]::after { transform: scaleX(1); }
.lang__sep { color: rgba(32, 36, 39, .35); font-size: 0.875rem; }
@media (max-width: 760px) {
  .nav { gap: 10px; }
  .lang__b { padding: 0 4px; }
}

/* ---------------------------------------------------------------- Simplified Chinese */
:root { --zh: "GLN Sans SC", "GLN Sans SC Fallback", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif; }
html:lang(zh) { --font: "Epilogue", var(--zh); }
html:lang(zh) body { line-height: 1.8; letter-spacing: 0; line-break: strict; }
html:lang(zh) .hero__title {
  font-weight: 600; font-variation-settings: normal; letter-spacing: 0; line-height: 1.3;
  font-size: clamp(2.2rem, 4.3vw, 7.6rem); text-wrap: balance;
}
html:lang(zh) .hero__title .line { padding: 0.04em 0 0.12em; margin-bottom: -0.12em; }
html:lang(zh) .sub { font-size: 1.1875rem; line-height: 1.75; letter-spacing: 0; text-wrap: pretty; }
html:lang(zh) .sub .w { display: inline-block; }
html:lang(zh) .hero__subs { max-width: 21em; }
html:lang(zh) .btn, html:lang(zh) .nav__links a, html:lang(zh) .hero__hint p, html:lang(zh) .more__title { letter-spacing: 0; }
html:lang(zh) .more p { font-weight: 400; font-variation-settings: normal; letter-spacing: 0; line-height: 1.6; font-size: clamp(1.25rem, 1.8vw, 2.125rem); max-width: 24em; text-wrap: pretty; }
html:lang(zh) .compare figcaption { line-height: 1.75; max-width: 30em; }
html:lang(zh) .foot { line-height: 1.75; }
@media (max-aspect-ratio: 999/1000) {
  html:lang(zh) .hero__title { font-size: clamp(2.125rem, 9.4vw, 5rem); }
  html:lang(zh) .sub { font-size: clamp(1rem, 2.4vw, 1.25rem); }
}
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 31/20) {
  html:lang(zh) .hero__title { font-size: clamp(2.2rem, 4.8vw, 6.4rem); }
}
html:lang(zh).static .hero__title, html:lang(zh):not(.js) .hero__title { font-size: clamp(2.2rem, 4.2vw, 7.2rem); }

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