/* =========================================================================
   LONDON FASHION DAY - TYPOGRAPHY
   Named roles, every one opt-in through a class. Nothing here styles a bare
   element, so Manon's Theme Options keep full control of h1-h6, p and a.

   WHY THAT MATTERS, CONCRETELY
   style_dynamic.css is generated from the site's Theme Options
   (edgtf_options_manon) and styles bare elements with no !important:

     h1 { font-family: Oswald; font-size: 78px; line-height: .90em;
          font-weight: 700; letter-spacing: -3px; text-transform: uppercase; }
     p  { color: #111111; font-size: 17px; line-height: 1.65em; }

   An `h1 { ... }` rule here would fight that file for every heading on the
   site, and the option the editor changes in the admin would stop having an
   effect. Manon option precedence is preserved by simply never competing for
   it: the role classes below carry the same intent for new markup, and the
   Theme Options keep owning existing markup.

   Roles: display, h1-h6, body, lead, caption, label, button, nav, meta.
   ========================================================================= */

/* ---- Display ------------------------------------------------------------
   The oversized condensed headline, and the outlined "ghost" type that sits
   behind sections - the signature device of the design. */

.lfd-type-display,
.lfd-type-display-2xl,
.lfd-type-display-xl,
.lfd-type-display-lg,
.lfd-type-display-md,
.lfd-type-display-sm {
  font-family: var(--lfd-font-display);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-flat);
  letter-spacing: var(--lfd-tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
  /* A single long word at display size is wider than a phone. "REGISTRATION" set at the
     48px floor of --lfd-size-display-xl measures 313px, which is 33px past a 320px screen
     once the gutter is taken - and the whole page then scrolls sideways. break-word only
     acts when the word alone cannot fit, so it changes nothing anywhere else. Found by
     rendering at 320px, not by reading the file. */
  overflow-wrap: break-word;
}

.lfd-type-display { font-size: var(--lfd-size-display-3xl); letter-spacing: var(--lfd-tracking-display-tight); }

.lfd-type-display-2xl { font-size: var(--lfd-size-display-2xl); letter-spacing: var(--lfd-tracking-display-tight); }

.lfd-type-display-xl { font-size: var(--lfd-size-display-xl); }

.lfd-type-display-lg { font-size: var(--lfd-size-display-lg); }

.lfd-type-display-md { font-size: var(--lfd-size-display-md); line-height: var(--lfd-leading-display); }

.lfd-type-display-sm { font-size: var(--lfd-size-display-sm); line-height: var(--lfd-leading-tight); }

/* The editorial serif display - the other half of the voice. Used for season
   numerals, pull quotes and the "LATEST STORIES" style headings. */
.lfd-type-editorial {
  font-family: var(--lfd-font-editorial);
  font-weight: var(--lfd-weight-regular);
  font-size: var(--lfd-size-display-md);
  line-height: var(--lfd-leading-snug);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: none;
  overflow-wrap: break-word;
}

.lfd-type-editorial-lg { font-size: var(--lfd-size-display-lg); }

.lfd-type-editorial-sm { font-size: var(--lfd-size-display-sm); }

/* Ghost type: the outlined watermark. -webkit-text-stroke is the only way to
   get a hairline outline that follows the glyph; where it is unsupported the
   colour fallback keeps the text readable rather than invisible. */
.lfd-type-ghost {
  font-family: var(--lfd-font-display);
  font-weight: var(--lfd-weight-bold);
  font-size: var(--lfd-size-display-2xl);
  line-height: var(--lfd-leading-flat);
  letter-spacing: var(--lfd-tracking-display-tight);
  text-transform: uppercase;
  color: var(--lfd-color-line-faint);
  user-select: none;
  overflow-wrap: break-word;
}

@supports (-webkit-text-stroke: 1px currentColor) {

  .lfd-type-ghost {
    color: transparent;
    -webkit-text-stroke: var(--lfd-border-hairline) var(--lfd-color-line);
  }
}

.lfd-type-ghost-on-dark { color: var(--lfd-color-line-on-dark); }

@supports (-webkit-text-stroke: 1px currentColor) {

  .lfd-type-ghost-on-dark {
    color: transparent;
    -webkit-text-stroke: var(--lfd-border-hairline) var(--lfd-color-rule-on-dark);
  }
}

/* ---- Heading roles ------------------------------------------------------
   Named by ROLE, not by tag, so a section can carry the right level for the
   document outline and the right size for the design independently. */

.lfd-type-h1,
.lfd-type-h2,
.lfd-type-h3,
.lfd-type-h4,
.lfd-type-h5,
.lfd-type-h6 {
  font-family: var(--lfd-font-display);
  font-weight: var(--lfd-weight-bold);
  text-transform: uppercase;
  margin-block: 0;
  overflow-wrap: break-word;
}

.lfd-type-h1 {
  font-size: var(--lfd-size-display-xl);
  line-height: var(--lfd-leading-flat);
  letter-spacing: var(--lfd-tracking-display);
}

