/* IMPORTANT: we use grids in this stylesheet, and they are not
 * recognized by "wkhtmltopdf", so we need to use a more sophisticated
 * rendering tool... */

/* ================== page info ======================== */

/* Needed by chromium headless: */
@page {
  size:                         letter portrait;
  /* margins here affect every printed page; putting them
     in "@media print" seems to consider the entire web
     page as one "page", making the top and bottom margins
     apply only to the first and last physical pages, which
     is rather useless.  */     
  /* Margins for printing */
  margin-left:                  5mm;
  margin-right:                 5mm;
  margin-top:                   5mm;
  margin-bottom:                5mm;
}
body {
  /* chromium needs this; it doesn't respect @page letter portrait above */
  max-width:                    8.1in;
}

@media print {
  div.headline { break-after: avoid;}
}

@font-face {
  src: url('https://www.porcupine.ca/syl-cv/fonts/NotoSerif-Regular.ttf');
  font-family: 'NotoSerif';
}
@font-face {
  src: url('https://www.porcupine.ca/syl-cv/fonts/NotoSerif-Bold.ttf');
  font-family: 'NotoSerifBold';
}
@font-face {
  src: url('https://www.porcupine.ca/syl-cv/fonts/NotoSerif-Black.ttf');
  font-family: 'NotoSerifBlack';
}


body {
  /* DEBUG 
  border-style:                 dotted;
  border-color:                 #FF0000;
  border-width:                 3px;
  */
  font-family:                  'NotoSerif', 'Garamond', serif;
  font-size:                    10pt;
}

/* Make sure borders are inside their elements to avoid their
 * increasing the size of the elements. */
div {
  box-sizing:                   border-box;
}

.pubtitle {
  background-image:             linear-gradient(to bottom right,
                                           rgba(0,0,0,0) /* transparent */,
                                                #A26A42,
                                                #8B4513);
  text-align:                   right;
  padding-right:                0.3em;
  padding-top:                  0;
  padding-bottom:               0;
/*font-family:                  'BakbakOne'; */
  font-family:                  'NotoSerifBlack';
  font-size:                    375%;
  font-style:                   italic;
  line-height:                  130%;
  max-height:                   1.4em;
  height:                       1.4em;
  letter-spacing:               -0.01em;
  -webkit-text-stroke-width:    2px;
  //-webkit-text-fill-color:      rgba(0,0,0,0); /* transparent */
}
.word1 {
  color:                        #F5DEB3;
  padding-right:                0.04em;
}
.word2 {
  color:                        #FFFAF0;
}

.headline, .small_headline {
  width:                        100%;
  font-family:                  'NotoSerifBold';
  font-weight:                  900;
  text-align:                   justify;
  text-align-last:              justify;
  text-justify:                 inter-character;
  padding-left:                 0.1em;
  padding-right:                0.1em;
  padding-bottom:               0.3em;
}

.headline {
  font-size:                    180%;
  padding-top:                  0.4em;
}
.small_headline {
  font-size:                    140%;
  padding-top:                  0.2em;
  column-span:                  all;
}

.columns {
  display:                      grid;
  align-items:                  stretch;
  grid-template-rows:
                    [bodytop]
              auto  [bodymiddle]
              auto  [bodybottom];
  grid-template-columns:
                    [sidebar]
    minmax(0,20fr)  [sidebar gutter]
    minmax(0, 2mm)  [gutter maintext]
    minmax(0,11fr)  [maintext];
  padding:                      0;
  margin:                       0;
  vertical-align:               top;
  text-align:                   left;
}

.maintext, .sidebar, .second_article {
  padding:                      0.3em;
  margin:                       0;
}

.maintext {
  grid-row-start:               bodytop;
  grid-row-end:                 bodybottom;
}

.sidebar {
  grid-row-start:               bodytop;
  grid-row-end:                 bodymiddle;
}

.second_article {
  grid-row-start:               bodymiddle;
  grid-row-end:                 bodybottom;
  column-count:                 2;
  column-gap:                   3%;
}


.maintext {
  grid-column-start:            maintext 1;
  grid-column-end:              maintext 2;
}

.sidebar {
  grid-column-start:            sidebar 1;
  grid-column-end:              sidebar 2;
  column-count:                 2;
  column-gap:                   6%;
  column-rule-style:            solid;
  column-rule-width:            1px;
  column-rule-color:            #B0B0B0;
  text-align:                   left;
  background-color:             #FAEBD7;
  border-style:                 solid;
  border-width:                 1px;
  border-collapse:              collapse;
}

.sidebar_title {
  column-span:                  all;
  text-align:                   center;
  font-size:                    120%;
  font-weight:                  bold;
  margin-bottom:                0.6em;
}

.second_article {
  grid-column-start:            sidebar 1;
  grid-column-end:              sidebar 2;
}

.byline {
  display:                      inline-block;
                                /* sets width to text width, affecting border */
  margin:                       0;
  text-align:                   left;
  border-top-style:             solid;
  border-top-width:             0.05em;
  padding-top:                  0;
  padding-bottom:               1em;
  font-size:                    80%;
/*width:                        65%;*/
}
.author {
  padding-top:                  0.2em;
  padding-bottom:               0.1em;
  color:                        #8B4513;
  font-weight:                  bold;
}

.text {
  text-indent:                  1.7em;
  text-align:                   justify;
  text-justify:                 inter-word;
  line-height:                  1.2;
  padding-bottom:               0.5em;
}

.photo {
  border-style:                 solid;
  border-width:                 1px;
  border-color:                 #000080;
  padding:                      2px;
  margin-top:                   0.3em;
}

figure {
  padding:                      0;
  margin:                       0;
}

figcaption {
  font-size:                    80%;
  font-weight:                  bold;
}

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

.legend {
  font-size:                    80%;
  font-style:                   italic;
  padding-top:                  0.5em;
}

.item {
  display:                      list-item;
  list-style-position:          outside;
  list-style-type:              disc;
/*list-style-image: */
  margin-left:                  1em;
  padding-bottom:               0.6em;
  font-size:                    90%;
}

.when_where {
  color:                        #8B4513;
  font-weight:                  bold;
}
.what {
}
a {
  text-decoration:              none;
  color:                        black;
}
a:hover {
  color:                        #0000FF;
}