/* =========================================================
   STORY — 05, the vault
   ========================================================= */

.story {
  background: var(--ink-100);
  overflow: hidden;
}

.story__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.story__head .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0.75rem;
}

.story__title em {
  font-style: italic;
  color: var(--gold-200);
}

.story__lede {
  max-width: 44ch;
  font-size: var(--step-0);
}

@media (max-width: 900px) {
  .story__head {
    grid-template-columns: 1fr;
  }
}

/* ---------------- the scan ---------------- */

.story__key {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding-block: clamp(2.48rem, 6.0vw, 5.22rem);
}

.story__plaque,
.story__device {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  will-change: transform;
}

.story__plaque {
  width: min(100%, 300px);
}

.story__device {
  width: min(100%, 250px);
}

.story__plaque figcaption,
.story__device figcaption {
  color: var(--bone-500);
  text-align: center;
}

/* The scanning band is clipped to the metal, so the light reads as
   falling ON the plaque rather than passing in front of it. */
.story__plaque-clip {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

.story__scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 16%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201, 162, 39, 0.08) 30%,
    rgba(233, 217, 163, 0.65) 50%,
    rgba(201, 162, 39, 0.08) 70%,
    transparent 100%
  );
  filter: blur(1px);
  mix-blend-mode: screen;
}

/* The link between the two. A hairline that brightens as the scan lands. */
.story__beam {
  position: relative;
  display: block;
  width: clamp(2rem, 7vw, 7rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
  transform-origin: left center;
}

.story__beam::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--gold-200);
  box-shadow: 0 0 12px 2px rgba(201, 162, 39, 0.6);
}

@media (max-width: 860px) {
  .story__key {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .story__beam {
    width: 1px;
    height: clamp(2rem, 8vw, 4rem);
    background: linear-gradient(180deg, transparent, var(--gold-300), transparent);
  }
}

/* ---------------- what it holds ---------------- */

.story__holds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.24rem, 2.4vw, 2.03rem);
}

@media (max-width: 1000px) {
  .story__holds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem;
  }
}

@media (max-width: 560px) {
  .story__holds {
    grid-template-columns: 1fr;
  }
}

.story__hold {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  will-change: transform;
}

.story__hold-k {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-300);
}

.story__hold-t {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.02;
  color: var(--bone-100);
}

.story__hold-d {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--step--1);
  line-height: 1.66;
  color: var(--bone-400);
  text-wrap: pretty;
}