/* ============================================================
   K-MER CHAN — LE MONDE : LE TANKŌBON
   Le système visuel partagé par les trois écrans de la Sainte Trinité.
   Aucune page ne redéfinit ces valeurs ; elle les habille.

   Règle de rôle :
     la TÉLÉ et le TÉLÉPHONE sont du PAPIER (le public, ce qui s'imprime) ;
     la CONSOLE est de l'ENCRE (les coulisses, la table de l'imprimeur).
   ============================================================ */

@font-face{font-family:'Anton';src:url('../fonts/anton-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-var.woff2') format('woff2');font-weight:400 800;font-display:swap}

:root{
  /* Encres */
  --encre:#16110D;
  --encre-2:#231A13;
  --papier:#EFE7D5;
  --papier-2:#DCD0B6;
  --obi-rouge:#DC3520;
  --obi-jaune:#F2C230;
  --sourdine:#6B5E48;      /* 4.9:1 sur --papier */
  --sourdine-nuit:#9A8C74; /* 6.1:1 sur --encre */

  /* Le vert de validation. Sémantique, JAMAIS une teinte de tome :
     les couvertures n'appartiennent qu'aux joueurs. */
  --juste:#2F7A55;
  --juste-vif:#3D9068;

  /* Couvertures : les teintes de tome, saturées et distinctes à 4 m */
  --t1:#C4402A; --t2:#1F4E6B; --t3:#2E6B4F; --t4:#B8791C;
  --t5:#6B3A5C; --t6:#1F6B6B; --t7:#A8324F; --t8:#4A5A2E;
  --t9:#8C3A1E; --t10:#3B3F7A;

  /* Unité d'espace : suit la largeur de l'écran, du téléphone à la télé */
  --u:clamp(8px,0.83vw,16px);
  --ombre:0 var(--u) calc(var(--u)*2.5) rgba(0,0,0,.55);
  --ombre-papier:calc(var(--u)*.3) calc(var(--u)*.35) calc(var(--u)*.9) rgba(22,17,13,.42);
  --sortie:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--encre);
  color:var(--papier);
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ---- Matières ------------------------------------------------------ */

/* La fibre du papier. Une seule couche, jamais animée. */
.grain{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.16;mix-blend-mode:overlay}

/* La trame : l'unique texture du monde. Pas de dégradé décoratif. */
.trame{
  background-image:radial-gradient(circle at 50% 50%,currentColor 1.1px,transparent 1.2px);
  background-size:5px 5px;
}

/* Le papier bouffant jauni, fond de tout ce que le public lit. */
.papier-fond{
  background:var(--papier);
  color:var(--encre);
  background-image:
    radial-gradient(circle at 50% 50%,rgba(22,17,13,.055) 1.1px,transparent 1.2px),
    linear-gradient(178deg,rgba(160,140,100,.10),transparent 30%);
  background-size:5px 5px,100% 100%;
}

/* Le hors-repère : la couche fantôme d'une impression mal calée.
   S'applique sur un texte porté aussi par data-t. */
.hr{position:relative;display:inline-block}
.hr::before,.hr::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.hr::before{color:#00A6C4;transform:translate(-.055em,.035em);mix-blend-mode:multiply;opacity:.5}
.hr::after{color:#E0356B;transform:translate(.05em,-.03em);mix-blend-mode:multiply;opacity:.42}

/* Les lignes de vitesse du manga, réservées aux moments d'action. */
.vitesse{
  position:absolute;inset:-30%;pointer-events:none;opacity:.14;
  background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg 1.5deg,var(--encre) 1.5deg 2.1deg);
  mask-image:radial-gradient(circle at 50% 50%,transparent 34%,#000 76%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,transparent 34%,#000 76%);
}

/* ---- Le bandeau obi ------------------------------------------------
   La bande de papier qui ceint le livre et hurle son argument.
   C'est la couche d'annonce du produit : ce qui se passe MAINTENANT.
   -------------------------------------------------------------------- */
.obi{
  position:relative;flex:none;
  background:var(--obi-rouge);
  color:var(--papier);
  padding:calc(var(--u)*1.6) calc(var(--u)*3);
  display:flex;align-items:baseline;gap:calc(var(--u)*2.5);
  box-shadow:var(--ombre);
  clip-path:polygon(0 3%,18% 0,42% 4%,67% 0,88% 3%,100% 0,100% 97%,79% 100%,55% 96%,31% 100%,11% 97%,0 100%);
  z-index:5;
}
.obi::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%,rgba(0,0,0,.16) 1.1px,transparent 1.2px);
  background-size:5px 5px;
}
.obi h1{
  font-family:'Anton';font-weight:400;
  font-size:clamp(20px,4.4vw,84px);line-height:.9;
  letter-spacing:-.015em;text-transform:uppercase;
}
.obi .sous{
  font-size:clamp(10px,1.25vw,24px);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--obi-jaune);
}
.obi .horloge{
  margin-left:auto;font-family:'Anton';font-weight:400;
  font-size:clamp(18px,3.6vw,68px);line-height:.9;
  color:var(--obi-jaune);font-variant-numeric:tabular-nums;
}
/* Variante sombre : la console, qui n'est pas du papier. */
.obi.nuit{background:var(--encre-2);box-shadow:none;clip-path:none;
  border-bottom:3px solid var(--obi-rouge)}

/* ---- L'achevé d'imprimer -------------------------------------------
   La marque de l'imprimeur, en pied de volume. C'est la place qu'un
   tankōbon réserve à qui l'a fabriqué — donc celle de loJIC Solutions.
   Le cachet est un aplat plein ; le sigle se réserve dedans, en fond.
   -------------------------------------------------------------------- */
.colophon{
  display:flex;align-items:center;gap:calc(var(--u)*.9);
  font-family:'Archivo';font-weight:800;
  font-size:clamp(8px,.72vw,14px);letter-spacing:.13em;text-transform:uppercase;
  color:var(--sourdine);
}
/* La casse de la marque est sa casse : « loJIC », jamais « LOJIC ». */
.colophon b{font-weight:800;color:var(--encre);text-transform:none;letter-spacing:.06em}
.colophon .tel{
  font-variant-numeric:tabular-nums;letter-spacing:.09em;
  padding-left:calc(var(--u)*.9);margin-left:calc(var(--u)*.2);
  border-left:1px solid currentColor;
}
.colophon .cachet{
  flex:none;display:grid;place-items:center;
  width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);
  background:var(--encre);color:var(--papier);
  border-radius:1px;                     /* l'échelle du monde, pas un rayon neuf */
  font-family:'Anton';font-weight:400;
  font-size:calc(var(--u)*1.05);line-height:1;letter-spacing:0;
}
/* Variante sur fond d'encre : la console, et les jaquettes de couverture. */
.colophon.nuit{color:var(--sourdine-nuit)}
.colophon.nuit b{color:var(--papier)}
.colophon.nuit .cachet{background:var(--papier);color:var(--encre)}

/* ---- Titres --------------------------------------------------------- */
.titre-page{
  font-family:'Anton';font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.94;
}

/* ---- Accessibilité -------------------------------------------------- */
:focus-visible{outline:3px solid var(--obi-jaune);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}