/* Vertical timeline for the History page. */

/* ------------------------------------------------------------- paper theme
   The page runs on one warm ground from top to bottom. The header floats over
   the cover as it does over the home hero, in ink instead of white; the trail,
   the quote band and the footer give up their own grounds and sit on the
   paper, parted by hairlines rather than blocks of colour. The cover image
   fades out to exactly this colour along its foot, so nothing shows a seam.
   Lives here while History is the only page that asks for it
   (body_class('page--paper')); move it to site.css if another page does. */
.page--paper {
  --paper: var(--eme-history-bg);
  --paper-ink: var(--eme-text-history);
  --paper-muted: #57544f; /* 6.3:1 on the paper */
  --paper-line: rgba(26, 26, 26, 0.14);
  /* The floating bar's height: its top padding plus its row. */
  --paper-bar: calc(var(--eme-over-pad) + clamp(68px, 3.5rem + 1vw, 88px));
  background: var(--paper);
}

/* Header: transparent over the cover, dark mark and dark controls. Scrolled
   back into view, it turns to frosted paper rather than the home page's dark
   glass, so it never reads as a different surface. */
.site-header--paper {
  color: var(--paper-ink);
}
.site-header--paper::before {
  content: none;
}
.site-header--paper .logo-default {
  display: block;
}
.site-header--paper .logo-white {
  display: none;
}
.site-header--paper .lang-switch:hover {
  border-color: var(--paper-ink);
  background: rgba(26, 26, 26, 0.04);
}
.site-header--paper.is-scrolled {
  background: rgba(238, 235, 229, 0.88);
  backdrop-filter: blur(14px) saturate(1.1);
  border-block-end-color: var(--paper-line);
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.06);
}
/* Stepped out of the way, it leaves no shadow smudged along the top edge. */
.site-header--paper.is-hidden {
  box-shadow: none;
}
/* iOS carries a solid bar's colour into the status bar, and a frosted one as
   a grey band (see site.css): there the paper bar is solid paper. */
@supports (-webkit-touch-callout: none) {
  .site-header--paper.is-scrolled {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* The language button stays on a phone here (the home bar drops it below
   480px); the menu word goes instead, the bars alone still read as the menu. */
@media (max-width: 29.99rem) {
  .site-header--paper .lang-switch {
    display: inline-flex;
    padding-inline: 0.6rem;
  }
}
@media (max-width: 22.49rem) {
  .site-header--paper .menu-toggle__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The trail sits on the cover, just under the bar, instead of on a grey strip
   of its own between the two. */
.page--paper .breadcrumbs {
  position: absolute;
  inset-block-start: var(--paper-bar);
  inset-inline: 0;
  z-index: 2;
  background: transparent;
  border-block-end: 0;
}
.page--paper .breadcrumbs ol {
  color: var(--paper-muted);
}
.page--paper .breadcrumbs li + li::before {
  color: rgba(26, 26, 26, 0.3);
}
.page--paper .breadcrumbs [aria-current="page"] {
  color: var(--paper-ink);
}

/* Quote band: ink on paper, opened by a rule the timeline's spine runs down
   into. The buttons keep the site's red and outline pair. */
.page--paper .cta-band {
  background: transparent;
  color: var(--paper-ink);
}
.page--paper .cta-band__inner {
  padding-block: var(--eme-space-8);
  border-block-start: 1px solid var(--paper-line);
}
/* Without the red block behind it, the heading carries the band: set in the
   timeline's own heavy weight. */
.page--paper .cta-band__text h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
}
html[lang="ar"] .page--paper .cta-band__text h2 {
  letter-spacing: 0;
}
.page--paper .cta-band__text p {
  color: var(--paper-muted);
}
.page--paper .cta-band .btn {
  background: var(--eme-red);
  color: var(--eme-white);
}
.page--paper .cta-band .btn:hover {
  background: var(--eme-red-dark);
}
.page--paper .cta-band .btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--paper-ink);
}
.page--paper .cta-band .btn--ghost:hover {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: var(--eme-white);
}

/* Footer: the same paper, a rule above it, ink headings, links that turn red. */
.site-footer--paper {
  --footer-line: var(--paper-line);
  background: transparent;
  color: var(--paper-muted);
  padding-block-start: 0;
}
.site-footer--paper > .container {
  padding-block-start: var(--eme-space-8);
  border-block-start: 1px solid var(--paper-line);
}
.site-footer--paper .site-footer__title,
.site-footer--paper .site-footer__line,
.site-footer--paper .site-footer__reach a,
.site-footer--paper .site-footer__role {
  color: var(--paper-ink);
}
.site-footer--paper a:hover {
  color: var(--eme-red-dark);
}


