/* ═══════════════════════════════════════════════════════════════
   haruplo.fr — feuille de style
   Direction : risographie, deux encres sur papier —
   rouge profond et bleu.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Jetons ──────────────────────────────────────────────────── */

:root {
  --paper:  #F0EEE4;
  --ink:    #1C1A22;
  --ink-60: #5A5763;
  --ink-35: #96939E;

  --field:  #8C1B2B;
  --accent: #8C1B2B;
  --pop:    #A81E32;
  --link:   #0B5FA5;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --text:    "Archivo", system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: clamp(1.5rem, 4vw, 3.25rem);
}

/* ─── Base ────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--field);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(.75rem, 3vw, 2.5rem);
}

/* Grain — ce qui fait lire « imprimé » plutôt qu'« écran » */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

a { color: var(--link); text-decoration: none; border-bottom: 2px solid currentColor; }
a:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }

code {
  font-family: var(--mono);
  font-size: .82em;
  background: rgba(28, 26, 34, .09);
  padding: .1em .32em;
  white-space: nowrap;
}

/* Texte lu par les lecteurs d'écran, invisible à l'œil */
.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;
}

/* ─── Le panneau ──────────────────────────────────────────────── */

.panel {
  width: 100%;
  max-width: 68rem;
  height: min(82vh, 44rem);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
}

.bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: 1.15rem var(--pad);
  border-bottom: 2px solid var(--ink);
}

.mark { border: none; color: var(--ink); }

.mark b {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  text-shadow: 1.5px 1.5px 0 var(--accent);
}

.mark span {
  display: block;
  margin-top: .22rem;
  font-size: .6875rem;
  font-weight: 500;
  color: var(--ink-60);
}

.tabs { display: flex; gap: 1.5rem; }

.tab {
  appearance: none;
  background: none;
  border: none;
  padding: 0 0 .15rem;
  font-family: var(--text);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-60);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .12s linear, border-color .12s linear;
}

.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.viewport { flex: 1 1 auto; overflow: hidden; position: relative; }

.track {
  display: flex;
  height: 100%;
  transition: transform .45s cubic-bezier(.65, 0, .2, 1);
  will-change: transform;
}

.slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
}

.controls {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem var(--pad);
  border-top: 2px solid var(--ink);
}

.count { font-family: var(--mono); font-size: .75rem; font-weight: 500; color: var(--ink-35); }
.count b { color: var(--ink); font-weight: 500; }

.arrows { display: flex; gap: .5rem; }

.arrow {
  appearance: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s linear, color .12s linear, border-color .12s linear;
}

.arrow:hover:not(:disabled) { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.arrow:disabled { opacity: .28; cursor: default; }

/* ─── Volet 1 — titre ─────────────────────────────────────────── */

.cover { justify-content: center; }

.cover h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 15vw, 11.5rem);
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--accent);
  margin: 0;
  text-transform: uppercase;
}

.cover .under {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 3px solid var(--ink);
}

.cover .claim {
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  max-width: 24ch;
  text-wrap: balance;
}

.cover .field-label {
  margin: 0;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--link);
  white-space: nowrap;
}

/* ─── Volet 2 — qui ───────────────────────────────────────────── */

.slide h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  margin: 0 0 1.5rem;
  flex: none;
}

.prose { max-width: 34rem; }

.prose p {
  margin: 0 0 1.1rem;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.aka {
  display: inline-block;
  margin: .5rem 0 0;
  padding: .35rem .75rem;
  background: var(--accent);
  color: var(--paper);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.45;
}

/* ─── Volet 3 — notes ─────────────────────────────────────────── */

.intro-note {
  max-width: 34rem;
  margin: -.5rem 0 1.5rem;
  font-size: .9375rem;
  color: var(--ink-60);
  text-wrap: pretty;
}

.entries { margin: 0; padding: 0; list-style: none; }

.entry { padding: 1.05rem 0; border-bottom: 2px solid var(--ink); }
.entry:first-child { border-top: 2px solid var(--ink); }

.entry-date {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--pop);
  margin-bottom: .3rem;
}

.entry h3 {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .3rem;
  max-width: 34ch;
}

.entry p {
  margin: 0;
  max-width: 38rem;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ink-60);
  text-wrap: pretty;
}

.pending { margin: 1.25rem 0 0; font-size: .875rem; font-weight: 600; color: var(--pop); }

/* ═══════════════════════════════════════════════════════════════
   L'impression du titre, en deux passages
   ═══════════════════════════════════════════════════════════════ */

/* Déclarer ces variables permet au navigateur de les animer. */
@property --mx    { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --my    { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --ink-b { syntax: "<number>"; inherits: true; initial-value: 0; }

.cover h1 {
  /* Seconde encre : décalée loin et invisible au départ. */
  --mx: -.32em;
  --my: .16em;
  --ink-b: 0;
  /* Décalage ajouté par le pointeur, piloté en JavaScript. */
  --px: 0px;
  --py: 0px;

  text-shadow:
    calc(var(--mx) + var(--px))
    calc(var(--my) + var(--py))
    0
    rgb(11 95 165 / var(--ink-b));
}

/* Second passage : la seconde encre glisse et se cale, de travers. */
.is-printed .cover h1 {
  --mx: .045em;
  --my: .035em;
  --ink-b: .92;
  transition:
    --mx 800ms cubic-bezier(.2, .8, .2, 1) 950ms,
    --my 800ms cubic-bezier(.2, .8, .2, 1) 950ms,
    --ink-b 350ms ease 950ms;
}

/* Premier passage : chaque lettre est tamponnée à son tour. */
.cover h1 .ink {
  display: inline-block;
}

.cover h1.is-split .ink {
  animation: stamp 520ms cubic-bezier(.2, .9, .3, 1.25) both;
  animation-delay: calc(var(--i) * 70ms + 120ms);
}

@keyframes stamp {
  0%   { opacity: 0; transform: translateY(-.14em) scale(1.14); }
  55%  { opacity: 1; transform: translateY(.02em) scale(.97); }
  100% { opacity: 1; transform: none; }
}

/* La ligne du dessous arrive une fois l'impression terminée. */
.js .cover .under {
  opacity: 0;
  transform: translateY(10px);
}

.is-printed .cover .under {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease 1.5s, transform .6s ease 1.5s;
}

/* Tant que le script n'a pas découpé le titre, on le cache :
   évite de le voir apparaître, disparaître, puis s'imprimer. */
.js .cover h1:not(.is-split) {
  opacity: 0;
}

/* ─── Animations réduites ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .track { transition: none; }

  /* L'encre est déjà en place, sans glissement ni tampon. */
  .is-printed .cover h1 { transition: none; }
  .cover h1.is-split .ink { animation: none; }

  /* Un simple fondu pour la ligne du dessous. */
  .is-printed .cover .under {
    transform: none;
    transition: opacity .4s ease;
  }
}

/* ─── Petits écrans ───────────────────────────────────────────── */

@media (max-width: 46rem) {
  body { padding: .75rem; align-items: stretch; }

  .panel { height: auto; min-height: calc(100vh - 1.5rem); max-width: none; }

  .bar { gap: .75rem 1.25rem; }
  .tabs { gap: 1.1rem; }
  .tab { font-size: .8125rem; }

  .cover h1 { font-size: clamp(3rem, 19vw, 6rem); }
  .cover .field-label { white-space: normal; }
}

@media (max-width: 26rem) {
  .arrow { width: 2.25rem; height: 2.25rem; }
}