/* "Our Story" on the About page: a YouTube video behind our own player.

   The markup lives in the page's CMS block (a .story element with the video
   id); story-video.js builds the player around it. Without the script, the
   poster is a plain link to the video on YouTube.

   YouTube's own chrome never shows: the iframe has controls=0, it is taller
   than its box so the title bar at the top is clipped away, a transparent
   shield takes every click and hover, and whenever the video is paused or
   finished our poster covers the frame - which is also what stops the
   "more videos" panel appearing at the end. */

.story {
  /* straight under the section's paragraphs: their own 20px of padding is
     below them, this makes up the rest */
  margin: 16px auto 0;
  text-align: center;
}

/* ------------------------------------------------------------ the player */
.story__player {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: 0;
  overflow: hidden;
  border-radius: 14px;
  /* no dark ground under the poster: it would show as a thin fringe along
     the anti-aliased edge of the rounded corners */
  background: transparent;
  box-shadow: 0 18px 40px -18px rgba(27, 28, 29, 0.45);
  outline: none;
  text-align: left;
  /* how much of the iframe hangs above and below the box - enough to hide
     YouTube's title bar at any width */
  --clip: max(52px, 14%);
}
@supports not (aspect-ratio: 16 / 9) {
  .story__player { height: 0; padding-bottom: 56.25%; }
}
.story__player:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ff0801; }

/* the frame the YouTube iframe sits in */
.story__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}
.story--started .story__frame { background: #000; }
.story__frame iframe {
  /* laid out 1920 wide and scaled to the box by the script (see fit()):
     that width is what makes YouTube serve 1080p */
  position: absolute;
  left: 0;
  top: calc(-1 * var(--clip));
  width: 100%;
  height: calc(100% + 2 * var(--clip));
  border: 0;
  transform-origin: 0 0;
}

/* the poster: the still, the big play button, and the headline if any */
.story__poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.35s ease;
}
.story__poster::after {
  /* a soft base so the bar and any headline read against the picture */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}
