@charset "UTF-8";
/*! Dulwich College */
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Light.woff2') format('woff2');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-LightItalic.woff2') format('woff2');
  font-display: swap;
  font-weight: 300;
  font-style: italic;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-RegularItalic.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-SemiBold.woff2') format('woff2');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-SemiBoldItalic.woff2') format('woff2');
  font-display: swap;
  font-weight: 600;
  font-style: italic;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-Bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/OpenSans-BoldItalic.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: italic;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Regular.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-RegularItalic.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: italic;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('../fonts/LibreBaskerville-Bold.woff2') format('woff2');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
  unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F, U+2000-206F;
}
:root {
  --breakpoint-small: 40rem;
  --breakpoint-medium: 60rem;
  --breakpoint-large: 90rem;
}

:root {
  --color-white: 0, 0%, 100%;
  --color-black: 0, 0%, 5%;
  --color-soft: 0, 0%, 93%;
  --color-medium: 216, 2%, 59%;
  --color-hard: 330, 2%, 19%;
  --color-grey-15: 0, 0%, 15%;
  --color-grey-25: 0, 0%, 25%;
  --color-grey-40: 0, 0%, 40%;
  --color-grey-45: 0, 0%, 45%;
  --color-grey-60: 0, 0%, 60%;
  --color-grey-70: 0, 0%, 70%;
  --color-red: 343, 88%, 44%;
  --color-blue: 201, 100%, 39%;
  /* --color-orange1: 34, 93%, 54%;*/ /* #F7971D */
  --color-orange1: 33, 86%, 49%; /* #E88811  */ /* from current site: #e27d05 #ef9a13 */
  --color-theme: var(--color-red);
  --color: var(--color-hard);
  --background-color: var(--color-white);
}

/* @link https://utopia.fyi/type/calculator?c=320,16,1.125,960,18,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
  --step--1: clamp(0.89rem, 0.88rem + 0.03vw, 0.9rem);
  --step-0: clamp(1rem, 0.94rem + 0.31vw, 1.13rem);
  --step-1: clamp(1.13rem, 0.98rem + 0.7vw, 1.41rem);
  --step-2: clamp(1.27rem, 1.02rem + 1.23vw, 1.76rem);
  --step-3: clamp(1.42rem, 1.04rem + 1.93vw, 2.2rem);
  --step-4: clamp(1.6rem, 1.03rem + 2.86vw, 2.75rem);
  --step-5: clamp(1.8rem, 0.99rem + 4.08vw, 3.43rem);
  --line-0: 1.3;
  --line-1: 1.6;
}

/* @link https://utopia.fyi/space/calculator?c=320,16,1.125,960,18,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 960;
  --fluid-screen: 100vw;
  --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
}

@media screen and (min-width: 960px) {
  :root {
    --fluid-screen: calc(var(--fluid-max-width) * 1px);
  }
}
:root {
  --fc-3xs-min: (var(--fc-s-min) * 0.25);
  --fc-3xs-max: (var(--fc-s-max) * 0.25);
  --fc-2xs-min: (var(--fc-s-min) * 0.5);
  --fc-2xs-max: (var(--fc-s-max) * 0.5);
  --fc-xs-min: (var(--fc-s-min) * 0.75);
  --fc-xs-max: (var(--fc-s-max) * 0.75);
  --fc-s-min: (var(--f-0-min, 16));
  --fc-s-max: (var(--f-0-max, 18));
  --fc-m-min: (var(--fc-s-min) * 1.5);
  --fc-m-max: (var(--fc-s-max) * 1.5);
  --fc-l-min: (var(--fc-s-min) * 2);
  --fc-l-max: (var(--fc-s-max) * 2);
  --fc-xl-min: (var(--fc-s-min) * 3);
  --fc-xl-max: (var(--fc-s-max) * 3);
  --fc-2xl-min: (var(--fc-s-min) * 4);
  --fc-2xl-max: (var(--fc-s-max) * 4);
  --fc-3xl-min: (var(--fc-s-min) * 6);
  --fc-3xl-max: (var(--fc-s-max) * 6);
  /* T-shirt sizes */
  --space-3xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-3xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  --space-3xl: calc(((var(--fc-3xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-3xl-min)) * var(--fluid-bp));
  /* One-up pairs */
  --space-3xs-2xs: calc(((var(--fc-3xs-min) / 16) * 1rem) + (var(--fc-2xs-max) - var(--fc-3xs-min)) * var(--fluid-bp));
  --space-2xs-xs: calc(((var(--fc-2xs-min) / 16) * 1rem) + (var(--fc-xs-max) - var(--fc-2xs-min)) * var(--fluid-bp));
  --space-xs-s: calc(((var(--fc-xs-min) / 16) * 1rem) + (var(--fc-s-max) - var(--fc-xs-min)) * var(--fluid-bp));
  --space-s-m: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-m-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-l: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-l-min)) * var(--fluid-bp));
  --space-xl-2xl: calc(((var(--fc-xl-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-xl-min)) * var(--fluid-bp));
  --space-2xl-3xl: calc(((var(--fc-2xl-min) / 16) * 1rem) + (var(--fc-3xl-max) - var(--fc-2xl-min)) * var(--fluid-bp));
  /* Custom pairs */
  --space-s-l: calc(((var(--fc-s-min) / 16) * 1rem) + (var(--fc-l-max) - var(--fc-s-min)) * var(--fluid-bp));
  --space-m-xl: calc(((var(--fc-m-min) / 16) * 1rem) + (var(--fc-xl-max) - var(--fc-m-min)) * var(--fluid-bp));
  --space-l-2xl: calc(((var(--fc-l-min) / 16) * 1rem) + (var(--fc-2xl-max) - var(--fc-l-min)) * var(--fluid-bp));
}

:root {
  --font-sans: 'Open Sans', Arial, sans-serif;
  --font-serif: 'Libre Baskerville', 'Times New Roman', serif;
  --font-family: var(--font-sans);
  --font-size: var(--step-0);
  --line-height: var(--line-1);
}

:root {
  --page-height: 100%;
  --page-inline-space: var(--space-m-xl);
  --page-outer-max-width: 96.25rem;
  --page-inner-max-width: calc(var(--page-outer-max-width) - (var(--page-inline-space) * 2));
}

:root {
  --focus-shadow: 0 0 0 0.125rem hsl(var(--color-theme), 1);
  --text-shadow: 0 0 var(--space-3xs-2xs) hsl(var(--color-black), 0.6), 0 0 var(--space-l-xl) hsl(var(--color-black), 0.3);
}

.Darkmode {
  --focus-shadow: 0 0 0 0.125rem hsl(var(--color-white), 1);
}

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

* {
  color: hsl(var(--color));
  font-family: var(--font-family);
}

img,
svg,
picture {
  border: 0;
  display: block;
  height: auto;
  max-width: 100%;
}

input,
button,
textarea,
select {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  outline: 0;
}

blockquote,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

[dir='rtl'],
.translated-rtl {
  direction: rtl;
}

.Document {
  scroll-behavior: auto;
}
.Document.Noscript {
  scroll-behavior: auto;
}

@media (prefers-reduced-motion: reduce) {
  .Document {
    scroll-behavior: auto;
  }
}
.Body {
  background: hsl(var(--background-color));
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: visible;
  padding: 0;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
}

.Darkmode * {
  --color: var(--color-white);
}

::selection {
  background: hsl(var(--color-theme), 0.5);
  color: hsl(var(--color-white));
}

b,
strong {
  font-weight: 700;
}

abbr[title] {
  border: none;
  text-decoration: none;
}

a {
  box-shadow: none;
  color: hsl(var(--color));
  text-decoration: none;
  transition: color 200ms, text-decoration 200ms;
}
a * {
  color: currentColor;
}
a[href]:active,
a[href]:visited {
  color: hsl(var(--color));
}
a[href]:focus {
  box-shadow: var(--focus-shadow);
  outline: none;
}
a[href]:focus:not(:focus-visible) {
  --focus-shadow: none;
}
.js-focus-visible a[href]:not(.focus-visible) {
  --focus-shadow: none;
}
a[href^='mailto:'] {
  overflow-wrap: break-word;
}

