:root {
  --black: #000;
  --white: #fff;
  --grey-title: #8d8d8d;
  --grey-text: #ababab;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Outfit", var(--font-sans);
  --page-max: 1440px;
  --header-h: 82px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

html.is-splashing {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

main {
  overflow-x: clip;
}

h1,
h2,
h3,
p,
blockquote,
ol {
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
}

/* Header — mirrors home.nicolemiller.com: nav left, logo centred, social right; no rule underneath. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 max(20px, 2vw);
  background: var(--white);
  font-family: var(--font-label);
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-header ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header a {
  color: var(--black);
  text-decoration: none;
}

.site-nav > ul {
  gap: 14px;
}

.site-nav > ul > li {
  position: relative;
}

.site-nav__title {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-family: var(--font-label);
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}

.site-nav__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out);
}

.site-nav__title:hover::after,
.site-nav__title:focus-visible::after,
.site-nav__folder:hover .site-nav__title::after,
.site-nav__folder.is-open .site-nav__title::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.site-header .site-nav__dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: -16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 232px;
  padding: 8px 16px;
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.site-nav__folder.is-open .site-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .site-nav__folder:hover .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
}

.site-nav__dropdown a {
  display: block;
  padding: 3px 0;
  font-family: var(--font-label);
  font-size: 16px;
  line-height: 20.8px;
  white-space: nowrap;
  transition: opacity 0.15s linear;
}

.site-nav__dropdown a:hover,
.site-nav__dropdown a:focus-visible {
  opacity: 0.6;
}

.site-header__logo {
  grid-column: 2;
}

.site-header__logo img {
  width: 156px;
  height: auto;
}

.site-social {
  justify-self: end;
  gap: 14px;
}

.site-social a,
.site-footer__social a,
.site-menu__social a {
  display: block;
  transition: transform 0.35s var(--ease-spring), opacity 0.2s ease;
}

.site-social a:hover,
.site-social a:focus-visible,
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  opacity: 0.7;
  transform: translateY(-3px) rotate(-8deg);
}

.site-social svg,
.site-footer__social svg,
.site-menu__social svg {
  display: block;
  fill: currentColor;
}

.site-header__toggle,
.site-menu {
  display: none;
  font-family: var(--font-label);
}

@media (max-width: 767px) {
  .site-header {
    padding: 0 6vw;
  }

  .site-nav,
  .site-header .site-social {
    display: none;
  }

  .site-header__toggle {
    position: relative;
    display: block;
    grid-column: 1;
    grid-row: 1;
    width: 47px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  .site-header__toggle span {
    position: absolute;
    left: 6px;
    width: 35px;
    height: 1px;
    background: var(--black);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-header__toggle span:nth-child(1) {
    top: 16px;
  }

  .site-header__toggle span:nth-child(2) {
    top: 27px;
  }

  .site-header__toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg) scaleX(0.72);
  }

  .site-header__toggle[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-5.5px) rotate(-45deg) scaleX(0.72);
  }

  .site-header__logo {
    grid-row: 1;
  }

  .site-header__logo img {
    width: 104px;
  }

  .is-menu-open,
  .is-menu-open body {
    overflow: hidden;
  }

  .is-menu-open .site-header {
    background: transparent;
  }

  /* Full-screen overlay; the header (X and logo) stays on top of it. */
  .site-menu {
    position: fixed;
    inset: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    padding: var(--header-h) 0 38px;
    background: #dcdcdc;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.6s;
  }

  .site-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .site-menu__panels {
    position: relative;
    flex: 1;
    overflow: hidden;
  }

  .site-menu__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 20px 7vw;
    list-style: none;
    overflow-y: auto;
    transition: transform 0.5s var(--ease-out), opacity 0.35s ease, visibility 0s linear 0.5s;
  }

  .site-menu__panel--root {
    justify-content: center;
  }

  .site-menu__panel:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    transform: translateX(40%);
  }

  .site-menu__panel--root:not(.is-active) {
    transform: translateX(-40%);
  }

  .site-menu__panel.is-active {
    transition: transform 0.5s var(--ease-out), opacity 0.35s ease;
  }

  .site-menu__list {
    display: flex;
    flex-direction: column;
    gap: 38px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-menu__panel--root > li + li {
    margin-top: 38px;
  }

  .site-menu__link,
  .site-menu__list a,
  .site-menu__back {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0;
    border: 0;
    background: none;
    color: var(--black);
    font-family: var(--font-label);
    font-size: 32px;
    line-height: 1;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .site-menu__back {
    align-self: flex-start;
    margin: 0 0 48px 0.5em;
    color: rgba(0, 0, 0, 0.45);
  }

  .site-menu__chevron {
    width: 0.42em;
    height: 0.74em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    flex: none;
  }

  .site-menu__back .site-menu__chevron {
    transform: scaleX(-1);
  }

  .site-menu__social {
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 20px 7vw 0;
    list-style: none;
  }

  .site-menu__social a {
    color: var(--black);
  }

  .site-menu__social svg {
    width: 25px;
    height: 25px;
  }
}

/* Footer — mirrors home.nicolemiller.com. */

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 104px;
  font-family: var(--font-label);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.site-footer__social {
  display: flex;
  gap: 12px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}

.site-footer__social a,
.site-footer__link {
  color: var(--black);
}

.site-footer__link {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s linear;
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  opacity: 0.6;
}

@media (max-width: 767px) {
  .site-footer {
    padding: 35px 6vw 50px;
  }

  .site-footer__social {
    margin: 42px 0 30px;
  }
}

/* Splash */

.splash {
  display: none;
}

.js .splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 24px;
  background: var(--white);
  transition: opacity 1.6s ease-in-out;
}

