/*  Baselining styles  */

*, *::before, *::after {
  box-sizing: border-box;
}
*:not(dialog) {
  margin: 0;
}
html {
  color: rgb(255, 252, 252);
  background-color: rgb(23, 24, 26);
  font-family: "Times New Roman", Times, serif;
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.5;
  font-size: 18px;
  font-weight: 400;
  box-sizing: border-box;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
a, a:visited, a:active {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: inherit;
  text-decoration: underline;
}
main {
  margin: 0;
  width: 100%;
}
section {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/*Site Wide Specific Styles*/

header {
  display: block;
  position: relative;
  padding: 32px;
  width: 100%;
}
.header-container {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 29px;
  row-gap: 32px;
  column-gap: 32px;
}
.header-logo-title-container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 18px;
  column-gap: 16px;
  row-gap: 16px;
}
.header-logo {
  cursor: pointer;
  display: block;
  line-height: 0;
  height: 42px;
  width: 42px;
  aspect-ratio: auto;
  font-size: 18px;
  font-weight: 400;
}
.header-logo > a {
  box-sizing: border-box;
  color: rgb(255, 252, 252);
  cursor: pointer;
  display: inline;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-weight: 400;
  height: auto;
  line-height: 0;
  margin: 0;
  text-decoration-color: rgb(255, 252, 252);
  text-decoration-line: none;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  width: auto;
}
.header-logo > a > img {
  aspect-ratio: auto 256 / 256;
  cursor: pointer;
  display: inline;
  height: 42px;
  line-height: 0;
  max-height: 42px;
  max-width: 100%;
  overflow-clip-margin: content-box;
  overflow-x: clip;
  overflow-y: clip;
  width: 42px;
}
.header-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 23px;
  letter-spacing: -0.4px;
  text-decoration: none;
  text-transform:uppercase;
}
.header-title :hover {
  text-decoration: none;
}
.header-menu-container {
  display: flex;
  flex-wrap: nowrap;
  column-gap: 32px;
  row-gap: 32px;
  align-items: center;
  line-height: 26px;
  font-size: 16px;
  position: relative;
}
.header-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-direction: row;
  justify-content: flex-end;
  column-gap: 32px;
  row-gap: 32px;
}
.header-menu-item {
  display: flex;
  font-size: 16px;
  line-height: 26px;
  position: relative;
  align-items: center;
  list-style: outside none none;
}
.header-menu-item > a {
  cursor: pointer;
  z-index: 1;
  text-underline-offset: 2px;
  text-decoration-color: rgb(255, 252, 252);
}
footer {
  padding: 32px;
  display: block;
  width: 100%;
  position: relative;
}
.footer-container {
  text-decoration-color: rgb(255, 252, 252);
  text-underline-offset: 2px;
  max-width: 1280px;
  row-gap: 32px;
  line-height: 29px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-wrap: nowrap;
  font-size: 18px;
  justify-content: space-between;
}
.footer-logo-title-container {
  align-items: center;
  column-gap: 16px;
  display: flex;
  flex-wrap: nowrap;
  font-size: 18px;
  line-height: 29px;
  row-gap: 16px;
}
.footer-logo {
  display: block;
  cursor: pointer;
  aspect-ratio: auto 256 / 256;
  max-height: 42px;
  max-width: 100%;
  overflow-clip-margin: content-box;
  overflow-x: clip;
  overflow-y: clip;
  height: 42px;
  width: 42px;
}
.footer-title {
  line-height: 23px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  text-decoration: none;
}
.footer-title :hover {
  text-decoration: none;
}
.footer-menu-container {
  display: flex;
  align-items: center;
  right: 0;
  top: 0;
  margin: 0;
  position: relative;
  row-gap: 32px;
  justify-content: flex-end;
}
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  flex-grow: 1;
  column-gap: 32px;
  align-items: center;
  font-size: 16px;
  line-height: 29px;
  margin: 0;
  padding: 0;
  position: relative;
  row-gap: 32px;
  justify-content: flex-end;
  list-style: outside none none;
}
.footer-menu-item {
  padding: 0;
  list-style: outside none none;
  position: relative;
  display: flex;
}
.footer-menu-item > a {
  cursor: pointer;
  display: block;
  list-style: outside none none;
  text-decoration-color: rgb(255, 252, 252);
  text-underline-offset: 2px;
  z-index: 1;
}
.flexholder {
  display: flex;
  flex-wrap: wrap;
}
.banner {
  width: 100%;
  height: 70vh;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
.billboard {
  width: 100%;
  padding: 10vh;
}
.fullwidthholder {
  display: block;
  width: 100%;
}
.center-floater {
  margin: auto;
}
.nomargin {
  margin: 0;
}
.sectionmargin {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.buffer1-2 {
  padding: 1vh 2vw;
}
.buffer2 {
  padding: 2vh 2vw;
}
.buffer5 {
  padding: 5vh 5vw;
}
.buffer8 {
  padding: 8vh 8vw;
}
.buffer12 {
  padding: 12vh 12vw;
}
.buffer15 {
  padding: 15vh 15vw;
}
.buffer20 {
  padding: 20vh 20vw;
}
.tbbuffer2 {
  padding: 2vh 0;
}
.tbbuffer3 {
  padding: 3vh 0;
}
.tbbuffer5 {
  padding: 5vh 0;
}
.tbbuffer8 {
  padding: 8vh 0;
}
.tbbuffer12 {
  padding: 12vh 0;
}
.tbbuffer15 {
  padding: 15vh 0;
}
.tbbuffer20 {
  padding: 20vh 0;
}
.side-buffer {
  margin-left: 20%;
  margin-right: 20%;
}
.top-buffer-16 {
  margin-top: 16px;
}
.top-buffer-32 {
  padding-top: 32px;
}
.notbold {
  font-weight: 400;
}
.left-side-block {
  width: 48%;
}
.right-side-block {
  width: 48%;
}
.action-button {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin: auto;
  padding: 0 30px;
  color: white;
  font-weight: 400;
  font-size: 1.125rem;
}
.action-button a {
  transition: background-color 0.15s ease;
  background-color: white;
  border-radius: 60px;
  border-width: 0;
  color: black;
  text-decoration: none;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
}
.action-button a:hover {
  text-decoration: underline;
}

/*  Page Specific  */
#mainpagestorm {
  position: relative;
  display: flex;
  z-index: 1;
  width: 100%;
  margin: 0;
  max-width: none;
}
#mainpagestorm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  /* Was hotlinked from the WordPress install this site replaces — it would have
     broken the moment WordPress was decommissioned. Now local, and the real
     cover art for Light in the Second Darkness rather than a stock storm. */
  background-image: url('/images/hero-storm.jpg');
  opacity: .4;
  background-position: center;
  background-size: cover;
  z-index: -1;
}
#contentleader {
  display: block;
  margin: auto;
  padding: 20px 20vw;
}
#townbackground {
  position: relative;
  display: flex;
  z-index: 1;
  height: 58vh;
  width: 100%;
  margin: 0;
  max-width: none;
}
#townbackground::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  /* Also previously hotlinked from WordPress. Now the Dawn of the Second Darkness
     cover art — which is an actual town under a storm, so the section id finally
     describes what it shows. Using book one here and book two in the hero above
     means the homepage leads with both. */
  background-image: url('/images/town-vista.jpg');
  background-position: center;
  background-size: cover;
  z-index: -1;
}
#books-block {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 32px;
}
#books-block > div {
  width: 100%;
  flex-wrap: nowrap;
  column-gap: 32px;
  row-gap: 32px;
  padding: 20px;
  border: black solid 2px;
}
#books-block p, #books-block img {
  margin-bottom: 32px;
}
#books-block .item-tile {
  display: block;
  min-width: 200px;
  max-width: 300px;
  font-size: 16px;
}
.contactusgrid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 32px;
}