.lfd-type-h2 {
  font-size: var(--lfd-size-display-lg);
  line-height: var(--lfd-leading-display);
  letter-spacing: var(--lfd-tracking-display);
}

.lfd-type-h3 {
  font-size: var(--lfd-size-display-md);
  line-height: var(--lfd-leading-display);
  letter-spacing: var(--lfd-tracking-snug);
}

.lfd-type-h4 {
  font-size: var(--lfd-size-display-sm);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-snug);
}

.lfd-type-h5 {
  font-size: var(--lfd-size-label-lg);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-label-sm);
}

.lfd-type-h6 {
  font-size: var(--lfd-size-label-sm);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-label-lg);
}

/* ---- Body ---------------------------------------------------------------
   OPEN QUESTION T2: --lfd-font-body names Open Sans, which the site already
   loads, but body text on the live site inherits Manon's face. These classes
   declare the family so new components are explicit; applying them to
   existing content is a separate, visible decision. */

.lfd-type-body {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-body);
  letter-spacing: var(--lfd-tracking-none);
}

.lfd-type-body-lg { font-size: var(--lfd-size-body-lg); }

.lfd-type-body-sm { font-size: var(--lfd-size-body-sm); }

.lfd-type-lead {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-lead);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-relaxed);
  letter-spacing: var(--lfd-tracking-none);
}

/* A measured reading column. Applied to the element that holds prose, not to
   the page. */
.lfd-type-measure { max-inline-size: var(--lfd-width-text); }

/* ---- Caption, label, meta ----------------------------------------------
   These carry the design. Tracked-out condensed uppercase, small, quiet. */

.lfd-type-caption {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-body-sm);
  line-height: var(--lfd-leading-label);
  color: var(--lfd-color-text-muted);
}

.lfd-type-label {
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
}

.lfd-type-label-sm { font-size: var(--lfd-size-label-2xs); }

.lfd-type-label-xs { font-size: var(--lfd-size-label-3xs); letter-spacing: var(--lfd-tracking-label-lg); }

.lfd-type-label-wide { letter-spacing: var(--lfd-tracking-label-lg); }

.lfd-type-label-widest { letter-spacing: var(--lfd-tracking-label-xl); }

/* The eyebrow above a heading - season marker, section name, date. */
.lfd-type-eyebrow {
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-2xs);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-label-lg);
  text-transform: uppercase;
  color: var(--lfd-color-text-quiet);
}

.lfd-type-meta {
  font-family: var(--lfd-font-body);
  font-size: var(--lfd-size-label-xs);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-none);
  color: var(--lfd-color-text-quiet);
}

/* The numbered index device - 01, 02, 03 - on cards and gallery tiles. */
.lfd-type-index {
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-label-md);
  font-weight: var(--lfd-weight-regular);
  letter-spacing: var(--lfd-tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--lfd-color-text-quiet);
}

/* ---- Interactive roles -------------------------------------------------- */

.lfd-type-button {
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-sm);
  font-weight: var(--lfd-weight-bold);
  line-height: 1;
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
}

.lfd-type-nav {
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs);
  font-weight: var(--lfd-weight-bold);
  line-height: var(--lfd-leading-label);
  letter-spacing: var(--lfd-tracking-label-sm);
  text-transform: uppercase;
}

/* ---- Modifiers ---------------------------------------------------------- */

.lfd-u-ink { color: var(--lfd-color-ink); }

.lfd-u-ink-deep { color: var(--lfd-color-ink-deep); }

.lfd-u-paper { color: var(--lfd-color-paper); }

/* A utility whose entire job is to colour TEXT, so it reads the accent's text token. Written
   with --lfd-color-accent it handed every caller 2.9292:1 on paper - the one place in the design
   system where the distinction the token block draws could be undone by a single class. */
.lfd-u-accent { color: var(--lfd-color-accent-text); }

.lfd-u-muted { color: var(--lfd-color-text-muted); }

.lfd-u-quiet { color: var(--lfd-color-text-quiet); }

.lfd-u-muted-on-dark { color: var(--lfd-color-text-muted-on-dark); }

.lfd-u-upper { text-transform: uppercase; }

.lfd-u-normal-case { text-transform: none; }

.lfd-u-balance { text-wrap: balance; }

.lfd-u-pretty { text-wrap: pretty; }

.lfd-u-tabular { font-variant-numeric: tabular-nums; }

.lfd-u-nowrap { white-space: nowrap; }

/* Truncation to a fixed number of lines, for card excerpts. */
.lfd-u-clamp-2,
.lfd-u-clamp-3,
.lfd-u-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lfd-u-clamp-2 { -webkit-line-clamp: 2; }

.lfd-u-clamp-3 { -webkit-line-clamp: 3; }

.lfd-u-clamp-4 { -webkit-line-clamp: 4; }

/* Visually hidden, still announced. Needed by every new component that uses
   an icon or a numeral as its only visible label. */
.lfd-u-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}