.splash__title {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
  transition: opacity 1.2s ease-in-out 0.6s;
}

.splash__title img,
.splash__writing {
  display: block;
  width: min(848px, 100%);
  min-width: 0;
  height: auto;
}

.splash__title img {
  visibility: hidden;
}

.splash__skip {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: var(--font-label);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-title);
  cursor: pointer;
  animation: fade-in 0.8s ease 1.2s both;
  transition: color 0.2s ease;
}

.splash__skip:hover,
.splash__skip:focus-visible {
  color: var(--black);
}

.splash.is-clearing .splash__title,
.splash.is-clearing .splash__skip {
  opacity: 0;
}

.splash.is-skipping,
.splash.is-skipping .splash__title {
  transition-duration: 0.5s;
  transition-delay: 0s;
}

.splash.is-done {
  opacity: 0;
  pointer-events: none;
}

/* Landing video */

.video {
  position: relative;
  width: 100%;
  height: min(56.25vw, calc(100vh - var(--header-h)));
  height: min(56.25vw, calc(100svh - var(--header-h)));
  min-height: 220px;
  overflow: hidden;
  background: var(--white);
}

.video__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(72px, 14.65vw, 211px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.25));
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.video__play:hover,
.video__play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
}

.video__play:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 8px;
}

.video__play-icon {
  position: absolute;
  inset: 0;
  transform: rotate(90deg);
}

.video__play-icon img {
  position: absolute;
  top: 0;
  right: 6.7%;
  bottom: 25%;
  left: 6.7%;
  width: 86.6%;
  height: 75%;
}

