/* Rockstar Tour Bus — keepsake site.
   Palette comes off the coach itself: black body, chrome trim, the gold
   stripe along the sill, cream leather inside. The carbon-fiber tile, the
   chrome bullet, and the page-title bars are the 2009 site's own files.
   The nav is set in type rather than the 2009 button images, so all five
   labels share one baseline and stay crisp on a retina screen. */

:root {
  --asphalt: #0a0a0b;
  --panel: rgba(8, 8, 9, 0.72);
  --carbon-2: #1d1f22;
  --chrome: #dadce0;
  --steel: #8b8f97;
  --gold: #c9a46a;
  --leather: #e6d7bc;
  --line: rgba(201, 164, 106, 0.28);

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --body: Barlow, "Segoe UI", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;

  --wrap: 1180px;
  --gutter: clamp(14px, 4vw, 40px);
  --rowh: 250px;   /* target row height for the justified galleries */
}

*, *::before, *::after { box-sizing: border-box; }
/* Anchor jumps are animated in main.js so the trip can be a touch longer than
   the browser's own smooth scroll; scroll-padding-top still covers the hash a
   page is loaded with, and the sticky nav's height is mirrored there. */
html { scroll-padding-top: 60px; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--chrome);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* The 2011 carbon-fiber texture, as one fixed layer behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: url("img/ui/carbon-tile.jpg") repeat;   /* seamless mirrored cut of the 2011 carbon texture */
  opacity: 0.8;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--leather); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: #000; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Nav: text set to match the original 2009 button type ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.nav ul {
  list-style: none; margin: 0 auto; padding: 4px var(--gutter);
  max-width: var(--wrap);
  display: flex; gap: 6px; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.nav ul::-webkit-scrollbar { display: none; }
.nav li { flex: none; }
/* Grid stacks the visible label on a hidden bold copy of itself, so the
   bold rollover state cannot change the item's width and shift the bar. */
.nav a {
  display: grid; place-items: center;
  height: 36px; padding: 0 9px;
  font: 16px/36px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
        "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #969696; text-decoration: none; white-space: nowrap;
}
.nav a > span, .nav a::after { grid-area: 1 / 1; }
.nav a::after { content: attr(data-label); font-weight: 700; visibility: hidden; }
.nav a:hover, .nav a:focus-visible { color: #b0b0b0; font-weight: 700; }
/* Phones: tighten the type and the padding so all five labels fit the width.
   The bar still scrolls if a label is ever added, but nothing is clipped now. */
@media (max-width: 600px) {
  .nav ul { gap: 2px; padding-left: 10px; padding-right: 10px; }
  .nav a { font-size: 13px; padding: 0 6px; height: 34px; line-height: 34px; }
}
@media (max-width: 380px) {
  .nav a { font-size: 12px; padding: 0 4px; }
}
@media (max-width: 340px) {
  .nav ul { gap: 0; padding-left: 6px; padding-right: 6px; }
  .nav a { font-size: 11px; padding: 0 3px; }
}

/* Type roles */
.kicker {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px;
}
.h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: #fff;
}
.h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--leather);
  margin: 32px auto 12px;
}
.lede { max-width: 58ch; color: var(--steel); margin: 0 0 18px; font-size: 1.05rem; }

/* Sections share one spacing rule so nothing fights */
.section { padding: clamp(32px, 5vw, 64px) 0; }
.section + .section { border-top: 1px solid var(--line); }
.panel { background: var(--panel); border: 1px solid rgba(255,255,255,0.05); padding-top: 32px; padding-bottom: 32px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(12px, 2vw, 24px) var(--gutter) 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(201,164,106,0.10), transparent 70%),
    #000;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.hero-inner { max-width: var(--wrap); margin: 0 auto; text-align: center; }
.hero-logo { margin: 0 auto 6px; width: min(820px, 92vw); filter: drop-shadow(0 6px 24px rgba(0,0,0,0.8)); }
.hero-logo img { width: 100%; }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.hero-dek { max-width: 44ch; margin: 4px auto 0; color: var(--steel); font-size: 1.1rem; }


