/* =========================================================
   Typography test: Cormorant Garamond (voice) + Manrope (interface)
   "Say less. Mean more."
   Loaded after the Webflow CSS so these rules win.
   To roll out to other pages: add the Google Fonts <link> and
   this stylesheet to their <head>, then add <em class="accent">
   around one meaningful word per headline.
   ========================================================= */

:root {
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --ink: #2a2321;          /* headings */
  --ink-soft: #5e5350;     /* body copy */
  --muted: #8c7f7a;        /* labels, meta */
  --accent: #8e4f68;       /* italic accent word */
  --tint: #f2e2e6;         /* pink panel */
  --light-background: #fcf8f6;
  --body-display: var(--ink-soft);

  /* type scale */
  --display-xl: clamp(40px, 4.6vw, 68px);
  --display: clamp(38px, 4.4vw, 64px);
  --title: clamp(34px, 3.4vw, 48px);
  --subhead: 26px;
  --body-lg: 17px;
  --body: 15px;
  --label: 10.5px;
}

.body {
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--light-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Accent: one meaningful word, italic, in mauve ---------- */
.accent,
.body .accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

/* ---------- Serif display ---------- */
.body .heading,
.body .heading-2,
.body .heading-3,
.body .heading-19 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.body .heading.large {
  font-size: var(--display-xl);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
}

.body .heading,
.body .heading-19 {
  font-size: var(--display);
  line-height: 1.05;
}

.body .heading-3 {
  font-size: var(--title);
  line-height: 1.08;
  font-weight: 500;
  padding-bottom: 18px;
}

.body .heading-2 {
  font-size: var(--subhead);
  line-height: 1.2;
  font-weight: 500;
  margin-bottom: 10px;
}

/* ---------- Manrope body ---------- */
.body .body-display {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.body .text-block-3,
.body .body-display-2 {
  font-family: var(--sans);
  font-size: var(--body-lg);
  line-height: 1.65;
  color: var(--ink-soft);
}

.body .margin-bottom-24px {
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: 48px;
}

/* ---------- Labels: small, uppercase, tracked ---------- */
.body .subtitle,
.body .subtitle-3 {
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.body .subtitle { padding-bottom: 24px; }

/* section kickers ("My work", "My playground") get the accent color */
.body .stacked-title .subtitle,
.body .stacked-title-2 .subtitle,
.body .stacked-title-2 .subtitle-3 { color: var(--accent); }

.body .nav-link {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink);
  transition: color .25s ease;
}
.body .nav-link:hover,
.body .nav-link:focus-visible,
.body .nav-link.w--current,
.body .nav-link.is-current { color: var(--accent); }

.body .looping-text-wrapper {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--ink);
}

.body .button,
.body .button-5 {
  font-family: var(--sans);
  letter-spacing: 0.18em;
}
.body .button-text,
.body .button-text-3 {
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 600;
  color: var(--ink);
}

/* Monogram: keeps the original Fleur De Leah script logo, in the accent color */
.body .text-block { color: var(--accent); }

.body .text-block-45 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* =========================================================
   Site-wide: case studies, about, playground
   ========================================================= */

/* Default voice split: Manrope for interface/body, Cormorant for headings.
   Low specificity on purpose: wins over Webflow by load order, loses to any
   targeted rule below. Icon fonts are skipped. */
.body :where(div, p, a, li, span, strong, b, em, label, blockquote, figcaption, td, th):where(:not([class*="w-icon"])) {
  font-family: var(--sans);
}
.body :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.body :where(h1, h2, h3, h4, h5, h6) :where(strong, b, span, em) { font-family: inherit; }


/* Keep the script monogram */
.body .text-block,
.body .text-block-2,
.body .preloader-brand { font-family: "Fleur De Leah", cursive; }

/* Page hero titles */
.body .heading-10.large {
  font-family: var(--serif);
  font-size: var(--display-xl);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.body .body-display.large,
.body .body-display-2.large {
  font-size: var(--body-lg);
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Section statements ("The problem", "The goal") */
.body .testimonial-text,
.body .testimonial-text.large {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink);
}
.body .testimonial-text strong,
.body .testimonial-text b { font-weight: 600; color: var(--ink); }

/* Reflection paragraphs */
.body .heading-18 {
  font-size: clamp(20px, 1.6vw, 23px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink);
}

/* Case study subheadings ("Inspiration", "Usability Testing", "Mockups"...) */
.body :is(.text-block-10, .text-block-13, .text-block-15, .text-block-16,
          .text-block-17, .text-block-33, .text-block-34) {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
}

/* Step and card titles */
.body .heading-9,
.body .process-step-headline {
  font-family: var(--serif);
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.3;
  font-weight: 400;
}
/* Bold phrases in process headlines: full bold for clear contrast */
.body .process-step-headline :is(strong, b) { font-weight: 700; color: var(--ink); }
.body .process-analysis-headline {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}
.body .process-stat-number {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}

/* Project meta values (role, tools, date, names) read as interface text */
.body :is(.heading-12, .heading-13, .heading-14, .heading-15, .heading-16, .heading-17) {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
}

/* Body copy */
.body :is(.body-display, .body-display-2, .process-step-desc, .process-consideration-text,
          .process-idea-caption, .process-stat-caption, .text-block-11, .text-block-12,
          .text-block-14, .text-block-18, .text-block-31) {
  font-family: var(--sans);
  line-height: 1.7;
  color: var(--ink-soft);
}
.body .process-consideration-title { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.body .process-stat-source { font-family: var(--sans); font-size: 11px; color: var(--muted); }

/* Labels */
.body :is(.subtitle, .subtitle-2, .subtitle-3, .process-step-label, .process-jtbd-tag,
          .process-analysis-tag, .text-block-37, .text-block-39) {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: var(--label);
  color: var(--muted);
}
.body .subtitle.light { color: var(--accent); }

.body .text-link { font-family: var(--sans); color: var(--ink); transition: color .2s; }
.body .text-link:hover,
.body a:hover > .text-link { color: var(--accent); }

/* Side section nav (case studies + playground): active item turns pink instead of bold */
.body .process-nav-item {
  font-weight: 400;
  color: #a2958f;
  transition: color .2s ease;
}
.body .process-nav-item:hover { color: var(--ink); }
.body .process-nav-item.active { font-weight: 400; color: var(--accent); }

/* ---------- Responsive: scale down, don't shrink ---------- */
@media screen and (max-width: 767px) {
  .body .heading.large { line-height: 1.02; }
  .body .margin-bottom-24px { margin-left: auto; margin-right: auto; }
}
@media screen and (max-width: 479px) {
  .body .heading.large { font-size: 40px; }
  .body .heading-3 { font-size: 34px; }
  .body .margin-bottom-24px,
  .body .body-display { font-size: 15px; }
}