h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4,
em, strong {
  font-style: normal;
  font-weight: 400;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
}

.no-select {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.clear {
  display: block;
  float: none;
  clear: both;
}

html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-family: "IBM Plex Mono Regular";
  src: url("../fonts/IBMPlexMono/IBMPlexMono-Regular.woff2") format("woff2"), url("../fonts/IBMPlexMono/IBMPlexMono-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono Italic";
  src: url("../fonts/IBMPlexMono/IBMPlexMono-Italic.woff2") format("woff2"), url("../fonts/IBMPlexMono/IBMPlexMono-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
:root {
  --FS12: 12px;
  --LH12: normal;
  --FS16: 16px;
  --LH16: calc(24/16);
  --FS24: 24px;
  --LH24: normal;
  --FS32: 32px;
  --LH32: normal;
  --FS64: 64px;
}

:root {
  --GRID_MARGIN: 24px;
  --GRID_GUTTER: 24px;
  --HEADER_HEIGHT: 112px;
  --FOOTER_HEIGHT: 64px;
}

#debug-grid {
  display: grid;
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 0 var(--GRID_MARGIN);
  box-sizing: border-box;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--GRID_GUTTER);
  z-index: 10000;
  pointer-events: none;
}
#debug-grid .col {
  height: 100%;
  grid-column-end: span 1;
  background-color: rgba(0, 255, 255, 0.2);
}

html {
  font-family: "IBM Plex Mono Regular";
  font-size: 16px;
  line-height: normal;
}
html.hidden {
  visibility: hidden;
}

body {
  color: white;
  background-color: black !important;
}

html, body {
  touch-action: manipulation;
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px var(--GRID_MARGIN);
  padding-bottom: 0;
  box-sizing: border-box;
  background: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 1000;
}
header #link-rainbow {
  display: block;
}
header .left svg {
  display: block;
  height: 32px;
  width: auto;
}
header .left svg path {
  fill: white;
}
header .right a {
  font-size: var(--FS16);
  line-height: 1;
  margin-right: var(--GRID_GUTTER);
}
header .right a:last-child {
  margin-right: 0;
}
header .gradient {
  width: 100%;
  height: 48px;
  margin-top: 16px;
}

#main {
  min-height: calc(100dvh - var(--HEADER_HEIGHT) - var(--FOOTER_HEIGHT));
}

footer {
  padding: var(--GRID_MARGIN);
  font-size: var(--FS16);
  line-height: 1;
}

a {
  text-decoration: none;
}

