@font-face {
  font-family: "RokkittBold";
  src: url("../fonts_web/Rokkitt-Bold___version_06.woff2") format("woff2");
  /* src: url("./fonts_web/Rokkitt-Medium___version_06.woff2") format("woff2"); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sen";
  src: url("../fonts_web/Sen-Regular___version_06.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: GeistMonoMedium;
  src: url("../fonts_web/GeistMono-Medium-French.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: SpaceGroteskVariable;
  /* src: url("../fonts_web/BTGrotesk-SemiBold.woff2") format("woff2"); */
  src: url("../fonts_web/SpaceGrotesk-French.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: BTGroteskRegular;
  src: url("../fonts_web/LibreFranklin-VariableFont_wght______BEW.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-granite: #4B5C4Bff;
  --color-deep-saffron: #FD9936ff;
  --color-pearl-beige: #E6DBB7ff;
  --color-rusty-spice: #B14E30ff;
  --color-soft-apricot: #FCDEBDff;
  --color-deep-forest-transparent: #10241807;
  --color-deep-forest: #1d3f2b;
  --color-deeper-forest: #1c3024;
  --color-sage: #F3F4F1;
  --color-muted-ochre: #C9823E;
  --color-dusty-rose: #9A5B50;
  --color-warm-ivory: #F3EBDD;
  --z-index-bg-color: 4;
  --h1-size: clamp(2rem, 1.2rem + 2.5vw, 4rem);
  --h2-rem:  clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
  --h3-rem:  clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --h4-rem:  clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --h5-rem:  clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --p-rem:   clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --header-menu-height: 8dvh;
  --menu-height: clamp(2.6rem, 3.6rem, 8dvh);
  --padding-inline-inner-body: 6px;
  --padding-block-inner-body: 6px;
  --hero-height: calc(100dvh - var(--menu-height) - 10px);
  --padding-inline-px: .2em;
  --padding-block-px: 0.1em;
  --padding-content: min(1.1em, 11.2px) min(2.6em, 13.3px);
  --gap-content-px: 5px;
  --menu-mobile-width-px: 100dvw;
  --color-frame-border-0: rgb(199, 198, 198);
  --color-frame-border-1: black;
  --color-borders: #b7b9b7;
  --color-text: #282828;  
  --color-text-lighter: #282828b2;  
  --color-bg: #fcf8f1;
  --color-bg-dark: black;
  --color-text-dark: white;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scrollbar-gutter: stable;
  font-family: BTGroteskRegular, sans-serif;
  font-size: clamp(16px, 0.2vw + 15px, 18px);
  line-height: 1.5;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg);
}
body {
  width: 100%;
  position: relative;
  background-color: var(--color-bg);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-index-bg-color);
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
img,
picture,
video,
canvas,
svg {
  -webkit-user-drag: none;
  object-fit: cover;
  user-select: none;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  display: block;
}
button,
input,
textarea,
select {
  font: inherit;
}
input {
  field-sizing: content;
  height: 100%;
  width: 100%;
  border: none;
}
input:focus {
  outline: none;
}
textarea {
  field-sizing: content;
  min-width: 100px;
  max-width: 400px;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-text);
  max-width: 92vw;
  font-family: RokkittBold, sans-serif;
  line-height: 1.1;
  padding: 0;
  margin: 0;
  height: fit-content;
}
div:has(h1) {
  container-type: inline-size;
}
h1 {
  visibility: hidden;
  font-size: clamp(1.2rem, 1.2rem + 1.6cqw, 2.2rem);
  font-family: SpaceGroteskVariable, monospace;
}
h2 {
  font-size: var(--h2-rem);
}
h3 {
  font-size: var(--h3-rem);
}
h4 {
  font-size: var(--h4-rem);
}
h5 {
  font-size: var(--h5-rem);
}
p {
  text-wrap: pretty;
  color: var(--color-text);
  font-size: var(--p-rem);
  font-weight: 500;
  max-width: 65ch;
  line-height: 1.6;
}
a {
  font-size: var(--p-rem);
  font-weight: 500;
  width: fit-content;
  color: var(--color-text);
  text-decoration: none;
  font-style: normal;
}
span {
  display: inline-block;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
table {
  border-collapse: collapse;
}
textarea {
  resize: vertical;
}
code {
  font-family: FiraCode, monospace;
}
nav {
  width: 100%;
  height: 100%;
}
section {
  display: inline-block;
}
#body-inner {
  --menu-width: calc(100dvhw - (var(--padding-inline-inner-body)*2));
  padding: var(--padding-block-inner-body) var(--padding-block-inner-body);
}
#body-inner  > main > div:nth-of-type(1) {
  height: calc(100dvh - var(--padding-block-inner-body) - 7px);
  min-height: calc(100dvh - var(--padding-block-inner-body) - 7px);
  width: 100%;
  display: grid;
  grid-template-columns: 1% 15rem minmax(8dvw, 18dvw) minmax(0, 1%)  minmax(0, 1fr) 1%;
  grid-template-rows: var(--menu-height) auto;
}
#body-inner  main > section:not(:nth-of-type(1)) {
  margin-top: 40dvh;
}
#body-inner  main > section > *:not(svg, img, div:has(img), div:has(h1)) {
  padding: var(--padding-content)
}
#body-inner  main {
  border-inline: solid 1px var(--color-borders);
}
.is-hidden {
  visibility: hidden;
}
.is-hidden-hard {
  display: none;
}
em {
  font-style: normal;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-deep-forest) 25%, transparent) 0 2px,transparent 2px);
}
.svg-container {
  position:relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  padding:0;
  margin:0;
}
.svg-container > svg {
  position:absolute;
}

