/* Wide canvas, two color systems, and a shared motion language for the index. */
:root {
  --surface-soft: #e8e5dc;
  --spotlight: #ffffff11;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111716;
  --ink: #f1eee5;
  --muted: #a6b0a8;
  --line: #39433e;
  --orange: #ff8964;
  --blue: #5a7ce0;
  --night: #1b2824;
  --night-line: #43594c;
  --surface-soft: #202b26;
  --spotlight: #d6ead212;
}

body,
.brand-mark span,
.theme-toggle,
.shelf,
.closing,
.site-footer,
.featured {
  transition: background-color .48s ease, color .48s ease, border-color .48s ease;
}

body { background: var(--paper); }
.site-shell { max-width: none; width: 100%; padding-inline: clamp(22px, 3.6vw, 128px); }
.site-header { gap: clamp(18px, 2vw, 46px); }
.main-nav { gap: clamp(20px, 2.1vw, 52px); }
.hero-preface, .hero-description { color: var(--muted); }
.hero-visual::before { content: none; }
.orbit-outer { border-color: var(--line); }
.orbit-middle { border-color: var(--line); }
.orbit-inner { border-color: var(--muted); opacity: .65; }
.orbit-core { box-shadow: 17px 18px 0 #00000026, 0 0 75px #294eba22; }
.point-two { background: var(--ink); }
.featured { position: relative; isolation: isolate; overflow: hidden; }
.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--spotlight), transparent 78%);
  transition: opacity .35s ease;
}
.featured:hover::before { opacity: 1; }
.featured > * { position: relative; z-index: 1; }
.featured h3 { white-space: normal; }