.video__sound {
  position: absolute;
  right: clamp(12px, 2.2vw, 32px);
  bottom: clamp(12px, 2.2vw, 32px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background 0.2s ease;
}

.video__sound:hover,
.video__sound:focus-visible {
  background: rgba(0, 0, 0, 0.6);
}

.video__sound-on,
.video__sound[aria-pressed="true"] .video__sound-off {
  display: none;
}

.video__sound[aria-pressed="true"] .video__sound-on {
  display: block;
}

.video.is-playing .video__play {
  opacity: 0;
  pointer-events: none;
}

.video.is-playing .video__sound {
  opacity: 1;
  pointer-events: auto;
}

.video__sound-hint {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.video.is-playing .video__sound[aria-pressed="false"] .video__sound-hint {
  animation: sound-hint 6s ease 1.5s both;
}

.video.is-playing .video__sound[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--white);
  border-radius: 50%;
  animation: ring-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

/* About Nicole */

/* Laid out on the 1440px Figma frame; --u is one design pixel at the current width. */
.about {
  container-type: inline-size;
}

.about__inner {
  --u: calc(min(100cqw, 1440px) / 1440);
  position: relative;
  max-width: var(--page-max);
  height: calc(1479 * var(--u));
  margin: 0 auto;
  font-family: var(--font-label);
  text-align: center;
}

.about__quote {
  position: absolute;
  top: calc(112.6 * var(--u));
  left: calc(231 * var(--u));
  width: calc(978.5 * var(--u));
}

.about__quote p {
  font-size: calc(32 * var(--u));
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about__mark {
  position: absolute;
  width: calc(50 * var(--u));
  height: calc(33.9 * var(--u));
  object-fit: contain;
  user-select: none;
}

.about__mark--open {
  top: calc(-16.6 * var(--u));
  left: calc(-73 * var(--u));
}

.about__mark--close {
  top: calc(106.3 * var(--u));
  left: calc(1001 * var(--u));
  transform: rotate(180deg);
}

.about__collage {
  position: absolute;
  top: calc(333 * var(--u));
  left: calc(189 * var(--u));
  width: calc(1057 * var(--u));
  height: calc(708 * var(--u));
}

.about__photo {
  position: absolute;
  overflow: hidden;
}

.about__photo img {
  position: absolute;
  max-width: none;
}

.about__photo--framed {
  border: calc(5.4 * var(--u)) solid var(--black);
}

.about__photo--rollerblades {
  top: calc(93.1 * var(--u));
  left: calc(147.2 * var(--u));
  width: calc(740.6 * var(--u));
  height: calc(507.3 * var(--u));
}

.about__photo--rollerblades img {
  top: -14.19%;
  left: -2.73%;
  width: 115.21%;
  height: 129.91%;
}

.about__photo--headshot {
  top: calc(49.8 * var(--u));
  left: 0;
  width: calc(280 * var(--u));
  height: calc(280 * var(--u));
}

.about__photo--headshot img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__photo--umbrella {
  top: calc(433.6 * var(--u));
  left: calc(68.6 * var(--u));
  width: calc(211.3 * var(--u));
  height: calc(214.9 * var(--u));
}

.about__photo--umbrella img {
  top: -0.3%;
  left: 0;
  width: 100%;
  height: 156.06%;
}

.about__photo--portrait {
  top: 0;
  left: calc(826 * var(--u));
  width: calc(230.7 * var(--u));
  height: calc(599.5 * var(--u));
}

.about__photo--portrait img {
  inset: 0;
  width: 100%;
  height: 100%;
}

.about__photo--threads {
  top: calc(455.3 * var(--u));
  left: calc(721.6 * var(--u));
  width: calc(252.9 * var(--u));
  height: calc(252.9 * var(--u));
}

.about__photo--threads img {
  top: 0;
  left: 0;
  width: 168.21%;
  height: 100%;
}

.about__photo--desk {
  top: calc(281.9 * var(--u));
  left: calc(858.9 * var(--u));
  width: calc(204.1 * var(--u));
  height: calc(194.1 * var(--u));
}

.about__photo--desk img {
  top: -7.12%;
  left: -22.06%;
  width: 142.65%;
  height: 115.1%;
}

.about__bio {
  position: absolute;
  top: calc(1198 * var(--u));
  left: calc(410 * var(--u));
  width: calc(620 * var(--u));
  font-size: calc(39.267 * var(--u));
  line-height: 1.25;
}

/* Runway */

.runway {
  margin: 0 auto;
  padding: 110px 0 186px;
}

.runway__title {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px;
}

.runway__title img {
  width: min(672px, 100%);
  height: auto;
  margin: 0 auto;
}

.runway__gallery {
  margin-top: 64px;
  padding: 0;
}

/* Decade strips: 138 × 207 Figma tiles; year label pinned on the left. */
.runway__decades {
  --w: clamp(104px, 9.6vw, 138px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 6vw, 72px);
}

.runway__strip {
  --inset: clamp(28px, 4vw, 56px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: clamp(160px, 22vw, 280px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  /* Painted on the scroll box (not the rail) so the hairline stays put while the row scrolls. */
  background: linear-gradient(var(--black), var(--black)) var(--inset) 0 / calc(100% - 2 * var(--inset)) 1px no-repeat;
}

.runway__decade {
  --year-w: clamp(150px, 20vw, 260px);
  --edge: clamp(28px, 4vw, 56px);
  position: relative;
  overflow-x: clip;
}

/* JS eases these strips itself; snapping would fight every frame. */
.runway__decades--glide .runway__strip,
.runway__strip.is-sliding {
  scroll-snap-type: none;
}

.runway__decades--glide .runway__strip {
  cursor: grab;
}

/* Centred on the photos (rail padding + half a 2:3 tile). */
.runway__chevron {
  position: absolute;
  top: calc(14px + var(--w) * 0.75);
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.15s linear;
}

.runway__chevron::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: border-color 0.15s linear;
}

.runway__chevron--prev {
  left: calc(var(--year-w) - 44px);
  transform: translateX(-24px);
}

.runway__chevron--next {
  right: var(--edge);
  transform: translateX(24px);
}

.runway__chevron--next::before {
  left: 12px;
  transform: rotate(225deg);
}

.runway__decade.is-inview .runway__chevron.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.runway__chevron:hover,
.runway__chevron:focus-visible {
  background: var(--black);
}

.runway__chevron:hover::before,
.runway__chevron:focus-visible::before {
  border-color: var(--white);
}

.runway__chevron:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.runway--scrolling-years .runway__chevron--prev {
  left: var(--edge);
}

.runway__decades--glide .runway__strip.is-dragging,
.runway__decades--glide .runway__strip.is-dragging .runway__thumb {
  cursor: grabbing;
  user-select: none;
}

.runway__strip::-webkit-scrollbar {
  display: none;
}

.runway__strip:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: -2px;
}

.runway__rail {
  position: relative;
  width: max-content;
  min-width: 100%;
  padding-top: 14px;
}

.runway__rule {
  display: none;
}

.runway__rail-body {
  display: flex;
  align-items: stretch;
}

.runway__decade-year {
  position: sticky;
  left: 0;
  z-index: 2;
  flex: none;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--year-w);
  /* Bottom inset matches the season caption so the numeral sits on the photo, not the label. */
  --fade: clamp(32px, 4vw, 56px);
  --trail: clamp(72px, 9vw, 140px);
  padding: 4px var(--fade) 28px var(--inset);
  background: linear-gradient(90deg, var(--white) calc(100% - var(--fade)), transparent calc(100% - var(--fade)));
  pointer-events: none;
  user-select: none;
}

/* Photos scrolling under the pinned year fade out from the numeral's edge across the first photo.
   Hidden at rest so the first photo isn't washed out. */
.runway__decade-year::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - var(--fade));
  width: calc(var(--fade) + var(--trail));
  background: linear-gradient(90deg,
    var(--white),
    rgba(255, 255, 255, 0.92) 25%,
    rgba(255, 255, 255, 0.6) 55%,
    rgba(255, 255, 255, 0.22) 80%,
    rgba(255, 255, 255, 0));
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.runway__decade.is-scrolled .runway__decade-year::after {
  opacity: 1;
}

.runway--scrolling-years .runway__decade-year::after {
  display: none;
}

.runway__decade-year-art {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(var(--w) * 1.05);
  object-fit: contain;
}

/* Scrolling years: the decade year scrolls away with the photos instead of staying pinned. */
.runway--scrolling-years .runway__strip {
  scroll-padding-left: 0;
}

.runway--scrolling-years .runway__decade-year {
  position: relative;
  left: auto;
  background: none;
  scroll-snap-align: start;
}

.runway__strip-list {
  display: flex;
  flex: none;
  gap: clamp(32px, 4vw, 48px);
  margin: 0;
  padding: 0 clamp(20px, 4vw, 48px) 0 0;
  list-style: none;
}

.runway__strip-list li {
  flex: none;
  width: var(--w);
  scroll-snap-align: start;
}

.runway__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.runway__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.runway__thumb--placeholder img {
  background: #ff00ff;
  object-fit: cover;
}

.runway__thumb:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 3px;
}

