/* Hill Route. The page is a stretch of road: the title is a direction sign standing in the game's valley, the maps
   are numbered by kilometre posts in the order they open, the cars sit in the garage's dark studio. Sign lettering in
   Fira Sans Extra Condensed (Sofia Sans was tried: its Cyrillic defaults to Bulgarian forms), text in Fixel (MacPaw,
   Kyiv). */

@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/FiraSansExtraCondensed-700-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/FiraSansExtraCondensed-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/FiraSansExtraCondensed-800-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/FiraSansExtraCondensed-800-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/FiraSansExtraCondensed-900-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  font-weight: 900;
  font-display: swap;
  src: url(/fonts/FiraSansExtraCondensed-900-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fixel Text";
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/FixelText-Regular.woff2) format("woff2");
}
@font-face {
  font-family: "Fixel Text";
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/FixelText-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "Fixel Text";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/FixelText-Bold.woff2) format("woff2");
}

:root {
  --sky: #dbe7f1;          /* the valley's sky, faded: the page */
  --sky-line: #b7cadb;
  --ink: #1f262c;          /* asphalt */
  --ink-soft: #46545f;
  --sign: #1b4f9f;         /* blue direction sign */
  --motorway: #0c6b41;     /* green motorway sign */
  --sunflower: #f3b31b;
  --studio: #2a2c32;       /* the garage's backdrop, as in the car photos */
  --night: #1b2025;
  --paper: #f7f9fb;
  --display: "Fira Sans Extra Condensed", "Arial Narrow", sans-serif;
  --text: "Fixel Text", system-ui, -apple-system, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--sign); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--sunflower); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; line-height: 0.95; }
p { margin: 0 0 1em; }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 20; background: #fff; color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 12px; }

/* MARK: Top bar */

.topbar { position: relative; z-index: 5; padding-block: 16px; }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mini-sign {
  flex: none;
  padding: 7px 13px 8px;
  border-radius: 8px;
  background: var(--sign);
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px #fff;
  color: #fff;
  font: 900 1.3rem/1 var(--display);
  text-decoration: none;
}
.topnav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; font-weight: 500; font-size: 0.95rem; }
.topnav a { color: var(--ink); text-decoration: none; padding-block: 6px; }
.topnav a:hover { text-decoration: underline; }

/* On the home page the bar lies over the picture, and the big sign is the name. */
.page-index .topbar { position: absolute; inset: 0 0 auto; }
.page-index .mini-sign { visibility: hidden; }
.page-index .topnav { padding: 4px 14px; border-radius: 10px; background: rgb(27 32 37 / 0.55); }
.page-index .topnav a { color: #fff; }
@media (max-width: 600px) { .topnav .hide-phone { display: none; } }

/* MARK: Hero */

.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #6a4a35;
}
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
@media (min-aspect-ratio: 1/1) { .hero-photo img { object-position: 22% 60%; } }

.roadside {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: min(560px, 100% - 2 * var(--gutter));
  margin-left: var(--gutter);
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) { .roadside { margin-left: max(var(--gutter), 6vw); } }
@media (prefers-reduced-motion: no-preference) {
  .roadside { animation: plant 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) 0.15s both; }
}
@keyframes plant { from { transform: translateY(60px); opacity: 0; } }

.sign {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 38px) clamp(18px, 2.6vw, 28px);
  border-radius: 16px;
  background: var(--sign);
  box-shadow: inset 0 0 0 6px var(--sign), inset 0 0 0 9px #fff, 0 24px 40px -22px rgb(0 0 0 / 0.7);
  color: #fff;
}
.sign h1 { font-size: clamp(4.25rem, 12vw, 8.75rem); font-weight: 900; line-height: 0.8; letter-spacing: -0.01em; }
.sign-sub { margin: 0.45em 0 0; font: 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.15 var(--display); }
.sign-dest {
  display: grid;
  gap: 2px;
  margin: clamp(16px, 2.4vw, 24px) 0 0;
  padding: clamp(12px, 1.8vw, 18px) 0 0;
  border-top: 3px solid #fff;
  list-style: none;
}
.sign-dest a {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: #fff;
  font: 800 clamp(1.55rem, 3.2vw, 2.2rem)/1.2 var(--display);
  text-decoration: none;
}
.sign-dest a:hover span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.sign-dest svg { flex: none; width: 0.85em; height: 0.85em; fill: currentColor; }
.turn-right svg { transform: rotate(45deg); }
.turn-left svg { transform: rotate(-90deg); }

