/* =================================================================================================
   LFD editorial section

   THE LFD LANGUAGE, NOT A NEW ONE. Every value below is a design-system token: Oswald for the
   eyebrow and the display heading, Georgia for the editorial heading at hero size, the canonical
   hairline rule, the section rhythm from --lfd-space-section. Nothing here invents a colour, a
   size or a spacing step, so a change to the tokens reaches this section the way it reaches every
   other one.

   THE MEASURE IS 68ch AND THAT IS DELIBERATE. --lfd-width-text is the reading measure the design
   system already declares. A full-width shell without a measure produces 1400px lines, which is
   roughly 200 characters and unreadable; About is the first LFD surface that is mostly prose, so
   it is the first one where this matters.
   ================================================================================================= */

.lfd-editorial {
  position: relative;
  inline-size: 100%;
  padding-block: var(--lfd-space-section);
  background: var(--lfd-color-paper);
  color: var(--lfd-color-ink);
  box-sizing: border-box;
}

.lfd-editorial * {
  box-sizing: border-box;
}

.lfd-editorial__inner {
  inline-size: 100%;
  max-inline-size: var(--lfd-measure, 97.5rem);
  margin-inline: auto;
  padding-inline: var(--lfd-gutter, 2.625rem);
}

/* --- tone ------------------------------------------------------------------------------------ */

.lfd-editorial--ink {
  background: var(--lfd-color-ink-deep);
  color: var(--lfd-color-paper);
}

.lfd-editorial--ink .lfd-editorial__eyebrow {
  color: var(--lfd-color-text-muted-on-dark, rgba(255, 255, 255, 0.72));
}

/* THE BODY'S OWN ELEMENTS, NAMED.

   Inheriting on .lfd-editorial__body is not enough: the body is core blocks, and the theme
   styles `p` directly, which beats an inherited colour. Measured on the About page - the list
   items were white and the paragraph above them was black on black, which is a contrast failure
   and not a subtle one. */
.lfd-editorial--ink .lfd-editorial__heading,
.lfd-editorial--ink .lfd-editorial__standfirst,
.lfd-editorial--ink .lfd-editorial__body,
.lfd-editorial--ink .lfd-editorial__body p,
.lfd-editorial--ink .lfd-editorial__body li,
.lfd-editorial--ink .lfd-editorial__body h2,
.lfd-editorial--ink .lfd-editorial__body h3,
.lfd-editorial--ink .lfd-editorial__body h4,
.lfd-editorial--ink .lfd-editorial__body strong,
.lfd-editorial--ink .lfd-editorial__body em {
  color: var(--lfd-color-paper);
}

/* Body links are the text colour, so the underline is the ONLY thing that marks them as links
   (WCAG 1.4.1). Manon's global `a { text-decoration: none }` removed it on both tones. */
.lfd-editorial__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lfd-editorial--ink .lfd-editorial__body a {
  color: var(--lfd-color-paper);
  text-decoration-color: var(--lfd-color-line-on-dark, rgba(255, 255, 255, 0.5));
}

.lfd-editorial--ink .lfd-editorial__cta {
  border-color: var(--lfd-color-line-on-dark, rgba(255, 255, 255, 0.4));
  color: var(--lfd-color-paper);
}

/* --- the head -------------------------------------------------------------------------------- */

.lfd-editorial__eyebrow {
  margin: 0 0 var(--lfd-space-sm);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-xs, 0.6875rem);
  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-muted, rgba(0, 0, 0, 0.55));
}

.lfd-editorial__heading {
  margin: 0 0 var(--lfd-space-md);
  font-family: var(--lfd-font-editorial);
  font-size: var(--lfd-size-display-md);
  font-weight: var(--lfd-weight-regular);
  line-height: var(--lfd-leading-tight);
  letter-spacing: var(--lfd-tracking-snug);
  color: inherit;
}

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

