@import url(
  'https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;700;800&display=swap'
);


/* ==========================================
   VARIABLES
========================================== */

:root {

  --bg: #f1eee7;

  --fg: #11110f;

  --muted: #77746d;

  --accent: #ff5b45;

  --ease:
    cubic-bezier(.22,.8,.22,1);

}


/* ==========================================
   RESET
========================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  background: var(--bg);

  color: var(--fg);

  font-family:
    "Manrope",
    Arial,
    sans-serif;

  overflow-x: hidden;

}


a {

  color: inherit;

  text-decoration: none;

}


button,
input,
textarea {

  font: inherit;

}


/* ==========================================
   NAVIGATION
========================================== */

.topbar {

  position: fixed;

  z-index: 100;

  top: 0;
  left: 0;

  width: 100%;

  height: 74px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:
    0 28px;

  color: white;

  mix-blend-mode: difference;

}


.brand {

  font-family:
    "DM Mono",
    monospace;

  font-size: 12px;

  letter-spacing: .08em;

}


.nav {

  display: flex;

  gap: 28px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

  text-transform: uppercase;

}


.nav a {

  position: relative;

}


.nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -6px;

  width: 0;

  height: 1px;

  background: currentColor;

  transition:
    width .35s var(--ease);

}


.nav a:hover::after {

  width: 100%;

}


.menu {

  display: none;

  border: 0;

  background: transparent;

  color: inherit;

}


/* ==========================================
   GENERAL
========================================== */

.page {

  position: relative;

  min-height: 100svh;

  scroll-margin-top: 74px;

}


.eyebrow {

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

  font-weight: 500;

  letter-spacing: .13em;

  text-transform: uppercase;

}


/* ==========================================
   CTA
========================================== */

.cta {

  display: inline-flex;

  align-items: center;

  gap: 32px;

  padding:
    16px 20px;

  background: #111;

  color: white;

  border:
    1px solid #111;

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

  letter-spacing: .08em;

  cursor: pointer;

  transition:
    transform .4s var(--ease),
    background .4s var(--ease);

}


.cta:hover {

  transform:
    translateY(-5px);

  background:
    var(--accent);

}


.cta strong {

  font-size: 18px;

  font-weight: 400;

}


/* ==========================================
   HOME
========================================== */

.page-home {

  display: flex;

  align-items: center;

  min-height: 100svh;

  padding:
    120px 7vw;

  background:
    #eeeae1;

  overflow: hidden;

}


.home-noise {

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .12;

  background-image:

    url(
      "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"
    );

}


.home-copy {

  position: relative;

  z-index: 10;

  max-width: 650px;

}


.home-copy h1 {

  margin:
    20px 0 30px;

  font-size:
    clamp(55px, 8vw, 120px);

  line-height: .83;

  letter-spacing:
    -.07em;

  font-weight: 800;

}


.home-copy h1 em {

  font-family:
    Georgia,
    serif;

  font-size: .76em;

  font-weight: 400;

}


.intro {

  max-width: 410px;

  margin-bottom: 30px;

  color: #5d5952;

  font-size: 14px;

  line-height: 1.7;

}


/* ==========================================
   SVG OBJECTS
========================================== */

.objects {

  position: absolute;

  inset: 0;

  pointer-events: none;

}


.float-object {

  position: absolute;

  pointer-events: auto;

  touch-action: none;

  user-select: none;

  cursor: grab;

  will-change:
    transform,
    left,
    top;

  filter:
    drop-shadow(
      0 25px 20px rgba(0,0,0,.13)
    );

  transition:
    filter .3s ease;

}


.float-object svg {

  display: block;

  width: 100%;

  height: auto;

}


.float-object:hover {

  filter:
    drop-shadow(
      0 35px 30px rgba(0,0,0,.20)
    );

}


.float-object:active {

  cursor: grabbing;

  filter:
    drop-shadow(
      0 40px 35px rgba(0,0,0,.25)
    );

}


/* Positionnement */

.obj-a {

  left: 55%;

  top: 9%;

  width: 235px;

  transform:
    rotate(10deg);

}


.obj-b {

  left: 72%;

  top: 39%;

  width: 260px;

  transform:
    rotate(-13deg);

}


.obj-c {

  left: 48%;

  top: 61%;

  width: 240px;

  transform:
    rotate(8deg);

}


.obj-d {

  left: 80%;

  top: 10%;

  width: 215px;

  transform:
    rotate(17deg);

}


.obj-e {

  left: 67%;

  top: 70%;

  width: 245px;

  transform:
    rotate(-5deg);

}