p,
cite,
figcaption {
  font-size: var(--font-size);
  font-style: normal;
  line-height: var(--line-height);
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  --color: var(--color-theme);
  --font-family: var(--font-serif);
  --line-height: var(--line-0);
  font-size: var(--font-size);
  font-weight: 700;
  line-height: var(--line-height);
  margin: 0;
}

h1,
.H1 {
  --font-size: var(--step-3);
}

h2,
.H2 {
  --font-size: var(--step-3);
}

h3,
.H3 {
  --font-size: var(--step-1);
}

h4,
.H4 {
  --font-size: var(--step-1);
}

h5,
h6,
.H5,
.H6 {
  --font-size: var(--step-0);
}

.HH {
  --font-family: var(--font-serif);
  --line-height: var(--line-0);
}

.HP {
  --font-size: var(--step-0);
  --font-family: var(--font-sans);
  --line-height: var(--line-1);
}

.TextPrimary {
  --color: var(--color-theme) !important;
}

.TextLight {
  font-weight: 300;
}

.TextMedium {
  font-weight: 600;
}

.TextBold {
  font-weight: 700;
}

.TextItalic {
  font-style: italic;
}

.TextSerif {
  --font-family: var(--font-serif);
}

@media (min-width: 60rem) {
  .TextPrimary--above-medium {
    --color: var(--color-theme) !important;
  }

  .TextWhite--above-medium {
    --color: var(--color-white) !important;
  }
}
:root {
  --header-hamburger-size: var(--space-l);
  --header-hamburger-end: calc(3.125rem + var(--space-s-m));
}

.Hamburger {
  --duration: 0ms;
  --color: var(--color-white);
  --background-color: var(--color-theme);
  --font-size: var(--step--1);
  --focus-shadow: inset 0 0 0 0.25rem hsl(var(--background-color), 1), inset 0 0 0 0.375rem hsl(var(--color), 1);
  align-items: center;
  background: hsl(var(--background-color));
  cursor: pointer;
  display: flex;
  outline-offset: 0.125rem;
  padding: 0 var(--space-s-m);
}

@media (max-width: 39.9375rem) {
  :root {
    --header-hamburger-end: var(--space-s-m);
  }

  .Hamburger__label {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }
}
@keyframes hamburger-open-1 {
  0% {
    transform: translateY(-0.3125rem);
  }
  100% {
    transform: rotateZ(45deg) scaleX(1.2);
  }
}
@keyframes hamburger-open-2 {
  0% {
    transform: translateY(0.3125rem);
  }
  100% {
    transform: rotateZ(-45deg) scaleX(1.2);
  }
}
@keyframes hamburger-open-3 {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: rotateY(90deg);
  }
}
@keyframes hamburger-close-1 {
  0% {
    transform: rotateZ(45deg) scaleX(1.2);
  }
  100% {
    transform: translateY(-0.3125rem);
  }
}
@keyframes hamburger-close-2 {
  0% {
    transform: rotateZ(-45deg) scaleX(1.2);
  }
  100% {
    transform: translateY(0.3125rem);
  }
}
@keyframes hamburger-close-3 {
  0% {
    transform: rotateY(90deg);
  }
  100% {
    transform: translateZ(0);
  }
}
.Hamburger__icon {
  height: var(--header-hamburger-size);
  transition: transform var(--duration);
  transform: translateZ(0);
  width: var(--header-hamburger-size);
}
.Hamburger__icon circle,
.Hamburger__icon path {
  fill: none;
  stroke: hsl(var(--color));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.Hamburger__icon path {
  animation-duration: var(--duration);
  animation-fill-mode: forwards;
  transform-origin: 50% 50%;
}
.Hamburger__icon path:nth-of-type(1) {
  animation-name: hamburger-close-1;
}
.Hamburger__icon path:nth-of-type(2) {
  animation-name: hamburger-close-2;
}
.Hamburger__icon path:nth-of-type(3) {
  animation-name: hamburger-close-3;
}

.Hamburger__label {
  font-size: var(--font-size);
  font-weight: 600;
  text-align: end;
  width: 3.125rem;
}
.Noscript .Hamburger__label {
  margin-inline-start: var(--space-xs);
  width: auto;
}

.Hamburger--close .Hamburger__icon,
.Hamburger[aria-expanded='true'] .Hamburger__icon {
  transform: rotateZ(180deg);
}
.Hamburger--close .Hamburger__icon path:nth-of-type(1),
.Hamburger[aria-expanded='true'] .Hamburger__icon path:nth-of-type(1) {
  animation-name: hamburger-open-1;
}
.Hamburger--close .Hamburger__icon path:nth-of-type(2),
.Hamburger[aria-expanded='true'] .Hamburger__icon path:nth-of-type(2) {
  animation-name: hamburger-open-2;
}
.Hamburger--close .Hamburger__icon path:nth-of-type(3),
.Hamburger[aria-expanded='true'] .Hamburger__icon path:nth-of-type(3) {
  animation-name: hamburger-open-3;
}

.SR {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

@media (max-width: 59.9375rem) {
  .SR--below-medium {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }

  .Hide--below-medium {
    display: none !important;
  }
}
@media (max-width: 89.9375rem) {
  .SR--below-large {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
  }

  .Hide--below-large {
    display: none !important;
  }
}
.Logo {
  display: block;
  position: relative;
}
.Logo img {
  max-height: calc(var(--header-height) - (var(--space-xs-s) * 2));
  width: auto;
}
.Logo svg {
  position: absolute;
  inset: 0;
}
.Logo svg ~ picture {
  visibility: hidden;
}

:root {
  --list-bullet: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="3.5" fill="hsl(330, 2%, 19%)"/></svg>');
}

.Darkmode {
  --list-bullet: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="3.5" fill="hsl(0, 0%, 100%)"/></svg>');
}

.List {
  --list-indent: var(--space-m);
  list-style: none outside;
  margin-inline-start: var(--list-indent);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
.List > li {
  margin-block-end: var(--space-3xs);
  position: relative;
}
.List > li:last-child {
  margin-block-end: 0;
}
.List > li::before {
  background-image: var(--list-bullet);
  background-position: left calc(((var(--font-size) * var(--line-height)) / 2) - 0.1875rem);
  background-repeat: no-repeat;
  content: '•';
  color: transparent;
  display: block;
  height: 100%;
  margin-inline-start: calc(-1 * var(--list-indent));
  position: absolute;
  text-align: start;
  width: var(--list-indent);
  white-space: nowrap;
}
[dir='rtl'] .List > li::before {
  background-position-x: right;
}

.List--ordered {
  counter-reset: list-counter;
  list-style: none outside;
}
.List--ordered > li::before {
  background: none;
  content: counter(list-counter) '.';
  counter-increment: list-counter;
  color: hsla(var(--color));
  font-size: var(--step--1);
  line-height: calc(var(--font-size) * var(--line-height));
}

.Arrowlink {
  --color-fill: var(--color);
  --color-stroke: var(--color);
  appearance: none;
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--step-0);
  justify-content: space-between;
  line-height: var(--line-0);
  max-width: max-content;
}
.Arrowlink circle,
.Arrowlink path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  transition: fill 200ms, stroke 200ms;
}
.Arrowlink svg {
  fill: none;
  flex-shrink: 0;
  height: var(--header-hamburger-size);
  order: 2;
  stroke: hsl(var(--color-stroke));
  width: var(--header-hamburger-size);
}
.Arrowlink span {
  order: 1;
  margin-inline-end: var(--space-xs-s);
  color: hsl(var(--color-stroke));
  transition: color 150ms;
}
.Arrowlink:hover {
  --color-stroke: var(--color-theme);
}
.Darkmode .Arrowlink:not([class*='Arrowlink--fill']) {
  --color-stroke: var(--color-white);
}

.Arrowlink--mirror svg {
  order: -1;
  transform: rotateZ(-180deg);
}
.Arrowlink--mirror span {
  margin-inline-end: 0;
  margin-inline-start: var(--space-xs-s);
}

.Arrowlink--fill,
.Arrowlink--fill-theme {
  --color-fill: var(--color-white);
  --color-stroke: var(--color-grey-40);
}
.Arrowlink--fill circle,
.Arrowlink--fill-theme circle {
  stroke: none;
  fill: hsl(var(--color-fill));
}
.Arrowlink--fill path,
.Arrowlink--fill-theme path {
  fill: none;
  stroke: hsl(var(--color-stroke));
  stroke-width: 3;
  transition: stroke 200ms;
}
.Arrowlink--fill:hover,
.Arrowlink--fill-theme:hover {
  --color-fill: var(--color-white);
  --color-stroke: var(--color-theme);
}

.Arrowlink--fill-theme {
  --color-fill: var(--color-theme);
  --color-stroke: var(--color-white);
}
.Arrowlink--fill-theme circle {
  fill: hsl(var(--color-fill));
}
.Arrowlink--fill-theme path {
  stroke: hsl(var(--color-stroke));
}
.Arrowlink--fill-theme:hover {
  --color-fill: var(--color-theme);
  --color-stroke: var(--color-white);
}

.Closelink {
  appearance: none;
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--step-0);
  justify-content: space-between;
  line-height: var(--line-0);
  max-width: max-content;
}
.Closelink circle,
.Closelink path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.Closelink svg {
  --color: inherit;
  fill: none;
  flex-shrink: 0;
  height: var(--header-hamburger-size);
  order: 2;
  stroke: hsl(var(--color));
  transition: stroke 200ms;
  transform: rotateZ(180deg);
  width: var(--header-hamburger-size);
}
.Closelink span {
  order: 1;
  margin-inline-end: var(--space-xs-s);
}
.Closelink:hover {
  --color: var(--color-theme);
}
.Darkmode .Closelink {
  --color-theme: var(--color-white);
}