.hero-bus { max-width: 1400px; margin: 22px auto 0; padding-bottom: 8px; }
.hero-bus img { width: 100%; mix-blend-mode: lighten; }

@media (prefers-reduced-motion: no-preference) {
  .hero-logo, .eyebrow, .hero-dek { animation: rise 0.7s ease-out both; }
  .eyebrow { animation-delay: 0.1s; }
  .hero-dek { animation-delay: 0.18s; }
  .hero-bus { animation: rise 0.9s ease-out 0.3s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ---------- Build sheet ---------- */
.quote { margin: 8px 0 36px; padding: 0 0 0 20px; border-left: 3px solid var(--gold); max-width: 70ch; }
.quote p { margin: 0 0 8px; font-size: 1.15rem; color: var(--leather); font-style: italic; }
.quote cite { font-family: var(--mono); font-style: normal; font-size: 0.8rem; color: var(--steel); }

.stats {
  display: grid;
  /* Fixed counts rather than auto-fit: the block holds four figures, so only
     4, 2 and 1 columns divide evenly. auto-fit would land on three at tablet
     width and leave a pair of empty cells showing the container's rule. */
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin: 0 0 28px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stats > div { background: #000; padding: 20px 22px 16px; }
.stats dt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); margin: 0 0 4px; }
.stats dd { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; color: #fff; }
.stats dd span { font-family: var(--mono); font-size: 0.9rem; font-weight: 400; color: var(--gold); margin: 0 6px; vertical-align: 0.35em; letter-spacing: 0.1em; }
/* A word instead of a numeral: sized to sit on one line in its own cell and
   to read as the same weight of statement as the figures beside it. */
/* "Eagle" is set as the figure and "Model 10" as its gold qualifier, the same
   shape as "40 Ft" and "28 to 35". A word runs wider than two digits, so this
   cell's figure is scaled down until the pair sits on one line. */
.stats dd.chassis { font-size: clamp(2.4rem, 4.2vw, 3.7rem); white-space: nowrap; }
.stats dd.chassis span { font-size: 0.78rem; margin-left: 7px; vertical-align: 0.5em; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* Feature list with the original chrome-ball bullet */
.features {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0 32px;
  font-family: var(--mono);
  font-size: 0.95rem;
}
.features li {
  padding: 10px 0 10px 30px;
  border-bottom: 1px dashed rgba(139,143,151,0.35);
  background: url("img/ui/bullet-chrome.png") no-repeat 0 9px / 16px auto;
}
.features a { color: var(--chrome); text-decoration: none; display: flex; justify-content: space-between; gap: 12px; }
.features a::after { content: "view \2192"; color: var(--gold); font-size: 0.75rem; letter-spacing: 0.1em; opacity: 0; transition: opacity 0.2s; }
.features a:hover::after, .features a:focus-visible::after { opacity: 1; }
.features span { color: var(--chrome); }

/* ---------- The Eagle ---------- */
.eagle .lede { max-width: 66ch; }
.eagle-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; margin-top: 8px; }
.eagle-grid-2 { grid-template-columns: 1fr 1fr; margin-top: 24px; }
.eagle p { margin: 0 0 14px; max-width: 62ch; }
.h3.tight { margin: 0 0 10px; padding: 0; }
.spec { margin: 0; border: 1px solid var(--line); background: #000; }
.spec > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 14px; border-bottom: 1px dashed rgba(139,143,151,0.3); font-family: var(--mono); font-size: 0.88rem; }
.spec > div:last-child { border-bottom: 0; }
.spec dt { color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.72rem; padding-top: 3px; }
.spec dd { margin: 0; color: var(--chrome); }
.eagle-h3-wide { margin-top: 28px; }
.eagle p.eagle-wide { max-width: 90ch; }
.eagle .chrome-list li { margin-bottom: 10px; }
.eagle strong { color: var(--leather); font-weight: 500; }
.sources { font-family: var(--mono); font-size: 0.72rem; color: var(--steel); margin: 20px 0 0; }
@media (max-width: 800px) { .eagle-grid, .eagle-grid-2 { grid-template-columns: 1fr; gap: 20px; } .spec > div { grid-template-columns: 110px 1fr; } }

/* ---------- Galleries: justified rows ---------- */
/* Each tile carries --r (width / height). flex-grow scales with the ratio so
   a row of mixed shapes shares one height; ::after keeps the last row from
   stretching to fill. */
.rows { display: flex; flex-wrap: wrap; gap: 10px; }
.rows::after { content: ""; flex: 1e5 1 0; }
.tile {
  margin: 0; position: relative; overflow: hidden;
  flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--rowh));
  background: #000;
  /* the 2009 gallery frame: black border with a faint stitched inner line */
  border: 5px solid #000;
  outline: 1px dashed rgba(255,255,255,0.22);
  outline-offset: -4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.tile a { display: block; }
.tile img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform 0.5s ease; }
.tile a:hover img, .tile a:focus-visible img { transform: scale(1.03); }
.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 12px 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leather);
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  pointer-events: none;
}
.rows-short { --rowh: 320px; }
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } }

