/* ============================================
   AtlasX — base.css
   Reset, fonts, root tokens, shared utilities
   ============================================ */

/* Pretendard via jsdelivr (KR/EN body font) */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* Display serif italic — closest free analog to "Griffiths" */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@1&family=Italiana&family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500&display=swap');

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Pretendard', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; color: #1a1a1a; background: #ffffff; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

/* ---- Responsive root scaling ------------------------------------
   The Figma design has fixed widths (1920 desktop, 360 mobile).
   We set html font-size so that 1rem === 10 design-px at the
   target viewport. All sizes in CSS are written in rem
   ( design_px / 10 ), so the layout stays proportional. */
:root {
  --max-desktop: 1920px;
  --max-mobile: 480px;

  --c-bg: #ffffff;
  --c-fg: #1a1a1a;
  --c-fg-soft: #444847;
  --c-mute: #666666;
  --c-mute-2: #a7a7a7;
  --c-line: rgba(0,0,0,.5);
  --c-line-soft: rgba(102,102,102,.4);
  --c-dark-1: #121212;
  --c-dark-2: #343434;
  --c-grey-fill: #eaeaea;
  --c-cream: #ebeae7;
  --c-near-black: #141413;

  --ff-display: 'DM Serif Display', 'Cormorant Garamond', 'Italiana', "Times New Roman", serif;
  --ff-body: 'Pretendard', system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Desktop scaling: 1 rem == 10 design-px at 1920w viewport */
@media (min-width: 768px) {
  html {
    font-size: calc(100vw / 192);
  }
}

/* Mobile scaling: 1 rem == 10 design-px at 360w viewport.
   Capped at 480px so very large phones don't blow up. */
@media (max-width: 767px) {
  html {
    font-size: min(calc(100vw / 36), calc(480px / 36));
  }
  body { max-width: 480px; margin: 0 auto; }
}

/* ---- Display type ---------------------------------------------- */
.display-italic {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  color: var(--c-fg);
  margin: 0;
}

/* Reusable section header (Eyebrow over heading) pattern */
.section { position: relative; }
.section__inner { position: relative; }