:root {
  color-scheme: light;
  --paper: #fbfcfe;
  --grid: #d3ddf0;
  --ink: #1f3c88;
  --muted: #4d5f95;
  --accent: #d0342c;
  /* Un carreau (5 mm ≈ 20 px). Toute la mise en page se compte en carreaux. */
  --g: 20px;
  --gutter: calc(3 * var(--g));
  --margin-line: calc(2 * var(--g));
  /* Petit jour entre le texte et les lignes du cahier, pour ne pas écrire collé au trait. */
  --nudge: 3px;
  --max: 1160px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  color: var(--ink);
  background: var(--paper);
  /* Même cahier que bcsbl.fr : petits carreaux. */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--g) var(--g);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
::selection { color: var(--paper); background: var(--accent); }

/* Marge rouge du cahier, sur une ligne verticale, toujours à gauche du texte. */
body::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 var(--margin-line);
  width: 1px;
  background: var(--accent);
  opacity: 0.7;
  pointer-events: none;
}

/* Bord gauche et hauteur de page arrondis au carreau : le texte part juste après une ligne verticale,
   le pied de page tombe sur une ligne horizontale. */
.page {
  --page-w: min(calc(100vw - var(--gutter) - var(--g)), var(--max));
  width: var(--page-w);
  padding-left: var(--nudge);
  margin-left: var(--gutter);
  margin-left: max(var(--gutter), round(down, calc((100vw - var(--page-w)) / 2), var(--g)));
  min-height: 100vh;
  min-height: round(down, 100svh, var(--g));
  display: flex;
  flex-direction: column;
}

/* Écrire sur les lignes : chaque texte pose sa ligne de base juste au-dessus d.une ligne de la grille,
   --rows carreaux sous la ligne de base précédente. text-box rogne le texte à sa ligne de base. */
.wordmark, .tagline, .wip > *, .footer > * {
  line-height: var(--g);
  margin: calc(var(--rows, 1) * var(--g) - 1cap - var(--lift, 0px)) 0 0;
  text-box: trim-both cap alphabetic;
}
@supports not (text-box: trim-both cap alphabetic) {
  .wordmark, .tagline, .wip > *, .footer > * { margin-top: calc((var(--rows, 1) - 1) * var(--g)); }
}

.wordmark {
  --rows: 4;
  --lift: var(--nudge);
  display: block;
  width: fit-content;
  color: inherit;
  text-decoration: none;
  /* Police système pour le nom : en chasse fixe, le « m » se tasse. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 35px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.wordmark-dot { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }
.tagline { --rows: 2; font-size: 14px; }
.tagline span { display: block; }

.wip {
  flex: 1;
  text-align: center;
  font-size: 16px;
}
.wip h1 {
  --rows: 7;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  text-wrap: balance;
}
.wip h1 + p { --rows: 2; }
.wip p + p { --rows: 1; }

.footer {
  display: flex;
  justify-content: space-between;
  gap: var(--g);
  padding-bottom: calc(2 * var(--g) + var(--nudge));
  color: var(--muted);
  font-size: 11px;
}
.footer > * { --rows: 2; }

@media (max-width: 600px) {
  :root { --gutter: calc(2 * var(--g)); --margin-line: var(--g); }
  .wordmark { --rows: 3; font-size: 30px; }
  .tagline { font-size: 12px; }
  .wip h1 { --rows: 6; font-size: 19px; }
  .footer { padding-bottom: calc(var(--g) + var(--nudge)); font-size: 10px; }
}