@font-face {
  font-family: "Asterisques Bodoni";
  src: url("assets/fonts/bodoni-72-book.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Asterisques Fog";
  src: url("assets/fonts/fogtwo-no5.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("assets/fonts/nunito-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Repli aux métriques ajustées.
   Sans ça, le texte s'affiche d'abord dans Times ou Arial, puis se recompose
   quand la vraie police arrive : les lignes changent de largeur et tout le
   contenu saute. Ces trois familles ne téléchargent rien — elles réutilisent
   une police déjà installée en corrigeant sa chasse et ses hauteurs pour
   qu'elle occupe exactement la place de la police de la charte. Valeurs
   calculées par `docs/tools/build_fonts.py`, à recalculer si une police
   change. */
@font-face {
  font-family: "Fog repli";
  src: local("Times New Roman"), local("Times");
  size-adjust: 104.83%;
  ascent-override: 73.74%;
  descent-override: 21.65%;
  line-gap-override: 6.39%;
}

@font-face {
  font-family: "Bodoni repli";
  src: local("Times New Roman"), local("Times");
  size-adjust: 93.43%;
  ascent-override: 100.19%;
  descent-override: 28.47%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Nunito repli";
  src: local("Arial"), local("Helvetica");
  size-adjust: 100.27%;
  ascent-override: 100.83%;
  descent-override: 35.21%;
  line-gap-override: 0%;
}

:root {
  --cream: #fff7ed;
  --cream-dark: #f2e7db;
  --ink: #181116;
  --purple: #490f66;
  --violet: #660a66;
  --fuchsia: #660a37;
  --teal: #0a6666;
  --mint: #a8dddd;
  --line: rgba(24, 17, 22, 0.24);
  --side: clamp(1.25rem, 4vw, 4.5rem);
  --serif: "Asterisques Bodoni", "Bodoni repli", Didot, "Times New Roman", serif;
  --display: "Asterisques Fog", "Fog repli", "Times New Roman", serif;
  --sans: "Nunito", "Nunito repli", Arial, Helvetica, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  background: var(--cream);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  /* Les attributs `width`/`height` du HTML posent une hauteur fixe. Sans ce
     `height: auto`, une image dont le CSS ne fixe que la largeur garde la
     hauteur du fichier et se retrouve étirée. */
  height: auto;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1rem;
  color: white;
  background: var(--ink);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.25rem;
  padding: 0.65rem var(--side);
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, border-color 220ms ease;
}

.site-header.is-scrolled {
  border-color: rgba(24, 17, 22, 0.12);
  background: color-mix(in srgb, var(--cream) 91%, transparent);
  backdrop-filter: blur(14px);
}

.menu-open .site-header.is-scrolled {
  /* backdrop-filter crée un bloc de confinement pour les descendants en
     position: fixed : ça piégeait le menu plein écran dans la hauteur du
     header dès qu'on avait scrollé. Le header est de toute façon masqué
     sous le menu ouvert (opaque, z-index supérieur). */
  backdrop-filter: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.brand img {
  width: 2.9rem;
  height: 2.9rem;
}

.navigation {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.75rem);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.navigation a {
  position: relative;
}

.navigation a:not(.nav-contact)::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.navigation a:hover::after,
.navigation a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-contact {
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease;
}

.nav-contact:hover {
  color: var(--cream);
  background: var(--ink);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: clamp(5.5rem, 8vh, 6.5rem) var(--side) clamp(1.5rem, 4vh, 2.75rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__wash {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 45%, rgba(102, 10, 102, 0.1) 45% 48%, transparent 48% 100%),
    radial-gradient(circle at 92% 9%, rgba(10, 102, 102, 0.2), transparent 28%),
    var(--cream);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: min(100%, 92rem);
}

.eyebrow,
.section-tag,
.project__label,
.project__status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow,
.section-tag {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

/* Astérisme en tête de section, à la place du filet horizontal qui tenait
   lieu de repère graphique. Aucune police du site ne contient `⁂` : il est
   rendu par une police système, son dessin varie donc légèrement d'un
   appareil à l'autre. Choix assumé, comme dans la version 1984. */
.eyebrow::before,
.section-tag::before {
  color: var(--violet);
  font-size: 1.5em;
  /* L'intitulé est interlettré ; sans cette remise à zéro, l'écart se
     rajouterait après l'astérisme, en plus du `gap`. */
  letter-spacing: 0;
  line-height: 1;
  /* Le centre de son encre tombe 0,116 em au-dessus du milieu des capitales
     de l'intitulé (mesuré au canvas, hauteur de capitale sans accent) : on
     l'y redescend exactement. */
  transform: translateY(0.116em);
  content: "⁂";
}

.hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.3rem, 9.8vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.78;
}

.hero h1 em,
.display-title em,
.project h2 em,
.contact h2 em {
  font-family: var(--serif);
  font-weight: 400;
}

.hero__instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: clamp(1.15rem, 2.2vw, 1.9rem);
  padding: 0.72rem 1rem;
  border: 1px solid var(--fuchsia);
  border-radius: 999px;
  color: var(--cream);
  background: var(--fuchsia);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.hero__instagram img {
  width: 1rem;
  height: 1rem;
  filter: invert(1);
  transition: filter 180ms ease;
}

.hero__instagram:hover {
  color: var(--fuchsia);
  background: transparent;
  transform: translateY(-2px);
}

.hero__instagram:hover img {
  filter: none;
}

.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  /* `margin: auto` centrait le bloc dans la hauteur de l'écran : sur un grand
     moniteur, cela creusait un vide entre l'intitulé d'ouverture et le titre.
     Le bloc se cale maintenant juste sous l'intitulé, et c'est la respiration
     du bas qui absorbe la hauteur restante. */
  margin: clamp(1.25rem, 3vh, 2.5rem) 0 auto;
}

.hero__logo-scene {
  width: min(100%, 30rem);
  margin: 0;
  justify-self: end;
}

.hero__logo-scene img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.hero__bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  /* `width` fixait la largeur à celle du conteneur : la marge de gauche
     poussait alors le bloc hors du cadre, et le bouton rond sortait de
     l'écran entre 850 et 1100 px. Avec `max-width`, le bloc prend la place
     qui reste après la marge. */
  max-width: 52rem;
  margin-top: 1.5rem;
  margin-left: min(20vw, 18rem);
}

.hero__bottom > p {
  max-width: 23rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.25;
}

.round-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 7rem;
  height: 7rem;
  padding: 1rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.72rem;
  line-height: 1.25;
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.round-link:hover {
  color: var(--cream);
  background: var(--purple);
  box-shadow: 0 0 0 0.3rem rgba(73, 15, 102, 0.12);
}

.round-link > span:last-child {
  font-size: 1.25rem;
}

.hero__side-note {
  position: absolute;
  right: 1.4rem;
  bottom: 8.5rem;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.section {
  padding: clamp(3rem, 5.5vw, 5rem) var(--side);
}

.intro,
.project,
.contact {
  isolation: isolate;
}

.intro {
  position: relative;
  overflow: hidden;
}

.intro > :not(.section-figure) {
  position: relative;
  z-index: 1;
}

.section-figure,
.project__figure,
.contact__figure {
  position: absolute;
  z-index: 0;
  display: block;
  width: auto;
  height: auto;
  pointer-events: none;
}

.section-figure--intro {
  top: clamp(5rem, 10vw, 9rem);
  right: clamp(-7rem, -3vw, -2rem);
  width: min(31vw, 26rem);
  opacity: 0.16;
}

.section-tag {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.section-tag--light {
  border-color: rgba(255, 247, 237, 0.32);
}

.section-tag--light::before {
  color: var(--mint);
}

.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
  gap: clamp(2.25rem, 5vw, 5rem);
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
}

.display-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem, 7.3vw, 7.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.83;
}

.display-title em {
  color: var(--violet);
}

.intro__copy {
  align-self: end;
  max-width: 34rem;
}

.intro__copy p {
  margin: 1.15rem 0 0;
}

.intro__copy .lead {
  margin-top: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.25;
}

.fact-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.25rem, 4.5vw, 4rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.fact-strip p {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 0;
  padding: 1.15rem clamp(0.75rem, 2vw, 2rem);
}

.fact-strip p + p {
  border-left: 1px solid var(--line);
}

.fact-strip strong {
  color: var(--purple);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
}

.fact-strip span {
  max-width: 10rem;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.manifesto {
  position: relative;
  color: var(--cream);
  background: var(--purple);
  overflow: hidden;
}

.manifesto__figures {
  position: absolute;
  z-index: 0;
  bottom: clamp(-3rem, -3vw, 0rem);
  left: clamp(-1rem, 4vw, 4.5rem);
  display: flex;
  align-items: end;
  gap: clamp(0.5rem, 1.8vw, 2rem);
  opacity: 0.34;
  pointer-events: none;
}

.scene-figure {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
}

.scene-figure--left {
  width: clamp(13rem, 21vw, 22rem);
}

.scene-figure--right {
  width: clamp(11rem, 18vw, 19rem);
}

.manifesto__heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 2.5rem;
  margin-top: clamp(2.25rem, 4vw, 4rem);
}

.manifesto__heading > p {
  max-width: 18rem;
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.25;
}

.manifesto h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.8rem, 8.5vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.8;
}

.principles {
  position: relative;
  z-index: 1;
  margin: clamp(2.25rem, 4.5vw, 4.5rem) 0 0 32%;
  padding: 0;
  list-style: none;
}

.principles article {
  padding: 1.3rem 0;
  border-top: 1px solid rgba(255, 247, 237, 0.3);
  list-style: none;
}

.principles h3 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 400;
}

.principles p {
  max-width: 37rem;
  margin: 0;
  color: rgba(255, 247, 237, 0.78);
}

.project {
  position: relative;
  background: var(--cream-dark);
  overflow: hidden;
}

.project__stage {
  position: relative;
  margin-top: clamp(1.75rem, 3.5vw, 3.5rem);
  padding: clamp(2rem, 4vw, 4rem);
  color: var(--cream);
  background: var(--fuchsia);
  overflow: hidden;
  isolation: isolate;
}

.project__stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 24.8%, rgba(255,255,255,.1) 25%, transparent 25.2%),
    linear-gradient(90deg, transparent 0 74.8%, rgba(255,255,255,.1) 75%, transparent 75.2%);
  content: "";
}