.alignright {
  text-align: right;
}

.fullwidth {
  width: 100%;
}
/* ---- Forms (added 2026-08-15) ------------------------------------------- */
/* Honeypot: off-screen rather than display:none — some bots skip hidden fields. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-errors { border-left:3px solid #b00020; background:#fdf3f4; padding:.75rem 1rem; margin:1rem 0; }
.form-errors p { margin:.25rem 0; color:#b00020; }
.form-success { border-left:3px solid #1d6b34; background:#eef7f0; padding:.85rem 1rem; margin:1rem 0;
                font-size:1.05rem; line-height:1.6; }
.subscribe-form { display:flex; flex-direction:column; gap:.4rem; max-width:420px; margin:1rem 0; }
.subscribe-form input { padding:.55rem .65rem; font:inherit; border:1px solid #cdd5e0; border-radius:6px; }
.subscribe-form button { margin-top:.5rem; align-self:flex-start; }
.subscribe-form .optional { font-weight:400; opacity:.7; font-size:.9em; }
.footer-copyright { font-size:.85rem; opacity:.8; margin-top:1rem; }

/* ── Responsive layout ─────────────────────────────────────────────────────
   Added 2026-08-19. This stylesheet previously contained NO media queries at
   all, so the site rendered its desktop layout on every device. Measured at
   390px: /books.php produced a 984px-wide page (two-and-a-half screens of
   sideways scrolling) and the contact form overflowed the viewport.

   Causes, both the same shape — two-column layouts with no single-column
   fallback:
     #books-block   grid-template-columns: auto auto
     .contactusgrid grid-template-columns: auto auto  (label | field)
     .left-side-block / .right-side-block  width: 48%

   Desktop is untouched: everything here sits inside a max-width query.
   ────────────────────────────────────────────────────────────────────────── */

img { max-width: 100%; height: auto; }

@media (max-width: 820px) {
  /* One column instead of two. */
  #books-block,
  .contactusgrid { grid-template-columns: 1fr; grid-gap: 1rem; }

  /* The form labels sit right-aligned against their fields in the two-column
     layout; stacked, that reads as though each label belongs to the field
     ABOVE it. Left-align so each label clearly heads the field beneath. */
  .contactusgrid .alignright { text-align: left; margin-bottom: -.5rem; }

  /* Grid items default to min-width:auto just as flex items do, so the column
     refuses to shrink below its content and 1fr never takes effect. Here two
     .item-tile blocks at min-width:200px were holding the column open at 468px
     inside a 390px screen — the width:100% below then resolved against that
     468px, not the viewport. */
  #books-block > * { min-width: 0; }
  .item-tile { min-width: 0 !important; max-width: 100% !important; }

  .left-side-block,
  .right-side-block { width: 100%; }

  #books-block > div { padding: 1rem; }
  #books-block .item-tile { max-width: 100%; margin: 0 auto; }

  /* Full-bleed decorative bands are half a phone screen at their desktop height. */
  #mainpagestorm, #townbackground { height: 42vh; min-height: 220px; }

  /* Generous desktop side padding leaves almost no usable width on a phone. */
  #contentleader { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 560px) {
  body { overflow-wrap: break-word; }
}