/* Command Line — une fonte, une graisse, deux tailles. Martian Mono figée
   maigre et large (300, 112,5 %) : huit kilo-octets, rien d'autre à charger.
   Le code comme une écriture et pas comme une armure : de l'air, des filets
   d'un pixel, pas un aplat noir. D'après l'écran cyberféministe de VNS Matrix
   et de Laboria Cuboniks : la machine est à nous, elle parle bas et elle
   brille. L'encre de l'humeur allume les étiquettes et le curseur ; sans
   humeur, c'est le violet xéno. */

/* la géométrie */
* { box-sizing: border-box }
body {
  max-width: 36rem; margin: 0 auto; padding: 4rem 1.5rem;
  min-height: 100vh; display: flex; flex-direction: column;
  color: var(--texte); background: var(--papier);
  font: 1rem/1.7 var(--face); --machine: monospace;
  text-transform: lowercase;   /* pas une capitale sur tout le site */
}
main { flex: 1 }
a { color: inherit; text-underline-offset: .2em }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px }
.line, .home { text-decoration: none }
h1 { margin: 0 0 2rem; font: 700 2rem/1.1 var(--face) }
h2, h3 { margin: 2.5rem 0 .5rem; font: 700 1.1rem/1.3 var(--face) }
.home, .type, .when, .year, .meta, footer { font-size: .8rem }
.log { display: grid; grid-template-columns: 1fr auto auto; gap: 0 1.5rem }
.line { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; padding: .5rem 0 }
.year { grid-column: 1 / -1; margin-top: 3rem }
pre { margin: 2rem 0; overflow-x: auto; white-space: pre-wrap; font: .85rem/1.6 var(--machine) }
code { font-family: var(--machine) }
img, canvas, iframe, audio { display: block; width: 100%; height: auto; margin: 2rem 0; border: 0 }
footer { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 5rem }
/* la marque devient une invite au clic (prompt.js) */
main > h1[tabindex] { cursor: text }
main > h1 input { position: absolute; width: 1px; opacity: 0; padding: 0; border: 0; font-size: 1rem }   /* le champ écoute, la marque écrit */
main > output { display: block; margin: -1.5rem 0 1.5rem; font-size: .8rem; opacity: .7 }
main > output span { display: inline-block; margin-right: 3ch }