.runway__label {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: clamp(8px, 0.9vw, 12px);
  font-family: var(--font-label);
  font-size: clamp(10px, 0.85vw, 12px);
  line-height: 1.26;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Spotted in NM: draggable field, positions set by JS. */

.spotted {
  padding: 0 0 clamp(96px, 12vw, 160px);
  overflow: hidden;
}

.spotted__title {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Same rendered height as the runway title (672 × 141): 141 / 262 × 1024 ≈ 551. */
.spotted__title img {
  width: min(551px, 82%);
  height: auto;
  margin: 0 auto;
}

/* Single row of 382.66 × 569.85 cards on the 1440px frame, scaled with the window. */
.spotted__field {
  --tile: clamp(240px, 26.574vw, 382.66px);
  --gap: clamp(20px, 2.222vw, 32px);
  --pad: max(20px, 2vw);
  position: relative;
  margin-top: 64px;
  padding: 0 var(--pad);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.spotted__field.is-dragging {
  cursor: grabbing;
}

.spotted__field:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 4px;
}

.spotted__row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

.spotted__item {
  flex: none;
  width: var(--tile);
}

.spotted__card {
  aspect-ratio: 382.66 / 569.85;
  overflow: hidden;
  background: #ececec;
}

.spotted__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.spotted__nav {
  position: absolute;
  top: calc(var(--tile) * 569.85 / 382.66 / 2);
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.15s linear;
}

.spotted__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: border-color 0.15s linear;
}

.spotted__nav--prev {
  left: calc(var(--pad) + 12px);
  transform: translateX(-24px);
}

.spotted__nav--next {
  right: calc(var(--pad) + 12px);
  transform: translateX(24px);
}

.spotted__nav--next::before {
  left: 12px;
  transform: rotate(225deg);
}

.spotted__nav.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.spotted__nav:hover,
.spotted__nav:focus-visible {
  background: var(--black);
}

.spotted__nav:hover::before,
.spotted__nav:focus-visible::before {
  border-color: var(--white);
}

.spotted__nav:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

.spotted__caption {
  display: grid;
  margin: 14px 0 0;
  font-family: var(--font-label);
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Above full HD the cards are 20% larger, like the season modal. */
@media (min-width: 1921px) {
  .spotted__field {
    --tile: 459.19px;
    --gap: 38px;
  }

  .spotted__caption {
    margin-top: 17px;
    font-size: 15.6px;
  }
}

@media (max-width: 767px) {
  .spotted__field {
    --tile: 34vw;
    --gap: 12px;
    --pad: 6vw;
    margin-top: 40px;
  }

  .spotted__nav--prev {
    left: calc(var(--pad) + 6px);
  }

  .spotted__nav--next {
    right: calc(var(--pad) + 6px);
  }

  .spotted__caption {
    margin-top: 8px;
    font-size: 10px;
  }
}

/* World of NM journal: card sizes and type follow the summary carousel on home.nicolemiller.com. */

.blog {
  --pad: max(20px, 2vw);
  --gap: 28px;
  padding: 0 0 clamp(80px, 9vw, 128px);
}

.blog__heading {
  margin: 0 0 44px;
  padding: 0 var(--pad);
  font-family: var(--font-label);
  font-size: clamp(26px, 3.27vw, 47px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-align: center;
}

.blog__heading span {
  display: inline-block;
}

.blog__carousel {
  position: relative;
  container-type: inline-size;
}

.blog__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  column-gap: var(--gap);
  margin: 0;
  padding: 0 var(--pad);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  scrollbar-width: none;
}

.blog__track::-webkit-scrollbar {
  display: none;
}

.blog__item {
  min-width: 0;
  scroll-snap-align: start;
  font-family: var(--font-label);
}

.blog__item a {
  color: var(--black);
  text-decoration: none;
}

.blog__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ececec;
}

.blog__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}

