/* About — one page in chapters, on a dark ground (views/pages/about/index.php).
   Overview and the figures, Vision & Values, Manufacturing, Regional Presence
   and the Chairman's Message follow each other on two alternating darks, under
   a bar that names them; the years ruler closes the page as a door to History.

   The components it shares keep their own files: the pillars (pillars.css),
   the network (network.css), In Numbers (site.css). */

/* ------------------------------------------------------------ the dark ground
   The page's own tokens turned over, inside <main> only: every component that
   reads them (heads, lines, panels, links) follows without a rule
   of its own. The header and footer keep theirs. Two darks alternate, night
   and a step lifted from it; body text holds 7:1 or better on both. */
.page--dark {
  background: var(--eme-night);
}
.page--dark main {
  --eme-bg: var(--eme-night);
  --eme-bg-alt: #121517;
  --eme-text: #f3f5f6;
  --eme-text-muted: #a3a9ae;
  --eme-graphite: #b3b9be;
  --eme-line: rgba(255, 255, 255, 0.1);
  --eme-line-strong: rgba(255, 255, 255, 0.2);
  background: var(--eme-bg);
  color: var(--eme-text);
}

/* ---------------------------------------------------------------- type scale
   About reads as a document, not a showcase: one calm scale for the whole
   page. Section titles top out at 34px and the statements at 24–28px. The
   components it shares with Home and Contact (section heads, pillars,
   factory cards) are brought onto it here, so those pages keep their own
   sizes. In Numbers is the exception: it is the home page's band, set exactly
   as there (site.css), figures, heading and all. */
.page--dark .hero__title {
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.375rem);
}
.page--dark main .home-head__main {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
}
.page--dark main .home-head__lead {
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.1875rem);
}
.page--dark .pillar__title {
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
}
.page--dark .nc__name {
  font-size: var(--eme-step-3);
}

/* --------------------------------------------------------------- overview
   The welcome, on the home page's plate (home.css, .welcome) and quieter than
   it: deep red edge to edge, the greeting facing one sentence of who we are,
   and one red rule from screen edge to screen edge through the three
   countries. The brand gradient runs along its foot. The dates are the
   cover's and the network is Regional Presence's, so neither is repeated. */
