/* The generated pages: the blog index, the articles, the four segment pages and the machines page
   (scripts/build-site.mjs, from site-src/templates). Loads after css/cantic.css, and after
   css/pages.css where a page links both, so these rules have the last word on these pages. Built
   only from the design system's tokens and devices.

   Themes per section as the site plan sets them (3.4, 3.5, 6.1, 6.2): dark heroes, light reading,
   the horizon edge at every change of theme (data-edge), the free test bar to close. */

/* Shared */

/* The audience switch (js/blog.js sets html[data-audience]): one text or the other. Without the
   script the attribute is never set, so both texts show, each under its label. */
html[data-audience='owner'] [data-audience-for='it'],
html[data-audience='it'] [data-audience-for='owner'] {
  display: none;
}

/* the switch needs the script; without it both texts show and the switch stays away */
html:not(.js) [data-audience] {
  display: none;
}

/* The switch's labels: "For owners" where there is room, "Owners" where there is not (a narrow
   column, a phone; Spanish runs longer). The hidden one is out of the accessible name too. */
.audience__short {
  display: none;
}

.system-section__head .audience__long {
  display: none;
}

.system-section__head .audience__short {
  display: inline;
}

@media (max-width: 419px) {
  .audience__long {
    display: none;
  }

  .audience__short {
    display: inline;
  }
}

@media (max-width: 579px) {
  :lang(es) .audience__long {
    display: none;
  }

  :lang(es) .audience__short {
    display: inline;
  }
}

/* on the narrowest phones a label may still take two lines: let it, evenly */
.switch button {
  padding-block: 6px;
  line-height: 1.25;
}

/* The parts the generated pages share with the hand-written inner pages, the hero and the closing
   bar, are styled by css/pages.css, which the segment and machines pages load first. The rules
   below give the same look where it is not loaded (the blog) or not there yet, at the lowest
   weight that still beats the base rules for h1, h2 and p, so css/pages.css wins wherever it is. */
div:where(.page-hero__copy) {
  position: relative;
  display: grid;
  justify-items: start;
}

h1:where(.page-hero__title) {
  max-width: 15em;
  margin-top: var(--sp-8);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

p:where(.page-hero__lead) {
  max-width: 30em;
  margin-top: var(--sp-24);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

p:where(.page-hero__sub) {
  max-width: 38em;
  margin-top: var(--sp-16);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

div:where(.free-test__inner) {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-24);
  align-items: end;
}

div:where(.free-test__inner) > * {
  grid-column: 1 / -1;
}

h2:where(.free-test__title) {
  max-width: 16em;
  font-size: var(--fs-statement);
  line-height: 1.15;
  letter-spacing: -.03em;
  text-wrap: balance;
}

p:where(.free-test__line) {
  max-width: 30em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

div:where(.free-test__inner) > a {
  justify-self: start;
  margin-top: var(--sp-24);
}

/* The segment's name is short: Display XL, as the plan sets it (3.4) */
.page-segment .page-hero__title {
  font-size: var(--fs-display-xl);
  line-height: 1;
  letter-spacing: -.035em;
}

.page-hero__eyebrow {
  color: var(--fg-2);
}

.page-hero__eyebrow a {
  position: relative;
  color: inherit;
  transition: color .15s var(--ease-io);
}

.page-hero__eyebrow a::after {
  content: '';
  position: absolute;
  inset: -12px 0;
}

@media (hover: hover) {
  .page-hero__eyebrow a:hover {
    color: var(--fg);
  }
}

.page-hero .switch {
  margin-top: var(--sp-48);
}

.page-hero__machines {
  width: 100%;
  margin-top: var(--sp-96);
}

/* The machines as a grid of icons and names, each a link (the segment hero and the machines page's
   index). The number a row follows the count, so the last row is never one name alone: 3 a row for
   9, 4 for 7 and 8, 5 for 13. */
.machine-list {
  display: grid;
  grid-template-columns: repeat(var(--machine-cols, 1), minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: var(--sp-16);
}

.machine-list li {
  border-top: 1px solid var(--line);
}

.machine-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 0;
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--fg);
}

.machine-list .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.25;
  color: var(--fg-2);
  transition: color .15s var(--ease-io);
}

.machine-list a:focus-visible {
  outline-offset: 0;
}

@media (hover: hover) {
  .machine-list a:hover span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  .machine-list a:hover .icon {
    color: var(--fg);
  }
}

/* A heading block with a paragraph beside it from column 7 on desktops */
.segment-runs__head,
.sector-rules__head {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-24);
  align-items: start;
}