.HistoryCover {
  /* 100%, not 100vw: on a desktop with a scrollbar 100vw is ~16px wider than
     the page, and the centred heading sat that much off centre. */
  width: 100%;
  min-height: 100vh;
  background-image: url(../../../imgs/History/HeroBG.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}
.HistoryHeadDiv {
  /* background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  ); */
  /* position: absolute; */
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  display: block;
  padding-bottom: 6rem;
  padding-top: 12rem;
  padding-inline: var(--eme-gutter);
}
.HistoryLogo {
  display: inline-block;
  max-width: 280px;
  width: 80%;
  height: auto;
}
.HistoryHeroDate {
  display: block;
  font-size: 22px;
  font-weight: 300;
  color: #171717;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
  text-align: center;
  /* margin-bottom: 2rem; */
}
/* 28px on a wide screen, stepping down on a phone (it had been set to 36px
   there, larger than on desktop, five heavy capital lines). */
.HistoryHeadDiv h1 {
  color: #171717;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 1.75rem);
  margin-bottom: 0;
}
.HistoryHeadDiv p {
  font-weight: normal;
  font-size: 16px;
  max-width: 1200px;
  margin: 0 auto;
}

.NewsBigDiv {
  position: relative;
  padding-top: 6rem;
  padding-bottom: 8rem;
  background-color: var(--eme-history-bg);
  overflow: hidden;
}
.TimelineSpine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: rgba(26, 26, 26, 0.2);
  transform: translateX(-50%);
  z-index: 1;
}
.NewsDiv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* max-width: 1300px; */
  margin: 0 auto 8rem;
  padding-left: 0rem;
  padding-right: 0rem;
  z-index: 2;
  box-sizing: border-box;
}
.NewsDiv:last-child {
  margin-bottom: 2rem;
}
.NewsDiv:nth-child(odd) {
  flex-direction: row;
}
.NewsDiv:nth-child(even) {
  flex-direction: row-reverse;
}

.YearWatermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(9rem, 22vw, 24rem);
  font-weight: 900;
  line-height: 0.8;
  color: rgba(26, 26, 26, 0.07);
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
  font-family: inherit;
  white-space: nowrap;
  display: none !important;
}
.TimelineNode {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.NodeRing {
  width: 32px;
  height: 32px;
  border-radius: 0%;
  border: 2px solid var(--eme-text-history);
  background-color: var(--eme-history-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--eme-history-bg);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}
.NewsDiv:hover .NodeRing {
  transform: scale(1.15);
  border-color: #000;
}
.NodeDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--eme-text-history);
}
.MilestoneMedia {
  width: 50%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  z-index: 2;
  padding: 6rem;
}
.NewsDiv:nth-child(even) .MilestoneMedia {
  justify-content: flex-end;
}
/* The <picture> around the image (img()) stays out of the layout: the image
   itself is the item placed and sized here. */
.MilestoneMedia picture {
  display: contents;
}
.HistoryPostImg {
  display: block;
  /* width: clamp(240px, 24vw, 360px);
  height: clamp(240px, 24vw, 360px); */
  width: auto;
  height: auto;
  max-width: 100%;
  /* border-radius: 50%; */
  object-fit: contain;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s ease;
  background-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
}
.HistoryPostImg:hover {
  /* transform: scale(1.04); */
  /* box-shadow: 0 22px 50px rgba(0, 0, 0, 0.18) !important; */
}
.HistoryTextDiv {
  width: 50%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  z-index: 2;
  padding: 6rem;
  position: relative;
  /* max-width: 540px; */
}
.NewsDiv:nth-child(odd) .HistoryTextDiv,
.NewsDiv:nth-child(even) .HistoryTextDiv {
  /* padding-right: 4rem; */
  /* padding-left: 1rem; */
  text-align: left;
  align-items: flex-start;
}

[dir="rtl"] .NewsDiv:nth-child(odd) .HistoryTextDiv,
[dir="rtl"] .NewsDiv:nth-child(even) .HistoryTextDiv {
  text-align: right;
  align-items: flex-start;
}

