/* ==========================================================================
   base.css — variables, reset, typography
   STAY DEMO · Editorial Stay · Clay & Ink
   ========================================================================== */

/* --- Web fonts -------------------------------------------------------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css');

/* --- Design tokens ---------------------------------------------------- */
:root {
  /* Palette — Clay & Ink */
  --c-bg:        #FAFAF7;
  --c-ink:       #0F0F0F;
  --c-accent:    #C75B3F;   /* terracotta — single accent, used sparingly */
  --c-gray:      #E5E0D8;
  --c-gray-2:    #B8B2A7;   /* derived, for meta text */
  --c-line:      #1a1a1a14; /* hairline rules */
  --c-ink-soft:  #0F0F0FCC; /* 80% ink */

  /* Type stack — Pretendard 단일화 */
  --font-base:   'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-display:  var(--font-base);
  --ff-body:     var(--font-base);
  --ff-mono:     var(--font-base);

  /* Weight scale — 한 화면에서 300~900까지 멀리 떨어뜨려 매거진 톤 형성 */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;
  --fw-black:    900;

  /* Type scale — magazine, 위계 강화 */
  --fs-overline: 11px;
  --fs-meta:     13px;
  --fs-body:     17px;
  --fs-lead:     19px;
  --fs-h4:       clamp(22px, 2vw, 28px);
  --fs-h3:       clamp(28px, 3vw, 40px);
  --fs-h2:       clamp(36px, 5vw, 72px);
  --fs-h1:       clamp(56px, 9vw, 144px);

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  40px;
  --sp-6:  64px;
  --sp-7:  96px;
  --sp-8:  140px;

  /* Layout */
  --col-max:    1480px;
  --col-pad:    clamp(20px, 4vw, 56px);
  --rule:       1px solid var(--c-line);

  /* Motion */
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:     220ms;
  --t-med:      520ms;
  --t-slow:     900ms;
}

/* --- Reset (mini) ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.75;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}

img, svg { display: block; max-width: 100%; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-base);
  font-weight: var(--fw-black);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

p { margin: 0; }

::selection {
  background: var(--c-accent);
  color: var(--c-bg);
}

/* --- Utility ---------------------------------------------------------- */
.u-container {
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;
  padding-left: var(--col-pad);
  padding-right: var(--col-pad);
}

.u-overline {
  font-family: var(--font-base);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.6;
}

.u-rule { border: 0; border-top: var(--rule); margin: 0; }

.u-mono { font-family: var(--font-base); font-feature-settings: "tnum"; letter-spacing: 0.04em; }

/* Anchor target offset */
section[id] { scroll-margin-top: 96px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}