/* Ken Hull, Artist: colors carried over from the original ColdFusion site */
:root {
  --maroon: #660000;
  --black: #000;
  --tan: #cccc99;
  --cream: #ffffcc;
  --font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--maroon); }

body {
  margin: 0;
  background: var(--maroon);
  color: var(--cream);
  font: 14px/1.6 var(--font);
}

a { color: var(--cream); }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; }

/* masthead */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--black);
  padding: 8px 24px;
}
.masthead .logo img { display: block; }
.masthead address {
  font-style: normal;
  font-size: 12px;
  line-height: 1.4;
  color: var(--tan);
  text-align: right;
}

/* main navigation */
.mainnav {
  background: var(--tan);
  border: 2px solid var(--black);
  border-left: 0;
  border-right: 0;
}
.mainnav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mainnav li { position: relative; }
.mainnav > ul > li > a,
.mainnav > ul > li > button {
  display: block;
  padding: 7px 18px;
  font: bold 12px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--black);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.mainnav > ul > li.active > a,
.mainnav > ul > li.active > button { text-decoration: underline; text-underline-offset: 3px; }
.mainnav ul ul {
  display: none;
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  min-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--tan);
  border: 1px solid var(--black);
}
.mainnav li:hover > ul,
.mainnav li:focus-within > ul,
.mainnav li.open > ul { display: block; }
.mainnav ul ul a {
  display: block;
  padding: 5px 12px;
  white-space: nowrap;
  font: bold 11px Arial, Helvetica, sans-serif;
  color: var(--black);
  text-decoration: none;
}
.mainnav ul ul a:hover,
.mainnav ul ul a:focus,
.mainnav ul ul a[aria-current] { background: var(--black); color: var(--tan); }
.menu-toggle { display: none; }

/* page body: black sidebar + maroon content */
.wrap {
  display: flex;
  max-width: 1000px;
  min-height: 550px;
}
.side {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 24px 8px;
  background: var(--black);
}
.side img { display: block; }
.side .sign { align-self: center; margin-top: 8px; }

main.copy {
  flex: 1;
  min-width: 0;
  padding: 12px 24px 24px;
}
.crumb {
  margin: 0 0 1em;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .03em;
}
.crumb span { opacity: .6; }
main h2 { font: bold 16px Arial, Helvetica, sans-serif; margin: 0 0 1em; }
.lead { font-weight: bold; }
.center { text-align: center; }

.framed { border: 1px solid var(--cream); }
.float-right { float: right; margin: 0 0 12px 20px; }
.float-left { float: left; margin: 0 20px 12px 0; }
main::after { content: ""; display: block; clear: both; }

a.navigate { font-weight: bold; text-decoration: none; }

table.layout { width: 100%; border-collapse: collapse; margin: 1em 0; }
table.layout td { padding: 3px 12px 3px 0; vertical-align: top; }
table.layout img { max-width: none; }

/* artwork galleries */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin: 1.5em 0;
  clear: both;
}
.gallery figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery figure > a {
  display: block;
  padding: 6px;
  border: 1px solid var(--cream);
  border-bottom: 0;
  width: 100%;
  text-align: center;
}
.gallery figure img { display: inline-block; vertical-align: bottom; }
.gallery figcaption {
  width: 100%;
  padding: 6px;
  border: 1px solid var(--cream);
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.gallery-note { text-align: center; clear: both; }

.card {
  max-width: 320px;
  margin: 1.5em 0;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--maroon);
  border: 1px solid var(--black);
  outline: 1px solid var(--cream);
  text-align: center;
  font: bold 14px Arial, Helvetica, sans-serif;
}
.card a { color: var(--maroon); }

.site-footer {
  max-width: 1000px;
  padding: 24px 24px 32px 144px;
  font-size: 11px;
  text-align: center;
}

/* image lightbox (replaces the original pop-up windows) */
dialog.lightbox {
  padding: 0;
  border: 1px solid var(--cream);
  background: var(--maroon);
  color: var(--cream);
  max-width: 95vw;
  max-height: 95vh;
}
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
dialog.lightbox img { display: block; max-width: 92vw; max-height: 85vh; width: auto; height: auto; }
dialog.lightbox p { margin: 0; padding: 6px 36px 8px 10px; font-size: 12px; }
dialog.lightbox button {
  position: absolute;
  right: 4px;
  bottom: 2px;
  font: bold 18px Arial, sans-serif;
  color: var(--cream);
  background: none;
  border: 0;
  cursor: pointer;
}

/* phones */
@media (max-width: 720px) {
  .masthead { padding: 8px 16px; }
  .masthead .logo img { width: 160px; }
  .masthead address { font-size: 11px; }

  .menu-toggle {
    display: block;
    width: 100%;
    padding: 8px 16px;
    font: bold 13px Arial, sans-serif;
    text-transform: uppercase;
    text-align: left;
    background: none;
    border: 0;
    color: var(--black);
    cursor: pointer;
  }
  .mainnav > ul { display: none; flex-direction: column; padding-bottom: 8px; }
  .mainnav.open > ul { display: flex; }
  .mainnav > ul > li > a,
  .mainnav > ul > li > button { padding: 6px 16px; text-align: left; width: 100%; }
  .mainnav ul ul { display: block; position: static; border: 0; padding-left: 16px; }
  .mainnav ul ul a { white-space: normal; padding: 4px 16px; }

  .wrap { flex-direction: column; min-height: 0; }
  .side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 12px 16px;
  }
  .side .sign { display: none; }
  main.copy { padding: 12px 16px 16px; }
  .float-right, .float-left { float: none; display: block; margin: 0 auto 12px; }
  table.layout, table.layout tbody, table.layout tr, table.layout td { display: block; width: auto; }
  table.layout img { max-width: 100%; }
  .site-footer { padding: 16px; }
}