@font-face {
    font-family: 'Aluminia';
    src: url('../fonts/lfaaluminia-roman.woff2') format('woff2'),
         url('../fonts/lfaaluminia-roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aluminia';
    src: url('../fonts/lfaaluminia-italic.woff2') format('woff2'),
         url('../fonts/lfaaluminia-italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/BrandonGrotesque-Regular.woff2') format('woff2'),
         url('../fonts/BrandonGrotesque-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/BrandonGrotesque-RegularItalic.woff2') format('woff2'),
         url('../fonts/BrandonGrotesque-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Brandon Grotesque';
    src: url('../fonts/BrandonGrotesque-Bold.woff2') format('woff2'),
         url('../fonts/BrandonGrotesque-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Basic */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #fff;
	}

	body, input, select, textarea {
		color: #000000;
    font-family: Aluminia, Constantia, serif;
		font-size: 25.5px;
		font-weight: 400;
		line-height: 1.7em;
	}

	a {
		transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
		border-bottom: dotted 1px;
		color: #000000;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
			color: #f40c36 !important;
			text-decoration: none;
		}

    ::selection {
      color: #000000;
      background: #08fcf5;
    }

	strong, b {
		font-weight: 700;
	}

	em, i, cite {
		font-style: italic;
	}

	p {
    font-size: 1em;
    line-height: 1.5em;
    text-indent: 1.5em;
    margin: 0;
	}

  p.space {
   margin-top: 1.2em;
  }

  p.first {
    text-indent: 0;
    margin-top: 3em;
  }

  p.noindent {
  	text-indent: 0;
  }

  p.noindentspace {
    text-indent: 0;
    margin-top: 1.2em;
  } /* a space, but still part of previous portion of text */

  p.noindentspacebelow {
    text-indent: 0;
    margin-bottom: 1.7em;
  }  /*  only used in AMoW  */

  p.byline {
  font-family: "Brandon Grotesque", sans-serif;
	font-size: 1.3em;
  line-height: 1.5em;
  margin-top: -0.6em;
	font-style: italic;
	text-indent: 0;
	text-align: center;
}

  p.epigraphleft {
    font-size: 1.1em;
    line-height: 1.4em;
    text-indent: 0;
    margin: 2em 0 0.3em 0;
    color: #6c5f4f;
    text-align: left;
  }

  p.epigraphright {
    font-size: 1.1em;
    line-height: 1.4em;
    text-indent: 0;
    color: #6c5f4f;
    text-align: right;
  }

  p.epigraphcenter {
    font-size: 1.1em;
    line-height: 1.4em;
    text-indent: 0;
    margin: 2em 0 0.3em 0;
    color: #6c5f4f;
    text-align: center;
  }

  p.epigraphcentercite {
    font-size: 1.1em;
    line-height: 1.4em;
    text-indent: 0;
    color: #6c5f4f;
    text-align: center;
  }

  p.epigraphpoem, p.epigraphpoemfirstline {
    font-size: 1em;
    line-height: 1.3em;
  	text-align: left;
  	text-indent: -1em;
    margin-left: 1em;
    color: #6c5f4f;
  }

  p.epigraphpoemfirstline {
    margin-top: 2em;
  }

  p.epigraphpoemcite {
    font-size: 1em;
    line-height: 1.3em;
    text-indent: 0;
    color: #6c5f4f;
    text-align: center;
    margin-top: 0.6em;
  }

  p.epigraphpoemcite a {
    color: #6c5f4f;
  }

  p.poemspace, p.poem {
    text-indent: -1em;
    margin-left: 2.5em;
  }

  p.poemspace {
    margin-top: 1.2em;
  }

  /* ----- New poetry, Curlew ----- */

  div.poem {
      margin-top: 1em;
      margin-bottom: 1em;
      margin-left: 1.5em;
  }

  div.stanza {
      margin-top: 1em;
      margin-bottom: 1em;
  	  page-break-inside: avoid;
  }

  p.line {
      text-align: left;
      text-indent: -1.5em;
      margin-left: 1.5em;
  }

  /* ------------------ */

  br.responsive {
    display: none; /* Hide br tag for wider screens */
  }

	h1, h2, h3, h4, h5, h6 {
    font-family: "Brandon Grotesque", Carlito, Calibri, Corbel, sans-serif;
		font-weight: normal;
		line-height: 1em;
		margin: 0.8em 0 0.5em 0;
    text-align: center;
    text-indent: 0;
	}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}

	h1 {
		font-size: 2em;
		line-height: 1.5em;
	}

	h2 {
		font-size: 1.6em;
		line-height: 1.5em;
	}

	h3 {
		font-size: 1.5em;
		line-height: 1.5em;
	}

	h4 {
		font-size: 1.4em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 1.3em;
		line-height: 1.5em;
    font-style: italic;
	}

	h6 {
		font-size: 1.2em;
		line-height: 1.5em;
	}

  /* Better to use Unicode characters for proper font versions of small type, which also doesn't mess up line spacing */

	sub {
		font-size: 0.65em;
		position: relative;
		top: 0.4em;
	}

	sup {
		font-size: 0.65em;
		position: relative;
		top: -0.5em;
	}

	hr {
		border: 0;
		border-bottom: 1px solid #D7D6E1;
		margin: 2em 0;
	}

  hr.transition {
    margin: 1.5em 40% 1.5em 40%;
    border: 0;
    border-bottom: 1px solid darksalmon;
  }

	blockquote {
    font-size: 0.89em;
    line-height: 1.7em;
		border-left: solid 6px #c2aaf6;
    background-color: #eee7f6;
		margin: 1em 0 1em 0;
    padding: 1em 1em 0.8em 1.4em;
	}

  p.blockquote {
  	text-indent: 1em;
  	}

  p.blocknoindent {
  	text-indent: 0;
  	}

  p.blockflushright {
  	text-align: right;
  	text-indent: 0;
    margin-top: 0.5em; /* margin because used for quote attribution */
  	}

   .extract {
      font-size: 0.9em;
      line-height: 1.7em;
      text-indent: 0;
      border: solid 2px #b510c3;
      border-radius: 20px;
      background-color: #ebdcfb;
      margin: 0.5em 0 0.5em 0;
      padding: 1em;
    } /* rounded audio description box */

    .pageref  {
      color: #b510c3;
    } /* span class audio page */

    audio  {
      display: block;
      margin-bottom: 0.7em;
    }  /*  better than using br tag, and can 'display: none' for print without extra space from br tag */

    audio::-webkit-media-controls-panel {
      background-color: darksalmon;
    } /* Just affects Chromium browsers, so not white player on white page */

    audio::-webkit-media-controls-play-button {
      background-color: coral;
      border-radius: 50%;
    }

    audio::-webkit-media-controls-play-button:hover {
      background-color: red;
    }

    audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display {
      /* font-weight: bold; */
      color: white;
    }

	.align-left {
		text-align: left;
    text-indent: 0;
	}

	.align-center {
		text-align: center;
    text-indent: 0;
	}

	.align-right {
		text-align: right;
	}

  .footer {
  	text-align: center;
    text-indent: 0;
  	font-size: 0.95em;
  	line-height: 1.2em;
  	border-top: 1px solid #D7D6E1;
  	margin-top: 10em;
    padding-top: 1em;
  }

	header.major h2 {
		font-size: 2.5em;
    line-height: 1.3em;
    font-weight: bold;
    margin-top: 0;
	}

/* Image */

	.image {
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			display: block;
		}

		.image.left {
			float: left;
      margin: 0.1em 1em 0.5em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
      margin: 0.1em 0 0.5em 1em;
			top: 0.25em;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.fit {
			display: block;
			margin: 0 0 1.5em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

/* Circular or elliptical mast image used in #header below */

		.image.mast {
			border-radius: 100%;
		}

			.image.mast:before {
				display: none;
			}

			.image.mast img {
				border-radius: 100%;
				width: 100%;
			}

/* SVG https://change-svg-color.vercel.app/ */

.filter-pressmark {
  filter: invert(9%) sepia(100%) saturate(7056%) hue-rotate(347deg) brightness(111%) contrast(91%);
} /*  currently red */

/* List */

	ol {
		list-style: decimal;
		margin: 1em 0 1em 0;
		padding-left: 2.5em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0.7em 0 1em 0;
		padding-left: 2.5em;
	}

		ul li {
			padding-left: 0.25em;
		}

/* Definition list for links collection */

	dl {
		margin: 1em 0 1em 0;
	}

  dt {
  	display: inline;
    font-style: italic;
    font-weight: 700;
  }

  dd {
  	text-align: left;
  	border-left: 5px solid #c2aaf6;
  	margin-left: 1em;
  	padding-left: 0.7em;
  	margin-right: 0;
  }

  dt a:hover	{
  	border-bottom: 5px solid #c2aaf6;
    transition-property: none;
  }

/* Header */

	#header {
		background-color: #000;
		color: rgba(255, 255, 255, 0.5);
		height: 100%;
		left: 0;
		padding: 6.6em 3em;
		position: fixed;
		text-align: center;
		top: 0;
		width: 35%;
	}

		#header strong, #header b {
			color: #ffffff;
		}

		#header h2, #header h3, #header h4, #header h5, #header h6 {
			color: #ffffff;
		}

		#header h1 {
			color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
			font-size: 1.2em;
			line-height: 1.3em;
			margin: 0 0 0.7em 0;
		}

    #header h1 a, h2 a {
      border-bottom-color: transparent;
      color: darksalmon;
    }

    #header h2 {
			color: rgba(255, 255, 255, 0.5); /* white with 50% opacity */
			font-size: 1em;
			line-height: 1.5em;
      margin: 0.2em 0 0 0;
		}

		#header .image.mast {
			margin: 0 0 0.5em 0;
			width: 6.2em;
    }

