.pf {
  padding: clamp(40px, 4vw, 64px) 0;
}

.pf__anchor {
  display: block;
  scroll-margin-top: 96px;
}

.pf__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.pf__ord {
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}

.pf__status {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-border-visible);
  color: var(--color-text-tertiary);
}

.pf__name {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
}

.pf__lead {
  margin: var(--space-4) 0 0;
  max-width: 34ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--color-text-primary);
  text-wrap: pretty;
}

.pf__caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-5);
  margin-top: var(--space-6);
}

.pf__cap {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-visible);
}

.pf__cap-title {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.pf__cap-list {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.pf__cap-list li {
  padding: 3px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.pf__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.pf__next {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) ease;
}

.pf__next:hover,
.pf__next:focus-visible { color: var(--color-accent-text); }

.pf__next-ord {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--color-accent-text);
}

.pf__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--color-surface-tertiary);
}

.pf__media picture {
  position: absolute;
  inset: 0;
  display: block;
}

.pf__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.pf__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(24px, 3.2vw, 48px);
  padding-top: 160px;
  background: linear-gradient(to top, rgba(5, 9, 15, 0.72) 0%, rgba(5, 9, 15, 0.48) 45%, rgba(5, 9, 15, 0) 100%);
  pointer-events: none;
}

.pf__badge .pf__kicker { color: #F2F2F0; font-size: 13px; }
.pf__badge .pf__ord    { color: #9ED3F5; }
.pf__badge .pf__status { color: rgba(255, 255, 255, 0.82); border-left-color: rgba(255, 255, 255, 0.4); }

.pf__badge-name {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 1.8rem + 4.2vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #F2F2F0;
}

@media (min-width: 992px) {
  .pf__stage {
    --pf-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --pf-dur: 700ms;
    position: relative;
    height: clamp(560px, 44vw, 700px);
  }

  .pf__media {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 45%;
    transition: width var(--pf-dur) var(--pf-ease);
  }

  .pf__stage[data-side="right"] .pf__media { right: 0; }
  .pf__stage[data-side="left"]  .pf__media { left: 0; }

  .pf__badge {
    opacity: 0;
    transition: opacity 420ms var(--pf-ease), transform 420ms var(--pf-ease);
  }

  .pf__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .pf__stage[data-side="right"] .pf__panel { left: 0;  padding-right: clamp(32px, 4vw, 72px); }
  .pf__stage[data-side="left"]  .pf__panel { right: 0; padding-left:  clamp(32px, 4vw, 72px); }

  .js .pf__stage:not(.is-active) .pf__media { width: 100%; }
  .js .pf__stage:not(.is-active) .pf__badge { opacity: 1; }
  .js .pf__stage.is-active .pf__badge { transform: translateY(12px); }
  .js .pf__stage:not(.is-active) .pf__panel { pointer-events: none; }
  .js .pf__stage [data-step] {
    opacity: 0;
    transform: translateX(var(--pf-from, -16px));
    transition: opacity 520ms var(--pf-ease), transform 520ms var(--pf-ease);
  }
  .js .pf__stage[data-side="left"] [data-step] { --pf-from: 16px; }
  .js .pf__stage.is-active [data-step] { opacity: 1; transform: none; }

  .js .pf__stage.is-active [data-step="0"] { transition-delay: 240ms; }
  .js .pf__stage.is-active [data-step="1"] { transition-delay: 300ms; }
  .js .pf__stage.is-active [data-step="2"] { transition-delay: 360ms; }
  .js .pf__stage.is-active [data-step="3"] { transition-delay: 420ms; }
  .js .pf__stage.is-active [data-step="4"] { transition-delay: 480ms; }
  .js .pf__stage.is-active [data-step="5"] { transition-delay: 540ms; }
  .js .pf__stage.is-active [data-step="6"] { transition-delay: 600ms; }
  .js .pf__stage:not(.is-active) [data-step] { transition-duration: 240ms; transition-delay: 0s; }

  @media (hover: hover) and (pointer: fine) {
    .pf__stage:hover { --pf-dur: 520ms; }
    .js .pf__stage:hover .pf__media { width: 45%; }
    .js .pf__stage:hover .pf__badge { opacity: 0; transform: translateY(12px); }
    .js .pf__stage:hover [data-step] { opacity: 1; transform: none; }
    .js .pf__stage:hover .pf__panel { pointer-events: auto; }
  }
  .js .pf__stage:focus-within .pf__media { width: 45%; }
  .js .pf__stage:focus-within .pf__badge { opacity: 0; }
  .js .pf__stage:focus-within [data-step] { opacity: 1; transform: none; }
  .js .pf__stage:focus-within .pf__panel { pointer-events: auto; }

  @media (max-width: 1199px) {
    .pf__stage .pf__caps { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); margin-top: var(--space-5); }
    .pf__stage .pf__cap { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--space-4); padding-top: var(--space-2); }
    .pf__stage .pf__cap-list { margin: 0; }
    .pf__stage .pf__cap-list li { display: inline; padding: 0; line-height: 1.6; }
    .pf__stage .pf__cap-list li:not(:last-child)::after { content: "\00A0\00B7"; margin-right: 0.35em; color: var(--color-text-tertiary); }
    .pf__stage .pf__links { margin-top: var(--space-5); }
  }
}

