/* veetwinperformance.com - the old 2003 site's look (black page, 750px column at the left, the VEE-TWIN Racing banner, the orange
   outlined menu on the left, Verdana in light gray, orange headings, red links, the dark footer bar), rebuilt as plain HTML and CSS.
   Values are the old style.css and the old pages' table sizes; see veetwinperformance/PARITY.md. Under 768px the page becomes one
   column: the banner fills the width and the menu becomes a compact row above the page. */

@font-face {
  font-family: "Anton VT";
  src: url("/assets/fonts/anton-nav.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --text: #cccccc;        /* old body, td and p color */
  --head: #ff4a00;        /* old h1, h4 and footer color */
  --link: #ff0000;        /* old a:link, a:visited, a:hover */
  --menu: #ff6600;        /* the menu buttons' orange (sampled from the old images) */
  --bar: #111111;         /* old footer cell */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: var(--text);
  font: 14px/1.25 Verdana, Geneva, sans-serif;
}
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--link); }
a:hover { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--menu); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: #000; padding: 8px 12px; z-index: 10; }
.skip:focus { left: 8px; top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the old page was one 750px table at the top left of the window; now it is centered and fluid at every width (Dustin
   2026-11-09: "make the site responsive"), up to 1000px, with the same banner, menu and footer */
.page { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 12px; }
.banner { padding: 8px 0 0; }
.banner a { display: block; width: 100%; }
.banner img { display: block; width: 100%; height: auto; aspect-ratio: 750 / 90; }
.cols { display: flex; align-items: flex-start; margin-top: 26px; }

/* the menu: the old 200x40 image buttons, as text (orange outline on black; filled orange with a soft glow on hover and for the page you are on) */
.nav { flex: 0 0 200px; width: 200px; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  height: 40px;
  padding: 7px 0 0 9px;
  font-family: "Anton VT", Impact, "Arial Narrow", sans-serif;
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #000;
  -webkit-text-stroke: 1.3px var(--menu);
}
.nav a span { display: inline-block; transform: skewX(-14deg); transform-origin: 0 100%; }
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] {
  color: var(--menu);
  -webkit-text-stroke: 0.6px #ff7a1a;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.55), 0 0 7px rgba(255, 255, 255, 0.3);
}
.nav a:focus-visible { outline-offset: -2px; }
@supports not (-webkit-text-stroke: 1px #000) {
  .nav a { color: var(--menu); }
}

/* the content cell: 550px, centered as the old td align="center" */
.content { flex: 1 1 auto; width: auto; min-width: 0; max-width: 760px; margin: 0 auto; text-align: center; padding: 0 0 0 16px; }
.content p { margin: 14px 0; }
h1, .lead {
  color: var(--head);
  font-size: clamp(18px, 0.9rem + 0.7vw, 24px);   /* old h1 was 16pt (21.33px) */
  font-weight: bold;
  line-height: 1.17;
  margin: 14px 0;
}
h1 + .lead { margin-top: -14px; }
.lead a, .big a { color: inherit; }
h2 {
  color: var(--head);
  font-size: 12pt;          /* 16px, old h4 */
  font-weight: bold;
  margin: 21px 0;
}
.big, .home h2, .big-list li {
  color: var(--text);
  font-size: clamp(17px, 0.85rem + 0.6vw, 22px);   /* the old home page's h2 lines were 21px */
  font-weight: bold;
  line-height: 1.17;
}
.home h2 { margin: 17px 0; }
.big-list { list-style: none; margin: 0; padding: 0; }
.big-list li { margin: 17px 0; }
.big { margin: 17px 0; }
.home .hero { margin: 0; }
.home .hero img { display: block; width: 100%; max-width: 560px; margin: 0 auto; }   /* the welcome and "Call us" stay on the first screen */
.home h1 { margin-top: 14px; }
.home h1 + .lead { margin-top: -14px; }

/* plain link list (services, links) */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { margin: 14px 0; }

/* cylinder head porting */
.checks { display: inline-block; text-align: left; margin: 0 0 0 0; padding-left: 22px; max-width: 470px; }
.checks li { margin: 0; }
.rates { width: 100%; border-collapse: collapse; text-align: left; margin: 14px 0; }
.rates th, .rates td { vertical-align: top; padding: 0 0 16px; font-weight: normal; }
.rates th { width: 100px; padding-right: 4px; }
.rates th strong { font-weight: bold; }
.rates td.desc { width: 350px; }
.rates td.price { width: 100px; text-align: right; }
.note { text-align: left; }
.pics { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 8px; margin: 0 0 14px; }
.pics a { display: block; line-height: 0; }
.pics img { width: 150px; height: 113px; object-fit: cover; }
.pics.five { max-width: 470px; margin-left: auto; margin-right: auto; }

/* price lists (rebuilds, machining) */
.prices { margin: 14px auto; border-collapse: collapse; text-align: left; }
.prices th, .prices td { padding: 6px 0; font-weight: normal; vertical-align: top; }
.prices th { padding-right: 28px; }
.prices td { text-align: right; white-space: nowrap; }