.blog__item:hover .blog__media img {
  transform: scale(1.04);
}

.blog__title {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

.blog__title a:hover,
.blog__title a:focus-visible,
.blog__more:hover,
.blog__more:focus-visible {
  opacity: 0.6;
}

.blog__title a,
.blog__more {
  transition: opacity 0.15s linear;
}

.blog__more {
  display: inline-block;
  margin-top: 11px;
  font-size: 14px;
  line-height: 20px;
}

.blog__date {
  display: block;
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 13px;
  line-height: 18px;
}

/* Same look as the runway chevrons, centred on the card photos. */
.blog__nav {
  --card: calc((100cqw - 2 * var(--pad) - 2 * var(--gap)) / 3);
  position: absolute;
  top: calc(var(--card) * 0.375);
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.15s linear;
}

.blog__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 16px;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
  transition: border-color 0.15s linear;
}

.blog__nav--prev {
  left: calc(var(--pad) + 12px);
  transform: translateX(-24px);
}

.blog__nav--next {
  right: calc(var(--pad) + 12px);
  transform: translateX(24px);
}

.blog__nav--next::before {
  left: 12px;
  transform: rotate(225deg);
}

.blog__nav.is-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.blog__nav:hover,
.blog__nav:focus-visible {
  background: var(--black);
}

.blog__nav:hover::before,
.blog__nav:focus-visible::before {
  border-color: var(--white);
}

.blog__nav:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .blog {
    --pad: 6vw;
    --gap: 16px;
  }

  .blog__heading {
    margin-bottom: 32px;
  }

  .blog__track {
    grid-auto-columns: 82%;
  }

  .blog__nav {
    --card: calc((100cqw - 2 * var(--pad)) * 0.82);
  }
}

/* Season detail dialog */

.season {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100svh - 32px);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 6vw, 80px);
  border: 0;
  background: var(--white);
  color: var(--black);
  overflow: auto;
}

.season::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.season[open] {
  animation: season-in 0.6s var(--ease-out);
}

.season[open]::backdrop {
  animation: fade-in 0.4s ease;
}

@keyframes season-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }
}

.season__close {
  position: absolute;
  top: 12px;
  right: 16px;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--grey-title);
  cursor: pointer;
}

.season__layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vw, 72px);
}

.season__figure {
  flex: none;
  width: min(280px, 42vw);
}

.season__frame {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #ececec;
}

.season__photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.season__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.season__photo--out {
  visibility: hidden;
  pointer-events: none;
}

.season__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  min-height: 7px;
}

.season__dots[hidden] {
  visibility: hidden;
}

.season__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1.5px solid var(--black);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.season__dot.is-active {
  background: var(--black);
}

/* Hairline arrows either side of the dots: they draw in when the dialog opens, and the
   next arrow beckons until the visitor browses. */
.season__arrow {
  flex: none;
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}

.season__arrow svg {
  width: 56px;
  height: 14px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  transition: transform 0.45s var(--ease-out);
}

.season__arrow--prev:hover svg {
  transform: translateX(-6px);
}

.season__arrow--next:hover svg {
  transform: translateX(6px);
}

.season__arrow:focus-visible {
  outline: 1px solid var(--black);
  outline-offset: 2px;
}

.season[open] .season__arrow path {
  stroke-dasharray: 1;
  animation: arrow-draw 0.7s var(--ease-out) 0.35s both;
}

.season[open] .season__arrow path + path {
  animation-duration: 0.4s;
  animation-delay: 0.9s;
}

.season[open] .season__arrow--next svg {
  animation: arrow-beckon 1.4s ease-in-out 1.5s 3;
}

.season[open].is-browsed .season__arrow--next svg,
.season[open] .season__arrow--next:hover svg {
  animation: none;
}

@keyframes arrow-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes arrow-beckon {
  50% {
    transform: translateX(8px);
  }
}

.season__title {
  margin: 0;
  text-align: left;
}

.season__name {
  display: block;
  font-family: var(--font-label);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
}

