/* ============================================================
   Djubelang · 詹陳嘉蔚 — Shared foundation
   Warm-dark · cream · Paiwan red/orange · cultural colour pops
   Extends the Lina "Dimmed Coffee Shop" palette toward the
   earth + textile tones of the 2025 deck.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Serif+TC:wght@400;500;600;700;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* warm dark neutrals — Lina "Dimmed Coffee Shop" scale, no pure black */
  --bg:        #0E0D0B;      /* late-night-oolong — page */
  --bg-2:      #16140F;      /* pot-base — deepest */
  --surface:   #1C1A14;      /* smoked-wood — content surface */
  --surface-2: #25221A;      /* warm-tabletop — raised */
  --surface-3: #2f2b20;      /* hover / chip */

  /* ivory family — never pure white (cup-rim-milk) */
  --cream:     #F4EFE2;
  --cream-2:   rgba(244,239,226,0.66);
  --cream-3:   rgba(244,239,226,0.46);
  --line:      rgba(255,245,220,0.07);
  --line-2:    rgba(255,245,220,0.14);

  /* primary accent — brand green #00bf63 (was lamp-orange) + Paiwan crimson pop */
  --red:       #C0392B;      /* paiwan crimson — cultural pop only */
  --red-deep:  #8E2B22;
  --orange:    #00a857;      /* deeper green step (selection, warm step) */
  --orange-2:  #00bf63;      /* primary accent — brand green */
  --orange-soft: rgba(0,191,99,0.14);

  /* cultural colour pops — used sparingly, from traditional dress + textiles */
  --teal:      #2FA89B;
  --gold:      #E9B949;
  --magenta:   #C2477E;

  --maxw: 1200px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0.32, 1);

  --font-sans:  "Noto Sans TC", "Space Grotesk", -apple-system, "PingFang TC", sans-serif;
  --font-serif: "Noto Serif TC", "Songti TC", serif;
  --font-latin: "Space Grotesk", "Noto Sans TC", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--orange); color: #1a120e; }

/* ---- typesetting optimisation ---- */
h1, h2, h3, h4, .sec-title, blockquote, .lede, .pull, .m, .big, .h2 {
  text-wrap: balance;
}
p { text-wrap: pretty; }
/* CJK: avoid awkward breaks, keep punctuation tidy */
:lang(zh-TW), [lang="zh-TW"] { line-break: strict; word-break: normal; overflow-wrap: anywhere; }
/* hanging-friendly measure helper */
.measure { max-width: 42ch; }

/* mono label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange-2);
}
.num { font-family: var(--font-latin); font-variant-numeric: tabular-nums; }

/* ---- scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-d="1"] { transition-delay: 0.08s; }
[data-reveal-d="2"] { transition-delay: 0.16s; }
[data-reveal-d="3"] { transition-delay: 0.24s; }
[data-reveal-d="4"] { transition-delay: 0.32s; }
[data-reveal-d="5"] { transition-delay: 0.40s; }

/* film grain overlay for warm-photo feel */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
}