/* race machining */
.intro { font-style: italic; margin: 0 0 30px; }
.item { display: flex; align-items: center; gap: 12px; text-align: left; margin: 0 0 20px; }
.item .txt { flex: 1 1 auto; }
.item .txt h2 { margin: 21px 0; }
.item .txt p { margin: 0; }
.item .pic { flex: 0 0 200px; text-align: right; line-height: 0; }
.item .pic img { height: 113px; width: auto; }
.wide { display: block; text-align: right; line-height: 0; margin: 0 0 14px; }
.wide img { width: 100%; max-width: 760px; height: auto; }

/* equipment */
.equip { display: flex; gap: 10px; text-align: left; padding: 5px; }
.equip .list { flex: 1 1 auto; }
.equip ul { list-style: none; margin: 14px 0; padding: 0; }
.equip .lead { text-align: left; }
.equip .shots { flex: 0 0 150px; padding-top: 14px; }
.equip .shots a { display: block; line-height: 0; }
.equip .shots img { width: 150px; height: 113px; object-fit: cover; }

/* gallery: the old grid (orange 2px frames, 4:3, 10px apart, at most 520px wide) */
.gallery-intro { color: #fff; font-size: 13px; padding: 10px 20px; margin: 13px 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; padding: 20px; max-width: 520px; margin: 0 auto; }
.gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--menu); background: #111; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.gallery a:hover img { transform: scale(1.05); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.95); }
.lightbox[open] { display: flex; justify-content: center; align-items: center; }
.lightbox img { max-width: 90vw; max-height: 85vh; width: auto; height: auto; box-shadow: 0 0 30px rgba(255, 102, 0, 0.4); }
.lb-btn { position: absolute; color: #fff; background: none; border: 0; cursor: pointer; font: 40px/1 Verdana, Geneva, sans-serif; padding: 8px 16px; }
.lb-btn:hover, .lb-btn:focus-visible { color: var(--menu); }
.lb-close { top: 12px; right: 18px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); font-size: 50px; }
.lb-prev { left: 8px; }
.lb-next { right: 8px; }
@media (prefers-reduced-motion: reduce) { .gallery img { transition: none; } .gallery a:hover img { transform: none; } }

/* contact form: the old centered labels over 40-character boxes */
.form { max-width: 352px; margin: 0 auto; }
.form label { display: block; }
.form input, .form textarea {
  display: block; width: 100%; margin: 0 0 2px;
  font: 14px Verdana, Geneva, sans-serif; color: #000; background: #fff;
  border: 1px solid #000; padding: 1px 2px;
}
.form textarea { height: 86px; resize: vertical; }
.form button { margin: 16px 0 0; font: 14px Verdana, Geneva, sans-serif; color: #000; background: #efefef; border: 1px solid #767676; border-radius: 2px; padding: 1px 6px; cursor: pointer; }
.form button:hover { background: #e5e5e5; }
.form button:disabled { opacity: 0.6; cursor: default; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note:empty { display: none; }
.form-note { color: #fff; }

/* the old footer bar, then the fleet credit on its own line */
.foot { margin: 10px 0 0; padding: 0 0 10px; }
.bar {
  margin: 0 2px;
  min-height: 50px;
  padding: 7px 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bar);
  color: var(--head);
  font-size: 11pt;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  line-height: 1.1;
}
.bar a { color: inherit; text-decoration: none; }
.bar a:hover { text-decoration: underline; }
.credit { margin: 10px 2px 0; text-align: center; font-size: 12px; color: #999; }
.credit a { color: #999; }
.credit a:hover { color: var(--text); }

/* phones and small tablets: one column, nothing wider than the screen */
@media (max-width: 767px) {
  .page { width: auto; padding: 0; }
  .banner { padding: 4px 4px 0; }
  .banner a, .banner img { width: 100%; height: auto; }
  .cols { display: block; margin-top: 10px; }
  .nav { width: auto; border-bottom: 1px solid #222; padding: 0 8px 6px; }
  .nav ul { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 4px; }
  .nav a { height: 38px; padding: 6px 7px 0; font-size: 21px; line-height: 24px; }
  .content { width: auto; padding: 0 16px; }
  .rates, .rates tbody, .rates tr, .rates th, .rates td { display: block; width: auto !important; }
  .rates tr { position: relative; padding: 0 0 16px; }
  .rates th { padding: 0 90px 4px 0; }
  .rates td { padding: 0; }
  .rates td.price { position: absolute; top: 0; right: 0; }
  .item { flex-direction: column; align-items: stretch; }
  .item .pic { flex: none; text-align: left; }
  .wide img { width: 100%; }
  .equip { display: block; padding: 0; }
  .equip .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .equip .shots a { aspect-ratio: 4 / 3; }
  .equip .shots img { width: 100%; height: 100%; }
  .gallery { padding: 10px 0; grid-template-columns: repeat(2, 1fr); }
  .prices th { padding-right: 16px; }
  .bar { margin: 0; }
  .credit { padding: 0 16px; }
}
@media (max-width: 359px) {
  .nav a { font-size: 19px; padding: 6px 5px 0; }
}
.nw { white-space: nowrap; }