.YearPill {
  display: inline-block;
  background-color: var(--eme-text-history);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.HistoryTextDiv h2 {
  font-size: clamp(1.75rem, 3.2vw, 1.5rem);
  font-weight: 800;
  color: var(--eme-text-history);
  margin: 0 0 0.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.HistoryTextDiv h3 {
  font-size: clamp(1rem, 1.8vw, 1.29rem);
  font-weight: 600;
  color: #4a4a4a;
  margin: 0 0 1rem;
  line-height: 1.4;
  text-wrap: balance;
}
.HistoryTextDiv p {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  font-weight: 400;
  color: #2b2b2b;
  margin: 0;
  line-height: 1.65;
  /* max-width: 75%; */
  text-wrap: pretty;
}
.HistoryTextDiv .YearElement {
  display: none;
}

@media screen and (max-width: 1500px) {
  .HistoryTextDiv {
    padding-right: 6rem;
    padding-left: 4rem;
  }
  .HistoryHeadDiv p {
    max-width: 80%;
  }
}
@media (max-width: 991px) {
  .NewsBigDiv {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }
  /* The spine runs down the page's own gutter, so the column beside it is as
     wide as a phone allows. */
  .TimelineSpine {
    left: 1.5rem;
    transform: none;
  }
  [dir="rtl"] .TimelineSpine {
    right: 1.5rem;
    left: auto;
  }
  /* Each milestone's marker sits level with the top of its picture, where the
     entry begins, rather than halfway down a tall stack of picture and text. */
  .TimelineNode {
    top: 0;
    left: 1.5rem;
    transform: translate(-50%, 0);
  }
  [dir="rtl"] .TimelineNode {
    right: 1.5rem;
    left: auto;
    transform: translate(50%, 0);
  }
  .NewsDiv,
  .NewsDiv:nth-child(odd),
  .NewsDiv:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    padding-left: 3.5rem;
    padding-right: var(--eme-gutter);
    margin-bottom: 5rem;
  }
  [dir="rtl"] .NewsDiv,
  [dir="rtl"] .NewsDiv:nth-child(odd),
  [dir="rtl"] .NewsDiv:nth-child(even) {
    padding-right: 3.5rem;
    padding-left: var(--eme-gutter);
  }
  /* One column: every picture starts on the spine's side, at the text's edge.
     A block, not a flex row, so "start" follows the language on its own (the
     row's flex-end had put the Arabic pictures on the far, left side). */
  .MilestoneMedia,
  .NewsDiv:nth-child(even) .MilestoneMedia {
    display: block;
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 0;
  }
  /* The collages carry their own years and captions, so each is shown whole,
     in its own proportions: across the text column on a phone, no wider than
     32rem on a tablet, and never taller than most of the screen (a tall one
     narrows inside its box, held to the spine's side, instead of being
     cropped). The box takes its height from the width and height the image
     declares, so the page does not jump as the pictures arrive. */
  .HistoryPostImg {
    width: 100%;
    height: auto;
    max-width: 32rem;
    max-height: min(36rem, 72svh);
    object-position: left top;
  }
  [dir="rtl"] .HistoryPostImg {
    object-position: right top;
  }
  .HistoryTextDiv,
  .NewsDiv:nth-child(odd) .HistoryTextDiv,
  .NewsDiv:nth-child(even) .HistoryTextDiv {
    width: 100%;
    max-width: 100%;
    padding: 0;
    text-align: left;
    align-items: flex-start;
  }
  /* flex-start is the start of the line in either language; flex-end had set
     the Arabic year and title against the left edge. */
  [dir="rtl"] .HistoryTextDiv,
  [dir="rtl"] .NewsDiv:nth-child(odd) .HistoryTextDiv,
  [dir="rtl"] .NewsDiv:nth-child(even) .HistoryTextDiv {
    text-align: right;
    align-items: flex-start;
  }
  .YearWatermark {
    font-size: clamp(5.5rem, 24vw, 12rem);
    top: 35%;
  }
}
@media screen and (max-width: 950px) {
  .HistoryTextDiv {
    margin: 0;
  }
  .HistoryTextDiv h2 {
    font-size: 30px;
    margin-bottom: 10px;
    line-height: 1;
  }
}
/* Phones: a shorter cover (min-height, so the words never overflow it; a
   height lost to the 100vh minimum and did nothing), with the 12rem top
   padding cut back to what clears the floating bar and the trail under it,
   and body-text leading on the intro, which was set solid at line-height 1. */
@media screen and (max-width: 600px) {
  .HistoryHeadDiv {
    padding-top: calc(var(--paper-bar, 0px) + 4.5rem);
    padding-bottom: 4rem;
  }
  .HistoryHeadDiv p {
    font-size: 14px;
    line-height: 1.6;
  }
  .HistoryCover {
    min-height: 80svh;
  }
}
@media screen and (max-width: 500px) {
  .HistoryTextDiv h2 {
    font-size: 26px;
  }
  .HistoryTextDiv h3 {
    font-size: 16px;
  }
  .HistoryTextDiv p {
    font-size: 14px;
  }
  .HistoryHeadDiv p {
    font-size: 14px;
    line-height: 1.6;
  }
  .HistoryCover {
    min-height: 72svh;
  }
}