.collection-page,
.feature-page { background: var(--black); }

.collection-hero {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 170px 0 90px;
  background:
    radial-gradient(circle at 78% 28%, rgba(188, 161, 107, .12), transparent 29%),
    linear-gradient(135deg, #0b0b0b, #050505 64%);
}
.collection-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); }
.collection-hero-inner { position: relative; z-index: 1; width: var(--page); margin: 0 auto; }
.collection-hero h1 { margin: 26px 0 24px; font-family: var(--serif); font-size: clamp(86px, 13vw, 210px); font-weight: 400; letter-spacing: -.07em; line-height: .7; }
.collection-hero-copy { max-width: 610px; margin: 46px 0 0 auto; color: var(--muted); font-size: 16px; line-height: 1.8; }
.collection-count { position: absolute; right: 0; top: 0; color: rgba(255,255,255,.42); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; }

.archive { width: var(--page); margin: 0 auto; padding: 140px 0 180px; }
.archive-heading { display: grid; grid-template-columns: 1fr minmax(280px, 420px); align-items: end; gap: 50px; margin-bottom: 80px; }
.archive-heading h2 { margin: 22px 0 0; font-family: var(--serif); font-size: clamp(62px, 8vw, 126px); font-weight: 400; letter-spacing: -.06em; line-height: .78; }
.archive-heading > p:last-child { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.collection-card { position: relative; display: grid; min-height: 680px; overflow: hidden; border: 1px solid var(--line); background: #0b0b0b; }
.collection-card:first-child { grid-column: 1 / -1; min-height: 780px; }
.collection-card-media,
.collection-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.collection-card-media img { object-fit: cover; transition: transform 1.25s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.collection-card:first-child .collection-card-media img { object-position: center 62%; }
.collection-card:nth-child(2) .collection-card-media img { object-position: 50% center; }
.collection-card:nth-child(3) .collection-card-media img { object-position: 55% center; }
.collection-card:hover .collection-card-media img { transform: scale(1.025); }
.collection-card-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.44) 42%, rgba(0,0,0,.03) 72%); }
.collection-card.pending .collection-card-media img { filter: saturate(.68) brightness(.72); }
.collection-card-copy { position: relative; z-index: 1; align-self: end; padding: 48px; }
.collection-card-number { position: absolute; z-index: 2; top: 34px; right: 36px; font-size: 9px; letter-spacing: .2em; }
.collection-card h3 { max-width: 900px; margin: 18px 0 16px; font-family: var(--serif); font-size: clamp(54px, 6vw, 96px); font-weight: 400; letter-spacing: -.05em; line-height: .82; }
.collection-card:not(:first-child) h3 { font-size: clamp(48px, 4.7vw, 76px); }
.collection-card-copy > p:not(.kicker) { max-width: 560px; margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.7; }
.collection-card-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 25px; color: var(--gold-light); font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.collection-card-link i { font-style: normal; font-size: 16px; transition: transform .25s ease; }
.collection-card:hover .collection-card-link i { transform: translate(4px, -2px); }
.archive-note { margin-top: 72px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 30px; color: var(--muted); font-size: 9px; letter-spacing: .16em; line-height: 1.7; text-transform: uppercase; }

.feature-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: #111; }
.feature-hero-media,
.feature-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-hero-media img { object-fit: cover; object-position: center 48%; transform: scale(1.015); animation: featureHeroIn 1.8s cubic-bezier(.2,.7,.2,1) both; }
.feature-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.04) 72%), linear-gradient(0deg, rgba(0,0,0,.85), transparent 55%, rgba(0,0,0,.35)); }
.feature-hero-content { position: relative; z-index: 1; width: var(--page); margin: 0 auto; padding: 160px 0 68px; }
.feature-hero h1 { max-width: 1250px; margin: 22px 0 0; font-family: var(--serif); font-size: clamp(72px, 10vw, 168px); font-weight: 400; letter-spacing: -.07em; line-height: .72; }
.feature-hero h1 em { display: block; color: var(--gold-light); font-size: .48em; font-style: normal; letter-spacing: -.04em; line-height: .9; }
.feature-hero-note { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 38px; }
.feature-hero-note p { max-width: 420px; margin: 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.7; }
.feature-hero-note span { color: rgba(255,255,255,.52); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; }

