/* Shared styles for the modernised Oasis (1997) site. */

html { -webkit-text-size-adjust: 100%; }
body { margin: 8px; font-family: "Times New Roman", Times, serif; line-height: 1.35; }
img { max-width: 100%; height: auto; }

/* Stand-in for an image the archive never captured. */
.lost-img {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  box-sizing: border-box; max-width: 100%; min-height: 3em; padding: 0.5em;
  border: 1px dashed currentColor; text-align: center; font-style: italic; vertical-align: middle;
}

/* Former frameset pages: title bar on top, art column left, story right. */
body.framed { margin: 0; }
.frames {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header header" "art story";
  min-height: 100vh;
}
.region { padding: 5px; min-width: 0; }
.region.header { grid-area: header; min-height: 50px; }
.region.header h2 { margin: 0.4em 0; }
.region.art { grid-area: art; }
.region.story { grid-area: story; }

/* Keep the art beside the story while reading a long chapter. */
@media (min-width: 701px) {
  .region.art > * { position: sticky; top: 5px; }
}

/* Framesets kept as iframes (games whose scripts talk between frames). */
body.frameset { margin: 0; height: 100vh; overflow: hidden; }
.fs { display: grid; width: 100%; height: 100%; min-height: 0; }
.fs > iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }

/* Narrow screens: stack frames and top-level layout tables. */
@media (max-width: 700px) {
  .fs.cols { grid-template-columns: 1fr !important; grid-template-rows: 1fr 40vh; }
  .frames {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "art" "story";
  }
  table.layout, table.layout > tbody, table.layout > tbody > tr,
  table.layout > tbody > tr > td, table.layout > tr > td {
    display: block;
    width: auto !important;
  }
  table.layout[align] { float: none; margin: 0 auto 1em; }
}