/* =========================================================
   Align Studio — Design Tokens
   Scheme B · Night Mode · 與 logo 同調
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=Manrope:wght@200;300;400;500;600&family=Noto+Serif+TC:wght@200;300;400;500&family=Noto+Sans+TC:wght@200;300;400;500&display=swap');

:root {
  /* ---------- COLOR — SCHEME B ---------- */
  --charcoal:    #3D3F44;   /* primary bg */
  --charcoal-2:  #34363B;   /* slightly deeper */
  --deeper:      #2C2E33;   /* footer / contrast sections */
  --deepest:     #1F2125;   /* extreme contrast, used sparingly */

  --cream:       #EDE3CF;   /* body text + headlines */
  --cream-soft:  rgba(237, 227, 207, 0.78);
  --cream-mute:  rgba(237, 227, 207, 0.55);
  --cream-dim:   rgba(237, 227, 207, 0.32);
  --cream-faint: rgba(237, 227, 207, 0.14);
  --cream-line:  rgba(237, 227, 207, 0.18);

  --bronze:      #A89880;   /* CTA / links / hover */
  --bronze-warm: #BFAB8E;
  --bronze-deep: #8C7C66;

  --shadow:      #6B655A;   /* captions / meta */

  /* Functional aliases */
  --bg:          var(--charcoal);
  --bg-2:        var(--charcoal-2);
  --bg-deep:     var(--deeper);
  --fg:          var(--cream);
  --fg-soft:     var(--cream-soft);
  --fg-mute:     var(--cream-mute);
  --fg-dim:      var(--cream-dim);
  --line:        var(--cream-line);
  --line-strong: rgba(237, 227, 207, 0.32);
  --accent:      var(--bronze);

  /* ---------- TYPE ---------- */
  --font-serif: 'Fraunces', 'Noto Serif TC', Georgia, serif;
  --font-sans:  'Manrope', 'Noto Sans TC', system-ui, -apple-system, sans-serif;
  --font-cjk:   'Noto Serif TC', 'Fraunces', serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- SCALE ---------- */
  --fs-xxs:     10px;
  --fs-xs:      11px;
  --fs-sm:      12px;
  --fs-base:    14px;
  --fs-md:      15px;
  --fs-lg:      17px;
  --fs-xl:      20px;
  --fs-2xl:     28px;
  --fs-3xl:     40px;
  --fs-4xl:     clamp(48px, 6vw, 84px);
  --fs-5xl:     clamp(64px, 9vw, 132px);

  /* ---------- LAYOUT ---------- */
  --max-w:      1320px;
  --gutter:     clamp(24px, 4vw, 60px);
  --row-gap:    clamp(80px, 12vh, 160px);

  /* ---------- MOTION ---------- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   140ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;
}

/* ========== RESET / BASE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
a:hover { color: var(--bronze-warm); }

::selection { background: var(--bronze); color: var(--charcoal); }

/* ========== TYPE PRIMITIVES ========== */
.serif { font-family: var(--font-serif); }
.italic { font-style: italic; }
.cjk { font-family: var(--font-cjk); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xxs);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--cream-mute);
  font-weight: 400;
}
.eyebrow .num {
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--bronze);
  margin-right: 14px;
}

.headline {
  font-family: var(--font-serif);
  font-weight: 200;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-wrap: pretty;
}
.headline em { font-style: italic; font-weight: 300; color: var(--bronze-warm); }

.body { color: var(--cream-soft); font-weight: 300; line-height: 1.75; }
.body-cjk { font-family: var(--font-cjk); font-weight: 300; line-height: 1.85; letter-spacing: 0.04em; }

/* ========== UTIL ========== */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.full {
  padding: 0 var(--gutter);
}
.hairline { border: 0; border-top: 0.5px solid var(--line); height: 0; }
.hairline-strong { border-top-color: var(--line-strong); }

/* ========== BUTTONS ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 18px 28px;
  border: 0.5px solid var(--cream);
  color: var(--cream);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--cream); color: var(--charcoal); }
.btn--primary { background: var(--cream); color: var(--charcoal); }
.btn--primary:hover { background: var(--bronze-warm); border-color: var(--bronze-warm); color: var(--charcoal); }
.btn--ghost { border-color: var(--line-strong); color: var(--cream-soft); }
.btn--ghost:hover { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn--sm { padding: 12px 20px; font-size: 10px; letter-spacing: 0.28em; }
.btn .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ========== LANG VISIBILITY ========== */
[data-lang="zh"] .lang-en { display: none; }
[data-lang="en"] .lang-zh { display: none; }