.season__year {
  display: block;
  margin-top: 4px;
  font-family: "Oooh Baby", cursive;
  font-size: clamp(72px, 10vw, 112px);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.01em;
}

/* Above full HD the modal and everything in it is 20% larger. */
@media (min-width: 1921px) {
  .season {
    width: 1104px;
    padding: 86px 96px;
  }

  .season__close {
    top: 14px;
    right: 19px;
    font-size: 34px;
  }

  .season__layout {
    gap: 86px;
  }

  .season__figure {
    width: 336px;
  }

  .season__pager {
    gap: 14px;
    margin-top: 26px;
  }

  .season__dots {
    gap: 12px;
    min-height: 8.4px;
  }

  .season__arrow svg {
    width: 67px;
    height: 17px;
  }

  .season__dot {
    width: 8.4px;
    height: 8.4px;
    border-width: 1.8px;
  }

  .season__name {
    font-size: 50px;
  }

  .season__year {
    margin-top: 5px;
    font-size: 134px;
  }
}

@media (max-width: 720px) {
  .about__inner {
    height: auto;
    padding: 96px 20px 80px;
  }

  .about__quote,
  .about__collage,
  .about__bio {
    position: relative;
    top: auto;
    left: auto;
  }

  .about__quote {
    width: auto;
    max-width: 340px;
    margin: 0 auto;
  }

  .about__quote p {
    font-size: 18px;
  }

  .about__mark {
    width: 34px;
    height: 23px;
  }

  .about__mark--open {
    top: -34px;
    left: -8px;
  }

  .about__mark--close {
    top: auto;
    left: auto;
    right: -8px;
    bottom: -34px;
  }

  .about__collage {
    --u: calc((100cqw - 40px) / 1057);
    margin-top: 72px;
  }

  .about__bio {
    width: auto;
    max-width: 340px;
    margin: 56px auto 0;
    font-size: 20px;
  }

  .runway {
    padding: 72px 0 96px;
  }

  .runway__gallery {
    margin-top: 40px;
  }

  .runway__decades {
    gap: 36px;
  }

  .season__layout {
    flex-direction: column;
    gap: 28px;
  }

  .season__figure {
    width: min(240px, 70vw);
  }
}

/* Timeline */

/* Items sit at Figma design-pixel positions (--x, --y, --w, --h); --u is one design pixel. */
.timeline {
  --u: max(0.6px, min(calc(100vw / 1440), 1.2px));
  position: relative;
}

.timeline__frame {
  position: relative;
  height: calc(596 * var(--u));
}

.timeline__viewport {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.timeline__viewport::-webkit-scrollbar {
  display: none;
}

.timeline__viewport:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: -2px;
}

.timeline__track {
  position: relative;
  width: calc(14500 * var(--u));
  height: 100%;
}

.tl-item {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  margin: 0;
}

.tl-snap {
  position: absolute;
  top: 0;
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  height: 100%;
  scroll-snap-align: center;
  pointer-events: none;
}

.tl-photo {
  overflow: hidden;
}

.tl-photo--black {
  border: 1px solid var(--black);
}

.tl-photo--white {
  border: 1px solid var(--white);
}

.tl-photo__img {
  position: absolute;
  max-width: none;
}

.tl-photo__img--fill,
.tl-photo__img--cover,
.tl-photo__img--contain {
  inset: 0;
  width: 100%;
  height: 100%;
}

.tl-photo__img--cover {
  object-fit: cover;
}

.tl-photo__img--contain {
  object-fit: contain;
}

.tl-photo__img--rotate {
  transform: rotate(180deg);
}

.tl-photo__img--mirror {
  transform: scaleX(-1);
}

.tl-year {
  z-index: 2;
  pointer-events: none;
}

.tl-year img,
.tl-connector img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tl-caption {
  z-index: 2;
  height: auto;
  font-family: var(--font-label);
  font-size: calc(13 * var(--u));
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: calc(0.78 * var(--u));
  text-transform: uppercase;
}

.tl-panel {
  background: var(--color);
}

.tl-axis {
  position: absolute;
  top: calc(437 * var(--u));
  left: calc(117 * var(--u));
  width: calc(14266 * var(--u));
  height: 0.5px;
  background: var(--black);
}