@media (max-width: 900px) { :root { --rowh: 170px; } .rows-short { --rowh: 230px; } }
@media (max-width: 520px) {
  :root { --rowh: 130px; }
  .rows { gap: 6px; }
  .tile { border-width: 3px; outline-offset: -3px; }
  .tile figcaption { font-size: 0.62rem; padding: 18px 8px 6px; }
}

/* ---------- Throwback ---------- */
.relic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 20px 22px 20px; margin: 0; }
.card p { margin: 0 0 12px; color: var(--chrome); }
.card p:last-child { margin-bottom: 0; }
.card-h { font-family: var(--display); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold); margin: 0 0 12px; }
.chrome-list { list-style: none; margin: 0; padding: 0; }
.chrome-list li {
  margin: 0 0 8px; padding-left: 26px;
  background: url("img/ui/bullet-chrome.png") no-repeat 0 4px / 14px auto;
}
.rates { margin: 0 0 14px; }
.rates > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px dashed rgba(139,143,151,0.35); }
.rates dt { font-family: var(--mono); font-size: 0.85rem; color: var(--steel); }
.rates dt small { font-size: 0.75rem; }
.rates dd { margin: 0; font-family: var(--display); font-weight: 900; font-size: 2rem; color: #fff; }
.rates dd small { font-family: var(--mono); font-weight: 400; font-size: 0.75rem; color: var(--gold); letter-spacing: 0.08em; }
.card-img { padding: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; }
.card-img img { width: 100%; max-width: 440px; }
.card-img figcaption { font-family: var(--mono); font-size: 0.78rem; color: var(--steel); margin-top: 10px; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--steel); background: rgba(0,0,0,0.6); }
.foot p { margin: 0 0 6px; }
.foot strong { color: var(--leather); font-weight: 500; }
.nav-foot { position: static; border-bottom: 0; border-top: 1px solid var(--line); margin-bottom: 28px; backdrop-filter: none; }

/* ---------- Lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.98);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
.lb[hidden] { display: none; }
.lb-stage { position: absolute; inset: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lb-img {
  max-width: 100vw; max-height: 100vh;
  width: auto; height: auto;
  transform-origin: 0 0;
  will-change: transform;
  cursor: zoom-in;
}
.lb.zoomed .lb-img { cursor: grab; }
.lb-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 12px 64px;
  text-align: center;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--leather);
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  pointer-events: none;
}
.lb-count { color: var(--gold); margin-right: 14px; }
.lb button {
  position: absolute; cursor: pointer; color: var(--chrome);
  width: 56px; height: 56px; padding: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: grid; place-items: center; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lb button:hover { color: var(--gold); border-color: var(--gold); background: rgba(0,0,0,0.8); }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-close { top: 14px; right: 16px; width: 44px; height: 44px; font-size: 1.9rem; line-height: 1; font-family: var(--body); }
@media (max-width: 700px) {
  .lb-prev, .lb-next { display: none; }   /* swipe instead */
  .lb-cap { padding: 10px 14px; font-size: 0.68rem; }
}