/* ============================================================
   LUBYLAB — Reset + utilities
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
}

/* Headings — Pretendard with display weight + tight tracking */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; border-radius: 0; }
/* Logos / wordmarks shouldn't be cropped at the corners. */
.nav__logo-img,
.footer__logo { border-radius: 0; }
ul, ol { list-style: none; }

/* ===== Utilities ===== */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Fluid side gutters that grow with the screen (matches the home page's
     full-bleed 56px edge spacing on wide monitors, 24px on phones). */
  padding: 0 clamp(24px, 4vw, 56px);
}
.label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
/* "serif" hooks remain so existing markup compiles, but they now use Pretendard. */
.serif        { font-family: var(--font-display); font-weight: 500; }
.serif-italic { font-family: var(--font-display); font-weight: 400; font-style: italic; }
.divider { border: none; border-top: 1px solid var(--border); margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}

/* Emphasized inline (used inside display headings) */
em {
  font-style: italic;
  font-weight: 400;
}

/* Page transitions */
.page-enter { animation: fadeIn 0.3s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}