/* =========================================================================
   GUÉNO — base
   Une seule police. Des tailles modestes. Un seul grand moment, à la fin.
   La condensée géante a été retirée : c'était elle qui chargeait la page.
   ========================================================================= */

/* La voix grasse : condensée, énorme, réservée aux titres et aux moments
   d'impact. C'est elle qui donne le goût — Satoshi porte tout le reste. */
@font-face{
  font-family:"Fat";
  src:url("../fonts/bigshoulders-600-900-latin.woff2") format("woff2");
  font-weight:600 900;font-style:normal;font-display:swap;
}

@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-900.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  --ground:   #121110;
  --raised:   #1B1A18;
  --line:     #2C2A27;
  --text:     #EFECE6;
  --text-dim: #948D84;        /* 5,4:1 sur le fond */
  --cream:    #F4F1EA;
  --on-cream: #121110;
  --on-cream-dim: #6B655C;

  --accent:   #FF6B2C;        /* rare : le point vivant, et les survols */

  --font:"Satoshi",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-fat:"Fat","Haettenschweiler","Arial Narrow",sans-serif;

  /* Échelle retenue. Un seul grand format, et il est réservé à la signature. */
  --t-name:  clamp(2rem, 4.4vw, 4rem);
  --t-lead:  clamp(1.375rem, 2.4vw, 2.25rem);
  --t-h2:    clamp(2.75rem, 6.6vw, 6.5rem);
  --t-body:  1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;
  --t-sign:  clamp(2.75rem, 11.5vw, 12rem);
  --t-blast: clamp(3.25rem, 12.5vw, 13.5rem);

  --r:      16px;
  --r-lg:   24px;
  --gap:    clamp(10px, 1vw, 16px);
  --pad:    clamp(16px, 2.4vw, 40px);
  --block:  clamp(80px, 10vw, 170px);
  --maxw:   1560px;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}

body{
  background:var(--ground);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.55;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#140D08}

/* ---------- Registres ---------------------------------------------------- */

/* Le nom du hero est dans le même registre que les titres de section :
   même condensée grasse, même graisse, mêmes capitales. Il n'est utilisé
   qu'une fois, dans le hero. */
.name{
  font-family:var(--font-fat);font-weight:800;
  font-size:var(--t-h2);line-height:.84;
  letter-spacing:.005em;text-transform:uppercase;
}
.lead{font-size:var(--t-lead);font-weight:500;line-height:1.22;letter-spacing:-.025em;text-wrap:balance}
/* Les titres de section passent en gras condensé : c'est là que le site
   prend du goût, sans rien ajouter d'autre à l'écran. */
.h2{
  font-family:var(--font-fat);font-weight:800;
  font-size:var(--t-h2);line-height:.84;
  letter-spacing:.005em;text-transform:uppercase;
}
.body{color:var(--text-dim);max-width:50ch;line-height:1.6}
.small{font-size:var(--t-small);color:var(--text-dim)}

.label{
  font-size:var(--t-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);
}

/* La seule grande respiration typographique du site. */
.sign{
  font-family:var(--font-fat);font-weight:800;
  font-size:var(--t-sign);line-height:.84;
  letter-spacing:.005em;text-transform:uppercase;
}
.blast{
  font-family:var(--font-fat);font-weight:800;
  font-size:var(--t-blast);line-height:.84;
  letter-spacing:.005em;text-transform:uppercase;
  text-wrap:balance;
}

.tag{
  display:inline-block;
  font-size:var(--t-label);font-weight:500;
  letter-spacing:.07em;
  padding:.5em .85em;border-radius:99px;
  border:1px solid var(--line);
  color:var(--text-dim);white-space:nowrap;
}

.visually-hidden:not(:focus):not(:active){
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.skip{
  position:fixed;top:8px;left:8px;z-index:300;
  background:var(--cream);color:var(--on-cream);
  padding:10px 16px;border-radius:99px;font-weight:500;
  transform:translateY(-250%);transition:transform .25s var(--ease);
}
.skip:focus{transform:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}