@font-face {
  font-family: "SourceSansPro";
  src: url("/web/assets/fonts/SourceSansPro-Regular.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "SourceSansPro-Bold";
  src: url("/web/assets/fonts/SourceSansPro-Bold.ttf") format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Berylium";
  src: url("/web/assets/fonts/Berylium.ttf.woff") format("woff"), url("/web/assets/fonts/Berylium.ttf.svg#Berylium") format("svg"), url("/web/assets/fonts/Berylium.ttf.eot"), url("/web/assets/fonts/Berylium.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Berylium-Bold";
  src: url("/web/assets/fonts/Berylium-Bold.ttf.woff") format("woff"), url("/web/assets/fonts/Berylium-Bold.ttf.svg#Berylium") format("svg"), url("/web/assets/fonts/Berylium-Bold.ttf.eot"), url("/web/assets/fonts/Berylium-Bold.ttf.eot?#iefix") format("embedded-opentype");
  font-weight: normal;
  font-style: normal;
}
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 2em;
  padding: 0;
  line-height: 1.2em;
  font-size: 1rem;
  font-family: SourceSansPro, "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace;
}

.global-wrapper {
  max-width: 1100px;
  margin: 1em;
  padding: 0 1em 0;
}

main {
  max-width: 1100px;
  margin: 2em auto 0;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

article {
  max-width: 780px;
}

.body-normal {
  font-family: "Berylium", serif, "Times New Roman";
  line-height: 1.8rem;
  font-size: 1.2rem;
  color: rgb(26, 26, 26);
}

h1 {
  font-family: "SourceSansPro", Arial, sans-serif;
  line-height: 1.3;
}

.smallest-italic-body {
  font-style: italic;
  font-size: 0.8rem;
  padding: 1em 0;
}

.smallest-caps {
  font-size: 0.8rem;
  font-family: "SourceSansPro-Bold", Arial, sans-serif;
  text-transform: uppercase;
}

.img-common {
  max-width: 100%; /* Fluid scaling */
  height: auto; /* Maintain aspect ratio */
  border-style: none; /* Modern way to remove borders */
}

.img-left {
  float: left;
  margin-right: 0.5em;
}

.img-center {
  margin: 1em auto;
  display: block;
  text-align: center;
}

.img-center img {
  margin-right: 0.5em;
}

.img-center img:last-child {
  margin-right: 0;
}

a {
  #color: #120e0e;
  color: #069;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  text-decoration: none;
  color: #FF8C00;
}

.caption {
  font-size: 0.9rem;
}

input[type=text], select, textarea, input[type=email], input[type=password] {
  width: 100%;
  padding: 1em;
  margin: 1em 0;
  font-family: SourceSansPro, "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono", "Droid Sans Mono", monospace, monospace;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
}

.radio-btn {
  margin-right: 1em;
}

label:hover {
  cursor: pointer;
}

button, input[type=submit] {
  background-color: rgb(5, 125, 188);
  text-transform: uppercase;
  color: #fff;
  font-size: 0.8rem;
  font-family: "SourceSansPro-Bold";
  border-radius: 4px;
  border: 1px solid rgb(255, 255, 255);
  transition: 0.3s;
  padding: 1em;
}

button:hover, input[type=submit]:hover {
  cursor: pointer;
  background-color: #75C9E3;
}

.btn-submit-disabled {
  background-color: #ccc !important;
  border: 1px solid #ccc !important;
}

.btn-width {
  width: 180px;
}

.btn-width-small {
  width: 120px;
}

.hidden-field {
  display: none;
}

fieldset legend {
  font-size: 0.9rem;
}

header {
  max-width: 1100px;
  margin: 0 auto 0;
  text-align: center;
}

.header-title {
  font-family: Berylium;
}

nav {
  display: grid;
  grid-template-columns: auto auto;
  width: 100%;
  margin-top: 1em;
  padding: 0.5em;
  border-top: 4px solid #000;
  text-align: left;
}

nav div:first-child a {
  margin-right: 1.5em;
}

nav div:nth-child(2) {
  text-align: right;
}

nav div:nth-child(2) button {
  padding: 0.5em;
  margin-top: 0;
  margin-bottom: 0;
}

nav div:last-child {
  margin-right: 0;
}

footer {
  max-width: 1100px;
  margin: 2em auto 0;
  text-align: center;
  font-size: 0.8rem;
}

.main-home {
  text-align: center;
  place-items: center;
}

/*
.cover-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: $common-space;
}
.cover-matrix-item {
  display: grid;
  grid-template-rows: auto auto;
  margin: 0 auto;
  font-size: $font-caption-size;
}
*/
.cover-matrix {
  display: grid;
  /* Lower the min-width to 160px to account for padding/borders */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 2em;
  width: 100%;
}

.cover-matrix-item {
  display: flex; /* Flex is often cleaner for the internal vertical stack */
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%; /* Ensure it takes up its grid cell */
}

.cover-caption {
  margin-top: 0.5em;
}

/*
.cover-frame {
  padding: 1em;
  border: 1px solid #eee;
  transition: 0.3s;
}
*/
.cover-frame {
  max-width: 100%; /* Prevents the image from pushing the grid wider */
  height: auto; /* Maintains aspect ratio */
  padding: 1em;
  border: 1px solid #eee;
  transition: 0.3s;
  box-sizing: border-box; /* Crucial! Keeps padding inside the width */
}

.cover-frame:hover {
  border: 1px solid #FF8C00;
}

.home-frame-a {
  text-align: center;
}

.home-frame-a img {
  margin-right: 0.5em;
}

.home-frame-a img:last-child {
  margin-right: 0;
}

.book {
  display: grid;
  grid-template-columns: auto 1fr;
}

.book-details {
  padding: 4em 2em;
}

.body-meta {
  color: rgb(26, 26, 26);
}

.body-meta-item {
  border-bottom: 1px solid rgb(26, 26, 26);
  padding-bottom: 0.5em;
}

.body-meta .body-meta-item:last-child {
  padding-top: 0.5em;
  border-bottom: none;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.login-form :nth-child(3) {
  margin-bottom: 1em;
}

.login-form :nth-child(4) {
  margin-bottom: 0.5em;
}

.book-details--screen-medium {
  display: none;
}

.subscription-article {
  margin: 0 auto;
}

.subscription-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-gap: 2em;
  margin-top: 2em;
}

.sub-item {
  border-radius: 10px;
  border: 2px solid #069;
  transition: 0.3s;
  padding: 2em;
}

.sub-item:hover {
  border: 2px solid #FF8C00;
}

.proceed-btn-container {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  text-align: center;
}

.subscription-article section:nth-child(2) {
  display: none;
}

.subform {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-gap: 1em;
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid rgb(26, 26, 26);
}

.submit-btn-container {
  text-align: center;
}

.form-error {
  display: none;
  text-align: center;
  margin-bottom: 1em;
  color: red;
  font-size: 0.9rem;
}

.confirm-container {
  display: grid;
  grid-template-rows: auto auto;
}

.confirm-subscription {
  background-color: #eee;
  padding: 2em;
}

.confirm-subscription .details {
  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-gap: 1em;
}

.confirm-subscription .details div:nth-child(odd) {
  font-family: "SourceSansPro-Bold";
  text-align: right;
}

.confirm-subscription .details div {
  border-bottom: 1px solid #fff;
}

.confirm-subscription .toc {
  padding-top: 2em;
}

.confirm-btn-container {
  margin-top: 0.5em;
}

@media (width <= 1036px) {
  body {
    margin: 1em;
  }
  .btn-width-small {
    width: 80px;
  }
  /*
    .cover-matrix {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-gap: $common-space;
    }
  */
  .book-details--screen-medium {
    display: block;
    padding: 0 0 2em 0;
    width: 672px;
    margin: 0 auto;
  }
  .book {
    display: flex;
    justify-content: center;
  }
  .book-details {
    display: none;
  }
  .book-details--screen-medium .login-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    grid-gap: 0.5em;
  }
  .book-details--screen-medium .login-form div:nth-child(3) {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
  }
  .book-details--screen-medium button {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

/*# sourceMappingURL=style.css.map */