/* Main */

	#main {
		margin-left: 35%;
		max-width: 38.6em;  /* was 46em like main.css, but this is wider because larger font size */
		padding: 6.5em 4em 4em 3.3em; /* was 7em 4em 4em 4em */
		width: calc(100% - 35%);
	}

/* Large */

	@media screen and (max-width: 1280px) {

		/* Header */

			#header {
				padding: 4.9em 2.5em;
				width: 30%;
			}

		/* Main */

			#main {
				margin-left: 30%;
				max-width: 32.7em;  /* was 39em */
				padding: 5em 3em 3em 3em;
				width: calc(100% - 30%);
			}

	}

/* Medium */

	@media screen and (max-width: 980px) {

		/* Basic */

      header.major h2 {
				font-size: 2em;
			}

		/* Header */

			#header {
				left: auto;
				padding: 2.3em 4em;
				position: relative; /* needed */
				text-align: center;
				top: auto;
				width: 100%;
				display: block;
			}

		/* Main */

			#main {
				margin: 0;
				padding: 3.2em 3em 3em 3em;
        width: 100%;
        max-width: none;
			}

	}

/* Small */

	@media screen and (max-width: 736px) {

		/* Basic */

			h1 {
				font-size: 1.5em;
			}

			h2 {
				font-size: 1.35em;
			}

			h3 {
				font-size: 1.3em;
			}

      h4 {
				font-size: 1.2em;
			}

      h5 {
				font-size: 1.1em;
			}

      h6 {
        font-size: 1em;
      }

			header.major h2 {
				font-size: 1.7em;  /* third size */
			}

      p.byline {
      font-size: 1.1em;
      line-height: 1.5em;
    }

		/* Header */

			#header {
				padding: 2em 1.5em;
			}

		/* Main */

			#main {
				padding: 2.4em 2em 2.5em 2em;
			}

	}