.Morelink {
  align-items: center;
  display: flex;
  font-size: var(--step-0);
  line-height: var(--line-0);
  max-width: max-content;
}
.Morelink circle,
.Morelink path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}
.Morelink svg {
  --color: inherit;
  fill: none;
  flex-shrink: 0;
  height: var(--space-l-xl);
  order: 2;
  stroke: hsl(var(--color));
  transition: stroke 200ms;
  transform: rotateZ(90deg);
  width: var(--space-l-xl);
}
.Morelink span {
  order: 2;
  margin-inline-start: var(--space-xs-s);
}

.Quote {
  --quote-font-size: var(--step-2);
}
.Quote blockquote {
  --font-size: var(--quote-font-size);
  --font-family: var(--font-serif);
  --line-height: var(--line-0);
}
.Quote blockquote > p {
  max-width: 20ch;
}
.Quote blockquote > p:first-of-type::before {
  content: '“';
  display: inline-block;
  margin-inline-start: -1ch;
  text-align: end;
  width: 1ch;
}
.Quote blockquote > p:last-of-type::after {
  content: '”';
}
.Quote figcaption {
  --font-size: var(--step-0);
  font-weight: 700;
  margin-block-start: var(--space-s);
}

.Quote--no-marks blockquote > p:first-of-type::before {
  display: none;
}
.Quote--no-marks blockquote > p:last-of-type::after {
  display: none;
}

