:root {
  --bg: #171816;
  --stone: #D8D2C7;
  --sand: #B8A58C;
  /* Manrope is the project's modern sans (used locally if installed; to be self-hosted later). System sans otherwise. */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --logo-ratio: calc(307 / 182);
  --chrome: 330px; /* vertical room kept for the copy, the call to action and the paddings */
}

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

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--stone);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cs {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.cs-logo { margin: 0; width: 100%; display: flex; justify-content: center; }

.nx-logo {
  display: block;
  width: min(1010px, 100%, calc((100svh - var(--chrome)) * var(--logo-ratio)));
  min-width: min(340px, 100%); /* keeps the baseline legible (≈9 px caps) on very short screens: scroll rather than shrink */
  height: auto;
  overflow: hidden;
}

.nx-rope { vector-effect: non-scaling-stroke; }

.cs-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: clamp(12px, 2.5vh, 24px);
}

.cs-title {
  margin: 0;
  font: 300 clamp(26px, 3.2vw, 40px) / 1.2 var(--sans);
  letter-spacing: 0.01em;
  color: var(--stone);
  text-wrap: balance;
}

.cs-sub {
  margin: 10px 0 0;
  font: 400 clamp(14px, 1.1vw, 16px) / 1.5 var(--sans);
  letter-spacing: 0.04em;
  color: var(--sand);
}

/* Primary call to action */
.cs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: clamp(18px, 3vh, 28px);
  padding: 12px 28px;
  font: 500 15px / 1.2 var(--sans);
  letter-spacing: 0.02em;
  color: var(--bg);
  background: var(--stone);
  border: 1px solid var(--stone);
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.cs-cta:focus-visible { outline: 2px solid var(--stone); outline-offset: 3px; }

/* Secondary / utility commands: « Passer l'animation », « Revoir l'animation » */
.cs-controls { margin-top: 8px; }

.cs-btn {
  min-height: 44px;
  padding: 10px 12px;
  font: 400 13px / 1.2 var(--sans);
  letter-spacing: 0.02em;
  color: var(--sand);
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  transition: color 160ms ease;
}

.cs-btn:focus-visible { outline: 2px solid var(--stone); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .cs-cta:hover { background: var(--sand); border-color: var(--sand); }
  .cs-btn:hover { color: var(--stone); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* While the intro is armed, the final logo and copy wait for the timeline (no flash before the first frame). */
.nx-intro .nx-final, .nx-intro .nx-beam, .nx-intro .nx-word, .nx-intro .nx-base,
.nx-intro .cs-title, .nx-intro .cs-sub, .nx-intro .cs-cta { opacity: 0; }
.nx-intro .cs-cta { visibility: hidden; }

@media (max-width: 600px) {
  :root { --logo-ratio: calc(220 / 178); --chrome: 360px; }
}

/* Roomy screens: the secondary command moves to the corner, away from the call to action. */
@media (min-width: 601px) and (min-height: 641px) {
  .cs-controls { position: fixed; right: 20px; bottom: 16px; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-cta, .cs-btn { transition: none; }
}