/* Dobbins House Journal - photo journal shell */
html { background: #e7e2d6; }
body {
  margin: 0;
  background: #e7e2d6;
  color: #232019;
  font: 16px/1.62 Arial, Helvetica, sans-serif;
}
a { color: #7a4a24; }
a:focus-visible { outline: 2px solid #7a4a24; outline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }

.shell {
  width: 1020px;
  max-width: 100%;
  margin: 24px auto 40px;
  background: #fbf8f1;
  border: 1px solid #c6bda8;
  padding: 0 28px 8px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  grid-column-gap: 32px;
  grid-template-areas:
    "masthead masthead"
    "lead     rail"
    "older    rail"
    "albums   albums"
    "colophon colophon";
}
.m-masthead { grid-area: masthead; }
.m-lead     { grid-area: lead; }
.m-older    { grid-area: older; }
.m-rail     { grid-area: rail; }
.m-albums   { grid-area: albums; }
.m-colophon { grid-area: colophon; }

/* masthead */
.m-masthead { border-bottom: 1px solid #c6bda8; padding: 22px 0 0; }
.brand {
  margin: 0;
  font: 30px/1.2 Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: .08em;
}
.brand a { color: #232019; text-decoration: none; }
.standing {
  margin: 6px 0 12px;
  font: italic 13px/1.5 Georgia, "Times New Roman", serif;
  color: #5d5547;
}
.pagelinks {
  margin: 0;
  padding: 8px 0;
  list-style: none;
  border-top: 1px solid #c6bda8;
  font: 12px/1.4 Verdana, Geneva, sans-serif;
}
.pagelinks li { display: inline; margin-right: 18px; }

/* stream */
.entry { padding: 26px 0 4px; border-bottom: 1px solid #c6bda8; }
.entry:last-child { border-bottom: 0; }
.plate { margin: 0 0 18px; }
.plate img { border: 1px solid #7a4a24; background: #fff; }
.plate figcaption {
  margin-top: 6px;
  font: italic 12px/1.5 Verdana, Geneva, sans-serif;
  color: #5d5547;
  max-width: 42em;
}
.entry h2, .entry h1 {
  margin: 0 0 4px;
  font: 26px/1.25 Georgia, "Times New Roman", serif;
  font-weight: normal;
}
.entry h1 { font-size: 30px; }
.meta {
  margin: 0 0 12px;
  font: 12px/1.6 Verdana, Geneva, sans-serif;
  color: #5d5547;
}
.meta a { color: #7a4a24; }
.entry-body { max-width: 34em; }
.entry-body p { margin: 0 0 14px; }
.lede { font-size: 17px; }
.more { font: 12px Verdana, Geneva, sans-serif; }

/* rail */
.m-rail { padding-top: 26px; font: 12px/1.6 Verdana, Geneva, sans-serif; }
.m-rail h3 {
  margin: 0 0 8px;
  font: 13px/1.3 Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: .06em;
  border-bottom: 1px solid #c6bda8;
  padding-bottom: 4px;
}
.widget { margin: 0 0 24px; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 3px 0; border-bottom: 1px dotted #c6bda8; }
.m-rail .months { font: 12px/1.6 Verdana, Geneva, sans-serif; }
.m-rail .months li { display: block; margin: 0; padding: 3px 0;
                     border-bottom: 1px dotted #c6bda8; }
.markplate img { border: 1px solid #c6bda8; }
.markplate figcaption { margin-top: 6px; font-style: italic; color: #5d5547; }

/* albums band */
.m-albums { border-top: 1px solid #c6bda8; padding: 22px 0 6px; }
.m-albums h2, .m-colophon h2 {
  margin: 0 0 12px;
  font: 20px/1.3 Georgia, "Times New Roman", serif;
  font-weight: normal;
}
.sheet-group { margin: 0 0 20px; }
.sheet-group h3 {
  margin: 0 0 8px;
  font: 13px/1.3 Verdana, Geneva, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5d5547;
}
.sheet { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sheet li { width: 150px; }
.sheet img { border: 1px solid #c6bda8; }
.sheet span {
  display: block;
  margin-top: 4px;
  font: 11px/1.4 Verdana, Geneva, sans-serif;
}
.months { margin: 8px 0 0; padding: 0; list-style: none; font: 12px Verdana, Geneva, sans-serif; }
.months li { display: inline; margin-right: 14px; }

/* footer */
.m-colophon {
  border-top: 1px solid #c6bda8;
  margin-top: 18px;
  padding: 14px 0 20px;
  font: 12px/1.7 Verdana, Geneva, sans-serif;
}
.m-colophon ul { margin: 0 0 8px; padding: 0; list-style: none; }
.m-colophon li { display: inline; margin-right: 14px; }
.sig { font: 13px Georgia, "Times New Roman", serif; font-variant: small-caps;
       letter-spacing: .08em; color: #5d5547; }

/* inner pages */
.page-head { padding: 26px 0 0; }
.page-head h1 {
  margin: 0 0 6px;
  font: 30px/1.25 Georgia, "Times New Roman", serif;
  font-weight: normal;
}
.page-note { margin: 0 0 18px; font: italic 13px/1.6 Georgia, serif; color: #5d5547;
             max-width: 40em; }
.datedlist { margin: 0; padding: 0; list-style: none; }
.datedlist li { padding: 7px 0; border-bottom: 1px dotted #c6bda8; }
.datedlist .when { color: #5d5547; font: 12px Verdana, Geneva, sans-serif; margin-right: 10px; }
.monthblock { margin: 0 0 22px; }
.monthblock h2 {
  margin: 0 0 6px; font: 18px/1.3 Georgia, serif; font-weight: normal;
  border-bottom: 1px solid #c6bda8; padding-bottom: 4px;
}
.entrynav {
  margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid #c6bda8;
  font: 12px/1.8 Verdana, Geneva, sans-serif;
}
.entrynav a { display: block; }

@media (max-width: 720px) {
  .shell {
    width: auto;
    margin: 0;
    padding: 0 12px 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "masthead" "lead" "older" "rail" "albums" "colophon";
  }
  .m-rail { border-top: 1px solid #c6bda8; }
  .pagelinks li { display: inline-block; margin: 4px 16px 4px 0; font-size: 13px; }
  .plate figcaption { font-size: 13px; }
  .sheet li { width: calc(33.333% - 8px); }
  .sheet img { width: 100%; }
  .entry h1 { font-size: 26px; }
  .months li { display: inline-block; margin: 3px 14px 3px 0; }
}