@media (min-width: 60rem) {
  .Quote {
    --quote-font-size: var(--step-1);
  }
}
.Dot {
  --background-color: var(--color-white);
  --background-alpha: 1;
  --border-alpha: 0;
  appearance: none;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  height: 1.75rem;
  width: 1.75rem;
  position: relative;
}
.Dot::after {
  background: hsl(var(--background-color), var(--background-alpha));
  border: 0.125rem solid hsl(var(--background-color), var(--border-alpha));
  border-radius: 100%;
  content: '';
  display: block;
  height: 0.875rem;
  width: 0.875rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.Dot--active {
  --background-alpha: 0;
  --border-alpha: 1;
}

.Menu {
  --color: var(--color-grey-70);
  --font-size: var(--step-0);
  --font-weight: 700;
  --line-height: var(--line-1);
  --menu-link-block-space: var(--space-2xs);
  --menu-link-inline-space: 0.375rem;
}

.Menu__item {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Menu__item > * {
  min-width: 0;
}

.Menu__item--active {
  --color: var(--color-white);
}
.Menu__item--active::after {
  content: '';
  background: currentColor;
  border-radius: 100%;
  display: block;
  flex-shrink: 0;
  height: 0.4375rem;
  width: 0.4375rem;
}

.Menu__link {
  display: block;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  margin-inline-start: calc(-1 * var(--menu-link-inline-space));
  max-width: max-content;
  padding: var(--menu-link-block-space) var(--menu-link-inline-space);
  text-align: start;
}
.Menu__link:hover {
  --color: var(--color-white);
}
.Menu__link:focus-visible {
  --color: var(--color-white);
}
.Menu__link[type='button'] {
  color: hsl(var(--color));
  cursor: pointer;
  transition: color 200ms;
  max-width: none;
}
.Menu__link[type='button'] * {
  color: currentColor;
}
.Menu__link[type='button']:focus {
  box-shadow: var(--focus-shadow);
  outline: none;
}
.Menu__link[type='button']:focus:not(:focus-visible) {
  --focus-shadow: none;
}
.js-focus-visible .Menu__link[type='button']:not(.focus-visible) {
  --focus-shadow: none;
}

.Menu__link--button {
  --background-color: var(--color-theme);
  --color: var(--color-white);
  --font-size: var(--step--1);
  --menu-link-block-space: var(--space-xs);
  --menu-link-inline-space: var(--space-m);
  background: hsl(var(--background-color));
  border-radius: var(--space-3xs);
  flex-grow: 1;
  margin-inline-start: 0;
  max-width: none;
}
.Menu__item > .Menu__link--button {
  margin-block-end: var(--space-xs);
}

.Menu__link--button,
.Menu__link[type='button'] {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.Menu--secondary {
  --color: var(--color-white);
  --font-size: var(--step--1);
  --font-weight: 400;
}

.Menu--dropdown {
  --background-color: var(--color-black);
  --background-offset: calc((var(--font-size) * var(--line-height)) + (var(--menu-link-block-space) * 2));
  display: flex;
  flex-direction: column;
  height: var(--background-offset);
  padding-inline-end: var(--space-s);
  padding-inline-start: var(--space-s);
  position: relative;
  transform: translateZ(0);
}
.Menu--dropdown .Menu__link {
  margin: 0;
  max-width: none;
  width: 100%;
}
.Menu--dropdown .Menu__link[type='button'] {
  --font-weight: 400;
  z-index: 1;
}
.Menu--dropdown .Menu__link[type='button'] svg {
  flex-shrink: 0;
  margin-inline-start: var(--space-2xs);
}
.Menu--dropdown .Menu__link[type='button'][aria-expanded='true'] svg {
  transform: rotateX(180deg);
}
.Menu--dropdown .Menu__link--button[type='button'] {
  --background-color: var(--color-grey-25);
  --font-weight: 700;
}
.Menu--dropdown .Menu__list {
  display: block;
  margin-inline-end: calc(-1 * var(--space-s));
  margin-inline-start: calc(-1 * var(--space-s));
  padding: 0 var(--space-s);
  position: relative;
  padding-block-end: var(--space-xs);
}
.Menu--dropdown .Menu__list::before {
  background: hsl(var(--background-color));
  border-radius: var(--space-xs);
  box-shadow: 0 0.3px 1.1px hsl(var(--color-black), 0.084), 0 0.7px 2.7px hsl(var(--color-black), 0.121), 0 1.3px 5px hsl(var(--color-black), 0.15), 0 2.2px 8.9px hsl(var(--color-black), 0.179), 0 4.2px 16.7px hsl(var(--color-black), 0.216), 0 10px 40px hsl(var(--color-black), 0.3);
  content: '';
  display: block;
  inset: 0;
  inset-block-start: calc(-1 * (var(--background-offset) + var(--space-xs)));
  transition: opacity 100ms;
  position: absolute;
  z-index: -1;
}
.Menu--dropdown .Menu__list[aria-hidden='true'] {
  display: none;
  pointer-events: none;
}
.Nav .Menu--dropdown {
  flex-grow: 1;
  padding: 0;
}
.Nav .Menu--dropdown .Menu__list {
  --font-size: var(--step--1);
  --font-weight: 400;
  padding-block-start: var(--space-xs);
}
.Nav .Menu--dropdown .Menu__list::before {
  display: none;
}

.Breadcrumb {
  --color: var(--color-grey-60);
  --font-weight: 400;
  --breadcrumb-separator: 0.625rem;
  display: block;
}
.Breadcrumb .Menu__item:first-child {
  --color: var(--color-white);
  --font-weight: 700;
}

.Breadcrumb__toggle {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.Breadcrumb__toggle svg {
  display: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.125rem;
}

@media (min-width: 60rem) {
  .Breadcrumb .Menu__list {
    align-items: center;
    display: flex;
    min-height: 100%;
    padding-inline-end: 1.25rem;
    padding-inline-start: 1.25rem;
  }
  .Breadcrumb .Menu__item {
    min-width: 0;
  }
  .Breadcrumb .Menu__item::after {
    --color: var(--color-grey-60);
    content: '/';
    display: block;
    font-weight: 300;
    margin-inline-end: calc(var(--menu-link-inline-space) + var(--breadcrumb-separator));
    margin-inline-start: var(--breadcrumb-separator);
  }
  .Breadcrumb .Menu__item:first-child {
    --color: var(--color-white);
    --font-weight: 700;
    flex-shrink: 0;
  }
  .Breadcrumb .Menu__item:last-child::after {
    display: none;
  }
  .Breadcrumb .Menu__link {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 59.9375rem) {
  .Breadcrumb {
    display: none;
    --background-color: var(--color-grey-15);
    --breadcrumb-height: 2.625rem;
    padding: 0 var(--page-inline-space);
  }
  .Breadcrumb .Breadcrumb__toggle {
    --background-color: var(--color-grey-25);
    background: hsl(var(--background-color));
    height: var(--breadcrumb-height);
    margin: calc(-1 * var(--menu-item-space)) calc(-1 * var(--page-inline-space));
    max-width: none;
    padding: var(--menu-link-block-space) var(--page-inline-space);
    padding-inline-end: 1.25rem;
    width: 100vw;
  }
  .Breadcrumb .Breadcrumb__toggle svg {
    display: block;
  }
  .Breadcrumb .Menu__item:not(:first-child) {
    display: none;
  }
  .Breadcrumb .Menu__item:nth-child(2) {
    margin-top: 1.25rem;
  }
}
.Prose {
  --prose-space: var(--space-s-m);
  display: flex;
  flex-direction: column;
  margin-block-end: var(--prose-space);
  max-width: 55ch;
}
.Prose:last-child {
  margin-block-end: 0;
}
.Prose > * {
  margin-block-end: var(--prose-space);
}
.Prose > *:last-child {
  margin-block-end: 0;
}
.Prose a {
  --color: var(--color-theme);
  --underline-alpha: 0.6;
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: all;
  text-decoration-thickness: 0.0625rem;
  text-decoration-color: hsl(var(--color), var(--underline-alpha));
}
.Prose a:focus {
  --underline-alpha: 0;
}
.Prose a:hover {
  --underline-alpha: 0.2;
}
.Prose :is(ol, ul):not([class]) {
  --list-indent: var(--space-m);
  list-style: none outside;
  margin-inline-start: var(--list-indent);
  font-size: var(--font-size);
  line-height: var(--line-height);
}
.Prose :is(ol, ul):not([class]) > li {
  margin-block-end: var(--space-3xs);
  position: relative;
}
.Prose :is(ol, ul):not([class]) > li:last-child {
  margin-block-end: 0;
}
.Prose :is(ol, ul):not([class]) > li::before {
  background-image: var(--list-bullet);
  background-position: left calc(((var(--font-size) * var(--line-height)) / 2) - 0.1875rem);
  background-repeat: no-repeat;
  content: '•';
  color: transparent;
  display: block;
  height: 100%;
  margin-inline-start: calc(-1 * var(--list-indent));
  position: absolute;
  text-align: start;
  width: var(--list-indent);
  white-space: nowrap;
}
[dir='rtl'] .Prose :is(ol, ul):not([class]) > li::before {
  background-position-x: right;
}
.Prose ol:not([class]) {
  counter-reset: list-counter;
  list-style: none outside;
}
.Prose ol:not([class]) > li::before {
  background: none;
  content: counter(list-counter) '.';
  counter-increment: list-counter;
  color: hsla(var(--color));
  font-size: var(--step--1);
  line-height: calc(var(--font-size) * var(--line-height));
}

.Prose--long {
  max-width: none;
}
.Prose--long .HH a {
  text-decoration-style: dashed;
}
.Prose--long .HH a:not(:hover) {
  --color: unset;
}

.Carousel {
  --carousel-gap: 1.25rem;
  display: flex;
  gap: var(--carousel-gap);
  margin-block-end: var(--space-s-m);
  overflow-y: hidden;
  overflow-x: auto;
  position: relative;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  outline: none !important;
}
.Carousel::-webkit-scrollbar {
  display: none;
}
.Carousel > div:empty {
  position: relative;
}
.Carousel > div:empty:first-child {
  inset-inline-start: 10%;
  margin-inline-end: calc(-1 * var(--carousel-gap));
}
.Carousel > div:empty:last-child {
  inset-inline-end: 10%;
  margin-inline-start: calc(-1 * var(--carousel-gap));
}
.Carousel:last-child {
  margin-block-end: 0;
}

.Carousel__image {
  flex: 1 0 100%;
  min-height: 100%;
  scroll-snap-align: start;
}

.Carousel__pagination {
  align-items: center;
  display: flex;
  inset-block-end: 0;
  inset-inline-start: 50%;
  justify-content: center;
  margin-block-start: auto;
  padding-block-end: var(--space-m);
  pointer-events: none;
  position: sticky;
  transform: translateX(-50%);
  order: -1;
  z-index: 1;
}
.Carousel__pagination > * {
  flex-shrink: 0;
  pointer-events: all;
  position: relative;
}

.Carousel__arrows {
  --background-color: var(--color-black);
  background: hsl(var(--background-color), 0.6);
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-s);
}
.Carousel__arrows > * {
  flex: 0 0 auto;
}
.Carousel__arrows .Arrowlink {
  padding: 0;
}
.Carousel__arrows .Arrowlink:first-of-type {
  transform: rotateZ(-180deg);
}
.Carousel__arrows .Arrowlink:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.Carousel--arrows .Carousel__pagination {
  flex: 0 0 100%;
  inset-inline-start: 0;
  justify-content: flex-end;
  margin-inline-end: -100%;
  padding-block-end: 0;
  transform: none;
}

.Carousel--height {
  --aspect-ratio-x: 4;
  --aspect-ratio-y: 3;
  aspect-ratio: var(--aspect-ratio-x) / var(--aspect-ratio-y);
}
.Carousel--height .Carousel__image {
  flex: 0 1 auto;
  height: 100%;
  object-fit: cover;
  max-height: 100%;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .Carousel {
    scroll-behavior: auto;
  }
}
.Template-1 {
  display: grid;
  grid-template-columns: [media-start] var(--inline-start-offset) var(--page-inline-space) [main-start] auto [main-end] var(--page-inline-space) [media-end];
  grid-template-rows: [media-start] var(--header-height) [main-start] 1fr [main-end footer-start] auto [footer-end media-end];
}
.Page[aria-hidden='false']:first-child .Template-1 .Template-1__media {
  height: 100%;
  position: fixed;
  width: 100%;
}

.Template-1__media {
  grid-column: media-start/media-end;
  grid-row: media-start/media-end;
  z-index: 1;
}
.Template-1__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-1__main {
  align-self: center;
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
  padding-block-start: var(--space-l-2xl);
  position: relative;
  text-shadow: var(--text-shadow);
  z-index: 2;
}
.Template-1__main h1 {
  margin-bottom: var(--space-s-m);
}
.Template-1__main h1:last-child {
  margin-bottom: 0;
}

.Template-1__footer {
  grid-column: main-start/main-end;
  grid-row: footer-start/footer-end;
  padding-block-end: var(--space-l-2xl);
  position: relative;
  z-index: 3;
}

.Template-2a {
  display: grid;
  grid-template-columns: var(--page-inline-space) [aside-start main-start] 1fr [main-end aside-end] var(--page-inline-space);
  grid-template-rows: var(--header-height) var(--space-l-2xl) [aside-start] auto [aside-end main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-2a > * {
  align-self: start;
  grid-column: body-start/body-end;
}

.Template-2a__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-l-2xl);
}
.Template-2a__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-2a__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}

@media (min-width: 60rem) {
  .Template-2a {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [aside-start] 1.1fr [aside-end main-start] 1fr [main-end] var(--page-inline-space) clamp(0px, calc(100vw - var(--page-outer-max-width)), 100%);
    grid-template-rows: var(--header-height) var(--space-l-2xl) [aside-start main-start] 1fr [aside-end main-end];
  }

  .Template-2a__aside {
    max-width: none;
  }

  .Template-2a__main {
    justify-self: end;
    padding-inline-start: var(--space-l-2xl);
  }
}
@media (min-width: 90rem) {
  .Template-2a--wide {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [aside-start] clamp(0px, 40%, 41.25rem) [aside-end main-start] auto [main-end] var(--page-inline-space);
  }
  .Template-2a--wide .Template-2a__main {
    display: grid;
    gap: var(--space-m-l);
    grid-template-columns: 1fr 1fr;
    justify-self: start;
  }
}
.Template-2b {
  display: grid;
  grid-template-columns: var(--page-inline-space) [aside-start header-start main-start] 1fr [main-end header-end aside-end] var(--page-inline-space);
  grid-template-rows: [aside-start] auto [aside-end header-start] auto [header-end main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-2b > * {
  grid-column: body-start/body-end;
}

.Template-2b__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  max-width: none;
  padding-block-end: var(--space-l-2xl);
}
.Template-2b__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-2b__header {
  grid-column: header-start/header-end;
  grid-row: header-start/header-end;
  padding-block-end: var(--space-s-m);
}

.Template-2b__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}
.Template-2b__main .Arrowlink {
  margin-top: var(--space-m-xl);
}

@media (max-width: 59.9375rem) {
  .Template-2b__aside {
    margin-inline-end: calc(-1 * var(--page-inline-space));
    margin-inline-start: calc(-1 * var(--page-inline-space));
  }
}
@media (min-width: 60rem) {
  .Template-2b {
    grid-template-columns: [aside-start] var(--inline-start-offset) var(--page-inline-space) [header-start] 1fr [header-end main-start] 1fr [main-end] var(--page-inline-space) [aside-end];
    grid-template-rows: [aside-start] var(--header-height) var(--space-l-2xl) [header-start] auto [header-end main-start] 1fr [main-end aside-end];
  }

  .Template-2b__aside {
    padding: 0;
  }
  .Template-2b__aside img {
    object-position: center top;
  }
  .Template-2b__aside::after {
    --background-angle: to right;
    background: linear-gradient(var(--background-angle), hsl(var(--color-white), 0), hsl(var(--color-white), 0.95) 90%);
    content: '';
    display: block;
    height: 100%;
    inset: 0;
    inset-inline-start: auto;
    position: absolute;
    width: 50%;
  }
  [dir='rtl'] .Template-2b__aside::after {
    --background-angle: to left;
  }

  .Template-2b__header {
    padding-block-end: var(--space-l-2xl);
    position: relative;
  }
  .Template-2b__header * {
    --color: var(--color-hard);
  }

  .Template-2b__main {
    justify-self: end;
    padding-inline-start: var(--space-l-2xl);
    position: relative;
  }

  .Template-2b--no-gradient .Template-2b__aside::after {
    display: none;
  }
  .Template-2b--no-gradient .TextWhite--above-medium {
    text-shadow: var(--text-shadow);
  }
}
.Template-2c {
  --main-max-width: calc(var(--inline-start-offset) + 41.25rem);
  --background-color: var(--color-theme);
  background: hsl(var(--background-color));
  display: grid;
  grid-template-columns: [media-start main-start] var(--page-inline-space) clamp(0px, 50%, var(--main-max-width)) [main-end close-start] auto var(--page-inline-space) [close-end media-end];
  grid-template-rows: [media-start main-start] var(--header-height) auto [main-end footer-start] 1fr [footer-end media-end];
}
.Template-2c::after {
  background: hsl(var(--background-color));
  content: '';
  display: block;
  grid-column: main-start/main-end;
  grid-row: media-start/footer-end;
  z-index: 102;
}
.Template-2c > * {
  z-index: 103;
}

.Template-2c--mirror {
  grid-template-columns: [media-start] var(--page-inline-space) auto [main-start] clamp(0px, 50%, var(--main-max-width)) var(--page-inline-space) [main-end media-end];
}

.Template-2c__media {
  grid-column: media-start/media-end;
  grid-row: media-start/media-end;
  z-index: 100;
}
.Template-2c__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-2c__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-m-xl);
  padding-block-start: calc(var(--header-height) + var(--space-l-2xl));
  padding-inline-end: var(--space-l-2xl);
  padding-inline-start: calc(var(--inline-start-offset) + var(--page-inline-space));
  position: relative;
}
.Template-2c__main .HH {
  margin-top: var(--space-m-xl);
}

.Template-2c__footer {
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  grid-column: main-start/main-end;
  grid-row: footer-start/footer-end;
  padding-block-end: var(--space-l-2xl);
  padding-inline-end: var(--space-l-2xl);
  padding-inline-start: calc(var(--inline-start-offset) + var(--page-inline-space));
  position: relative;
}
.Template-2c__footer .Arrowlink {
  margin-block-end: var(--space-2xs);
  max-width: 30ch;
  min-width: 0;
}
.Template-2c__footer .Arrowlink:last-child {
  margin-block-end: 0;
}

.Template-2c__close {
  align-self: start;
  grid-column: close-start/close-end;
  grid-row: close-start/close-end;
  margin-block-start: calc(var(--space-l-2xl) - var(--space-s-m));
  padding-block-end: var(--space-s-m);
  padding-inline-end: var(--header-hamburger-end);
  justify-self: end;
}
.Template-2c__close .Arrowlink {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

@media (min-width: 60rem) {
  .Template-2c--multiply::after {
    mix-blend-mode: multiply;
  }

  .Template-2c__close {
    grid-row: main-start/main-end;
    margin-block-start: calc(var(--header-height) + var(--space-l-2xl));
  }
}
@media (max-width: 59.9375rem) {
  .Template-2c {
    grid-template-columns: [media-start header-start main-start close-start] var(--page-inline-space) auto [header-end main-end] var(--page-inline-space) [media-end close-end];
    grid-template-rows: [media-start] var(--header-height) [close-start] 30vh [close-end] 1fr [media-end main-start] auto [main-end footer-start] auto [footer-end];
  }
  .Template-2c::after {
    display: none;
  }

  .Template-2c__main {
    padding-block-start: var(--space-l-2xl);
  }

  .Template-2c__main,
  .Template-2c__footer {
    align-self: end;
    padding-inline-end: var(--page-inline-space);
    margin-inline-end: calc(-1 * var(--page-inline-space));
  }
}
.Template-3a {
  display: grid;
  grid-template-columns: var(--page-inline-space) [aside-start main-start] 1fr [main-end aside-end] var(--page-inline-space);
  grid-template-rows: var(--header-height) var(--space-l-2xl) [aside-start] auto [aside-end main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-3a > * {
  align-self: start;
  grid-column: body-start/body-end;
}

.Template-3a__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-l-2xl);
}
.Template-3a__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-3a__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}

@media (min-width: 60rem) {
  .Template-3a {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [aside-start] clamp(0px, 40%, 31.25rem) [aside-end main-start] 1fr [main-end] var(--page-inline-space) clamp(0px, calc(100vw - var(--page-outer-max-width)), 100%);
    grid-template-rows: var(--header-height) var(--space-l-2xl) [aside-start main-start] 1fr [aside-end main-end];
  }

  .Template-3a__main {
    justify-self: end;
    padding-inline-start: var(--space-l-2xl);
  }
}
@media (min-width: 90rem) {
  .Template-3a__main {
    display: grid;
    gap: var(--space-m-l);
    grid-template-columns: 1fr 1fr;
  }
  .Template-3a__main .Prose {
    margin-bottom: 0;
  }
}
.Template-3b {
  display: grid;
  grid-template-columns: var(--page-inline-space) [close-start aside-start main-start] 1fr [aside-end main-end] var(--page-inline-space) [close-end];
  grid-template-rows: var(--header-height) var(--space-l-2xl) [close-start] auto [close-end aside-start] auto [aside-end] auto [main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-3b > * {
  align-self: start;
  grid-column: body-start/body-end;
}

.Template-3b__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-l-2xl);
}
.Template-3b__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-3b__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}

