.sy {
  --sy-release: 24px;
  --sy-chapters: 8;
  --cp-size: min(88vh, 82rem);
  --cp-clear: calc(var(--cp-size) / 2 + 2.5rem);
}
.sy { z-index: 4; }
.sy-stage {
  background: #000;
  color: var(--paper);
  overflow: visible;
  contain: none;
}
.sy-runway { height: var(--sy-release); }
/* Phones: no scroll runway, the page scrolls straight past the timeline. */
.sy.sy--tap,
.v6 .sy.sy--tap[data-story-flow] { --sy-release: 0px; }
/* Sideways swipes belong to the slider, not to browser back/forward. */
.sy.sy--tap { touch-action: pan-y; overscroll-behavior-x: none; }

.sy-ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
}
.sy .hero-media img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.sy .hero-media img:first-child { opacity: 1; }

.sy-slots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
}
.sy-slot {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
}
.sy-strip {
  position: absolute;
  left: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
.sy-strip i {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 55%;
}
@media (max-width: 767px) {
  .sy-strip i { background-position: center center; }
}

.sy-desat {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #808080;
  mix-blend-mode: saturation;
  pointer-events: none;
}

.sy-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #000;
  pointer-events: none;
}

.sy-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 180px 180px;
}

.sy-inner {
  position: absolute;
  inset: 0;
  z-index: 6;
  align-content: end;
  padding-bottom: 21.5rem;
}
.sy-body { grid-column: span 7 / content-end; text-align: right; }

.sy-eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.4rem;
  margin-bottom: 2.6rem;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-lift);
}
.sy-eyebrow i { width: 3.4rem; height: var(--hair); background: currentColor; opacity: .5; }

.sy-year-frame { overflow: hidden; padding: .06em 0; margin-bottom: 1.2rem; }
.sy-year {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12rem;
  line-height: 1;
  letter-spacing: -.014em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sy-dig { display: block; overflow: hidden; height: 1em; }
.sy-col { display: block; will-change: transform; }
.sy-col > span { display: block; height: 1em; text-align: center; }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sy-col > span {
    background-image: var(--gold-grad);
    background-size: 400% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .sy-dig:nth-child(1) .sy-col > span { background-position: 0% 50%; }
  .sy-dig:nth-child(2) .sy-col > span { background-position: 33.3333% 50%; }
  .sy-dig:nth-child(3) .sy-col > span { background-position: 66.6667% 50%; }
  .sy-dig:nth-child(4) .sy-col > span { background-position: 100% 50%; }
}

.sy-title {
  margin: 0 0 1.4rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #fff;
}
.sy-text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, .82);
  max-width: 46ch;
  margin-left: auto;
}

/* Gold words in a year's text, matching the founder's name in 1946. */
.sy-text em { font-style: normal; color: var(--gold); font-weight: 500; }

.sy-axis { position: absolute; inset: auto 0 9.5rem 0; z-index: 6; }
.sy-axis-in { grid-column: content; position: relative; padding-left: var(--cp-clear); }
.sy-axis-line {
  position: absolute;
  left: var(--cp-clear); right: 0; bottom: 0;
  height: var(--hair);
  background: rgba(255, 255, 255, .2);
}
.sy-axis-line i {
  display: block;
  height: 100%;
  background: var(--gold-lift);
  transform: scaleX(0);
  transform-origin: left center;
}
.sy-years {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0 0 1.4rem;
}
.sy-tick {
  display: block;
  width: auto;
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .36);
  font-variant-numeric: tabular-nums;
  transform-origin: center bottom;
  transition: color .5s var(--ease), transform .5s var(--ease-arch);
}
.sy-tick:hover { color: rgba(255, 255, 255, .72); }
.sy-tick.is-on { color: var(--gold-lift); transform: scale(1.18); }
.sy-tick:focus-visible { outline: var(--hair) solid var(--gold-lift); outline-offset: .5rem; }

.sy-foot { position: absolute; inset: auto 0 4.2rem 0; z-index: 6; align-items: center; row-gap: 1.6rem; }
.sy-foot-row {
  grid-column: content;
  grid-row: 2;
  padding-left: var(--cp-clear);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-top: 1.8rem;
}
.sy-caption, .sy-count {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
}
.sy-count b { color: var(--gold-lift); font-weight: 500; }

.sy-step {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-right: -.8rem;
}

