/* ──────────────────────────────────────────────────────────────────────────
   HUE Seoul — Brand System (K-Modern, Engineering-Led Luxury)
   Apple Park × Acne Studios × Aesop Apgujeong
   Polar-opposite register to Maison Aesthetica's parchment+burgundy heritage.
   ────────────────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+KR:wght@400;500;700&display=swap");

:root {
  /* SURFACES — pure white K-modern register */
  --h-paper:       #fafaf9;   /* PRIMARY — pure soft white */
  --h-mist:        #f4f4f3;   /* secondary mist */
  --h-cloud:       #ededec;   /* tertiary, slight cool tint */
  --h-bone:        #e8e7e5;
  --h-pebble:      #d8d6d2;
  --h-stone:       #c5c2bd;
  --h-fog:         #b8b5b0;
  --h-white:       #ffffff;

  /* DARK ACCENTS — charcoal (matches Maison's espresso for cross-brand consistency in body text) */
  --h-charcoal:    #1a1a1a;   /* primary text & dark surfaces */
  --h-charcoal-2:  #0e0e0e;
  --h-graphite:    #2a2a2a;

  /* TEXT */
  --h-text:           #1a1a1a;
  --h-text-strong:    #0e0e0e;
  --h-text-body:      #2a2a2a;
  --h-text-muted:     #5a5a5a;
  --h-text-whisper:   #808080;
  --h-text-faint:     #a8a8a8;
  --h-text-on-dark:        #fafaf9;
  --h-text-on-dark-mute:   #b8b8b8;
  --h-text-on-dark-whisp:  #808080;

  /* ACCENTS — lapis blue (signature) */
  --h-lapis:       #2563eb;   /* SIGNATURE lapis blue */
  --h-lapis-deep:  #1d4ed8;
  --h-lapis-soft:  #60a5fa;
  --h-lapis-pale:  #dbeafe;
  --h-lapis-on-dark: #93c5fd;

  /* BORDERS */
  --h-line:        rgba(26, 26, 26, 0.10);
  --h-line-2:      rgba(26, 26, 26, 0.18);
  --h-line-lapis:  rgba(37, 99, 235, 0.45);
  --h-line-on-dark: rgba(250, 250, 249, 0.14);

  /* TYPE — Inter / Helvetica sans, NO serif anywhere */
  --h-sans:       "Inter", "Helvetica Now Display", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --h-sans-text:  "Inter", "Helvetica Now Text", "Helvetica Neue", system-ui, sans-serif;
  --h-mono:       "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --h-kr:         "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  /* SCALE — same proportions as Maison */
  --h-display:    clamp(48px, 12vw, 132px);
  --h-display-md: clamp(40px, 9vw, 96px);
  --h-h1:         clamp(36px, 7vw, 72px);
  --h-h2:         clamp(28px, 5.5vw, 52px);
  --h-h3:         clamp(22px, 3.5vw, 32px);
  --h-lead:       clamp(15px, 1.6vw, 18px);
  --h-body:       15px;
  --h-meta:       13px;
  --h-eyebrow:    10px;
  --h-micro:      9px;

  /* TRACKING — tighter than Maison for engineering feel */
  --h-track-display: -0.03em;
  --h-track-h2:      -0.025em;
  --h-track-eyebrow: 0.28em;
  --h-track-mono:    0.04em;
  --h-track-allcaps: 0.16em;

  /* RHYTHM */
  --h-section:     clamp(80px, 12vw, 160px);
  --h-gutter:      clamp(20px, 5vw, 40px);
  --h-max:         1320px;
  --h-max-narrow:  880px;

  /* MOTION */
  --h-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --h-dur:  500ms;  /* sharper than Maison's 700ms */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  background: var(--h-paper);
  color: var(--h-text-body);
  font-family: var(--h-sans);
  font-size: var(--h-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv01", "cv02", "cv03"; /* Inter alts for cleaner numerals */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* TYPE PRIMITIVES */
.h-sans      { font-family: var(--h-sans); }
.h-sans-text { font-family: var(--h-sans-text); }
.h-mono      { font-family: var(--h-mono); }
.h-kr        { font-family: var(--h-kr); }

.h-display {
  font-family: var(--h-sans);
  font-weight: 600;
  font-size: var(--h-display);
  line-height: 0.96;
  letter-spacing: var(--h-track-display);
  color: var(--h-text-strong);
}

.h-h1 {
  font-family: var(--h-sans);
  font-weight: 500;
  font-size: var(--h-h1);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--h-text-strong);
}

.h-h2 {
  font-family: var(--h-sans);
  font-weight: 500;
  font-size: var(--h-h2);
  line-height: 1.08;
  letter-spacing: var(--h-track-h2);
  color: var(--h-text-strong);
}