.Template-3b__close {
  grid-column: close-start/close-end;
  grid-row: close-start/close-end;
  justify-self: end;
  margin-block-start: calc(-1 * var(--space-s-m));
  padding-block-end: var(--space-s-m);
  padding-inline-end: var(--header-hamburger-end);
  position: relative;
}
.Template-3b__close .Closelink {
  margin-inline-start: auto;
}

@media (min-width: 60rem) {
  .Template-3b {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [aside-start] clamp(0px, 50%, 55rem) [aside-end close-start main-start] auto [main-end] clamp(0px, calc(100vw - var(--page-outer-max-width)), 100%) var(--page-inline-space) [close-end];
    grid-template-rows: var(--header-height) var(--space-l-2xl) [aside-start close-start] auto [close-end main-start] 1fr [aside-end main-end];
  }

  .Template-3b__main {
    justify-self: end;
    padding-inline-start: var(--space-l-2xl);
  }

  .Template-3b__close {
    margin-block-start: 0;
    padding-block-end: 0;
  }
}
@media (min-width: 90rem) {
  .Template-3b__main:not(:last-child) > .Prose:first-child > :is(h1, h2):first-child {
    margin-block-start: calc(-1 * var(--header-hamburger-size));
    padding-inline-end: var(--header-hamburger-size);
  }
}
.Template-3c {
  display: grid;
  grid-template-columns: var(--page-inline-space) [close-start aside-start main-start] 1fr [aside-end main-end] var(--page-inline-space) [close-end];
  grid-template-rows: var(--header-height) var(--space-l-2xl) [close-start] auto [close-end aside-start] auto [aside-end] auto [main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-3c > * {
  align-self: start;
  grid-column: body-start/body-end;
}

.Template-3c__close {
  grid-column: close-start/close-end;
  grid-row: close-start/close-end;
  margin-block-start: calc(-1 * var(--space-s-m));
  padding-block-end: var(--space-s-m);
  padding-inline-end: var(--header-hamburger-end);
  justify-self: end;
}
.Template-3c__close .Closelink {
  margin-inline-start: auto;
}

.Template-3c__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-l-2xl);
}
.Template-3c__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-3c__close {
  grid-column: close-start/close-end;
  grid-row: close-start/close-end;
}

