.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--c-ivory);
  background: var(--c-black);
  overflow: hidden;
  isolation: isolate;
}
.hero--compact { min-height: min(78svh, 760px); }
.hero--short { min-height: min(62svh, 620px); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media .media {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.hero__media .media__placeholder { place-items: center; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(11, 11, 11, 0.88) 0%, rgba(11, 11, 11, 0.45) 38%, rgba(11, 11, 11, 0.12) 68%, rgba(11, 11, 11, 0.42) 100%);
  pointer-events: none;
}
.hero--burgundy .hero__scrim {
  background: linear-gradient(to top, rgba(75, 20, 27, 0.9) 0%, rgba(75, 20, 27, 0.4) 45%, rgba(11, 11, 11, 0.3) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--sp-xl)) var(--gutter) clamp(2.5rem, 6vw, 5rem);
  display: grid;
  gap: var(--sp-lg);
}

.hero__eyebrow { color: var(--c-champagne); }
.hero__eyebrow::before { background: var(--c-red); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-hero);
  font-weight: 600;
  text-transform: uppercase;
  max-width: 15ch;
}
.hero__title em { font-style: normal; color: var(--c-champagne); }

.hero__lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: #DAD6D0;
  max-width: 46ch;
}

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-lg);
  padding-top: var(--sp-sm);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-md) var(--sp-lg);
  border-top: 1px solid rgba(245, 243, 239, 0.22);
  padding-top: var(--sp-sm);
  width: 100%;
}
.hero__meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.hero__meta-value {
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero__meta-value span { font-size: 0.55em; margin-left: 0.25em; color: var(--c-champagne); }
.hero__meta-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #B7B2AA;
  font-weight: 600;
}


.hero__rail {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  z-index: 2;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #A8A29A;
  font-weight: 600;
  display: none;
}
@media (min-width: 1100px) { .hero__rail { display: block; } }

.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 3;
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #A8A29A;
  font-weight: 600;
}
@media (min-width: 1024px) and (min-height: 700px) { .hero__scroll { display: flex; } }
.hero__scroll::after {
  content: '';
  width: 48px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: scrollcue 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollcue {
  0%, 100% { transform: scaleX(0.25); opacity: 0.4; }
  50% { transform: scaleX(1); opacity: 1; }
}


/* ---------- Герой на телефонах и планшетах ----------
   Кадры машин горизонтальные (16:9). В полноэкранном блоке 100svh на узком
   экране object-fit: cover обрезал их до ~26% ширины — от машины оставалась
   только середина. Поэтому на узких экранах фото занимает собственную
   пропорциональную полосу и машина видна целиком, а текст идёт под ней на
   фоне героя. Полоса начинается под шапкой, чтобы та не перекрывала кадр.
   :has() отсекает страницу 404 — там герой без фото и его трогать не нужно.
   До 1023px включительно: планшет в портрете такой же вытянутый, там кадр
   обрезался до ~41%. Десктоп (1024+) остаётся полноэкранным, как задуман. */
@media (max-width: 1023px) {
  .hero:has(.hero__media) {
    min-height: 0;
    display: block;
    padding-top: var(--header-h);
  }

  .hero:has(.hero__media) .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
  }

  /* Высоту полосы задаёт та же пропорция, что шаблон указал для кадра
     (--media-ratio, у всех героев 21/9). Она совпадает с пропорцией самих
     фото 2400x1029, поэтому обрезки нет вообще — машина видна целиком. */
  .hero__media .media {
    aspect-ratio: var(--media-ratio, 16 / 9);
    height: auto;
  }

  /* мягкий переход фото в фон героя вместо затемнения поверх всего блока */
  .hero:has(.hero__media) .hero__scrim { display: none; }
  .hero:has(.hero__media) .hero__media::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to top, var(--c-black) 0%, rgba(11, 11, 11, 0) 100%);
  }
  .hero--burgundy:has(.hero__media) { background: var(--c-burgundy-deep); }
  .hero--burgundy:has(.hero__media) .hero__media::after {
    background: linear-gradient(to top, var(--c-burgundy-deep) 0%, rgba(75, 20, 27, 0) 100%);
  }

  .hero:has(.hero__media) .hero__inner { padding-top: var(--sp-md); }
}



