* {
  box-sizing: border-box;
}

:root {
  --gold: #fbb720;
}

/* Hard-coded page numbers are in: 
1. the toc */

/* Top-level media queries */

@media screen {
  .print {
    display: none;
  }
}

@media print {
  .web {
    display: none;
  }
}

/* FONTS */

@media print {
  @font-face {
    font-family: "garamond";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/GaramondPremrPro.otf")
        format("opentype");
  }

  @font-face {
    font-family: "garamondBd";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/GaramondPremrPro-Bd.otf")
        format("opentype");
  }

  @font-face {
    font-family: "garamondIt";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/GaramondPremrPro-It.otf")
        format("opentype");
  }

  @font-face {
    font-family: "garamondDisp";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/GaramondPremrPro-Disp.otf")
        format("opentype");
  }

  @font-face {
    font-family: "garamondLtDisp";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/GaramondPremrPro-LtDisp.otf")
        format("opentype");
  }

  @font-face {
    font-family: "monterchi-Regular";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/monterchi-Regular.otf")
        format("opentype");
  }

  @font-face {
    font-family: "monterchi-Thin";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/monterchi-Thin.otf")
        format("opentype");
  }

  @font-face {
    font-family: "monterchi-Light";
    src: local("☺"),
      url("file:/Users/valeriestoehr/Library/Fonts/monterchi-Light.otf")
        format("opentype");
  }
}

@media print {
  body {
    font-family: "garamond", prince-no-fallback;
    font-size: 12pt;
    line-height: 125%;
    /* line-height: 14.6pt; */
    widows: 2;
    orphans: 2;
  }
}

/* 
PAGE SETUP
 */

@page {
  size: 8.5in 11in; /* width height */
}

/* Sheila Packa's book uses 1.2 on the inside & 1 inch on the outside & top/bottom. */

@page :left {
  /* for sauna book, 1 with 12pt*/
  margin-left: 2in;
  /* inside margin sauna book was 1.0 */
  margin-right: 1.75in;
  margin-top: 1.5in;
  margin-bottom: 1.5in;
  /* marks: crop; */
  @bottom-left {
    content: counter(page);
    font-size: 11pt;
  }
}

@page :right {
  /* inside margin */
  margin-left: 1.75in;
  /* outside margin */
  margin-right: 2in;
  margin-top: 1.5in;
  margin-bottom: 1.5in;
  /* marks: crop; */
  @bottom-right {
    content: counter(page);
    font-size: 11pt;
  }
}

@page {
  @footnote {
    border-top: solid black thin;
    border-clip: 3em;
    padding-top: 8pt;
  }
}

@page {
  counter-reset: footnote;
}

/* COVER */

/* Half Title Page  */

.title-half {
  page: title-half;
}

@page title-half {
  /* break-before: right; */

  @bottom-right {
    content: none;
  }
}

.title-half h1 {
  font-family: "monterchi-Regular", prince-no-fallback;
  font-weight: 300;
  text-align: center;
  font-size: 48px;
  padding-top: 1.25in;
  line-height: 105%;
}

/* Title Page */
.title {
  page: title;
}

@page title {
  margin: 0.75in;
  @bottom-right {
    content: none;
  }
}

/* WHEN USING AN IMAGE...
chapter#title {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(images/sauna-title.png);
  background-repeat: no-repeat;
  background-size: auto 80%;
  background-position: center;
} */

.title h1 {
  font-family: "monterchi-Regular", prince-no-fallback;
  font-weight: 300;

  text-align: center;
  font-size: 48px;

  padding-top: 1.55in;
  line-height: 100%;
}

.title h2 {
  font-family: "monterchi-Regular", prince-no-fallback;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-align: center;
  font-size: 33px;
  padding-top: 1.75in;
  margin-bottom: 0;
}

.title h3 {
  font-family: "monterchi-Regular", prince-no-fallback;
  font-weight: 300;
  text-align: center;
  font-size: 26px;
  margin-top: 5px;
  letter-spacing: 0.1em;
}

/* Copyright Page */

.copyright {
  page: copyright;
}

.copyright p {
  font-size: 11pt;
  /* text-align: center; */
  line-height: 120%;
  margin-bottom: 13pt;
}

@page copyright {
  margin-top: 4.73in;

  @bottom-left {
    content: none;
  }
}

