/* ==========================================================================
   ARTICLE  ·  fg2

   The one stylesheet behind node--fg2-article.html.twig, which serves both
   article presentations: the stacked blog and news article and the split
   press release. It carries no colour values of its own. Every rule below
   resolves to a token declared in tokens.css, so the contrast ratios those
   tokens were measured at hold here without being restated.

   LAYOUT MODEL
   Below 1280px the article is one 760px reading measure, centred, with the
   context rail stacked under the body. At 1280px and above the same 760px
   measure sits at the left edge of the 1200px container and the rail
   becomes a sticky column on its right. Crossing the breakpoint moves the
   rail; it never changes the measure.

   THE BODY IS NOT OURS
   Section 6 styles content this stylesheet did not write. Article bodies
   are Layout Builder compositions or plain rich text fields, and the
   ruling for this wave is that they render as they stand. So section 6
   sets type, rhythm and colour on the elements a body actually contains
   and neutralises the legacy layout wrappers that would otherwise impose
   their own width inside the reading column. It adds nothing to the body
   and removes nothing from it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHELL
   -------------------------------------------------------------------------- */

.fg-article__container {
  width: 100%;
  max-width: calc(var(--container-text) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The reading measure, pinned to --container-text on every surface that
   carries running text. */
.fg-article__col,
.fg-article__rail { max-width: var(--container-text); min-width: 0; }

/* --------------------------------------------------------------------------
   2. ARTICLE HEADER

   THE HEADER IS page-header.css's, NOT THIS FILE'S. Every rule that used to
   live here drew a header of this page's own: a two crumb trail at 12px
   that began at News & Insights and omitted Home, a kicker row of badge and
   date above the headline, a headline at the --fs-h1 primitive, and a
   standfirst at a size no other component used. The sitewide contract states
   one anatomy for all of them, so the band is now the shared .fg-pagehead
   component and this section holds only what is particular to an article:
   the two things that used to sit in the header and now open the reading
   column instead.
   -------------------------------------------------------------------------- */

/* The article band opens directly under the header band, so its own top
   padding is the only gap between the two and stays as the section token
   sets it. */

/* THE DATELINE, at the top of the reading column. --fg-eyebrow sized, which
   is what .fg-meta already computes to, so the article's date is finally the
   same 12px the rest of the site's small meta is; it used to render at 16px
   in sentence case, which the contract names as a divergence to retire. */
.fg-article__lead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);        /* 5.57:1 on --surface-base */
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3. THE LEAD IMAGE  ·  content, not wallpaper

   The article's first illustration, inside the reading column and capped by
   it. The frame holds the aspect box and the picture fills it, so the crop
   is the frame's job and an image of any dimension drops in without moving
   anything below it. The picture is positioned rather than sized because the
   media entity renders through its own view display, which wraps the img in
   markup this stylesheet does not control.

   16 / 9, WHICH IS A RATIO THIS FILE ALREADY USED. The 21 / 9 letterbox was
   a header plate's proportion, chosen when the picture ran the full width of
   the band; inside a reading column it would leave a strip. 16 / 9 is what
   the release plate in this same file was drawn at.
   -------------------------------------------------------------------------- */

.fg-article__lead { margin: 0 0 clamp(28px, 1.4rem + 1.8vw, 48px); }

.fg-article__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-raised);
  border: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-article__frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The media display labels its image field visually_hidden. The utility
   that hides it lives in the site-wide stylesheet; this restates it inside
   the frame so the label cannot surface over the picture if the article is
   ever rendered without that stylesheet. */
.fg-article__frame .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. BODY AND RAIL LAYOUT
   -------------------------------------------------------------------------- */

.fg-article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   6. THE ARTICLE BODY  ·  content this stylesheet did not write

   Two jobs. First, undo the legacy layout wrappers: a Layout Builder
   section arrives carrying container and padding classes that were written
   for a full-width page and would otherwise fight the reading column.
   Second, give the elements a body actually contains the same type,
   rhythm and colour the rest of the redesign uses.
   -------------------------------------------------------------------------- */