/* la page */
@font-face { font-family: Martian; src: url(/fonts/MartianMono.woff2) format("woff2"); font-display: swap }
body {
  --papier: #ffffff; --texte: #111111; --pale: #e6e6e6; --muted: #767676; --code: #faf7fb;   /* six chiffres : union lit l'hex à la main */
  --signal: var(--ink, #8B33FF); --face: Martian, Menlo, monospace; --machine: var(--face);
  --corps: .78rem;   /* deux tailles, pas une de plus : le texte, et les titres */
  --titre: min(3rem, calc((100vw - 2.5rem) / 12.6));   /* la marque, seize caractères, tient sur une ligne */
  max-width: 52rem; padding: 3.5rem 1.25rem 1.5rem;
  font: 300 var(--corps)/1.6 var(--face); letter-spacing: .01em; font-synthesis: none;
}
@media (prefers-color-scheme: dark) {
  body { --papier: #0d0c0f; --texte: #f2eff5; --pale: #26232b; --muted: #8e8896; --code: #16141a }
}
::selection { background: var(--signal); color: #ffffff }
/* une graisse : rien ne s'épaissit, pas même un gras simulé ; l'accent passe à l'encre */
h1, h2, h3 { font-weight: 300; font-synthesis: none }
strong, b { font-weight: 300; color: var(--signal) }
h1 { font-size: var(--titre); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere }
h2, h3, pre, .home, .type, .when, .year, .meta, footer { font-size: var(--corps) }
h2, h3 { color: var(--signal) }

/* la marque se tape lettre après lettre, le curseur devant, puis il attend */
main > h1 { height: calc(var(--titre) * 1.15); margin: 0 0 3rem; white-space: nowrap }   /* même hauteur, marque ou invite */
main > h1 span { animation: frappe .01s calc(var(--t) * 1.1s) steps(1) backwards }
@keyframes frappe { from { font-size: 0 } }   /* une lettre pas encore tapée ne prend pas de place : le curseur la suit */
main > h1::after {
  content: ""; display: inline-block; width: .45em; height: .9em; margin-left: .1em; vertical-align: -.08em;
  background: var(--signal); animation: curseur 1.1s 1.2s steps(1) infinite;
}
@keyframes curseur { 50% { opacity: 0 } }
main > h1.prompt { font-size: min(var(--titre), calc((min(100vw, 52rem) - 2.5rem) / (var(--len) * .76))) }   /* une longue commande rapetisse, sans sortir */
main > h1.prompt::after, main > h1:focus-visible::after { animation: none }   /* fixe = la main est là */
main > h1:focus-visible { outline: none }
main > output { color: var(--muted); font-size: var(--corps) }

/* la machine : les étiquettes, en gris ou à l'encre, jamais plus petites */
.home, .when, .year, footer { color: var(--muted) }
main > p { max-width: 58ch; margin: 0 0 1rem }
main > p:first-of-type { color: var(--signal) }
main > p:first-of-type::before { content: "> "; opacity: .6 }

/* l'index : un registre qui respire */
.log { grid-template-columns: auto 1fr auto auto; gap: 0 1.5rem; margin-top: 1.5rem; counter-reset: ligne }
.year { display: flex; align-items: center; gap: 1rem; margin: 3.5rem 0 .5rem }
.year::after { content: ""; flex: 1; height: 1px; background: var(--pale) }
.line { position: relative; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--pale); counter-increment: ligne; outline: none }
.line::before { content: counter(ligne, decimal-leading-zero); color: var(--muted); opacity: .7 }
/* au survol, la ligne est celle du curseur : « > » gras et le pavé après le titre, à l'encre de la pièce */
.line:hover::before, .line:focus-visible::before { content: ">"; color: var(--ink); opacity: 1; font-weight: 700; font-synthesis: weight; -webkit-text-stroke: .06em currentColor }
.line > span:first-child::after { content: ""; display: inline-block; width: .45em; height: 1.1em; margin-left: .15em; vertical-align: -.2em; background: var(--ink); visibility: hidden }
.line:hover > span:first-child::after, .line:focus-visible > span:first-child::after { visibility: visible }
/* la forme : un mot à l'encre, précédé de son point */
.type { color: var(--ink) }
.type::before { content: "● "; font-size: .55em; vertical-align: .2em }

/* la vignette : elle se pose au-dessus de la ligne, à droite, le temps du survol */
.line img {
  display: block; position: absolute; right: 0; bottom: calc(100% + .5rem); z-index: 1;
  width: min(15rem, 55vw); aspect-ratio: 16 / 9; margin: 0; object-fit: cover;
  opacity: 0; transform: translateY(.4rem); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.line:hover img, .line:focus-visible img { opacity: 1; transform: none }

/* la pièce */
article { max-width: 42rem }
.home { display: inline-block; margin-bottom: 3rem; text-decoration: none }
.home:hover, .home:focus-visible { color: var(--signal) }
article h1 { margin: 0 0 1.25rem }
.meta { margin: 0 0 3rem; color: var(--signal) }
.meta::before { content: "// " }
article > p, article > ul, article > ol { margin: 0 0 1.5em }   /* entre deux paragraphes, bien plus d’air qu’entre deux lignes */
article hr { width: 3ch; margin: 3em 0; border: 0; border-top: 1px solid var(--signal) }
article a { text-decoration: underline 1px var(--signal); text-underline-offset: .35em }
article a:hover { color: var(--signal) }
pre { padding: 1.25rem 1.5rem; color: var(--texte); background: var(--code); border-left: 1px solid var(--signal) }
audio { border: 1px solid var(--pale) }

footer { gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--pale) }
footer a { text-decoration: none }
footer a:hover { color: var(--signal) }

@media (max-width: 34rem) {
  .log { grid-template-columns: auto 1fr auto; gap: 0 .9rem }
  .when { display: none }
}
@media (prefers-reduced-motion: reduce) {
  main > h1 span, main > h1::after, .line img { animation: none; transition: none }
}
/* les encres sont tirées pour le blanc : dans le noir, elles s'éclaircissent */
@media (prefers-color-scheme: dark) {
  body { --signal: color-mix(in oklab, var(--ink, #8B33FF), white 30%) }
  .type { color: color-mix(in oklab, var(--ink), white 35%) }
}