/* ============================================================
   TYPOGRAPHY
   ------------------------------------------------------------
   Three voices, three jobs:
     Cinzel   — the House speaks (names, labels, navigation)
     Italiana — the House feels  (large poetic display)
     Jost     — the House explains (everything you read)
   ============================================================ */

/* ---- The House voice: letterspaced classical caps ----
   Drawn from her logo, where "HOUSE OF" sits wide above the name. */
.house-mark,
.house-label {
  font-family: var(--font-house);
  text-transform: uppercase;
  letter-spacing: var(--track-house);
  font-weight: 400;
}

.house-label {
  font-size: var(--t-xs);
  color: var(--gold);
  /* the trailing letterspace would otherwise push text off-centre */
  text-indent: var(--track-house);
}

/* A label with a short rule beside it, curved rather than ticked. */
.house-label--ruled {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}
.house-label--ruled::before {
  content: '';
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  flex: none;
}

/* ---- Display: the poetic register ---- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
}
.display--hero { font-size: var(--t-hero); line-height: 0.94; }
.display--xxl  { font-size: var(--t-xxl); }
.display--xl   { font-size: var(--t-xl);  line-height: 1.08; }
.display--lg   { font-size: var(--t-lg);  line-height: 1.15; }

/* Italiana has no italic; a true italic aside uses the body face. */
.display em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 0.82em;
  letter-spacing: 0.01em;
}

/* ---- Product and section names in the House face ---- */
.name {
  font-family: var(--font-house);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
}
.name--lg { font-size: var(--t-lg); }
.name--md { font-size: var(--t-md); }

/* ---- Reading ---- */
.lede {
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--fg-soft, var(--ink-light-soft));
  max-width: var(--measure);
}
.prose {
  max-width: var(--measure);
  color: var(--fg, inherit);
}
.prose p + p { margin-top: 1.1em; }
.prose strong { font-weight: 600; }

/* Her listing copy is written in short paragraphs; preserve them. */
.story-text { white-space: pre-line; }

/* ---- The poetic line under a product name ---- */
.piece-line {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--gold-champagne);
  line-height: 1.3;
}
.lit-day .piece-line,
.lit-dawn .piece-line { color: var(--gold-burnished); }

/* ---- Price ---- */
.price {
  font-family: var(--font-house);
  letter-spacing: 0.08em;
  font-size: var(--t-md);
  color: var(--gold);
}
.lit-day .price, .lit-dawn .price { color: var(--gold-burnished); }

/* ---- A quiet gold rule shaped like a shallow curve ---- */
.rule-curve {
  width: 100%;
  max-width: 12rem;
  height: 18px;
  overflow: visible;
  color: var(--gold);
  opacity: 0.55;
}

/* ---- Pull quote / the House signing off ---- */
.signoff {
  font-family: var(--font-house);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: var(--t-xs);
  color: var(--gold);
}

/* ---- Balance headline wrapping where supported ---- */
.display, .name { text-wrap: balance; }
.lede, .prose p { text-wrap: pretty; }