/*	--------------------------------------------------
Type
-------------------------------------------------- */

@font-face {
    font-family: 'NoticiaTextRegular';
    src: url('../type/NoticiaText-Regular-webfont.woff') format('woff'),
         url('../type/NoticiaText-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NoticiaTextItalic';
    src: url('../type/NoticiaText-Italic-webfont.woff') format('woff'),
         url('../type/NoticiaText-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NoticiaTextBold';
    src: url('../type/NoticiaText-Bold-webfont.woff') format('woff'),
         url('../type/NoticiaText-Bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NoticiaTextBoldItalic';
    src: url('../type/NoticiaText-BoldItalic-webfont.woff') format('woff'),
         url('../type/NoticiaText-BoldItalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'verbcondregular';
    src: url('../type/VerbCondRegular-webfont.woff2') format('woff2'),
         url('../type/VerbCondRegular-webfont.woff') format('woff'),
         url('../type/VerbCondRegular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'verbcondregular_italic';
    src: url('../type/VerbCondRegular-Italic-webfont.woff2') format('woff2'),
         url('../type/VerbCondRegular-Italic-webfont.woff') format('woff'),
         url('../type/VerbCondRegular-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

/*	--------------------------------------------------
Base
-------------------------------------------------- */

html, body {
  height: 100%; 
  width: 1210px;
  margin: 0 auto;
  font:14px/1.6 'NoticiaTextRegular', serif;
  -webkit-font-smoothing: antialiased;}

.sidebar {text-align: center;}

.sidebar p {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 1em; 
  margin-top: 1em}

a, a:visited { color: #000000; text-decoration: none; }
/* The focus ring is for keyboard users: :focus-visible leaves it off for
   mouse clicks and taps, and the tap flash is switched off to match. */
a, area { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
area:focus:not(:focus-visible) { outline: none; }
a:visited { color: #000000 }

.sidebar a::before,
.sidebar a::after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
}

.sidebar a::before {
    margin-right: 10px;
    content: '[';
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
}

.sidebar a::after {
    margin-left: 10px;
    content: ']';
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.sidebar a:hover::before,
.sidebar a:hover::after,
.sidebar a:focus::before,
.sidebar a:focus::after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
}

.content {font:14px/1.6 'verbcondregular', serif;
  -webkit-font-smoothing: antialiased;}

.content em {font:14px/1.6 'verbcondregular_italic', serif;
  -webkit-font-smoothing: antialiased;}

.standard {text-align:justify;text-justify:inter-word;margin-right: 2em;}

.dagger {font-size:36px;margin-bottom:2em;margin-top:2em;}

.bio {text-align:justify;text-justify:inter-word;margin-right: 1em;margin-top: 10em; margin-bottom: 0; vertical-align: bottom;}

.attribution {
   height: 694px;
   display: table-cell;
   vertical-align: bottom;}

.attrTITLE {
   font-size: 20px; 
   font-weight: bold; 
   line-height: 20px; 
   margin-bottom: 1px;}

.attrAUTHOR {
   font-size: 16px; 
   line-height: 14px;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	
h1 { font-size: 40px; line-height: 38px; margin-bottom: 8px; }
h2 { font-size: 35px; line-height: 38px; margin-bottom: 8px; }
h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h5 { font-size: 17px; line-height: 24px; }
h6 { font-size: 14px; line-height: 21px; }

p { margin: 0 0 20px 0;}

em { font-style: italic; }
strong { font-weight: bold;}
small { font-size: 80%; }

.content a { color: #444444; text-decoration: none; }




/* --------------------------------------------------
Container
-------------------------------------------------- */
div#container, div.container { position: relative; width: 1580px; margin: 0 auto; padding: 0; }
 
 
/* --------------------------------------------------
Grid
-------------------------------------------------- */
.column-row, .row { margin: 0 0 18px -20px; }
.column, .columns { float: left; display: inline; margin: 0 0 0 20px; }
 
.one { width: 180px; }
.two { width: 380px; }
.three { width: 580px; }
.four { width: 780px; }
.five { width: 980px; }
.six { width: 1180px; }
.seven { width: 1380px; }
.eight { width: 1580px; }
 
.offset-by-one-half { margin-left: 100px; }
.offset-by-one { margin-left: 200px; }
.offset-by-two { margin-left: 400px; }
.offset-by-three { margin-left: 600px; }
.offset-by-four { margin-left: 800px; }
.offset-by-five { margin-left: 1000px; }
.offset-by-six { margin-left: 1200px; }
 
/* Clear the columns automagically, thanks @kneath */
.column-row:after, .row:after, .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.column-row, .row, .clearfix { display: inline-block; }
.column-row, .row, .clearfix { display: block; }
/* Layout Utilities
   ========================================================================== */

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

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

.lowercase {
  text-transform: lowercase;
}

/* Container variants */
.container-padded {
  padding-top: 20px;
}

.container-index {
  padding-top: 20px;
  margin-bottom: 0;
  height: 900px;
}

/* Logo container */
.logo-container {
  position: relative;
  height: 180px;
}

/* Spacer classes to replace invisible hr elements */
.spacer-10 {
  display: block;
  height: 10pt;
}

.spacer-15 {
  display: block;
  height: 15pt;
}

.spacer-20 {
  display: inline-block;
  height: 20pt;
}

.spacer-100 {
  display: block;
  height: 100pt;
}

/* Margin utilities */
.top-10 {
  margin-top: 10px;
}

.top-25 {
  margin-top: 25px;
}

/* Empty cell placeholder */
.empty-cell {
  min-width: 1px;
}

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

.align-bottom {
  vertical-align: text-bottom;
}

.spacer-160 {
  display: block;
  height: 160pt;
}

/* Responsive
   ==========================================================================
   Nothing in this section applies at desktop widths (1251px and up), where
   the fixed 1210px design is untouched. Below that the reading pane joins
   normal document flow (jScrollPane is gated in js/scroll-pane.js). Tablets
   keep the three-part arrangement with the sidebar and attribution pinned
   while the text scrolls; phones stack everything into one column.
   (The index poster carries its own responsive rules inline.) */
@media (max-width: 1250px) {
  html, body {
    width: auto;
    height: auto;
  }

  body {
    padding: 0 24px 48px;
  }

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

  .row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-left: 0;
  }

  .row::after {
    display: none; /* clearfix pseudo-element would become a flex item */
  }

  .column {
    float: none;
    display: block;
    margin-left: 0;
  }

  /* The empty outer columns only centre the desktop layout */
  .row > .one.column:not(.sidebar):not(:has(*)) {
    display: none;
  }

  .sidebar {
    flex: none;
    position: sticky;
    top: 24px;
    align-self: flex-start;
  }

  /* The index link on the lower cross is an unscaled image map */
  .sidebar img[usemap] {
    max-width: none;
  }

  .scroll-pane.content {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 780px;
    height: auto !important;
    overflow: visible !important;
    overflow-wrap: break-word;
  }

  .row > .one.column:has(.attribution) {
    flex: none;
    position: sticky;
    bottom: 24px;
    align-self: flex-end;
  }

  .attribution {
    display: block;
    height: auto;
  }

  .standard,
  .bio,
  .content p[style*="justify"] {
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Verse (paragraphs broken with <br>) is only nominally justified on
     desktop, since every line ends in a forced break, so wrapped verse lines
     stay ragged and unhyphenated. */
  .content p:has(br):not(.bio) {
    text-align: left !important;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* Small tablets and phones: one column. The sidebar's parts are re-ordered
   around the text: links, attribution, text, then the index cross. The
   sidebar's upper rule is dropped: without the sidebar it reads as a stray
   line above the page. */
@media (max-width: 900px) {
  .row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .sidebar {
    display: contents;
  }

  .sidebar img {
    align-self: center;
  }

  .sidebar img:not([usemap]) {
    display: none;
  }

  .sidebar p {
    order: 1;
    margin: 0 0 28px;
  }

  .sidebar p br {
    display: none;
  }

  .sidebar p a {
    display: inline-block;
    padding: 6px 0;
  }

  .row > .one.column:has(.attribution) {
    order: 2;
    position: static;
    align-self: center;
    width: 100%;
    max-width: 780px;
    margin-bottom: 36px;
  }

  .scroll-pane.content {
    order: 3;
    flex: none;
    align-self: center;
    width: 100%;
  }

  .sidebar img[usemap] {
    order: 4;
    margin-top: 48px;
  }

  .standard,
  .bio {
    margin-right: 0;
  }
}

/* Phones */
@media (max-width: 740px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sidebar p {
    font-size: 18px;
  }

  /* The condensed text face needs a larger size on small screens */
  .content,
  .content em {
    font-size: 16px;
  }

  .attrTITLE {
    font-size: 24px;
    line-height: 1.15;
  }

  .attrAUTHOR {
    line-height: 1.6;
  }

  /* Stepped, art-directed indents are compressed but keep their order */
  .content p[style*="margin-left:3em"],
  .content p[style*="margin-left:4em"] {
    margin-left: 1.5em !important;
  }

  .content p[style*="margin-left:5em"],
  .content p[style*="margin-left:6em"] {
    margin-left: 2.5em !important;
  }

  .content p[style*="margin-left:7em"],
  .content p[style*="margin-left:8em"] {
    margin-left: 3.5em !important;
  }

  .content p[style*="margin-left:10em"],
  .content p[style*="margin-left:11em"],
  .content p[style*="margin-left:12em"] {
    margin-left: 5em !important;
  }

  .content p[style*="margin-left:14em"] {
    margin-left: 6em !important;
  }

  .content p[style*="margin-left:17em"],
  .content p[style*="margin-left:18em"] {
    margin-left: 7em !important;
  }

  .content p[style*="margin-left:20em"],
  .content p[style*="margin-left:23em"] {
    margin-left: 8em !important;
  }

  .content p[style*="margin-left:28em"] {
    margin-left: 9.5em !important;
  }

  .content p[style*="margin-left:33em"] {
    margin-left: 11em !important;
  }

  .content p[style*="margin-right:20em"] {
    margin-right: 4em !important;
  }

  /* Verse lines that must wrap get a hanging indent where supported */
  @supports (text-indent: -1.5em each-line) {
    .content p:has(br):not(.bio) {
      padding-left: 1.5em;
      text-indent: -1.5em each-line;
    }
  }
}

/* Accessibility - Skip Link
   ========================================================================== */
.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 9999;
  padding: 0.5em 1em;
  background: #000;
  color: #fff;
  text-decoration: none;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
}

/* Screen reader only - visually hidden but accessible
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}