.editorial {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-md) var(--sp-md);
  align-items: start;
}
.editorial__aside { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-sm); }
.editorial__main { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-md); }
.editorial__media { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .editorial { gap: var(--sp-lg) var(--sp-md); }
  .editorial__aside { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 2rem); }
  .editorial__main { grid-column: 5 / 12; }
  .editorial--wide .editorial__main { grid-column: 5 / 13; }
  .editorial--split .editorial__aside { grid-column: 1 / 6; position: static; }
  .editorial--split .editorial__media { grid-column: 7 / 13; }
}

.editorial__number {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: var(--tracking-hero);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}


.feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-lg) var(--sp-md);
  align-items: center;
}
.feature__media { grid-column: 1 / -1; }
.feature__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-sm); }
@media (min-width: 900px) {
  .feature__media { grid-column: 1 / 8; }
  .feature__body { grid-column: 9 / 13; }
  .feature--reverse .feature__media { grid-column: 6 / 13; grid-row: 1; }
  .feature--reverse .feature__body { grid-column: 1 / 5; grid-row: 1; }
}


.band { position: relative; }
.band .media { --media-ratio: 21 / 9; }
@media (max-width: 767px) { .band .media { --media-ratio: 4 / 5; } }



.pullquote {
  display: grid;
  gap: var(--sp-md);
  max-width: 34ch;
}
.pullquote__text {
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: var(--tracking-title);
  font-weight: 500;
}
.pullquote__meta { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); font-weight: 600; }



.chapters { display: flex; flex-direction: column; }
.chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-sm) var(--sp-md);
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line);
}
.chapter:last-child { border-bottom: 1px solid var(--line); }
.chapter__number {
  grid-column: 1 / -1;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wider);
  font-weight: 700;
  color: var(--accent-text);
}
.chapter__title { grid-column: 1 / -1; font-size: var(--fs-h2); font-weight: 600; letter-spacing: var(--tracking-title); line-height: 1.08; }
.chapter__body { grid-column: 1 / -1; color: var(--fg-muted); max-width: var(--max-w-text); }
.chapter__stats { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .chapter__number { grid-column: 1 / 2; }
  .chapter__title { grid-column: 2 / 6; }
  .chapter__body { grid-column: 7 / 12; }
  .chapter__stats { grid-column: 7 / 13; margin-top: var(--sp-sm); }
}




.showcase {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-md);
}
.showcase > * { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .showcase > * { grid-column: span 6; }
}

@media (min-width: 1024px) {
  .showcase > * { grid-column: span 4; }
}


.sticky-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-lg) var(--sp-md);
  align-items: start;
}
.sticky-story__media { grid-column: 1 / -1; }
.sticky-story__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-lg); }
@media (min-width: 900px) {
  .sticky-story__media { grid-column: 1 / 7; position: sticky; top: calc(var(--header-h) + 3rem); }
  .sticky-story__body { grid-column: 8 / 13; gap: var(--sp-2xl); padding-block: var(--sp-lg); }
}
.sticky-story__step { display: flex; flex-direction: column; gap: 0.65rem; }
.sticky-story__step h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: var(--tracking-title); }
.sticky-story__step p { color: var(--fg-muted); }


.rail {
  display: flex;
  gap: var(--sp-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-sm);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; flex: 0 0 min(78vw, 340px); }
@media (min-width: 900px) { .rail > * { flex-basis: 320px; } }
.rail-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: var(--sp-sm);
  border-top: 2px solid var(--c-red);
}
.rail-card__year { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: var(--tracking-title); line-height: 1; font-variant-numeric: tabular-nums; }
.rail-card__title { font-size: var(--fs-h4); font-weight: 600; }
.rail-card__body { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.55; }


.cta-band { display: grid; gap: var(--sp-lg); justify-items: start; }
.cta-band__title {
  font-size: var(--fs-display);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  max-width: 18ch;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .cta-band { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
}



.page-head {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6.5rem));
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.page-head__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-md); align-items: end; }
.page-head__title { grid-column: 1 / -1; font-size: var(--fs-display); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); font-weight: 600; text-transform: uppercase; }
.page-head__lead { grid-column: 1 / -1; font-size: var(--fs-lead); color: var(--fg-muted); max-width: 52ch; }
.page-head__eyebrow { grid-column: 1 / -1; margin-bottom: var(--sp-sm); }
@media (min-width: 900px) {
  .page-head__title { grid-column: 1 / 8; }
  .page-head__lead { grid-column: 8 / 13; }
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-md);
}
.models-empty { padding-block: var(--sp-2xl); text-align: center; color: var(--fg-muted); }