.story__still {
  /* two pixels of overscan: YouTube's thumbnail carries a dark edge column,
     which showed as a hairline down the right side */
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  max-width: none;
  height: calc(100% + 4px);
  object-fit: cover;
  display: block;
}
.story__play {
  /* bottom right, clear of the headline printed on the thumbnail: a red
     disc with the triangle, the label and the running time, on frosted
     glass; once the controls bar exists it lifts above it */
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 22px 0 0;
  border-radius: 999px;
  background: rgba(22, 23, 26, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #fff;
  white-space: nowrap;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.story__play-ico {
  position: relative;
  flex: none;
  /* the disc is the pill's left cap: the same height, no inset */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff0801;
  box-shadow: 0 6px 16px rgba(255, 8, 1, 0.3);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.story__glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  fill: #fff;
  display: block;
}
.story__glyph--play { margin-left: -12px; }
.story__glyph--replay { display: none; }
.story__play-txt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
}
.story__play-dur {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: rgba(255, 255, 255, 0.68);
  font-variant-numeric: tabular-nums;
}
/* without the script the control is the disc alone, and the poster is a
   link to the video on YouTube */
.story__play:empty { width: 56px; height: 56px; padding: 0; }
.story__play:empty::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -9px 0 0 -6px;
  border-style: solid;
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #fff;
}
.story__play:empty { background: #ff0801; }
.story__poster:hover .story__play,
.story__poster:focus-visible .story__play { background: rgba(22, 23, 26, 0.62); transform: translateY(-1px); }
.story__poster:hover .story__play-ico,
.story__poster:focus-visible .story__play-ico { background: #e60700; }
.story__poster:focus-visible { outline: none; }

/* while the video is loading the disc becomes a ring */
.story--loading .story__glyph { display: none; }
.story--loading .story__play-ico::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: story-spin 0.8s linear infinite;
}
@keyframes story-spin { to { transform: rotate(360deg); } }

/* finished: the same disc, with the replay glyph */
.story--ended .story__glyph--play { display: none; }
.story--ended .story__glyph--replay { display: block; }
.story--ended .story__play-dur,
.story--paused .story__play-dur { display: none; }
/* with the controls bar on show, the pill sits above it */
.story--started .story__play { bottom: 76px; }

/* playing: the poster lifts off and the shield takes the clicks */
.story--playing .story__poster { opacity: 0; pointer-events: none; }
.story__shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.story--playing .story__shield { display: block; }
.story__shield:focus { outline: none; }

/* ---------------------------------------------------------- the controls */
.story__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: none;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 10px 18px 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  color: #fff;
  transition: opacity 0.25s ease;
}
.story--started .story__bar { display: flex; }
.story--playing.story--idle-bar .story__bar { opacity: 0; }
.story--playing.story--idle-bar .story__shield { cursor: none; }
.story__time {
  flex: none;
  min-width: 34px;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.story__dur { color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.story__track {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.story__track::before,
.story__buffer,
.story__fill {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  height: 3px;
  border-radius: 2px;
}
.story__track::before { right: 0; background: rgba(255, 255, 255, 0.35); }
.story__buffer { width: 0; background: rgba(255, 255, 255, 0.3); }
.story__fill { width: 0; background: #ff0801; }
.story__knob {
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 13px;
  margin-left: -6px;
  border-radius: 50%;
  background: #ff0801;
  box-shadow: 0 0 0 3px rgba(255, 8, 1, 0.25);
  transition: transform 0.15s ease;
}
.story__track:hover .story__knob,
.story__track:focus-visible .story__knob { transform: scale(1.25); }
.story__track:focus-visible::before { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
.story__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}
.story__btn:hover { background: rgba(255, 255, 255, 0.14); }
.story__btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.story__btn svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.story__btn[hidden] { display: none; }
.story__btn--cc {
  width: auto;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.story__btn--cc span {
  display: inline-block;
  padding: 2px 4px;
  border: 2px solid #fff;
  border-radius: 4px;
  line-height: 1;
}
.story__btn--cc[aria-pressed="true"] span { background: #fff; color: #1b1c1d; }
.story__btn .ico--off { display: none; }
.story__btn[aria-pressed="true"] .ico--on { display: none; }
.story__btn[aria-pressed="true"] .ico--off { display: block; }

/* ------------------------------------------------------------ full screen */
.story__player:fullscreen,
.story__player:-webkit-full-screen {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
}

/* --------------------------------------------------------------- phones */
@media all and (max-width: 599px) {
  .story { margin-top: 10px; }
  .story__player { border-radius: 10px; }
  .story__play { right: 14px; bottom: 14px; gap: 10px; padding: 0 16px 0 0; }
  .story--started .story__play { bottom: 62px; }
  .story__play-ico { width: 42px; height: 42px; }
  .story__glyph { width: 19px; height: 19px; margin: -9.5px 0 0 -9.5px; }
  .story__glyph--play { margin-left: -10px; }
  .story__play-txt { font-size: 14px; }
  .story__play-dur { font-size: 12px; }
  .story--loading .story__play-ico::after { inset: 9px; }
  .story__bar { height: 50px; gap: 10px; padding: 8px 12px 0; }
  .story__btn { width: 30px; height: 30px; }
  .story__btn svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .story__poster, .story__play, .story__play-ico, .story__bar, .story__knob { transition: none; }
}

/* ------------------------------------------- a play button on a block image
   (a .story-trigger marker in the block's text); the film opens in a popup */
.story-trigger__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  -webkit-appearance: none;
  appearance: none;
}
.story-trigger__disc {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #ff0801;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.story-trigger__disc svg {
  /* the glyph sits right of its box's middle (it spans 8 to 19.7 of 24), so
     the left margin centres the triangle itself, with a pixel of optical lead */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -17.5px;
  fill: #fff;
}
.story-trigger__label {
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(15, 16, 18, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.story-trigger__btn:hover .story-trigger__disc,
.story-trigger__btn:focus-visible .story-trigger__disc { transform: scale(1.06); background: #e60700; }
.story-trigger__btn:focus-visible { outline: none; }
.story-trigger__btn:focus-visible .story-trigger__disc { outline: 3px solid #fff; outline-offset: 3px; }

/* the popup: the film 16:9 over a darkened page, a close button above it */
.story-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.story-modal.is-open { display: flex; }
.story-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 18, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.story-modal__box {
  position: relative;
  width: 100%;
  max-width: 1100px;
}
.story-modal__box .story { margin: 0; }
.story-modal__box .story__player { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); }
.story-modal__close {
  position: absolute;
  right: 0;
  top: -56px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}
.story-modal__close:hover { background: rgba(255, 255, 255, 0.26); }
.story-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.story-modal__close svg { width: 22px; height: 22px; fill: #fff; }
html.story-modal-open { overflow: hidden; }

@media all and (max-width: 599px) {
  .story-trigger__btn { gap: 10px; }
  .story-trigger__disc { width: 62px; height: 62px; }
  .story-trigger__disc svg { width: 26px; height: 26px; margin: -13px 0 0 -14px; }
  .story-trigger__label { padding: 8px 14px; font-size: 13px; }
  .story-modal { padding: 12px; }
  .story-modal__box .story__player { border-radius: 10px; }
  .story-modal__close { top: -52px; width: 40px; height: 40px; }
}