.Template-3c__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}

@media (min-width: 60rem) {
  .Template-3c {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [main-start] auto [main-end aside-start] clamp(0px, 40%, 41.25rem) [aside-end close-start] auto var(--page-inline-space) [close-end];
    grid-template-rows: var(--header-height) var(--space-l-2xl) [aside-start close-start main-start] auto [close-end] 1fr [aside-end main-end];
  }

  .Template-3c__main {
    padding-inline-end: var(--space-l-2xl);
  }

  .Template-3c__close {
    margin-block-start: 0;
    padding-block-end: 0;
    padding-inline-start: var(--space-s-m);
  }

  .Template-3c--short {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [close-start main-start] 25rem [main-end aside-start] minmax(0px, 55rem) [aside-end] auto clamp(calc((var(--header-hamburger-end) - var(--page-inline-space)) + var(--header-hamburger-size) + var(--space-s-m)), calc(100vw - var(--page-outer-max-width)), 100%) var(--page-inline-space) [close-end];
  }
}
@media (min-width: 90rem) {
  .Template-3c:not([class*='Template-3c--']) .Template-3c__main {
    display: grid;
    gap: var(--space-m-l);
    grid-template-columns: 1fr 1fr;
  }
  .Template-3c:not([class*='Template-3c--']) .Template-3c__main .Prose {
    margin-bottom: 0;
  }
}
.Template-4 {
  display: grid;
  grid-template-columns: [media-start] var(--inline-start-offset) var(--page-inline-space) [main-start footer-start] auto [main-end] var(--page-inline-space) [footer-end media-end];
  grid-template-rows: [media-start] var(--header-height) var(--space-l-2xl) [main-start footer-start] 1fr [main-end footer-end aside-start] auto [aside-end media-end];
}

.Template-4__media {
  grid-column: media-start/media-end;
  grid-row: media-start/media-end;
}
.Template-4__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-4__main {
  align-self: start;
  justify-self: start;
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
  padding-inline-end: var(--space-l);
  text-shadow: var(--text-shadow);
}

.Template-4__aside {
  justify-self: end;
  grid-column: main-start/main-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-l-2xl);
  text-shadow: var(--text-shadow);
}

.Template-4__footer {
  align-self: start;
  grid-column: footer-start/footer-end;
  grid-row: footer-start/footer-end;
  margin-block-start: calc(-1 * var(--space-s-m));
  padding-block-end: var(--space-s-m);
  padding-inline-end: var(--header-hamburger-end);
  justify-self: end;
}
.Template-4__footer .Arrowlink {
  margin-inline-start: auto;
}

@media (min-width: 60rem) {
  .Template-4__footer {
    margin-block-start: 0;
    padding-block-end: 0;
  }
}
.Template-5a {
  display: grid;
  grid-template-columns: var(--page-inline-space) [aside-start header-start main-start close-start] 1fr [main-end header-end aside-end] var(--page-inline-space) [close-end];
  grid-template-rows: var(--header-height) var(--space-l-2xl) [close-start] auto [close-end aside-start] auto [aside-end] auto [header-start] auto [header-end main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-5a > * {
  align-self: start;
  grid-column: body-start/body-end;
}

.Template-5a__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-l-2xl);
}
.Template-5a__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-5a__header {
  justify-self: start;
  grid-column: header-start/header-end;
  grid-row: header-start/header-end;
  padding-block-end: var(--space-s-m);
}

.Template-5a__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}

.Template-5a__close {
  grid-column: close-start/close-end;
  grid-row: close-start/close-end;
  margin-block-start: calc(-1 * var(--space-s-m));
  padding-block-end: var(--space-s-m);
  padding-inline-end: var(--header-hamburger-end);
  justify-self: end;
}
.Template-5a__close .Closelink {
  margin-inline-start: auto;
}

