/*
 * v19 responsive system
 *
 * This stylesheet is intentionally loaded after the legacy theme.  It is the
 * authoritative layout layer for the site's major photographic compositions.
 * Major containers use Grid or Flexbox; imagery, shading and copy share grid
 * cells instead of relying on absolute-positioned page layouts.
 */

:root {
  --page: min(92vw, 90rem);
  --edge: max(4vw, calc((100vw - 90rem) / 2));
  --display-xl: clamp(4.25rem, 9vw, 10.5rem);
  --display-lg: clamp(3.25rem, 6.7vw, 7.4rem);
  --display-md: clamp(2.65rem, 5.25vw, 5.75rem);
  --body-fluid: clamp(.86rem, .45vw + .72rem, 1rem);
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img {
  max-inline-size: 100%;
}

/* Grid-stacked photographic sections ------------------------------------ */

.hero,
.contact,
.access-panel,
.collection-hero,
.collection-card,
.feature-page .feature-hero,
.feature-hero,
.story-full {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  isolation: isolate;
}

.hero > *,
.contact > *,
.access-panel > *,
.collection-hero > *,
.collection-card > *,
.feature-page .feature-hero > *,
.feature-hero > *,
.story-full > * {
  grid-column: 1;
  grid-row: 1;
}

.hero-media,
.hero-media img,
.hero-shade,
.hero-content,
.contact > img,
.contact-shade,
.contact-content,
.access-panel > img,
.access-panel .panel-shade,
.access-panel .panel-index,
.access-panel .panel-copy,
.collection-hero-media,
.collection-hero-media img,
.collection-hero-shade,
.collection-hero-inner,
.collection-card-media,
.collection-card-media img,
.collection-card-shade,
.collection-card-number,
.collection-card-copy,
.feature-hero-media,
.feature-hero-media img,
.feature-hero-shade,
.feature-hero-content,
.story-full > img,
.story-full-shade,
.story-full-copy {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.hero-media,
.contact > img,
.access-panel > img,
.collection-hero-media,
.collection-card-media,
.feature-hero-media,
.story-full > img {
  align-self: stretch;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;
  min-block-size: 0;
}

.hero-media img,
.contact > img,
.access-panel > img,
.collection-hero-media img,
.collection-card-media img,
.feature-hero-media img,
.story-full > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero-shade,
.contact-shade,
.access-panel .panel-shade,
.collection-hero-shade,
.collection-card-shade,
.feature-hero-shade,
.story-full-shade {
  z-index: 1;
  pointer-events: none;
}

.hero-content,
.contact-content,
.access-panel .panel-copy,
.access-panel .panel-index,
.collection-hero-inner,
.collection-card-copy,
.collection-card-number,
.feature-hero-content,
.story-full-copy {
  z-index: 2;
}

/* Remove the legacy blurred/contained-image filler system completely. */
.story-full::before {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}

/* Shared type and spacing ------------------------------------------------ */

.panel-copy h3,
.collection-card h3,
.feature-hero h1,
.story-full-copy h2 {
  text-wrap: balance;
}

.panel-copy h3 {
  font-size: clamp(3.65rem, 6vw, 7rem);
}

.collection-card h3,
.collection-card:not(:first-child) h3 {
  font-size: clamp(3.15rem, 5vw, 6rem);
}

.feature-hero h1 {
  font-size: clamp(4rem, 8.25vw, 9.75rem);
}

.story-full-copy h2 {
  font-size: clamp(3.3rem, 5.35vw, 6rem);
}

.panel-copy > p:not(.kicker),
.collection-card-copy > p:not(.kicker),
.feature-hero-note p,
.collection-hero-copy {
  font-size: var(--body-fluid);
}

/* The quieter editorial sections use the same fluid system as the car-led
   panels.  All major tracks are fractional; children can shrink without
   pushing the page wider than the viewport. */
.service,
.service-reverse {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.service-reverse {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.wanted {
  min-block-size: 0;
  grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr);
  gap: clamp(2.75rem, 7vw, 7rem);
}

.about {
  grid-template-columns: minmax(0, .24fr) minmax(0, 1fr);
  gap: clamp(3rem, 6.5vw, 5.75rem);
}

.about-mark {
  inline-size: min(100%, 14.5rem);
  block-size: auto;
  aspect-ratio: 1;
}

.archive-heading {
  grid-template-columns: minmax(0, 1fr) minmax(0, .55fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}

.story-intro {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
}

.story-split {
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
}

.story-split.reverse {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
}

.story-closing,
.feature-r34 .story-closing {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
}

:where(
  .service,
  .wanted,
  .about,
  .archive-heading,
  .story-intro,
  .story-split,
  .story-closing
) > * {
  min-inline-size: 0;
}

.intro h2 {
  font-size: clamp(3.25rem, 7vw, 7rem);
}

.services-lead h2 {
  font-size: clamp(3.6rem, 8.5vw, 8.6rem);
}

.service-copy h3 {
  font-size: clamp(3rem, 5vw, 5.15rem);
}

.wanted-heading h2 {
  font-size: clamp(4.25rem, 9vw, 8.9rem);
}

.about-copy h2 {
  font-size: clamp(3.25rem, 6.3vw, 6.25rem);
}

.contact h2 {
  font-size: clamp(3.8rem, 8.5vw, 8.6rem);
}

.archive-heading h2 {
  font-size: clamp(3.8rem, 8vw, 7.9rem);
}

.story-intro h2 {
  font-size: clamp(3.5rem, 7.5vw, 7.4rem);
}

.story-copy h2 {
  font-size: clamp(3.3rem, 6.2vw, 6.25rem);
}

.story-closing h2 {
  font-size: clamp(3.4rem, 6.5vw, 6.6rem);
}

/* Home page -------------------------------------------------------------- */

.hero {
  min-block-size: 100svh;
  align-items: stretch;
}

.hero-media img {
  object-position: center bottom !important;
}

.hero-content {
  inline-size: var(--page);
  margin-inline: auto;
  padding-block: clamp(8rem, 18svh, 11rem) clamp(3rem, 8svh, 5rem);
  align-self: end;
}

.scroll-cue {
  position: static;
  z-index: 3;
  align-self: end;
  justify-self: end;
  margin: 0 var(--edge) clamp(3rem, 8svh, 5rem) 0;
}

.hero-location {
  position: static;
  z-index: 3;
  align-self: end;
  justify-self: end;
  margin: 0 var(--edge) clamp(1.5rem, 4svh, 2.5rem) 0;
}

.access-panel {
  block-size: 92svh;
  min-block-size: 92svh;
  align-items: stretch;
}

.access-panel > img {
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.access-panel:hover > img {
  transform: scale(1.018) !important;
}

.panel-index {
  align-self: start;
  justify-self: end;
  margin: clamp(1.5rem, 4vw, 3rem) var(--edge) 0 0;
}

.panel-copy,
.access-gt3 .panel-copy,
.access-ferrari .panel-copy,
.access-22b .panel-copy,
.access-r34 .panel-copy {
  inline-size: min(46vw, 43rem);
  max-inline-size: none;
  padding: 0;
  margin: 0;
}

.access-gt3 .panel-copy {
  align-self: end;
  justify-self: start;
  margin: 0 0 clamp(2.2rem, 6svh, 4.5rem) var(--edge);
  text-align: left;
}

.access-ferrari .panel-copy {
  align-self: center;
  justify-self: end;
  margin-right: var(--edge);
  text-align: right;
}

.access-ferrari .panel-copy > *,
.access-r34 .panel-copy > * {
  margin-left: auto;
}

.access-22b .panel-copy {
  align-self: start;
  justify-self: start;
  margin: clamp(7.5rem, 16svh, 10rem) 0 0 var(--edge);
  text-align: left;
}

.access-r34 .panel-copy {
  align-self: start;
  justify-self: end;
  margin: clamp(7.5rem, 15svh, 9rem) var(--edge) 0 0;
  text-align: right;
}

.access-gt3 > img { object-position: 50% 61% !important; }
.access-ferrari > img { object-position: 50% 54% !important; }
.access-22b > img { object-position: 50% 52% !important; }
.access-r34 > img { object-position: 55% 68% !important; }

.contact {
  min-block-size: 92svh;
}

.contact-content {
  inline-size: var(--page);
  margin-inline: auto;
  align-self: center;
  padding-block: clamp(6rem, 14svh, 9rem);
}

/* Collection index ------------------------------------------------------- */

.collection-hero {
  min-block-size: 90svh;
  padding: 0;
  align-items: stretch;
  background: #080808;
}

.collection-hero-media img {
  object-position: 50% 42% !important;
  transform: none;
}

.collection-hero-inner {
  inline-size: var(--page);
  block-size: 100%;
  min-block-size: 90svh;
  margin-inline: auto;
  padding-block: clamp(8rem, 17svh, 10rem) clamp(2rem, 6svh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem 4vw;
}

.collection-hero .kicker {
  grid-column: 1;
  grid-row: 1;
}

.collection-hero h1 {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  margin-block: clamp(1rem, 3svh, 2rem) 0;
  font-size: clamp(5.25rem, 11vw, 10.8rem);
}

.collection-count {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
}

.collection-hero-copy {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  align-self: end;
  inline-size: min(100%, 33rem);
  margin: 0;
}

.collection-card {
  block-size: 78svh;
  min-block-size: clamp(42rem, 78svh, 52rem);
  align-items: stretch;
}

.collection-card:first-child,
.collection-card-ferrari {
  block-size: 84svh;
  min-block-size: clamp(44rem, 84svh, 56rem);
}

.collection-card-media img {
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}

.collection-card:hover .collection-card-media img {
  transform: scale(1.018) !important;
}

.collection-card-number {
  align-self: start;
  justify-self: end;
  margin: clamp(1.25rem, 3vw, 2.2rem) clamp(1.25rem, 3vw, 2.4rem) 0 0;
}

.collection-card-copy {
  inline-size: min(62%, 47rem);
  padding: 0;
  margin: 0;
}

.collection-card-gt3 .collection-card-copy {
  align-self: start;
  justify-self: start;
  margin: clamp(6.5rem, 14svh, 9rem) 0 0 clamp(2rem, 4vw, 3rem);
}

.collection-card-ferrari .collection-card-copy {
  align-self: end;
  justify-self: end;
  margin: 0 clamp(2rem, 4vw, 3rem) clamp(2rem, 5svh, 3.5rem) 0;
  text-align: right;
}

.collection-card-ferrari .collection-card-copy > * {
  margin-left: auto;
}

.collection-card-22b .collection-card-copy {
  align-self: start;
  justify-self: start;
  margin: clamp(5rem, 12svh, 7rem) 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

.collection-card-r34 .collection-card-copy {
  align-self: start;
  justify-self: end;
  margin: clamp(5rem, 11svh, 6.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
  text-align: right;
}

.collection-card-r34 .collection-card-copy > * {
  margin-left: auto;
}

.collection-card-gt3 .collection-card-media img { object-position: 50% 58% !important; }
.collection-card-ferrari .collection-card-media img { object-position: 50% 54% !important; }
.collection-card-22b .collection-card-media img { object-position: 68% 52% !important; }
.collection-card-r34 .collection-card-media img { object-position: 54% 60% !important; }

/* Feature pages ---------------------------------------------------------- */

.feature-hero,
.feature-page .feature-hero {
  block-size: 100svh !important;
  min-block-size: 100svh !important;
  align-items: stretch;
}

.feature-hero-content,
.feature-page .feature-hero-content,
.feature-gt3 .feature-hero-content,
.feature-22b .feature-hero-content,
.feature-r34 .feature-hero-content {
  inline-size: var(--page) !important;
  block-size: 100% !important;
  min-block-size: 100svh !important;
  margin-inline: auto !important;
  padding-block: clamp(8rem, 17svh, 10rem) clamp(2.25rem, 6svh, 4rem) !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.feature-hero-content > *,
.feature-page .feature-hero-content > *,
.feature-gt3 .feature-hero-content > *,
.feature-22b .feature-hero-content > *,
.feature-r34 .feature-hero-content > * {
  inline-size: min(64vw, 74rem) !important;
}

.feature-hero-note {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  inline-size: 100% !important;
  margin-top: auto;
}

.feature-550 .feature-hero-media img { object-position: 50% 54% !important; }
.feature-22b .feature-hero-media img { object-position: 68% 58% !important; }
.feature-r34 .feature-hero-media img { object-position: 50% 60% !important; }

/* GT3: copy lives in the pavement beneath the 997.2, never across its roof. */
.feature-gt3 .feature-hero-content {
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
}

.feature-gt3 .feature-hero-content > .kicker,
.feature-gt3 .feature-hero-content > h1 {
  inline-size: min(48vw, 49rem);
}

.feature-gt3 .feature-hero h1 {
  font-size: clamp(3.4rem, 4.8vw, 5.4rem);
}

.feature-gt3 .feature-hero-note {
  order: -1;
  align-self: flex-end;
  inline-size: min(40vw, 38rem) !important;
  margin: 0 0 auto;
  text-align: left;
}

.feature-gt3 .feature-hero-media img { object-position: 50% 59% !important; }

.story-full,
.feature-page .story-full {
  block-size: 92svh !important;
  min-block-size: clamp(44rem, 92svh, 61rem) !important;
  align-items: stretch;
  background: #101010;
}

.story-full-copy,
.feature-550 .story-full .story-full-copy,
.feature-22b .story-full .story-full-copy,
.feature-r34 .story-full .story-full-copy,
.feature-gt3 .story-full .story-full-copy {
  inline-size: var(--page);
  block-size: 100%;
  margin-inline: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.story-full-copy > *,
.feature-22b .story-full-copy-right > *,
.feature-gt3 .story-full-copy-right > *,
.feature-r34 .story-full-copy > * {
  inline-size: min(43vw, 44rem);
  max-inline-size: none;
}

.story-full-copy-right {
  align-items: flex-end;
  text-align: right;
}

.story-full.rear .story-full-copy {
  padding-top: clamp(3rem, 8svh, 5rem);
}

.story-full.motion .story-full-copy {
  padding-top: clamp(3rem, 8svh, 5rem);
}

.feature-550 #long-bonnet .story-full-copy {
  justify-content: flex-end;
  padding-bottom: clamp(2.25rem, 6svh, 4rem);
}

.feature-550 #movement .story-full-copy {
  align-items: flex-end;
  text-align: right;
}

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

.feature-550 #long-bonnet > img { object-position: 48% 52% !important; }
.feature-550 #movement > img { object-position: 42% 55% !important; }
.feature-22b .story-full.rear > img { object-position: 64% 58% !important; }
.feature-22b #city-reframed > img { object-position: 38% 60% !important; }
.feature-r34 .story-full.rear > img { object-position: 50% 67% !important; }
.feature-r34 .story-full.motion > img { object-position: 50% 67% !important; }
.feature-gt3 .story-full.rear > img { object-position: 50% 58% !important; }
.feature-gt3 .story-full.motion > img { object-position: 62% 57% !important; }

.feature-r34 .story-closing,
.story-closing {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(3rem, 7vw, 8rem);
}

.feature-r34 .story-closing-media {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3000 / 1687;
  margin: 0;
}

.feature-r34 .story-closing-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center !important;
}

/* Desktop portrait: use a clean editorial banner for the three-car hero.
   The 16:9 crop removes the photographer mark at the source image's bottom. */
@media (min-width: 1025px) and (orientation: portrait) {
  .collection-hero {
    min-block-size: 0;
    aspect-ratio: 16 / 9;
  }

  .collection-hero-inner {
    min-block-size: 0;
    padding-block: clamp(7rem, 12vw, 9rem) clamp(1.5rem, 4vw, 3rem);
  }

  .access-22b > img { object-position: 78% 56% !important; }

  .access-ferrari .panel-copy {
    align-self: end;
    margin: 0 var(--edge) clamp(2.5rem, 7vh, 5rem) 0;
  }
}

/* Tablet: 480px–1024px (480 intentionally belongs to this tier) -------- */
@media (min-width: 480px) and (max-width: 1024px) {
  :root {
    --page: 92vw;
    --edge: 4vw;
  }

  .site-header {
    block-size: clamp(4.75rem, 10svh, 5.5rem);
    padding-inline-start: max(4vw, env(safe-area-inset-left));
    padding-inline-end: max(4vw, env(safe-area-inset-right));
    grid-template-columns: minmax(0, 1fr) auto;
    background: rgba(5, 5, 5, .94);
  }

  .site-header.scrolled { block-size: clamp(4.25rem, 8svh, 4.75rem); }
  .desktop-nav,
  .header-inquiry { display: none; }
  .menu-toggle { display: block; justify-self: end; }
  .wordmark-glyph { inline-size: clamp(10.5rem, 26vw, 13rem); }

  .panel-copy h3 { font-size: clamp(3.1rem, 8vw, 5.7rem); }
  .feature-hero h1 { font-size: clamp(3.65rem, 9vw, 6.8rem); }
  .story-full-copy h2 { font-size: clamp(3rem, 7.5vw, 5.5rem); }

  .access-panel {
    block-size: 84svh;
    min-block-size: 84svh;
  }

  .access-panel .panel-copy,
  .access-gt3 .panel-copy,
  .access-ferrari .panel-copy,
  .access-22b .panel-copy,
  .access-r34 .panel-copy {
    inline-size: min(72vw, 38rem);
  }

  .access-gt3 .panel-copy {
    margin: 0 0 4svh var(--edge);
  }

  .access-ferrari .panel-copy {
    align-self: end;
    justify-self: end;
    margin: 0 var(--edge) 4svh 0;
  }

  .access-22b .panel-copy {
    margin: 12svh 0 0 var(--edge);
  }

  .access-r34 .panel-copy {
    margin: 12svh var(--edge) 0 0;
  }

  .access-ferrari > img { object-position: 50% 48% !important; }
  .access-22b > img { object-position: 78% 56% !important; }
  .access-r34 > img { object-position: 63% 63% !important; }

  .collection-hero {
    min-block-size: 0;
    aspect-ratio: 16 / 9;
  }

  .collection-hero-inner {
    min-block-size: 0;
    padding-block: clamp(5.5rem, 12vw, 7rem) clamp(1.25rem, 3vw, 2rem);
  }

  .collection-hero h1 {
    font-size: clamp(4rem, 13vw, 7rem);
  }

  .collection-hero-copy {
    font-size: clamp(.72rem, 1.4vw, .9rem);
    line-height: 1.55;
  }

  .archive-heading,
  .service,
  .service-reverse,
  .wanted,
  .about,
  .story-intro,
  .story-split,
  .story-split.reverse,
  .story-closing,
  .feature-r34 .story-closing {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-reverse .service-media,
  .service-reverse .service-copy {
    grid-column: 1;
  }

  .service-reverse .service-media { grid-row: 1; }
  .service-reverse .service-copy { grid-row: 2; }

  .story-split.reverse .story-image,
  .story-split.reverse .story-copy {
    grid-column: 1;
  }

  .story-split.reverse .story-copy { grid-row: 1; }
  .story-split.reverse .story-image { grid-row: 2; }

  .service-media,
  .service-media img,
  .wanted-media,
  .wanted-media img {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
  }

  .service-media { aspect-ratio: 4 / 5; }
  .service-reverse .service-media,
  .wanted-media { aspect-ratio: 4 / 3; }

  .service-media img,
  .wanted-media img {
    block-size: 100%;
    object-fit: cover;
  }

  .about-mark {
    inline-size: min(28vw, 11rem);
  }

  .collection-card-copy {
    inline-size: min(74%, 38rem);
  }

  .feature-hero,
  .feature-page .feature-hero,
  .feature-hero-content,
  .feature-page .feature-hero-content,
  .feature-gt3 .feature-hero-content,
  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    block-size: 88svh !important;
    min-block-size: 88svh !important;
  }

  .feature-hero-content,
  .feature-page .feature-hero-content,
  .feature-gt3 .feature-hero-content,
  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    padding-block: clamp(6rem, 14svh, 8rem) clamp(1.75rem, 5svh, 3rem) !important;
  }

  .feature-hero-content > *,
  .feature-page .feature-hero-content > *,
  .feature-22b .feature-hero-content > *,
  .feature-r34 .feature-hero-content > * {
    inline-size: min(76vw, 39rem);
  }

  .feature-gt3 .feature-hero-content > .kicker,
  .feature-gt3 .feature-hero-content > h1 {
    inline-size: min(74vw, 39rem);
  }

  .feature-gt3 .feature-hero-note {
    inline-size: min(48vw, 29rem) !important;
  }

  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    align-items: flex-start;
    text-align: left;
  }

  .feature-22b .feature-hero-media img { object-position: 72% 58% !important; }
  .feature-r34 .feature-hero-media img { object-position: 52% 63% !important; }

  .story-full,
  .feature-page .story-full {
    block-size: 72svh !important;
    min-block-size: 72svh !important;
  }

  .story-full-copy,
  .feature-550 .story-full .story-full-copy,
  .feature-22b .story-full .story-full-copy,
  .feature-r34 .story-full .story-full-copy,
  .feature-gt3 .story-full .story-full-copy {
    inline-size: 92vw;
  }

  .story-full-copy > *,
  .feature-22b .story-full-copy-right > *,
  .feature-gt3 .story-full-copy-right > *,
  .feature-r34 .story-full-copy > * {
    inline-size: min(64vw, 34rem);
  }

  .story-duo,
  .story-duo.story-duo-editorial,
  .story-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .story-duo figure,
  .story-duo.story-duo-editorial figure:first-child,
  .story-duo.story-duo-editorial figure:last-child,
  .story-gallery figure,
  .story-gallery figure:first-child,
  .story-gallery figure:not(:first-child),
  .story-image,
  .story-image img,
  .story-closing-media {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: auto;
  }

  .story-duo img,
  .story-gallery img,
  .story-image img,
  .story-closing-media img {
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  .feature-r34 .story-closing-media {
    aspect-ratio: 3000 / 1687;
  }

  .feature-r34 .story-closing-media img {
    block-size: 100%;
    object-fit: cover;
  }
}

/* Mobile: under 480px ---------------------------------------------------- */
@media (max-width: 479px) {
  :root {
    --page: 90vw;
    --edge: 5vw;
  }

  .site-header {
    block-size: clamp(4.5rem, 10svh, 5.25rem);
    padding-inline-start: max(5vw, env(safe-area-inset-left));
    padding-inline-end: max(5vw, env(safe-area-inset-right));
    grid-template-columns: minmax(0, 1fr) auto;
    background: rgba(5, 5, 5, .96);
  }

  .site-header.scrolled { block-size: clamp(4.1rem, 9svh, 4.7rem); }
  .desktop-nav,
  .header-inquiry { display: none; }
  .menu-toggle { display: block; justify-self: end; }
  .wordmark-glyph { inline-size: clamp(9.75rem, 45vw, 12rem); }

  .hero {
    min-block-size: 100svh;
  }

  .hero-content {
    inline-size: 90vw;
    padding-block: clamp(6rem, 17svh, 8rem) clamp(2rem, 6svh, 3.5rem);
  }

  .hero h1 { font-size: clamp(3rem, 13.2vw, 4.35rem); }
  .hero-intro { font-size: clamp(.8rem, 3.5vw, .92rem); }
  .hero-actions { display: grid; }
  .button { inline-size: 100%; min-inline-size: 0; }
  .scroll-cue,
  .hero-location { display: none; }

  .access-heading {
    inline-size: 90vw;
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(4.5rem, 13vw, 6rem);
  }

  .access-heading h2 { font-size: clamp(4rem, 20vw, 5.6rem); }

  .access-panel {
    block-size: 78svh;
    min-block-size: 78svh;
  }

  .access-panel .panel-copy,
  .access-gt3 .panel-copy,
  .access-ferrari .panel-copy,
  .access-22b .panel-copy,
  .access-r34 .panel-copy {
    inline-size: min(84vw, 25rem);
  }

  .panel-copy h3 {
    font-size: clamp(2.8rem, 12.5vw, 3.8rem);
    line-height: .84;
  }

  .panel-copy > p:not(.kicker),
  .panel-link { display: none; }

  .panel-index {
    margin: 1.25rem 5vw 0 0;
  }

  .access-gt3 .panel-copy {
    align-self: start;
    justify-self: start;
    margin: clamp(5.75rem, 14svh, 7rem) 0 0 5vw;
  }

  .access-ferrari .panel-copy {
    align-self: end;
    justify-self: end;
    margin: 0 5vw clamp(1.75rem, 5svh, 3rem) 0;
  }

  .access-22b .panel-copy {
    align-self: start;
    justify-self: start;
    margin: clamp(5.75rem, 14svh, 7rem) 0 0 5vw;
  }

  .access-r34 .panel-copy {
    align-self: start;
    justify-self: end;
    margin: clamp(5.75rem, 14svh, 7rem) 5vw 0 0;
  }

  .access-gt3 > img { object-position: 50% 58% !important; }
  .access-ferrari > img { object-position: 48% 46% !important; }
  .access-22b > img { object-position: 79% 56% !important; }
  .access-r34 > img { object-position: 65% 62% !important; }

  .access-ferrari .panel-shade {
    background: linear-gradient(0deg, rgba(0,0,0,.86), transparent 46%);
  }

  .access-22b .panel-shade,
  .access-r34 .panel-shade {
    background: linear-gradient(180deg, rgba(0,0,0,.72), transparent 48%);
  }

  .collection-hero {
    min-block-size: 0;
    aspect-ratio: 16 / 9;
  }

  .collection-hero-inner {
    inline-size: 90vw;
    min-block-size: 0;
    padding-block: clamp(4.75rem, 19vw, 5.7rem) 4vw;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .collection-hero .kicker {
    grid-column: 1;
    grid-row: 1;
    font-size: clamp(.42rem, 1.7vw, .55rem);
  }

  .collection-hero h1 {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    font-size: clamp(2.35rem, 11.5vw, 3.45rem);
    margin: 0 0 3vw;
  }

  .collection-count,
  .collection-hero-copy {
    display: none;
  }

  .archive {
    inline-size: 90vw;
    padding-block: clamp(5rem, 18vw, 7rem);
  }

  .archive-heading,
  .service,
  .service-reverse,
  .wanted,
  .about,
  .story-intro,
  .story-split,
  .story-split.reverse,
  .story-closing,
  .feature-r34 .story-closing {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-reverse .service-media,
  .service-reverse .service-copy {
    grid-column: 1;
  }

  .service-reverse .service-media { grid-row: 1; }
  .service-reverse .service-copy { grid-row: 2; }

  .story-split.reverse .story-image,
  .story-split.reverse .story-copy {
    grid-column: 1;
  }

  .story-split.reverse .story-copy { grid-row: 1; }
  .story-split.reverse .story-image { grid-row: 2; }

  .service-media,
  .service-media img,
  .wanted-media,
  .wanted-media img {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
  }

  .service-media { aspect-ratio: 4 / 5; }
  .service-reverse .service-media,
  .wanted-media { aspect-ratio: 4 / 3; }

  .service-media img,
  .wanted-media img {
    block-size: 100%;
    object-fit: cover;
  }

  .about-mark {
    inline-size: min(46vw, 10.5rem);
  }

  .collection-grid { grid-template-columns: minmax(0, 1fr); }

  .collection-card,
  .collection-card:first-child,
  .collection-card-ferrari {
    grid-column: 1;
    block-size: 74svh;
    min-block-size: 74svh;
  }

  .collection-card-copy,
  .collection-card-gt3 .collection-card-copy,
  .collection-card-ferrari .collection-card-copy,
  .collection-card-22b .collection-card-copy,
  .collection-card-r34 .collection-card-copy {
    inline-size: 82vw;
  }

  .collection-card h3,
  .collection-card:not(:first-child) h3 {
    font-size: clamp(2.65rem, 12vw, 3.7rem);
  }

  .collection-card-copy > p:not(.kicker),
  .collection-card-link { display: none; }

  .collection-card-gt3 .collection-card-copy {
    margin: 5.75rem 0 0 4vw;
  }

  .collection-card-ferrari .collection-card-copy {
    align-self: end;
    justify-self: end;
    margin: 0 4vw 1.75rem 0;
  }

  .collection-card-22b .collection-card-copy {
    margin: 5.75rem 0 0 4vw;
  }

  .collection-card-r34 .collection-card-copy {
    margin: 5.75rem 4vw 0 0;
  }

  .collection-card-gt3 .collection-card-media img { object-position: 50% 58% !important; }
  .collection-card-ferrari .collection-card-media img { object-position: 48% 52% !important; }
  .collection-card-22b .collection-card-media img { object-position: 79% 55% !important; }
  .collection-card-r34 .collection-card-media img { object-position: 65% 62% !important; }

  .feature-hero,
  .feature-page .feature-hero,
  .feature-hero-content,
  .feature-page .feature-hero-content,
  .feature-gt3 .feature-hero-content,
  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    block-size: 86svh !important;
    min-block-size: 86svh !important;
  }

  .feature-hero-content,
  .feature-page .feature-hero-content,
  .feature-gt3 .feature-hero-content,
  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    inline-size: 90vw !important;
    padding-block: clamp(5.75rem, 16svh, 7rem) clamp(1.5rem, 4svh, 2.5rem) !important;
  }

  .feature-hero-content > *,
  .feature-page .feature-hero-content > *,
  .feature-22b .feature-hero-content > *,
  .feature-r34 .feature-hero-content > * {
    inline-size: min(84vw, 27rem);
  }

  .feature-hero h1 {
    font-size: clamp(3rem, 13vw, 4.35rem);
  }

  .feature-hero-note p { font-size: clamp(.76rem, 3.5vw, .9rem); }
  .feature-hero-note span { display: none; }

  .feature-gt3 .feature-hero-content > .kicker,
  .feature-gt3 .feature-hero-content > h1 {
    inline-size: min(86vw, 28rem);
  }

  .feature-gt3 .feature-hero h1 {
    font-size: clamp(2.65rem, 11.6vw, 3.7rem);
  }

  .feature-gt3 .feature-hero-note {
    inline-size: min(72vw, 22rem) !important;
  }

  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    align-items: flex-start;
    text-align: left;
  }

  /* On a narrow portrait crop, preserve the Ferrari's nose and use the
     uninterrupted asphalt beneath it for the complete title block. */
  .feature-550 .feature-hero-content {
    justify-content: flex-end;
    padding-top: 0 !important;
  }

  .feature-550 .feature-hero-content > * {
    inline-size: min(82vw, 25rem) !important;
  }

  .feature-550 .feature-hero h1 {
    font-size: clamp(2.7rem, 11.25vw, 3.75rem);
  }

  .feature-550 .feature-hero-shade {
    background:
      linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 32%, transparent 58%),
      linear-gradient(90deg, rgba(0,0,0,.22), transparent 50%);
  }

  .feature-550 .feature-hero-media img { object-position: 28% 54% !important; }
  .feature-22b .feature-hero-media img { object-position: 54% 58% !important; }
  .feature-r34 .feature-hero-media img { object-position: 54% 64% !important; }
  .feature-gt3 .feature-hero-media img { object-position: 50% 58% !important; }

  .story-full,
  .feature-page .story-full {
    block-size: 72svh !important;
    min-block-size: 72svh !important;
  }

  .story-full-copy,
  .feature-550 .story-full .story-full-copy,
  .feature-22b .story-full .story-full-copy,
  .feature-r34 .story-full .story-full-copy,
  .feature-gt3 .story-full .story-full-copy {
    inline-size: 90vw;
  }

  .story-full-copy > *,
  .feature-22b .story-full-copy-right > *,
  .feature-gt3 .story-full-copy-right > *,
  .feature-r34 .story-full-copy > * {
    inline-size: min(82vw, 26rem);
  }

  .story-full-copy h2,
  .feature-22b .story-full-copy-right h2,
  .feature-gt3 .story-full-copy-right h2,
  .feature-r34 .story-full-copy h2 {
    font-size: clamp(2.7rem, 12vw, 3.85rem);
  }

  .story-full.rear .story-full-copy,
  .story-full.motion .story-full-copy {
    padding-top: clamp(4.75rem, 13svh, 6rem);
  }

  .feature-550 #long-bonnet .story-full-copy {
    padding-top: 0;
    padding-bottom: clamp(1.5rem, 5svh, 2.5rem);
  }

  .feature-550 #movement .story-full-copy,
  .feature-22b #city-reframed .story-full-copy {
    align-items: flex-end;
    text-align: right;
  }

  .feature-550 #movement .story-full-copy {
    padding-top: clamp(5.4rem, 11svh, 6rem);
  }

  .feature-550 #movement .story-full-copy > * {
    inline-size: min(76vw, 22rem);
  }

  .feature-550 #movement .story-full-copy h2 {
    font-size: clamp(2.15rem, 9.5vw, 3rem);
  }

  .feature-550 #long-bonnet > img { object-position: 48% 52% !important; }
  .feature-550 #movement > img { object-position: 42% 44% !important; }
  .feature-22b .story-full.rear > img { object-position: 65% 58% !important; }
  .feature-22b #city-reframed > img { object-position: 37% 60% !important; }
  .feature-r34 .story-full.rear > img { object-position: 50% 68% !important; }
  .feature-r34 .story-full.motion > img { object-position: 50% 67% !important; }
  .feature-gt3 .story-full.rear > img { object-position: 50% 58% !important; }
  .feature-gt3 .story-full.motion > img { object-position: 62% 58% !important; }

  .story-duo,
  .story-duo.story-duo-editorial,
  .story-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .story-duo figure,
  .story-duo.story-duo-editorial figure:first-child,
  .story-duo.story-duo-editorial figure:last-child,
  .story-gallery figure,
  .story-gallery figure:first-child,
  .story-gallery figure:not(:first-child),
  .story-image,
  .story-image img,
  .story-closing-media {
    inline-size: 100%;
    block-size: auto;
    min-block-size: 0;
    aspect-ratio: auto;
  }

  .story-duo img,
  .story-gallery img,
  .story-image img,
  .story-closing-media img {
    inline-size: 100%;
    block-size: auto;
    object-fit: contain;
  }

  .feature-r34 .story-closing-media {
    aspect-ratio: 3000 / 1687;
  }

  .feature-r34 .story-closing-media img {
    block-size: 100%;
    object-fit: cover;
  }

  .story-intro,
  .story-split,
  .story-closing {
    padding-block: clamp(5rem, 18vw, 7rem);
    gap: clamp(2.5rem, 10vw, 4rem);
  }

  .story-duo,
  .story-gallery { margin-bottom: clamp(5rem, 18vw, 7rem); }
}

