/* J.A. Buza Corporation. Restored from the 2026 Wayback copy of jabuza.com.
   Desktop keeps the original sizes. Below 860px the layout stacks for phones. */

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

body {
  margin: 0 0 10px;
  background: #00134b url(/images/bg.jpg) repeat-x;
  color: #fff;
  font: 10px Geneva, Arial, Helvetica, sans-serif;
}

img { border: 0; }

a { color: #ccc; }
a:hover { color: #fff; }

#wrapper {
  max-width: 850px;
  margin: 0 auto;
}

/* Header: logo on the left, image buttons on the right. */
#header {
  display: flex;
  align-items: flex-start;
  min-height: 63px;
  margin: 0 0 20px;
  background: url(/images/header-bg.gif) repeat;
}
#logo {
  display: block;
  width: 445px;
  margin-left: 10px;
}
#logo img { display: block; }
#nav {
  display: flex;
  gap: 4px;
}
#nav a { display: block; }
#nav img { display: block; }

/* Shared boxes */
.box-heading {
  height: 29px;
  margin: 0 0 7px;
  padding: 5px 0 0 10px;
  border: 1px solid #333;
  background: #5d5d5d url(/images/box-heading-arrow.jpg) no-repeat right;
  font: bold 12px Geneva, Arial, Helvetica, sans-serif;
  color: #fff;
}
.box {
  display: flow-root;
  padding: 15px 10px 0;
  border: 1px solid #333;
  border-bottom: none;
  background: #5d5d5d;
  font: 12px Geneva, Arial, Helvetica, sans-serif;
  text-align: justify;
}
.box-heading.wide { margin: 10px 0; }
.box.wide { padding: 10px; margin-bottom: 50px; }
.box.wide p { font-size: 14px; }

p {
  margin: 0 0 10px;
  font: 12px Geneva, Arial, Helvetica, sans-serif;
  line-height: 1.2em;
  letter-spacing: -.4px;
}
h1 { margin: 0; font-size: 16px; text-align: left; }
h2 { margin: 0 0 10px; font-size: 13px; text-align: left; }
hr { margin: 8px 0 32px; }

/* Home */
.feature {
  padding: 15px 10px;
  border: 1px solid #333;
  background: #5d5d5d;
}
.feature img {
  display: block;
  width: 100%;
  height: auto;
}

/* Two columns: Our Work and Contact */
.cols {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.side { flex: 0 0 247px; }
.content {
  flex: 0 0 590px;
  padding: 15px 10px;
  border: 1px solid #333;
  background: #5d5d5d;
}
.content.work { padding: 6px 10px; }
.content > img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Our Work sub-menu sits on a strip of six project thumbnails. */
.subnav {
  height: 216px;
  padding: 1px 10px 0 55px;
  border: 1px solid #333;
  border-bottom: none;
  background: url(/images/nav-ourwork-bg.gif) no-repeat;
}
.subnav a {
  display: block;
  font: 13px Arial, Helvetica, sans-serif;
  line-height: 2.75;
  letter-spacing: -.4px;
  color: #ccc;
  text-decoration: none;
}
.subnav a:hover,
.subnav a[aria-current] { color: #fff; text-decoration: underline; }

/* Thumbnail grid: four across at 139px on desktop. */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.gallery a { display: block; }
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #999;
}
.gallery a:hover img,
.gallery a:focus-visible img { border-color: #fff; }

/* Contact */
.license {
  margin: 0 0 11px;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0;
}
p.contact { line-height: 1.5em; letter-spacing: 0; }
p.contact:last-of-type { margin-bottom: 0; }
p.contact a { color: #fff; text-decoration: none; }

/* Photo viewer (js/gallery.js) */
dialog.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .88);
  color: #fff;
}
dialog.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox figure { margin: 0; text-align: center; }
dialog.lightbox img {
  display: block;
  max-width: calc(100vw - 110px);
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
  border: 6px solid #fff;
}
dialog.lightbox figcaption {
  margin-top: 8px;
  font: 12px Geneva, Arial, Helvetica, sans-serif;
  color: #ccc;
}
dialog.lightbox button {
  position: absolute;
  border: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font: 40px/1 Arial, Helvetica, sans-serif;
  cursor: pointer;
}
dialog.lightbox button:hover,
dialog.lightbox button:focus-visible { background: rgba(255, 255, 255, .2); }
.lb-prev, .lb-next {
  top: 50%;
  width: 44px;
  height: 80px;
  margin-top: -40px;
}
.lb-prev { left: 6px; }
.lb-next { right: 6px; }
.lb-close {
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
}

/* Phones and narrow windows */
@media (max-width: 860px) {
  #wrapper { padding: 0 10px; }
  #header { flex-wrap: wrap; }
  #logo { width: auto; flex: 1 0 100%; }
  #nav { flex: 1 1 100%; min-width: 0; }
  #nav a { flex: 0 1 auto; min-width: 0; }
  #nav img { width: 100%; height: auto; }
  .cols { flex-direction: column; align-items: stretch; }
  .side, .content { flex: none; }
  .side { width: 247px; max-width: 100%; }
  .box.wide { margin-bottom: 30px; }
}
@media (max-width: 600px) {
  .box { text-align: left; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  dialog.lightbox img { max-width: 100vw; border-width: 3px; }
  .lb-prev, .lb-next { background: rgba(0, 0, 0, .35); }
}

/* Project pages whose photos were not all in the archive. */
.pending {
  margin: 10px 0 8px;
  color: #ddd;
  font-size: 12px;
}