/* Two galvanised posts down to the road, the white plate with the App Store badge fixed across them. */
.posts { position: relative; height: clamp(150px, 24svh, 280px); }
.posts::before, .posts::after {
  content: "";
  position: absolute;
  top: -12px;
  bottom: 0;
  width: 14px;
  background: linear-gradient(90deg, #7a8288, #e1e5e8 45%, #868e94);
}
.posts::before { left: 24%; }
.posts::after { right: 24%; }
.plate {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.plate img { width: auto; height: 46px; }
.plate span { max-width: 8.5em; font: 700 1.05rem/1.15 var(--display); text-wrap: balance; }

/* MARK: Sections */

.section { padding-block: clamp(72px, 11vw, 136px); }
.lead { max-width: 34em; }

/* How it drives */
.drive-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .drive-grid { grid-template-columns: 5fr 7fr; align-items: center; gap: 72px; } }
.drive h2 { max-width: 9ch; margin-bottom: 0.4em; font-size: clamp(3rem, 6.4vw, 5rem); }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-weight: 500; }
.facts li { display: flex; align-items: center; gap: 10px; }
.facts li::before { content: ""; width: 20px; height: 4px; border-radius: 2px; background: var(--sunflower); }

.phones { display: flex; align-items: flex-start; justify-content: center; gap: clamp(12px, 2vw, 24px); }
.phone { flex: 1 1 0; max-width: 250px; margin: 0; }
.phone img { width: 100%; aspect-ratio: 640 / 1390; object-fit: cover; border: 7px solid var(--ink); border-radius: 30px; background: var(--ink); }
.phone figcaption { margin-top: 10px; color: var(--ink-soft); font: 700 1.05rem/1.2 var(--display); text-align: center; }
@media (min-width: 601px) {
  .phone:nth-child(2) { margin-top: 56px; }
  .phone:nth-child(3) { margin-top: 112px; }
}
@media (max-width: 600px) {
  .phones {
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .phone { flex: 0 0 62%; scroll-snap-align: center; }
}

/* Maps */
.maps-head { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .maps-head { grid-template-columns: auto 1fr; gap: 56px; } }
.road-sign {
  justify-self: start;
  padding: 24px 32px 26px;
  border-radius: 14px;
  background: var(--motorway);
  box-shadow: inset 0 0 0 5px var(--motorway), inset 0 0 0 8px #fff;
  color: #fff;
}
.road-sign h1, .road-sign h2 { font-size: clamp(2.9rem, 6.4vw, 4.75rem); font-weight: 900; }
.road-sign p { max-width: 21em; margin: 0.55em 0 0; font: 700 1.2rem/1.25 var(--display); }
.maps-head .lead { margin: 0; }

.map-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 16px; margin: 56px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .map-list { grid-template-columns: repeat(3, 1fr); gap: 52px 28px; } }
.map { scroll-margin-top: 24px; }
.map figure { position: relative; margin: 0; }
.map img { width: 100%; aspect-ratio: 720 / 776; object-fit: cover; border-radius: 6px; background: var(--sky-line); }
.map:target img { outline: 4px solid var(--sunflower); outline-offset: 4px; }
/* Kilometre post: the map's place in the order they open. */
.km {
  position: absolute;
  bottom: -16px;
  left: 12px;
  min-width: 2.1em;
  padding: 5px 6px 3px;
  border-radius: 5px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ink);
  color: var(--ink);
  font: 900 clamp(1.25rem, 2.2vw, 1.6rem)/1 var(--display);
  text-align: center;
}
.map h3 { margin: 28px 0 6px; font-size: clamp(1.45rem, 2.6vw, 2rem); }
.map p { margin: 0; color: var(--ink-soft); font-size: 0.95em; line-height: 1.45; }
.map .after { margin-top: 8px; color: var(--sign); font-size: 0.82rem; font-weight: 500; }

