.kababayan { padding-block: 0; }
.steps-outer { position: relative; }
.steps-sticky {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-8); align-items: center;
  padding-block: calc(var(--nav-h) + var(--space-5)) var(--space-6);
}
.steps-col .section-title { font-size: clamp(2.25rem, 4.2vw, 4.25rem); margin-bottom: var(--space-5); }
.steps { display: grid; border-top: var(--border-w) solid var(--border); }
.step {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--border);
  cursor: pointer; color: var(--muted);
  transition: color var(--dur-fast);
}
.step:hover { color: var(--fg); }
.step-year { padding-top: 0.35em; }
.step-title { font-weight: 700; font-size: var(--fs-lead); line-height: 1.3; }
.step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); }
.step-body > div { overflow: hidden; }
.step-body p { padding-top: var(--space-2); max-width: 52ch; font-size: var(--fs-small); color: var(--muted); }
.step-body img { display: none; }
.step.is-current { color: var(--fg); }
.step.is-current .step-year { color: var(--accent); }
.step.is-current .step-body { grid-template-rows: 1fr; }

.prints-col { position: relative; display: grid; justify-items: center; gap: var(--space-5); }
.prints-year {
  position: absolute; top: 46%; left: 50%; translate: -50% -50%; z-index: 0;
  font-family: var(--font-display); font-size: clamp(8rem, 17vw, 16rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px var(--border);
  pointer-events: none;
}
.prints { position: relative; z-index: 1; width: 100%; height: min(52vh, 460px); }
.print {
  position: absolute; left: 50%; top: 50%; margin: 0;
  padding: 8px; background: var(--paper); border-radius: 4px;
  box-shadow: 0 30px 60px var(--shadow);
  translate: -50% -50%; rotate: var(--rot, 0deg);
  opacity: 0; transform: translateY(60px) scale(0.96);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-slow) var(--ease-out), rotate var(--dur-slow) var(--ease-out), filter var(--dur-med);
}
.print img { height: calc(min(52vh, 460px) - 16px); width: auto; max-width: none; border-radius: 2px; }
.print.is-current { opacity: 1; transform: none; rotate: 0deg; z-index: 3; }
.print.is-past { opacity: 1; transform: translateX(var(--dx, 0)) scale(0.92); filter: grayscale(1) brightness(0.55); z-index: 2; }
.print.is-past-2 { opacity: 0.7; z-index: 1; }
.prints-cap { position: relative; z-index: 1; width: min(100%, 420px); text-align: center; }
.prints-cap .mono { color: var(--muted); display: flex; justify-content: center; gap: var(--space-3); }
.prints-cap .mono span:first-child { color: var(--fg); }
.prints-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1; margin-top: var(--space-2); text-wrap: balance; }
.prints-role { color: var(--muted); font-size: var(--fs-small); margin-top: var(--space-2); }
.prints-cap.is-swap > * { animation: cap-in 0.5s var(--ease-out) both; }
@keyframes cap-in { from { opacity: 0; translate: 0 8px; } }

@media (max-height: 820px) and (min-width: 961px) {
  .step { padding: var(--space-2) 0; }
  .steps-sticky { padding-block: calc(var(--nav-h) + var(--space-3)) var(--space-4); }
}
.prints-body, .prints-progress { display: none; }

@media (max-width: 960px) {
  .steps-sticky {
    grid-template-columns: 1fr; align-content: start; gap: var(--space-3);
    height: 100svh; min-height: 0; overflow: hidden;
    padding-block: calc(var(--nav-h) + var(--space-2)) var(--space-4);
  }
  .steps-col .eyebrow { margin-bottom: var(--space-2); }
  .steps-col .section-title { font-size: clamp(1.625rem, 6.4vw, 2.75rem); margin: 0; }
  .steps { display: none; }
  .prints-col { gap: var(--space-3); align-content: start; margin-top: var(--space-6); }
  .prints { height: 36svh; }
  .print { padding: 6px; }
  .print img { height: calc(36svh - 12px); }
  .print.is-past { transform: translateX(calc(var(--dx, 0) * 1.6)) scale(0.9); }
  .prints-year { top: 18svh; font-size: clamp(6.5rem, 34vw, 12rem); }
  .prints-cap { width: 100%; }
  .prints-title { font-size: clamp(1.625rem, 7vw, 2.25rem); }
  .prints-role { margin-top: var(--space-1); }
  .prints-body { display: block; margin: var(--space-2) auto 0; max-width: 44ch; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
  .prints-progress { display: flex; justify-content: center; gap: var(--space-1); }
  .prints-progress button {
    width: var(--touch); height: var(--touch); padding: 0; border: 0; background: none; cursor: pointer;
    display: grid; place-items: center;
  }
  .prints-progress button::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--border); transition: background-color var(--dur-fast); }
  .prints-progress button.is-done::before { background: var(--muted); }
  .prints-progress button[aria-current="true"]::before { background: var(--accent); }
}
@media (max-width: 960px) and (max-height: 700px) {
  .prints-col { margin-top: var(--space-4); }
  .prints { height: 30svh; }
  .print img { height: calc(30svh - 12px); }
  .prints-body { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .print { transition: none; }
}