/* ─────────────────────────────────────────────
   PORTFOLIO — Global Stylesheet
   Yun-Chia Lin · 2026
   Shared by all pages. Page-specific styles live
   in index.css (homepage) or case-study.css (case studies).
   ───────────────────────────────────────────── */

/* ── TOKENS ── */
:root {
  --yellow:        #F5D125;
  --yellow-muted:  #fdf3a3;
  --dark:          #1a1a18;
  --dark-surface:  #212119;
  --dark-surface-hover: #252521;
  --text-on-dark:  #a8a8a4;
  --mid:           #4a4a44;
  --light:         #f7f6f2;
  --white:         #ffffff;
  --col:         720px;
  --gap:         2rem;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; border-radius: 4px; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--dark);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ── FOCUS VISIBLE ── */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── LAYOUT UTILITIES ── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3rem;
}
.section {
  padding: 7rem 0;
}
.section-sm {
  padding: 5rem 0;
}
.section-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  opacity: 0.6;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.section-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--dark);
  margin-bottom: 2rem;
  max-width: 30ch;
}
.body-text {
  font-size: 1rem;
  color: var(--mid);
  max-width: 72ch;
  line-height: 1.8;
  font-weight: 300;
}
.body-text + .body-text { margin-top: 1rem; }
.body-text strong { color: var(--dark); font-weight: 400; }
.divider {
  width: 48px;
  height: 2px;
  background: var(--yellow);
  margin: 2rem 0;
}

/* ── REVEAL ANIMATION ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .container { padding: 0 1.5rem; }
}