:root {
  --bg-site: hsl(0, 0%, 100%);
  --bg-cover-2: url(orange-purple-bg.jpg);
  --bg-cover-3-a: url(orange-purple-bg.jpg);
  --bg-cover-3-b: url(swirl-white.svg);
  --border-link-height: 0.4rem;
  --border-link-initial-width: 20%;
  --fill-animation-01: hsla(0, 0%, 100%, 1);
  --fill-animation-02: hsla(0, 0%, 100%, 0.72);
  --fsize-base: 1.8rem;
  --fill-blockquote: hsl(0, 0%, 20%);
  --fill-footer: hsl(0, 0%, 95%);
  --fill-footer-bottom: hsl(0, 0%, 20%);
  --fill-text: hsl(0, 0%, 20%);
  --fill-link: var(--fill-text);
  --fill-link-hover: hsl(16, 83%, 50%);
  --fill-footer-link: hsl(0, 0%, 72%);
  --fill-hamburger-bars: var(--fill-text);
  --fill-menuitem: var(--fill-text);
  --fill-mobile-menu: hsl(0, 0%, 95%);
  --fill-mobile-border: hsl(0, 0%, 80%);
  --fill-increasing-volume: hsl(0, 0%, 100%);
  --fill-line-increasing-volume: hsl(16, 83%, 50%);
  --fill-background-cover: hsl(0, 0%, 20%);
  --fill-section-cover: hsl(0, 0%, 100%);
  --fill-subtitle-2: hsl(16, 83%, 50%);
  --fill-title: hsl(16, 83%, 50%);
  --fill-dt-title: hsl(16, 83%, 50%);
  --fill-date: hsl(0, 0%, 80%);
  --fill-date-text: hsl(0, 0%, 100%);
  --fill-gradient-base-1: hsla(16, 83%, 50%, 1);
  --fill-gradient-base-2: hsla(16, 83%, 50%, 0.7);
  --fill-gradient-top-1: hsla(36, 100%, 55%, 1);
  --fill-gradient-top-2: hsla(36, 100%, 48%, 0.1);
  --fill-gradient-bottom-1: hsla(310, 69%, 35%, 1);
  --fill-gradient-bottom-2: hsla(310, 69%, 35%, 0);
  --fill-gradient-bar: linear-gradient(120deg, #f7b132 8%, #e94f18 60%);
  --lang-gradient-line: linear-gradient(90deg, #fff 8%, #dcdcdc 60%);
  --lang-active: hsl(220, 84%, 54%);
  --lang-hover: hsl(0, 0%, 96%);
  --lang-bg: var(--bg-site);
  --lang-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  --fill-map-infobox: hsla(0, 0%, 10%, 0.8);
  --fill-map-infobox-text: hsl(0, 0%, 100%);
  --w-logo: 18rem;
  --h-logo: 5.4rem;
  --pad-logo-vert: 4.4rem;
  --img-logo: url(logo-tandemdrive-color.svg);
  --img-logo-only: url(logo-tandemdrive-color-no-text.svg);
  --img-logo-footer: url(logo-tandemdrive-black.svg);
  --img-logo-transform: -15.3rem;
  --img-footer-bg: url(swirl-footer-black.svg);
  --img-map-bg: url(europe-2.svg);
  --background-increasing-volume: url("increasing-volume.svg");
  --watt-content-bg-01: hsl(0, 0%, 100%);
  --watt-content-bg-02: hsla(0, 0%, 95%, 1.2);
  --watt-content-bg-03: hsla(0, 0%, 95%, 0.6);
  --watt-columns: 8;
  --watt-line-fill: hsl(0, 0%, 94%);
  --watt-line-right-fill: var(--watt-line-fill);
  --watt-pad-hor: 6.4rem;
  --watt-pad-vert: 8rem;
  --pad-content-hor: 4rem;
  --pad-content-vert: 8rem;
  --pad-volt-vert: 8rem;
  --size-icon: 3.2rem;
  --fill-icon: var(--fill-text);
  --fill-triangle: hsl(0, 0%, 80%);
  --w-outer-page: 100vw;
  --w-page: 140rem;
  --header-margin: 4rem;
  --header-height: 13.4rem;
  --filter: grayscale(1);
}

@media screen and (width <= 49.9375em) {
  :root {
    --watt-pad-hor: 3.2rem;
    --watt-pad-vert: 4rem;
    --pad-volt-vert: 4rem;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-site: hsl(0, 0%, 10%);
    --fill-animation-01: hsla(0, 0%, 10%, 1);
    --fill-animation-02: hsla(0, 0%, 10%, 0.72);
    --fill-date: hsl(0, 0%, 50%);
    --fill-date-text: hsl(0, 0%, 20%);
    --fill-footer: hsl(0, 0%, 15%);
    --fill-footer-bottom: hsl(0, 0%, 10%);
    --fill-mobile-menu: hsl(0, 0%, 10%);
    --fill-mobile-border: hsl(0, 0%, 25%);
    --fill-text: hsl(0, 0%, 80%);
    --img-logo: url(logo-tandemdrive-white.svg);
    --img-logo-footer: url(logo-tandemdrive-white.svg);
    --img-footer-bg: url(swirl-footer-white.svg);
    --watt-content-bg-01: hsl(0, 0%, 10%);
    --watt-content-bg-02: hsla(0, 0%, 20%, 0.8);
    --watt-content-bg-03: hsla(0, 0%, 16%, 0.8);
    --watt-line-fill: hsl(0, 0%, 24%);
    --background-increasing-volume: url("increasing-volume-dark-mode.svg");
    --fill-increasing-volume: hsl(0, 0%, 10%);
    --fill-line-increasing-volume: hsl(24, 100%, 50%);
    --lang-gradient-line: linear-gradient(90deg, hsl(0, 0%, 10%) 8%, #777 60%);
    --lang-active: hsl(220, 84%, 54%);
    --lang-hover: hsl(0, 0%, 24%);
    --lang-bg: hsl(0, 0%, 16%);
    --lang-shadow: rgba(0, 0, 0, 1) 0px 1px 4px;
    --filter: grayscale(1) invert(100%);
  }
  :root :is(.cover-2) .fazant-gridlines > div:first-child {
    --watt-line-fill: hsla(0, 0%, 20%, 0.4) ;
  }
  :root .no-scroll .logo {
    --img-logo: url(logo-tandemdrive-white.svg);
  }
  :root footer {
    --watt-line-fill: hsl(0, 0%, 25%);
    --watt-line-right-fill: var(--watt-line-fill);
  }
}
@font-face {
  font-family: "Public Sans";
  src: url("PublicSans-var.woff2") format(woff2);
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("PublicSans-Italic-var.woff2") format(woff2);
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Internacional-Thin";
  src: url("Internacional-Thin.otf") format(opentype);
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Internacional-Black";
  src: url("Internacional-Black.otf") format(opentype);
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
* {
  box-sizing: border-box;
}

@page {
  size: A4 portrait;
  margin: 1.5cm 2.5cm 2.5cm;
}
header,
footer,
x-footer-bottom {
  display: none;
}

.print-logo {
  width: 4cm;
  height: auto;
}
.print-logo + main {
  margin-top: 1cm;
}

body {
  margin: 0;
  font-family: "Public Sans", sans-serif;
  font-size: 12pt;
  color: var(--fill-text);
  font-weight: 300;
}

a {
  color: var(--fill-text);
}

h1,
h2,
h3,
h4 {
  font-weight: 300;
}

h1,
h2 {
  font-size: 18pt;
}

h3 {
  font-size: 15pt;
  margin-bottom: 1mm;
}
h3 a {
  text-decoration: none;
}

section {
  margin-bottom: 10mm;
}

/* ********** */
/* ********** */
.icon-blinds {
  -webkit-mask-image: url(icon-blinds.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-blinds.svg);
  mask-size: var(--size-icon) auto;
}

.icon-blockquote-start {
  -webkit-mask-image: url(icon-blockquote-start.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-blockquote-start.svg);
  mask-size: var(--size-icon) auto;
}

.icon-blockquote-end {
  -webkit-mask-image: url(icon-blockquote-end.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-blockquote-end.svg);
  mask-size: var(--size-icon) auto;
}

.icon-braided-square {
  -webkit-mask-image: url(icon-braided-square.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-braided-square.svg);
  mask-size: var(--size-icon) auto;
}

.icon-chessboard {
  -webkit-mask-image: url(icon-chessboard.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-chessboard.svg);
  mask-size: var(--size-icon) auto;
}

.icon-email {
  -webkit-mask-image: url(icon-email.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-email.svg);
  mask-size: var(--size-icon) auto;
}

.icon-lines-horizontal {
  -webkit-mask-image: url(icon-lines-horizontal.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-lines-horizontal.svg);
  mask-size: var(--size-icon) auto;
}

.icon-lines-vertical {
  -webkit-mask-image: url(icon-lines-vertical.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-lines-vertical.svg);
  mask-size: var(--size-icon) auto;
}

.icon-linkedin {
  -webkit-mask-image: url(icon-linkedin.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-linkedin.svg);
  mask-size: var(--size-icon) auto;
}

.icon-polka-dot-large {
  -webkit-mask-image: url(icon-polka-dot-large.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-polka-dot-large.svg);
  mask-size: var(--size-icon) auto;
}

.icon-phone {
  -webkit-mask-image: url(icon-phone.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-phone.svg);
  mask-size: var(--size-icon) auto;
}

.icon-pixels {
  -webkit-mask-image: url(icon-pixels.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-pixels.svg);
  mask-size: var(--size-icon) auto;
}

.icon-swirlboard {
  -webkit-mask-image: url(icon-swirlboard.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-swirlboard.svg);
  mask-size: var(--size-icon) auto;
}

.icon-tandemdrive {
  -webkit-mask-image: url(icon-tandemdrive.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-tandemdrive.svg);
  mask-size: var(--size-icon) auto;
}

.icon-tartan {
  -webkit-mask-image: url(icon-tartan.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-tartan.svg);
  mask-size: var(--size-icon) auto;
}

.icon-triangles {
  -webkit-mask-image: url(icon-triangles.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-triangles.svg);
  mask-size: var(--size-icon) auto;
}

.icon-triangle-right {
  -webkit-mask-image: url(icon-triangle-right.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-triangle-right.svg);
  mask-size: var(--size-icon) auto;
}

.icon-zigzag {
  -webkit-mask-image: url(icon-zigzag.svg);
  -webkit-mask-size: var(--size-icon) auto;
  mask-image: url(icon-zigzag.svg);
  mask-size: var(--size-icon) auto;
}

[class^=icon-] {
  display: block;
  width: var(--size-icon);
  height: var(--size-icon);
  background-color: var(--fill-icon);
}

.title-poignant {
  font-size: 16pt;
  margin: 0mm 0 5mm;
}

.fit-container-img {
  max-width: 10cm;
  width: 100%;
  height: auto;
  object-position: center;
  object-fit: contain;
  vertical-align: top;
}

dt {
  font-weight: 400;
}

dd {
  margin-left: 5mm;
}

.profile,
.last-detail {
  margin-bottom: 5mm;
}

.profile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50mm;
  margin-bottom: 2mm;
}

.profile {
  position: relative;
  min-height: 50mm;
  padding-left: 55mm;
  page-break-inside: avoid;
}

.profile-flex {
  --size-icon: 3mm;
  display: flex;
  font-size: 85%;
}
.profile-flex a:first-child {
  flex: 0 0 5mm;
  padding-top: 1mm;
  display: block;
}

.column-icon-text {
  display: flex;
  gap: 3mm;
  margin-bottom: 3mm;
}
.column-icon-text.triangle {
  gap: 3mm;
}
.column-icon-text.direction-column {
  height: 100%;
}
.column-icon-text .date {
  margin-top: auto;
}
.column-icon-text > div:last-child {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.title-icon {
  --size-icon: 4mm;
  flex: 0 0 var(--size-icon);
  padding-top: 1mm;
}

.no-top-margin {
  margin-top: 0;
}

blockquote {
  --size-icon: 5mm;
  display: grid;
  grid-template-columns: var(--size-icon) 1fr var(--size-icon);
  gap: 2mm 1mm;
  margin: 5mm 0;
}
blockquote footer {
  display: block;
  grid-column: 2;
  font-size: 12pt;
}
blockquote .blockquote-icon {
  --fill-icon: var(--fill-blockquote);
}
blockquote .icon-blockquote-start {
  align-self: flex-start;
}
blockquote .icon-blockquote-end {
  align-self: flex-end;
}
blockquote .blockquote-text {
  padding-top: 1mm;
  font-size: 120%;
  font-weight: 300;
}

.patrijs-columns {
  position: relative;
  display: grid;
  grid-tempalte-columns: 1fr;
  margin-block: 2cm;
  page-break-inside: avoid;
}
.patrijs-columns .increasing-volume-svg,
.patrijs-columns .content-on-graph {
  grid-row: 1;
  grid-column: 1;
}
.patrijs-columns .patrijs-column-img {
  position: absolute;
  top: 0;
  width: 5cm;
  height: auto;
  left: -1cm;
}
.patrijs-columns .patrijs-column-img + div {
  padding-left: 4.5cm;
}

.increasing-volume-svg {
  --fill-increasing-volume: var(--watt-content-bg-03);
}
.increasing-volume-svg rect {
  fill: var(--fill-increasing-volume);
  opacity: 0.8;
}
.increasing-volume-svg text {
  font-size: 1rem;
  fill: var(--fill-date);
}
.increasing-volume-svg circle {
  fill: var(--fill-line-increasing-volume);
}
.increasing-volume-svg .anim-polyline {
  stroke-dasharray: 1300;
  stroke-dashoffset: 0;
  stroke: var(--fill-line-increasing-volume);
}

.map-infobox {
  page-break-inside: avoid;
}