/* XSmall */

	@media screen and (max-width: 480px) {

			#header {
				padding: 2em 1.5em;
			}

      #main {
        padding: 2.2em 0.8em 2.5em 0.8em;
      }

      p {
        text-indent: 1em;
      }

      p.poemspace, p.poem {
        text-indent: -1em;
        margin-left: 2em;
      }

      div.poem {
        margin-left: 1em;
      }

      br.responsive {
        display: inline; /* Show br tag for narrow screens */
      }

      p, ol, ul, dl {
        font-size: 0.85em;
        line-height: 1.3em;
      }

      p.epigraphleft, p.epigraphright {
        font-size: 0.92em;
        line-height: 1.3em;
      }

      p.epigraphcenter, p.epigraphcentercite {
        font-size: 0.92em;
        line-height: 1.3em;
      }

      p.epigraphpoem, p.epigraphpoemcite, p.epigraphpoemfirstline {
        font-size: 0.8em;
        line-height: 1.25em;
      }

        p.byline {
        font-size: 1.1em;
        line-height: 1.5em;
      }

      hr.transition {
        margin: 0.9em 40% 0.9em 40%;
      }

      blockquote  {
        font-size: 0.85em;
        line-height: 1.5em;
      }

      .extract  {
        font-size: 0.8em;
        line-height: 1.5em;
      }

      audio {
        width: 100%;
      }

	}

  /* Print styles */

  @media print {

    p, ol, ul  {
      font-size: 13pt;
      line-height: 17pt;
    }

    dl  {
      font-size: 11pt;
      line-height: 17pt;
    }

    blockquote {
      border-left: solid 5pt #ccc;
      background-color: #fff;
      margin: 0.8em 0 0.8em 0;
      padding: 0.2em 0.2em 0.2em 1em;
    }

    p.blockquote {
      font-size: 11pt;
      line-height: 15pt;
      text-indent: 1em;
      }

    p.blocknoindent {
      font-size: 11pt;
      line-height: 15pt;
      text-indent: 0;
      }

    p.blockflushright {
      font-size: 11pt;
      line-height: 15pt;
      text-align: right;
      text-indent: 0;
      margin-top: 0.5em;
      }

      .extract {
         font-size: 11pt;
         line-height: 15pt;
         text-indent: 0;
         border: solid 1pt #ccc;
         background-color: #fff;
         margin: 0.5em 0 0.5em 0;
         padding: 1em;
       }

       .pageref  {
         color: #000;
       } /* span class audio page */

       p.epigraphleft, p.epigraphright {
         font-size: 14pt;
         line-height: 18pt;
         color: #000;
       }

       p.epigraphcenter, p.epigraphcentercite {
         font-size: 14pt;
         line-height: 18pt;
         color: #000;
       }

       p.epigraphpoem, p.epigraphpoemcite, p.epigraphpoemfirstline {
         font-size: 13pt;
         line-height: 17pt;
         color: #000;
       }

       p.epigraphpoemcite a {
         color: #000;
       }

       p.byline {
        font-size: 16pt;
        line-height: 18pt;
        font-style: italic;
        text-indent: 0;
        text-align: center;
       }

    hr {
      border: 0;
      border-bottom: 1pt solid #ccc;
      margin: 2em 0;
    }

    hr.transition {
      border-bottom: 1pt solid #ccc;
      margin: 0.9em 40% 0.9em 40%;
    }

    h1  {
      font-size: 24pt;
    }

    h2 {
      font-size: 22pt;
    }

    h3 {
      font-size: 20pt;
    }

    h4 {
      font-size: 18pt;
    }

    h5 {
      font-size: 16pt;
    }

    h6 {
      font-size: 14pt;
    }

    header.major h2 {
      font-size: 32pt;
      padding-top: 0;
    }

    #header strong, #header b {
      color: #000;
    }

  #header {
    display: none;
  }

  #main {
    margin: 0;
    padding: 1em 4em;
    width: 100%;
    max-width: none;
  }

  #header h1 {
    font-size: 24pt;
    color: #000;
  }

  #header h1 a, h2 a {
    color: #000;
  }

  #header h2 {
    font-size: 22pt;
    color: #000;
  }

  .footer {
    text-align: center;
    text-indent: 0;
    font-size: 11pt;
    line-height: 14pt;
    border-top: 1pt solid #ccc;
    margin-top: 3em;
    padding-top: 1em;
  }

  .filter-pressmark {
    filter: none;
    }  /* so SVG Coronzon pressmark prints its natural black */

    audio {
      display: none;
    }

}