#site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
  background-size:
  180px 180px,
  300px 300px;

opacity: 0.1;
}
#site-header {
  position: relative;
  background-color: var(--color-bg);
  z-index: 10;
  border-block: 1px solid var(--color-borders);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
  grid-column: 1/-1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto;
}
#site-header.header-hidden {
  transform: translateY(-100%);
}
#site-header .nav {
  position: relative;
  z-index: 1;
  grid-column: 1/-1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  margin-inline: auto;
}
#site-header nav > svg {
  grid-column: 2;
  grid-row: 1;
  margin-block: auto;
  width: auto;
  height: clamp(22px, 3.4cqh, 45px);
}
#site-header nav ul svg {
  height: clamp(13px, 17%, 64px);
  grid-column: 2;
  grid-row: 1;
}
#a-a-z {
  overflow: visible;
}
#site-header ul {
  display: none;
  grid-column: -2;
  grid-row: 1;
}
#site-header:has(.menu-toggle[aria-expanded="true"]) #main-menu {
  animation: menu-open 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes menu-open {
  0% {
    transform: scaleY(0);
  }
  85% {
    transform: scaleY(1.008);
  }
  100% {
    transform: scaleY(1);
  }
}
#site-header:has(.menu-toggle[aria-expanded="true"]) #main-menu ul > li {
  animation: menu-content-open 500ms ease-out forwards;
}
@keyframes menu-content-open {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#site-header.menu-closing #main-menu {
  animation: menu-close 60ms ease-in forwards;
}
@keyframes menu-close {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}
#site-header.menu-closing #main-menu ul > li {
  animation: menu-content-out 60ms ease-in forwards;
}
@keyframes menu-content-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
}
.menu-toggle__icon {
  width: 28px;
  height: 20px;
  margin-top: auto;
  margin-bottom: auto;
}
#menu-toggle-wrap {
  width: 12dvw;
  height: 100%;
}
.menu-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform .35s cubic-bezier(.65, 0, .35, 1),
    opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] .menu-line--top {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-line--middle {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-line--bottom {
  transform: translateY(-6px) rotate(-45deg);
}
#main-menu {
  position: absolute;
  top: var(--menu-height);
  left: 0;
  width: calc(var(--menu-mobile-width-px) - var(--padding-inline-inner-body) - var(--padding-inline-inner-body) - 3px);
  height: calc(100dvh - var(--menu-height));
  background-color: var(--color-bg);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
  background-color: var(--color-sage);
}
#main-menu ul {
  display: grid;
  grid-template-columns: auto 5% 28%;
  grid-template-rows: repeat(3, 14%);
  width: 100%;
  height: 100%;
  padding-right: 1rem;
}
#main-menu ul > li {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  opacity: 0;
}
#main-menu ul > li:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1;
}
#main-menu ul > li:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
}
#main-menu ul > li:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 3;
}
#main-menu ul > li:nth-child(1) {
  grid-column: 1 / -1;
  grid-row: 1 ;
}
#main-menu ul > li:nth-child(1) > a {
  grid-column:3;
  grid-row:1;
}
#main-menu ul > li:nth-child(1) > svg {
  grid-column:2;
  grid-row:1;
}
#main-menu ul > li:nth-child(2) > a {
  grid-column:3;
  grid-row:2;
}
#main-menu ul > li:nth-child(2) > svg {
  grid-column:2;
  grid-row:2;
}
#main-menu ul > li:nth-child(3) > a {
  grid-column:3;
  grid-row:3;
}
#main-menu ul > li:nth-child(3) > svg {
  grid-column:2;
  grid-row:3;
}
#main-menu ul > li {
  border-bottom: var(--color-borders) solid 1px;
  padding-left: 4%;
}
#main-menu ul > li svg {
  justify-self: end;
  align-self: center;
  height: auto;
  width: 100%;
  color: var(--color-deep-forest);
}
#main-menu ul > li > a {
  font-size: .8rem;
  font-family: GeistMonoMedium;
  text-transform: uppercase;
  justify-self: start;
  align-self: center;
  margin-left: 7%;
  width: 100%;
}
#main-menu ul > li > a > svg {
  margin-right: 6%;
  margin-left: auto;
  width: clamp(8px, 25px, 10px);
}
.typewriter-caret {
  display: inline-block;
  width: 10px;
  height: 0.9em;
  margin-left: 0.12em;
  vertical-align: -0.05em;
  background: var(--color-text);
  animation: typewriter-caret-blink 800ms steps(1) infinite;
}
@keyframes typewriter-caret-blink {
  50% {
    opacity: 0;
  }
}