.project__stage > :not(.project__figure) {
  position: relative;
  z-index: 1;
}

.project__figure {
  right: clamp(-7rem, -3vw, -2rem);
  bottom: clamp(-9rem, -6vw, -3rem);
  width: min(31vw, 25rem);
  opacity: 0.2;
}

.project__label {
  margin: 0;
  color: var(--mint);
}

.project__title-wrap {
  position: relative;
  margin-top: clamp(2rem, 4vw, 4rem);
}

.project h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.6rem, 11vw, 11rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.72;
}

.project__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 7rem);
  max-width: 55rem;
  margin: clamp(2rem, 4vw, 4rem) 0 0 auto;
}

.project__details p {
  margin: 0;
}

.project__details > p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.3;
}

.project__notice {
  color: rgba(255, 247, 237, 0.74);
  font-size: 0.88rem;
}

.project__status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.5rem 0 0;
}

.project__status span {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0.4rem color-mix(in srgb, var(--mint) 22%, transparent);
}

.contact {
  position: relative;
  padding-bottom: 2rem;
  color: var(--cream);
  background: var(--ink);
  overflow: hidden;
}

.contact__figure {
  bottom: clamp(-8rem, -5vw, -2rem);
  left: clamp(-4rem, 2vw, 2rem);
  width: min(29vw, 24rem);
  opacity: 0.2;
}