.about-intro {
  position: relative;
  overflow: clip;
  background: var(--eme-red-deep);
  color: var(--eme-white);
  /* A little less below: the rule is the plate's floor, not more text. */
  padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem)
    clamp(3rem, 2rem + 3.5vw, 5rem);
}
.about-intro::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(
    90deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 62%,
    var(--eme-ember) 100%
  );
}
html[dir="rtl"] .about-intro::after {
  background: linear-gradient(
    270deg,
    var(--eme-red-ink) 0%,
    var(--eme-red) 62%,
    var(--eme-ember) 100%
  );
}
.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "rule" "message";
}
.about-intro__head {
  grid-area: head;
  display: grid;
  margin: 0;
  color: var(--eme-white);
  letter-spacing: 0;
}
.about-intro__kicker {
  margin-block-end: 0.15em;
  font-size: clamp(0.9375rem, 0.88rem + 0.2vw, 1.125rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.about-intro__title {
  font-size: clamp(1.375rem, 1.2rem + 0.55vw, 1.875rem);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
html[lang="ar"] .about-intro__kicker,
html[lang="ar"] .about-intro__title {
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
/* The countries sit on the rule; its two halves run out to the screen edges. */
.about-intro__rule {
  grid-area: rule;
  margin: clamp(0.75rem, 1.2vw, 1.25rem) 0 clamp(2rem, 4vw, 3rem);
  font-size: var(--eme-step-0);
  line-height: 1.3;
  color: rgb(255 255 255 / 0.9);
}
.about-intro__rule > span {
  position: relative;
  display: inline-block;
}
.about-intro__rule > span::before,
.about-intro__rule > span::after {
  content: "";
  position: absolute;
  inset-block-start: 55%;
  inline-size: 100vw;
  block-size: 1px;
  background: var(--eme-red);
}
.about-intro__rule > span::before {
  inset-inline-end: calc(100% + clamp(1rem, 2.5vw, 2.75rem));
  transform-origin: right;
}
.about-intro__rule > span::after {
  inset-inline-start: calc(100% + clamp(1rem, 2.5vw, 2.75rem));
  transform-origin: left;
}
html[dir="rtl"] .about-intro__rule > span::before {
  transform-origin: left;
}
html[dir="rtl"] .about-intro__rule > span::after {
  transform-origin: right;
}
/* One sentence in white, the one after it a step quieter. */
.about-intro__message {
  grid-area: message;
  max-inline-size: 58ch;
  margin: 0;
  font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.375rem);
  font-weight: 300;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.86);
  text-wrap: pretty;
}
.about-intro__message strong {
  font-weight: 600;
  color: var(--eme-white);
}
html[lang="ar"] .about-intro__message {
  line-height: 1.75;
}
/* Wide: the greeting faces the message across the plate, both on the line
   the rule then draws under them, as the home page's plate is set. */
@media (min-width: 62rem) {
  .about-intro__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas:
      "head message"
      "rule rule";
    align-items: end;
    column-gap: clamp(2.5rem, 4.5vw, 6rem);
  }
  .about-intro__rule {
    margin: clamp(2.25rem, 3.5vw, 3.5rem) 0 0;
  }
}

/* ---------------------------------------------------------------- chapters */
.chapter__head {
  margin-block-end: clamp(2.5rem, 1.8rem + 2.5vw, 4rem);
}
/* A part of a chapter: its name on a small blade, the head's in miniature.
   The list under it brings its own top rule. */
.chapter__sub {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0
    clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  font-size: var(--eme-step-2);
  font-weight: 600;
  line-height: 1.3;
}
.chapter__sub::before {
  content: "";
  flex: none;
  inline-size: 0.4rem;
  block-size: 1.1em;
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}
.chapter__head + .chapter__sub {
  margin-block-start: 0;
}

/* ------------------------------------------------------------------ vision
   The one light chapter between the darks: the page's tokens turned back
   over (and the pillars' inks with them), so the heads, lines, links and the
   pillars follow on their own. The vision is a framed card, its title at the
   top and the statement at the foot; the five values stand beside it; the
   four pillars run across the page under both. Body text holds 6:1 or better
   on the chalk. */
.page--dark main .about-vision {
  --eme-bg: var(--eme-chalk);
  --eme-text: var(--eme-obsidian);
  --eme-text-muted: #575c61;
  --eme-graphite: #4a4d50;
  --eme-line: rgba(26, 28, 30, 0.13);
  --eme-line-strong: rgba(26, 28, 30, 0.26);
  --pillars-line: rgba(26, 28, 30, 0.13);
  --pillars-icon: var(--eme-obsidian);
  --pillars-num: rgba(26, 28, 30, 0.18);
  --pillars-ink: var(--eme-obsidian);
  --pillars-body: #575c61;
  background: var(--eme-bg);
  color: var(--eme-text);
}

/* The card and the values: stacked, then side by side once the card can
   keep its portrait shape beside a readable column of values. */
.about-vision__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(3rem, 2rem + 3vw, 4.5rem) clamp(2.5rem, 1rem + 4vw, 6rem);
}
.about-vision__values .chapter__sub {
  margin-block-start: 0;
}
@media (min-width: 75rem) {
  .about-vision__lead {
    grid-template-columns: minmax(19rem, 4fr) minmax(0, 8fr);
    align-items: stretch;
  }
}

/* The card: a hairline frame in the ink, the title at the top, the statement
   at the foot and the room between them the card's own. Wide (a full-width
   card on a tablet), the statement moves to the far corner. */
