/* Home slide */

.slide--home .blob {
  left: 760px;
  top: 60px;
  width: 600px;
  height: 520px;
}

/* The name. h1 holds the real text once. Everything else is aria-hidden. */
.name,
.lens-name,
.pio-front {
  font-family: var(--font-display);
  font-style: italic;
  font-stretch: 125%;
  font-weight: 900;
  font-size: var(--name-size);
  line-height: 0.86;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.name {
  left: var(--name-x);
  top: var(--name-y);
  margin: 0;
}

.name-line {
  position: relative;
  display: block;
  white-space: nowrap;
}

.name-line--outline {
  color: transparent;
  -webkit-text-stroke: 1.4px var(--outline);
}

/* PIOQUINTO: solid, with the split shadow. On phone and tablet the stripe band
   is cut out with --pio-clip (set by js/layout.js), so it stays hollow there. */
.pio-solid {
  color: var(--name);
  text-shadow: 3px 0 0 var(--split), -3px 0 0 rgba(0, 200, 255, 0.6);
  clip-path: var(--pio-clip, none);
}

/* A second copy of the name lives inside a wrapper with the same position,
   size and clip-path as the stripe, so it only shows inside the stripe. */
.lens-name {
  position: absolute;
  left: calc(var(--name-x) - var(--strip-x));
  top: var(--name-y);
}

.lens-line {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--lens-line);
}

.lens-line--pio {
  color: var(--lens-fill);
  -webkit-text-stroke: 0;
  text-shadow: 3px 0 0 var(--split), -3px 0 0 rgba(0, 200, 255, 0.6);
}

.diag {
  left: 520px;
  top: 500px;
  width: 200px;
  height: 200px;
}

.portrait {
  position: absolute;
  left: var(--photo-x);
  bottom: var(--photo-bottom);
  height: var(--photo-h);
  width: auto;
  max-width: none;
  filter: var(--photo);
}

/* Outline only PIOQUINTO in front of the portrait */
.pio-front {
  left: var(--name-x);
  top: calc(var(--name-y) + 2 * 0.86 * var(--name-size));
  color: transparent;
  -webkit-text-stroke: 1.4px var(--name);
  clip-path: var(--pio-clip, none);
  pointer-events: none;
}

.bar {
  left: var(--name-x);
  top: var(--bar-y);
  width: var(--bar-w);
  height: var(--bar-h);
  background: var(--accent);
  transform: skewX(-20deg);
  box-shadow: 0 0 14px rgba(30, 111, 255, 0.7);
}

.role {
  left: var(--name-x);
  top: var(--role-y);
  display: flex;
  gap: var(--role-gap);
}

.role-rule {
  width: 1px;
  background: var(--rule);
}

.role-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.role-title {
  font-size: var(--role-fs);
  letter-spacing: 0.2em;
  color: var(--role-title);
}

.role-desc {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  line-height: 1.85;
  color: var(--muted);
}

.scroll-cue {
  left: 84px;
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.scroll-cue svg {
  width: 20px;
  height: 32px;
}

@media (max-width: 1023.98px) {
  .slide--home .blob {
    left: 45%;
    top: 60px;
    width: var(--blob-w, 360px);
    height: var(--blob-w, 360px);
  }

  .lens-line--pio {
    color: transparent;
    -webkit-text-stroke: 1.4px var(--lens-line);
    text-shadow: none;
  }

  .diag,
  .prompt,
  .role-desc,
  .scroll-cue {
    display: none;
  }

  .role-title {
    padding: 2px 0;
  }

  .role-text {
    gap: 0;
  }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
  :root {
    --blob-w: 560px;
  }
}

@media (max-width: 599.98px) {
  :root {
    --blob-w: 360px;
  }
}