:root {
  --bg: #07080B;
  --fg: #E8ECF2;
  --muted: #8A93A6;
  --faint: #4A5163;
  --line: rgba(232, 236, 242, .12);
  --cyan: #22E4FF;
  --f-display: 'Unbounded', system-ui, sans-serif;
  --f-body: 'Space Grotesk', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(16px, 4vw, 64px);
  --maxw: 1440px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 clamp(16px, 1.05vw, 18px)/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 4px; }
.mono { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 6vh, 72px) var(--gutter); }
.label { margin: 0 0 clamp(28px, 5vh, 56px); color: var(--muted); }

/* ---------- hero ---------- */
.hero { container-type: inline-size; display: flex; flex-direction: column; max-width: var(--maxw); margin: 0 auto; padding: clamp(96px, 18vh, 200px) var(--gutter) clamp(36px, 6vh, 72px); }
.kicker { margin: 0 0 clamp(18px, 3vh, 36px); color: var(--muted); }
.hero__title { margin: 0; line-height: .82; }
.hero__word { display: block; font: 800 1rem/.86 var(--f-display); font-size: min(16rem, 15.4cqi); letter-spacing: -.06em; white-space: nowrap; }
.ch { display: inline-block; }
.hero__name { margin: clamp(22px, 4vh, 48px) 0 0; font: 300 clamp(1.3rem, 2.6vw, 2.4rem)/1 var(--f-display); letter-spacing: -.02em; }
.links { display: flex; gap: 32px; list-style: none; margin: clamp(36px, 7vh, 80px) 0 0; padding: 0; }
.links a, .mail { color: var(--muted); transition: color .3s; }
.links a:hover, .mail:hover { color: var(--fg); }

/* ---------- jeux ---------- */
.games { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.game { display: grid; grid-template-columns: 90px 1fr auto; gap: 24px; align-items: baseline; padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid var(--line); }
.game__year { color: var(--faint); transition: color .4s; }
.game__title { font: 500 clamp(1.1rem, 2.1vw, 1.8rem)/1.2 var(--f-display); letter-spacing: -.02em; }
.game__role { color: var(--muted); text-align: right; }
.game:hover .game__year { color: var(--cyan); }

/* ---------- contact ---------- */
.contact { container-type: inline-size; display: flex; flex-direction: column; padding-bottom: clamp(56px, 10vh, 120px); }
.contact__title { margin: 0; font: 800 1rem/.9 var(--f-display); font-size: min(13rem, 15.6cqi); letter-spacing: -.06em; white-space: nowrap; }
.mail { margin-top: clamp(28px, 5vh, 56px); align-self: flex-start; }

.footer { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) 48px; color: var(--faint); font-size: .64rem; }

@media (max-width: 760px) {
  .game { grid-template-columns: 52px 1fr; gap: 6px 16px; }
  .game__role { grid-column: 2; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal] { opacity: 1; transform: none; }
}