.story-intro { width: var(--page); margin: 0 auto; padding: 170px 0; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(60px, 9vw, 150px); align-items: start; }
.story-intro h2 { max-width: 950px; margin: 24px 0 0; font-family: var(--serif); font-size: clamp(62px, 7.5vw, 118px); font-weight: 400; letter-spacing: -.055em; line-height: .82; }
.story-intro-copy { padding-top: 54px; border-top: 1px solid var(--line); }
.story-intro-copy p { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.story-duo { width: var(--page); margin: 0 auto 180px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: end; }
.story-duo figure,
.story-gallery figure,
.story-image { margin: 0; overflow: hidden; background: #111; }
.story-duo figure:first-child { aspect-ratio: 1.38 / 1; }
.story-duo figure:last-child { aspect-ratio: .82 / 1; }
.story-duo img,
.story-gallery img,
.story-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.story-duo figure:hover img,
.story-gallery figure:hover img,
.story-image:hover img { transform: scale(1.02); }
.story-duo figure:last-child img { object-position: 42% center; }

.story-full { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.story-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-full.rear > img { object-position: 52% center; }
.story-full.motion > img { object-position: center; }
.story-full-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.84), transparent 62%), linear-gradient(90deg, rgba(0,0,0,.48), transparent 54%); }
.story-full-copy { position: relative; z-index: 1; width: var(--page); margin: 0 auto; padding: 80px 0; }
.story-full-copy h2 { max-width: 880px; margin: 18px 0 0; font-family: var(--serif); font-size: clamp(66px, 9vw, 145px); font-weight: 400; letter-spacing: -.06em; line-height: .78; }