.contact__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.contact__small {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.3;
}

.contact__main {
  position: relative;
  z-index: 2;
  margin-top: clamp(2.25rem, 4.5vw, 4.5rem);
}

.contact h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 11vw, 11rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.75;
}

.contact h2 em {
  color: var(--mint);
}

.contact__email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 55rem;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255, 247, 237, 0.4);
  border-bottom: 1px solid rgba(255, 247, 237, 0.4);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3vw, 2.4rem);
  transition: color 180ms ease, border-color 180ms ease;
}

.contact__email:hover,
.contact__email:focus-visible {
  color: var(--mint);
  border-color: var(--mint);
}

.contact__email-icon {
  color: var(--mint);
}

.contact__footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 247, 237, 0.2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact__footer p {
  margin: 0;
  text-align: center;
}

.contact__footer a:last-child {
  text-align: right;
}

.contact__logo {
  position: absolute;
  right: -6rem;
  bottom: 2rem;
  width: min(45vw, 42rem);
  opacity: 0.035;
  pointer-events: none;
}

.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.75,.25,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 850px) {
  .site-header {
    min-height: 4.5rem;
  }

  .brand span {
    display: none;
  }

  .menu-toggle {
    position: relative;
    z-index: 102;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: 700 0.7rem/1 var(--sans);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .menu-toggle__icon,
  .menu-toggle__icon::before {
    display: block;
    width: 1.4rem;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
  }

  .menu-toggle__icon::before {
    transform: translateY(-0.4rem);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon {
    transform: rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
    transform: rotate(90deg);
  }

  .navigation {
    position: fixed;
    z-index: 101;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.2rem;
    padding: 6rem var(--side);
    color: var(--cream);
    background: var(--purple);
    font-family: var(--serif);
    font-size: clamp(2.2rem, 10vw, 4rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: none;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1rem);
    transition: visibility 0s linear 250ms, opacity 250ms ease, transform 250ms ease;
  }

  .navigation.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
  }

  .nav-contact {
    padding: 0;
    border: 0;
  }

  .menu-open .menu-toggle {
    color: var(--cream);
  }

  .hero__bottom {
    margin-left: 0;
  }

  .hero__stage {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin: 1.75rem 0;
  }

  .hero__logo-scene {
    width: min(68vw, 22rem);
    justify-self: end;
  }


  .intro__grid,
  .manifesto__heading,
  .contact__top {
    grid-template-columns: 1fr;
  }

  .intro__copy {
    margin-left: 20%;
  }

  .fact-strip {
    grid-template-columns: 1fr;
  }

  .fact-strip p + p {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .principles {
    margin-left: 18%;
  }

  .manifesto__figures {
    bottom: -2rem;
    left: -1rem;
    opacity: 0.28;
  }

  .section-figure--intro {
    top: auto;
    right: -3rem;
    bottom: 3rem;
    width: 16rem;
    opacity: 0.12;
  }

  .project__figure {
    right: -3rem;
    bottom: -3rem;
    width: 15rem;
    opacity: 0.16;
  }

  .contact__figure {
    bottom: -2rem;
    left: -2rem;
    width: 14rem;
    opacity: 0.14;
  }
}

@media (max-width: 560px) {
  .hero {
    min-height: 48rem;
  }

  .hero h1 {
    font-size: clamp(4rem, 20vw, 6.5rem);
  }

  .hero__bottom {
    align-items: center;
    gap: 1.5rem;
  }

  .hero__side-note {
    display: none;
  }

  .round-link {
    flex: 0 0 auto;
    width: 5.8rem;
    height: 5.8rem;
    padding: 0.8rem;
    font-size: 0.62rem;
  }

  .intro__copy,
  .principles {
    margin-left: 0;
  }

  .manifesto__figures {
    bottom: -1.5rem;
    left: -1.25rem;
    gap: 0.35rem;
    opacity: 0.24;
  }

  .scene-figure--left {
    width: 11rem;
  }

  .scene-figure--right {
    width: 9.5rem;
  }

  .project__details {
    grid-template-columns: 1fr;
  }

  .contact__footer {
    grid-template-columns: 1fr;
  }

  .contact__footer p,
  .contact__footer a:last-child {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}