.model-hero__title {
  font-size: clamp(3.5rem, 14vw, 12rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-weight: 600;
  text-transform: uppercase;
}
.model-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid currentColor;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
}
.model-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); }
.model-status--ended::before { background: var(--c-gray); }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--sp-md);
  align-items: stretch;
}
.spec-grid > * { display: flex; }
.spec-grid > * > .spec { flex: 1; }

.interior-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-md);
}
.interior-grid > *:nth-child(1) { grid-column: 1 / -1; }
.interior-grid > *:nth-child(2),
.interior-grid > *:nth-child(3) { grid-column: span 6; }
@media (min-width: 900px) {
  .interior-grid > *:nth-child(1) { grid-column: 1 / 9; }
  .interior-grid > *:nth-child(2) { grid-column: 9 / 13; }
  .interior-grid > *:nth-child(3) { grid-column: 1 / 5; }
  .interior-grid > *:nth-child(4) { grid-column: 5 / 13; }
}

.material-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.material {
  background: var(--bg);
  padding: 1rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.material__swatch {
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 40%, transparent);
}
.material__index {
  width: 26px;
  flex: none;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.material__name { font-size: var(--fs-small); font-weight: 600; }
.material__note { font-size: var(--fs-micro); color: var(--fg-muted); letter-spacing: 0.04em; }

.engineering-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.engineering-item { background: var(--bg); padding: clamp(1.25rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; }
.engineering-item h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking-title); }
.engineering-item p { font-size: var(--fs-small); color: var(--fg-muted); line-height: 1.6; }

.model-switch { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.model-switch__item {
  flex: 1 1 130px;
  background: var(--bg);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: background-color var(--dur-fast) linear;
}
.model-switch__item:hover { background: var(--bg-raised); }
.model-switch__item[aria-current='page'] { background: var(--c-red); color: var(--c-white); }
.model-switch__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking-title); }
.model-switch__cat { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: 0.7; }



.configurator {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-lg) var(--sp-md);
  align-items: start;
}
.configurator__stage { grid-column: 1 / -1; }
.configurator__panel { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-lg); }
@media (min-width: 1024px) {
  .configurator__stage { grid-column: 1 / 8; position: sticky; top: calc(var(--header-h) + 2rem); }
  .configurator__panel { grid-column: 8 / 13; }
}

.config-stage { position: relative; background: var(--bg-raised); border: 1px solid var(--line); }
.config-stage__media { position: relative; }
.config-stage__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  padding: 0.45rem 0.8rem;
  background: var(--c-black);
  color: var(--c-ivory);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 700;
}
.config-stage__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--fg-muted);
}
.config-stage__foot strong { color: var(--fg); font-weight: 700; }

.config-group { display: flex; flex-direction: column; gap: var(--sp-sm); }
.config-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
.config-group__title { font-size: var(--fs-micro); letter-spacing: var(--tracking-wider); text-transform: uppercase; font-weight: 700; }
.config-group__value { font-size: var(--fs-micro); letter-spacing: 0.08em; color: var(--accent-text); font-weight: 600; text-transform: uppercase; }
.config-options { display: flex; flex-direction: column; gap: 0.4rem; }
.config-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  min-height: 52px;
  border: 1px solid var(--line);
  text-align: left;
  width: 100%;
  transition: border-color var(--dur-fast) linear, background-color var(--dur-fast) linear;
}
.config-option:hover { border-color: var(--c-line-strong); }
.config-option[aria-pressed='true'] { border-color: var(--c-red); background: var(--bg-raised); }
.config-option__swatch { width: 30px; height: 30px; flex: none; border: 1px solid rgba(0, 0, 0, 0.15); }
.config-option__swatch--split { background-image: linear-gradient(135deg, var(--sw-a) 0 50%, var(--sw-b) 50% 100%); }
.config-option__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.config-option__name { font-size: var(--fs-small); font-weight: 600; }
.config-option__note { font-size: var(--fs-micro); color: var(--fg-muted); }
.config-stage__foot { color: var(--fg-muted); }
.config-option__check { margin-left: auto; color: var(--c-red); opacity: 0; transition: opacity var(--dur-fast) linear; flex: none; }
.config-option[aria-pressed='true'] .config-option__check { opacity: 1; }