.tl-axis__progress {
  position: absolute;
  inset: -0.75px 0;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* The scrubber has its own scale (--s) so all 22 dots still fit on narrow screens. */
.timeline__scrubber {
  --s: min(var(--u), calc((100vw - 32px) / 717));
  position: absolute;
  top: calc(460 * var(--u));
  left: calc((100% - 717 * var(--s)) / 2);
  width: calc(717 * var(--s));
  height: calc(64 * var(--s));
  font-family: var(--font-label);
  font-size: max(11px, 13 * var(--s));
  letter-spacing: 0.06em;
}

.timeline__dots {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline__dot {
  position: absolute;
  top: -4px;
  left: calc(var(--i) * 32.57 * var(--s) + 6 * var(--s) - 4px);
  display: grid;
  place-items: center;
  width: calc(17 * var(--s) + 8px);
  height: calc(17 * var(--s) + 8px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.timeline__dot img {
  grid-area: 1 / 1;
  transition: scale 0.45s var(--ease-spring), opacity 0.3s ease;
}

.timeline__dot img:first-child {
  width: max(6px, 9 * var(--s));
  height: max(6px, 9 * var(--s));
}

.timeline__dot img:last-child {
  width: max(11px, 17 * var(--s));
  height: max(11px, 17 * var(--s));
  opacity: 0;
  scale: 0.3;
}

.timeline__dot:hover img:first-child {
  scale: 1.5;
}

.timeline__dot.is-active img:first-child {
  opacity: 0;
}

.timeline__dot.is-active img:last-child {
  opacity: 1;
  scale: 1;
}

.timeline__dot:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: -2px;
  border-radius: 50%;
}

.timeline__end {
  position: absolute;
  line-height: 1.26;
}

.timeline__end--start {
  top: calc(39 * var(--s));
  left: 0;
}

.timeline__end--last {
  top: calc(31 * var(--s));
  right: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .timeline {
    --u: 0.8px;
  }

  .timeline__frame {
    margin-top: calc(-90 * var(--u));
  }

  .timeline__scrubber {
    left: calc((100% - 717 * var(--s)) / 2);
  }
}

/* Touch swipes land each milestone in the middle; wheel scrolling glides freely instead. */
@media (hover: none) {
  .timeline__viewport {
    scroll-snap-type: x mandatory;
  }
}

/* Motion
   Page-load entrances wait for html.is-ready (set when the splash lifts); scroll entrances
   wait for [data-reveal].is-inview. Until then each animation sits paused on its first frame.
   Parallax uses the `translate` property and hover uses `scale`/`rotate`, so neither fights
   the entrance animations on `transform`. */

.js .site-header {
  animation: header-in 1.1s var(--ease-out) 0.3s both paused;
}

.js .site-header__logo {
  animation: logo-in 1.4s var(--ease-out) 0.55s both paused;
}

.js .site-nav > ul > li,
.js .site-social li {
  animation: rise-in 0.8s var(--ease-out) calc(0.75s + var(--i, 0) * 80ms) both paused;
}

.site-nav > ul > li:nth-child(2),
.site-social li:nth-child(2) { --i: 1; }
.site-nav > ul > li:nth-child(3),
.site-social li:nth-child(3) { --i: 2; }
.site-nav > ul > li:nth-child(4),
.site-social li:nth-child(4) { --i: 3; }

.js .video__media {
  animation: video-in 3s var(--ease-out) both paused;
}

.js .video__play-icon {
  animation: pop-in 0.9s var(--ease-spring) 1.4s both paused;
}

.is-ready .site-header,
.is-ready .site-header__logo,
.is-ready .site-nav > ul > li,
.is-ready .site-social li,
.is-ready .video__media,
.is-ready .video__play-icon {
  animation-play-state: running;
}

@media (max-width: 860px) {
  .site-menu.is-open .site-menu__panel.is-active > li,
  .site-menu.is-open .site-menu__panel.is-active .site-menu__list > li {
    animation: menu-item 0.5s var(--ease-out) calc(var(--i, 0) * 50ms + 0.1s) both;
  }
}

/* About */

.word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: top;
}

.word__inner {
  display: inline-block;
}

.js .about__quote .word__inner {
  animation: word-up 1.1s var(--ease-out) calc(0.35s + var(--w) * 70ms) both;
}

.js .about__mark--open {
  --spin: -50deg;
  animation: mark-in 1.2s var(--ease-spring) 0.1s both;
}

.js .about__mark--close {
  --spin: 50deg;
  animation: mark-in 1.2s var(--ease-spring) 1.1s both;
}

.js .about__bio .word__inner {
  animation: word-blur 1s var(--ease-out) calc(var(--w) * 45ms) both;
}

/* Clip-path reveals go on the inner images: IntersectionObserver ignores clipped-away
   area, so a clipped [data-reveal] element would never register as in view. */
.js .about__photo--rollerblades img {
  animation: clip-settle 1.8s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.js .about__photo--headshot {
  animation: fly-in 1.3s var(--ease-out) 0.35s both;
  --from: translate(-90px, 50px) rotate(-12deg);
}

.js .about__photo--portrait {
  animation: fly-in 1.5s var(--ease-out) 0.5s both;
  --from: translateY(80px);
}

.js .about__photo--portrait img {
  animation: clip-up 1.5s var(--ease-out) 0.5s both;
}

.js .about__photo--desk {
  animation: fly-in 1.3s var(--ease-out) 0.7s both;
  --from: translate(110px, -50px) rotate(12deg);
}

.js .about__photo--umbrella {
  animation: fly-in 1.3s var(--ease-out) 0.85s both;
  --from: translate(-50px, 130px) rotate(9deg);
}

.js .about__photo--threads {
  animation: fly-in 1.3s var(--ease-out) 1s both;
  --from: translate(30px, 150px) rotate(-7deg);
}

/* Runway */

.js .runway__title img {
  animation: wipe-in 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both;
}

/* Entrance: the photos sweep in from the right and the year rises into place. */
.js .runway__decade .runway__strip-list {
  animation: row-sweep 2.5s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.js .runway__decade .runway__decade-year-art {
  animation: year-rise 1.1s cubic-bezier(0.25, 1, 0.5, 1) both;
}

@keyframes row-sweep {
  from { transform: translateX(75vw); }
}

@keyframes year-rise {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
}

/* Spotted */

.js .spotted__title img {
  animation: wipe-in 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both;
}

.js .spotted__field {
  animation: rise-in 0.9s var(--ease-out) 0.2s both;
}

/* World of NM */

.js .blog__heading span {
  animation: rise-in 0.9s var(--ease-out) both;
}

.js .blog__item {
  animation: rise-in 0.9s var(--ease-out) calc(0.1s + var(--i, 0) * 0.1s) both;
}

/* Season dialog content, replayed on every season change */

.season__layout.is-changing .season__title {
  animation: rise-in 0.6s var(--ease-out) both;
}

/* Photo changes: the new photo wipes in from the side being browsed towards and settles
   from a slight zoom, while the old one drifts the other way underneath. */
.season__frame.is-swapping .season__photo--out {
  visibility: visible;
  animation: photo-drift 0.9s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.season__frame.is-swapping #season-photo {
  animation:
    photo-wipe 0.9s cubic-bezier(0.76, 0, 0.24, 1) both,
    photo-settle 1.4s var(--ease-out) both;
}

.season__frame[data-direction="prev"] {
  --from: -1;
}

/* Timeline */

.js .tl-photo,
.js .tl-panel {
  animation: tl-photo-in 1.1s var(--ease-out) both;
}

.js .tl-year img {
  animation: wipe-in 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
}

.js .tl-caption {
  animation: rise-in 0.9s var(--ease-out) 0.4s both;
}

.js .tl-connector img {
  animation: clip-up 0.9s var(--ease-out) 0.1s both;
}

.js [data-reveal],
.js [data-reveal] .reveal-child,
.js [data-reveal] .word__inner,
.js [data-reveal].runway__decade {
  animation-play-state: paused;
}

.js .is-inview,
.js .is-inview .reveal-child,
.js .is-inview .word__inner,
.js .is-inview.runway__decade {
  animation-play-state: running;
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes header-in {
  from { transform: translateY(-100%); }
}

@keyframes logo-in {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes menu-item {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
}

@keyframes video-in {
  from { transform: scale(1.14); }
}

@keyframes pop-in {
  from {
    opacity: 0;
    scale: 0.2;
  }
}

@keyframes cue-in {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}

@keyframes cue-line {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

@keyframes ring-pulse {
  0% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes sound-hint {
  0% { opacity: 0; transform: translate(10px, -50%); }
  10%, 85% { opacity: 1; transform: translate(0, -50%); }
  100% { opacity: 0; transform: translate(0, -50%); }
}

@keyframes word-up {
  from { transform: translateY(115%) rotate(5deg); }
}

@keyframes word-blur {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(0.5em);
  }
}

@keyframes mark-in {
  from {
    opacity: 0;
    scale: 0.2;
    rotate: var(--spin);
  }
}

@keyframes clip-settle {
  from {
    clip-path: inset(48% 48% 48% 48%);
    scale: 1.3;
  }
  to {
    clip-path: inset(0 0 0 0);
    scale: 1;
  }
}

@keyframes clip-up {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes fly-in {
  from {
    opacity: 0;
    transform: var(--from);
  }
}

@keyframes wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes tile-in {
  from {
    opacity: 0;
    transform: translateY(36px) scale(0.8);
  }
}

@keyframes rule-grow {
  from { scale: 1 0; }
}

@keyframes photo-wipe {
  from {
    clip-path: inset(0 calc(50% - var(--from, 1) * 50%) 0 calc(50% + var(--from, 1) * 50%));
  }
  to {
    clip-path: inset(0);
  }
}

@keyframes photo-settle {
  from {
    transform: scale(1.08) translateX(calc(var(--from, 1) * 4%));
  }
}

@keyframes photo-drift {
  to {
    transform: translateX(calc(var(--from, 1) * -22%));
    filter: brightness(0.82);
  }
}

@keyframes tl-photo-in {
  from {
    opacity: 0;
    transform: translateY(60px) rotate(var(--tilt, 0deg)) scale(0.9);
  }
}

@keyframes side-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}