.border-dashed {
  background-image: url("../images/border-dashed.svg");
  background-repeat: repeat-x;
}

.x-b {
  --border-size: 1px;
  --corner-size: clamp(4px, .2rem, 12px);
  --corner-width:  var(--corner-size);
  --corner-height: var(--corner-size);
  --border-duration: 0ms;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
  padding: 0.2em 0.8em !important;
  width: max-content;
  height: max-content;
  aspect-ratio: 10 / 2;
  font-family: 'GeistMonoMedium';
}
.x-b x-b-label {
  line-height: 1em;
}
.x-b x-b-label .s-99 {
  display:none;
}
.x-b:not(.s-1) {
  background-color: #0e0e0e03;
}
.x-b:not(.s-2) {
  border: solid 1px #b7b9b73b;
}
.x-b.s-3 {
  border-color: #888616;
}
.x-b.s-3 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.x-b.s-3::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
}
.x-b.s-3:hover::before {
  content: none;
}
.x-b-label,
.x-b-border {
  position: relative;
  z-index: 2;
}
.x-b:hover .x-b-label{
  color: var(--color-text-lighter);
}
.x-b-border {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.x-b-t,
.x-b-r,
.x-b-b,
.x-b-l {
  position: absolute;
  display: block;
  transition: clip-path var(--border-duration) ease;
}
.x-b-t,
.x-b-b {
  left: var(--corner-width);
  right: var(--corner-width);
  height: var(--border-size);
  background-image: url("/images/button-border-x.svg");
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.x-b-t {
  top: 0;
  clip-path: inset(0 100% 0 0);
}
.x-b-b {
  bottom: 0;
  clip-path: inset(0 0 0 100%);
}
.x-b-l,
.x-b-r {
  top: var(--corner-height);
  bottom: var(--corner-height);
  width: var(--border-size);
  background-image: url("/images/button-border-y.svg");
  background-size: 100% auto;
  background-repeat: repeat-y;
}
.x-b-l {
  left: 0;
  clip-path: inset(0 0 100% 0);
}
.x-b-r {
  right: 0;
  clip-path: inset(100% 0 0 0);
}
.x-b-c {
  position: absolute;
  width: var(--corner-width);
  height: var(--corner-height);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transition: opacity var(--border-duration) ease;
  opacity: .5;
}
.x-b-c-tl {
  top: 2px;
  left: 2px;
  background-image: url("/images/button-border-corner-4.svg");
}
.x-b-c-tr {
  top: 2px;
  right: 2px;
  background-image: url("/images/button-border-corner-1.svg");
}
.x-b-c-br {
  right: 2px;
  bottom: 2px;
  background-image: url("/images/button-border-corner-2.svg");
}
.x-b-c-bl {
  bottom: 2px;
  left: 2px;
  background-image: url("/images/button-border-corner-3.svg");
}
.x-b:hover .x-b-c-tl {
  top: 4px;
  left: 4px;
}
.x-b:hover .x-b-c-tr {
  top: 4px;
  right: 4px;
}
.x-b:hover .x-b-c-br {
  bottom: 4px;
  right: 4px;
}
.x-b:hover .x-b-c-bl {
  bottom: 4px;
  left: 4px;
}
.x-b:hover .x-b-t,
.x-b:hover .x-b-b {
  left: 0;
  width: 100%;
}
.x-b:hover .x-b-l,
.x-b:hover .x-b-r {
  top: 0;
  height: 100%;
}
.x-b:hover .x-b-t,
.x-b:hover .x-b-b,
.x-b:hover .x-b-l,
.x-b:hover .x-b-r {
  clip-path: inset(0);
}
.x-b:hover .x-b-border {
  filter: drop-shadow(2px 2px 2px rgb(0 0 0 / 5%));
}
.x-b:hover .x-b-c {
  height: .3rem;
  width:  .3rem;
  opacity: 1 !important;
}
.x-b:hover .x-b-label {
  color: var(--color-text);
}
.x-b:hover {
  background-color: revert;
  border-color: transparent;
}
.x-b.s-a .x-b-c {
  opacity:0;
}

.image-grain {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width:97%;
  margin-inline: auto;
}
.image-grain img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-index-bg-color)+1);
  pointer-events: none;
  opacity: 0.34;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025' numOctaves='5' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='2' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cfilter id='micro'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23micro)'/%3E%3C/svg%3E");
  background-size:
    256px 256px,
    96px 96px,
    48px 48px;
    mix-blend-mode: multiply;
}

