/* =========================================================
   Il Sun Moon — Card
   Bilingual (KO/EN), light & dark, atmospheric
   Fonts: Fraunces, Geist, Geist Mono, Hahmlet, Wanted Sans
   ========================================================= */

:root {
  --bg: #fafaf9;
  --ink: #0c0a09;
  --ink-2: #57534e;
  --ink-3: #a8a29e;
  --rule: rgba(12, 10, 9, 0.08);
  --rule-soft: rgba(12, 10, 9, 0.04);
  --halo: rgba(255, 195, 130, 0.30);
  --topbar-bg: rgba(250, 250, 249, 0.78);

  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", monospace;
  --font-ko-display: "Hahmlet", "Noto Serif KR", serif;
  --font-ko: "Wanted Sans Variable", "Wanted Sans", -apple-system, system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --ink: #fafaf9;
    --ink-2: #d6d3d1;
    --ink-3: #78716c;
    --rule: rgba(250, 250, 249, 0.08);
    --rule-soft: rgba(250, 250, 249, 0.04);
    --halo: rgba(170, 180, 230, 0.20);
    --topbar-bg: rgba(10, 10, 10, 0.78);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

a, button {
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---------- Atmospheric layers ---------- */
.halo-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.halo {
  position: absolute;
  width: 75vmax;
  height: 75vmax;
  border-radius: 50%;
  background: radial-gradient(circle, var(--halo) 0%, transparent 65%);
  filter: blur(50px);
  animation: drift 28s ease-in-out infinite;
  top: -15vmax;
  left: -15vmax;
}

@keyframes drift {
  0%   { transform: translate(0%, 0%); }
  25%  { transform: translate(45vw, -5vh); }
  50%  { transform: translate(60vw, 40vh); }
  75%  { transform: translate(-10vw, 45vh); }
  100% { transform: translate(0%, 0%); }
}

/* Scroll-driven fade on the halo, where supported.
   The wrapper carries an opacity animation tied to the page scroll
   timeline so the time-based drift on the inner halo can keep running
   unaffected. On browsers without scroll timelines the halo simply
   stays at full opacity. */
@supports (animation-timeline: scroll()) {
  .halo-wrap {
    animation: halo-fade linear forwards;
    animation-timeline: scroll(root);
  }
  @keyframes halo-fade {
    0%   { opacity: 1; }
    100% { opacity: 0.55; }
  }
}

.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: multiply;
  animation: grain 0.6s steps(6) infinite;
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  .grain { mix-blend-mode: screen; opacity: 0.05; }
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3%, -5%); }
  20% { transform: translate(-8%, 3%); }
  30% { transform: translate(4%, -12%); }
  40% { transform: translate(-3%, 12%); }
  50% { transform: translate(-8%, 5%); }
  60% { transform: translate(8%, 0); }
  70% { transform: translate(0, 8%); }
  80% { transform: translate(2%, 18%); }
  90% { transform: translate(-5%, 5%); }
}

/* ---------- Topbar ---------- */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-transform: uppercase;
  z-index: 10;
}

.topbar-meta {
  display: flex;
  gap: 8px;
  align-items: center;
}

.topbar-time { color: var(--ink); }
.topbar-sep { color: var(--ink-3); opacity: 0.5; }

/* Language toggle */
.lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: var(--ink-3);
  letter-spacing: inherit;
  text-transform: inherit;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.lang-opt {
  color: var(--ink-3);
  transition: color 200ms ease;
}

.lang-divider {
  color: var(--ink-3);
  opacity: 0.4;
  margin: 0 5px;
}

html[lang="ko"] .lang-opt[data-set-lang="ko"],
html[lang="en"] .lang-opt[data-set-lang="en"] {
  color: var(--ink);
}

.lang-toggle:hover .lang-opt { color: var(--ink-2); }
html[lang="ko"] .lang-toggle:hover .lang-opt[data-set-lang="ko"],
html[lang="en"] .lang-toggle:hover .lang-opt[data-set-lang="en"] {
  color: var(--ink);
}