@media (min-width: 60rem) {
  .Template-5a {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [aside-start header-start] clamp(0px, 40%, 34.375rem) [aside-end main-start close-start] 1fr [header-end main-end] clamp(0px, calc(100vw - var(--page-outer-max-width)), 100%) var(--page-inline-space) [close-end];
    grid-template-rows: var(--header-height) var(--space-l-2xl) [header-start close-start] auto [close-end header-end main-start aside-start] 1fr [aside-end main-end];
  }

  .Template-5a__aside {
    padding-inline-start: var(--space-l-2xl);
  }

  .Template-5a__header {
    padding-block-end: var(--space-l-2xl);
  }

  .Template-5a__main {
    justify-self: end;
    padding-inline-start: var(--space-l-2xl);
  }

  .Template-5a__close {
    margin-block-start: 0;
    padding-block-end: 0;
  }
}
@media (min-width: 90rem) {
  .Template-5a__main {
    display: grid;
    gap: var(--space-m-l);
    grid-template-columns: 1fr 1fr;
  }
  .Template-5a__main .Prose {
    margin-block-end: 0;
  }
  .Template-5a__main .Prose:first-child {
    grid-column: 1/-1;
    margin-block-end: var(--prose-space);
    max-width: none;
  }
}
.Template-5b {
  display: grid;
  grid-template-columns: var(--page-inline-space) [aside-start close-start header-start main-start] 1fr [main-end header-end aside-end] var(--page-inline-space) [close-end];
  grid-template-rows: var(--header-height) var(--space-l-2xl) [close-start] auto [close-end header-start] auto [header-end aside-start] auto [aside-end main-start] 1fr [main-end];
  margin-inline-end: auto;
}
.Template-5b > * {
  align-self: start;
  grid-column: body-start/body-end;
}

.Template-5b__aside {
  grid-column: aside-start/aside-end;
  grid-row: aside-start/aside-end;
  padding-block-end: var(--space-m-xl);
}
.Template-5b__aside img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-5b__header {
  grid-column: header-start/header-end;
  grid-row: header-start/header-end;
  padding-block-end: var(--space-s-m);
}

.Template-5b__close {
  grid-column: close-start/close-end;
  grid-row: close-start/close-end;
  margin-block-start: calc(-1 * var(--space-s-m));
  padding-block-end: var(--space-s-m);
  padding-inline-end: var(--header-hamburger-end);
  justify-self: end;
}
.Template-5b__close .Closelink {
  margin-inline-start: auto;
}

.Template-5b__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-end: var(--space-l-2xl);
}

@media (min-width: 60rem) {
  .Template-5b {
    grid-template-columns: var(--inline-start-offset) var(--page-inline-space) [aside-start header-start] clamp(0px, 40%, 34.375rem) [aside-end main-start close-start] 1fr [main-end header-end] clamp(0px, calc(100vw - var(--page-outer-max-width)), 100%) var(--page-inline-space) [close-end];
    grid-template-rows: var(--header-height) var(--space-l-2xl) [header-start close-start] auto [close-end header-end aside-start main-start] 1fr [aside-end main-end];
  }

  .Template-5b__header {
    padding-block-end: var(--space-l-2xl);
  }

  .Template-5b__main {
    justify-self: end;
    padding-inline-start: var(--space-l-2xl);
  }

  .Template-5b__close {
    margin-block-start: 0;
    padding-block-end: 0;
  }
}
@media (min-width: 90rem) {
  .Template-5b__main {
    display: grid;
    gap: var(--space-m-l);
    grid-template-columns: 1fr 1fr;
  }
  .Template-5b__main .Prose {
    margin-block-end: 0;
  }
}
.Template-6 {
  --background-color: var(--color-theme);
  background: hsl(var(--background-color));
  display: grid;
  grid-template-columns: [media-start] var(--inline-start-offset) [header-start] var(--page-inline-space) auto [header-end main-start] clamp(0px, 40%, 41.25rem) var(--page-inline-space) [main-end media-end];
  grid-template-rows: [media-start header-start] var(--header-height) auto [header-end main-start] auto [main-end footer-start] 1fr [footer-end media-end];
}
.Template-6::after {
  background: hsl(var(--background-color));
  content: '';
  display: block;
  grid-column: main-start/media-end;
  grid-row: media-start/footer-end;
  z-index: 102;
}
.Template-6::before {
  --background-angle: 130deg;
  background: linear-gradient(var(--background-angle), hsl(var(--color-black), 0.5), hsl(var(--color-black), 0));
  content: '';
  display: block;
  grid-column: media-start/media-end;
  grid-row: media-start/footer-end;
  z-index: 102;
}
[dir='rtl'] .Template-6::before {
  --background-angle: -130deg;
}
.Template-6 > * {
  z-index: 103;
}

.Template-6__media {
  grid-column: media-start/media-end;
  grid-row: media-start/media-end;
  z-index: 100;
}
.Template-6__media img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.Template-6__header {
  grid-column: header-start/header-end;
  grid-row: header-start/header-end;
  padding-block-start: calc(var(--header-height) + var(--space-l-2xl));
  padding-inline-end: var(--page-inline-space);
  padding-inline-start: var(--page-inline-space);
  text-shadow: var(--text-shadow);
}

.Template-6__main {
  grid-column: main-start/main-end;
  grid-row: main-start/main-end;
  padding-block-start: var(--space-m-xl);
  padding-block-end: var(--space-m-xl);
  padding-inline-end: var(--space-l-2xl);
  padding-inline-start: var(--page-inline-space);
}

.Template-6__footer {
  grid-column: main-start/main-end;
  grid-row: footer-start/footer-end;
  padding-block-end: var(--space-l-2xl);
  padding-inline-end: var(--space-l-2xl);
  padding-inline-start: var(--page-inline-space);
}
.Template-6__footer .Arrowlink {
  margin-block-end: var(--space-2xs);
  max-width: 30ch;
  min-width: 0;
}
.Template-6__footer .Arrowlink:last-child {
  margin-block-end: 0;
}

.Template-6--no-gradient::before {
  display: none;
}