@media (max-width: 991px) {
  .pf__media {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }

  .pf__panel .pf__id {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pf__panel { padding-top: var(--space-5); }
  .pf__panel .pf__lead { margin-top: 0; }

  .pf__img { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
  .js .pf__stage:not(.is-active) .pf__img { transform: scale(1.04); }

  .js .pf__stage [data-step] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js .pf__stage.is-active [data-step] { opacity: 1; transform: none; }
  .js .pf__stage.is-active [data-step="2"] { transition-delay: 60ms; }
  .js .pf__stage.is-active [data-step="3"] { transition-delay: 120ms; }
  .js .pf__stage.is-active [data-step="4"] { transition-delay: 180ms; }
  .js .pf__stage.is-active [data-step="5"] { transition-delay: 240ms; }
  .js .pf__stage.is-active [data-step="6"] { transition-delay: 300ms; }
}

@media (max-width: 767px) {
  .pf { padding: var(--space-6) 0; }

  .pf__media { aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; }
  .pf__badge { padding: 24px; padding-top: 96px; }

  .pf__caps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .pf__cap-list { margin-top: var(--space-2); }
  .pf__cap-list li { display: inline; padding: 0; line-height: 1.7; }
  .pf__cap-list li:not(:last-child)::after {
    content: "\00A0\00B7";
    margin-right: 0.35em;
    color: var(--color-text-tertiary);
  }

  .pf__links { margin-top: var(--space-5); }
  .pf__status { padding-left: 0; border-left: 0; flex-basis: 100%; }
}

.pf--fuels {
  padding: var(--space-8) 0;
  background: var(--color-surface-secondary);
}

.pf--fuels .pf__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: start;
}

.pf__name--display {
  font-size: clamp(3.25rem, 1.6rem + 6.4vw, 8.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

@media (min-width: 992px) {
  .pf--fuels .pf__head  { grid-column: 1 / 9; }
  .pf--fuels .pf__lead  { grid-column: 9 / 13; align-self: end; margin: 0; }
  .pf--fuels .pf__links { grid-column: 9 / 13; }
}

@media (max-width: 991px) {
  .pf--fuels .pf__head,
  .pf--fuels .pf__lead,
  .pf--fuels .pf__links { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .pf--fuels { padding: var(--space-7) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pf__media,
  .pf__badge,
  .pf__img,
  .js .pf__stage [data-step] { transition: none !important; }
  .js .pf__stage:not(.is-active) .pf__img { transform: none; }
}