:root { --mast-wdth: 104; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  height: 100svh;
  font-family: "Anybody", "Arial Narrow", Impact, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- En-tête ---------- */

.masthead {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border-bottom: 1px solid var(--line);
}

/* Règle graduée posée sur le bord inférieur */
.masthead::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, rgb(239 232 219 / .5) 0 1px, transparent 1px 50px) 0 100% / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgb(239 232 219 / .2) 0 1px, transparent 1px 10px) 0 100% / 100% 3px no-repeat;
  pointer-events: none;
}

.wordmark {
  margin: 0;
  padding: clamp(10px, 1.1vw, 22px) clamp(12px, 1.2vw, 24px) clamp(14px, 1.3vw, 26px);
  min-width: 0;
  overflow: hidden;
  font-size: 7vw; /* ajusté précisément par main.js */
  font-weight: 800;
  font-variation-settings: "wdth" var(--mast-wdth), "wght" 800;
  line-height: .86;
  letter-spacing: -.012em;
  white-space: nowrap;
}

.wordmark span { display: inline-block; }

.is-ready .wordmark span { animation: wordmark-in 1.5s var(--ease) both; }

@keyframes wordmark-in {
  from { opacity: 0; font-variation-settings: "wdth" 50, "wght" 200; }
}

.socials {
  display: flex;
  border-left: 1px solid var(--line);
}

.socials a {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(44px, 4.4vw, 84px);
  background: rgb(6 6 9 / .55);
  transition: background-color .25s, color .25s;
}

.socials a + a { border-left: 1px solid var(--line); }

.socials svg {
  width: clamp(18px, 1.5vw, 30px);
  height: clamp(18px, 1.5vw, 30px);
  fill: currentColor;
  transition: transform .45s var(--ease);
}

/* Le logo Mixcloud est très plat : on l'agrandit pour l'équilibrer avec les autres */
.socials a[aria-label="Mixcloud"] svg {
  width: clamp(25px, 2.1vw, 42px);
  height: clamp(25px, 2.1vw, 42px);
}

.socials a:hover, .socials a:focus-visible {
  background: var(--ember);
  color: var(--ink);
}

.socials a:hover svg, .socials a:focus-visible svg { transform: scale(1.3); }

/* ---------- Bandes ---------- */

main {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
}

.strips {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strip {
  --e: 0;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.strip + .strip::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--line);
}

/* Témoin de niveau en tête de bande */
.strip::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--ember);
  opacity: var(--e);
  transform: scaleX(var(--e));
  transform-origin: left;
  pointer-events: none;
}

.strip a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: clamp(14px, 1.6vh, 22px) 0 clamp(14px, 2vh, 28px);
}

.strip a[href]:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: -4px;
}

.label, .year {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.label {
  flex: none;
  font-family: "Martian Mono", ui-monospace, Consolas, monospace;
  font-size: calc(11px + var(--e) * 6px);
  font-variation-settings: "wdth" 87.5, "wght" 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: calc(.62 + var(--e) * .38);
}

.year {
  flex: none;
  font-size: 5.4vw; /* ajusté en continu par main.js */
  font-variation-settings:
    "wdth" calc(84 + var(--e) * 26),
    "wght" calc(560 + var(--e) * 340);
  line-height: 1;
  letter-spacing: -.02em;
}

/* 2026 : espace réservé, en attente */
.is-pending .year {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone);
  font-variation-settings:
    "wdth" calc(84 + var(--e) * 26),
    "wght" 560;
}

.is-pending .label { opacity: .5; }
.is-pending::after { background: var(--bone); }

/* Ligne de sonde qui suit le pointeur */
.probe {
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bone) 12%, var(--bone) 88%, transparent);
  opacity: 0;
  mix-blend-mode: difference;
  transition: opacity .3s;
  pointer-events: none;
}

.probe.is-on { opacity: .4; }

/* Repli sans WebGL */
.no-gl .strip {
  background: linear-gradient(0deg,
    rgb(255 90 31 / calc(.04 + var(--e) * .5)),
    rgb(110 16 35 / calc(.06 + var(--e) * .4)) 45%,
    transparent 90%);
}

/* ---------- Écrans verticaux : les bandes deviennent des lignes ---------- */

@media (max-aspect-ratio: 1/1) {
  :root { --mast-wdth: 62; }

  .masthead { grid-template-columns: minmax(0, 1fr); }

  .wordmark { padding: 14px 16px 12px; line-height: .9; }

  .socials {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .socials a { flex: 1; width: auto; height: 46px; }
  .socials svg { width: 18px; height: 18px; }
  .socials a[aria-label="Mixcloud"] svg { width: 25px; height: 25px; }

  .strips { flex-direction: column; }

  .strip + .strip::before {
    inset: 0 0 auto;
    width: auto;
    height: 1px;
  }

  .strip::after {
    inset: 0 auto 0 0;
    width: 3px;
    height: auto;
    transform: scaleY(var(--e));
    transform-origin: top;
  }

  .strip a {
    flex-direction: row;
    padding: 0 16px;
  }

  .label, .year {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .year {
    font-size: min(3.9svh, 9vw);
    letter-spacing: 0;
    font-variation-settings:
      "wdth" calc(96 + var(--e) * 34),
      "wght" calc(600 + var(--e) * 300);
  }

  .is-pending .year { -webkit-text-stroke-width: 1px; }

  .label { font-size: 10px; }

  .probe { display: none; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .is-ready .wordmark span { animation: none; }
  .socials a, .socials svg { transition: none; }
}