.fg-article__body .layout,
.fg-article__body .layout__region,
.fg-article__body [class*="lb-container"],
.fg-article__body [class*="lb-padding"] {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* The section is also a twelve column grid, and its track widths are worked
   out from --grid-viewport-width, which the sitewide stylesheet leaves at
   100vw. Widths taken from the window rather than from the element they sit
   in are correct for a full bleed page and wrong here: inside the reading
   column the tracks still add up to the width of the window, so the body
   copy runs out over the rail.

   Pinning the variable to the element's own width puts the same twelve
   columns inside the column instead of inside the window. The line names
   survive, so anything placed on them keeps its placement, and the region
   then takes the full measure rather than the inset band the outer tracks
   would leave it. Scoped to the article body: every other page on the site
   reads the variable exactly as it does today. */
.fg-article__body { --grid-viewport-width: 100%; }
.fg-article__body .layout__region { grid-column: window-start / window-end; }

.fg-article__body > * { min-width: 0; }

.fg-article__body p {
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: var(--text-muted);
  text-wrap: pretty;
}
.fg-article__body p + p,
.fg-article__body p + ul,
.fg-article__body p + ol,
.fg-article__body ul + p,
.fg-article__body ol + p { margin-top: var(--space-6); }

/* The body's own headings. The article's h1 is the node title and is set
   in the header, so a body heading starts at h2. */
.fg-article__body h2,
.fg-article__body h3,
.fg-article__body h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  color: var(--text-display);
  text-wrap: balance;
}
.fg-article__body h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.02vw, 2.125rem);
  letter-spacing: var(--ls-h2);
  margin-top: clamp(40px, 1.9rem + 2.6vw, 68px);
  margin-bottom: clamp(16px, 0.8rem + 0.8vw, 24px);
}
.fg-article__body h3 {
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-h3);
  margin-top: clamp(32px, 1.6rem + 1.8vw, 48px);
  margin-bottom: var(--space-4);
}
.fg-article__body h4 {
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-h3);
  margin-top: clamp(26px, 1.3rem + 1.4vw, 38px);
  margin-bottom: var(--space-3);
}
.fg-article__body > *:first-child { margin-top: 0; }

.fg-article__body ul,
.fg-article__body ol {
  padding-left: var(--space-6);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  color: var(--text-muted);
}
.fg-article__body li + li { margin-top: var(--space-2); }
.fg-article__body li::marker { color: var(--accent); }

/* PROSE LINKS, at the contract's own values. The resting state is what this
   file already shipped and the contract lifted from it; the hover is the half
   that is fixed. --accent-hover and --accent resolve to the same #e35530, so
   the previous hover changed nothing at all, and the contract pairs the
   accent with --fg-link-hover instead, which is the kit's existing convention
   on the ghost button. */
.fg-article__body a {
  color: var(--fg-link);               /* 5.22:1 on --surface-base */
  text-decoration-line: var(--fg-link-decoration);
  text-underline-offset: var(--fg-link-offset);
  transition: var(--t-color);
}
.fg-article__body a:hover,
.fg-article__body a:focus-visible { color: var(--fg-link-hover); }

/* --------------------------------------------------------------------------
   6a. THE PASTED MARKUP SAFETY NET

   WHAT THIS IS FOR. Article bodies carry markup pasted out of Word and out of
   the previous site: spans wrapping spans with font-family:Calibri, table
   rows with background-color and color set together, and a pull quote drawn
   as a div with a hex fill. All of it was authored against a white page. An
   inline style attribute outranks every stylesheet on the site, so on the
   dark ground those declarations survive and paint their own light panels
   inside the reading column, or set black text on it.

   A CONTENT CLEANUP IS THE REAL FIX and it runs separately. This is the belt
   to that cleanup's braces: it holds while the content is still in flight and
   it keeps holding afterwards for the next paste.

   IT IS THE ONLY PLACE IN THIS FILE THAT USES !important, and it has to be:
   nothing else beats an inline style. It is held to the three properties that
   actually damage the page and it is keyed on the style attribute itself, so
   an element with no inline style is not matched by any of these rules.

   COLOUR AND FILL ARE NEUTRALISED TOGETHER, NEVER ONE WITHOUT THE OTHER.
   The pasted pairs are white text on a mid-blue fill; dropping the fill alone
   would leave white on white, and dropping the colour alone would leave the
   fill. Both go, and the element then reads at the body's own colour on the
   body's own ground.

   ANCHORS ARE THE ONE EXCEPTION. inherit on a link would make it the colour
   of the sentence around it, which is the exact fault the contract's prose
   link rule exists to fix, so a link carrying an inline colour is re-pointed
   at the link role rather than at its parent.
   -------------------------------------------------------------------------- */

