@charset "utf-8";
:root {
  /* CSS Custom Properties without Colors
	// --------------------------------------------*/
  --main-width: 100vw;
  --base-fs: 0.266vw;
  --root-fs: min(4vw, 15px);
  --g: min(10vw, 180px);
  --m: 15px;
  --mb: 4.375vw;
  --mi: 2.5vw;
  --header-height: 60px;
  --wrap-padding-min: calc(var(--m) * 2);
  --out-wrap-margin: calc((100vw - var(--main-width)) / 2);
}
body:has(.header-nav.active) {
  height: 100vmax;
  overflow: clip;
}
img[src*="logo-journal"] {
  width: 100%;
}
p,
figure {
  /* custom */
}
.btn:is(a, button) {
  width: 100%;
  box-sizing: border-box;
  padding-inline: 1ic;
  justify-content: center;
  font-size: calc(var(--base-fs) * 15);
}
.btn:is(a, button)::after {
  right: 0.75lh;
}
.wrap {
  margin-inline: 0;
}
:where(main.content) > section {
  padding-block: calc(var(--m) * 2);
}
:where(main.content) > section .wrap .btn {
  margin-top: calc(var(--m) * 3);
}
.headings .subline {
  margin-left: 0;
  font-size: calc(var(--base-fs) * 21);
  text-align: center;
}
.headings .subline::after {
  display: block;
  width: 15%;
  height: 2px;
  background: currentColor;
  margin-inline: auto;
  margin-block: var(--m);
}
.headings .label {
  margin-top: var(--m);
  display: block;
  font-size: calc(var(--base-fs) * 18);
  text-align: center;
}
.headings .label::after {
  display: none;
}
.card {
  border-radius: 5px;
  overflow: clip;
}
.card .text {
  padding-top: 0;
}
.card .tag-series {
  margin-block: 0.75lh 0.5lh;
  font-size: calc(var(--base-fs) * 13);
}
.card .title {
  margin-block: 0.75lh;
  font-size: calc(var(--base-fs) * 16);
}
.card .tag-series + .title {
  margin-top: 0;
}
.card.type-row a:has(.image) {
  width: calc(240 / var(--v));
}
.card.type-row .text {
  padding-top: 0;
}
.card.type-linkcard {
  padding: calc(var(--m) * 1.5);
  box-shadow: none;
  background: var(--light01);
  margin-block: calc(var(--m) * 3) calc(var(--m) * 5);
  margin-inline: calc(var(--m) * 0.5);
  flex-direction: column;
  gap: 0;
}
.card.type-linkcard a:has(.image) {
  width: 100%;
  border-radius: 3px;
  overflow: clip;
}
.card.type-linkcard .text {
  letter-spacing: 0;
}
.card.type-linkcard .title {
  margin-top: 0.75lh;
  font-size: calc(var(--base-fs) * 15);
}
.card.type-linkcard .excerpt {
  font-size: calc(var(--base-fs) * 13);
  line-height: 1.5;
}
.card.type-linkcard .link {
  font-size: calc(var(--base-fs) * 13);
}
.indicators {
  font-size: calc(var(--base-fs) * 13);
}
.article-container {
  font-size: calc(var(--base-fs) * 16);
  letter-spacing: 0.1ic;
  text-align: justify;
}
.article-container figure + h2,
.article-container img + h2,
.article-container a + h2,
.article-container p + h2,
.article-container ul + h2,
.article-container ol + h2,
.article-container div + h2,
.article-container figure + h3,
.article-container img + h3,
.article-container a + h3,
.article-container p + h3,
.article-container ul + h3,
.article-container ol + h3,
.article-container div + h3,
.article-container figure + h4,
.article-container img + h4,
.article-container a + h4,
.article-container p + h4,
.article-container ul + h4,
.article-container ol + h4,
.article-container div + h4,
.article-container figure + h5,
.article-container img + h5,
.article-container a + h5,
.article-container p + h5,
.article-container ul + h5,
.article-container ol + h5,
.article-container div + h5,
.article-container figure + h6,
.article-container img + h6,
.article-container a + h6,
.article-container p + h6,
.article-container ul + h6,
.article-container ol + h6,
.article-container div + h6 {
  margin-top: calc(var(--m) * 3);
}
.article-container figure + ul,
.article-container img + ul,
.article-container a + ul,
.article-container p + ul,
.article-container ul + ul,
.article-container ol + ul,
.article-container div + ul,
.article-container figure + ol,
.article-container img + ol,
.article-container a + ol,
.article-container p + ol,
.article-container ul + ol,
.article-container ol + ol,
.article-container div + ol {
  margin-block: calc(var(--m) * 1.5);
}
.article-container h2,
.article-container h3 {
  padding-bottom: 0.5lh;
  border-bottom: 2px solid var(--color);
  margin-bottom: 0.75lh;
}
.article-container h2:not(.headline, .subline, .title) {
  font-size: calc(var(--base-fs) * 21);
  margin-bottom: calc(var(--m) * 1.5);
}
.article-container h3:not(.headline, .subline, .title) {
  padding-bottom: calc(var(--m) * 1.5);
  font-size: calc(var(--base-fs) * 19);
  margin-bottom: calc(var(--m) * 2);
}
.article-container h4:not(.headline, .subline, .title),
.article-container h5:not(.headline, .subline, .title),
.article-container h6:not(.headline, .subline, .title) {
  font-size: calc(var(--base-fs) * 17);
  margin-bottom: var(--m);
}
.article-container p + figure,
.article-container p + img {
  margin-top: calc(var(--m) * 3);
  margin-bottom: calc(var(--m) * 3);
}
.article-container .wp-element-caption {
  font-size: calc(var(--base-fs) * 13);
}
.pagination {
  --gap: var(--m);
  width: auto;
  margin-inline: calc(-1 * var(--wrap-padding-inline) * 0.5);
  padding-block: 0;
}
.pagination .pager-container {
  flex: 0 0 100%;
  order: 0;
}
.pagination .pager {
  --size: calc(36 / var(--v));
}
.pagination .pager.prev {
  order: 1;
}
.pagination .pager.next {
  order: 2;
}
div#ez-toc-container {
  height: calc(360 / var(--v));
  overflow-y: scroll;
  padding-block: calc(var(--m) * 1.5) calc(var(--m) * 2);
  padding-inline: calc(var(--m) * 2);
}
div#ez-toc-container .ez-toc-title-container {
  padding-bottom: 0.5lh;
  margin-bottom: 0.75lh;
}
div#ez-toc-container .ez-toc-title-container .ez-toc-title {
  font-size: calc(var(--base-fs) * 16);
  text-align: center;
}
section.form {
  border-radius: 3px;
  margin-inline: calc(-1 * var(--wrap-padding-inline) * 0.5);
}
section.form .wrap {
  padding: calc(var(--m) * 2) calc(var(--m) * 1.5);
}
section.form .headline {
  font-size: calc(var(--base-fs) * 18);
  text-align: left;
  margin-bottom: calc(var(--m) * 2);
}
section.form :is(.mw_wp_form, .form-container) {
  width: 100%;
  min-width: unset;
}
section.form :is(.mw_wp_form, .form-container) form {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  --row-gap: calc(var(--m) * 1.5);
  --column-gap: var(--m);
  gap: var(--row-gap) var(--column-gap);
}
section.form .group {
  flex-direction: column;
}
section.form .block {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
section.form .block.agreement .input {
  margin-top: var(--m);
}
section.form .title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-height: unset;
  padding: 0;
  background: transparent;
  color: var(--black);
  font-size: calc(var(--base-fs) * 15);
  text-align: left;
  justify-content: flex-start;
}
section.form .group .block .title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
section.form .input {
  width: 100%;
}
section.form .notice {
  padding-left: 0;
}
section.form .block.btns {
  margin-top: calc(var(--m) * 3);
  flex-direction: column;
  gap: calc(var(--m) * 2);
}
section.form .back {
  position: static;
  transform: none;
  order: 2;
}
section.form .submit {
  order: 1;
}
section.form .mwform-checkbox-field.horizontal-item {
  display: block;
  margin-bottom: var(--m);
}
section.form .mwform-checkbox-field.horizontal-item + .horizontal-item {
  margin-left: 0;
}
section.form .error {
  padding: 0 var(--m);
  font-size: calc(var(--base-fs) * 16.5);
  top: 0;
  left: auto;
  right: var(--m);
}
section.form .error::before {
  display: none;
}
body.journal {
  --b: 375;
  --wrap-width: 100%;
  --wrap-padding-inline: calc(var(--m) * 2);
  --header-height: calc(60 / var(--v));
  --card-row-gap: calc(var(--m) * 4);
  --transition: 0.3s 0s ease;
  font-size: calc(var(--base-fs) * 16);
}
.header {
  box-shadow: 0 -5px 10px 0 rgb(0 0 0 / 0.2);
}
.header .wrap {
  padding-inline: var(--m);
}
.header .logo {
  width: 60%;
}
.header .switch {
  display: block;
  width: calc(var(--header-height) + var(--m));
  height: 100%;
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;
  transition: var(--transition);
}
.header .switch::before,
.header .switch::after {
  display: block;
  width: calc(100% - calc(var(--m) * 2));
  height: 1px;
  background: var(--black);
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transition: var(--transition);
}
.header .switch::before {
  margin-top: -5px;
}
.header .switch::after {
  margin-top: 5px;
}
.header .switch:is(.active) {
  background: var(--light02);
}
.header .switch:is(.active)::before,
.header .switch:is(.active)::after {
  margin-top: 0;
}
.header .switch:is(.active)::before {
  rotate: 45deg;
}
.header .switch:is(.active)::after {
  rotate: -45deg;
}
.header .header-nav {
  width: 100%;
  height: calc(100vmax - var(--header-height));
  padding-block: calc(var(--m) * 2);
  padding-inline: calc(var(--m) * 1.5);
  background: rgb( from var(--black) r g b / 0.8);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  flex-direction: column;
  justify-content: center;
  gap: 2lh;
  position: absolute;
  left: 0;
  top: var(--header-height);
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--white);
  transition: opacity 0.3s 0.1s ease;
}
.header .header-nav a:first-child {
  margin-top: -1lh;
}
.header .header-nav a {
  background: transparent;
}
.header .header-nav select {
  padding-block: 1lh;
  padding-inline: 1ic 5ic;
  color: var(--black);
}
.header .header-nav:not(.active) {
  pointer-events: none;
  opacity: 0;
}
.header .header-nav:is(.active) {
  pointer-events: all;
  opacity: 1;
}
section.youtube-channel {
  padding-block: calc(var(--m) * 4);
}
section.youtube-channel .card {
  width: 100%;
}
section.youtube-channel .text {
  padding-top: 0;
}
section.youtube-channel a.nav-youtube-channel::after {
  display: none;
}
.sticky-group {
  width: 100%;
  padding: 5px;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  position: -webkit-sticky;
  position: sticky;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}
