/* Base: matches matthew-flores.com */
body {
  font-family: "Times New Roman", Times, serif;
  background-color: white;
  margin-left: 10px;
}

a { color: blue; }
a:visited { color: blue; }
a:hover { font-style: italic; }

hr { border: 0.5px solid black; }
h2 { margin-bottom: 0; }
li { list-style-type: "-"; }

/* Top links (and search box, on the catalog page) */
.nav { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5em 1em; margin-bottom: 1.5em; }
.nav a, .nav label { text-transform: uppercase; }

#search { font: inherit; }
.catalog-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.5em 1em; margin: 1em 0; }
.catalog-head h2 { margin: 0; }

.catalog-tools { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1em; }
.catalog-tools button { 
  font: inherit; 
  background-color: yellow;
  border: 1px solid black;
}

/* Catalog table */
table.catalog { width: 100%; border-collapse: collapse; border: 1px solid black; border-left: none; border-right: none; }
table.catalog > thead > tr > th,
table.catalog > tbody > tr > td { border: 1px solid black; }
table.catalog > thead > tr > :first-child,
table.catalog > tbody > tr > :first-child { border-left: none; }
table.catalog > thead > tr > :last-child,
table.catalog > tbody > tr > :last-child { border-right: none; }
table.catalog th, table.catalog td { padding: 0.4em; }
table.catalog th { cursor: pointer; }
tr.entry { cursor: pointer; }

/* Work titles in italics (Title column of the table) */
table.catalog > tbody > tr.entry > :nth-child(2) { font-style: italic; }

/* Column widths: # and Year fit their content; Title and Medium share the rest by content */
table.catalog > thead > tr > :nth-child(1),
table.catalog > thead > tr > :nth-child(4) { width: 1%; }
table.catalog > thead > tr > :nth-child(1),
table.catalog > thead > tr > :nth-child(4),
table.catalog > tbody > tr.entry > :nth-child(1),
table.catalog > tbody > tr.entry > :nth-child(4) { white-space: nowrap; }

/* Webring buttons and logos above the footer line */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5em; margin: 1.5em 0 1em; }
.badges img {
  display: block;
  max-width: 100%;
height: 75px;
}

/* Image + text block (catalog row and work page) */
table.detail { width: 100%; }
table.detail td { width: 50%; vertical-align: top; padding: 0.4em; }
.detail-title { font-size: 1.25em; }
.detail-title a { font-style: italic; }
ul.shows { margin: 0; padding-left: 1.2em; }
.rich p { margin: 0 0 0.5em; }
.rich > p:first-child { display: inline; }
.rich ul, .rich ol { margin: 0 0 0.5em; padding-left: 1.2em; }
.rich > :last-child { margin-bottom: 0; }
table.detail img { width: 100%; height: auto; display: block; border: 1px black solid; }
table.detail iframe, .photos iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; border: 0; }

/* Work page photo grid */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2em; padding: 0 0.4em; }
.photos img { width: 100%; height: auto; display: block; border: 1px black solid; }

@media only screen and (max-width: 600px) {
  .photos { grid-template-columns: 1fr; }
  table.detail, table.detail tbody, table.detail tr, table.detail td { display: block; width: 100%; box-sizing: border-box; }
}