.template-template_home {
  height: 100dvh;
  overflow: hidden;
}
.template-template_home.trans {
  height: unset;
  overflow: unset;
}
.template-template_home.trans #anim-home {
  display: none;
}
.template-template_home.trans #content-div {
  margin-top: 0;
  visibility: visible;
}
.template-template_home.trans header {
  background: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0) 100%);
}
.template-template_home.trans header #link-rainbow {
  opacity: 1;
}
.template-template_home header {
  background: none;
}
.template-template_home header #link-rainbow {
  transition: opacity ease-in-out 0.5s;
  opacity: 0;
}
.template-template_home.show_rainbow header #link-rainbow {
  opacity: 1;
}
.template-template_home #anim-home {
  position: absolute;
  top: 0;
  z-index: 100;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background-color: black;
}
.template-template_home #anim-home .image,
.template-template_home #anim-home .slogan,
.template-template_home #anim-home .canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.template-template_home #anim-home .image.hidden,
.template-template_home #anim-home .slogan.hidden,
.template-template_home #anim-home .canvas.hidden {
  visibility: hidden;
}
.template-template_home #anim-home .image picture,
.template-template_home #anim-home .slogan picture,
.template-template_home #anim-home .canvas picture {
  width: 100%;
  height: 100%;
}
.template-template_home #anim-home .image img,
.template-template_home #anim-home .slogan img,
.template-template_home #anim-home .canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.template-template_home #anim-home .canvas svg {
  position: absolute;
  width: 71.4285714286%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.template-template_home #anim-home .canvas svg path {
  fill: white;
}
.template-template_home #anim-home .slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16rem;
  line-height: 1;
  display: none;
}
.template-template_home #content-div {
  margin-top: 100dvh;
  visibility: hidden;
  padding: 0 var(--GRID_MARGIN);
  background-color: black;
  padding-top: var(--HEADER_HEIGHT);
}
.template-template_home #bg-content {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  transform: translateX(-24px);
  height: 100dvh;
  z-index: 0;
  position: fixed;
  transform: none;
}
.template-template_home #bg-content canvas {
  width: 100%;
  height: 100% !important;
}
.template-template_home #section-works {
  margin-bottom: 96px;
  margin-top: 0;
  position: relative;
  z-index: 1;
}
.template-template_home #section-works .post {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #3C3C3C;
  padding: 24px 0;
  cursor: pointer;
  opacity: 1;
}
.template-template_home #section-works .post:last-child {
  border-bottom: none;
}
.template-template_home #section-works .post:first-child {
  padding-top: 0;
}
.template-template_home #section-works .post .left {
  display: flex;
  align-items: flex-end;
  transition: all ease-in-out 0.25s;
}
.template-template_home #section-works .post .left h2 {
  margin-right: 16px;
  font-size: var(--FS64);
  line-height: 1;
  text-transform: uppercase;
}
.template-template_home #section-works .post .left h3 {
  font-family: "IBM Plex Mono Italic";
  font-style: italic;
  font-size: var(--FS24);
  line-height: var(--LH24);
}
.template-template_home #section-works .post .tags {
  padding-top: 0.5em;
  font-size: var(--FS12);
  line-height: var(--LH12);
  text-align: right;
  z-index: 0;
  visibility: hidden;
}
.template-template_home #section-works .post .tags .tag {
  margin-bottom: 4px;
}
.template-template_home #section-works .post .tags .tag:last-child {
  margin-bottom: 0;
}
.template-template_home #section-works .post picture {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 50%;
  z-index: -1;
  pointer-events: none;
  transition: all ease-in-out 0.25s;
  opacity: 0;
}
.template-template_home #section-works .post picture img {
  width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--HEADER_HEIGHT) - var(--FOOTER_HEIGHT));
  object-fit: contain;
}
.template-template_home #section-works .post:hover {
  z-index: 1;
}
.template-template_home #section-works .post:hover .left {
  padding-left: 24px;
}
.template-template_home #section-works .post:hover .tags {
  visibility: visible;
}
.template-template_home #section-works .post:hover picture {
  width: 65%;
  opacity: 1;
}
.template-template_home #section-about {
  padding-bottom: 112px;
  position: relative;
  z-index: 2;
}
.template-template_home #section-about .bloc-about {
  padding-top: 112px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--GRID_GUTTER);
}
.template-template_home #section-about .bloc-about label {
  grid-column-end: span 1;
  font-size: var(--FS16);
  line-height: 1;
}
.template-template_home #section-about .bloc-about .text {
  grid-column-end: span 3;
  font-size: var(--FS32);
  line-height: var(--LH32);
}
.template-template_home #section-about .bloc-about .text .note {
  font-size: var(--FS16);
  line-height: var(--LH16);
  margin-bottom: 16px;
}
.template-template_home #section-about .bloc-grid {
  padding-top: 112px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--GRID_GUTTER);
}
.template-template_home #section-about .bloc-grid .col {
  display: flex;
  flex-direction: column;
  grid-column-end: span 1;
}
.template-template_home #section-about .bloc-grid .col label {
  font-size: var(--FS16);
  line-height: 1;
  margin-bottom: 24px;
}
.template-template_home #section-about .bloc-grid .col picture {
  position: relative;
  width: 100%;
  padding-top: 64%;
  margin-bottom: 24px;
}
.template-template_home #section-about .bloc-grid .col picture img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.template-template_home #section-about .bloc-grid .col .text {
  font-size: var(--FS16);
  line-height: var(--LH16);
}
.template-template_home #project-container {
  position: fixed;
  width: 100%;
  height: 100dvh;
  z-index: 100;
  left: 0;
  top: 0;
  overflow: scroll;
  pointer-events: none;
  opacity: 0;
  transition: all ease-in-out 0.5s;
  padding-top: var(--HEADER_HEIGHT);
  padding-bottom: 100dvh;
  box-sizing: border-box;
}
.template-template_home #project-container.visible {
  opacity: 1;
  pointer-events: initial;
}
.template-template_home #project-container #start {
  position: absolute;
  top: 0;
  height: var(--HEADER_HEIGHT);
  width: 100%;
  background: black;
}
.template-template_home #project-container #content-post {
  background-color: black;
}
.template-template_home #project-container #content-post .titles {
  top: 0;
}

