/* Kmaster newsite — shared layout (replaces CoolPage absolute positioning) */

*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font: normal 13px/1.45 Arial, Helvetica, sans-serif;
}

a:link, a:visited { color: #c40000; text-decoration: underline; }
a:hover { color: #ff3333; }
body.link-a800 a:link, body.link-a800 a:visited { color: #a80000; }
body.link-a800 a:hover { color: #d42020; }

p { margin: 0 0 0.75em; }
ul, ol { margin: 0 0 1em; }
h1, h2, h3 { line-height: 1.2; }

/* Centered page shells (widths match original CoolPage HOffset math) */
.page {
  margin: 0 auto;
  padding: 15px 0 40px;
}
.page--620 { width: 620px; }
.page--640 { width: 640px; }
.page--645 { width: 645px; }
.page--685 { width: 685px; }
.page--715 { width: 715px; }
.page--745 { width: 745px; }
.page--810 { width: 810px; }
.page--845 { width: 845px; }
.page--550 { width: 550px; }

.page-title {
  font: bold 24px Arial, sans-serif;
  text-align: center;
  margin: 0 0 8px;
}

.page-subtitle {
  font: normal 13px Arial, sans-serif;
  text-align: center;
  margin: 0 0 16px;
}

.site-footer {
  font: normal 11px Arial, sans-serif;
  text-align: center;
  margin-top: 24px;
}

.site-hr {
  border: 0;
  height: 3px;
  width: 344px;
  max-width: 100%;
  background: #808080;
  margin: 20px auto;
}

.section-bar {
  height: 25px;
  background: #bb0000;
  margin: 24px 0 0;
  width: 100%;
  max-width: 785px;
}

.home-hero {
  display: block;
  width: 640px;
  height: 480px;
  margin: 0 auto 12px;
}

.home-caption {
  font: normal 11px Arial, sans-serif;
  color: #fff;
  text-align: right;
  width: 640px;
  margin: 0 auto 8px;
  padding-right: 5px;
}

.home-caption a { color: #fff; }

/* Index nav: 3 columns × 2 rows, same 114×40 buttons */
.nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 114px);
  grid-template-rows: repeat(2, 40px);
  gap: 20px 61px;
  justify-content: center;
  width: 640px;
  margin: 0 auto 16px;
}

.nav-grid a { display: block; line-height: 0; }
.nav-grid img { display: block; width: 114px; height: 40px; border: 0; }

.affiliate-wrap {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 16px;
}

.affiliate-table {
  margin: 0 auto;
  border-collapse: separate;
  font: normal 11px Arial, sans-serif;
  border-color: #c0c0c0;
  background: #c00000;
}

.affiliate-table__head td,
.affiliate-table__row td {
  background: #c00000;
  text-align: center;
  color: #fff;
}

.affiliate-table__decor { color: #fff; }

.affiliate-wrap a {
  color: #fff;
  text-decoration: none;
}

.affiliate-wrap a:hover { text-decoration: underline; }

.affiliate-wrap select {
  max-width: 280px;
  font: normal 11px Arial, sans-serif;
}

.affiliate-wrap input[type="button"] {
  font: bold 11px Arial, sans-serif;
  cursor: pointer;
}

/* Trucks gallery: 3 columns, ~230px wide cells */
.truck-grid {
  display: grid;
  grid-template-columns: repeat(3, 230px);
  gap: 10px 25px;
  justify-content: center;
  margin: 24px auto;
}

.truck-card {
  width: 230px;
  text-align: left;
}

.truck-card img {
  display: block;
  border: 0;
  margin-bottom: 8px;
}

.truck-card .name { font: normal 16px Arial, sans-serif; }
.truck-card .note { font: normal 13px Arial, sans-serif; }

.home-link {
  font: bold 16px Arial, sans-serif;
  text-align: center;
  display: block;
  margin: 16px 0;
}

.home-link.red { color: #bf0000; }

/* Projects: content + avatar */
.projects-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 845px;
}

.projects-body { flex: 1; font: normal 16px Arial, sans-serif; }
.projects-body h2 { font: bold 16px Arial, sans-serif; margin: 1em 0 0.25em; }
.projects-body ul { margin: 0 0 1em; padding-left: 1.2em; }
.projects-avatar { flex-shrink: 0; }

/* Tracks / rumbles entries */
.track-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  max-width: 810px;
  border-top: 25px solid #bb0000;
  padding-top: 10px;
}

.track-entry h2 {
  flex: 0 0 100%;
  font: bold 16px Arial, sans-serif;
  margin: 0;
  padding-top: 4px;
}

.track-entry .desc {
  flex: 0 0 450px;
  max-width: 450px;
  font: normal 13px Arial, sans-serif;
  line-height: 1.45;
}

.track-entry .desc br { line-height: 1.6; }

.track-entry .shot {
  flex: 0 0 auto;
}

.track-entry .shot img { display: block; border: 0; }

.track-entry .shot.map img { max-width: 323px; height: auto; }

.track-body {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.page-subnav {
  text-align: center;
  font: normal 11px Arial, sans-serif;
  margin-bottom: 16px;
}

/* MTM2ESP screenshot grid */
.esp-gallery {
  display: grid;
  grid-template-columns: repeat(2, 340px);
  gap: 20px 30px;
  justify-content: center;
  margin: 20px 0;
}

.esp-gallery figure { margin: 0; text-align: center; }
.esp-gallery img { display: block; border: 0; }
.esp-gallery figcaption { font: normal 16px Arial, sans-serif; margin-top: 6px; }

.esp-intro { text-align: center; font: normal 13px Arial, sans-serif; max-width: 714px; margin: 0 auto 16px; }
.esp-intro h2 { font: bold 18px Arial, sans-serif; margin: 0 0 8px; }

/* Links page columns */
.links-banners {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.links-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  max-width: 580px;
  margin: 0 auto 24px;
  font: normal 16px Arial, sans-serif;
}

.links-columns h2 { font: bold 16px Arial, sans-serif; margin: 0 0 8px; }
.links-columns ul { margin: 0; padding-left: 0; list-style: none; }
.links-columns li { margin-bottom: 12px; }

/* Bus index & about */
body.bus-index,
body.bus-about {
  background: #000 url("../bus/Fire_Sidebar_2.jpg") repeat-y fixed;
}

.bus-header { margin-bottom: 8px; }

.bus-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bus-card {
  border-top: 1px solid #444;
  padding: 16px 0;
}

.bus-card:first-child { border-top: 0; padding-top: 0; }

.bus-card__title {
  font: bold 13px/1.3 Arial, sans-serif;
  margin: 0 0 10px;
  text-align: left;
}

.bus-card__body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-start;
  font: normal 13px Arial, sans-serif;
}

.bus-meta {
  flex: 1 1 200px;
  max-width: 385px;
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 2px 8px;
}

.bus-meta dt {
  margin: 0;
  font-weight: normal;
}

.bus-meta dd {
  margin: 0;
}

.bus-card__body > p {
  flex: 1 1 100%;
  margin: 0 0 4px;
  max-width: 385px;
}

.bus-card__thumb {
  flex: 0 0 165px;
  margin-left: auto;
  line-height: 0;
}

.bus-card__thumb img {
  display: block;
  width: 165px;
  height: auto;
  border: 0;
}

.bus-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 24px 0 16px;
  font: normal 16px Arial, sans-serif;
}

.bus-nav a { text-decoration: none; }
.bus-nav a:hover { text-decoration: underline; }

.site-footer--small {
  font-size: 11px;
  margin-top: 8px;
}

/* Bus about page */
body.bus-about .page-title { text-align: center; }

.page-nav {
  text-align: center;
  margin: 24px 0;
  font: bold 16px Arial, sans-serif;
}

/* About page */
.about-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 15px;
}

.about-layout h1 { font: bold 24px Arial, sans-serif; }
.about-layout h2 { font: bold 16px Arial, sans-serif; }
.about-layout p, .about-layout li { font: normal 13px Arial, sans-serif; line-height: 1.4; }
.about-layout .negrita { font-weight: bold; }
.about-avatar { float: right; margin: 0 0 12px 16px; }

/* Legacy font classes (maps from CoolPage FONT CLASS) */
.Arial-11pxn { font: normal 11px Arial, sans-serif; }
.Arial-11pxFFFFFFn { font: normal 11px Arial, sans-serif; color: #fff; }
.Arial-13pxn { font: normal 13px Arial, sans-serif; }
.Arial-13pxb { font: bold 13px Arial, sans-serif; }
.Arial-16pxn { font: normal 16px Arial, sans-serif; }
.Arial-16pxb { font: bold 16px Arial, sans-serif; }
.Arial-16pxBF0000b { font: bold 16px Arial, sans-serif; color: #bf0000; }
.Arial-18pxb { font: bold 18px Arial, sans-serif; }
.Arial-24pxb { font: bold 24px Arial, sans-serif; }

.section-bar--maroon { background: #800000; }
.section-bar--blue { background: #000080; height: 20px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}