:root {
  --ocean-950: #061b26;
  --ocean-900: #082733;
  --ocean-800: #0b3b49;
  --ocean-600: #176778;
  --sea-300: #91c8cc;
  --sunset-400: #f3a45b;
  --sunset-300: #f7c58f;
  --cream-100: #f7f1e6;
  --cream-200: #e8e1d4;
  --ink: #193036;
  --display: Georgia, "Times New Roman", "Noto Serif TC", serif;
  --body: "Avenir Next", Avenir, "Noto Sans TC", "PingFang TC", sans-serif;
  --page: min(1180px, calc(100vw - 3rem));
  color-scheme: dark;
  font-synthesis: none;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ocean-950);
  color: var(--cream-100);
  font-family: var(--body);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  translate: 0 -180%;
  border-radius: 999px;
  background: var(--cream-100);
  color: var(--ocean-950);
  transition: translate .2s ease;
}
.skip-link:focus { translate: 0; }

.page-noise {
  position: fixed;
  z-index: 30;
  inset: 0;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 1rem;
  left: 50vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: var(--page);
  min-height: 4rem;
  padding: .6rem .75rem .6rem 1rem;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 1.25rem;
  background: rgba(6,27,38,.72);
  box-shadow: 0 18px 60px rgba(0,0,0,.2);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}
.brand { display:inline-flex; align-items:center; gap:.7rem; width:max-content; font-size:.92rem; letter-spacing:.02em; }
.brand b { color: var(--sunset-300); font-weight: 650; }
.brand-mark {
  display: grid;
  width: 2.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: var(--sunset-300);
  font-family: var(--display);
}
.site-nav { display:flex; gap:2rem; align-items:center; font-size:.76rem; letter-spacing:.09em; }
.site-nav a { position:relative; padding:.7rem .15rem; color:rgba(247,241,230,.72); }
.site-nav a::after { content:""; position:absolute; left:.15rem; right:100%; bottom:.5rem; height:1px; background:var(--sunset-400); transition:right .25s ease; }
.site-nav a:hover { color:var(--cream-100); }
.site-nav a:hover::after { right:.15rem; }
.language-switch { justify-self:end; display:flex; align-items:center; gap:.25rem; color:rgba(255,255,255,.32); }
.language-switch button { min-width:2.75rem; min-height:2.75rem; border:0; border-radius:999px; background:transparent; cursor:pointer; color:rgba(247,241,230,.5); font-size:.75rem; letter-spacing:.08em; }
.language-switch button[aria-pressed="true"] { background:rgba(243,164,91,.14); color:var(--sunset-300); }
.menu-toggle { display:none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(22rem,.95fr);
  align-items: center;
  width: var(--page);
  min-height: 100svh;
  margin: 0 auto;
  padding: 8.5rem 0 6rem;
}
.hero::before { content:""; position:absolute; z-index:-2; width:62vw; height:62vw; right:-40vw; top:-12vw; border-radius:50%; background:rgba(15,77,91,.28); filter:blur(100px); }
.hero-copy { position:relative; z-index:2; max-width:45rem; }
.eyebrow { margin:0 0 1.2rem; color:var(--sea-300); font-size:.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; }
.hero h1 { max-width:12ch; margin:0; font-family:var(--display); font-size:clamp(3.8rem,7.6vw,7.2rem); font-weight:400; line-height:.99; letter-spacing:-.055em; text-wrap:balance; }
.hero h1::first-letter { color:var(--sunset-300); }
.hero-lead { max-width:31rem; margin:2rem 0 0; color:rgba(247,241,230,.68); font-size:clamp(1rem,1.4vw,1.2rem); letter-spacing:.03em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:3.3rem; padding:.75rem 1.45rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.08em; transition:transform .25s ease,background .25s ease,box-shadow .25s ease; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:var(--sunset-400); box-shadow:0 12px 35px rgba(243,164,91,.2); color:var(--ocean-950); }
.button-primary:hover { background:var(--sunset-300); box-shadow:0 16px 42px rgba(243,164,91,.32); }
.button-quiet { border:1px solid rgba(255,255,255,.13); color:rgba(247,241,230,.72); }