.template-template_team {
  height: 100dvh;
  overflow: scroll;
}
.template-template_team #content-div {
  padding: 0 var(--GRID_MARGIN);
  background-color: black;
  padding-top: var(--HEADER_HEIGHT);
}
.template-template_team #bg-content {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  transform: translateX(-24px);
  height: 100dvh;
  z-index: 0;
  position: fixed;
  transform: none;
}
.template-template_team #bg-content canvas {
  width: 100%;
  height: 100% !important;
}
.template-template_team #section-team {
  padding-bottom: 112px;
  position: relative;
  z-index: 2;
}
.template-template_team #section-team .bloc-grid {
  padding-top: 112px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--GRID_GUTTER);
}
.template-template_team #section-team .bloc-grid .col {
  display: flex;
  flex-direction: column;
  grid-column-end: span 1;
  margin-bottom: 48px;
}
.template-template_team #section-team .bloc-grid .col label {
  font-size: var(--FS16);
  line-height: 1;
  margin-bottom: 24px;
}
.template-template_team #section-team .bloc-grid .col picture {
  position: relative;
  width: 100%;
  margin-bottom: 24px;
  background-color: white;
  aspect-ratio: 1/1;
}
.template-template_team #section-team .bloc-grid .col picture img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.template-template_team #section-team .bloc-grid .col .text {
  font-size: var(--FS16);
  line-height: var(--LH16);
}

.template-template_post {
  padding-top: var(--HEADER_HEIGHT);
}