.scroll-hint {

  position: absolute;

  right: 30px;

  bottom: 28px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

  letter-spacing: .12em;

}


.scroll-hint span {

  margin-left: 8px;

  font-size: 16px;

}


/* ==========================================
   EXPLORATION
========================================== */

.page-explore {

  --local-bg: #141414;

  --local-fg: #f7f3ea;

  --local-accent: #ff5b45;

  min-height: 100svh;

  background:
    var(--local-bg);

  color:
    var(--local-fg);

  transition:
    background 1s var(--ease),
    color 1s var(--ease);

}


.explore-shell {

  position: relative;

  min-height: 100svh;

  padding:
    110px 8vw 80px;

  display: grid;

  place-items: center;

}


.explore-meta {

  position: absolute;

  top: 110px;

  left: 7vw;

  display: flex;

  gap: 24px;

  align-items: center;

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

}


.counter b {

  font-size: 16px;

}


.meta-label {

  opacity: .5;

}


/* ==========================================
   PROJECT ARROWS
========================================== */

.arrow {

  position: absolute;

  z-index: 10;

  top: 50%;

  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  transform:
    translateY(-50%);

  border:
    1px solid rgba(255,255,255,.35);

  border-radius: 50%;

  background: transparent;

  color: inherit;

  font-size: 24px;

  cursor: pointer;

  transition:
    transform .35s var(--ease),
    background .35s var(--ease),
    border-color .35s var(--ease);

}


.arrow:hover {

  background:
    var(--local-accent);

  border-color:
    var(--local-accent);

  transform:
    translateY(-50%)
    scale(1.08);

}


.arrow-left {

  left: 3vw;

}


.arrow-right {

  right: 3vw;

}


/* ==========================================
   PROJECT
========================================== */

.project-stage {

  width:
    min(1120px, 88vw);

  display: grid;

  grid-template-columns:
    1.15fr .85fr;

  align-items: center;

  gap: 7vw;

  transition:
    opacity .3s ease,
    transform .8s var(--ease);

}


.project-stage.is-changing {

  opacity: 0;

  transform:
    translateY(25px)
    scale(.97);

}


.project-visual {

  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  display: grid;

  place-items: center;

  background: #252525;

  transition:
    background 1s var(--ease);

}


.visual-word {

  position: relative;

  z-index: 3;

  font-size:
    clamp(55px, 10vw, 150px);

  line-height: .8;

  font-weight: 800;

  letter-spacing:
    -.09em;

  mix-blend-mode: screen;

}


.visual-index {

  position: absolute;

  top: 18px;

  left: 18px;

  z-index: 5;

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

}


.visual-shape {

  position: absolute;

  transition:
    background 1s var(--ease),
    transform 1.2s var(--ease);

}


.shape-1 {

  top: 10%;

  right: 8%;

  width: 55%;

  height: 55%;

  border-radius: 50%;

  background:
    var(--local-accent);

}


.shape-2 {

  left: 12%;

  bottom: -15%;

  width: 45%;

  height: 70%;

  border:
    2px solid currentColor;

  transform:
    rotate(25deg);

}


.project-info h2 {

  margin:
    15px 0 25px;

  font-size:
    clamp(42px, 6vw, 82px);

  line-height: .88;

  letter-spacing:
    -.065em;

}


.project-info > p:not(.eyebrow) {

  max-width: 430px;

  font-size: 15px;

  line-height: 1.7;

  opacity: .7;

}


.tools {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin:
    26px 0;

}


.tools span {

  padding:
    7px 10px;

  border:
    1px solid currentColor;

  border-radius: 100px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

  opacity: .7;

}


.project-link {

  display: inline-flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 8px;

  border-bottom:
    1px solid currentColor;

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

}


.project-link span {

  font-size: 18px;

}


/* ==========================================
   DOTS
========================================== */

.project-dots {

  position: absolute;

  bottom: 32px;

  display: flex;

  gap: 8px;

}


.dot {

  width: 35px;

  height: 2px;

  padding: 0;

  border: 0;

  background: currentColor;

  opacity: .2;

  cursor: pointer;

  transition:
    opacity .3s ease,
    width .3s ease;

}


.dot.active {

  width: 50px;

  opacity: 1;

}


/* ==========================================
   PROJECT GRID
========================================== */

.page-projects {

  min-height: 100svh;

  padding:
    150px 7vw 100px;

  background:
    #e7e2d8;

}


.section-heading {

  display: grid;

  grid-template-columns:
    1fr 2fr 1fr;

  gap: 30px;

  align-items: end;

  margin-bottom: 70px;

}