.config-summary { border-top: 1px solid var(--line); padding-top: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.config-summary__note { font-size: var(--fs-micro); color: var(--fg-muted); line-height: 1.6; }



.heritage-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-lg) var(--sp-md); align-items: start; }
.heritage-layout__rail { grid-column: 1 / -1; }
.heritage-layout__body { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .heritage-layout__rail { grid-column: 1 / 3; position: sticky; top: calc(var(--header-h) + 3rem); }
  .heritage-layout__body { grid-column: 4 / 13; }
}
.year-rail { display: flex; flex-direction: column; gap: 0.55rem; border-left: 1px solid var(--line); padding-left: 1rem; }
.year-rail__item {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--fg-muted);
  transition: color var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out);
  font-variant-numeric: tabular-nums;
  display: block;
}
.year-rail__item:hover { color: var(--fg); }
.year-rail__item.is-current { color: var(--c-red); transform: translateX(4px); }



.motorsport-chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-md);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.motorsport-chapter__media { grid-column: 1 / -1; }
.motorsport-chapter__body { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-sm); }
@media (min-width: 900px) {
  .motorsport-chapter__media { grid-column: 1 / 8; }
  .motorsport-chapter__body { grid-column: 9 / 13; }
  .motorsport-chapter:nth-child(even) .motorsport-chapter__media { grid-column: 6 / 13; grid-row: 1; }
  .motorsport-chapter:nth-child(even) .motorsport-chapter__body { grid-column: 1 / 5; grid-row: 1; }
}



.centre-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 640px) { .centre-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .centre-list { grid-template-columns: repeat(5, 1fr); } }
.centre {
  background: var(--bg);
  padding: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-fast) linear;
}
.centre:hover { background: var(--bg-raised); }
.centre__name { font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking-title); }
.centre__place { font-size: var(--fs-small); color: var(--fg-muted); }
.centre__year { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); color: var(--accent-text); font-weight: 700; margin-top: 0.3rem; }



.source-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-sm) var(--sp-md); padding-block: clamp(1.75rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.source-group:last-of-type { border-bottom: 1px solid var(--line); }
.source-group__title { grid-column: 1 / -1; font-size: var(--fs-h4); font-weight: 600; letter-spacing: var(--tracking-title); }
.source-group__list { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.7rem; }
@media (min-width: 900px) {
  .source-group__title { grid-column: 1 / 4; }
  .source-group__list { grid-column: 5 / 13; }
}
.source-group__list a { font-size: var(--fs-small); color: var(--fg-muted); border-bottom: 1px solid var(--line); padding-bottom: 0.7rem; display: block; transition: color var(--dur-fast) linear; }
.source-group__list li:last-child a { border-bottom: 0; padding-bottom: 0; }
.source-group__list a:hover { color: var(--c-red); }
.source-group__list a span { display: block; font-size: var(--fs-micro); color: var(--fg-muted); word-break: break-all; margin-top: 0.2rem; }

.asset-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.asset-table th, .asset-table td { text-align: left; padding: 0.7rem 1rem 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.asset-table th { font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }
.asset-table td:first-child { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 500; word-break: break-all; }
.asset-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }


.notice {
  border-left: 2px solid var(--c-red);
  padding: 0.9rem 0 0.9rem 1.1rem;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  max-width: var(--max-w-text);
  line-height: 1.6;
}
.notice strong { color: var(--fg); }



.hero .media { background: #141414; }
.hero .media__placeholder {
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(245, 243, 239, 0.045) 12px 13px),
    radial-gradient(120% 90% at 50% 30%, #262626 0%, #101010 70%);
  place-items: end;
}
.hero .media__frame { border-color: rgba(245, 243, 239, 0.16); }
.hero .media__meta {
  align-items: flex-end;
  text-align: right;
  gap: 0.2rem;
  max-width: min(46ch, 70%);
  padding: clamp(1rem, 2vw, 2rem);
}
.hero .media__label { color: #A8A29A; }
.hero .media__path,
.hero .media__ratio { color: #9A958C; }

@media (max-width: 900px) {
  .hero .media__placeholder { place-items: start center; }
  .hero .media__meta {
    max-width: 92%;
    align-items: center;
    text-align: center;
    padding-top: calc(var(--header-h) + 1rem);
  }
}


.hero__title { max-width: 18ch; }
@media (min-width: 1024px) {
  .hero__inner { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
  .hero__lead { max-width: 42ch; }
}


.showcase > *,
.models-grid > * { display: flex; }
.showcase > * > .model-card,
.models-grid > * > .model-card { flex: 1; display: flex; }
.showcase .model-card__link,
.models-grid .model-card__link { flex: 1; }


.rail {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}