.segment-runs__head > *,
.sector-rules__head > * {
  grid-column: 1 / -1;
}

.segment-runs__text,
.sector-rules__lead {
  max-width: 36em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Footnote markers: a mono figure that links down to its source, never under 12 px (in tables too) */
sup.fn {
  margin-left: 1px;
  font: 400 max(12px, .7em)/0 var(--mono);
  letter-spacing: 0;
  vertical-align: super;
}

sup.fn a {
  position: relative;
  padding: 0 .2em;
  border-radius: 2px;
  color: var(--fg-2);
  text-decoration: none;
  transition: color .15s var(--ease-io), background-color .15s var(--ease-io);
}

@media (hover: hover) {
  sup.fn a:hover {
    background: var(--fg);
    color: var(--bg);
  }
}

/* the page already keeps the header's height clear above a target (css/cantic.css); a little more */
sup.fn a:target,
.sources > li:target {
  scroll-margin-top: 16px;
}

/* Numbered sources: each entry one line of text after its number. The design system lays the
   list out as a grid of two cells per entry; an entry here is a run of text and links, so it
   flows as a paragraph with its number hung in the margin. */
.sources > li {
  display: block;
  position: relative;
  padding-left: calc(3ch + 12px);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}

.sources > li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-variant-numeric: tabular-nums;
}

.sources__publisher {
  color: var(--fg);
}

a.sources__publisher {
  color: var(--fg);
}

.sources__read {
  white-space: nowrap;
}

.sources > li:target {
  color: var(--fg);
}

/* the way back to the text sits under the source's number, so it never wraps on its own */
.sources > li:has(> .sources__back) {
  min-height: 3em;
}

.sources .sources__back {
  position: absolute;
  top: 1.5em;
  left: -.3em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: var(--fg-2);
  text-decoration: none;
  transition: color .15s var(--ease-io), background-color .15s var(--ease-io);
}

.sources__back .icon {
  width: 68%;
  height: 68%;
  transform: rotate(-90deg);
}

@media (hover: hover) {
  .sources .sources__back:hover {
    background: var(--fg);
    color: var(--bg);
  }
}

/* Cards: the article card is the design system's link card inside one link */
.cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  margin-top: var(--sp-48);
}

.card-article {
  display: flex;
  min-width: 0;
}

.card-article__link {
  display: flex;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
}

.card-article__box {
  flex: 1;
  min-width: 0;
  min-height: clamp(300px, 26.667vw, 512px);
}

.card-article__link:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.card-article__link:focus-visible .lcard {
  --bg: var(--inv-bg);
  --fg: var(--inv-fg);
  --fg-2: var(--inv-fg-2);
  --line: var(--inv-line);
  background: var(--bg);
}

.card-article__link:focus-visible .earrow::before {
  transform: none;
}

.card-article__link:focus-visible .earrow .icon {
  color: var(--bg);
  transform: none;
}

/* whole words only: a word too long for the card breaks rather than overflowing, never hyphenated */
.card-article__title {
  overflow-wrap: break-word;
}

/* the whole standfirst, never cut off: a summary that ends in an ellipsis reads as a fault */
.card-article .lcard__text {
  display: block;
  margin-top: var(--sp-16);
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
}

/* The incident rows on dark (segment pages; the Threats timeline uses the same part) */
.incidents {
  margin-top: var(--sp-48);
  border-bottom: 1px solid var(--line);
}

.incident__date {
  display: grid;
  align-content: start;
  gap: 8px;
}

.incident__where {
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-2);
}

.incident__who {
  max-width: 22em;
}