a.nav-page-top {
  width: calc(60 / var(--v));
  height: calc(54 / var(--v));
  margin-right: 0;
  font-size: calc(var(--base-fs) * 11);
}
a.nav-page-top::before {
  width: 4px;
  height: 4px;
}
a.nav-whitepaper {
  width: calc(100vw - (60 / var(--v)) - 15px);
  height: auto;
  position: static;
}
a.nav-whitepaper::before {
  display: none;
}
a.nav-whitepaper img {
  width: 100%;
  aspect-ratio: 345 / 52;
}
.footer-journal a.logo {
  margin-inline: auto;
  margin-bottom: var(--m);
}
.footer-journal nav {
  font-size: inherit;
}
.footer-journal nav.nav-series .container {
  gap: 1lh 3ic;
  justify-content: center;
}
.footer-journal a.nav-youtube-channel {
  margin-left: 0;
}
.footer-journal nav.nav-categories .label {
  text-align: center;
  margin-bottom: calc(var(--m) * 2);
}
.footer-journal nav.nav-categories .container {
  justify-content: center;
}
.footer-logipalette .container {
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: calc(var(--m) * 2);
}
.footer-logipalette .container + .container {
  margin-top: calc(var(--m) * 2);
  justify-content: center;
  gap: var(--m);
  font-size: calc(var(--base-fs) * 12);
}
.footer-logipalette .logos .logo-logipalette {
  height: calc(37 / var(--v));
}
.footer-logipalette .logos .parent {
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer-logipalette .logos .logo-logitech-mini {
  height: calc(21 / var(--v));
}
.footer-logipalette .links {
  flex-wrap: wrap;
  justify-content: space-between;
}
.footer-logipalette .links a.nav-external {
  display: flex;
  width: 47.5%;
  height: auto;
}
body.journal-top section.hero .subline {
  margin-left: -0.3em;
  font-size: calc(var(--base-fs) * 30);
  text-shadow: 1px 1px calc(var(--m) * 2) rgb( from var(--black) r g b / 0.3);
}
body.journal-top section.hero .subline::after {
  display: none;
}
body.journal-top section.hero .container {
  margin-inline: calc(-1 * var(--wrap-padding-inline) * 0.5);
  min-height: unset;
  display: block;
}
body.journal-top section.hero .card:first-child {
  height: calc(500 / var(--v));
}
body.journal-top section.hero .card:first-child a:has(.image)::before {
  background: linear-gradient(to bottom, transparent 30%, var(--black) 50%);
}
body.journal-top section.hero .card:first-child .image {
  height: auto;
  aspect-ratio: 335 / 540;
}
body.journal-top section.hero .card:first-child .text {
  padding-inline: calc(var(--m) * 2);
}
body.journal-top section.hero .card:first-child .title {
  margin-block: 0.5lh 0.25lh;
  font-size: calc(var(--base-fs) * 25);
  letter-spacing: 0.05ic;
  text-align: justify;
  text-shadow: 3px 3px 0 var(--black), 4px 4px 0 var(--black), 5px 5px 0 var(--black), 6px 6px 0 var(--black);
}
body.journal-top section.hero .card:first-child .indicators {
  display: block;
}
body.journal-top section.hero .card:not(:first-child) {
  margin-top: var(--m);
  align-items: stretch;
}
body.journal-top section.hero .card:not(:first-child) a:has(.image) {
  width: calc(120 / var(--v));
}
body.journal-top section.hero .card:not(:first-child) .text {
  padding-inline: calc(var(--m) * 1.5) var(--m);
}
body.journal-top section.hero .card:not(:first-child) .tag-series {
  font-size: calc(var(--base-fs) * 13);
}
body.journal-top section.hero .card:not(:first-child) .title {
  font-size: calc(var(--base-fs) * 15);
}
body.journal-top section.hero .card:not(:first-child) .indicators {
  font-size: calc(var(--base-fs) * 13);
}
body.journal-top section.hero .background {
  height: 75%;
}
body.journal-top section.latest .card {
  width: 100%;
}
body.journal-top section.series-orders .background {
  height: 100%;
  opacity: 0.8;
}
body.journal-top section.order {
  padding-bottom: var(--m);
  margin-bottom: calc(var(--m) * 3);
  position: relative;
  z-index: 0;
}
body.journal-top section.order::after {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background: var(--white);
  opacity: 0.7;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
body.journal-top section.order .headings {
  display: block;
  padding: calc(var(--m) * 1.5);
  background: transparent;
  margin-bottom: calc(var(--m) * 1.5);
}
body.journal-top section.order .headline {
  display: block;
  font-size: calc(var(--base-fs) * 21);
  text-align: center;
}
body.journal-top section.order .headline::before {
  width: 60px;
  height: 10px;
  background: linear-gradient(to right, var(--type-color));
  margin-inline: auto;
  margin-bottom: 0.5lh;
}
body.journal-top section.order .headline + p {
  margin-top: 0.5lh;
  font-size: calc(var(--base-fs) * 15);
}
body.journal-top section.order .container {
  margin-inline: calc(-1 * var(--wrap-padding-inline));
  padding-bottom: var(--m);
  flex-wrap: nowrap;
  --column-gap: calc(var(--m) * 1.5);
  overflow-x: scroll;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}
body.journal-top section.order .card {
  scroll-snap-align: center;
  flex-shrink: 0;
  width: 75%;
  border-radius: 5px;
  overflow: clip;
  box-shadow: 5px 5px calc(var(--m) * 2) calc(-1 * calc(var(--m) * 2)) var(--dark02);
}
body.journal-top section.order .card:first-child {
  margin-left: var(--column-gap);
}
body.journal-top section.order .card:last-child {
  margin-right: var(--column-gap);
}
body.journal-top section.order .card.type-row {
  flex-direction: column;
}
body.journal-top section.order .card.type-row a:has(.image) {
  width: 100%;
}
body.journal-top section.order .text {
  padding-block: var(--m);
  padding-inline: calc(var(--m) * 1.5);
}
body.journal-top section.order .nav-series {
  margin-top: calc(var(--m) * 2);
  width: auto;
  margin-inline: var(--m);
}
body:is(.journal-archive, .journal-tax) section.hero .headings {
  margin-bottom: 0;
}
body:is(.journal-archive, .journal-tax) section.hero .subline::after {
  display: none;
}
body:is(.journal-archive, .journal-tax) section.hero .tagline {
  flex-direction: column;
  justify-content: center;
  font-size: calc(var(--base-fs) * 27);
}
body:is(.journal-archive, .journal-tax) section.hero .tagline span {
  align-self: center;
  margin-top: 0.5lh;
  flex: 0 0 100%;
  font-size: calc(var(--base-fs) * 16);
  text-align: center;
}
body:is(.journal-archive, .journal-tax) section.hero .tagline::before {
  width: calc(var(--m) * 4);
  height: 12px;
  background: linear-gradient(to right, var(--type-color, var(--chart-color-mono)));
  border-radius: var(--m);
  margin-inline: auto;
  margin-bottom: 0.5lh;
}
body:is(.journal-archive, .journal-tax) section.hero .tagline + p {
  font-size: calc(var(--base-fs) * 15);
}
body:is(.journal-archive, .journal-tax) section.list {
  padding-bottom: calc(var(--m) * 8);
}
body:is(.journal-archive, .journal-tax) section.list .card {
  width: 100%;
}
body.journal-post main.content > .wrap {
  display: block;
}
body.journal-post .breadcrumbs {
  width: 100svw;
  height: calc(var(--m) * 3);
  margin-inline: calc(-1 * var(--wrap-padding-inline));
}
body.journal-post .breadcrumbs .container {
  padding-inline: var(--wrap-padding-inline);
  font-size: calc(var(--base-fs) * 12);
}
body.journal-post article {
  max-width: unset;
}
body.journal-post article img.billboard {
  max-width: 100svw;
  margin-inline: calc(-1 * var(--wrap-padding-inline));
}
body.journal-post article .headings {
  margin-block: calc(-1 * calc(var(--m) * 2)) 0;
  margin-inline: calc(-1 * var(--wrap-padding-inline) * 0.75);
  padding-block: calc(var(--m) * 1.5);
  padding-inline: calc(var(--m) * 1.5);
  background: var(--white);
  border-radius: var(--m);
  position: relative;
  z-index: 1;
}
body.journal-post article .headings .tagline {
  margin-block: 0.5lh;
  font-size: calc(var(--base-fs) * 22);
}
body.journal-post article .headings .indicators {
  border-top: 1px solid currentColor;
  padding-top: var(--m);
  font-size: calc(var(--base-fs) * 13);
}
body.journal-post article .headings .date {
  flex: unset;
  margin-bottom: 0.5lh;
}
body.journal-post article div#ez-toc-container {
  display: block;
  margin-bottom: calc(var(--m) * 5);
}
body.journal-post article .article-container {
  padding-bottom: calc(var(--m) * 5);
}
body.journal-post article .nav-series {
  margin-bottom: calc(var(--m) * 3);
}
body.journal-post .related-posts {
  padding-block: calc(var(--m) * 2);
  padding-inline: var(--wrap-padding-inline);
  margin-inline: calc(-1 * var(--wrap-padding-inline) * 0.5);
  background: var(--light03);
  border-radius: var(--m);
}
body.journal-post .related-posts .label {
  text-align: center;
  padding-bottom: 0.5lh;
  margin-bottom: 0.75lh;
}
body.journal-post .related-posts .container {
  --row-gap: calc(var(--m) * 2);
}
body.journal-post .related-posts .card {
  width: 100%;
  border-radius: 5px;
  overflow: clip;
}
body.journal-post .related-posts .text {
  padding-block: 0 var(--m);
  padding-inline: calc(var(--m) * 2);
}
body.journal-post aside {
  width: 100%;
  padding-block: calc(var(--m) * 3);
}
body.journal-post aside div#ez-toc-container {
  display: none;
}
body.journal-post aside > section {
  padding-block: calc(var(--m) * 1.5) calc(var(--m) * 2);
}
body.journal-post aside > section .label {
  text-align: center;
  padding-bottom: 0.5lh;
  margin-bottom: 0.75lh;
}
body.journal-post .featured {
  position: static;
}
body.journal-post .featured a:has(.image) {
  width: calc(120 / var(--v));
}