/* Phone/tablet landscape: keep the full lower body and wheels by allowing
   an image-led panel to be taller than the short browser viewport. */
@media (max-width: 1024px) and (orientation: landscape) {
  .access-panel {
    min-block-size: 0;
    block-size: auto;
    aspect-ratio: 16 / 9;
  }

  .access-panel .panel-copy,
  .access-gt3 .panel-copy,
  .access-ferrari .panel-copy,
  .access-22b .panel-copy,
  .access-r34 .panel-copy {
    inline-size: min(44vw, 26rem);
  }

  .panel-copy h3 {
    font-size: clamp(2.25rem, 6vw, 3.75rem);
  }

  .access-ferrari .panel-copy {
    align-self: end;
    margin-bottom: 3vw;
  }

  .collection-hero {
    min-block-size: 0;
    aspect-ratio: 16 / 9;
  }

  .collection-hero-inner {
    min-block-size: 0;
    padding-block: clamp(4.5rem, 11vw, 6rem) 2vw;
  }

  .feature-hero,
  .feature-page .feature-hero,
  .feature-hero-content,
  .feature-page .feature-hero-content,
  .feature-gt3 .feature-hero-content,
  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    min-block-size: 0 !important;
    block-size: auto !important;
    aspect-ratio: 16 / 9;
  }

  .feature-hero-content,
  .feature-page .feature-hero-content,
  .feature-gt3 .feature-hero-content,
  .feature-22b .feature-hero-content,
  .feature-r34 .feature-hero-content {
    padding-block: clamp(4.5rem, 10vw, 5.5rem) 2.5vw !important;
  }

  .feature-hero h1 {
    font-size: clamp(2.3rem, 6vw, 4.2rem);
  }

  .feature-gt3 .feature-hero h1 {
    font-size: clamp(2.1rem, 5.5vw, 3.7rem);
  }

  .feature-hero-note p { font-size: clamp(.68rem, 1.8vw, .88rem); }

  .story-full,
  .feature-page .story-full {
    min-block-size: 0 !important;
    block-size: calc(100svh - clamp(4.75rem, 10svh, 5.5rem)) !important;
    aspect-ratio: auto;
  }

  /* Crop the expendable sky/background first on short landscape screens.
     The lower edge of each car, including the wheels, remains in-frame. */
  .feature-550 #long-bonnet > img { object-position: 48% 70% !important; }
  .feature-550 #movement > img { object-position: 42% 70% !important; }
  .feature-22b .story-full.rear > img { object-position: 64% 72% !important; }
  .feature-22b #city-reframed > img { object-position: 38% 72% !important; }
  .feature-r34 .story-full.rear > img,
  .feature-r34 .story-full.motion > img { object-position: 50% 72% !important; }
  .feature-gt3 .story-full.rear > img { object-position: 50% 70% !important; }
  .feature-gt3 .story-full.motion > img { object-position: 62% 70% !important; }

  .story-full-copy,
  .feature-550 .story-full .story-full-copy,
  .feature-22b .story-full .story-full-copy,
  .feature-r34 .story-full .story-full-copy,
  .feature-gt3 .story-full .story-full-copy {
    block-size: 100%;
    padding-top: 6vw;
  }

  .feature-550 #long-bonnet .story-full-copy {
    padding-top: 0;
    padding-bottom: 3vw;
  }

  /* The portrait Fuji source fills a very wide phone viewport by cropping sky.
     Keep its caption on the open road below the nose instead of across the car. */
  .feature-r34 .story-full.motion .story-full-copy {
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 2.25vw;
  }

  .feature-r34 .story-full.motion .story-full-copy > * {
    inline-size: min(36vw, 19rem);
  }

  .feature-r34 .story-full.motion .story-full-copy h2 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
  }

  .story-full-copy h2,
  .feature-22b .story-full-copy-right h2,
  .feature-gt3 .story-full-copy-right h2,
  .feature-r34 .story-full-copy h2 {
    font-size: clamp(2.15rem, 5.4vw, 3.6rem);
  }

  .story-full-copy > *,
  .feature-22b .story-full-copy-right > *,
  .feature-gt3 .story-full-copy-right > *,
  .feature-r34 .story-full-copy > * {
    inline-size: min(43vw, 25rem);
  }

  .story-duo figure,
  .story-duo.story-duo-editorial figure:first-child,
  .story-duo.story-duo-editorial figure:last-child,
  .story-gallery figure,
  .story-gallery figure:first-child,
  .story-gallery figure:not(:first-child),
  .story-image,
  .story-image img,
  .story-closing-media {
    block-size: auto;
    min-block-size: 0;
  }
}