/* =========================================
   IceTeaMacchiato — Front Page Styles
   ========================================= */

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

:root {
  --font-en: 'EB Garamond', Georgia, serif;
  --font-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-muted: #555555;
  --nav-padding: 1.75rem 3rem;
  /* Image fills 65 % of viewport, bounded between 820 px (MacBook Air) and 1400 px (2K+) */
  --slide-max-width: clamp(820px, 65vw, 1400px);
  --caption-size-en: 0.85rem;
  --caption-size-zh: 0.85rem;
  --fade-duration: 0.4s;
}

html {
  height: 100%;
  /* Fluid font scale: 18 px on MacBook Air/Pro, grows to 22 px at 2K.
     4K at DPR=2 renders the same CSS viewport as 1080p, so it stays sharp. */
  font-size: clamp(18px, 1.1vw, 22px);
}

body {
  min-height: 100%;
  overflow: hidden; /* prevent scroll caused by layout rounding */
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-en);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

/* ── Language visibility ─────────────────── */

/* In English mode: hide zh-only */
[data-lang="en"] .zh-only {
  display: none;
}

/* In Chinese mode: hide en-only */
[data-lang="zh"] .en-only {
  display: none;
}

/* Logo: zh name hidden by default; revealed in zh mode */
.logo-zh {
  display: none;
  font-family: var(--font-zh);
  font-weight: 300;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  margin-left: 0.6em;
  color: var(--color-text);
}

[data-lang="zh"] .logo-zh {
  display: inline;
}

/* Chinese mode: swap body font */
[data-lang="zh"] {
  font-family: var(--font-zh);
}

/* ── Navbar ──────────────────────────────── */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-padding);
}

.logo {
  display: flex;
  align-items: baseline;
}

.logo-en {
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  color: var(--color-text);
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--font-en);
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: 0.01em;
}

[data-lang="zh"] .nav-links a {
  font-family: var(--font-zh);
  font-size: 1rem;
}

.nav-links a:hover {
  opacity: 0.55;
}

.lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 300;
  font-size: 1.05rem;
  color: var(--color-text);
  letter-spacing: 0.01em;
  padding: 0;
  line-height: inherit;
}

.lang-toggle:hover {
  opacity: 0.55;
}

[data-lang="zh"] .lang-toggle {
  font-family: var(--font-en);
}

/* ── Main / Slideshow ────────────────────── */

.main {
  flex: 1;                    /* fill all space below navbar */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Extra bottom padding shifts the image slightly above true centre,
     matching the illustration proportions. */
  padding-bottom: 5rem;
}

/* Wrapper sizes to image content so caption edges track the image edges */
.slideshow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--slide-max-width);
  padding: 0 1rem;
  box-sizing: border-box;
}

.slide-img {
  display: block;
  /* Landscape: fills container width. Portrait / oversized: capped by max-height,
     image narrows and is centred by the flex parent. */
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: calc(100vh - 240px); /* navbar ~100px + caption ~40px + padding-bottom ~100px */
  cursor: pointer;
  user-select: none;
  /* Fade transition */
  opacity: 1;
  transition: opacity var(--fade-duration) ease;
}

.slide-img.fading {
  opacity: 0;
}

/* ── Caption ─────────────────────────────── */

.caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.6rem;
  /* width is set by JS to match the rendered image width */
  width: 100%;
  font-size: var(--caption-size-en);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

[data-lang="zh"] .caption {
  font-family: var(--font-zh);
  font-size: var(--caption-size-zh);
}

.caption-location {
  text-align: left;
}

.caption-date {
  text-align: right;
}

/* ── Responsive ──────────────────────────── */

@media (max-width: 768px) {
  :root {
    --nav-padding: 1.25rem 1.5rem;
  }

  .logo-en {
    font-size: 1.15rem;
  }

  .nav-links {
    gap: 1.25rem;
  }

  .nav-links a,
  .lang-toggle {
    font-size: 0.9rem;
  }

  .caption {
    font-size: 0.78rem;
  }
}

@media (max-width: 480px) {
  :root {
    --nav-padding: 1rem 1rem;
  }

  .nav-links {
    gap: 0.9rem;
  }
}