.incident__summary {
  max-width: 40em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.incident__stopped {
  max-width: 40em;
  font-size: var(--fs-body);
  line-height: 1.55;
}

.incident__label {
  display: block;
  margin-bottom: 6px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.incident__facts li {
  text-wrap: pretty;
}

.incident__source {
  display: inline-grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  margin-left: 2px;
  vertical-align: -.3em;
  border-radius: 50%;
  color: var(--fg-2);
  transition: color .15s var(--ease-io), background-color .15s var(--ease-io);
}

.incident__source .icon {
  width: 70%;
  height: 70%;
  transform: rotate(-45deg);
}

@media (hover: hover) {
  .incident__source:hover {
    background: var(--fg);
    color: var(--bg);
  }
}

.incident__sources {
  line-height: 1.8;
}

.incident__sources .incident__label {
  display: inline;
  margin: 0 8px 0 0;
}

/* On phones a long source label wraps (a mono label can be wider than the card); its date
   still holds together. From 768 px each label keeps to one line. The body never grows past
   its column, whatever a label holds. */
.incident__body {
  min-width: 0;
}

.incident__sources a {
  overflow-wrap: anywhere;
}

.incident__sources time {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .incident__sources a {
    white-space: nowrap;
  }
}

.incident__article a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-button);
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.incident__article a::after {
  content: '';
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--ease-out);
}

@media (hover: hover) {
  .incident__article a:hover::after {
    transform: translateX(4px);
  }
}

/* Lists of rules, each sentence with its marker */
.rules li {
  max-width: 36em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  text-wrap: pretty;
}

/* The section that lists the sources at the foot of a page */
.page-sources__title {
  margin-bottom: var(--sp-24);
  color: var(--fg-2);
}

/* The segment pages */

.segment-runs .switch {
  margin-top: var(--sp-48);
}

.systems {
  margin-top: var(--sp-24);
  border-bottom: 1px solid var(--line);
}

.system {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-16);
  padding-block: var(--sp-48);
  border-top: 1px solid var(--line);
}

.system__name {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: var(--fs-card);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.system__name .icon {
  width: 1.1em;
  height: 1.1em;
  margin-top: .05em;
  stroke-width: 1.1;
  color: var(--fg-2);
}

/* the name links to its section on the machines page; the arrow says it goes elsewhere */
.system__name a {
  position: relative;
  color: var(--fg);
}

.system__name a::after {
  content: '';
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .3em;
  vertical-align: .02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8.5 7H17v8.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .5;
  transition: opacity .15s var(--ease-io), transform .3s var(--ease-out);
}

@media (hover: hover) {
  .system__name a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }

  .system__name a:hover::after {
    opacity: 1;
    transform: translate(2px, -2px);
  }
}

.system__texts {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--sp-16);
}

.system__plain,
.system__technical {
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.system__label,
.system-section__label {
  display: block;
  margin-bottom: 8px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.system__sources {
  max-width: 48em;
  font: 400 var(--fs-label)/1.7 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.system__sources a,
.incident__sources a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
  transition: color .15s var(--ease-io), text-decoration-color .15s var(--ease-io);
}

.system__sources a:hover,
.incident__sources a:hover {
  text-decoration-color: currentColor;
}

@media (hover: hover) {
  .system__sources a:hover {
    color: var(--fg);
  }
}

.segment-runs__more {
  margin-top: var(--sp-48);
}

.segment-rules .rules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: max(24px, var(--sp-48)) var(--gutter);
  margin-top: var(--sp-48);
}

.segment-cantic__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-48);
  align-items: start;
}

.segment-cantic__head,
.segment-cantic__text {
  grid-column: 1 / -1;
}

.segment-cantic__head h2 {
  max-width: 10em;
  text-wrap: balance;
}

.segment-cantic__text {
  max-width: 28em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.questions {
  display: grid;
  row-gap: max(32px, var(--sp-48));
  margin-top: var(--sp-48);
}

.questions__item {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-16);
  align-items: start;
}

.questions dt {
  grid-column: 1 / -1;
  max-width: 22em;
  font-size: var(--fs-lead);
  line-height: 1.3;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.questions dd {
  grid-column: 1 / -1;
  max-width: 36em;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
}

.page-segment .page-sources {
  padding-top: 0;
}

.page-segment .page-sources__title {
  padding-top: var(--sp-48);
  border-top: 1px solid var(--line);
}

/* the sources and the cards after them sit in one light run: less space between */
.page-sources + .related {
  padding-top: 0;
}

/* The machines page */

.page-hero:has(+ .system-index) {
  padding-bottom: max(40px, var(--sp-48));
}

.system-index {
  padding-top: 0;
}

.system-index__title {
  color: var(--fg-2);
}

.system-section,
.sector-rules,
.official-guidance {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}

.system-section__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: max(32px, var(--sp-48));
  padding-block: var(--sp-96);
}

.system-section + .system-section .system-section__grid {
  border-top: 1px solid var(--line);
}

