body {
  font-family: var(--ff-s);
  font-size: var(--fs);
}

.fs-xxxlg {
  font-size: var(--fs-xxxlg);
  line-height: var(--fs-xxxlg);
  margin-block-end: 0.5em;
}
.fs-xxlg {
  font-size: var(--fs-xxlg);
  line-height: var(--fs-xxlg);
  margin-block-end: 0.75em;

}
.fs-xlg {
  font-size: var(--fs-xlg);
  line-height: var(--fs-xlg);
  margin-block-end: 0.75em;
}
.fs-lg {
  font-size: var(--fs-lg);
  margin-block-end: 0.75em;
}
.fs-md {
  font-size: var(--fs-md);
}
.fs {
  font-size: var(--fs);
}
.fs-sm {
  font-size: var(--fs-sm);
}
.fs-xsm {
  font-size: var(--fs-xsm);
}

.ff-s {
  font-family: var(--ff-s);
}

h1,h2,h3,h4,h5,h6 {
  font-weight: 600;
  text-wrap: balance;
  margin-block: 0;
}

h1.page-title {
  font-size: var(--fs-xxlg);
}
h2 {
  font-size: var(--fs-xlg);
}
h3 {
  font-size: var(--fs-lg);
}
h4 {
  font-size: var(--fs-md);
}
h5, h6 {
  font-size: var(--fs);
}

p {
  margin-block-start: 0;
  line-height: var(--lh);
  text-wrap: pretty;
  /* max-width: 65ch; */
}
p:last-child {
  margin-block-end: 0;
}

ul, ol {
  padding-inline-start: var(--spc-lg);
}

/*** In Long-form style entities only (.long-form added in html.twig files) ***/

.long-form h2 {
  margin-block-end: var(--spc-lg);
}
.long-form h3 {
  margin-block-end: var(--spc);
}
.long-form h4 {
  margin-block-end: var(--spc-sm);
}
.long-form h5,
.long-form h6 {
  margin-block-end: var(--spc-xsm);
}

.long-form ol,
.long-form ul {
  font-family: var(--ff);
}

.long-form p {
  margin-block-start: 0;
  font-family: var(--ff);
}
.long-form ul,
.long-form ol {
  padding-inline-start: var(--spc-lg);
  font-family: var(--ff);
  line-height: var(--lh);
  text-wrap: pretty;
}

/* only in .node__content and not .ms-cards__wrapper do we add a margin to the top of h2 and h3 */
.node__content:not(.ms-card) > h2,
.node__content:not(.ms-card) > h3 {
  margin-block-start: var(--spc);
}

/* blockquote {
  position: relative;
  margin: 0 0 var(--spc);
  padding-inline-start: var(--spc-xlg);
  width: 85%;
  border-inline-start: 5px solid var(--grey-lt);
  font-size: var(--fs-md);
 }

blockquote p:first-of-type:before {
  content: '\201c';
  position: absolute;
  left: 0.8em;
}

blockquote p:nth-last-of-type(2):after {
  content: '\201d';
  position: absolute;
}

blockquote cite {
  font-style: normal;
}

blockquote cite:before {
  content: '\2014';
  color: var(--greyish);
} */

blockquote {
  /* max-width: 38ch; */
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  padding: var(--spc-xlg);
  border-left: none;
  position: relative;
  margin: var(--spc-xxlg) var(--spc-xxlg) var(--spc-xxxlg);
}

blockquote:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 90%;
  border-width: 0 0 2px 2px;
  border-style: solid;
  z-index: -1;
}
blockquote:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 90%;
  border-width: 2px 2px 0 0;
  border-style: solid;
  z-index: -1;
}
blockquote p:first-child:before {
  content: "";
  display: block;
  position: absolute;
  left: -30px;
  bottom: -30px;
  width: 30px;
  height: 30px;
  border-width: 2px 2px 0 0;
  border-style: solid;
  z-index: -1;
}
blockquote p:last-child:after {
  content: "";
  display: block;
  position: absolute;
  right: -30px;
  top: -30px;
  width: 30px;
  height: 30px;
  border-width: 0 0 2px 2px;
  border-style: solid;
  z-index: -1;
}

/* In header and footers all text should be sans-serif */
header *,
.footer-wrapper * {
  font-family: var(--ff-s);
}
/* footer text should be a bit smaller */
.footer-wrapper * {
  font-size: var(--fs-sm);
}