/* CSS typography for Hunnisett-me-20                       13 February 2020 */

/* Required global custom properties (variables):
    defaults values set in p-variables.css under :root
    --spacing           - margin / padding
    --w-l-col           - width of left column (3-col layout)
    --w-r-col           - width of right column (3-col layout)
*/

@font-face {
	font-family: 'LCALLIG';
	src: url('/webfonts/LCALLIG.eot');
	src: local('LCALLIG'), url('/webfonts/LCALLIG.woff') format('woff'),
      url('/webfonts/LCALLIG.ttf') format('truetype');
}

:root {
  --html-font-px: 16;     /* browser default is 16px */
  --scr-min-px:  375;     /* minimum likely screen width (px) */
  --line-len-max:  45;     /* maximum readable line length (rem) */
  
  --page-min: calc(var(--scr-min-px) / var(--html-font-px));
  --page-max: calc(var(--w-l-col) + var(--w-r-col) + var(--line-len-max));
  --page-range: calc(var(--page-max) - var(--page-min));
  
  --h1-min: 2;
  --h1-max: 4;
  --h1-range: calc(var(--h1-max) - var(--h1-min));
  --h2-min: 1.5;
  --h2-max: 2;
  --h2-range: calc(var(--h2-max) - var(--h2-min));
  
  --h1-offset: calc(
    var(--h1-max)
     - 
    var(--page-max) * var(--h1-range) / var(--page-range)
    );
  --h1-factor: calc(
    (var(--h1-max) - var(--h1-offset))
    * 100 / var(--page-max)
    );

  --h2-offset: calc(
    var(--h2-max)
     - 
    var(--page-max) * var(--h2-range) / var(--page-range)
    );
  --h2-factor: calc(
    (var(--h2-max) - var(--h2-offset))
    * 100 / var(--page-max)
    );

}


html {
  color: #222;
  font-size: calc(100% * var(--html-font-px) / 16);
  line-height: 1.4;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
body {
  font-size: 1rem;
}

h1 { /* 2rem - 4rem site header */
  font-size: calc((1rem * var(--h1-offset)) + (1vw * var(--h1-factor)));
  margin: 0 0 1.25vw;
}
h2 {font-size: 1.75rem;} /* 1.5rem - 2rem page headers */
h2 { /* 1.5rem - 2rem page header */
  font-size: calc((1rem * var(--h2-offset)) + (1vw * var(--h2-factor)));
}
h3 {font-size: 1.4375rem;} /* 23px page sub-header */
h4 {font-size: 1.25rem;} /* 20px main page section */
h5 {font-size: 1.125rem;} /* 18px minor page section */
h6 {font-size: 1rem;} /* 16px paragraph heading */
p  {font-size: 1rem;} /* 16px paragraph text */
h1,h2,h3,h4,h5,h6 {line-height: 1;}
h1,h2,h3 {text-align: center;}
h2,h3,h4,h5,p {margin: 0 0 var(--spacing);}
h6 {margin: 0 0 calc(var(--spacing) / 3);}

/* Centre text */
.centred { text-align: center; }
/* ensure page-break */
.breakb4 { break-before: always; }
/* stop wrapping at hyphens */
span.nowrap { white-space: nowrap; }

@media only screen and (min-width: 30rem) {
  h3 {font-size: 1.5rem;} /* 24px page sub-header */
  h4 {font-size: 1.3125rem;} /* 21px main page section */
}

@media only screen and (min-width: 45rem) {
  h3 {font-size: 1.5625rem;} /* 25px page sub-header */
  h4 {font-size: 1.375rem;} /* 22px main page section */
}

@media only screen and (min-width: 60rem) {
  h1 {
    font-size: 4rem; /* 64px site header */
    margin: 0 0 var(--spacing);
  }
  h2 {
    font-size: 2rem; /* 48px site header */
    margin: 0 0 var(--spacing);
  }
}