.system-section:has(+ [data-edge]) .system-section__grid {
  padding-bottom: calc(var(--sp-96) + var(--edge-h));
}

.system-section__head,
.system-section__body {
  grid-column: 1 / -1;
  min-width: 0;
}

.system-section__sticky {
  display: grid;
  justify-items: start;
}

.system-section__icon {
  width: clamp(32px, 2.778vw, 53.33px);
  height: clamp(32px, 2.778vw, 53.33px);
  stroke-width: 1;
  color: var(--fg-2);
}

.system-section__name {
  max-width: 12em;
  margin-top: var(--sp-24);
  font-size: var(--fs-section);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.system-section__segments {
  max-width: 22em;
  margin-top: var(--sp-24);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
}

.system-section__segments a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .system-section__segments a:hover {
    text-decoration-thickness: 2px;
  }
}

.system-section__head .switch {
  margin-top: var(--sp-24);
}

.system-section__body {
  display: grid;
  align-content: start;
  gap: max(32px, var(--sp-48));
}

.system-section__texts {
  display: grid;
  gap: var(--sp-24);
}

.system-section__texts p {
  max-width: 34em;
  font-size: var(--fs-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.system-section__texts p[data-audience-for='owner'] {
  max-width: 26em;
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
}

.system-section__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-24) var(--gutter);
}

.system-section__facts dt {
  margin-bottom: 8px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  text-wrap: balance;
}