.rally { margin-top: clamp(64px, 9vw, 104px); }
.rally h3 { font-size: clamp(2rem, 4vw, 2.75rem); }
.rally ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .rally ul { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.rally img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.rally h4 { margin-top: 10px; font-size: 1.3rem; }

/* Cars: the garage studio */
.cars { background: var(--studio); color: #c9d0d6; }
.cars h1, .cars h2 { color: #fff; font-size: clamp(3rem, 6.4vw, 5rem); max-width: 12ch; }
.cars .lead { margin-top: 20px; }
.car-class { margin-top: clamp(48px, 7vw, 72px); }
.car-class h3 { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 1.6rem; }
.class-badge {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 6px;
  background: #fff;
  color: var(--studio);
  font-weight: 900;
}
.car-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .car-grid { grid-template-columns: repeat(4, 1fr); gap: 36px 24px; } }
.car img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%; border-radius: 10px; }
.car h4 { margin: 14px 0 6px; color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
.car p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.car .trait { margin-bottom: 4px; color: var(--sunflower); font-weight: 700; }
.car .note { margin-top: 8px; color: #fff; font-weight: 500; }

/* Every day */
.daily h2 { font-size: clamp(3rem, 6.4vw, 5rem); max-width: 11ch; }
.daily-list { display: grid; gap: 34px 56px; margin: 48px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .daily-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .daily-list { grid-template-columns: repeat(3, 1fr); } }
.daily-list li { padding-top: 18px; border-top: 3px solid var(--ink); }
.daily-list h3 { margin-bottom: 10px; font-size: 1.75rem; }
.daily-list p { margin: 0; color: var(--ink-soft); }

/* Last call, on the night road */
.get { background: var(--night); color: #d6dde3; }
.get-in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .get-in { grid-template-columns: auto 1fr auto; gap: 40px; } }
.get-icon { width: 112px; height: 112px; border-radius: 25px; }
.get h2 { color: #fff; font-size: clamp(2.6rem, 5.6vw, 4.25rem); }
.get p { margin: 12px 0 0; }
.get-badge img { width: auto; height: 56px; }

/* MARK: Inner pages */

.page { padding-block: clamp(40px, 7vw, 88px) clamp(72px, 10vw, 120px); }
.prose { max-width: 68ch; }
.prose h1 { margin-bottom: 0.3em; font-size: clamp(2.5rem, 9vw, 5.5rem); font-weight: 900; overflow-wrap: break-word; }
.prose h2 { margin: 1.8em 0 0.45em; font-size: clamp(1.8rem, 3.4vw, 2.3rem); }
.prose h3 { margin: 1.6em 0 0.35em; font-size: 1.45rem; line-height: 1.05; }
.prose ul:not([class]) { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose .updated { color: var(--ink-soft); font-size: 0.95rem; }
.contact {
  margin: 28px 0 8px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--sign);
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px #fff;
  color: #fff;
}
.contact p { margin: 0; }
.contact a { color: #fff; font: 800 clamp(1.4rem, 3.4vw, 1.9rem)/1.2 var(--display); overflow-wrap: anywhere; }

.fact-sheet { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 24px 0 0; }
.fact-sheet dt { font: 700 1.15rem/1.4 var(--display); }
.fact-sheet dd { margin: 0; }
.press-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.press-shots img { border-radius: 10px; }
.press-shots a { display: block; font-size: 0.85rem; }
.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.downloads img { border-radius: 10px; margin-bottom: 8px; }

/* Dead end */
.dead-end { display: grid; gap: 32px; align-items: center; }
@media (min-width: 760px) { .dead-end { grid-template-columns: auto 1fr; gap: 56px; } }
.dead-end svg { width: clamp(140px, 22vw, 220px); height: auto; }

/* MARK: Map and car pages */

/* Cards are links on every list. */
.map > a, .car > a { display: block; color: inherit; text-decoration: none; }
.map > a:hover h3, .car > a:hover h4, .car > a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.page-maps .page { padding-top: clamp(24px, 4vw, 48px); }
.page-cars .topbar, .page-car .topbar { background: var(--studio); }
.page-cars .topnav a, .page-car .topnav a { color: #fff; }
.page-cars .cars { padding-top: clamp(32px, 5vw, 56px); }
.page-cars .cars .lead { margin-top: 20px; }

.crumb { margin: 0 0 14px; font-weight: 500; font-size: 0.95rem; }
.crumb a { color: inherit; }
.crumb a::before { content: "← "; }

.detail-hero { display: grid; gap: 32px; padding-block: clamp(24px, 4vw, 48px) clamp(40px, 6vw, 72px); }
@media (min-width: 900px) { .detail-hero { grid-template-columns: 1fr minmax(0, 0.9fr); align-items: center; gap: 56px; } }
.detail-photo { margin: 0; }
.detail-photo img { width: 100%; border-radius: 8px; }

/* A place sign: the map's name on the blue plate, its kilometre post on the corner. */
.place-sign {
  position: relative;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3.2vw, 36px);
  border-radius: 14px;
  background: var(--sign);
  box-shadow: inset 0 0 0 6px var(--sign), inset 0 0 0 9px #fff;
  color: #fff;
}
.place-sign h1 { font-size: clamp(3rem, 8vw, 5.75rem); font-weight: 900; line-height: 0.85; padding-right: 1.4em; }
.place-sign p { margin: 0.6em 0 0; font: 700 clamp(1.2rem, 2.2vw, 1.5rem)/1.2 var(--display); }
.place-sign .km { top: -16px; right: 22px; bottom: auto; left: auto; }

.facts-board { display: grid; grid-template-columns: max-content 1fr; margin: 28px 0 0; }
.facts-board div { display: contents; }
.facts-board dt, .facts-board dd { padding-block: 12px; border-top: 2px solid var(--ink); }
.facts-board dt { padding-right: 24px; color: var(--ink-soft); font-weight: 500; }
.facts-board dd { margin: 0; font: 800 1.35rem/1.25 var(--display); }

.detail-body { padding-bottom: clamp(48px, 7vw, 88px); }
.detail-body h2, .map-gallery h2, .suits h2, .car-drive h2 { margin: 0 0 20px; font-size: clamp(2.2rem, 4.6vw, 3.25rem); }
.intro { max-width: 36em; margin-bottom: clamp(40px, 6vw, 64px); font-size: 1.15em; }

/* What is on the road, set beside a strip of asphalt with its centre line. */
.road-list { position: relative; max-width: 44em; margin: 0; padding: 0 0 0 64px; list-style: none; }
.road-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34px; border-radius: 6px; background: var(--ink); }
.road-list::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 16px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #fff 0 14px, transparent 14px 30px);
}
.road-list li { position: relative; padding: 6px 0 28px; }
.road-list li::before { content: ""; position: absolute; top: 18px; left: -22px; width: 12px; height: 3px; background: var(--ink); }
.road-list h3 { margin-bottom: 6px; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.road-list p { margin: 0; color: var(--ink-soft); }

.map-gallery { padding-bottom: clamp(48px, 7vw, 88px); }
.map-gallery ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.map-gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: var(--sky-line); }
@media (max-width: 700px) {
  .map-gallery ul {
    display: flex;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .map-gallery li { flex: 0 0 72%; scroll-snap-align: center; }
}

.suits { padding-bottom: clamp(40px, 6vw, 72px); }
.suits .lead { margin-bottom: 28px; }
.suits .car-grid { margin-top: 0; }
.suits .car h3 { margin: 14px 0 6px; font-size: clamp(1.35rem, 2.2vw, 1.6rem); }
.suits .car p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.45; }
.suits .car .trait { margin-bottom: 4px; color: #8a5b00; font-weight: 700; }
.suits .car .note { margin-top: 8px; color: var(--ink); font-weight: 500; }
.map-list.compact { margin-top: 8px; }
.map-list.compact h3 { margin-top: 26px; }

/* Previous and next as direction signs. */
.turns { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 8px clamp(56px, 8vw, 96px); }
.turn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--sign);
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px #fff;
  color: #fff;
  font: 800 1.35rem/1.1 var(--display);
  text-decoration: none;
}
.turn small { display: block; font: 500 0.78rem/1.3 var(--text); opacity: 0.85; }
.turn .arrow { flex: none; width: 1em; height: 1em; fill: currentColor; }
.turn .arrow.left { transform: rotate(-90deg); }
.turn .arrow.right { transform: rotate(90deg); }
.turn.next { margin-left: auto; text-align: right; }
.turn.all { padding-inline: 4px; background: none; box-shadow: none; color: var(--ink); font-size: 1.15rem; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) { .turn.all { order: 3; width: 100%; } }

/* The car's page: the garage studio, then its plates and gauges. */
.studio { background: var(--studio); color: #c9d0d6; }
.studio h1 { color: #fff; font-size: clamp(3.25rem, 8vw, 6rem); font-weight: 900; line-height: 0.85; }
.studio .lead { margin: 22px 0 0; }
.studio-photo { justify-self: center; max-width: 380px; }
.studio-photo img { border-radius: 14px; }
.class-line { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #fff; font: 800 1.3rem/1 var(--display); }
.price {
  display: inline-block;
  margin: 26px 0 0;
  padding: 10px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ink);
  color: var(--ink);
  font: 800 1.3rem/1.2 var(--display);
}

.car-specs { display: grid; gap: 40px; padding-top: clamp(40px, 6vw, 72px); }
@media (min-width: 980px) { .car-specs { grid-template-columns: 0.85fr 1.2fr 0.95fr; align-items: start; gap: 48px; } }
.car-specs h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); }
/* A yellow plate, as for a temporary sign: what this car alone can do. */
.trait-plate {
  padding: 22px 24px 24px;
  border-radius: 12px;
  background: var(--sunflower);
  box-shadow: inset 0 0 0 5px var(--sunflower), inset 0 0 0 8px var(--ink);
  color: var(--ink);
}
.trait-plate h2 { margin: 0 0 10px; font-weight: 900; }
.trait-plate p { margin: 0; }
.trait-plate .trait-label { margin-bottom: 4px; font-weight: 500; font-size: 0.9rem; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; color: var(--ink-soft); font-size: 0.9rem; }
.legend span { width: 22px; height: 10px; border-radius: 5px; }
.legend span + span, .legend .key-top { margin-left: 8px; }
.key-stock { background: var(--ink); }
.key-top, .meter-top { background: repeating-linear-gradient(135deg, var(--sign) 0 5px, #6d94cc 5px 10px); }
.meter { display: grid; grid-template-columns: 8.5em 1fr; align-items: center; gap: 12px; margin: 12px 0; }
.meter-label { font-weight: 500; }
.meter-bar { position: relative; height: 14px; overflow: hidden; border-radius: 7px; background: var(--sky-line); }
.meter-top, .meter-stock { position: absolute; inset: 0 auto 0 0; border-radius: 7px; }
.meter-stock { background: var(--ink); }
.figures { display: grid; grid-template-columns: max-content 1fr; margin: 22px 0 0; }
.figures div { display: contents; }
.figures dt, .figures dd { padding-block: 10px; border-top: 2px solid var(--ink); }
.figures dt { padding-right: 20px; color: var(--ink-soft); font-weight: 500; }
.figures dd { margin: 0; font: 800 1.25rem/1.3 var(--display); }

.upgrades { margin: 0; padding: 0; list-style: none; }
.upgrades li { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 2px solid var(--ink); }
.upgrades b { font: 800 1.2rem/1.3 var(--display); }

.car-drive { padding-block: clamp(32px, 5vw, 56px); }
.car-drive img { width: 100%; max-width: 920px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* MARK: Footer */

.foot { padding-block: 40px 28px; background: var(--night); color: #b9c3cc; font-size: 0.95rem; }
.page-index .foot { padding-top: 0; }
.foot a { color: #fff; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.page-index .foot-in { padding-top: 28px; border-top: 1px solid #343c44; }
.foot-brand { display: flex; align-items: center; gap: 16px; }
.foot-brand img { border-radius: 14px; }
.foot-brand p { margin: 0; line-height: 1.4; }
.foot-brand strong { color: #fff; font: 800 1.35rem/1 var(--display); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-nav a { text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; }
.legal { margin-top: 24px; color: #87939e; font-size: 0.8rem; line-height: 1.5; }