/**********/
/* REMEDY */
/**********/

*,
*::before,
*::after {
  box-sizing:border-box;

  font-family:'Open Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;

  letter-spacing: calc(.01em * var(--setting--whitespace));
  word-spacing: calc(.03em * var(--setting--whitespace));
}

:root[data-font-family="Dyslexie"] *,
:root[data-font-family="Dyslexie"] *::before,
:root[data-font-family="Dyslexie"] *::after {
  font-family:'Dyslexie', Arial, sans-serif;
  font-size-adjust: .5;
}

:root[data-font-family="OpenDyslexic"] *,
:root[data-font-family="OpenDyslexic"] *::before,
:root[data-font-family="OpenDyslexic"] *::after {
  font-family:'Open Dyslexic', Arial, sans-serif;
  font-size-adjust: .5;
}

:root[data-font-family="ComicSans"] *,
:root[data-font-family="ComicSans"] *::before,
:root[data-font-family="ComicSans"] *::after {
  font-family:'Comic Sans MS', Arial, sans-serif;
}





/**********/
/* TOKENS */
/**********/

:root {
  --setting--font-size:0;
  --setting--whitespace:0;
  
  font-size:calc(
    clamp( 1em, 2.5vmin, 1.25em) * 
    (1 + .1 * var(--setting--font-size)) *
    var(--font-size-adjust, 1)
  );

  --small: 34em;
  --gap: clamp(1rem, 4vw, 2rem);
  --line-height-factor:calc(1 + var(--setting--whitespace) * .05);
}





/**********/
/* BASICS */
/**********/

html {
  scroll-padding-top:4em;
}

html[data-reduced-motion="no-preference"] {
  scroll-behavior:smooth;
}

body {
  margin:0;
  
  color:var(--clr-root);
  background-color:var(--bg-root);  
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}





/********/
/* GRID */
/********/

body {
  display: grid;

  grid-template-columns:
    [full-start] minmax(var(--gap), 1fr)
    [large-start medium-start small-start] var(--gap)
    [inset-start] min(var(--small), 100% - var(--gap) * 3) [small-end]
    minmax(0, var(--gap))
    [side-start] minmax(0, 6rem) [inset-end medium-end] 
    minmax(0, 6rem) [large-end side-end]
    minmax(var(--gap), 1fr) [full-end];
}





/*********/
/* PRINT */
/*********/

@page {
  margin: 1.5cm;
}

table, img, svg, .note {
  break-inside: avoid;
}