.system-section__facts dd {
  max-width: 30em;
  font-size: var(--fs-card-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.system-section__h3 {
  margin-bottom: 16px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.system-section .rules {
  display: grid;
  gap: 14px;
}

.system-section .rules li {
  position: relative;
  padding-left: 22px;
}

.system-section .rules li::before {
  content: '';
  position: absolute;
  top: .62em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* What Cantic does: Cantic's own line, on the surface colour */
.system-section__cantic {
  max-width: 40em;
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-card-body);
  line-height: 1.5;
  text-wrap: pretty;
}

.system-section .sources {
  gap: 10px;
}

.sector-rules,
.official-guidance {
  padding-block: var(--sp-96);
}

.sector-rules:has(+ [data-edge]),
.official-guidance:has(+ [data-edge]) {
  padding-bottom: calc(var(--sp-96) + var(--edge-h));
}

.rules-table {
  margin-top: var(--sp-48);
}

.rules-table td {
  color: var(--fg);
}

.sector-rules__sources-title {
  margin: var(--sp-48) 0 var(--sp-24);
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.official-guidance__helpline {
  max-width: 30em;
  margin-top: var(--sp-48);
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--fs-lead);
  line-height: 1.4;
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.official-guidance__helpline a,
.guidance__item a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .official-guidance__helpline a:hover,
  .guidance__item a:hover {
    text-decoration-thickness: 2px;
  }
}

.guidance {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-48) var(--gutter);
  margin-top: var(--sp-48);
}

/* Each piece of guidance: the publisher, the document, its date, what it is for. The commas and
   full stops between them are for reading aloud; on screen the parts stack, so they are set at
   no size. */
.guidance__item {
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  font-size: 0;
  line-height: 0;
}

.guidance__item > * {
  font-size: var(--fs-card-body);
  line-height: 1.45;
}

.guidance__item > .guidance__publisher {
  display: block;
  margin-bottom: 10px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.guidance__item > a.guidance__publisher {
  color: var(--fg);
}

.guidance__item > a:not(.guidance__publisher) {
  display: block;
  overflow-wrap: break-word;
}

.guidance__item > time {
  display: block;
  margin-top: 8px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.guidance__use {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-small) !important;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* The blog index */

.blog-hero {
  padding-bottom: 0;
}

.blog-hero__title {
  max-width: 15em;
  font-size: var(--fs-display);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.blog-list {
  padding-top: var(--sp-96);
}

.blog-list__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding-bottom: var(--sp-24);
  border-bottom: 1px solid var(--line);
}

/* the chips need the script; without it every card shows and the chips stay away */
html:not(.js) .blog-list [data-filter] {
  display: none;
}

.blog-hero__feed .go {
  font-size: var(--fs-small);
}

.blog-hero__feed .earrow .icon {
  transform: rotate(-45deg);
}

.blog-list .cards {
  margin-top: var(--gutter);
}

/* The article */

/* The reading measure: about 70 characters of the body text a line */
.page-article {
  --measure: calc(34 * var(--fs-article-body));
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

.article-head__main,
.article-rail,
.article-main {
  grid-column: 1 / -1;
  min-width: 0;
}

.article-main {
  max-width: var(--measure);
}

.article-head {
  padding-bottom: var(--sp-48);
}

.article-head__chips {
  margin-bottom: var(--sp-48);
}

.chip--back .icon {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  transform: rotate(180deg);
}

.chip--category {
  border-color: var(--fg);
  background: var(--fg);
  color: var(--bg);
}

.article-head__title {
  max-width: 20em;
  font-size: var(--fs-article-h1);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.article-head__standfirst {
  max-width: 30em;
  margin-top: var(--sp-24);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--fg-2);
  text-wrap: pretty;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin-top: var(--sp-48);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  font: 400 var(--fs-label)/1.5 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-meta__item {
  display: flex;
  gap: 8px;
}

.article-meta dt {
  color: var(--fg-2);
}

.article-layout,
.article-end {
  padding-top: 0;
}

.article-layout {
  padding-bottom: 0;
}

.article-rail__inner {
  display: grid;
  gap: var(--sp-16);
}

.article-rail__category {
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.article-rail__dates {
  font: 400 var(--fs-label)/1.6 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.toc {
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 0 16px;
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}

.toc__title::-webkit-details-marker {
  display: none;
}

.toc__title::after {
  content: '';
  width: 18px;
  height: 18px;
  flex: none;
  background: var(--chevron) center / contain no-repeat;
  transition: transform .3s var(--ease-out);
}

.toc[open] .toc__title::after {
  transform: rotate(180deg);
}

.toc__list {
  padding: 0 16px 12px;
}

.toc__list a {
  display: block;
  padding: 9px 0 9px 14px;
  border-left: 1px solid var(--line);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--fg-2);
  text-wrap: pretty;
  transition: color .15s var(--ease-io), border-color .15s var(--ease-io);
}

.toc__list a[aria-current='true'] {
  border-left-color: var(--fg);
  color: var(--fg);
}

@media (hover: hover) {
  .toc__list a:hover {
    color: var(--fg);
  }
}

.toc__list a:focus-visible {
  outline-offset: -2px;
}

.article-facts {
  margin-bottom: var(--sp-48);
}

/* The text: a column of about 70 characters, 1.7 line height */
.prose {
  font-size: var(--fs-article-body);
  line-height: 1.7;
  letter-spacing: -.005em;
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose p,
.prose li {
  text-wrap: pretty;
}

.prose h2,
.prose h3 {
  font-weight: 500;
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-h) + 32px);
}

.prose h2 {
  margin-top: 2.4em;
  font-size: var(--fs-article-h2);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.prose h3 {
  margin-top: 1.9em;
  font-size: var(--fs-article-h3);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.prose > h2 + *,
.prose > h3 + * {
  margin-top: .65em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose strong {
  font-weight: 500;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: .45em;
}

.prose li::marker {
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.prose blockquote {
  position: relative;
  margin-block: 1.8em;
  padding-left: var(--rule-inset);
  border-left: 1px solid var(--fg);
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
}

.prose blockquote p + p {
  margin-top: .8em;
}

.prose .table-wrap {
  margin-block: 1.8em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.45;
}

.prose th,
.prose td {
  padding: 12px 20px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  padding-top: 0;
  border-bottom-color: var(--outline);
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
  vertical-align: bottom;
}

.prose th:last-child,
.prose td:last-child {
  padding-right: 0;
}

.prose .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The panels in the text: key facts and our view on paper, what to do now on black */
.panel-facts,
.panel-view,
.panel-todo {
  padding: clamp(20px, 2.222vw, 42.67px);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
}

.prose > .panel-view,
.prose > .panel-todo {
  margin-block: 2.2em;
}

.panel-facts__label,
.panel-view__label,
.panel-todo__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--sp-24);
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.panel-view__mark {
  width: 17px;
  height: 18px;
  color: var(--fg);
}

.panel-facts ul,
.panel-todo ul,
.panel-todo ol {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.panel-facts li,
.panel-todo li {
  position: relative;
  padding-left: 22px;
}

.panel-facts li::before,
.panel-todo li::before {
  content: '';
  position: absolute;
  top: .68em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.panel-facts li {
  font-size: var(--fs-body);
  line-height: 1.5;
}

.panel-view > :not(.panel-view__label) + * {
  margin-top: .8em;
}

.panel-view > :not(.panel-view__label),
.panel-view li {
  font-size: var(--fs-body);
  line-height: 1.6;
}

.panel-view > p.panel-view__label + p {
  font-size: var(--fs-lead);
  line-height: 1.45;
  letter-spacing: -.015em;
}

.panel-todo__columns {
  display: grid;
  gap: var(--sp-24) var(--gutter);
}

.panel-todo__title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.panel-todo li {
  font-size: var(--fs-card-body);
  line-height: 1.5;
}

.panel-todo p + p,
.panel-todo p + ul,
.panel-todo ul + p {
  margin-top: .8em;
}

.panel-todo a,
.panel-view a,
.panel-facts a:not(sup.fn a) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The foot of the text */
.article-sources {
  padding-top: var(--sp-48);
  border-top: 1px solid var(--line);
}

.article-sources__title,
.article-corrections__title {
  margin-bottom: var(--sp-24);
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.article-corrections {
  margin-top: var(--sp-48);
}

.article-corrections ul {
  display: grid;
  gap: 10px;
}

.article-corrections li {
  font-size: var(--fs-small);
  line-height: 1.5;
}

.article-corrections time {
  font-family: var(--mono);
  letter-spacing: .02em;
}

.author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: var(--sp-48);
  padding: var(--pad);
  border-radius: var(--radius);
  background: var(--surface);
}

.author-box__mark {
  flex: none;
  width: clamp(32px, 2.778vw, 53.33px);
  height: clamp(33px, 2.917vw, 56px);
}

.author-box__label {
  font: 400 var(--fs-label)/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.author-box__name {
  margin-top: 6px;
  font-size: var(--fs-lead);
  line-height: 1.2;
  letter-spacing: -.015em;
}

.author-box__line {
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-2);
  text-wrap: pretty;
}

.lang-switch {
  margin-top: var(--sp-24);
}

.article-end + .related {
  padding-top: 0;
}

/* Tablet and up */

@media (min-width: 768px) {
  .machine-list {
    --machine-cols: 2;
  }

  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segment-rules .rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-section__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guidance {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-segment .page-sources .sources {
    display: block;
    columns: 2;
    column-gap: calc(2 * var(--gutter));
  }

  .page-segment .page-sources .sources > li {
    break-inside: avoid;
    margin-bottom: 12px;
  }

  .panel-todo__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* in two columns, the featured card takes the whole row when that leaves the last row full */
@media (min-width: 768px) and (max-width: 991px) {
  .blog-list .cards:not([data-filtered]):has(> :last-child:nth-child(2n + 1)) > .card-article--featured {
    grid-column: 1 / -1;
  }
}

/* Desktop */

@media (min-width: 992px) {
  .machine-list {
    --machine-cols: 3;
  }

  .machine-list:has(> li:last-child:nth-child(5n + 3)) {
    --machine-cols: 5;
  }

  .machine-list:has(> li:last-child:nth-child(4n)),
  .machine-list:has(> li:last-child:nth-child(4n + 3)) {
    --machine-cols: 4;
  }

  .machine-list:has(> li:last-child:nth-child(3n)) {
    --machine-cols: 3;
  }

  .segment-runs__head > .ehead,
  .sector-rules__head > .ehead {
    grid-column: 1 / span 6;
  }

  .segment-runs__text,
  .sector-rules__lead {
    grid-column: 7 / -1;
    padding-top: calc(var(--fs-label) * 1.2 + var(--sp-8));
  }

  .segment-runs__source {
    grid-column: 7 / -1;
  }

  .system__name {
    grid-column: 1 / span 5;
  }

  .system__texts {
    grid-column: 7 / -1;
  }

  .questions dt {
    grid-column: 1 / span 6;
  }

  .segment-cantic__head {
    grid-column: 1 / span 6;
  }

  .segment-cantic__text {
    grid-column: 7 / -1;
    padding-top: calc(var(--fs-label) * 1.2 + var(--sp-8));
  }

  h2:where(.free-test__title),
  p:where(.free-test__line) {
    grid-column: 1 / span 8;
  }

  div:where(.free-test__inner) > a {
    grid-column: 9 / -1;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: end;
    margin-top: 0;
  }

  .questions dd {
    grid-column: 7 / -1;
  }

  .system-section__head {
    grid-column: 1 / span 4;
  }

  .system-section__body {
    grid-column: 6 / -1;
  }

  .system-section__sticky {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
  }

  .guidance {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blog-list .cards,
  .related .cards:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .blog-list .card-article--featured {
    grid-column: span 2;
  }

  /* With every card showing, the featured card takes the room that keeps the last row full: two
     columns when the count leaves two over, two columns and two rows (the next two cards stacked
     beside it) when it leaves none, the whole row when it leaves one. A chip that hides cards sets
     data-filtered (js/blog.js) and the plain two columns come back. */
  .blog-list .cards:not([data-filtered]):has(> :last-child:nth-child(3n)) > .card-article--featured {
    grid-row: span 2;
  }

  .blog-list .cards:not([data-filtered]):has(> :last-child:nth-child(3n + 1)) > .card-article--featured {
    grid-column: 1 / -1;
  }

  .card-article--featured .card-article__title {
    max-width: 16em;
    font-size: var(--fs-section);
    line-height: 1.15;
    letter-spacing: -.025em;
  }

  .card-article--featured .lcard__text {
    max-width: 36em;
    font-size: var(--fs-body);
    line-height: 1.5;
  }

  /* Two rows tall, the featured card sets its title at statement size and the whole standfirst at
     lead size, from the top, so the first screen shows them */
  .blog-list .cards:not([data-filtered]):has(> :last-child:nth-child(3n)) > .card-article--featured .card-article__title {
    font-size: var(--fs-statement);
    letter-spacing: -.03em;
  }

  .blog-list .cards:not([data-filtered]):has(> :last-child:nth-child(3n)) > .card-article--featured .lcard__text {
    max-width: 30em;
    margin-top: var(--sp-24);
    font-size: var(--fs-lead);
    line-height: 1.45;
    letter-spacing: -.015em;
  }

  .article-head__main {
    grid-column: 4 / span 8;
  }

  .article-rail {
    grid-column: 1 / span 3;
    grid-row: 1;
  }

  .article-main {
    grid-column: 4 / span 8;
  }

  .article-rail__inner {
    position: sticky;
    top: calc(var(--nav-h) + 32px);
    padding-right: var(--gutter);
  }

  /* "What to do now" runs past the text to the grid's right edge (columns 4 to 12), so its two
     columns read at a comfortable width */
  .page-article .prose > .panel-todo {
    width: calc(.75 * (min(100vw, var(--max)) - 2 * var(--margin)) - .25 * var(--gutter));
  }

  /* beside the text the list stays open: no box, no fold */
  .toc {
    border: 0;
  }

  .toc__title {
    min-height: 0;
    padding: 0 0 12px;
    color: var(--fg-2);
    cursor: default;
    pointer-events: none;
  }

  .toc__title::after {
    display: none;
  }

  .toc__list {
    padding: 0;
  }
}

/* Phones and tablets: the rail's category and dates repeat the header, so only the list of
   sections stays, folded under its title above the text */
@media (max-width: 991px) {
  .article-rail__category,
  .article-rail__dates {
    display: none;
  }

  .article-rail {
    margin-bottom: var(--sp-24);
  }
}

@media (max-width: 767px) {
  /* on a phone the machines follow straight after the hero, each with its row */
  .page-segment .page-hero__machines {
    display: none;
  }

  .machine-list a {
    min-height: 48px;
  }

  .system-section__name {
    margin-top: var(--sp-16);
  }

  /* on phones a table in the text becomes a list of rows, as the design system's tables do
     (js/blog.js labels each cell with its column's heading) */
  .prose table,
  .prose tbody,
  .prose tr,
  .prose th,
  .prose td {
    display: block;
  }

  .prose thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .prose tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .prose tbody tr:first-child {
    border-top: 1px solid var(--outline);
  }

  .prose th,
  .prose td {
    padding: 0;
    border: 0;
  }

  .prose td + td {
    margin-top: 8px;
  }

  .prose td:first-child {
    font-size: var(--fs-body);
  }

  .prose .num {
    text-align: left;
  }

  .prose td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font: 400 var(--fs-label)/1.3 var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-2);
  }

  .prose td[data-label]:first-child::before {
    display: none;
  }

  .author-box {
    flex-direction: column;
    gap: 14px;
  }
}