.story-split { width: var(--page); margin: 0 auto; padding: 180px 0; display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(60px, 8vw, 130px); align-items: center; }
.story-split.reverse { grid-template-columns: 1.25fr .75fr; }
.story-split.reverse .story-image { grid-column: 1; }
.story-split.reverse .story-copy { grid-column: 2; grid-row: 1; }
.story-image { min-height: 700px; }
.story-image img { min-height: 700px; }
.story-copy { padding-top: 42px; border-top: 1px solid var(--line); }
.story-copy h2 { margin: 24px 0; font-family: var(--serif); font-size: clamp(58px, 6.2vw, 100px); font-weight: 400; letter-spacing: -.055em; line-height: .82; }
.story-copy > p:not(.kicker) { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.story-engine-detail { width: var(--page); height: min(78vw, 980px); margin: 0 auto; }
.story-engine-detail img { object-position: center; }
.story-gallery { width: var(--page); margin: 0 auto 180px; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 28px; }
.story-gallery figure:first-child { grid-row: 1 / 3; min-height: 860px; }
.story-gallery figure:not(:first-child) { min-height: 416px; }
.story-gallery figure:nth-child(2) img { object-position: 53% center; }
.story-gallery figure:nth-child(3) img { object-position: 58% center; }

.story-closing { width: var(--page); margin: 0 auto; padding: 180px 0 140px; display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(60px, 8vw, 130px); align-items: center; }
.story-closing-media { height: 720px; overflow: hidden; }
.story-closing-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.story-closing h2 { margin: 24px 0 32px; font-family: var(--serif); font-size: clamp(60px, 6.5vw, 106px); font-weight: 400; letter-spacing: -.055em; line-height: .82; }

@keyframes featureHeroIn { from { opacity: .45; transform: scale(1.07); } to { opacity: 1; transform: scale(1.015); } }

@media (max-width: 980px) {
  .archive-heading,
  .story-intro,
  .story-split,
  .story-split.reverse,
  .story-closing { grid-template-columns: 1fr; }
  .archive-heading > p:last-child { max-width: 560px; }
  .story-intro-copy { padding-top: 36px; }
  .story-split.reverse .story-image,
  .story-split.reverse .story-copy { grid-column: 1; }
  .story-split.reverse .story-copy { grid-row: 1; }
  .story-image,
  .story-image img { min-height: 66vw; }
  .story-closing-media { height: 66vw; }
}

@media (max-width: 640px) {
  .collection-hero { min-height: 700px; padding: 140px 0 70px; }
  .collection-hero h1 { font-size: 92px; line-height: .72; }
  .collection-hero-copy { margin: 38px 0 0; font-size: 14px; }
  .collection-count { position: static; display: block; margin-top: 30px; }
  .archive { padding: 100px 0 120px; }
  .archive-heading { grid-template-columns: 1fr; margin-bottom: 55px; }
  .archive-heading h2 { font-size: 68px; }
  .collection-grid { grid-template-columns: 1fr; gap: 18px; }
  .collection-card:first-child { grid-column: 1; }
  .collection-card,
  .collection-card:first-child { min-height: 650px; }
  .collection-card:first-child .collection-card-media img { object-position: 58% center; }
  .collection-card:nth-child(2) .collection-card-media img { object-position: 61% center; }
  .collection-card-copy { padding: 30px 24px; }
  .collection-card-number { top: 24px; right: 24px; }
  .collection-card h3,
  .collection-card:not(:first-child) h3 { font-size: 55px; }
  .archive-note { flex-direction: column; }

  .feature-hero { min-height: 820px; }
  .feature-hero-media img { object-position: 60% center; }
  .feature-hero-shade { background: linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.12) 78%), linear-gradient(90deg, rgba(0,0,0,.68), transparent); }
  .feature-hero-content { padding: 130px 0 48px; }
  .feature-hero h1 { font-size: 78px; line-height: .75; }
  .feature-hero h1 em { font-size: .53em; }
  .feature-hero-note { align-items: start; flex-direction: column; }
  .story-intro { padding: 110px 0; gap: 48px; }
  .story-intro h2 { font-size: 58px; }
  .story-duo { margin-bottom: 110px; grid-template-columns: 1fr; gap: 16px; }
  .story-duo figure:first-child,
  .story-duo figure:last-child { aspect-ratio: 4 / 3; }
  .story-full { min-height: 720px; }
  .story-full.rear > img { object-position: 62% center; }
  .story-full.motion > img { object-position: 42% center; }
  .story-full-copy { padding: 55px 0; }
  .story-full-copy h2 { font-size: 65px; }
  .story-split { padding: 110px 0; gap: 48px; }
  .story-copy h2 { font-size: 58px; }
  .story-image,
  .story-image img { min-height: 100vw; }
  .story-engine-detail { width: 100%; height: 92vw; }
  .story-engine-detail img { object-position: 52% center; }
  .story-gallery { margin-bottom: 110px; grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
  .story-gallery figure:first-child { grid-row: auto; min-height: 116vw; }
  .story-gallery figure:not(:first-child) { min-height: 80vw; }
  .story-closing { padding: 110px 0 100px; gap: 48px; }
  .story-closing-media { height: 110vw; }
  .story-closing h2 { font-size: 58px; }
}

/* Subaru Impreza 22B STi feature */
.feature-22b .feature-hero-media img {
  object-position: center 66%;
}

.feature-22b .feature-hero-shade {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .52) 38%, rgba(0, 0, 0, .05) 70%),
    linear-gradient(0deg, rgba(0, 0, 0, .72), transparent 60%);
}

.feature-22b .feature-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.feature-22b .feature-hero-content > * {
  width: min(47vw, 720px);
}

.feature-22b .feature-hero h1 {
  max-width: 720px;
  font-size: clamp(54px, 5.5vw, 96px);
  line-height: .82;
}

.feature-22b .feature-hero-note {
  justify-content: flex-start;
  gap: 42px;
}

.feature-22b .story-duo figure:first-child img,
.feature-22b .story-duo figure:last-child img,
.feature-22b .story-engine-detail img {
  object-position: center;
}

.feature-22b .story-full.rear > img {
  object-position: center 58%;
}

.feature-22b .story-full.motion > img {
  object-position: center 60%;
}

.feature-22b .story-full.motion .story-full-shade {
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .08) 52%, rgba(0, 0, 0, .05) 100%),
    linear-gradient(270deg, rgba(0, 0, 0, .64) 0%, rgba(0, 0, 0, .22) 42%, transparent 72%);
}