.template-template_post #content-post,
#project-container #content-post {
  padding: 0 var(--GRID_MARGIN);
}
.template-template_post #content-post .titles,
#project-container #content-post .titles {
  position: sticky;
  top: var(--HEADER_HEIGHT);
  height: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  grid-column-end: span 4;
  mix-blend-mode: difference;
}
.template-template_post #content-post .titles h1,
#project-container #content-post .titles h1 {
  margin-right: 16px;
  font-size: var(--FS64);
  line-height: 1;
  text-transform: uppercase;
}
.template-template_post #content-post .titles h2,
#project-container #content-post .titles h2 {
  font-family: "IBM Plex Mono Italic";
  font-style: italic;
  font-size: var(--FS32);
  line-height: 1;
  padding-top: 0.25em;
}
.template-template_post #content-post .images,
#project-container #content-post .images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--GRID_GUTTER);
  margin-bottom: calc(72px + var(--FS64));
}
.template-template_post #content-post .images picture,
.template-template_post #content-post .images .video-container,
#project-container #content-post .images picture,
#project-container #content-post .images .video-container {
  margin-bottom: 72px;
}
.template-template_post #content-post .images picture img,
.template-template_post #content-post .images picture video,
.template-template_post #content-post .images .video-container img,
.template-template_post #content-post .images .video-container video,
#project-container #content-post .images picture img,
#project-container #content-post .images picture video,
#project-container #content-post .images .video-container img,
#project-container #content-post .images .video-container video {
  width: 100%;
  height: auto;
  max-height: 100dvh;
  object-fit: contain;
}
.template-template_post #content-post .descriptions,
#project-container #content-post .descriptions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--GRID_GUTTER);
  padding-bottom: 112px;
}
.template-template_post #content-post .descriptions .col,
#project-container #content-post .descriptions .col {
  display: flex;
  flex-direction: column;
  grid-column-end: span 1;
  margin-bottom: 72px;
}
.template-template_post #content-post .descriptions .col label,
#project-container #content-post .descriptions .col label {
  font-family: "IBM Plex Mono Italic";
  font-style: italic;
  font-size: var(--FS16);
  line-height: 1;
  margin-bottom: 24px;
}
.template-template_post #content-post .descriptions .col .text,
#project-container #content-post .descriptions .col .text {
  font-size: var(--FS16);
  line-height: var(--LH16);
}
.template-template_post #content-post .descriptions .col:nth-child(3),
#project-container #content-post .descriptions .col:nth-child(3) {
  grid-column-end: span 2;
}
.template-template_post #content-post .descriptions .col.large,
#project-container #content-post .descriptions .col.large {
  grid-column-end: span 3;
  margin-bottom: 0;
}
.template-template_post #content-post .descriptions .col.large .text,
#project-container #content-post .descriptions .col.large .text {
  font-size: var(--FS32);
  line-height: var(--LH32);
}