/* TOC */

@page toc {
  @bottom-right {
    content: none;
  }
  @bottom-left {
    content: none;
  }
}

.toc {
  page: toc;
}

/* TOC styling  */
/* Used styling guidance from https://www.w3.org/Style/Examples/007/leaders.en.html */

.toc ul {
  list-style: none;
  font-size: 11pt;
}

.toc-num {
  font-size: 10.5;
}

.toc h1 {
  padding-top: 40pt;
  margin-bottom: 10px;
}

li.leaders {
  margin-left: -1.75em;
}

li.no-leaders {
  margin-left: -3em;
  padding-top: 13px;
}

li.leaders span:first-child:after {
  content: leader(dotted);
}

/* Section Pages - to divide the parts */

.section-page {
  page: section-page;
  text-align: center;
  font-size: 28px;
  line-height: 110%;
  font-weight: 200;
}

.section-page h1 {
  font-family: "monterchi-Regular", prince-no-fallback;
  page-break-after: always;
  padding-top: 1.75in;
  line-height: 108%;
  font-weight: 200;
}

@page section-page {
  @bottom-right {
    content: none;
  }
  @bottom-left {
    content: none;
  }
}

/* Blank pages */
.blank-page {
  page: blank;
  page-break-after: always;
}

@page blank {
  @bottom-right {
    content: none;
  }

  @bottom-left {
    content: none;
  }
}

/* ALPHA BY ELEMENT */

/* "a" element permutations */

.brand a {
  text-decoration: none;
  color: black;
}

nav a:link {
  text-decoration: none;
  color: #505050;
}

button a:link {
  text-decoration: none;
  color: black;
}

nav a:visited {
  text-decoration: none;
  color: #505050;
}

button a:visited {
  text-decoration: none;
  color: black;
}

nav a:hover {
  border-bottom: 6px solid gold;
  color: black;
}

.a-menu-item-current {
  color: black;
  border-bottom: 4px #1c138b solid;
}

.all-caps {
  font-size: 1rem;
}

/* start each article at the top of a new page */
article {
  break-before: page;
}

.block {
  display: block;
}

/* not sure this border box stuff is needed */

.border-box {
  border: 1.75px solid gray;
  padding-bottom: 1rem;
}

.border-box-text-indent {
  margin-left: 2rem;
  margin-right: 2rem;
}

@media screen {
  body {
    font-family: Georgia, serif;

    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 140%;
  }
  .brand {
    font-family: "courier", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05;
    font-weight: 200;
    text-align: left;
  }
}

/* BUTTONS */

@media screen {
  button {
    font-family: "Montserrat", sans-serif;
    background: gold;
    border: 1px solid black;
    border-radius: 0px;
    padding: 0.8rem 1.4rem;
    color: #1f2121;
    font-weight: 650;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
  }

  .button-container {
    text-align: center;
  }
}

/* ALL CAPS - LETTERSPACE 0.05-0.12 USUALLY */

@media print {
  .caps {
    letter-spacing: 0.04em;
    font-size: 11pt;
  }
  .caps-no-ls {
    font-size: 11pt;
  }
}

caption {
  margin: 0 auto;
}

.center {
  text-align: center;
}

.contact {
  font-size: 1rem;
  line-height: 1.4rem;
}

@media screen {
  .container-page {
    margin: 0 auto;
    width: 85%;
    max-width: 550px;
  }
}

@media print {
  figure {
    max-width: 80%;
    margin: 0 auto;
    text-align: center;
    margin-top: 2.75rem;
    margin-bottom: 2.75rem;
  }
}

@media screen {
  figure {
    max-width: 70%;
    margin: 0 auto;
    text-align: center;
    margin-top: 2.75rem;
    margin-bottom: 1rem;
  }
}

@media print {
  figcaption {
    text-align: center;
    font-family: "garamondIt", prince-no-fallback;
    font-style: regular;

    padding-top: 1rem;
  }
}

@media screen {
  figcaption {
    margin: auto 0px;
    font-size: 1rem;
    padding-top: 1rem;
    font-style: regular;
  }
}

/* Used in footer */
.flex-container-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 70%;
}

/*apparently not needed
 .flex-container-projects {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* align-items: center;
  justify-content: space-between;
  max-width: 60%; 
} */

/* Used in footer */
.flex-container-logo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