html[data-theme="dark"] .hero-preface,
html[data-theme="dark"] .hero-description { color: #b4beb4; }
html[data-theme="dark"] .featured { box-shadow: inset 0 0 0 1px #77947a17; }
html[data-theme="dark"] .featured-button { color: #141b18; }
html[data-theme="dark"] .hero-bottomline span:nth-child(2) { color: var(--ink); }
html[data-theme="dark"] ::selection { background: #e07858; color: #111716; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 37px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 650 10px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .09em;
}
.theme-toggle:hover { border-color: var(--orange); color: var(--orange); }
.theme-toggle:focus-visible,
.language-switch button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.theme-toggle-icon { display: inline-block; font-size: 19px; line-height: 1; transform-origin: center; }
.theme-flip .theme-toggle-icon { animation: themeFlip .55s cubic-bezier(.2,.8,.2,1) both; }

.scroll-progress {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* At large viewports the content uses the canvas rather than staying in a narrow column. */
@media (min-width: 1500px) {
  .site-header { height: clamp(100px, 7vw, 144px); }
  .hero { min-height: clamp(760px, 75vh, 1180px); }
  .hero-grid { min-height: clamp(645px, 68vh, 1040px); grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
  .hero-copy { padding-bottom: 75px; }
  :lang(en) .hero h1 { font-size: clamp(92px, 5.8vw, 190px); }
  :lang(zh-CN) .hero h1 { font-size: clamp(96px, 5.9vw, 190px); }
  .hero-preface { font-size: clamp(18px, 1.1vw, 29px); }
  .hero-description { max-width: 680px; font-size: clamp(17px, 1.05vw, 27px); }
  .hero-visual { width: min(39vw, 1100px); height: clamp(570px, 38vw, 820px); }
  .section-intro { padding-top: clamp(128px, 8vw, 240px); padding-bottom: clamp(78px, 5vw, 145px); }
  .section-heading-wrap h2 { font-size: clamp(64px, 4.3vw, 126px); }
  .section-heading-wrap p { max-width: 490px; font-size: clamp(15px, .9vw, 23px); }
  .featured { min-height: clamp(660px, 41vw, 1030px); grid-template-columns: clamp(74px, 5vw, 135px) 1fr; }
  .featured-content { min-height: clamp(475px, 31vw, 780px); }
  :lang(en) .featured h3 { font-size: clamp(82px, 5.6vw, 176px); }
  :lang(zh-CN) .featured h3 { font-size: clamp(84px, 5.7vw, 180px); }
  .featured-description { max-width: 640px; font-size: clamp(16px, 1.05vw, 27px); }
  .featured-art { width: min(32vw, 690px); height: min(29vw, 620px); }
  .shelves { padding-block: clamp(120px, 8vw, 255px); }
  .shelf { min-height: clamp(220px, 13vw, 350px); }
  .shelf h3 { font-size: clamp(42px, 2.9vw, 84px); }
  .shelf p { max-width: 750px; font-size: clamp(15px, .9vw, 23px); }
}

@media (min-width: 1800px) {
  .hero-visual .orbit,
  .hero-visual .orbit-core,
  .hero-visual .orbit-point,
  .hero-visual .visual-satellite { scale: 1.3; }
  .featured-art .chip { scale: 1.28; }
}

@media (min-width: 2600px) {
  .hero-visual .orbit,
  .hero-visual .orbit-core,
  .hero-visual .orbit-point,
  .hero-visual .visual-satellite { scale: 1.7; }
  .featured-art .chip { scale: 1.6; }
  .featured-art { width: 850px; height: 720px; }
}

/* Motion stays tied to the site's question, orbit, and field-note imagery. */
.motion-ready .site-header { animation: riseIn .7s both; }
.motion-ready .hero-topline { animation: riseIn .75s .12s both; }
.motion-ready .hero-preface { animation: riseIn .85s .2s both; }
.motion-ready .hero h1 { animation: riseIn .95s .29s both; }
.motion-ready .hero-description { animation: riseIn .85s .45s both; }
.motion-ready .hero-link { animation: riseIn .85s .58s both; }
.motion-ready .hero-visual { animation: fadeIn 1.3s .35s both; }
.motion-ready .hero-bottomline { animation: fadeIn 1s .8s both; }
.motion-ready .circled-word svg path { stroke-dasharray: 560; stroke-dashoffset: 560; animation: drawCircle 1.15s 1.08s ease-out both; }
.motion-ready .orbit-outer { animation: turnOuter 48s linear infinite; }
.motion-ready .orbit-middle { animation: turnMiddle 39s linear infinite; }
.motion-ready .orbit-inner { animation: turnInner 31s linear infinite; }
.motion-ready .orbit-core span { animation: questionFloat 6s ease-in-out infinite; }
.motion-ready .point-one { animation: pointDrift 5s ease-in-out infinite; }
.motion-ready .point-two { animation: pointDrift 7s -2s ease-in-out infinite reverse; }
.motion-ready .visual-stamp { animation: stampWobble 8s ease-in-out infinite; }
.motion-ready .live-dot { animation: pulseDot 2.8s ease-in-out infinite; }
.motion-ready .eyebrow-star { display: inline-block; animation: softSpin 14s linear infinite; }
.motion-ready .hero-bottomline span[aria-hidden="true"] { display: inline-block; animation: nudgeDown 2.3s ease-in-out infinite; }

.visual-satellite { position: absolute; z-index: 2; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--orange); }
.satellite-one { left: 24%; top: 20%; animation: satelliteDrift 11s ease-in-out infinite; }
.satellite-two { right: 28%; bottom: 23%; background: var(--blue); border-color: var(--blue); animation: satelliteDrift 14s -4s ease-in-out infinite reverse; }

.hero-visual .orbit { translate: var(--ring-x, 0px) var(--ring-y, 0px); transition: translate .45s cubic-bezier(.2,.8,.2,1); }
.orbit-core {
  border: 0;
  padding: 0;
  cursor: pointer;
  translate: var(--core-x, 0px) var(--core-y, 0px);
  transition: translate .32s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.orbit-core:hover { filter: brightness(1.12); }
.orbit-core:focus-visible { outline: 3px solid var(--orange); outline-offset: 6px; }
.orbit-core::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--orange); border-radius: 50%; opacity: 0; pointer-events: none; }
.hero-visual.is-questioning .orbit-core::after { animation: corePulse .9s ease-out both; }
.hero-visual.is-questioning .orbit-outer { animation-duration: 4s; }
.hero-visual.is-questioning .orbit-middle { animation-duration: 3s; }
.question-spark { position: absolute; z-index: 3; left: 50%; top: 49%; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; opacity: 0; pointer-events: none; }
.spark-two, .spark-four { background: var(--blue); }
.hero-visual.is-questioning .spark-one { animation: sparkOne .85s ease-out both; }
.hero-visual.is-questioning .spark-two { animation: sparkTwo .9s ease-out both; }
.hero-visual.is-questioning .spark-three { animation: sparkThree .8s ease-out both; }
.hero-visual.is-questioning .spark-four { animation: sparkFour .95s ease-out both; }
.question-prompt {
  position: absolute;
  z-index: 5;
  left: 2%;
  top: 9%;
  width: min(255px, 64%);
  padding: 15px 18px 17px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  box-shadow: 10px 13px 0 #00000016;
  opacity: 0;
  translate: 0 15px;
  scale: .95;
  pointer-events: none;
  transition: opacity .4s ease, translate .55s cubic-bezier(.2,.8,.2,1), scale .55s cubic-bezier(.2,.8,.2,1), background-color .45s ease;
}
.hero-visual.has-question .question-prompt { opacity: 1; translate: 0 0; scale: 1; }
.question-prompt-index { color: var(--orange); font: 10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .1em; }
.question-prompt-text { margin: 10px 0 0; color: var(--ink); font: 20px/1.34 Georgia,"Noto Serif SC Local",serif; }
.orbit-instruction { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; color: var(--muted); white-space: nowrap; font: 10px ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .09em; animation: hintBreathe 3.8s ease-in-out infinite; }
.hero-visual.has-question .orbit-instruction { opacity: .4; }

.reveal { opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity .95s ease, transform .95s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.shelf:nth-child(2).reveal { transition-delay: .12s; }
.closing > :nth-child(2).reveal { transition-delay: .12s; }
.closing > :nth-child(3).reveal { transition-delay: .24s; }

.main-nav a { position: relative; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .32s ease; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { transform: scaleX(1); }
.brand-mark { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark { transform: rotate(10deg) translateY(-4px); }
.brand-mark span { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark span:nth-child(1) { transform: translate(-3px, -4px); }
.brand:hover .brand-mark span:nth-child(3) { transform: translate(3px, 3px); }
.text-link span[aria-hidden="true"], .header-index span[aria-hidden="true"], .featured-button .button-arrow { display: inline-block; transition: transform .3s ease; }
.text-link:hover span[aria-hidden="true"], .header-index:hover span[aria-hidden="true"], .featured-button:hover .button-arrow { transform: translate(4px, -4px); }
.featured-button { position: relative; overflow: hidden; }
.featured-button::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, #ffffff65 50%, transparent 75%); translate: -150% 0; transition: translate .7s ease; pointer-events: none; }
.featured-button:hover::before { translate: 150% 0; }
.featured-art .chip { transform: rotate(-29deg) skew(12deg,7deg) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .22s ease, filter .5s ease; }
.motion-ready .chip-front { animation: chipFloat 6s ease-in-out infinite; }
.motion-ready .chip-middle { animation: chipFloat 6s -1.5s ease-in-out infinite; }
.motion-ready .chip-back { animation: chipFloat 6s -3s ease-in-out infinite; }
.featured:hover .chip-front { filter: brightness(1.08); }
.featured-art::after { content: ""; position: absolute; left: 0; right: 0; top: 57%; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), transparent); transform: scaleX(.12); opacity: .45; animation: scanLine 7s ease-in-out infinite; }
.shelf { position: relative; }
.shelf::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.shelf:hover::after { transform: scaleX(1); }
.shelf h3, .shelf-icon { transition: transform .45s cubic-bezier(.2,.8,.2,1), color .3s; }
.shelf:hover h3 { transform: translateX(12px); color: var(--orange); }
.shelf:hover .shelf-icon { transform: rotate(45deg) scale(1.15); }
.closing-symbol { display: inline-block; transform-origin: center; animation: closingTurn 26s linear infinite; }
.closing > a { transition: color .3s, transform .3s; }
.closing > a:hover { color: var(--orange); transform: translateY(-4px); }

@keyframes riseIn { from { opacity: 0; translate: 0 25px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawCircle { to { stroke-dashoffset: 0; } }
@keyframes turnOuter { from { transform: translate(-50%,-50%) rotate(-20deg); } to { transform: translate(-50%,-50%) rotate(340deg); } }
@keyframes turnMiddle { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes turnInner { from { transform: translate(-50%,-50%) rotate(37deg); } to { transform: translate(-50%,-50%) rotate(397deg); } }
@keyframes questionFloat { 0%,100% { transform: translateY(-10px) rotate(0deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
@keyframes pointDrift { 0%,100% { translate: 0 0; } 50% { translate: 13px -18px; } }
@keyframes satelliteDrift { 0%,100% { translate: 0 0; } 50% { translate: 22px -27px; } }
@keyframes stampWobble { 0%,100% { transform: rotate(10deg); } 50% { transform: rotate(5deg) translateY(-5px); } }
@keyframes pulseDot { 0%,100% { box-shadow: 0 0 0 3px #e15c3724; } 50% { box-shadow: 0 0 0 9px #e15c3700; } }
@keyframes softSpin { to { transform: rotate(360deg); } }
@keyframes nudgeDown { 0%,100% { translate: 0 0; } 50% { translate: 0 5px; } }
@keyframes chipFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes scanLine { 0%,100% { transform: translateX(-20%) scaleX(.12); opacity: .25; } 50% { transform: translateX(20%) scaleX(.8); opacity: .75; } }
@keyframes closingTurn { to { rotate: 360deg; } }
@keyframes themeFlip { from { transform: rotate(-95deg) scale(.65); opacity: .3; } to { transform: rotate(0) scale(1); opacity: 1; } }
@keyframes corePulse { 0% { opacity: .8; scale: .72; } 100% { opacity: 0; scale: 1.52; } }
@keyframes sparkOne { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: -150px -92px; } }
@keyframes sparkTwo { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 137px -112px; } }
@keyframes sparkThree { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: -106px 142px; } }
@keyframes sparkFour { 0% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 160px 122px; } }
@keyframes hintBreathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 1050px) {
  .site-shell { padding-inline: clamp(20px, 4vw, 42px); }
  .site-header { gap: 15px; }
  .main-nav { gap: 16px; }
}

@media (max-width: 720px) {
  .site-shell { padding-inline: 22px; }
  .site-header { gap: 9px; }
  .language-switch { margin-left: auto; }
  .theme-toggle { min-height: 33px; padding: 5px 7px; gap: 4px; font-size: 9px; }
  .theme-toggle-icon { font-size: 17px; }
  .hero-visual .orbit, .hero-visual .orbit-core, .hero-visual .orbit-point, .hero-visual .visual-satellite { scale: 1; }
  .featured::before { display: none; }
  .question-prompt { top: 1%; left: 1%; width: 66%; padding: 11px 13px; }
  .question-prompt-text { font-size: 18px; }
  .orbit-instruction { bottom: 4%; font-size: 9px; }
}

@media (max-width: 380px) {
  .site-shell { padding-inline: 17px; }
  .theme-toggle-label { display: none; }
  .theme-toggle { width: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1; transform: none; }
  .visual-satellite, .featured-art::after, .closing-symbol { animation: none !important; }
  .featured::before { display: none; }
  .orbit-instruction { animation: none; }
}