.feature-22b .story-full-copy-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.feature-22b .story-full-copy-right > * {
  width: min(42vw, 680px);
}

.feature-22b .story-full-copy-right h2 {
  max-width: 680px;
  font-size: clamp(54px, 5.7vw, 96px);
  line-height: .82;
}

.feature-22b .story-closing-media img {
  object-position: center 56%;
}

@media (max-width: 640px) {
  .feature-22b .feature-hero-media img {
    object-position: 58% center;
  }

  .feature-22b .feature-hero-shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .52) 54%, rgba(0, 0, 0, .08) 78%);
  }

  .feature-22b .feature-hero-content {
    align-items: flex-start;
  }

  .feature-22b .feature-hero-content > * {
    width: 100%;
  }

  .feature-22b .feature-hero h1 {
    font-size: 56px;
  }

  .feature-22b .story-full.rear > img {
    object-position: 54% center;
  }

  .feature-22b .story-full.motion > img {
    object-position: 65% center;
  }

  .feature-22b .story-full-copy-right {
    align-items: flex-end;
  }

  .feature-22b .story-full-copy-right > * {
    width: min(72%, 420px);
  }

  .feature-22b .story-full-copy-right h2 {
    font-size: clamp(42px, 12vw, 60px);
  }

  .feature-22b .story-closing-media img {
    object-position: 50% center;
  }
}

/* Garage Saurus Nissan Skyline GT-R R34 feature */
.feature-r34 .feature-hero-media img {
  object-position: center center;
}

.feature-r34 .feature-hero-shade {
  background:
    linear-gradient(270deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .55) 39%, rgba(0, 0, 0, .04) 72%),
    linear-gradient(0deg, rgba(0, 0, 0, .78), transparent 60%);
}

.feature-r34 .feature-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.feature-r34 .feature-hero-content > * {
  width: min(46vw, 720px);
}

.feature-r34 .feature-hero h1 {
  max-width: 720px;
  font-size: clamp(56px, 6.2vw, 108px);
  line-height: .8;
}

.feature-r34 .feature-hero-note {
  justify-content: flex-start;
  gap: 40px;
}

.feature-r34 .story-duo figure:first-child img {
  object-position: center 64%;
}

.feature-r34 .story-duo figure:last-child img {
  object-position: center 62%;
}

.feature-r34 .story-full.rear > img,
.feature-r34 .story-full.motion > img {
  object-position: center 60%;
}

.r34-build {
  padding: 120px clamp(24px, 7vw, 132px);
  border-top: 1px solid rgba(214, 176, 92, .16);
  border-bottom: 1px solid rgba(214, 176, 92, .16);
  background:
    radial-gradient(circle at 76% 20%, rgba(179, 143, 68, .12), transparent 34%),
    #060606;
}

.r34-build-head {
  max-width: 940px;
  margin-bottom: 64px;
}

.r34-build-head h2 {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(54px, 7vw, 112px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
}

.r34-build-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(214, 176, 92, .18);
  border: 1px solid rgba(214, 176, 92, .18);
}

.r34-build-card {
  min-height: 300px;
  padding: 34px 30px;
  background: #080808;
}

.r34-build-card span {
  display: block;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.r34-build-card h3 {
  margin: 74px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(34px, 3vw, 48px);
  font-weight: 400;
  line-height: .92;
}

.r34-build-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .r34-build-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .feature-r34 .feature-hero-media img {
    object-position: 43% center;
  }

  .feature-r34 .feature-hero-shade {
    background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .56) 55%, rgba(0, 0, 0, .06) 80%);
  }

  .feature-r34 .feature-hero-content {
    align-items: flex-start;
  }

  .feature-r34 .feature-hero-content > * {
    width: 100%;
  }

  .feature-r34 .feature-hero h1 {
    font-size: 54px;
  }

  .r34-build {
    padding: 86px 22px;
  }

  .r34-build-head {
    margin-bottom: 40px;
  }

  .r34-build-grid {
    grid-template-columns: 1fr;
  }

  .r34-build-card {
    min-height: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-hero-media img { animation: none; }
}