.fc { position: relative; background: #121110; }
.fc-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; container-type: size; }
.fc-stage > picture, .fc-stage > video { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-stage img.fc-plate, .fc-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-stage video { display: none; }
.fc-stage video { filter: grayscale(1); }

.fc-board {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  transform: translate(-50%, -50%);
  container-type: size;
}

.fc-print {
  --cx: var(--lx); --cy: var(--ly); --cw: var(--lw); --cr: var(--lr);
  --h: 0; --dx: 0; --dy: 0; --dr: 0; --sx: 0.25; --sy: 0.5;
  position: absolute;
  left: calc(var(--cx) * 1%); top: calc(var(--cy) * 1%); width: calc(var(--cw) * 1%);
  transform:
    translate(-50%, -50%)
    translate(calc(var(--dx) * 1cqw), calc(var(--dy) * 1cqh))
    rotate(calc((var(--cr) + var(--dr)) * 1deg))
    scale(calc(1 + 0.8 * var(--h)));
  display: block;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.fc-print img {
  display: block; width: 100%; height: auto; border-radius: 0.3cqw;
  box-shadow:
    calc(var(--sx) * 1cqw) calc(var(--sy) * 1cqw) calc((0.5 + 3.2 * var(--h)) * 1cqw) rgba(0, 0, 0, calc(0.62 - 0.32 * var(--h))),
    0 0.08cqw 0.2cqw rgba(0, 0, 0, calc(0.5 * (1 - var(--h))));
  filter: brightness(calc(1 + 0.3 * var(--h) * var(--h))) blur(calc(var(--h) * var(--h) * 0.45cqw));
}
.fc-print:focus-visible { outline: 2px solid #E8591A; outline-offset: 4px; }
@media (hover: hover) {
  .fc-print.is-landed:hover img { filter: brightness(1.04); }
}

@media (max-aspect-ratio: 1/1) {
  .fc-stage { aspect-ratio: 9 / 16; }
  .fc-board { width: max(100cqw, calc(100cqh * 9 / 16)); height: max(100cqh, calc(100cqw * 16 / 9)); }
  .fc-print { --cx: var(--px); --cy: var(--py); --cw: var(--pw); --cr: var(--pr); }
  .fc-print img { filter: brightness(calc(1 + 0.3 * var(--h) * var(--h))); }
}

.fc.is-scrub { height: 550vh; }
.fc.is-scrub .fc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; aspect-ratio: auto; }
.fc.is-scrub video { display: block; opacity: 0; transition: opacity 0.25s; }
.fc.is-ready video { opacity: 1; }
.fc.is-scrub .fc-print { visibility: hidden; pointer-events: none; }
.fc.is-scrub .fc-print.is-in { visibility: visible; }
.fc.is-scrub .fc-print.is-landed { pointer-events: auto; }

.fc-lb {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #0c0b0a; color: #F8F7F3;
  overflow: hidden; overscroll-behavior: contain; touch-action: pan-x pinch-zoom;
}
.fc-lb::backdrop { background: rgba(12, 11, 10, 0.6); }
.fc-lb[open] { display: grid; place-items: center; }
.fc-lb figure { margin: 0; display: grid; justify-items: center; gap: 0.9rem; padding: 4.5rem 4.5rem 3.5rem; }
.fc-lb img {
  max-width: min(92vw, 1600px); max-height: calc(100dvh - 10rem);
  width: auto; height: auto; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.6);
}
.fc-lb-bar { position: absolute; top: calc(1.1rem + env(safe-area-inset-top, 0px)); right: 1.1rem; left: 1.1rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; opacity: 0.8; }
.fc-lb button {
  appearance: none; border: 1px solid rgba(248, 247, 243, 0.45); background: transparent; color: inherit;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; font: inherit; font-size: 1.15rem; cursor: pointer;
}
.fc-lb button:hover, .fc-lb button:focus-visible { border-color: #F8F7F3; background: rgba(248, 247, 243, 0.08); outline: none; }
.fc-lb-prev, .fc-lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.fc-lb-prev { left: 1.1rem; }
.fc-lb-next { right: 1.1rem; }
@media (max-width: 700px) {
  .fc-lb figure { padding: 4rem 0.75rem 5rem; }
  .fc-lb img { max-width: 96vw; max-height: calc(100dvh - 11rem); }
  .fc-lb-prev, .fc-lb-next { top: auto; bottom: 1.2rem; transform: none; }
  .fc-lb-prev { left: calc(50% - 3.5rem); }
  .fc-lb-next { right: calc(50% - 3.5rem); }
}

.pm { margin-top: clamp(2rem, 5vw, 3.5rem); }
.pm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }
.pm-word {
  --f: 1;
  margin: -0.22em -0.08em -0.08em 0;
  padding: 0.22em 0.08em 0.08em 0;
  font-size: clamp(2.6rem, 9vw, 8.5rem); font-weight: 700; line-height: 0.9;
  letter-spacing: -0.045em; text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(28, 25, 22, 0.32);
  background: linear-gradient(90deg, var(--soot) 0 calc(var(--f) * 100%), transparent calc(var(--f) * 100%));
  -webkit-background-clip: text; background-clip: text;
  width: fit-content;
}
.pm-text { margin: 0.8rem 0 0; max-width: 34rem; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.5; }
.pm-text .bk-mono { display: block; margin-bottom: 0.5rem; }

.pm.is-anim { margin-top: 0; }
.pm.is-anim .pm-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center;
}
.pm.is-anim .pm-list {
  width: 100%;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); row-gap: 0;
  align-items: center;
}
.pm.is-anim .pm-item { display: contents; }
.pm.is-anim .pm-word {
  grid-column: 1;
  font-size: clamp(2.6rem, min(14vh, 9.5vw), 9rem);
  transition: opacity 0.4s, transform 0.5s cubic-bezier(.2, .8, .2, 1);
}
.pm.is-anim .pm-item:nth-child(1) .pm-word { grid-row: 1; }
.pm.is-anim .pm-item:nth-child(2) .pm-word { grid-row: 2; }
.pm.is-anim .pm-item:nth-child(3) .pm-word { grid-row: 3; }
.pm.is-anim .pm-item:nth-child(4) .pm-word { grid-row: 4; }
.pm.is-anim .pm-item:nth-child(5) .pm-word { grid-row: 5; }
.pm.is-anim .pm-item:nth-child(1) .pm-text { grid-row: 1; }
.pm.is-anim .pm-item:nth-child(2) .pm-text { grid-row: 2; }
.pm.is-anim .pm-item:nth-child(3) .pm-text { grid-row: 3; }
.pm.is-anim .pm-item:nth-child(4) .pm-text { grid-row: 4; }
.pm.is-anim .pm-item:nth-child(5) .pm-text { grid-row: 5; }
.pm.is-anim .pm-word.is-past { opacity: 0.28; }
.pm.is-anim .pm-word.is-cur { transform: translateX(clamp(0.4rem, 1.2vw, 1.2rem)); }
.pm.is-anim .pm-text {
  grid-column: 2; align-self: center; margin: 0;
  max-width: 30rem; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.4;
  opacity: 0; transform: translateY(1rem);
  transition: opacity 0.45s, transform 0.6s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}
.pm.is-anim .pm-text.is-cur { opacity: 1; transform: none; }

@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .pm.is-anim .pm-stage { align-items: center; padding-top: 4rem; }
  .pm.is-anim .pm-list { grid-template-columns: minmax(0, 1fr); }
  .pm.is-anim .pm-word { font-size: clamp(2.4rem, 15vw, 6rem); }
  .pm.is-anim .pm-item:nth-child(n) .pm-text { grid-column: 1; grid-row: 6; margin-top: 1.6rem; min-height: 8.5rem; font-size: 1.1rem; }
}