@font-face {
  font-family: "RokkittBold";
  src: url("../fonts_web/Rokkitt-Bold___version_4.woff2") format("woff2");
  /* src: url("./fonts_web/Rokkitt-Medium___version_4.woff2") format("woff2"); */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sen";
  src: url("../fonts_web/Sen-Regular___version_4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NotoSans";
  src: url("../fonts_web/NotoSans-Regular___version_4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FiraCode";
  src: url("../fonts_web/FiraCode-VariableFont_wght___version_4.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
footer li {
  margin: 0.6em 0;
}
[data-typewriter] {
  display: block;
}
.typewriter-character {
  min-width: 0.45em;
  /* display: inline-block; */
  opacity: 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;
}
.brand-handwritten {
  font-weight: 100;
  font-family: "Mistral", monospace;
}
/* ========================================
   Scroll to top
======================================== */
.scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;

  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);

  font-size: 22px;
  line-height: 1;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.scroll-top:hover {
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: none;
  }
}
/* ========================================
   HEADER
======================================== */

#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 ul > li {
  animation: menu-content-out 60ms ease-in forwards;
}

@keyframes menu-content-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

#site-header  a {
  background-image:unset;
}

/* --------------- */
/* LAYOUT */
.grid {
  display: flex;
  flex-direction: column;
  gap: 3dvh;
  /* row-gap: 2dvh;
  row-gap: 2dvh; */
}
.grid.layout-d.reverse {
  --content-start: 7;
  --content-end: 13;
  --image-start: 1;
  --image-end: 7;
}
.layout-a .symbols {
  display: flex;
  height: 10dvh;
  gap: 0.5rem;
  justify-content: center;
}
.layout-a .symbols svg {
  height: 100%;
  width: auto;
  flex: 0 1 auto;
}
.grid.layout-c img {
  height: auto;
  width: 100dvw;
  max-height: 80dvh;
}
.grid.layout-d img {
  height: auto;
  width: 100dvw;
  max-height: 80dvh;
}

/* Tablet / larger mobile */
@media (width >= 45rem) {
   /* --------------- */
/* LAYOUT */
.grid {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: stretch;   /* vertical */
  justify-items: stretch; /* horizontal */
}
.grid :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
  margin: 0;
  padding: 0;
}
.grid.layout-c img {
  width: unset;
}
/* --------------------- */
/* GRID LAYOUT B */
.grid.layout-a {
  grid-template-columns: repeat(12, minmax(0, 1fr));

  grid-template-rows:
    minmax(0, 15%)
    minmax(0, 5%)
    auto
    minmax(0, 5%)
    minmax(auto, 40%)
    minmax(0, 5%);

  grid-template-areas:
    ". . . . . . . . symbols symbols symbols symbols"
    ". . . . . . . . spacer-1 spacer-1 spacer-1 spacer-1"
    "title title title title title title title title . . . ."
    "spacer-2 spacer-2 spacer-2 spacer-2 spacer-2 spacer-2 spacer-2 spacer-2 . . . ."
    "text text text text text text text text . . . ."
    "spacer-3 spacer-3 spacer-3 spacer-3 spacer-3 spacer-3 spacer-3 spacer-3 . . . .";
}

.grid.layout-a .symbols {
  grid-area: symbols;
}
.grid.layout-a .title {
  grid-area: title;
  font-size: clamp(1rem, 6vw, 1.8rem);
}