.lfd-editorial__standfirst {
  margin: 0 0 var(--lfd-space-lg);
  max-inline-size: var(--lfd-width-text);
  font-family: var(--lfd-font-body, inherit);
  font-size: var(--lfd-size-lead, 1.0625rem);
  line-height: var(--lfd-leading-body);
  color: inherit;
}

/* --- the body, which is the block's inner blocks ---------------------------------------------- */

/* Scoped to the body wrapper and to the elements a paragraph actually produces. Nothing here
   targets a bare element outside .lfd-editorial__body, so a legacy Manon page is untouched. */
.lfd-editorial__body {
  max-inline-size: var(--lfd-width-text);
  font-size: var(--lfd-size-body, 0.9375rem);
  line-height: var(--lfd-leading-body);
}

.lfd-editorial__body p,
.lfd-editorial__body li {
  color: inherit;
}

.lfd-editorial__body > * {
  margin-block: 0 var(--lfd-space-md);
}

.lfd-editorial__body > *:last-child {
  margin-block-end: 0;
}

.lfd-editorial__body h2,
.lfd-editorial__body h3,
.lfd-editorial__body h4 {
  font-family: var(--lfd-font-display);
  font-weight: var(--lfd-weight-semibold);
  line-height: var(--lfd-leading-snug);
  letter-spacing: var(--lfd-tracking-snug);
  text-transform: uppercase;
}

.lfd-editorial__body h2 { font-size: var(--lfd-size-display-sm); }

.lfd-editorial__body h3 { font-size: var(--lfd-size-body-lg, 1.0625rem); }

.lfd-editorial__body h4 { font-size: var(--lfd-size-label-lg, 0.875rem); }

.lfd-editorial__body ul,
.lfd-editorial__body ol {
  padding-inline-start: var(--lfd-space-md);
}

.lfd-editorial__body li {
  margin-block-end: var(--lfd-space-2xs);
}

.lfd-editorial__body img {
  max-inline-size: 100%;
  block-size: auto;
}

/* --- media ------------------------------------------------------------------------------------ */

.lfd-editorial__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.lfd-editorial--stack .lfd-editorial__media {
  margin-block-start: var(--lfd-space-xl);
}

/* --- the call to action ------------------------------------------------------------------------ */

.lfd-editorial__actions {
  margin: var(--lfd-space-xl) 0 0;
}

.lfd-editorial__cta {
  display: inline-block;
  padding: var(--lfd-space-sm) var(--lfd-space-lg);
  border: var(--lfd-border-line);
  font-family: var(--lfd-font-display);
  font-size: var(--lfd-size-label-sm, 0.75rem);
  font-weight: var(--lfd-weight-bold);
  letter-spacing: var(--lfd-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  transition: background var(--lfd-duration-base, 0.25s) var(--lfd-ease-standard, ease),
    color var(--lfd-duration-base, 0.25s) var(--lfd-ease-standard, ease);
}

.lfd-editorial__cta:hover,
.lfd-editorial__cta:focus-visible {
  background: var(--lfd-color-ink);
  color: var(--lfd-color-paper);
}

.lfd-editorial--ink .lfd-editorial__cta:hover,
.lfd-editorial--ink .lfd-editorial__cta:focus-visible {
  background: var(--lfd-color-paper);
  color: var(--lfd-color-ink);
}

/* --- split layout ------------------------------------------------------------------------------ */

/* Above 834 only. Below it the two columns become one, in source order - the column of prose
   first, the photograph after it - which is the order somebody reading on a phone wants. Above
   it the prose takes the first track and the photograph the second, also in source order: the
   component prints the column first, so no `order` is needed and what is read, what is tabbed
   through and what is seen stay the same sequence. */
@media (width > 834px) {

  .lfd-editorial--split .lfd-editorial__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--lfd-space-gap-lg);
    align-items: start;
  }
}

/* --- reduced motion ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .lfd-editorial__cta {
    transition: none;
  }
}