.fg-article__body [style*="background"] {
  background-color: transparent !important;
  background-image: none !important;
}

.fg-article__body [style*="color"]:not(a) { color: inherit !important; }

.fg-article__body a[style*="color"] { color: var(--fg-link) !important; }
.fg-article__body a[style*="color"]:hover,
.fg-article__body a[style*="color"]:focus-visible { color: var(--fg-link-hover) !important; }

.fg-article__body [style*="font-family"] { font-family: inherit !important; }

/* The presentational element and the presentational attribute. Neither can
   be reached through a style attribute, and both arrive with the same
   pastes. */
.fg-article__body font {
  color: inherit !important;
  font-family: inherit !important;
}
.fg-article__body [bgcolor] { background-color: transparent !important; }

.fg-article__body strong,
.fg-article__body b { color: var(--text-primary); font-weight: var(--fw-semibold); }

.fg-article__body img,
.fg-article__body video,
.fg-article__body iframe { max-width: 100%; height: auto; }

.fg-article__body figure { margin: clamp(28px, 1.4rem + 1.8vw, 48px) 0; }
.fg-article__body figcaption {
  margin-top: var(--space-4);
  padding-left: var(--space-4);
  border-left: 2px solid var(--accent);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 62ch;
}

.fg-article__body blockquote {
  margin: clamp(34px, 1.7rem + 2.2vw, 60px) 0;
  padding-left: clamp(18px, 0.9rem + 1.2vw, 30px);
  border-left: 2px solid var(--accent);
}
.fg-article__body blockquote p {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 0.98rem + 0.6vw, 1.5rem);
  font-style: normal;
  font-weight: var(--fw-medium);
  line-height: 1.42;
  letter-spacing: -0.006em;
  color: var(--text-display);
}

.fg-article__body hr {
  margin-block: clamp(34px, 1.7rem + 2.2vw, 56px);
  border: 0;
  border-top: var(--border-hairline-w) solid var(--border-hairline);
}

/* Tables scroll inside their own box rather than widening the measure. */
.fg-article__body table {
  width: 100%;
  margin-block: clamp(28px, 1.4rem + 1.8vw, 44px);
  border-collapse: collapse;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.fg-article__body th,
.fg-article__body td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline-w) solid var(--border-hairline);
  text-align: left;
  vertical-align: top;
}
.fg-article__body th { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* The date the redesign already shows in the kicker and the rail is also
   the first block of the stock Layout Builder section, where it renders as
   a bare wrapper holding nothing but a time element. Suppressing it here
   keeps one date on the page. The selector is deliberately narrow: it
   matches only a first block that contains a time element and no prose, so
   a body whose opening block is anything else is untouched. Where :has()
   is unavailable the rule is dropped and the article reads as it does
   today, with the date twice. Removing the block from the view display
   would be the durable fix, and it belongs in configuration rather than
   here, but per node Layout Builder overrides carry their own copy of that
   section and this reaches those too. */
.fg-article__body .layout__region > div:first-child:has(time):not(:has(p)) {
  display: none;
}

/* --------------------------------------------------------------------------
   7. CONTEXT RAIL
   Below 1280px it is a block under the article body. At 1280px and above it
   becomes the sticky right column.
   -------------------------------------------------------------------------- */

.fg-article__rail {
  margin-top: clamp(44px, 2.1rem + 2.8vw, 76px);
  padding-top: clamp(36px, 1.8rem + 2.2vw, 60px);
  border-top: var(--border-hairline-w) solid var(--border-hairline);
}

.fg-article__rail-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 1.4rem + 1.4vw, 36px) clamp(28px, 1.4rem + 2vw, 56px);
}

