/* ============================================================
   Liora Interior Studio  -  Base elements & brand helper classes
   White ground. Manrope headings (uppercase, warm). Cormorant
   only as a rare accent. Thin horizontal hairlines everywhere.
   ============================================================ */

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

/* запрещаем горизонтальный скролл: декоративные элементы могут выходить за правый край */
html { overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--sand); color: var(--ink); }

a { color: inherit; text-decoration: none; }

/* ---- Headings: Manrope, UPPERCASE, warm, the workhorse voice ---- */
.h1, .h2, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}
.h1 { font-size: var(--text-h1); }
.h2 { font-size: var(--text-h2); }
.h3 { font-size: var(--text-h3); letter-spacing: var(--ls-wide); }

/* A heading may switch ONE accent word to the decorative serif */
.accent {
  font-family: var(--font-accent);
  font-weight: var(--fw-500, 500);
  text-transform: none;
  font-style: italic;
  letter-spacing: 0;
}

/* ---- Decorative serif display (the big watermark words) ---- */
.display-accent {
  font-family: var(--font-accent);
  font-weight: var(--fw-medium);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
  color: var(--watermark);
  text-transform: uppercase;
}

/* ---- Lead / body ---- */
.lead {
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  font-weight: var(--fw-regular);
}

/* ---- Eyebrow / section label (tiny tracked caps, top of every block) ---- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Layout helpers ---- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* ---- Index numerals (01 / 02 …) ---- */
.index-num {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Hairline rule (the core structural motif) ---- */
.rule { height: 1px; background: var(--line); border: 0; width: 100%; }
.rule-strong { height: 1px; background: var(--line-strong); border: 0; width: 100%; }