proposal.css

/* default pandoc styling */

div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
     
/* FONTS */
@font-face {
    font-family: "gangster";
    src: url(http://bennotkin.github.io/webfontkit-20201028-223227/gangstergrotesk-regular-webfont.woff)
}

@font-face {
font-family:"p22-mackinac-pro";
src:url("https://use.typekit.net/af/a67731/00000000000000003b9adb0a/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff2"),url("https://use.typekit.net/af/a67731/00000000000000003b9adb0a/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("woff"),url("https://use.typekit.net/af/a67731/00000000000000003b9adb0a/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:700;
}

@font-face {
font-family:"p22-mackinac-pro";
src:url("https://use.typekit.net/af/e74f6e/00000000000000003b9adb0b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/e74f6e/00000000000000003b9adb0b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/e74f6e/00000000000000003b9adb0b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:400;
}

@font-face {
font-family:"p22-mackinac-pro";
src:url("https://use.typekit.net/af/ebec64/00000000000000003b9b2b3e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff2"),url("https://use.typekit.net/af/ebec64/00000000000000003b9b2b3e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("woff"),url("https://use.typekit.net/af/ebec64/00000000000000003b9b2b3e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3") format("opentype");
font-display:auto;font-style:italic;font-weight:400;
}

@font-face {
font-family:"p22-mackinac-pro";
src:url("https://use.typekit.net/af/aa781b/00000000000000003b9adb15/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/aa781b/00000000000000003b9adb15/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/aa781b/00000000000000003b9adb15/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
font-display:auto;font-style:normal;font-weight:700;
}

body {

    line-height: 1.3; /* These commented numbers are the original values when h2 was the base size instead of p */
    font-size: 18px;
    font-family: sans-serif;
}
h1, h3 {
    font-family: p22-mackinac-pro, serif;
}
h1 {
/*    letter-spacing: 0.08em;  */
    font-weight: bold; 
    font-size: 3.4em; /* 3 */
    text-align: center;
}


h3 {font-weight: 700;
    font-size: 1.5em;
}

h2 {
    font-family: sans-serif;
    font-size: 1em; /* 1.1 */
    font-weight: 400;
    color: grey;
    letter-spacing: 0.1ch; /* */
    text-transform: capitalize;
    margin-bottom: 0;
    margin-top: 1.25em;
}
p {
    margin: .6em 0; /* 0.5 0 */
    font-family: sans-serif;
    font-size: 1em; /* 0.85 */
    line-height: 1.4;
}
h1+p {
    font-size: 1.3em; /* 1.1 */
    text-align: center
}
h3+p, h4 {font-size: 1.2em; font-weight: 400; margin: .6em 0;} /* 1 */
h1+p, h3+p, h4 {font-family: "gangster", sans-serif}

      
a {
    color: inherit;
    text-decoration: none; border-bottom: 1px dashed black;
}
a:hover{/*font-style: italic;*/ background-color: skyblue;}

span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}

code{white-space: pre-wrap;}

ul {list-style-type: circle;}

ul strong {font-family: p22-mackinac-pro; font-size: 1.05em;}

.minor p {/*color:darkgrey*/; text-align: center; font-size: 0.8em; margin-top: 10em; display: none;}

.image-text {font-size: 0.8em; line-height: 1}
.image-text h4 {font-size: 1.1em; font-weight: 600; margin: 1em 0 0 0;}
.lo-image-right .image-text > *:first-child:after {content: " ⟶"}

/* LAYOUT */

/* Hide metadata */
header#title-block-header {display: none;}

body {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 20vw auto 20vw;
    grid-template-rows: 1fr 4fr 1fr;
    grid-row-gap: 0;
    overflow: hidden;
    margin: 0;
}
/*
 
.union-id {display: none;}
.page-title {display: none;}
.nav {display: none;} 
*/

.union-id {
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    align-self: end ;
    z-index: 0;
    padding-left: 1ch;
}
.page-title {
    grid-column: 1 /span 1;
    grid-row: 1 / span 1;
    z-index: 1;
    padding-left: 1ch;
    display: none;

}
.nav {
    grid-column: 3/ span 1; 
    grid-row: 3 / span 1;
    z-index: 1;
    align-self: end;
    justify-self: end; 
    padding-right: 2ch;
    margin-bottom: .6em;
}


.main {
    max-width: 100vw;
    grid-column: 2 / span 1;
    grid-row: 1 / span 3;
    padding: 2ch; /* */
    display: grid;
/*    grid-template-rows: repeat(100, minmax(100vh, max-content));*/
/*    grid-template-rows: repeat(auto-fill, minmax(100vh, 1fr));*/
/*    grid-auto-rows: minmax(100vh, auto);*/
    grid-row-gap: 10vh;
    /*margin and padding should be the same as the width of body's outer rows*/
    margin-left: -20vw;
    margin-right: -20vw;
    padding-left: 20vw;
    padding-right: 20vw;
    overflow-y: scroll;
/*    background-color: cornsilk;*/
}

.main > * {
/*    height: max-content;*/
    max-width: 78ch;
    min-height: 100vh;
    height: max-content;
    /* padding-left: calc(50vw - 39ch + 2vw);  */
/*    margin: auto;*/
/*    margin-left: -2vw;*/
/*    margin-right: -2vw;*/
    /* padding-right: calc(50vw - 39ch + 2vw);  */
/*
    padding-top: 2em;
    padding-bottom: 2em;
*/
    margin-left: -20vw;
    margin-right: -20vw;
    padding-left: 20vw;
    padding-right: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
/*    background-color: cornsilk;*/
}

/*.main>*:first-child {height: 100vh;}*/
/*.main > *:nth-child(even) {background-color: cornsilk; }*/

/* Alternating background colors */
/*section:nth-of-type(even) {background-color: cornsilk;}*/

.hide {display: none;}
/*.end ~ * {display: none;}*/

/* Image defaults */
img {
    max-width: 100vw;
    width: 100%;
    height: auto;
}
figcaption {display: none;}

/* Master Pages ('lo' for layout)*/       
      
/* full image */
figure {
    max-height: 95vh;
    text-align: center;
    margin: 1em 0;
}
.main > figure > img {
    background-color: transparent;
    width: auto;
    height: 85vh;
    margin-left: -10vw;
    margin-right: -10vw;
    max-width: 90vw;/*margin: auto;*/
}

.floors h2 {display: none;}
.floors h3 {text-align: center; margin: 2em 0;}

/*Right-side image*/
.lo-image-right, .lo-image-left {
/*    margin-left: -10vw;*/
/*    margin-right: -10vw;*/
    max-width: 95vw;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: [first] auto [last];
    grid-template-areas: 
        "text image";
    grid-column-gap: 4ch;
}
/*.lo-image-right h2, */
.lo-image-right * {
    grid-column: 1 / span 3;
}
.lo-image-right figure {
    grid-column: 4 / span 3; 
    grid-row: 1 / span 10;
/*    align-self: center;*/
    align-self: flex-start;
    width: 100%
} 

lo-image-left h2,
.lo-image-left p {
    grid-column: 5 / span 2;
}

.lo-image-left figure {
    grid-column: 1 / span 4; 
    grid-row: 1 / span 10;
    align-self: center;
    width: 100%
} 

.lo-image-wide-top {
    display: grid;
    grid-template-columns: 1fr;
}

.lo-image-wide-top figure {
    grid-row: 3 / span 1;
}

.lo-image-wide-top .image-text {
    grid-row: 4 / span 1;
/*    text-align: end;*/
    margin-top: -2em;
}
.image-2-row p {
    display: grid;
/*    width: ;*/
/*
    flex-direction: row;
    flex-wrap: nowrap;
*/
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 1ch;
    
/*    white-space: nowrap;*/
}

.image-3-row p {
    display: grid;
/*    width: ;*/
/*
    flex-direction: row;
    flex-wrap: nowrap;
*/
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 1ch;
    
/*    white-space: nowrap;*/
}


img {
    background-color: white;
/*
    max-height: 80vh;
    width:auto;
*/
    margin: auto;
}

/*figure {margin: auto;} commented because it shrinks images */

/*

.image-3-row img:nth-of-type(1) {
    grid-column: 1 / 2;
}

.image-3-row img:nth-of-type(2) {
    grid-column: 2 / 3;
}

.image-3-row img:nth-of-type(3) {
    grid-column: 3 / 4;
}
*/

/*.image-3-row p {display: none;}*/

/* Inputs */
input {margin: 1em inherit;}
input[type="text"], input[type="email"], textarea, button, label span {
    font-family: sans-serif;  
    font-size: 1em; /* */
    margin-top: 1em;
}

input[type="text"], input[type="email"], textarea, button {
/*  width: 100%;*/
  border: 1px solid black;
  padding: .5ch;
}

/*input + p {background-color: cornsilk}*/

button[type=submit] {
  background-color: white;
  border: 1px solid black;
  margin-top: 1em;
  cursor: pointer;
}

label {
  display: block;
  white-space: nowrap;
  margin-top: .83em;
}

label input {
  vertical-align: middle;
}

.nav > p, .nav > label {text-align: end; margin: 0;}
.nav > label {font-size: 1.2em;}

#toc-expander ~ ol, #toc-expander ~ ul, #toc-expander ~ span  {display:none;}
#toc-expander:checked ~ ul, #toc-expander:checked ~ ol {display:block; float:left; position: relative;}
input[type=checkbox] {display:none;}

.nav ul, .nav ol {
    font-size: 0.9em;
    background-color: rgba(255,255,255,0.7)}

.nav ul ul, .nav ol ol {font-size: 1em;}

.nav a {border-bottom: none;}

/* Extra elements for CSS generating content – gives freedom when working with html-from-markdown */ 
/* Currently have 6 fodder divs to work with: fodder1–fodder6 */
div.fodder {display: none}


/*
.high-level::before {
    align-self: center;
    justify-self: center;
    content: "";
    width: 85ch;
    min-height: 90ch;
    grid-row: 2 / span 1;
    background-color: blue;
    opacity: 30%;
    position: absolute;
    margin-top: -45vh;
    padding: 50%;
    
    z-index: 1;
}
*/

/*section:nth-of-type(even) {background-color: cornsilk; margin-left: -10ch; margin-right: -10ch; padding-left: 10ch; padding-right: 10ch;}*/

@media screen and /*(max-aspect-ratio: 5/6)*/ (max-width: 600px) {
  body {
/*    margin: 1ch;*/
      font-size: 12px; /* 24px */
  }
    .union-id {display: none;}
    .nav label {font-size: 3em;}
/*
    .main {
        grid-column: 1 / span 3;
 }
*/
    body {
            grid-template-columns: 4vw auto 4vw;

    }
/*
 .intro {padding: 1ch; font-size: 1em; }
    div.definitions div:nth-of-type(even) {background-color: cornsilk; margin-left: -1ch; margin-right: -1ch; padding: 0.25em 1ch }
    div h3 {margin-top: 0.5em;}
*/
}

   @media print {
       body {
           font-size:18px;
           grid-template-rows: repeat(10, 7in);

       }

       body > * {
           display: block;

       }
       section {
           break-after: page;
           page-break-after: always;
       }
       h2, h3 {break-after: avoid-page;}
       
    }