/*****************/
/* MAIN → HEADER */
/*****************/

main > header {
  position: relative;
  grid-column:full;

  display:grid;
  grid-template-columns:inherit;
}





/**************/
/* PAGE TITLE */
/**************/

main > header h1 {
  grid-column:large;

  margin:0 0 calc(var(--gap) * 1.5);
  padding:0 0 .15em;

  font-size:clamp(2em, 11vw, 6em);
  
  line-height:calc(1 * (1 + var(--setting--whitespace) * .05 ));
  color:var(--clr-h1);
  font-variant-numeric: oldstyle-nums;

  display:grid;
  justify-items:start;
}

/* page title - strong/span */
h1 > * {
  position: relative;
  
  min-height:calc(.75em * (1 + var(--setting--whitespace) * .05 ));
  min-width:calc(var(--gap) * 3);
  padding:0 var(--gap);

  display:block;

  font-weight:300;
}

:root[data-font-family="Dyslexie"] h1 > * {
  font-weight:700;
}

:root[data-font-family="OpenDyslexic"] h1 > * {
  font-weight:700;
}

/* page title - strong/span - background */
h1 > *::after {
  content:"";
  position:absolute;
  
  top:0;
  bottom:-.15em;
  left:0;
  right:0;

  background-color:var(--bg-h1);
  z-index:-1;
  line-height:inherit;
}

/* page title - strong */
h1 > strong {
  z-index:1;
  padding:.1em var(--gap);
  box-sizing:content-box;
  vertical-align: text-bottom;

  color:var(--clr-h1__strong);
}

/* page title - strong - background */
h1 > strong::after {
  background-color:var(--bg-h1__strong);
}

/* page title - strong - handles */
h1 > strong > span {
  --size-h1-handle:max(.5rem, .12em);

  position:absolute;
  width:var(--size-h1-handle);
  height:var(--size-h1-handle);
  background-color:var(--bg-h1__handle);
  border:solid calc(var(--size-h1-handle) * .15) var(--brdr-h1__handle);
  border-radius:25%;
}

h1 > strong > span:nth-of-type(1) {
  top:calc( var( --size-h1-handle) * -.5 );
  left:calc( var( --size-h1-handle) * -.5 );
}

h1 > strong > span:nth-of-type(2) {
  top:calc( var( --size-h1-handle) * -.5 );;
  right:calc( var( --size-h1-handle) * -.5 );;
}

h1 > strong > span:nth-of-type(3) {
  bottom:calc( var( --size-h1-handle) * -.5 - .15em);;
  left:calc( var( --size-h1-handle) * -.5 );;
}

h1 > strong > span:nth-of-type(4) {
  bottom:calc( var( --size-h1-handle) * -.5 - .15em);;
  right:calc( var( --size-h1-handle) * -.5 );;
}

/* page title - print */
@media only print {
  h1 > * {
    display:inline;
    background:none;
    min-height:0;
    min-width:0;
    padding:0;
  }

  h1 > *:empty {
    display:none;
  }

  h1 > *::after {
    display:none;
  }

  h1 > strong {
    background:none;
    color:var(--clr--root);
    padding:0;
    vertical-align: initial;
  }

  h1 > strong::after {
    display:none;
  }

  h1 > strong > span {
    display:none;
  }
}





/**************/
/* INTRO TEXT */
/**************/

main > header > p {
  grid-column:inset;
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0 1.2em, 
      var(--bg-root) 0 1.3em
    ), 
    repeating-linear-gradient(
      135deg,
      transparent 0 .3em, 
      var(--bg-root) 0 .4em
    ), 
    linear-gradient(
      155deg,
      var(--bg-p--header),
      transparent
    );

  min-height:8em;
  padding:var(--gap);
  margin:0 0 calc(var(--gap) * 1.5);

  display:grid;
  align-items:end;
  gap:.5em;

  font-size:clamp(1.1em, 4vw, 1.4em);
  line-height:calc(1.45 * (1 + var(--setting--whitespace) * .05 ));
  text-wrap:wrap;
}

/* intro text - print */
@media only print {
  main > header > p {
    min-height:0;
    background:none;
    padding:0;
  }
}