:root{
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --ink-950:#0a0b0d;
  --ink-900:#101215;
  --ink-800:#16181c;
  --ink-700:#1e2126;
  --ink-600:#2b2f36;
  --ink-line: rgba(245,243,238,0.10);
  --ink-line-strong: rgba(245,243,238,0.18);
  --paper:#f5f2ea;
  --paper-dim:#b7b2a6;

  --cream-100:#fbf7ef;
  --cream-200:#f7f1e4;
  --cream-300:#efe4d0;
  --cream-line: rgba(43,32,20,0.10);
  --cream-line-strong: rgba(43,32,20,0.18);
  --espresso:#2b2015;
  --espresso-dim:#6b5f4f;

  --gold:#c6a35d;
  --gold-soft:#d9bd85;
  --clay:#b5654a;
  --clay-soft:#c98066;
}

html[data-lang="ko"]{
  --font-display:'Noto Serif KR', Batang, '바탕', serif;
  --font-body:'Pretendard', 'Malgun Gothic', '맑은 고딕', 'Inter', -apple-system, sans-serif;
}
html[data-lang="ja"]{
  --font-display:'Noto Serif KR', 'Hiragino Mincho ProN', serif;
  --font-body:'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', 'Inter', -apple-system, sans-serif;
}
html[data-lang="zh"]{
  --font-display:'Noto Serif KR', 'PingFang SC', serif;
  --font-body:'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', 'Inter', -apple-system, sans-serif;
}

html{scroll-behavior:smooth;}
body{font-family:var(--font-body);}

h1, h2, h3{ font-weight:500; }
[lang="ko"], [lang="ja"], [lang="zh"]{ word-break:keep-all; overflow-wrap:break-word; }
.keep-all{ word-break:keep-all; overflow-wrap:break-word; }

/* Tailwind's per-size utilities (text-5xl, text-6xl, etc.) ship their own fixed
   line-height that can override .leading-normal at md/lg breakpoints, causing
   multi-line display headings to visually overlap. Force generous spacing;
   Korean serif (Noto Serif KR) needs extra room beyond Latin serif metrics. */
h1, h2, h3, .leading-normal{ line-height:1.45 !important; }
html[data-lang="ko"] h1, html[data-lang="ko"] h2, html[data-lang="ko"] h3, html[data-lang="ko"] .leading-normal{ line-height:1.6 !important; }

.brand-mark{ height:2rem; width:auto; display:block; }
@media (min-width:768px){ .brand-mark{ height:2.25rem; } }

/* Language toggle: English shows by default (no data-lang set yet); once JS
   sets html[data-lang="xx"], only that language's spans are shown. Scales to
   any number of languages via the [lang] attribute selector. */
.lang, .lang-i, .lang-if{display:none;}
.lang[lang="en"]{display:block;}
.lang-i[lang="en"]{display:inline;}
.lang-if[lang="en"]{display:inline-flex;}

