/* Выбранные референсы: красная шапка и технический портрет Camry XV70. */
@font-face {
  font-family: "Anton Camry";
  src: url("../fonts/anton-cyrillic-v2.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Camry UI";
  src: url("../fonts/ibm-plex-sans-condensed-600-v1.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Camry UI";
  src: url("../fonts/ibm-plex-sans-condensed-400-v1.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.camry-red-page .topbar {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
.camry-red-page .topbar-inner {
  max-width: 1680px;
  width: 100%;
  height: clamp(76px, 6.5vw, 100px);
  padding-inline: 3.1%;
  gap: 26px;
}
.camry-red-page .topbar .brand-logo { width: clamp(150px, 13vw, 200px); height: auto; filter: brightness(0) invert(1); }
.camry-red-page .topbar-nav { gap: clamp(18px, 2.5vw, 40px); }
.camry-red-page .topbar-nav a,
.camry-red-page .topbar .btn-auth,
.camry-red-page .topbar-mobile-login { color: #fff; font-family: "Camry UI", sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0; }
.camry-red-page .topbar-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.camry-red-page .auth-cta-pair { margin-left: 8px; gap: 8px; }
.camry-red-page .topbar .btn-auth { padding: 0 16px; background: transparent; border: 1px solid transparent; }
.camry-red-page .topbar .btn-auth-solid { border-color: #ffffff80; }
.camry-red-page .topbar .btn-auth:hover { background: #ffffff18; }
.camry-red-page .topbar-mobile-actions { color: #fff; }
.camry-red-page .topbar-menu-toggle { background: transparent; color: #fff; box-shadow: none; min-width: 44px; min-height: 44px; }
.camry-red-page .topbar-mobile-panel { background: #b8070b; color: #fff; border-color: #ffffff40; }
.camry-red-page .topbar-mobile-panel nav a,
.camry-red-page .topbar-mobile-auth a { color: #fff; border-color: #ffffff40; }
.camry-red-page .topbar-mobile-auth .topbar-mobile-register { background: #171716; border-color: #171716; }
.camry-red-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  color: #fff;
  background: #bc080c;
  container-type: inline-size;
}
.camry-red-hero__scene { position: absolute; inset: 0; z-index: -1; }
.camry-red-hero__scene img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camry-red-hero__title {
  position: absolute;
  left: 60.3%;
  top: 10.5%;
  margin: 0;
  font-family: "Anton Camry", "Oswald", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 11.5cqw;
  line-height: .94;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.camry-red-hero__title > span { display: block; width: max-content; transform: skewX(-10deg) scaleX(1.08); transform-origin: left bottom; }
.camry-red-hero__title-last { font-size: .81em; white-space: nowrap; line-height: 1.14; }
.camry-red-hero__action { position: absolute; left: 74.8%; top: 59.8%; width: 22.2%; }
.camry-red-hero__eyebrow {
  margin: 0 0 .5em;
  font: 400 2.1cqw/1.2 "Anton Camry", "Oswald", sans-serif;
  text-transform: uppercase;
  transform: skewX(-9deg);
  transform-origin: left;
}
.camry-red-hero__description { margin: 0 0 1.2em; font: 400 1.6cqw/1.2 "Camry UI", sans-serif; }
.camry-red-hero__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 5.2cqw;
  padding: .8em 1.2em;
  color: #fff;
  background: #141414;
  font: 400 1.85cqw/1.25 "Anton Camry", "Oswald", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease;
}
.camry-red-hero__button:hover { color: #fff; background: #303030; }
.camry-red-hero__button .material-symbols-rounded { font-size: 1.4em; flex-shrink: 0; }
.camry-red-hero__specs {
  position: absolute;
  bottom: 3.8%;
  right: 3.2%;
  margin: 0;
  color: #151515;
  font: 600 1.08cqw/1.4 "Camry UI", sans-serif;
  text-transform: uppercase;
}
.camry-red-hero__specs span { margin-inline: .2em; }
.camry-red-page :is(.topbar a, .topbar button, .camry-red-hero a):focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.camry-details { background: #fff; color: #171716; scroll-margin-top: 24px; }
.camry-details__stage { position: relative; aspect-ratio: 3 / 2; container-type: inline-size; isolation: isolate; }
.camry-details__scene { position: absolute; inset: 0; z-index: -1; }
.camry-details__scene img { display: block; width: 100%; height: 100%; object-fit: contain; }
.camry-details__title {
  position: absolute; left: 5.2%; top: 6.6%; margin: 0;
  font: 400 8.65cqw/.99 "Anton Camry", "Oswald", sans-serif;
  text-transform: uppercase; letter-spacing: -.025em;
}
.camry-details__model { position: absolute; top: 4.3%; right: 3.7%; margin: 0; font: 600 2cqw/1 "Camry UI", sans-serif; text-transform: uppercase; }
.camry-details__model span { color: #d70b12; }
.camry-details__note { position: absolute; margin: 0; font: 400 2.8cqw/1.1 "Anton Camry", "Oswald", sans-serif; }
.camry-details__note small { display: block; margin-top: .3em; font: 400 .6em/1.2 "Oswald", sans-serif; text-transform: uppercase; }
.camry-details__note--engine { top: 38%; left: 8.6%; }
.camry-details__note--year { top: 18.5%; left: 53.4%; }
.camry-details__note--power { top: 27.7%; left: 85.5%; }
.camry-details__facts {
  position: absolute; top: 78.1%; left: 5.3%; right: 5.3%;
  margin: 0; padding-top: 1.8%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid #aaa; text-align: center;
}
.camry-details__facts > div + div { border-left: 1px solid #ccc; }
.camry-details__facts dt { margin-bottom: .6em; color: #575757; font: 400 1.5cqw/1.3 "Oswald", sans-serif; text-transform: uppercase; }
.camry-details__facts dd { margin: 0; font: 400 3.1cqw/1.2 "Anton Camry", "Oswald", sans-serif; text-transform: uppercase; }
.camry-details__caption { position: absolute; bottom: 2.9%; left: 0; width: 100%; margin: 0; text-align: center; font: 400 1.4cqw/1.5 "Camry UI", sans-serif; }
.camry-details__caption span { color: #d70b12; }
.camry-details__photos { max-width: 1374px; margin: 0 auto; padding: 0 5.3% 32px; }
.camry-details__photo-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 14px; border-top: 1px solid #ddd; }
.camry-details__photo-heading h3 { margin: 0; font: 600 20px/1.4 "Camry UI", sans-serif; }
.camry-details__photo-controls { display: flex; align-items: center; gap: 16px; font-variant-numeric: tabular-nums; }
.camry-details__photo-controls[hidden] { display: none; }
.camry-details__photo-controls button { width: 44px; height: 44px; border: 1px solid #171716; background: #fff; color: #171716; font: 26px/1 Arial, sans-serif; cursor: pointer; }
.camry-details__photo-controls button:hover { background: #171716; color: #fff; }
.camry-details__photos :focus-visible { outline: 3px solid #c6090e; outline-offset: 3px; }
.camry-details__photo-grid { display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; }
.camry-details__photo-grid figure { flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.camry-details__photos { max-width: 1050px; }
.camry-details__photo-grid img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.camry-details__photo-grid figcaption { padding-block: 10px; font: 400 16px/1.4 "Camry UI", sans-serif; }
@media (min-width: 761px) and (max-width: 1100px) {
  .camry-red-hero { aspect-ratio: auto; height: calc(66.6667vw + 274px); }
  .camry-red-hero__scene { top: 74px; bottom: auto; height: 66.6667vw; }
  .camry-red-hero__title { top: calc(7vw + 74px); }
  .camry-red-hero__action { top: calc(66.6667vw + 94px); left: 5%; width: 90%; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .camry-red-hero__eyebrow { font-size: 24px; }
  .camry-red-hero__description { grid-column: 1; font-size: 17px; margin: 0; }
  .camry-red-hero__description br { display: none; }
  .camry-red-hero__button { grid-column: 2; grid-row: 1 / 3; align-self: center; min-height: 62px; font-size: 24px; }
  .camry-red-hero__specs { bottom: 18px; color: #fff; font-size: 12px; }
  .camry-red-page .topbar-inner { height: 74px; padding-inline: 28px; }
  .camry-red-page .topbar-nav, .camry-red-page .auth-cta-pair { display: none; }
  .camry-red-page .topbar-mobile-actions { display: flex; margin-left: auto; align-items: center; gap: 18px; }
}
@media (max-width: 760px) {
  .camry-red-page .topbar-inner { height: 72px; padding-inline: 20px; gap: 12px; }
  .camry-red-page .topbar .brand-logo { width: 130px; height: auto; }
  .camry-red-page .topbar-mobile-actions { gap: 14px; margin-left: auto; }
  .camry-red-page .topbar-mobile-login { font-size: 16px; }
  .camry-red-page .topbar-menu-toggle { width: 44px; height: 44px; }
  .camry-red-page .topbar-menu-toggle .material-symbols-rounded { font-size: 30px; }
  .camry-red-page .topbar-mobile-panel { padding: 12px 20px 22px; }
  .camry-red-hero { aspect-ratio: auto; height: 850px; min-height: 850px; }
  .camry-red-hero__scene { top: calc(390px - 100vw); height: auto; aspect-ratio: 971 / 1619; }
  .camry-red-hero__scene img { object-fit: contain; mask-image: linear-gradient(#000 93%, transparent); }
  .camry-red-hero__title { top: 94px; left: 9%; font-size: clamp(78px, 22vw, 136px); line-height: .99; }
  .camry-red-hero__title-last { font-size: .78em; line-height: 1.15; }
  .camry-red-hero__action { top: auto; bottom: 57px; left: 6%; width: 88%; display: flex; flex-direction: column; align-items: stretch; }
  .camry-red-hero__eyebrow { font-size: 23px; margin: 0 0 8px; }
  .camry-red-hero__description { font-size: 17px; line-height: 1.35; margin: 0 0 18px; }
  .camry-red-hero__description br { display: none; }
  .camry-red-hero__button { min-height: 62px; font-size: 23px; padding: 16px 22px; }
  .camry-red-hero__specs { bottom: 17px; left: 6%; right: 6%; color: #fff; text-align: center; font-size: 11px; line-height: 1.4; }
  .camry-details__stage { aspect-ratio: auto; padding: 32px 22px 24px; display: flex; flex-direction: column; }
  .camry-details__model { position: static; order: -2; align-self: flex-end; font-size: 16px; margin: 0 0 22px; }
  .camry-details__title { position: static; order: -1; font-size: clamp(54px, 14vw, 95px); line-height: 1.04; letter-spacing: -.02em; }
  .camry-details__scene { position: relative; z-index: 0; height: 240px; margin: 0 -22px -25px; overflow: hidden; }
  .camry-details__scene img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
  .camry-details__annotations { display: none; }
  .camry-details__facts { position: static; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; margin-top: 8px; padding-top: 0; text-align: left; }
  .camry-details__facts > div { padding: 16px 0; border-bottom: 1px solid #ddd; }
  .camry-details__facts > div + div { border-left: 0; }
  .camry-details__facts > div:nth-child(even) { padding-left: 20px; }
  .camry-details__facts > div:last-child { grid-column: 1 / -1; }
  .camry-details__facts dt { font-size: 14px; margin-bottom: 8px; }
  .camry-details__facts dd { font-size: 30px; line-height: 1.25; }
  .camry-details__caption { position: static; margin-top: 20px; font-size: 16px; }
  .camry-details__photos { padding: 0 22px 24px; }
  .camry-details__photo-grid { gap: 12px; }
}
@media (max-width: 430px) {
  .camry-red-page .countdown-strip { padding-inline: 20px; }
  .camry-red-page .countdown-strip > div { min-width: 0; }
  .camry-red-page .countdown-clock { width: 100%; }
  .camry-red-page .countdown-cell { flex: 1; min-width: 0; width: auto; }
  .camry-red-page .footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .camry-red-page .footer a { overflow-wrap: anywhere; }
}
@media (min-width: 431px) and (max-width: 760px) {
  .camry-red-hero { height: max(1080px, calc(150vw + 180px)); }
  .camry-red-hero__scene { top: 0; }
  .camry-red-hero__title { top: 105px; font-size: 17vw; }
  .camry-details__scene { height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
  .camry-red-page *, .camry-red-page *::before, .camry-red-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}