/* =============================================================
   BASE — Design tokens, reset, global typography
   Zelken MD Plastic Surgery
   ============================================================= */

/* Google Fonts — Cormorant Garamond (serif display) + Hanken Grotesk (sans body) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand palette */
  --ink:          #16160f;   /* primary text + dark sections */
  --charcoal:     #0b0b09;   /* header / deep dark */
  --sage:         #797d6b;   /* primary accent (footer, buttons) */
  --sage-dark:    #676b58;
  --sage-deep:    #535643;   /* button hover */
  --cream:        #f5f1e8;   /* text on dark — never pure white */
  --cream-dim:    rgba(245, 241, 232, .66);
  --bone:         #f4f2ec;   /* light neutral section bg */
  --bone-2:       #ece9e0;
  --lilac:        #f1f0f4;   /* before/after band */
  --paper:        #ffffff;
  --image-ph:     #d9d6cf;   /* placeholder fill */
  --image-ph-2:   #c9c5bb;
  --slate:        #6f7480;   /* media/press section bg */
  --marble-deep:  #0c0c0a;   /* deepest dark for marble sections */

  /* Lines / borders */
  --line:        rgba(22, 22, 15, .14);
  --line-soft:   rgba(22, 22, 15, .08);
  --line-ondark: rgba(245, 241, 232, .20);

  /* Typography */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container:      1280px;
  --container-wide: 1480px;
  --measure:        760px;
  --gutter:         clamp(20px, 5vw, 64px);
  --section-y:      clamp(64px, 9vw, 132px);

  /* Spacing scale */
  --space-xs: .4rem;
  --space-sm: .8rem;
  --space-md: 1.4rem;
  --space-lg: 1.8rem;
  --space-xl: 2.6rem;

  /* Border radii */
  --radius:     4px;    /* buttons / inputs — quiet, near-square */
  --radius-img: 10px;   /* image cards */
  --radius-lg:  18px;

  /* Shadows */
  --shadow-soft: 0 18px 50px -28px rgba(22, 22, 15, .45);
  --shadow-card: 0 24px 60px -32px rgba(22, 22, 15, .55);

  /* Transitions */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --transition: background .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

ul, ol {
  padding-left: 1.5em;
  margin: 0 0 1.15em;
}

/* ============================================================
   GLOBAL TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: .01em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }

/* --- Display heading --- */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: .005em;
}

/* --- Section title: uppercase serif editorial signature --- */
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: clamp(1.6rem, 2.8vw, 2.35rem);
  line-height: 1.15;
  color: var(--ink);
}

.section-title.on-dark { color: var(--cream); }

/* --- Overline label above headings --- */
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--sage);
  margin: 0 0 1.1rem;
}

.eyebrow.on-dark { color: rgba(245, 241, 232, .7); }

/* --- Subtitle label (below heading) --- */
.subtitle {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--sage);
  margin: .2rem 0 1.2rem;
}

.subtitle.on-dark { color: rgba(245, 241, 232, .62); }

/* --- Lead paragraph --- */
.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(22, 22, 15, .82);
}

.muted { color: rgba(22, 22, 15, .55); }

/* --- Dark-context text overrides --- */
.on-dark,
.on-dark p,
.prose.on-dark p  { color: var(--cream-dim); }
.on-dark .lead { color: rgba(245, 241, 232, .85); }

/* ============================================================
   RESPONSIVE BASE
   ============================================================ */
@media (max-width: 640px) {
  body { font-size: 16px; }
}