html[data-lang] .lang, html[data-lang] .lang-i, html[data-lang] .lang-if{display:none;}
html[data-lang="en"] .lang[lang="en"]{display:block;}
html[data-lang="en"] .lang-i[lang="en"]{display:inline;}
html[data-lang="en"] .lang-if[lang="en"]{display:inline-flex;}
html[data-lang="ko"] .lang[lang="ko"]{display:block;}
html[data-lang="ko"] .lang-i[lang="ko"]{display:inline;}
html[data-lang="ko"] .lang-if[lang="ko"]{display:inline-flex;}
html[data-lang="ja"] .lang[lang="ja"]{display:block;}
html[data-lang="ja"] .lang-i[lang="ja"]{display:inline;}
html[data-lang="ja"] .lang-if[lang="ja"]{display:inline-flex;}
html[data-lang="tr"] .lang[lang="tr"]{display:block;}
html[data-lang="tr"] .lang-i[lang="tr"]{display:inline;}
html[data-lang="tr"] .lang-if[lang="tr"]{display:inline-flex;}
html[data-lang="id"] .lang[lang="id"]{display:block;}
html[data-lang="id"] .lang-i[lang="id"]{display:inline;}
html[data-lang="id"] .lang-if[lang="id"]{display:inline-flex;}
html[data-lang="ms"] .lang[lang="ms"]{display:block;}
html[data-lang="ms"] .lang-i[lang="ms"]{display:inline;}
html[data-lang="ms"] .lang-if[lang="ms"]{display:inline-flex;}
html[data-lang="zh"] .lang[lang="zh"]{display:block;}
html[data-lang="zh"] .lang-i[lang="zh"]{display:inline;}
html[data-lang="zh"] .lang-if[lang="zh"]{display:inline-flex;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.reveal{opacity:0; transform:translateY(18px); transition:opacity 0.8s cubic-bezier(.16,1,.3,1), transform 0.8s cubic-bezier(.16,1,.3,1);}
.reveal.is-visible{opacity:1; transform:translateY(0);}

.grain{position:absolute; inset:0; pointer-events:none; opacity:0.5; mix-blend-mode:overlay;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.mesh-dark{
  background:
    radial-gradient(circle at 15% 20%, rgba(198,163,93,0.16), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(198,163,93,0.10), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,0.05), transparent 50%),
    var(--ink-950);
}
.mesh-cream{
  background:
    radial-gradient(circle at 85% 10%, rgba(181,101,74,0.14), transparent 42%),
    radial-gradient(circle at 10% 30%, rgba(198,163,93,0.14), transparent 45%),
    var(--cream-100);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.6rem;
  padding:0.95rem 1.9rem; font-size:0.95rem; letter-spacing:0.02em; font-weight:500;
  border-radius:2px; transition:all .25s cubic-bezier(.16,1,.3,1); cursor:pointer;
  min-height:44px;
}
.btn-gold{ background:var(--gold); color:var(--ink-950); }
.btn-gold:hover{ background:var(--gold-soft); transform:translateY(-1px); box-shadow:0 8px 24px rgba(198,163,93,0.25);}
.btn-outline-dark{ border:1px solid var(--ink-line-strong); color:var(--paper); }
.btn-outline-dark:hover{ border-color:var(--gold); color:var(--gold); }
.btn-clay{ background:var(--clay); color:var(--cream-100); }
.btn-clay:hover{ background:var(--clay-soft); transform:translateY(-1px); box-shadow:0 8px 24px rgba(181,101,74,0.25);}
.btn-outline-cream{ border:1px solid var(--cream-line-strong); color:var(--espresso); }
.btn-outline-cream:hover{ border-color:var(--clay); color:var(--clay); }

.chip{ border:1px solid var(--ink-line); padding:0.4rem 0.9rem; font-size:0.78rem; letter-spacing:0.06em; border-radius:2px; }

::selection{ background:var(--gold); color:var(--ink-950); }

.eyebrow{ font-family:var(--font-body); letter-spacing:0.22em; text-transform:uppercase; font-size:0.72rem; }

.num-serif{ font-family:var(--font-display); font-variant-numeric:lining-nums; }

.card-line{ border:1px solid var(--ink-line); transition:border-color .3s ease, background-color .3s ease; }
.card-line:hover{ border-color:var(--ink-line-strong); }
.card-line-cream{ border:1px solid var(--cream-line); transition:border-color .3s ease; }
.card-line-cream:hover{ border-color:var(--cream-line-strong); }

table.matrix th, table.matrix td{ border-color:var(--ink-line); }
table.matrix-cream th, table.matrix-cream td{ border-color:var(--cream-line); }

.marquee-track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.avatar-ring{ background:conic-gradient(from 180deg, var(--gold), transparent 30%, var(--gold) 70%, transparent 100%); padding:2px; border-radius:9999px; }

nav.scrolled{ backdrop-filter:blur(12px); }