.story-r75 {
  background: #090d0d;
  color: #f4f6f3;
}

.story-r75 * { box-sizing: border-box; }

.story-r75-hero {
  position: relative;
  min-height: min(820px, 88vh);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #050706;
}

.story-r75-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-r75-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #050605ed 0%, #050605b3 46%, #05060522 76%),
    linear-gradient(0deg, #050605e3 0%, transparent 52%);
}

.story-r75-hero-copy {
  position: relative;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(110px, 18vh, 190px) 0 clamp(66px, 9vw, 110px);
  color: #fff;
}

.story-r75-kicker {
  margin: 0 0 14px;
  color: #54d9ff;
  font: 800 .78rem/1.2 ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.story-r75 h1,
.story-r75 h2 {
  margin: 0;
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.055em;
}

.story-r75 h1 { max-width: 930px; font-size: clamp(3.4rem, 9vw, 8rem); }
.story-r75 h2 { font-size: clamp(3rem, 7vw, 6.8rem); }
.story-r75 h1 span,
.story-r75 h2 span { color: #2cff11; }

.story-r75-hero-copy > p:not(.story-r75-kicker) {
  max-width: 610px;
  margin: 28px 0 26px;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.story-r75-hero-copy > a {
  color: #fff;
  font-weight: 800;
  text-underline-offset: 6px;
}

.story-r75-wrap,
.story-r75-grid,
.story-r75-finale > div {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

.story-r75-chapter,
.story-r75-memory,
.story-r75-finale { padding: clamp(72px, 11vw, 150px) 0; }

.story-r75-chapter { background: #0c1110; }
.story-r75-memory { background: #121817; }
.story-r75-memory-dark { background: #070b0a; }

.story-r75-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
}

.story-r75-copy {
  color: #e7ece8;
  font-size: clamp(1.02rem, 1.45vw, 1.24rem);
  line-height: 1.72;
}

.story-r75-copy p { margin: 0 0 1.15em; }
.story-r75-lead { font-size: 1.3em; font-weight: 800; line-height: 1.45; }
.story-r75-intro { width: 100%; margin-bottom: clamp(46px, 8vw, 100px); }

.story-r75-photos {
  columns: 4 230px;
  column-gap: clamp(17px, 2.2vw, 30px);
}

.story-r75-photos figure {
  --rx: 0deg;
  --mx: 0deg;
  --my: 0deg;
  --lift: 0px;
  --zoom: 1;
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(24px, 3vw, 40px);
  padding: clamp(9px, 1vw, 14px) clamp(9px, 1vw, 14px) clamp(16px, 1.8vw, 25px);
  break-inside: avoid;
  background: linear-gradient(135deg, #fffef8, #ebe5d7);
  border: 1px solid #d4ccbc;
  box-shadow: 2px 14px 28px #0009;
  color: #25292b;
  cursor: zoom-in;
  transform: perspective(900px) translateY(var(--lift)) scale(var(--zoom)) rotate(var(--rx)) rotateX(var(--my)) rotateY(var(--mx));
  transform-style: preserve-3d;
  transform-origin: center;
  transition: transform .13s ease-out, box-shadow .15s ease;
  will-change: transform;
  touch-action: pan-y;
}

.story-r75-photos figure:nth-child(6n+1) { --rx: -2.1deg; }
.story-r75-photos figure:nth-child(6n+2) { --rx: 1.6deg; }
.story-r75-photos figure:nth-child(6n+3) { --rx: -.7deg; }
.story-r75-photos figure:nth-child(6n+4) { --rx: 2.2deg; }
.story-r75-photos figure:nth-child(6n+5) { --rx: .7deg; }
.story-r75-photos figure:nth-child(6n) { --rx: -1.5deg; }

.story-r75-photos figure:hover,
.story-r75-photos figure:focus-visible {
  --lift: -7px;
  --zoom: 1.025;
  box-shadow: 0 24px 44px #000d;
  outline: none;
  z-index: 3;
}

.story-r75-photos figure:focus-visible { box-shadow: 0 0 0 3px #54d9ff, 0 24px 44px #000d; }
.story-r75-photos img { display: block; width: 100%; height: auto; background: #191b1a; }
.story-r75-photos figcaption { padding: 11px 3px 0; font: 600 clamp(.78rem, 1vw, 1rem)/1.25 "Segoe Print", "Bradley Hand", cursive; }

.story-r75-finale { background: #050807; color: #fff; }
.story-r75-finale > div { max-width: 850px; }
.story-r75-finale p:not(.story-r75-kicker) { font-size: clamp(1.04rem, 1.7vw, 1.25rem); line-height: 1.7; }
.story-r75-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.story-r75-lightbox {
  width: min(1180px, 96vw);
  height: min(930px, 94dvh);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 0;
  border: 1px solid #5c7076;
  background: #0c1111;
  color: #fff;
}

.story-r75-lightbox[open] { display: block; }
.story-r75-lightbox::backdrop { background: #000e; backdrop-filter: blur(7px); }
.story-r75-lightbox-shell { height: 100%; display: flex; flex-direction: column; padding: 12px; }
.story-r75-lightbox-top,
.story-r75-lightbox-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; }
.story-r75-lightbox-top { padding-bottom: 8px; color: #54d9ff; font: 700 .8rem ui-monospace, monospace; }
.story-r75-lightbox button { min-width: 46px; min-height: 46px; border: 1px solid #536568; background: #162020; color: #fff; }
.story-r75-lightbox img { width: 100%; min-height: 0; flex: 1; object-fit: contain; }
.story-r75-lightbox-bottom { padding-top: 10px; }
.story-r75-lightbox h2 { font: italic clamp(1.05rem, 2vw, 1.5rem)/1.3 Georgia, serif; letter-spacing: 0; text-align: center; }
.story-r75-lightbox h2 span { color: inherit; }

@media (max-width: 760px) {
  .story-r75-grid { grid-template-columns: 1fr; }
  .story-r75-photos { columns: 2 145px; column-gap: 14px; }
  .story-r75-hero-shade { background: linear-gradient(0deg, #050605ed 0%, #05060577 65%, #05060530); }
  .story-r75-hero-copy { width: min(100% - 28px, 1200px); }
  .story-r75-wrap,
  .story-r75-grid,
  .story-r75-finale > div { width: min(100% - 28px, 1200px); }
}

@media (max-width: 390px) {
  .story-r75-photos { columns: 1; }
  .story-r75-photos figure { max-width: 315px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-r75-photos figure { transition-duration: .01ms; }
}