.section-heading h2 {

  margin: 0;

  font-size:
    clamp(65px, 12vw, 170px);

  line-height: .75;

  letter-spacing:
    -.08em;

}


.section-heading h2 span {

  font-family:
    Georgia,
    serif;

  font-weight: 400;

}


.section-heading > p:last-child {

  max-width: 220px;

  margin: 0 0 5px;

  font-size: 12px;

  line-height: 1.5;

}


.project-grid {

  display: grid;

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

  gap: 20px;

}


.grid-card {

  position: relative;

  min-height: 520px;

  overflow: hidden;

  background: #171717;

  color: white;

  cursor: pointer;

}


.grid-card:nth-child(1) {

  grid-column:
    span 7;

}


.grid-card:nth-child(2) {

  grid-column:
    span 5;

  margin-top: 80px;

}


.grid-card:nth-child(3) {

  grid-column:
    span 5;

}


.grid-card:nth-child(4) {

  grid-column:
    span 7;

  margin-top: -50px;

}


.card-visual {

  position: absolute;

  inset: 0;

  background:
    var(--card-bg);

  transition:
    transform .8s var(--ease);

}


.grid-card:hover .card-visual {

  transform:
    scale(1.06);

}


.card-shape {

  position: absolute;

  top: 15%;

  right: 8%;

  width: 55%;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--card-accent);

}


.card-word {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  font-size:
    clamp(45px, 8vw, 110px);

  font-weight: 800;

  letter-spacing:
    -.08em;

  mix-blend-mode: screen;

}


.card-content {

  position: absolute;

  z-index: 5;

  right: 22px;

  bottom: 22px;

  left: 22px;

  display: flex;

  align-items: end;

  justify-content: space-between;

}


.card-content h3 {

  margin: 0;

  font-size: 24px;

}


.card-content p {

  margin:
    5px 0 0;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

  opacity: .65;

}


.card-arrow {

  font-size: 26px;

  opacity: 0;

  transform:
    translateX(-10px);

  transition:
    opacity .35s var(--ease),
    transform .35s var(--ease);

}


.grid-card:hover .card-arrow {

  opacity: 1;

  transform:
    translateX(0);

}


/* ==========================================
   ABOUT
========================================== */

.page-about {

  min-height: 100svh;

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  align-items: center;

  gap: 10vw;

  padding:
    130px 7vw;

  background:
    #111;

  color:
    #f4f0e8;

}


.about-portrait {

  position: relative;

  aspect-ratio: 4 / 5;

  max-height: 720px;

  display: flex;

  align-items: end;

  justify-content: center;

  overflow: hidden;

  background:
    #292926;

}


.portrait-placeholder {

  font-size:
    clamp(55px, 8vw, 120px);

  line-height: .75;

  font-weight: 800;

  letter-spacing:
    -.08em;

  text-align: center;

  mix-blend-mode: difference;

}


.about-portrait > span {

  position: absolute;

  left: 18px;

  bottom: 18px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

}


.about-copy h2 {

  margin:
    20px 0 30px;

  font-size:
    clamp(50px, 7vw, 100px);

  line-height: .85;

  letter-spacing:
    -.07em;

}


.about-copy h2 em {

  font-family:
    Georgia,
    serif;

  font-weight: 400;

}


.about-copy .lead {

  max-width: 620px;

  font-size: 20px;

  line-height: 1.45;

}


.about-copy > p:not(.eyebrow):not(.lead) {

  max-width: 620px;

  font-size: 13px;

  line-height: 1.7;

  opacity: .65;

}


.skills {

  margin-top: 40px;

  border-top:
    1px solid rgba(255,255,255,.2);

}


.skills div {

  display: grid;

  grid-template-columns:
    50px 1fr;

  padding:
    14px 0;

  border-bottom:
    1px solid rgba(255,255,255,.2);

}


.skills span {

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

  opacity: .5;

}


.skills strong {

  font-size: 13px;

  font-weight: 500;

}


.software {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 25px;

}


.software span {

  padding:
    7px 10px;

  border:
    1px solid rgba(255,255,255,.25);

  border-radius: 100px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

}


.socials {

  display: flex;

  flex-wrap: wrap;

  gap: 22px;

  margin-top: 35px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 10px;

}


.socials a {

  padding-bottom: 5px;

  border-bottom:
    1px solid currentColor;

}


/* ==========================================
   CONTACT
========================================== */

.page-contact {

  min-height: 100svh;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-items: start;

  gap: 10vw;

  padding:
    150px 7vw;

  background:
    #f0ede6;

}