#hero {
  display:grid;
  grid-template-columns: subgrid;
}
#hero > div:has(.txt) {
  font-family: SpaceGroteskVariable;
  line-height: 0.9em;
  font-weight: 500;
}
#hero > div:has(h1) h1 {
  line-height: 1em;
  text-transform: uppercase;
}
#hero div:has(h1) {
  padding-top: 0.3rem;
}
#hero > p {
  font-family: Sen;
  font-size: .8rem;
  line-height:1.2em;
}
#hero p,
#hero h1,
#hero a,
#hero h2 {
  margin:0;
}
#hero .frame__ticks {
  position: absolute;
  inset: 0;
}
#hero .frame__cross {
  width: clamp(10px, .3rem, 32px);
  height: auto;
}
#hero-frame__content {
  --width: calc(100% - (var(--margin-inline) * 2));
  container-type: inline-size;
  margin-inline: 20px;
  width: var(--width);
  position: absolute;
  inset:0;
  margin-block: 20px;
}
#hero .hero-frame__dots {
  height: 100%;
  width: 100%;
}
#hero .hero-frame__ticks {
  height: 100%;
  width: 100%;
  
}
#hero .frame__cross.frame__cross--tl,
#hero .frame__cross.frame__cross--tr,
#hero .frame__cross.frame__cross--bl,
#hero .frame__cross.frame__cross--br {
  width: clamp(7px, 2cqw, 9px);
}
#hero .frame__cross.frame__cross--tl {
  top:  0;
  left: 0;
}
#hero .frame__cross.frame__cross--tr {
  top:  0;
  right:0;
}
#hero .frame__cross.frame__cross--bl {
  bottom:   0;
  left:   0;
}
#hero .frame__cross.frame__cross--br {
  bottom: 0;
  right: 0;
}
#hero-frame__content > div{
  height: 100%;
}
#hero-frame__content > div > svg {
  position: absolute;
  max-height: 100%;
  object-fit: contain;
}
#hero p {
  line-height: 1.2em;
}
#hero .extra-text,
#hero .extra-visual {
  display:none;
}
#hero > div:has(h1) .extra-text {
  font-family: SpaceGroteskVariable;
  font-size: clamp(0.7rem, 0.4rem + 1.7cqw, 2.5rem);
  font-weight:300;
  text-transform: uppercase;
}