@media (max-aspect-ratio: 1/1) {
  :root {
    --FS12: calc(12*0.0625rem);
    --LH12: normal;
    --FS16: calc(16*0.0625rem);
    --LH16: calc(24/16);
    --FS20: calc(20*0.0625rem);
    --LH20: calc(24/20);
    --FS24: calc(24*0.0625rem);
    --LH24: normal;
    --FS32: calc(32*0.0625rem);
    --LH32: normal;
    --FS64: calc(64*0.0625rem);
  }
  :root {
    --GRID_MARGIN: 8px;
    --GRID_GUTTER: 0px;
    --HEADER_HEIGHT: calc(176*0.0625rem);
    --FOOTER_HEIGHT: 0px;
  }
  #debug-grid {
    display: none;
  }
  html {
    font-family: "IBM Plex Mono Regular";
    font-size: 16px;
    line-height: normal;
  }
  header {
    align-items: flex-start;
  }
  header .left svg {
    height: 2rem;
  }
  header .right a {
    display: block;
    text-align: right;
    line-height: var(--LH16);
  }
  .template-template_home #anim-home .image img,
  .template-template_home #anim-home .slogan img,
  .template-template_home #anim-home .canvas img {
    width: unset;
    height: unset;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  .template-template_home #section-works {
    margin-bottom: 80px;
  }
  .template-template_home #section-works .post {
    display: block;
    justify-content: unset;
    align-items: unset;
    border: none;
    padding: 64px 0;
  }
  .template-template_home #section-works .post:first-child {
    padding-top: 0;
  }
  .template-template_home #section-works .post .left {
    display: block;
    align-items: unset;
    transition: none;
  }
  .template-template_home #section-works .post .left h2 {
    margin-right: 0;
    font-size: var(--FS32);
  }
  .template-template_home #section-works .post .left h3 {
    font-size: var(--FS16);
    line-height: var(--LH16);
  }
  .template-template_home #section-works .post .tags {
    display: none;
  }
  .template-template_home #section-works .post picture {
    position: relative;
    left: unset;
    top: unset;
    transform: none;
    width: 100%;
    z-index: unset;
    pointer-events: initial;
    transition: none;
    opacity: 1;
    display: block;
    margin-bottom: 8px;
  }
  .template-template_home #section-works .post:hover {
    z-index: unset;
  }
  .template-template_home #section-works .post:hover .left {
    padding-left: 0;
  }
  .template-template_home #section-works .post:hover picture {
    width: 100%;
  }
  .template-template_home #section-about .bloc-about {
    padding-top: 96px;
    padding-bottom: 96px;
    display: block;
    grid-template-columns: unset;
    column-gap: unset;
  }
  .template-template_home #section-about .bloc-about label,
  .template-template_home #section-about .bloc-about h4 {
    grid-column-end: unset;
    margin-bottom: 32px;
  }
  .template-template_home #section-about .bloc-about .text {
    grid-column-end: unset;
    font-size: var(--FS16);
    line-height: var(--LH16);
  }
  .template-template_home #section-about .bloc-about .text .note {
    margin-bottom: 8px;
  }
  .template-template_home #section-about .bloc-grid {
    padding-top: 96px;
    padding-bottom: 96px;
    display: block;
    grid-template-columns: unset;
    column-gap: unset;
  }
  .template-template_home #section-about .bloc-grid .col {
    display: block;
    flex-direction: unset;
    grid-column-end: unset;
    margin-bottom: 96px;
  }
  .template-template_home #section-about .bloc-grid .col label {
    display: block;
    margin-bottom: 32px;
  }
  .template-template_home #section-about .bloc-grid .col picture {
    display: block;
  }
  .template-template_team #section-team .bloc-grid {
    padding-top: 96px;
    padding-bottom: 96px;
    display: block;
    grid-template-columns: unset;
    column-gap: unset;
  }
  .template-template_team #section-team .bloc-grid .col {
    display: block;
    flex-direction: unset;
    grid-column-end: unset;
    margin-bottom: 96px;
  }
  .template-template_team #section-team .bloc-grid .col label {
    display: block;
    margin-bottom: 32px;
  }
  .template-template_team #section-team .bloc-grid .col picture {
    display: block;
  }
  .template-template_post #content-post .titles,
  #project-container #content-post .titles {
    display: block;
    justify-content: unset;
    align-items: unset;
    grid-column-end: unset;
  }
  .template-template_post #content-post .titles h1,
  #project-container #content-post .titles h1 {
    margin-right: 0;
    font-size: var(--FS32);
  }
  .template-template_post #content-post .titles h2,
  #project-container #content-post .titles h2 {
    font-size: var(--FS16);
  }
  .template-template_post #content-post .images,
  #project-container #content-post .images {
    display: block;
    grid-template-columns: unset;
    column-gap: unst;
    margin-bottom: 80px;
  }
  .template-template_post #content-post .images picture,
  .template-template_post #content-post .images .video-container,
  #project-container #content-post .images picture,
  #project-container #content-post .images .video-container {
    display: block;
    margin-bottom: 72px;
    grid-column-end: unset !important;
    grid-column-start: unset !important;
    width: 100% !important;
  }
  .template-template_post #content-post .descriptions,
  #project-container #content-post .descriptions {
    display: block;
    grid-template-columns: unset;
    column-gap: unset;
    padding-bottom: 128px;
  }
  .template-template_post #content-post .descriptions .col,
  #project-container #content-post .descriptions .col {
    display: block;
    flex-direction: unset;
    grid-column-end: unset;
    margin-bottom: 48px;
  }
  .template-template_post #content-post .descriptions .col label,
  #project-container #content-post .descriptions .col label {
    display: block;
    margin-bottom: 16px;
  }
  .template-template_post #content-post .descriptions .col:nth-child(3),
  #project-container #content-post .descriptions .col:nth-child(3) {
    grid-column-end: unset;
  }
  .template-template_post #content-post .descriptions .col.large,
  #project-container #content-post .descriptions .col.large {
    grid-column-end: unset;
    margin-bottom: 72px;
  }
  .template-template_post #content-post .descriptions .col.large .text,
  #project-container #content-post .descriptions .col.large .text {
    font-size: var(--FS20);
    line-height: var(--LH20);
  }
}