@media (min-width: 60rem) {
  .Template-6--multiply::after {
    mix-blend-mode: multiply;
  }
}
@media (max-width: 59.9375rem) {
  .Template-6 {
    grid-template-columns: [media-start header-start main-start] var(--page-inline-space) auto [header-end main-end] var(--page-inline-space) [media-end];
    grid-template-rows: [media-start] var(--header-height) 30vh 1fr [media-end header-start] auto [header-end main-start] auto [main-end footer-start] auto [footer-end];
  }
  .Template-6::after,
  .Template-6::before {
    display: none;
  }

  .Template-6__header {
    padding-block-start: var(--space-l-2xl);
    text-shadow: none;
  }

  .Template-6__main {
    padding-block-start: var(--space-m-xl);
  }

  .Template-6__header,
  .Template-6__main,
  .Template-6__footer {
    align-self: end;
    padding-inline-end: var(--page-inline-space);
    margin-inline-end: calc(-1 * var(--page-inline-space));
  }
}
@media (prefers-reduced-motion: reduce) {
  [class*='Template'] {
    transition: none !important;
  }
  [class*='Template']::after,
  [class*='Template']::before {
    transition: none !important;
  }
}
@media (min-width: 60rem) {
  .Template-1__main {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-1__footer {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-2a__main {
    opacity: calc(1 * var(--visible));
    transform: translateY(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-2a__aside {
    opacity: calc(1 * var(--visible));
    transform: translateX(calc(-100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-2b__header {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-2b__main {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-2c::after {
    transform: translateX(calc(-100px * var(--invisible)));
    transition: transform 600ms;
  }

  .Template-2c__main {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-2c__footer {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-2c--mirror::after {
    transform: translateX(calc(100px * var(--invisible)));
    transition: transform 600ms;
  }

  .Template-3a__main {
    opacity: calc(1 * var(--visible));
    transform: translateY(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-3a__aside {
    opacity: calc(1 * var(--visible));
    transform: translateX(calc(-100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-3b__main {
    opacity: calc(1 * var(--visible));
    transform: translateY(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-3b__aside {
    opacity: calc(1 * var(--visible));
    transform: translateX(calc(-100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-3b__close {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-3c__main {
    opacity: calc(1 * var(--visible));
    transform: translateY(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-3c__aside {
    opacity: calc(1 * var(--visible));
    transform: translateX(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-3c__close {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-4__main {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-4__aside {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-4__footer {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-5a__header {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-5a__main {
    opacity: calc(1 * var(--visible));
    transform: translateY(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-5a__aside {
    opacity: calc(1 * var(--visible));
    transform: translateX(calc(-100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-5a__close {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-5b__header {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-5b__main {
    opacity: calc(1 * var(--visible));
    transform: translateY(calc(100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-5b__aside {
    opacity: calc(1 * var(--visible));
    transform: translateX(calc(-100px * var(--invisible)));
    transition: opacity 1200ms, transform 1200ms;
  }

  .Template-5b__close {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-6::after {
    transform: translateX(calc(100px * var(--invisible)));
    transition: transform 600ms;
  }

  .Template-6__header {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }

  .Template-6__main {
    opacity: calc(1 * var(--visible));
    transition: opacity 1200ms;
  }
}
:root {
  --header-height: calc(var(--space-l) + var(--space-m-xl));
}

.Header {
  --color: var(--color-white);
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  position: fixed;
  z-index: 9000;
}

.Header--background {
  --background-color: var(--color-hard);
  --background-alpha: 0.95;
  background: hsl(var(--background-color), var(--background-alpha));
  height: var(--header-height);
  mix-blend-mode: multiply;
}

.Header__main {
  align-items: center;
  display: flex;
  height: var(--header-height);
  justify-content: space-between;
  padding-inline-start: var(--page-inline-space);
}
.Header__main > * {
  min-width: 0;
}
.Header__main .Hamburger {
  align-self: stretch;
  flex-shrink: 0;
  margin-inline-start: var(--page-inline-space);
}

.Header__controls {
  align-items: flex-start;
  align-self: stretch;
  border-inline-start: 0.0625rem solid hsl(var(--color-white), 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-inline-end: auto;
  margin-inline-start: var(--page-inline-space);
  padding-inline-start: var(--space-l);
}
.Header__controls .Menu--dropdown {
  margin-block-end: calc(-1 * var(--space-2xs));
  margin-block-start: calc(-1 * var(--space-2xs));
  margin-inline-start: calc(-1 * (var(--space-s) + var(--menu-link-inline-space)));
  z-index: 1;
}
.Noscript .Header__controls {
  display: none;
}

.Header__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
  max-width: 100%;
}
.Header__title span {
  border-inline-start: 0.0625rem solid hsl(var(--color-white), 0.2);
  font-weight: 400;
  margin-inline-start: 1ch;
  padding-inline-start: 1ch;
}

@media (max-width: 59.9375rem) {
  .Header__controls {
    display: none;
  }
}
@media (min-width: 60rem) {
  .Header__main .Logo {
    flex-shrink: 0;
  }
  .Header__main .Breadcrumb {
    align-self: stretch;
    border-inline-start: 0.0625rem solid hsl(var(--color-white), 0.2);
    margin-inline-end: auto;
    margin-inline-start: 3.125rem;
  }
}
@media (max-width: 59.9375rem) {
  .Header__main .Breadcrumb {
    inset-inline-end: 0;
    inset-inline-start: 0;
    inset-block-start: var(--header-height);
    position: absolute;
  }
}
.Nav {
  background: hsl(var(--color-black), 0.3);
  position: relative;
}
.Script .Nav {
  display: none;
  inset: 0;
  inset-block-start: var(--header-height);
  position: fixed;
  z-index: 8000;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.Script .Nav[aria-hidden='false'] {
  display: flex;
}

.Nav__body {
  --color: var(--color-white);
  --background-color: var(--color-black);
  background: hsl(var(--background-color));
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.Nav__body > * {
  flex: 0 0 auto;
}
.Script .Nav__body {
  margin-inline-start: auto;
  max-width: calc(20rem + (var(--page-inline-space) * 2));
}

.Nav__header {
  --background-color: var(--color-grey-25);
  align-items: center;
  background: hsl(var(--background-color));
  display: flex;
  height: var(--header-height);
  justify-content: space-between;
  padding-inline-start: var(--page-inline-space);
}
.Nav__header > * {
  --color: var(--color-white);
  min-width: 0;
}
.Nav__header > .Hamburger {
  align-self: stretch;
}
.Script .Nav__header {
  display: none;
}

.Nav__main {
  align-items: flex-start;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  scroll-behavior: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.Nav__main::-webkit-scrollbar {
  display: none;
}
.Nav__main > * {
  flex: 1 0 100%;
}

.Nav__menu {
  display: block;
  height: 100%;
  position: relative;
  scroll-snap-align: start;
}
.Script .Nav__menu[aria-hidden='true'] {
  display: none;
}
.Noscript .Nav__menu ~ .Nav__menu:not(:target) {
  display: none;
}

.Nav__panel {
  background: hsl(var(--background-color));
  padding: var(--space-s-l) var(--page-inline-space);
}
.Nav__main ~ .Nav__panel {
  padding-block-start: 0;
}

.Nav__panel--secondary {
  --background-color: var(--color-grey-25);
}
.Nav__main ~ .Nav__panel--secondary {
  padding-block-start: var(--space-s-l);
}

.Main,
.Page,
.Template {
  height: 100vh;
  height: var(--page-height);
  position: relative;
  width: 100vw;
}
.Noscript .Main,
.Noscript .Page,
.Noscript .Template {
  height: auto;
  max-height: none;
}

.Main {
  --background-color: var(--color-white);
  z-index: 1;
}

.Main__pagination {
  --background-color: var(--color-medium);
  --background-alpha: 0.8;
  background: hsl(var(--background-color), var(--background-alpha));
  display: flex;
  justify-content: center;
  max-width: max-content;
  position: fixed;
  transform: translateX(-50%);
  transition: background-color 300ms;
  z-index: 1000;
  border-top-left-radius: var(--space-xs-s);
  border-bottom-left-radius: var(--space-xs-s);
  flex-direction: column;
  gap: var(--space-2xs-xs);
  inset-block-start: 50%;
  right: 0;
  padding: var(--space-xs-s) var(--space-2xs-xs);
  transform: translateY(-50%);
}
.Main__pagination:hover {
  --background-color: var(--color-hard);
  --background-alpha: 1;
}
.Noscript .Main__pagination {
  display: none;
}
.Main__pagination .Arrowlink {
  --color: var(--color-white);
  padding: 0;
  pointer-events: all;
}
.Main__pagination .Arrowlink:hover {
  --color: var(--color-theme);
}
.Main__pagination .Arrowlink:disabled {
  opacity: 0.3;
  pointer-events: none;
}
.Main__pagination .Arrowlink:first-of-type {
  transform: rotateZ(-90deg);
}
.Main__pagination .Arrowlink:last-of-type {
  transform: rotateZ(90deg);
}

.Page {
  --intersection: 1;
  background: hsl(var(--background-color));
  z-index: 2;
}
.Page[aria-hidden='true'] {
  --intersection: 0;
}

.Template {
  --inline-start-offset: 0px;
  --visible: var(--intersection);
  --invisible: calc(1 - var(--visible));
  background: hsl(var(--background-color));
  display: grid;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  z-index: 3;
}
[aria-hidden='true'] .Template {
  pointer-events: none !important;
  overflow: hidden !important;
}

@media (min-width: 90rem) {
  .Template {
    --inline-start-offset: 3.125rem;
  }
}
.Vertical {
  background: hsl(var(--background-color));
  display: flex;
  flex-direction: column;
  position: relative;
}
.Vertical > * {
  flex: 1 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  width: 100%;
}
.Script .Vertical {
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scroll-snap-type: block mandatory;
  scrollbar-width: none;
}
.Script .Vertical::-webkit-scrollbar {
  display: none;
}
.Noscript .Vertical {
  scroll-behavior: auto;
}

.Horizontal {
  background: hsl(var(--background-color));
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}
.Horizontal::-webkit-scrollbar {
  display: none;
}
.Horizontal > * {
  flex: 1 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.Wrapper {
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto clamp(0px, 100%, var(--page-inner-max-width)) auto;
  padding: calc(var(--header-height) + var(--space-l-2xl)) var(--page-inline-space) var(--space-l-2xl) var(--page-inline-space);
}
.Wrapper > * {
  grid-column: 2/3;
}