/* klaract.fr: one screen, no scrolling. Blue ink seen through fluted glass (WebGL), the name in the middle. */
@font-face { font-family: "Inter"; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-bec94a4d.woff2) format("woff2"); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1240px, 100% - 48px); margin: 0 auto; }
main { flex: 1; display: flex; align-items: center; }
footer { padding: 22px 0 28px; font-size: 13px; }
footer a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
footer a:hover { text-decoration-color: currentColor; }

body { background: #eef1f6; color: #fff; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }
/* Without WebGL: the same colours, still. */
.fallback { position: fixed; inset: 0; z-index: -2; background: radial-gradient(60% 70% at 45% 55%, #0a2a6b, #2f7fd3 45%, #cfe0f5 75%, #eef1f6); }
main { justify-content: center; }
.word { display: inline-flex; align-items: center; gap: .32em; margin: 0; font-size: clamp(34px, 4.4vw, 58px); font-weight: 560; letter-spacing: -0.045em; text-shadow: 0 2px 24px rgba(3, 20, 60, .35); }
.word svg { width: .78em; height: .78em; }
footer { display: flex; justify-content: center; }
footer .pill { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #24324d; }
footer a { color: #0b1b3a; }
.word .dot { color: #2454f4; text-shadow: none; }
/* The name alternates between white and black (light-ink), with a slow fade. */
.word, .word svg g { transition: color 2.4s ease, fill 2.4s ease, text-shadow 2.4s ease; }
body.light-ink .word { color: #0b0d14; text-shadow: 0 1px 16px rgba(238, 241, 246, .55); }
body.light-ink .word svg g { fill: #0b0d14; }
/* Cursor shared with the Académie: a rounded dark arrow, white edge, soft shadow; still an arrow on links. */
html, a, button, [role="button"], label, summary, select { cursor: url("/cursor.svg") 4 3, auto; }
input:not([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"], [type="reset"]), textarea, [contenteditable="true"] { cursor: text; }
:disabled, [aria-disabled="true"] { cursor: not-allowed; }