.vision-card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(3rem, 2rem + 5vw, 7rem);
  min-block-size: clamp(22rem, 18rem + 10vw, 32rem);
  margin: 0;
  padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
  border: 1px solid var(--eme-obsidian);
}
.vision-card__title {
  max-inline-size: 11ch;
  margin: 0;
  font-size: clamp(1.875rem, 1.45rem + 1.2vw, 2.375rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
html[lang="ar"] .vision-card__title {
  line-height: 1.5;
  letter-spacing: 0;
}
.vision-card__quote {
  margin: 0;
}
.vision-card__quote p {
  max-inline-size: 34ch;
  margin: 0;
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}
/* The language's own quotation marks, in the brand red. The opening one
   hangs into the margin so the words, not the mark, line up with the title. */
.vision-card__quote p::before,
.vision-card__quote p::after {
  /* color: var(--eme-red); */
}
.vision-card__quote p::before {
  content: open-quote;
  margin-inline-start: -0.4em;
  display: inline-block;
  inline-size: 0.4em;
}
.vision-card__quote p::after {
  content: close-quote;
}
html[lang="ar"] .vision-card__quote p {
  line-height: 1.85;
}
@container (min-width: 36rem) {
  .vision-card__quote {
    align-self: flex-end;
  }
}

/* The values: rows on hairlines, the name over its line on a phone and
   beside it wherever there is room. */
.values {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--eme-line);
}
.values__item {
  display: grid;
  gap: 0.35rem var(--eme-space-5);
  padding-block: clamp(1rem, 0.8rem + 0.6vw, 1.4rem);
  border-block-start: 1px solid var(--eme-line);
}
.values__title {
  margin: 0;
  font-size: var(--eme-step-1);
  font-weight: 600;
  line-height: 1.4;
}
.values__item p {
  max-inline-size: 60ch;
  margin: 0;
  color: var(--eme-text-muted);
  line-height: 1.6;
}
@media (min-width: 36rem) {
  .values__item {
    grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr);
    align-items: baseline;
  }
}
/* The name takes the red as the pointer reaches its row. */
.values__title {
  transition: color var(--eme-fast) var(--eme-ease);
}
.values__item:hover .values__title {
  color: var(--eme-red);
}

.about-vision .pillars__grid {
  margin-block-start: 0;
}

/* ------------------------------------------------------------ manufacturing
   Three parts and a door: the line in a photograph beside one statement and
   the machines that run on it; what the factories hold to (ranges) beside
   what every unit passes (checks); then the invitation to see it, a quiet row
   under a hairline. */
.about-making__feature {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.about-making__photo {
  position: relative;
  margin: 0;
}
.about-making__photo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 45% 50%;
}
/* The brand's blade stands at the photograph's foot, on the side it faces. */
.about-making__photo::after {
  content: "";
  position: absolute;
  inset-block-end: clamp(-1rem, -1.5vw, -0.5rem);
  inset-inline-end: clamp(1.5rem, 3vw, 3rem);
  inline-size: clamp(0.6rem, 0.4rem + 0.5vw, 0.9rem);
  block-size: clamp(4rem, 3rem + 4vw, 7rem);
  background: var(--eme-red);
  transform: skewX(var(--eme-slant));
}
.about-making__intro p {
  max-inline-size: 62ch;
  margin: 0 0 1.1rem;
  color: var(--eme-text-muted);
}
.about-making__intro p:first-child {
  font-size: var(--eme-step-1);
  line-height: 1.65;
  color: var(--eme-text);
}
.about-making__sub {
  margin-block-start: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
}
@media (min-width: 62rem) {
  .about-making__feature {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(3rem, 5vw, 6.5rem);
    align-items: start;
  }
}
@media (max-width: 61.99rem) {
  /* The photograph opens the chapter as a wide frame, not a tall one. */
  .about-making__photo img {
    aspect-ratio: 4 / 3;
    object-position: 40% 42%;
  }
}

/* A spec list: the name in white, what it does beside it. */
.spec {
  display: grid;
  margin: 0;
  border-block-start: 1px solid var(--eme-line);
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem 2rem;
  padding-block: 1rem;
  border-block-end: 1px solid var(--eme-line);
}
.spec dt {
  font-weight: 600;
  color: var(--eme-text);
}
.spec dd {
  margin: 0;
  color: var(--eme-text-muted);
}
.spec dd strong {
  font-weight: 600;
  color: var(--eme-text);
}
/* The ranges read the other way round: what, quietly; the figure, bright. */
.spec--ranges dt {
  font-weight: 400;
  color: var(--eme-text-muted);
}
.spec--ranges dd {
  font-weight: 600;
  color: var(--eme-text);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 36rem) {
  .spec__row {
    grid-template-columns: minmax(9rem, 0.75fr) minmax(0, 1.25fr);
  }
  .spec--ranges .spec__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.about-making__proof {
  display: grid;
  gap: 0 clamp(3rem, 6vw, 6.5rem);
}
@media (min-width: 62rem) {
  .about-making__proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Every unit's checks, each on a red tick. */
.checks {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--eme-line);
}
.checks__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding-block: 1.1rem;
  border-block-end: 1px solid var(--eme-line);
}
.checks__mark {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid rgb(218 33 39 / 0.5);
  border-radius: 50%;
  color: #ff5a5f;
}
.checks__title {
  margin: 0.2rem 0 0.25rem;
  font-size: var(--eme-step-1);
  font-weight: 600;
}
.checks__item p {
  margin: 0;
  color: var(--eme-text-muted);
}
.checks__item p strong {
  font-weight: 600;
  color: var(--eme-text);
}
.checks__link {
  margin-block-start: var(--eme-space-5);
}