.fg-article__rail-block { display: flex; flex-direction: column; gap: var(--space-3); }
.fg-article__rail-block--cta {
  grid-column: 1 / -1;
  padding-top: clamp(24px, 1.2rem + 1.2vw, 32px);
  border-top: var(--border-hairline-w) solid var(--border-hairline);
}
.fg-article__rail-block .fg-chip-row { margin: 0; padding: 0; list-style: none; }
.fg-article__rail-block p { margin: 0; }

.fg-article__rail-cat { margin-bottom: 0; }
.fg-article__rail-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.fg-article__rail-block--cta .fg-btn { align-self: flex-start; }

/* The inline arrow. Sized here because these two links are the only place
   the article draws the glyph itself rather than through the header
   sprite, which a node template cannot count on being present. */
.fg-article__arrow {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform var(--dur-quick) var(--ease-standard);
}
.fg-link-arrow:hover .fg-article__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   8. TABLET TIER  ·  768px and above
   The rail is still under the body, but it is wide enough to pair its
   blocks rather than run them in one column.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .fg-article__rail-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   9. DESKTOP TIER

   1280px brings the wide container and the sticky rail together. The header
   band above keeps the reading measure at every width, because it is the
   same column the body below it runs in.
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {

  .fg-article__container { max-width: calc(var(--container-max) + (var(--gutter) * 2)); }

  .fg-article__layout {
    grid-template-columns: minmax(0, var(--container-text)) minmax(260px, 320px);
    justify-content: space-between;
    column-gap: var(--space-10);
  }

  .fg-article__rail {
    position: sticky;
    top: calc(var(--header-offset) + 28px);
    align-self: start;
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    padding-left: clamp(28px, 2.2vw, 40px);
    border-top: 0;
    border-left: var(--border-hairline-w) solid var(--border-hairline);
  }

  .fg-article__rail-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .fg-article__rail-block + .fg-article__rail-block {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: var(--border-hairline-w) solid var(--border-hairline);
  }
  .fg-article__rail-block--cta { grid-column: auto; }
  .fg-article__rail-block--cta .fg-btn { align-self: stretch; width: 100%; }
}

/* --------------------------------------------------------------------------
   11. SMALL SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  .fg-article__frame { aspect-ratio: 3 / 2; }
  .fg-article__body ul,
  .fg-article__body ol { padding-left: var(--space-5); }
}

/* --------------------------------------------------------------------------
   12. REDUCED MOTION
   The reveal transitions are neutralised site-wide in components.css. The
   only movement this stylesheet adds is the arrow nudge, so that is the
   only thing it has to take back.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fg-article__arrow { transition: none; }
  .fg-link-arrow:hover .fg-article__arrow { transform: none; }
}

/* --------------------------------------------------------------------------
   13. PRINT
   An article is the one page on this site people print. What prints is the
   headline block, the picture and the body; the rail, the hub band and the
   closing call to action are navigation and are dropped.
   -------------------------------------------------------------------------- */

@media print {
  .fg-article__rail,
  .fg-article__phead .fg-pagehead__crumbs,
  .fg-article__phead .fg-pagehead__art,
  .fg-article .fg-cta-band,
  .fg-article .fg-band--raised { display: none; }

  .fg-article,
  .fg-article__band,
  .fg-article__phead { background: #ffffff; padding: 0; border: 0; min-height: 0; }

  /* The drawn ground is two pseudo-elements and a scrim over them. None of
     it carries information, and all of it would print as grey wash. */
  .fg-article__phead::before,
  .fg-article__phead::after { display: none; }

  .fg-article__container { max-width: none; padding-inline: 0; }

  .fg-article__phead .fg-h1,
  .fg-article__body h2,
  .fg-article__body h3,
  .fg-article__body h4,
  .fg-article__body p,
  .fg-article__body li,
  .fg-article__phead .fg-pagehead__lede,
  .fg-article__lead-meta { color: #000000; }

  .fg-article__body a { color: #000000; }

  .fg-article__layout { display: block; }

  .fg-article__frame { break-inside: avoid; }
  .fg-article__body h2,
  .fg-article__body h3 { break-after: avoid; }
}