.svg { position: fixed; z-index: -1; }


@font-face {
    font-family: 'BBBBaskervvol';
    src: url('fonts/BBBBaskervvolVF.woff2') format('woff2 supports variations'),
        url('fonts/BBBBaskervvolVF.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'BBBBaskervvol';
    src: url('fonts/BBBBaskervvol-ItalicVF.woff2') format('woff2 supports variations'),
        url('fonts/BBBBaskervvol-ItalicVF.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Maison Neue";
    font-weight: 100 1000;
    font-style: normal;
    font-display: swap;
    src: url("fonts/MaisonNeue-Light.woff2") format("woff2"),
    url("fonts/MaisonNeue-Light.woff") format("woff");
}
.dm-sans {
    font-variation-settings: "opsz" var(--dm-sans-opsz, 9), "wght" var(--dm-sans-wght, 400);
}@font-face {
    font-family: "DM Sans";
    font-weight: 100 1000;
    font-style: italic;
    font-display: swap;
    src: url("fonts/dmsans-italic-variablefont.ttf") format(opentype) tech(variations),
         url("fonts/dmsans-italic-variablefont.ttf") format("opentype-variations");
}
.dm-sans {
    font-variation-settings: "opsz" var(--dm-sans-opsz, 9), "wght" var(--dm-sans-wght, 400);
}
@font-face {
    font-family: "Mona Sans";
    font-weight: 200 900;
    font-stretch: 75% 125%;
    font-style: normal;
    font-display: swap;
    src: url("fonts/monasans.woff2") format(woff2) tech(variations),
         url("fonts/monasans.woff2") format("woff2-variations");
}
.mona-sans {
    font-variation-settings: "wdth" var(--mona-sans-wdth, 100), "wght" var(--mona-sans-wght, 200), "slnt" var(--mona-sans-slnt, 0);
}/* available OT features: aalt case ccmp dnom frac liga numr ordn pnum rvrn sinf ss01 ss03 subs sups tnum */

html, body{
  height: 100%;
}
* {
  margin: 0;
  font-size: 1em;
}
a {
  color: currentColor;
}

main {
  line-height: 1.4;
  font-size: 1.5em;
  font-size: clamp(1.25em, 1.1471em + 0.4706vw, 1.5em);
  margin: 2em auto;
  padding: 0 2em;
  font-family: 'BBBBaskervvol';
  font-weight: 500;
}


body:has(.intro){
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2em;
}
.intro{
  width: min(17.6em, 100%); 
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.intro .br a {
  text-underline-offset: .15em;
}
.er {
  text-align: center;
  text-transform: uppercase;
  font-family: "Mona Sans";
  font-family: "Maison Neue";
  font-weight: 700;
  letter-spacing: .025em;
  margin-bottom: 1em;
}
.intro .br {
  align-self: end;
}
/* -------------------------------------------------------- FR */
.fr {
  background: url(grainvv.png) no-repeat top center;
}
.fr header {
  margin: 4em auto 6em;
  text-transform: uppercase;
  text-align: center;
}
.fr header p {
  text-indent: 0;
  letter-spacing: .1em;
  transform: scaleY(.8);
  &::after {
    content:"";
    display: block;
    border-bottom: 2px solid #000;
    width: 3em;
    margin: 1em auto;
  }
}
.fr h1 {
  strong, em {
    display: block;
    font-style: normal;
    font-weight: normal;
  }
  strong{
    font-size: 1em;
    font-weight: 800;
    transform: scaleY(1.8) ;
    word-spacing: .7em;
  }
  span {
    font-size: .5em;
  }
  em {
    letter-spacing: .1em;
  }
}
.fr .text {  max-width: 17.6em; 
  margin: auto; }

.fr .text {
  filter: url(#svgfilter);
  text-align: justify;
  
}
.fr .text p {
  margin: .2em auto 0;
  text-indent: 1em;
  transform: rotate(calc(var(--r, 0) * .1deg));
}
.fr p:nth-child(1){ --r: -4}
.fr p:nth-child(2){ --r: 8}
.fr p:nth-child(3){ --r: 2}
.fr p:nth-child(4){ --r: -9}
.fr p:nth-child(5){ --r: 4}
.fr p:nth-child(6){ --r: -1}
.fr p:nth-child(7){ --r: 3}
.fr p:nth-child(8){ --r: -6}
.fr p:nth-child(9){ --r: -12}
.fr p:nth-child(10){ --r: 4}
.fr p:nth-child(11){ --r: -3}

/* -------------------------------------------------------- BR */
.br {
  color: rgb(0, 128, 217);
  /* font-family: "Mona Sans";
  font-feature-settings: "ss01" on ;  */
  font-family: "Maison Neue";
  font-weight: 300;
  line-height: 1.3;
}
.br header {
  margin: 4em auto 6em;
  text-align: left;
   max-width: 17.6em; 
}
.br header p {
  margin-bottom: 1.3em;
}
.br h1 {
  strong, span{
    display: block;
    font-style: normal;
    font-weight: normal;
    font-weight: 300;
  }
}

.br .text p {
  margin: 0 auto 1.3em;
  text-wrap: pretty;
  max-width: 17.6em; 
  text-indent: calc(var(--i,0) * min(1em, 4vw));
  padding-left: calc(var(--l,0) * min(1em, 4vw));
}
.altbr .text p {
  text-indent: 0;
  padding-left: 0;
}

[style]{
  letter-spacing: calc(var(--l, 0) * -0.0015em);
  word-spacing: calc(var(--l, 0) * -0.035em);
}
.text a[href^="#fn"]{
  color: currentColor;
  font-size: .6em;
  font-weight: 400;
  position: relative;
  top: -.3em;
  padding-left: .15em;
  text-decoration: none;
}
.notes {
  max-width: 17.6em; 
  margin: 4em auto;
}
.fn {
  font-size: .75em;
  margin-bottom: 1.3em;
  padding-left: calc(2em / .75);
  position: relative;
}
.fn span {
  position: absolute;
  left: 0;
}
.fn a {
  color: currentColor;
  text-decoration: none;
}
.br p:nth-child(1){ --l:0; --i: 2}
.br p:nth-child(2){ --l:2; --i: 8}
.br p:nth-child(3){ --l:0; --i: 2}
.br p:nth-child(4){ --l:0; --i: 2}
.br p:nth-child(5){ --l:0; --i: -2}
.br p:nth-child(6){ --l:2; --i: -1}
.br p:nth-child(7){ --l:0; --i: 3}
.br p:nth-child(8){ --l:2; --i: -1}
.br p:nth-child(9){ --l:2; --i: 6}
.br p:nth-child(10){ --l:0; --i: 1}
.br p:nth-child(11){ --l:0; --i: 6}

#footer {
  font-size: max(1rem,.65em);
  margin: calc(4rem * 1.5) auto;
  padding-bottom: calc(4rem * 1.5) ;
  max-width: calc(17.6rem * 1.5); 
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  line-height: 1.4em;
}
#footer p {
  /* text-wrap: balance; */
}
img {
  width: 2em;
  display: block;
  transform: translateX(-50%);
  /* margin: auto; */
}
sup {line-height: 0; font-size: .7em; font-weight: 350;}

@media (max-width:800px) {  
  main { padding: 0 1em; }    
}
@media (max-width:450px) {
  main.fr {
    font-size: 4.8vw;
  }  
}