/* Manufacturing ends on the invitation to see it being made. */
.chapter__visit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--eme-space-5) var(--eme-space-7);
  margin-block-start: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  padding-block-start: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  border-block-start: 1px solid var(--eme-line-strong);
}
.chapter__visit-title {
  margin-block-end: var(--eme-space-2);
  font-size: var(--eme-step-2);
}
.chapter__visit p {
  max-inline-size: 60ch;
  margin: 0;
  color: var(--eme-text-muted);
}

/* ---------------------------------------------------------------- chairman
   The portrait stays in view beside the letter, below both bars. The letter
   is the chairman's own words, so its first paragraph is only set larger. */
@media (min-width: 900px) {
  .about-chairman .letter__portrait {
    inset-block-start: calc(
      var(--chapters-under) + var(--chapters-h) + var(--eme-space-5)
    );
  }
}
.about-chairman .letter__body p {
  color: rgb(255 255 255 / 0.74);
}
.about-chairman .letter__body > p:first-child {
  font-size: var(--eme-step-1);
  line-height: 1.6;
  color: var(--eme-text);
}
/* Both pictures are uploaded in the back office (Chairman), so whatever their
   shape the page keeps its own: the portrait in an upright 4:5 frame, cropped
   from the middle with the face kept in the upper part; the signature scaled
   to fit its line, never cropped. */
.about-chairman .letter__portrait img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
/* Black and white, when the back office asks for it: a filter on the picture
   as shown, so the uploaded file itself keeps its colour. */
.about-chairman .letter__portrait.is-mono img {
  filter: grayscale(1);
}
/* The signature is ink on paper (or on nothing). On the dark ground it is
   turned over: the ink comes out white and the paper, now black, is screened
   away, so a scan works as well as a transparent PNG. */
.about-chairman .letter__signature img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: 5.5rem;
  filter: grayscale(1) invert(1) brightness(1.1);
  mix-blend-mode: screen;
}
.about-chairman .letter__name {
  color: var(--eme-text);
}

/* ------------------------------------------------------------- the history
   The door to History: its head, then the years it covers set out as a ruler,
   one tick a year and each milestone at its own year, so the quiet years read
   as space. Marks alternate above and below the rule so neighbours never
   meet; each mark's words may take only the ruler up to its next neighbour on
   the same side (--room, in years, worked out in the template), and the last
   ones hang back from the far edge. Below 75rem it is a list down a rule. */
.about-history {
  border-block-start: 1px solid var(--eme-line);
}
.years {
  position: relative;
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  container-type: inline-size;
}
.years__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.years__node {
  display: block;
  inline-size: 0.5rem;
  block-size: 0.95rem;
  background: var(--eme-red);
  box-shadow: 0 0 0 4px var(--eme-bg);
  transform: skewX(var(--eme-slant));
}
.years__year {
  display: block;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--eme-white);
  font-variant-numeric: tabular-nums;
  font-family: var(--eme-font-latin);
}
.years__label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--eme-text-muted);
}
.years__event {
  display: block;
}
.years__tick {
  display: none;
}

/* Up to 75rem: a list down a rule on the inline-start edge. */
@media (max-width: 74.99rem) {
  .years__rule {
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0.2rem;
    inline-size: 1px;
    background: var(--eme-line-strong);
  }
  .years__list {
    display: grid;
    gap: 1.5rem;
  }
  .years__mark {
    position: relative;
    display: grid;
    grid-template-columns: 0.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: center;
  }
  .years__text {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: 1.1rem;
    align-items: baseline;
  }
  .years__year {
    font-size: 1.25rem;
  }
  .years__label {
    font-size: var(--eme-step-0);
  }
}
@media (min-width: 48rem) and (max-width: 74.99rem) {
  /* Tablets: two columns of years, still in order down each. */
  .years__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
  .years__rule {
    display: none;
  }
  .years__mark {
    padding-block-start: 0.75rem;
    border-block-start: 1px solid var(--eme-line);
  }
}