.marquee{overflow:hidden}
.marquee>div{display:flex;width:max-content;gap:28px;will-change:transform}
.marquee>div>*{flex:none}

footer {
  margin-top: 1rem;
  font-size: .9rem;
  border-top: 1px solid color-mix(in srgb, var(--color-deep-forest) 30%, transparent);
  padding: 1em;
}
footer li {
  margin: 0.6em 0;
}
#footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, auto);
}
#footer-container > div {
  margin-top:2rem;
}
#footer-nav {
  border-top: 1px solid #e6e0e0;
  display:flex;
  grid-column: 1 / 5;
  grid-row: 2;
}
#footer-winzii > .brand-handwritten {
  font-size: 2.4rem;
}
#footer-winzii {
  display:flex;
  flex-direction: column;
  grid-column: 1 / 5;
  grid-row: 1;
}
#footer-nav-legal-info {
  border-top: 1px solid #e6e0e0;
  display:flex;
  flex-direction: column;
  grid-column: 1 / 5;
  grid-row: 3;
}
#footer-copyright {
  display: flex;
  gap: 0.5rem;
  align-items: end;
  grid-column: 1 / 6;
  grid-row: 4;
}
#footer-copyright > img{
  height: 1.5rem;
  width:auto;
}

@media(min-width: 644px) {
  #menu-toggle-wrap {
    display: none;
  }
  #site-header .nav ul {
    display: flex;
    grid-column: -3/-1;
    grid-row: 1;
  }
  #site-header .nav .x-b {
    aspect-ratio: revert;
  }
  #site-header .nav ul li {
    border-left: 1px solid var(--color-borders);
  }
  #site-header .nav ul li:nth-of-type(1), 
  #site-header .nav ul li:nth-of-type(2){
    width: 33%;
  }
  #site-header .nav ul li:nth-of-type(3) {
    width: 34%;
  }
  #site-header .nav > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    gap: 0.2em;
    justify-content: start;
    height: 100%;
    padding: clamp(5px, 0.5rem, 8px) clamp(4px, 1.7rem, 40px) clamp(4px, 0.5rem, 5px) 0.5rem;
    font-size: clamp(10.5px, 0.5rem + 0.9dvh, 1.2rem);
    font-family: SpaceGroteskVariable;
    font-weight: 100;
    text-transform: uppercase;
}
  
  #hero div:has(h1) {
    height: revert;
    grid-column: 2/4;
    grid-row: 1;
  }
  #hero-frame {
    position: relative;
    grid-column:-3/-2;
    grid-row:1/-3;
    border-left: solid 1px var(--color-borders);
  }
  #hero .extra-text {
    display:revert;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}