/* Coupe Franche: paper and ink, monochrome. Tokens carried over from the former site. */
:root {
  --papier: #f3f0e9;
  --encre: #14110e;
  --graphite: #6e6960;
  --plomb: #4f4a42;
  --filet: #d9d3c7;
  --e-entree: cubic-bezier(0.16, 1, 0.3, 1);
  --t-ample: 0.9s;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  color: var(--encre);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--encre);
  color: var(--papier);
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--filet);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 5vw, 64px);
  animation: rise var(--t-ample) var(--e-entree) both;
}

h1 {
  font-stretch: 118%;
  font-weight: 800;
  font-size: clamp(2.4rem, 7.8vw, 7rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

h1 em {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: -0.02em;
  text-transform: none;
}

p {
  margin-top: clamp(20px, 3vw, 36px);
  color: var(--plomb);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }
}