.sy-arrow {
  flex: none;
  display: block;
  padding: 1.1rem .8rem;
  color: var(--gold, #d9b378);
  transition:
    transform .42s var(--ease-arch, cubic-bezier(.2, .9, .2, 1)),
    opacity .3s var(--ease),
    filter .35s var(--ease);
}

.sy-arrow svg {
  display: block;
  width: clamp(2.6rem, 2.4vw, 3.2rem);
  height: auto;
}

.sy-arrow[disabled] {
  opacity: .24;
  cursor: default;
}

@media (hover: hover) {
  .sy-arrow--back:hover:not([disabled]) {
    transform: translateX(-.55rem);
    filter: brightness(1.22) saturate(1.06);
  }
  .sy-arrow--on:hover:not([disabled]) {
    transform: translateX(.55rem);
    filter: brightness(1.22) saturate(1.06);
  }
}

@media (max-width: 1200px) {
  .sy-year  { font-size: 9.6rem; }
  .sy-title { font-size: 3rem; }
  .sy-body  { grid-column: span 8 / content-end; }
}

@media (max-width: 991px) {
  .sy-inner { padding-bottom: 19rem; }
  .sy-body  { grid-column: content; }
  .sy-year  { font-size: 7.6rem; }
  .sy-title { font-size: 2.7rem; }
  .sy-text  { font-size: 1.6rem; max-width: 52ch; }
  .sy-axis  { bottom: 9.5rem; }
  .sy-tick  { font-size: 1.25rem; }
}

@media (max-width: 767px) {
  .sy-inner { padding-bottom: 15.5rem; }
  .sy-year  { font-size: 5.8rem; }
  .sy-title { font-size: 2.3rem; margin-bottom: 1.1rem; }
  .sy-text  { font-size: 1.5rem; }

  .sy-years { display: none; }
  .sy-axis  { bottom: 7.5rem; }
  .sy-foot  { bottom: 2.6rem; }
  .sy-caption { display: none; }
  .sy-foot-row { justify-content: flex-end; }
}

@media (max-height: 720px) {
  .sy-year  { font-size: 6.6rem; }
  .sy-title { font-size: 2.6rem; }
  .sy-text  { font-size: 1.5rem; }
  .sy-inner { padding-bottom: 17.5rem; }
}

.cp {
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 0;
  width: var(--cp-size);
  aspect-ratio: 1;
  translate: -50% 21%;
  pointer-events: none;
  color: var(--gold-lift);
}
.cp svg { display: block; width: 100%; height: 100%; }

.cp circle,
.cp line,
.cp path { fill: none; stroke: currentColor; }

.cp-case    { stroke: url(#cpCase); stroke-width: 14; opacity: .85; }
.cp-case-in { stroke-width: 2.5; opacity: .5; }
.cp-bed     { fill: rgb(0 0 0 / .42); stroke: none; }

.cp-ring         { stroke-width: 1.4; opacity: .5; }
.cp-ring--faint  { stroke-width: 1; opacity: .22; }
.cp-cross        { stroke-width: 1; opacity: .16; }

.cp-ticks line { stroke: currentColor; }

.cp-deg {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: .38;
}

.cp-year {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 2px;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.cp-year.is-near { opacity: .42; }
.cp-year.is-on { opacity: 1; }

.cp-rose     { stroke-width: 1; }
.cp-rose--a  { fill: rgb(235 196 134 / .17); opacity: .9; }
.cp-rose--b  { fill: rgb(0 0 0 / .3); opacity: .55; }

.cp-pip { fill: currentColor; stroke: none; opacity: 0; transition: opacity .6s var(--ease); }
.cp-pip.is-near { opacity: .3; }
.cp-pip.is-on { opacity: 1; }

.cp-needle-n { fill: rgb(235 196 134 / .92); stroke-width: .8; }
.cp-needle-s { fill: rgb(0 0 0 / .55); stroke-width: .8; opacity: .8; }

.cp-hub    { fill: #0b0b0b; stroke-width: 2; opacity: .9; }
.cp-hub-in { fill: currentColor; stroke: none; opacity: .8; }

.cp-glass  { fill: url(#cpGlass); stroke: none; }

@media (max-width: 1200px) { .sy { --cp-size: min(78vh, 66rem); } }
@media (max-width: 991px)  {
  .sy {
    --cp-size: min(58vh, 41rem);
    --cp-clear: calc(var(--cp-size) / 2 + 1.4rem);
  }
}

@media (max-width: 767px) {
  .cp { display: none; }
  .sy { --cp-clear: 0px; }
}

.sy-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(270deg,
    rgb(var(--dark-rgb) / .74) 0%,
    rgb(var(--dark-rgb) / .52) 26%,
    rgb(var(--dark-rgb) / .18) 48%,
    rgb(var(--dark-rgb) / 0) 66%);
}