.hero-art { position:relative; min-height:35rem; }
.hero-art img { position:absolute; inset:0; width:100%; height:100%; animation:orbit-drift 14s ease-in-out infinite alternate; }
.sun-core { position:absolute; top:50%; left:50%; width:14rem; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffd5a6,var(--sunset-400) 45%,#b35d35 100%); box-shadow:0 0 4rem rgba(243,164,91,.25),0 0 10rem rgba(243,164,91,.16); transform:translate(-50%,-50%); }
.sun-core::after { content:""; position:absolute; inset:18%; border:1px solid rgba(255,255,255,.22); border-radius:50%; }
.signal { position:absolute; display:grid; width:2.65rem; aspect-ratio:1; place-items:center; border:1px solid rgba(145,200,204,.4); border-radius:50%; background:rgba(6,27,38,.75); color:var(--sea-300); font-size:.58rem; letter-spacing:.08em; }
.signal-one { top:24%; left:8%; }
.signal-two { right:7%; bottom:26%; color:var(--sunset-300); }
.hero-art > p { position:absolute; right:4%; bottom:10%; margin:0; color:rgba(247,241,230,.38); font-size:.58rem; line-height:1.6; letter-spacing:.18em; }
.scroll-cue { position:absolute; left:0; bottom:2rem; display:flex; align-items:center; gap:.8rem; color:rgba(247,241,230,.4); font-size:.65rem; letter-spacing:.18em; }
.scroll-cue span { display:block; width:3rem; height:1px; background:linear-gradient(90deg,var(--sunset-400),transparent); }

.section { position:relative; width:var(--page); margin:0 auto; padding:9rem 0; }
.section-index { position:absolute; top:9rem; right:0; color:rgba(145,200,204,.24); font-family:var(--display); font-size:4rem; line-height:1; }
.section-heading { max-width:40rem; }
.section h2 { margin:0; font-family:var(--display); font-size:clamp(2.7rem,5vw,5.2rem); font-weight:400; line-height:1.05; letter-spacing:-.045em; text-wrap:balance; }
.section h2[data-i18n] { white-space: pre-line; }
/* 內文也逐句斷行：字典字串在句號後帶 \n，HTML fallback 用 <br>。 */
.about-story > p[data-i18n], .project-copy > p[data-i18n] { white-space: pre-line; }

/* 兩行標題：錯位 + 雙色，呼應 Word/Adventure 的兩段式處理，避免整齊堆疊的呆版。
   拆成兩個 span 是必要的——applyLanguage 以 textContent 寫入，標籤放在同一節點內會被清掉。 */
:root {
  /* 句尾裝飾：切換 --ornament 就能換圖案，設成 none 即恢復純文字。
     用 mask 而非 emoji，才能吃品牌色、尺寸綁 em、跨平台長相一致。 */
  --ornament-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.2' r='4.5'/%3E%3Ccircle cx='17.8' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='17.8' r='4.5'/%3E%3Ccircle cx='6.2' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3C/svg%3E");
  --ornament-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3l-1.45-1.32C5.4 14.24 2 11.16 2 7.5 2 4.42 4.42 2 7.5 2c1.74 0 3.41.81 4.5 2.09C13.09 2.81 14.76 2 16.5 2 19.58 2 22 4.42 22 7.5c0 3.66-3.4 6.74-8.55 11.49L12 20.3z'/%3E%3C/svg%3E");
  --ornament: var(--ornament-heart);  /* 換成 var(--ornament-flower) 即為小花 */
  --ornament-size: .34em;
  --ornament-color: var(--sunset-400);
  --ornament-opacity: .8;
}
.ornament::after {
  content: "";
  display: inline-block;
  width: var(--ornament-size);
  height: var(--ornament-size);
  margin-left: .26em;
  vertical-align: baseline;
  background: var(--ornament-color);
  opacity: var(--ornament-opacity);
  -webkit-mask: var(--ornament) center/contain no-repeat;
  mask: var(--ornament) center/contain no-repeat;
}
/* 內文級的裝飾略大一點，否則在小字級下會糊成一點。 */
.project-tagline.ornament::after { --ornament-size: .4em; }

h2.split-title { display:grid; gap:.06em; font-size:clamp(2.4rem,4.2vw,4.4rem); }  /* 比其他區段標題小一階：左欄要同時容下字與縮排 */
.split-title > span { display:block; }
.split-title > span:last-child { position:relative; margin-left:1.7ch; color:var(--sunset-300); }
.split-title > span:last-child::before {
  content:""; position:absolute; left:-1.45ch; top:.56em;
  width:1ch; height:2px; border-radius:2px; background:var(--sunset-400); opacity:.7;
}
/* 標題跟著故事一起捲，順便把左欄那片空白用起來。 */
.about-section .section-heading { position:sticky; top:9rem; align-self:start; }

.about-section { display:grid; grid-template-columns:minmax(18rem,.8fr) minmax(20rem,1.2fr); gap:clamp(2rem,3vw,4rem); }  /* 欄距只要再寬一點，右欄長句就會被迫折行 */
.about-section::before { content:""; position:absolute; z-index:-1; inset:4rem -20vw 3rem; background:linear-gradient(100deg,rgba(15,71,83,.18),transparent 68%); }
.about-story { padding-top:3rem; }
.about-story > p { max-width:43rem; color:rgba(247,241,230,.62); }
.about-story .story-lead { color:var(--cream-100); font-family:var(--display); font-size:1.55rem; line-height:1.45; }
.about-values { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem; }
.about-values span { padding:.55rem .95rem; border:1px solid rgba(145,200,204,.2); border-radius:999px; color:var(--sea-300); font-size:.72rem; letter-spacing:.08em; }

.fields-section .section-heading > p:last-child { max-width:37rem; color:rgba(247,241,230,.56); }
.field-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:4rem; }
.field-card { position:relative; min-height:28rem; padding:2rem; overflow:hidden; border:1px solid rgba(255,255,255,.1); border-radius:1.6rem; background:linear-gradient(145deg,rgba(18,69,80,.52),rgba(8,39,51,.72)); transition:transform .35s ease,border-color .35s ease,background .35s ease; }
.field-card::after { content:""; position:absolute; width:10rem; height:10rem; right:-6rem; bottom:-6rem; border:1px solid rgba(243,164,91,.25); border-radius:50%; box-shadow:0 0 4rem rgba(243,164,91,.07); transition:transform .4s ease; }
.field-card:hover { transform:translateY(-8px); border-color:rgba(243,164,91,.35); background:linear-gradient(145deg,rgba(22,85,96,.62),rgba(8,39,51,.78)); }
.field-card:hover::after { transform:scale(1.35); }
.field-number { color:rgba(247,241,230,.28); font-size:.65rem; letter-spacing:.18em; }
.field-icon { display:grid; width:4rem; aspect-ratio:1; margin:4rem 0 3rem; place-items:center; border:1px solid rgba(145,200,204,.22); border-radius:50%; color:var(--sunset-300); font-size:1.5rem; }
.field-icon-orbit { color:var(--sea-300); }
.field-card h3 { max-width:11ch; margin:0; font-family:var(--display); font-size:1.75rem; font-weight:400; line-height:1.2; }
.field-card p { color:rgba(247,241,230,.62); font-size:.95rem; }
.field-code { position:absolute; left:2rem; bottom:1.7rem; color:rgba(145,200,204,.42); font-size:.55rem; letter-spacing:.16em; }