/* Used in navigation menu */
.flex-container-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
}

.float-intro {
  float: left;
  margin-top: 0.5rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

footer {
  margin-top: 5rem;
  /* color taken from Tints of #7d89a1 */
  /* background-color: #bec4d0; */
  background-color: #cbcfd9;
  padding-top: 1.2em;
  padding-bottom: 2em;
  padding-right: 0;
  margin-right: 0;
  width: 100%;
}

/* FOOTNOTES  */

*::footnote-call {
  content: counter(footnote);
  font-size: 83%;
  vertical-align: super;
  line-height: none;
}

.fn {
  float: footnote;
  font-size: 10pt;
  line-height: 122%;
  footnote-style-position: inside;
}

.grid-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

@media print {
  h1 {
    font-family: "monterchi-Regular", prince-no-fallback;
    /* font-family: "garamondLtDisp", prince-no-fallback; */
    /* was formerly 24 pt */
    font-size: 32pt;
    padding-bottom: 18pt;
    font-weight: 200;
    /* line-height: 110%; */
    line-height: 14pt;
  }

  h2 {
    font-size: 17pt;
    line-height: 110%;
    padding-bottom: 0pt;
    margin-top: 30px;
    margin-bottom: 4px;
    font-weight: 200;
    /* font-family: "garamondLtDisp", prince-no-fallback; */
    font-family: "monterchi-Regular", prince-no-fallback;
    /* font-variant: small-caps; */

    /* page break avoid says move the heading to the next page if it's last thing on page */
    page-break-after: avoid;
  }

  /* the hanging-punctuation class is applied only in the blockquote 
that begins with a doublequote in the september 7, 1895, article. 
PRINCE does not support hanging punctuation, which places an element's
initial double quote (usually for a blockquote) to the left of the left 
margin for that element. So the words line up better. As a workaround
we can do a negative left margin for block quotes that start with a double quote. See
https://chriscoyier.net/2023/11/27/the-hanging-punctuation-property-in-css/?utm_source=convertkit&utm_medium=email&utm_campaign=Don%27t+rely+on+this+non-existant+optimization%20-%2012571002 */

  .hanging-punctuation {
    text-indent: -0.35em;
  }

  i {
    font-family: "garamondIt", prince-no-fallback;
  }
}
@media screen {
  h1 {
    /* margin-top: 2.5rem; */
    font-size: 2.2rem;
    line-height: 125%;

    font-weight: 300;
    font-family: "Montserrat", sans-serif;
    /*  font-family: "Arial", sans-serif; */
    text-align: left;
  }

  h2 {
    /*  font-family: "Arial", sans-serif; */
    font-family: "Montserrat", sans-serif;
    font-size: 1.8rem;
    line-height: 125%;

    font-weight: 450;
  }

  h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.3rem;

    font-weight: 570;
  }
}

/* Used in logo in footer  */
/* This  isn't seen, can't figure out why */

@media screen {
  .logo-footer {
    font-family: "Courier New", Courier, monospace;
    line-height: 1.1rem;
    background-color: #59738d;
    padding: 15px;
    color: white;
    font-weight: 500;
    border: 5px solid #59738d;
  }
}

@media print {
  img {
    display: block;
    margin: 0 auto;
    max-width: 75%;
  }
}

@media screen {
  img {
    display: block;
    margin: 0 auto;
    max-width: 75%;
  }
}

.intro {
  background-color: white;
  /* border-bottom: 5px solid gold; */
  padding-top: 1.1rem;
  /* padding-bottom: 0.8em; */
}

.nav-list {
  font-family: "Montserrat", sans-serif;
  font-size: 0.9rem;
  font-weight: 550;
  margin-top: 0.6rem;
  /* margin-bottom: 2rem; */
  list-style-type: none;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 5px;
  padding-right: 5px;
  border-top: 2.5px solid gold;
  border-bottom: 2.5px solid gold;
  text-transform: uppercase;
}

/* here to prevent extraneous space around the paragraphs, such as in prose */
@media print {
  p {
    margin: 0;
  }

  .prose p {
    text-indent: 15pt;
    text-align: justify;
    hyphens: none;
  }

  .prose > p:first-of-type {
    text-indent: 0;
  }

  .recto {
    break-before: recto;
  }

  .verso {
    break-before: verso;
  }
}