.grid.layout-a .text {
  grid-area: text;
}
/* --------------------- */
/* GRID LAYOUT B */
.grid.layout-b {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows:
    auto
    clamp(1.5rem, 3vw, 3rem)
    auto
    clamp(1.5rem, 3vw, 3rem)
    auto;
  row-gap: 1dvw;
  column-gap: 3dvw;
}
.grid.layout-b > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  grid-template-areas:
    "symbols"
    "."
    "title"
    "."
    "text";
  min-width: 0;
}
.grid.layout-b .symbols {
  grid-area: symbols;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
}
.grid.layout-b .symbols svg {
  flex: 0 0 auto;
  width: clamp(3rem, 6vw, 5rem);
  height: clamp(3rem, 6vw, 5rem);

  display: block;
}
.grid.layout-b .title {
  grid-area: title;

  margin: 0;

  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.1;
}
.grid.layout-b .text {
  grid-area: text;

  min-width: 0;
}
.grid.layout-b .text {
  grid-area: text;

  margin: 0;
}
.grid.layout-b .text p {
  margin: 0 0 1rem;
}
.grid.layout-b .text p:last-child {
  margin-bottom: 0;
}
  /* --------------------- */
  /* GRID LAYOUT C */

  .grid.layout-c {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  
    grid-template-rows:
      auto
      auto
      4%
      auto
      4%
      auto
      max-content;
  
    grid-template-areas:
      "intro intro intro intro intro intro intro intro intro intro intro intro"
      "image image image image image image image image image image image image"
      "image image image image image image image image image image image image"
      ".     .     .     .     .     .     .     .     .     .     .     ."
      "title title title title title title title title title     .     .     ."
      ".     .     .     .     .     .     .     .     .     .     .     ."
      "text  text  text  text  text  text  text  text  text  text  text  text";
  }

  .grid.layout-c > p:nth-child(1) {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.65;
    margin: 0;
    grid-area: intro;
    /* font-size: calc(var(--p-rem) - 0.1rem); */
  }

  .grid.layout-c > img {
    border: 1px solid rgba(38, 53, 44, 0.22);
    box-shadow: 0 3px 10px rgba(38, 53, 44, 0.09);
    border: 1px solid color-mix(
      in srgb,
      var(--color-deep-forest) 10%,
      transparent
    );
    grid-area: image;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .grid.layout-c > h2 {
    grid-area: title;
    margin: 0;
    line-height: 1.05;
  }

  .grid.layout-c > div {
    grid-area: text;
  }

  .grid.layout-c > div p {
    margin: 0 0 1rem;
  }

  .grid.layout-c > div p:last-child {
    margin-bottom: 0;
  }
  /* ================================
   GRID LAYOUT D
   Text left / image right
================================ */

.grid.layout-d {
  --content-start: 1;
  --content-end: 7;
  --image-start: 7;
  --image-end: 13;

  grid-template-columns: repeat(12, minmax(0, 1fr));

  grid-template-rows:
    auto
    auto
    4%
    auto;
}

/* Reverse the horizontal layout */
.grid.layout-d.reverse {
  --content-start: 7;
  --content-end: 13;
  --image-start: 1;
  --image-end: 7;
}


/* Section label */
.grid.layout-d > p {
  grid-column: var(--content-start) / var(--content-end);
  grid-row: 1;

  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0;
}


/* Title */
.grid.layout-d > h2 {
  grid-column: var(--content-start) / var(--content-end);
  grid-row: 2;

  margin: 0;
  line-height: 1.05;
}


/* Text */
.grid.layout-d > div {
  grid-column: var(--content-start) / var(--content-end);
  grid-row: 4;
}

.grid.layout-d > div p {
  margin: 0 0 1rem;
}

.grid.layout-d > div p:last-child {
  margin-bottom: 0;
}


/* Image */
.grid.layout-d > img {
  grid-column: var(--image-start) / var(--image-end);
  grid-row: 1 / 5;

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border: 1px solid color-mix(
    in srgb,
    var(--color-deep-forest) 10%,
    transparent
  );
}
}

@media (min-width: 640px) {
}
/* Medium desktop */
@media (min-width: 960px) {
}
@media (min-width: 1280px) {
}
@media (min-width: 1600px) {
}

@media (min-width: 1280px) {
}

@media (min-width: 1920px) {
}

@media (min-width: 2560px) {
}