/*                         Additional styles for event posters - HTML5 & CSS3
                           ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
*/
/* ------------------------------------------------------------------------------------------------ variables -- */
/* Dimensions of main container (body or main or article) */
:root {
    --main-top: 0 ;
}
/* Dimensions of chunks (sections, posters &c &c) */
:root {
    --min-width: 47ch ;
    --max-width: min(78ch, calc(100% - var(--menu-width, 2ch))) ;
    --poster-width: clamp(var(--min-width), calc(25% - 24ch), var(--max-width)) ;
    --poster-pad: 5ch ;
    --poster-gap: max(0.4rem, 1%) ;
    --pic-width: 21ch ;
    --pic-left: 3ch ;
}
/* ============================================================================================ Document-wide == */
blockquote, h3, h5, h6, p { font-family: "Trebuchet MS", var(--typeSans) ; }
:is(body, main)>h3 { color: var(--brightDark) ; }
body>h3 { margin: var(--poster-gap) 0 0 0 ; text-align: center ; }
  main>h3 { width: calc(var(--poster-width) / 2) ; margin: 3rem 0 2rem 0 ; text-align: right ; }
    section>h3 { width: 100% ; margin: 0 0 1ex 0 ; text-align: center ; color: var(--mid-dark) ; }

/* ================================================================================================== Divisions */
/* --------------------------------------------------------------------------------- Content areas -- */
main, section { display: flex ; flex-wrap: wrap ; justify-content: space-evenly ; }
  section { width: fit-content ; max-width: 100% ; margin-top: 1rem ; }
  section:not(:last-of-type) { margin-bottom: 1rem ; }

/* ------------------------------- A poster - wherever it is -------- */
.Poster {
    clear: none ;
    width: var(--poster-width) ; height: fit-content ; min-height: 0 ;
    margin: var(--poster-gap) ; padding: 3ex var(--poster-pad) 4ex var(--poster-pad) ; border: solid 2px var(--altMid-dark) ; 
    background: white ; font-size-adjust: 0.48 ;
}
  .Poster section { float: none ; width: auto ; margin: 0 0 2ex 0 ; }

  .Poster h3 { 
      clear: none ; float: none ; 
      width: calc(var(--poster-width) - var(--pic-width) - 2*var(--poster-pad)) ; margin: 0 0 0.5ex 0 ; 
      letter-spacing: 0.2em ; text-align: left ; 
  }
    .Poster h3 cite { color: var(--altDark) ; white-space: normal ; }

  .Poster img { float: right ; width: var(--pic-width) ; height: auto ; margin: 0 0 3ex var(--pic-left) ; }
  .Poster img[src$="jpg"] { border: 1px solid var(--light) ; }

  .Poster h5 { margin: 0 0 3ex 0 ; font-size: 105% ; letter-spacing: 0.1ex ; }
    .Poster h5::first-letter { text-transform: uppercase ; }
  .Poster h6 {
        margin: 3ex 5ch 0 0 ; color: var(--altDark) ;
        font-size: 90% ; font-weight: normal; letter-spacing: 0.2ch ; text-align: right ;
  }
    .Poster h6+h6 { margin-top: 0 ; }

    .Poster a { white-space: nowrap ; }
    .Poster :not(:is(h3, h4, h5)) a { font-size: 110% ; }

    .Poster blockquote::before { content: open-quote ;  }
    .Poster blockquote {
        margin: 0 ; padding: 1ex 7ch 0 7ch ;
        text-indent: -1.6ex ; font-style: normal ; letter-spacing: 0 ; line-height: 110% ;
    }
      .Poster blockquote p { margin: 4ex 0 -2ex 0 ; text-indent: 0 ; }
      .Poster blockquote p:first-child { margin: -2.5ex 0 -2ex 0 ; }
      .Poster blockquote+footer, .Poster blockquote+p.Credit {
        display: block ; margin: 1ex 0 0 0 ; padding: 2ex 7ch 2ex 7ch ;
        line-height: 100% ; text-align: right ;
    }

  .Poster .Times { letter-spacing: 0.1ch ; }

  .Poster .Times::after { content: '  ' ; }

  .Poster .Blurb { display: none ; clear: right ; padding: 0 ; }
    .Poster .Blurb p { width: 100% ; }
  .Poster:first-of-type .Blurb { display: block ; }

  .Poster ul { display: table ; }
  .Poster li { float: left ; min-width: 12ch ; margin-right: 5ch ; }

  .Poster p.Details { margin: 0 ; }

  .Poster button { float: right ; }

/* ============================================================================================================ */