/* ---------- Main card ---------- */
.card {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 8.5rem 2rem 5rem;
  animation: fadeIn 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Hero ---------- */
.name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(56px, 10.5vw, 96px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  color: var(--ink);
  margin: 0 0 8px 0;
}

.name-en { display: block; }

.name-ko {
  display: block;
  font-family: var(--font-ko-display);
  font-style: normal;
  font-size: clamp(26px, 4.8vw, 38px);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.role {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 26px 0 0 0;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.role span[data-lang] { display: block; }

html[lang="ko"] .role span[data-lang="ko"] {
  font-family: var(--font-ko);
  letter-spacing: -0.02em;
}

/* ---------- Rules ---------- */
.rule {
  border: none;
  height: 1px;
  background: var(--rule);
  margin: 3rem 0;
}

/* ---------- Bio ---------- */
/* Two language paragraphs share the same grid cell so the bio area
   reserves height for whichever language is taller, and the page
   does not jump when toggling. */
.bio {
  display: grid;
  max-width: 38rem;
}

.bio p[data-lang] {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.bio p[data-lang="en"] {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.005em;
}

.bio p[data-lang="en"] em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 24;
}

.bio p[data-lang="ko"] {
  font-family: var(--font-ko);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.015em;
}

.bio p[data-lang="ko"] em {
  font-style: normal;
  font-weight: 500;
}

/* ---------- Links table ---------- */
.links ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

.links li {
  display: grid;
  grid-template-columns: 32px 110px 22px 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.links li:last-child { border-bottom: none; }
.links li:hover { padding-left: 4px; }

.num,
.label,
.arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}

.label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.arrow { font-size: 14px; }

.links a {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: color 200ms ease;
}

.links a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.links a:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 4px;
  border-radius: 1px;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .topbar {
    padding: 14px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
    font-size: 11px;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
  .topbar-id { display: none; }
  .topbar-meta {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .lang-toggle {
    padding: 2px 0;
  }
  .card {
    padding: 6.5rem 1.5rem 4rem;
    padding-bottom: max(4rem, env(safe-area-inset-bottom));
  }
  .name { font-size: clamp(46px, 13vw, 64px); }
  .name-ko { font-size: clamp(22px, 6.5vw, 30px); margin-top: 10px; }
  .role { font-size: 14px; margin-top: 20px; }
  .bio p[data-lang="en"] { font-size: 16px; }
  .bio p[data-lang="ko"] { font-size: 16px; }
  .links li {
    grid-template-columns: 26px 86px 18px 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .links a { font-size: 15px; }
  .num, .label, .arrow { font-size: 11px; }
  .rule { margin: 2.5rem 0; }
  .halo { filter: blur(35px); }
}

/* Smallest screens, e.g. iPhone SE width (~375px and below) */
@media (max-width: 380px) {
  .topbar { font-size: 10px; }
  .links li { grid-template-columns: 22px 70px 16px 1fr; gap: 10px; }
  .links a { font-size: 14.5px; }
  .name { font-size: clamp(40px, 12vw, 56px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .halo, .halo-wrap, .grain, .card { animation: none !important; }
  .links li { transition: none; }
}

/* ---------- Print ---------- */
@media print {
  .halo, .halo-wrap, .grain, .topbar { display: none; }
  body { background: white; color: black; }
  .card { padding: 2rem; }
  .links a { text-decoration: none; color: black; }
  .links a::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666; }
}

/* ---------- Bilingual visibility ----------
   Default: hide the opposite-language element entirely.
   Bio: keep both paragraphs in the DOM and only hide visibility, so the
   bio area always reserves space for the longer language. The rest of
   the page does not jump when KO/EN is toggled. */

html[lang="en"] [data-lang="ko"],
html[lang="ko"] [data-lang="en"] {
  display: none;
}

html[lang="en"] .bio p[data-lang="ko"],
html[lang="ko"] .bio p[data-lang="en"] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}