/* ------------------------------------
   Print layout
   Linked with media="print", so no @media wrapper here. Switching
   that attribute to "all" previews this on screen.
   Load after styles.css — these rules win on source order.
------------------------------------ */

@page {
  margin: 1.8cm;
}

/* Point sizes, since the output is physical. */
:root {
  --fontSize: 10pt;
  --fontSizeSmall: 7pt;
  --lineHeight: 12pt;
}

/* Backgrounds are dropped by the browser when printing, so any
   light-on-dark text would come out pale grey on white. */
body,
.item1,
.li-more,
.entry,
.entry.open {
  background: none;
  color: black;
}

.lightLink,
.li-more,
.my-link,
.title {
  color: black;
}

/* Saxmono has one weight, so bold is faked by drawing each glyph
   several times, offset sideways. Screen hides it in antialiasing;
   a PDF shows the copies. */
*,
*::before,
*::after {
  font-synthesis: none;
}

h1, h2, h3,
.lightLink,
.my-link {
  font-weight: normal;
}

/* Matches an open section's bar. Only visible in the ?print preview —
   paper drops backgrounds unless print-color-adjust says otherwise. */
.grid-container.pinned .item1 {
  background-color: var(--yellow);
}

div.grid-container {
  grid-template-columns: 6em 1fr;
  grid-template-areas: 'a b';
  gap: 6px;
/*  break-inside: avoid;*/
  display: block;
  clear: both;
}

.item1 h1,
.item1 h2 {
  position: static;
}

.item1 {
  display: block;
/*  position: static;*/
/*  width: 8em;*/
  padding: 0.8em;
  float: left;
/*  width: 6em;*/
/*  padding: 0;*/
  width: 100%;
  margin: 6px 0;
  
}

.lightLink {
  padding: 0;
  line-height: 1.2;
}

.item2 {
/*  margin-left: 2em;*/
  padding: 0;
}

/* No left indent anywhere: year, description and the About
   paragraphs all start at the content column's edge. */
.li-more {
  padding: 0;
  line-height: 1.3;
}

p {
  padding: 0;
}

/* Everything open — nothing can be clicked on paper. */
.collapsible.collapsed .item2 {
  grid-template-rows: 1fr;
  padding: 0;
}

.collapsible.collapsed .item2 > * {
  visibility: visible;
}

.entry {
  grid-template-rows: auto auto;
}

/* Clipping only exists to make the collapse animation work. Nothing
   collapses on paper, and a clipped box that fragments across pages
   can get its contents painted more than once. */
.li-more,
.collapsible .item2 > *,
.entry {
  overflow: visible;
}

.entry:not(.open) .li-more,
.entry.open .li-more {
  visibility: visible;
  padding-top: var(--panelGap);
  padding-bottom: var(--panelGap);
}

.title {
  position: static;
  margin-top: 0;
  padding-left: 0;
}

/* Drawn with a background, which print drops — so it would reserve
   its space and show nothing. */
.title::before {
  display: none;
}

.mask-container,
footer {
  display: none;
}


/* The triangle was doing the separating on screen; on paper the
   rows need real space between them. */
li.entry {
  break-inside: avoid;
  padding-top: 0;
  margin-bottom: 0.5em;
}

/* Same treatment for Contact, so the two match on paper too. */
.grid-container.pinned .item2 li {
  padding-top: 0;
  margin-bottom: 0.5em;
}

.item1 h1,
.item1 h2 {
  position: sticky;
  top: var(--backLink);
}

.collapsible .item2,
.entry {
  display: block;
}

.dscrptn::after {
  content: "*";
}

@media print {
  .item1,
  .item1 h1,
  .item1 h2 {
    position: static;
  }
}