.h-h3 {
  font-family: var(--h-sans);
  font-weight: 500;
  font-size: var(--h-h3);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--h-text-strong);
}

.h-lead {
  font-family: var(--h-sans-text);
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--h-text-body);
}

.h-eyebrow {
  font-family: var(--h-mono);
  font-size: var(--h-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--h-track-eyebrow);
  color: var(--h-lapis);
}

.h-meta {
  font-family: var(--h-mono);
  font-size: var(--h-meta);
  letter-spacing: var(--h-track-mono);
  color: var(--h-text-muted);
}

.h-micro {
  font-family: var(--h-mono);
  font-size: var(--h-micro);
  letter-spacing: var(--h-track-allcaps);
  text-transform: uppercase;
  color: var(--h-text-whisper);
}

/* italic accent — Inter italic (true italic glyphs) */
.h-italic {
  font-style: italic;
  font-weight: 400;
}

/* BUTTONS — charcoal primary, lapis hover */
.h-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 28px;
  border: 1px solid var(--h-line-2);
  background: transparent;
  color: var(--h-text);
  font-family: var(--h-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--h-track-allcaps);
  text-transform: uppercase;
  border-radius: 0;
  transition: background var(--h-dur) var(--h-ease), color var(--h-dur) var(--h-ease), border-color var(--h-dur) var(--h-ease);
  cursor: pointer;
}
.h-btn:hover { background: var(--h-charcoal); color: var(--h-paper); border-color: var(--h-charcoal); }

.h-btn-solid {
  background: var(--h-charcoal);
  color: var(--h-paper);
  border-color: var(--h-charcoal);
}
.h-btn-solid:hover { background: var(--h-lapis); border-color: var(--h-lapis); color: var(--h-paper); }

.h-btn-lapis {
  background: var(--h-lapis);
  color: var(--h-paper);
  border-color: var(--h-lapis);
}
.h-btn-lapis:hover { background: var(--h-charcoal); border-color: var(--h-charcoal); }

.h-btn-large {
  padding: 24px 40px;
  font-size: 12px;
}

.h-btn-arrow::after {
  content: "→";
  font-family: var(--h-sans);
  font-size: 14px;
  letter-spacing: 0;
  transition: transform var(--h-dur) var(--h-ease);
}
.h-btn-arrow:hover::after { transform: translateX(4px); }

/* RULES */
.h-rule       { height: 1px; background: var(--h-line); border: 0; margin: 0; }
.h-rule-2     { height: 1px; background: var(--h-line-2); border: 0; margin: 0; }
.h-rule-lapis { height: 1px; background: var(--h-line-lapis); border: 0; margin: 0; }

/* CONTAINER */
.h-container {
  width: 100%;
  max-width: var(--h-max);
  margin: 0 auto;
  padding-left: var(--h-gutter);
  padding-right: var(--h-gutter);
}
.h-narrow { max-width: var(--h-max-narrow); }

.h-section { padding-top: var(--h-section); padding-bottom: var(--h-section); position: relative; }

/* DARK BAND */
.h-on-dark {
  background: var(--h-charcoal);
  color: var(--h-text-on-dark);
}
.h-on-dark .h-eyebrow { color: var(--h-lapis-on-dark); }
.h-on-dark .h-lead    { color: var(--h-text-on-dark-mute); }
.h-on-dark .h-meta    { color: var(--h-text-on-dark-mute); }

/* FADE-UP */
.h-fade { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--h-ease), transform 1s var(--h-ease); }
.h-fade.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .h-fade { opacity: 1; transform: none; transition: none; }
}

/* SECTION INDEX */
.h-index {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--h-mono);
  font-size: var(--h-eyebrow);
  letter-spacing: var(--h-track-eyebrow);
  text-transform: uppercase;
  color: var(--h-lapis);
}
.h-index .h-index-line { width: 32px; height: 1px; background: var(--h-lapis); opacity: 0.7; }
.h-on-dark .h-index { color: var(--h-lapis-on-dark); }
.h-on-dark .h-index .h-index-line { background: var(--h-lapis-on-dark); }

/* FORM INPUTS */
.h-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--h-line-2);
  color: var(--h-text);
  font-family: var(--h-sans-text);
  font-size: 18px;
  padding: 14px 0;
  outline: none;
  transition: border-color var(--h-dur) var(--h-ease);
}
.h-input::placeholder { color: var(--h-text-faint); }
.h-input:focus { border-color: var(--h-lapis); }

/* PORTRAIT FRAME — sharper than Maison's */
.h-portrait {
  position: relative;
  aspect-ratio: 3/4;
  background: var(--h-cloud);
  overflow: hidden;
  border: 1px solid var(--h-line);
}

/* GRID UTILITIES */
.h-grid-2 { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .h-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 48px; } }

.h-grid-3 { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .h-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .h-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.h-grid-4 { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .h-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .h-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 32px; } }