/* Wide: the ruler itself. */
@media (min-width: 75rem) {
  .years {
    --lane: 7rem;
    block-size: calc(var(--lane) * 2);
  }
  .years__rule {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: 1px;
    background: var(--eme-line-strong);
  }
  .years__tick {
    display: block;
    position: absolute;
    inset-block-start: -4px;
    inset-inline-start: var(--at);
    inline-size: 1px;
    block-size: 9px;
    background: rgb(255 255 255 / 0.32);
  }
  .years__mark {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--at);
    inline-size: 0;
    block-size: 0;
  }
  .years__node {
    position: absolute;
    inset-block-start: calc(0.95rem / -2);
    inset-inline-start: -0.25rem;
  }
  /* The year over its words, above the rule (below it, every other mark),
     starting at the mark and running toward the far end. */
  .years__text {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    inline-size: max-content;
    max-inline-size: calc(var(--room, 2) * 100cqi / var(--years, 11) - 1rem);
  }
  .years__mark--low .years__text {
    inset-block: 1.1rem auto;
  }
  .years__mark--end .years__text {
    inset-inline: auto 0;
    align-items: flex-end;
    text-align: end;
  }
}

/* ----------------------------------------------------------------- arrival
   site.js arms a chapter only when it starts below the fold, so a reader who
   lands on one, or reloads halfway down, sees it finished. Each part rises
   in as it reaches the screen and the head's blade grows; the pillars' icons
   draw themselves (pillars.css) and the map draws its routes (network.css) on their own. */
:is(
    .about-intro,
    .about-vision,
    .about-making,
    .about-chairman,
    .about-history
  ).is-armed
  [data-reveal]:not(.track, .track__step) {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
}
:is(
    .about-intro,
    .about-vision,
    .about-making,
    .about-chairman,
    .about-history
  ).is-armed
  [data-reveal].is-in:not(.track, .track__step) {
  opacity: 1;
  transform: none;
  transition:
    opacity 700ms var(--eme-ease) calc(var(--d, 0) * 120ms),
    transform 1000ms var(--eme-ease-out) calc(var(--d, 0) * 120ms);
}
.page--dark .is-armed .chapter__head .home-head__blade {
  transform: skewX(var(--eme-slant)) scaleY(0);
}
.page--dark .is-armed .chapter__head.is-in .home-head__blade,
.page--dark .is-armed .about-history .home-head.is-in .home-head__blade {
  transform: skewX(var(--eme-slant));
  transition: transform 900ms var(--eme-ease-out) 200ms;
}
.values__item:nth-child(2) {
  --d: 1;
}
.values__item:nth-child(3) {
  --d: 2;
}
.values__item:nth-child(4) {
  --d: 3;
}
.values__item:nth-child(5) {
  --d: 4;
}
.about-intro__rule {
  --d: 1;
}
.about-intro__message {
  --d: 2;
}
/* The rule draws out from the countries once its line is in view. */
.about-intro.is-armed .about-intro__rule > span::before,
.about-intro.is-armed .about-intro__rule > span::after {
  transform: scaleX(0);
}
.about-intro.is-armed .about-intro__rule.is-in > span::before,
.about-intro.is-armed .about-intro__rule.is-in > span::after {
  transform: none;
  transition: transform 1600ms var(--eme-ease-out) 350ms;
}
/* The ruler runs out, then each year lands in order. */
.is-armed .years:not(.is-in) .years__rule {
  transform: scaleX(0);
}
.is-armed .years.is-in .years__rule {
  transform: none;
  transform-origin: left center;
  transition: transform 1400ms var(--eme-ease-out) 150ms;
}
html[dir="rtl"] .is-armed .years.is-in .years__rule {
  transform-origin: right center;
}
.is-armed .years:not(.is-in) .years__mark {
  opacity: 0;
}
.is-armed .years.is-in .years__mark {
  opacity: 1;
  transition: opacity 600ms var(--eme-ease) calc(400ms + var(--n, 0) * 120ms);
}
@media (max-width: 74.99rem) {
  .is-armed .years:not(.is-in) .years__rule {
    transform: scaleY(0);
  }
  .is-armed .years.is-in .years__rule {
    transform-origin: center top;
  }
}