.contact-copy h2 {

  margin:
    20px 0 30px;

  font-size:
    clamp(50px, 7vw, 100px);

  line-height: .85;

  letter-spacing:
    -.07em;

}


.contact-copy h2 em {

  font-family:
    Georgia,
    serif;

  font-weight: 400;

}


.big-mail {

  display: inline-block;

  max-width: 100%;

  font-size:
    clamp(24px, 3vw, 46px);

  letter-spacing:
    -.04em;

  border-bottom:
    1px solid currentColor;

  padding-bottom: 8px;

}


.contact-form {

  display: flex;

  flex-direction: column;

  gap: 24px;

}


.contact-form label {

  display: flex;

  flex-direction: column;

  gap: 8px;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

  letter-spacing: .08em;

  text-transform: uppercase;

}


.contact-form input,
.contact-form textarea {

  width: 100%;

  padding:
    10px 0;

  border: 0;

  border-bottom:
    1px solid #aaa;

  outline: none;

  background: transparent;

  color: inherit;

  resize: vertical;

}


.contact-form input:focus,
.contact-form textarea:focus {

  border-color:
    #111;

}


.form-note {

  margin: 0;

  font-family:
    "DM Mono",
    monospace;

  font-size: 9px;

  opacity: .5;

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 800px) {


  .topbar {

    height: 64px;

    padding:
      0 18px;

  }


  .nav {

    display: none;

  }


  .menu {

    display: block;

    font-family:
      "DM Mono",
      monospace;

    font-size: 10px;

  }


  .page-home {

    min-height:
      100svh;

    padding:
      110px 24px 80px;

    align-items: flex-end;

  }


  .home-copy {

    max-width:
      92%;

  }


  .home-copy h1 {

    font-size:
      clamp(50px, 15vw, 90px);

  }


  .home-copy .intro {

    font-size:
      13px;

  }


  .cta {

    gap:
      18px;

    font-size:
      8px;

  }


  .float-object {

    width:
      145px;

  }


  .obj-a {

    left: 51%;

    top: 7%;

    width: 145px;

  }


  .obj-b {

    left: 68%;

    top: 30%;

    width: 155px;

  }


  .obj-c {

    left: 42%;

    top: 58%;

    width: 150px;

  }


  .obj-d {

    left: 68%;

    top: 13%;

    width: 125px;

  }


  .obj-e {

    left: 62%;

    top: 69%;

    width: 145px;

  }


  .scroll-hint {

    display:
      none;

  }


  /* exploration */


  .explore-shell {

    padding:
      105px 24px 100px;

  }


  .explore-meta {

    top: 88px;

    left: 24px;

  }


  .project-stage {

    width:
      100%;

    grid-template-columns:
      1fr;

    gap:
      28px;

  }


  .project-visual {

    aspect-ratio:
      1 / .95;

  }


  .project-info h2 {

    font-size:
      43px;

  }


  .project-info > p:not(.eyebrow) {

    font-size:
      13px;

  }


  .arrow {

    top:
      auto;

    bottom:
      27px;

    width:
      48px;

    height:
      48px;

    transform:
      none;

  }


  .arrow:hover {

    transform:
      scale(1.05);

  }


  .arrow-left {

    left:
      24px;

  }


  .arrow-right {

    right:
      24px;

  }


  .project-dots {

    bottom:
      48px;

  }


  .dot {

    width:
      22px;

  }


  .dot.active {

    width:
      35px;

  }


  /* projets */


  .page-projects {

    padding:
      120px 18px 70px;

  }


  .section-heading {

    display:
      block;

    margin-bottom:
      45px;

  }


  .section-heading h2 {

    margin:
      20px 0;

  }


  .project-grid {

    display:
      block;

  }


  .grid-card,
  .grid-card:nth-child(2),
  .grid-card:nth-child(4) {

    min-height:
      390px;

    margin:
      0 0 16px;

  }


  /* about */


  .page-about {

    grid-template-columns:
      1fr;

    gap:
      55px;

    padding:
      110px 24px 80px;

  }


  .about-portrait {

    width:
      100%;

    max-width:
      520px;

  }


  .about-copy h2 {

    font-size:
      55px;

  }


  .about-copy .lead {

    font-size:
      17px;

  }


  /* contact */


  .page-contact {

    grid-template-columns:
      1fr;

    gap:
      60px;

    padding:
      110px 24px 80px;

  }


  .contact-copy h2 {

    font-size:
      55px;

  }


  .big-mail {

    font-size:
      25px;

  }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior:
      auto;

  }


  *,
  *::before,
  *::after {

    animation:
      none !important;

    transition:
      none !important;

  }

}