.project-section { width:min(1280px,calc(100vw - 2rem)); }
.project-card { position:relative; display:grid; grid-template-columns:1.18fr .82fr; min-height:43rem; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:2rem; background:linear-gradient(125deg,#f3ead9 0 59%,#0a3542 59% 100%); color:var(--ink); box-shadow:0 34px 80px rgba(0,0,0,.2); }
.project-copy { padding:clamp(2rem,3.5vw,4rem); }  /* 內距再大，說明的長句就塞不進一行 */
.project-status { display:flex; align-items:center; gap:.6rem; margin:0 0 3rem; color:#986037; font-size:.67rem; font-weight:750; letter-spacing:.17em; text-transform:uppercase; }
.project-status > span:first-child { width:.55rem; aspect-ratio:1; border-radius:50%; background:var(--sunset-400); box-shadow:0 0 0 .35rem rgba(243,164,91,.16); animation:pulse 2s ease-in-out infinite; }
.project-card .eyebrow { color:#567d80; }
.project-card h2 { font-size:clamp(3.5rem,7vw,7rem); color:#123740; }
.project-card h2 span { color:#cf7541; }
.project-tagline { margin:1.5rem 0 .7rem; font-family:var(--display); font-size:1.6rem; }
.project-copy > p:not(.project-status,.eyebrow,.project-tagline) { max-width:46rem; color:#526a6d; }
.project-features { display:grid; gap:.7rem; margin:2.3rem 0 0; padding:0; list-style:none; }
.project-features li { display:flex; gap:1rem; align-items:center; padding:.6rem 0; border-top:1px solid rgba(25,48,54,.12); }
.project-features span { color:#c56e3e; font-size:.65rem; }
.project-features b { font-size:.95rem; font-weight:600; }
/* 上線狀態：由 sunset「施工中」轉為 ocean-600 的沉穩藍綠。 */
.project-status.is-live { color:#12616f; }
.project-status.is-live > span:first-child { background:var(--ocean-600); box-shadow:0 0 0 .35rem rgba(23,103,120,.16); }
.project-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem; margin-top:2.4rem; }
.project-actions .button-primary { color:var(--ocean-950); }
.project-note { margin:0; max-width:29rem; color:#63797c; font-size:.85rem; line-height:1.55; }
.project-world { position:relative; display:grid; place-items:center; overflow:hidden; color:var(--cream-100); }
.project-world::before,.project-world::after { content:""; position:absolute; border:1px solid rgba(145,200,204,.2); border-radius:50%; }
.project-world::before { width:34rem; height:15rem; transform:rotate(-22deg); }
.project-world::after { width:23rem; aspect-ratio:1; }
.planet { position:relative; z-index:2; width:min(18rem,60%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 28%,#ffd7ad,#f3a45b 42%,#a95836 100%); box-shadow:0 0 5rem rgba(243,164,91,.25); }
.planet-letter { position:absolute; display:grid; width:4rem; aspect-ratio:1; place-items:center; border-radius:1rem; background:var(--cream-100); color:var(--ocean-900); font-family:var(--display); font-size:2rem; box-shadow:0 14px 35px rgba(6,27,38,.25); transform:rotate(-9deg); }
.letter-w { top:20%; left:-8%; }
.letter-a { right:-5%; bottom:22%; transform:rotate(8deg); }
.planet-star { position:absolute; color:#fff5dc; font-size:1.5rem; }
.star-one { top:13%; right:18%; }.star-two { left:18%; bottom:18%; font-size:1rem; }
.progress-stars { position:absolute; z-index:3; bottom:18%; display:flex; gap:.5rem; color:var(--sunset-300); }
.progress-stars span:nth-child(2) { transform:translateY(-.35rem); }
.project-world small { position:absolute; right:2.5rem; bottom:2rem; color:rgba(247,241,230,.45); font-size:.56rem; letter-spacing:.18em; }

.site-footer { width:var(--page); margin:0 auto; padding:8rem 0 2.5rem; }
.site-footer > p { max-width:min(100%,72rem); margin:0 0 5rem; font-family:var(--display); font-size:clamp(2rem,4vw,3.9rem); line-height:1.12; color:rgba(247,241,230,.82); }
.site-footer > div { display:flex; justify-content:space-between; padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.1); color:rgba(247,241,230,.38); font-size:.62rem; letter-spacing:.15em; }

.reveal { opacity:0; transform:translateY(1.8rem); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity:1; transform:none; }
.hero .reveal:nth-child(2) { transition-delay:.1s; }.hero .reveal:nth-child(3) { transition-delay:.2s; }.hero .reveal:nth-child(4) { transition-delay:.3s; }

:focus-visible { outline:3px solid var(--sunset-300); outline-offset:4px; }
@keyframes orbit-drift { to { transform:rotate(7deg) scale(1.035); } }
@keyframes pulse { 50% { box-shadow:0 0 0 .65rem rgba(243,164,91,0); } }

@media (max-width: 64rem) {
  .site-header { grid-template-columns:1fr auto auto; }
  .site-nav { position:fixed; top:5.3rem; left:1.5rem; right:1.5rem; display:none; flex-direction:column; align-items:stretch; gap:.2rem; padding:1rem; border:1px solid rgba(255,255,255,.12); border-radius:1rem; background:#082733; box-shadow:0 22px 50px rgba(0,0,0,.32); }
  body.menu-open .site-nav { display:flex; }
  .site-nav a { min-height:3rem; padding:.7rem 1rem; border-radius:.65rem; }
  .site-nav a:hover { background:rgba(255,255,255,.05); }
  .menu-toggle { justify-self:end; display:grid; width:2.75rem; height:2.75rem; padding:.8rem; place-content:center; gap:.32rem; border:0; border-radius:50%; background:rgba(255,255,255,.06); cursor:pointer; }
  .menu-toggle > span:not(.sr-only) { display:block; width:1.1rem; height:1px; background:currentColor; transition:transform .2s ease; }
  body.menu-open .menu-toggle > span:nth-last-child(2) { transform:translateY(.165rem) rotate(45deg); }
  body.menu-open .menu-toggle > span:last-child { transform:translateY(-.165rem) rotate(-45deg); }
  .language-switch { margin-left:.25rem; }
  .hero { grid-template-columns:1fr .8fr; }
  .field-grid { grid-template-columns:1fr 1fr; }.field-card:last-child { grid-column:1/-1; min-height:20rem; }
  .project-card { grid-template-columns:1fr; background:linear-gradient(180deg,#f3ead9 0 59%,#0a3542 59% 100%); }
  .project-world { min-height:30rem; }
}

@media (max-width: 48rem) {
  :root { --page: min(calc(100vw - 2rem), 38rem); }
  .page-noise { right:auto; width:100vw; }
  .site-header { top:.65rem; min-height:3.6rem; border-radius:1rem; }
  .brand { font-size:.82rem; }.brand-mark { width:2rem; }
  .language-switch button { min-width:44px; min-height:44px; }  /* 44px 觸控目標，不可再縮 */
  .hero { display:block; min-height:auto; padding:9.5rem 0 7rem; }
  .hero h1 { font-size:clamp(3.5rem,18vw,5.4rem); }
  .hero-art { min-width:0; min-height:27rem; margin:1.5rem 0 -3rem; opacity:.84; }
  .sun-core { width:10rem; }.signal-one { left:14%; }.signal-two { right:13%; }
  .scroll-cue { display:none; }
  .section { padding:6.5rem 0; }.section-index { top:6.5rem; font-size:2.7rem; }
  .about-section { display:block; }.about-section .section-heading { position:static; }.split-title > span:last-child { margin-left:1.2ch; }.about-story { padding-top:2rem; }.about-story .story-lead { font-size:1.3rem; }
  .field-grid { grid-template-columns:1fr; margin-top:2.5rem; }.field-card,.field-card:last-child { grid-column:auto; min-height:23rem; }.field-icon { margin:3rem 0 2rem; }
  .project-section { width:calc(100vw - 1rem); }.project-card { min-width:0; border-radius:1.4rem; background:linear-gradient(180deg,#f3ead9 0 64%,#0a3542 64% 100%); }.project-copy { min-width:0; padding:3rem 1.5rem 4rem; }.project-card h2 { font-size:clamp(2.7rem,12vw,3.65rem); }.project-world { min-width:0; min-height:25rem; }.planet { width:11rem; }.planet-letter { width:3.2rem; }.project-world small { right:1.5rem; }
  .site-footer { padding-top:5rem; }.site-footer > div { align-items:flex-start; flex-direction:column; gap:.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}