/* TASHKENT — hero.css
   Hero « Route de la soie, plein jour ».
   Fond clair (ivoire chaud). Le nouveau logo est posé à même le papier, sans
   forme qui l'enferme ; les fils du monogramme traversent le papier et
   rejoignent la caravane qui s'avance vers le caravansérail d'Asie centrale.
   Chargé après pages.css afin de primer sur l'ancien bloc responsive du hero. */

.hero {
  /* La fresque d'Asie centrale monte plus haut : elle occupe le fond au lieu
     de laisser un vide à droite du manifeste. */
  --land-h: clamp(520px, 66vh, 800px);
  --reel-space: 0px;
  position: relative;
  isolation: isolate;
  min-height: max(840px, 100svh);
  overflow: hidden;
  background: var(--ivory);
  color: var(--readable-on-light);
}

/* ---- 1. le papier ----------------------------------------------------- */
.hero-paper {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(118% 72% at 6% 4%, rgba(255, 253, 247, 0.95), transparent 62%),
    radial-gradient(88% 62% at 96% 8%, rgba(215, 189, 141, 0.3), transparent 68%),
    linear-gradient(178deg, #fbf7ee 0%, var(--ivory) 46%, var(--paper) 100%);
}

/* Trame textile très basse : le papier n'est jamais tout à fait lisse. */
.hero-paper::after {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(34, 31, 24, 0.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(34, 31, 24, 0.04) 0 1px, transparent 1px 7px);
  content: "";
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 80% at 12% 20%, #000, transparent 74%);
  mask-image: radial-gradient(120% 80% at 12% 20%, #000, transparent 74%);
}

/* ---- 2. la caravane, à l'horizon d'Asie centrale ---------------------- */
.hero-land {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--land-h);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 16%, #000 38%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 16%, #000 38%, #000 100%);
  pointer-events: none;
}

.hero-land img[width][height] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 58%;
}

/* Le raccord papier/paysage : un voile ivoire qui vient mourir sur les
   montagnes, pour que la typographie ne pose jamais sur le ciel. */
.hero-haze {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--land-h) + 140px);
  background:
    linear-gradient(180deg, rgba(245, 240, 231, 0.94) 0%, rgba(245, 240, 231, 0.42) 26%, rgba(245, 240, 231, 0) 58%),
    linear-gradient(90deg, rgba(250, 246, 238, 0.94) 0%, rgba(250, 246, 238, 0.74) 34%, rgba(250, 246, 238, 0.24) 62%, rgba(250, 246, 238, 0) 84%);
  pointer-events: none;
}

/* Le plan de lecture : sous le manifeste, le papier reste franc quel que soit
   ce que fait le paysage derrière. Rapport de contraste tenu sur toute la
   colonne, pas seulement en haut. */
.hero-content::before {
  position: absolute;
  z-index: -1;
  top: -34px;
  right: -6%;
  bottom: -40px;
  left: -8%;
  background: radial-gradient(72% 76% at 26% 50%, rgba(250, 246, 238, 0.97) 0%, rgba(250, 246, 238, 0.86) 46%, rgba(250, 246, 238, 0) 100%);
  content: "";
  pointer-events: none;
}

.hero-mark { position: relative; }

.hero-mark::before {
  position: absolute;
  z-index: -1;
  top: -26px;
  right: -4%;
  bottom: -22px;
  left: -6%;
  background: radial-gradient(66% 78% at 24% 50%, rgba(250, 246, 238, 0.96) 0%, rgba(250, 246, 238, 0.8) 50%, rgba(250, 246, 238, 0) 100%);
  content: "";
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-land img[width][height] {
    transform: none;
  }
}

/* ---- 4. le logo et le manifeste --------------------------------------- */
.hero-stage {
  position: relative;
  z-index: 4;
  display: grid;
  min-height: max(840px, 100svh);
  align-content: center;
  justify-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
  grid-template-rows: auto auto;
  column-gap: clamp(28px, 3.6vw, 66px);
  padding-top: clamp(122px, 14vh, 164px);
  padding-bottom: calc(var(--land-h) * 0.34 + var(--reel-space) + clamp(24px, 4vh, 56px));
}

.hero-mark { grid-column: 1; grid-row: 1; }
.hero-content { grid-column: 1; grid-row: 2; }

/* La fresque tient toute la hauteur de la colonne de droite : c'est elle qui
   occupe le grand vide, pas une vignette posée dans un coin. */
.hero-fresque {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: stretch;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
}

.hero-fresque .fresque-legend { width: 100%; }

.fresque-loom {
  display: block;
  width: 100%;
  max-width: min(100%, 58vh);
  aspect-ratio: 1;
  height: auto;
  justify-self: center;
  overflow: visible;
}

.fresque-line {
  fill: none;
  stroke: url(#fresque-gold);
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* L'écho de la figure précédente : le papier garde un instant la trace. */
.fresque-ghost {
  fill: none;
  stroke: rgba(111, 84, 32, 0.16);
  stroke-width: 1.6;
  opacity: 0;
  transition: opacity 900ms ease;
}

.fresque-bead {
  fill: var(--gold-deep);
  transition: opacity 220ms ease;
}

.fresque-legend {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  padding-top: clamp(12px, 1.4vw, 18px);
  border-top: 1px solid var(--line);
}

.fresque-phase {
  color: var(--gold-deep);
  font: 700 max(0.64rem, 11px)/1 var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.fresque-caption {
  color: var(--readable-on-light-soft);
  font: 400 max(0.9rem, 14.5px)/1.35 var(--serif);
  font-style: italic;
}

.fresque-meter {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.fresque-meter i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.fresque-count {
  grid-column: 1 / -1;
  color: rgba(17, 19, 18, 0.44);
  font: 600 max(0.62rem, 10.5px)/1 var(--sans);
  letter-spacing: 0.2em;
}

.hero-mark {
  display: grid;
  justify-items: start;
  gap: 18px;
  width: 100%;
}

/* Le logo est une image sur fond blanc pur : `multiply` le pose à même
   l'ivoire sans détourage approximatif des traits fins du monogramme. */
.hero-lockup {
  width: min(100%, 760px);
  height: auto;
}

.hero-baseline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding-left: 4px;
  color: var(--gold-deep);
  font: 600 max(0.8rem, 12.5px)/1.4 var(--sans);
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.hero-baseline::before {
  width: clamp(28px, 5vw, 74px);
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  content: "";
  opacity: 0.55;
}

.hero-content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 760px;
  margin: clamp(34px, 4.4vw, 58px) 0 0;
}

.hero-content .eyebrow {
  color: var(--gold-deep);
}

/* Le slogan : deux souffles, la seconde ligne décalée comme une réponse.
   Chaque souffle est insécable au-delà de 900 px : une césure au milieu d'une
   phrase détruirait l'appel et la réponse. La taille est donc plafonnée à ce
   que la colonne (720 px, réserve faite de la chaîne d'images) peut tenir. */
.hero h1 {
  display: grid;
  max-width: 720px;
  margin: 20px 0 0;
  font: 400 clamp(2.15rem, 3.5vw, 2.5rem)/1.08 var(--serif);
  letter-spacing: -0.028em;
  text-wrap: pretty;
}

/* Budget de largeur : le souffle le plus long fait 30 signes. Calé sur la
   police la plus large du stack (Georgia ≈ 0,55 em/signe, et non la webfont
   ≈ 0,48), 30 × 0,55 × 40 px = 660 px — la colonne en fait 720, et 680 pour
   la seconde ligne une fois déduit son retrait. Aucune substitution de police
   ne peut donc faire déborder le slogan. Le retrait est plafonné une seule
   fois, sur la règle de base ci-dessous : une surcharge ici serait battue par
   elle, à spécificité égale et plus loin dans la feuille. */
@media (min-width: 901px) {
  .hero h1 > span,
  .hero h1 em {
    white-space: nowrap;
  }
}

.hero h1 em {
  margin-left: clamp(18px, 2.6vw, 40px);
  color: #7d5e21;
  font-style: italic;
  font-weight: 400;
}

.hero-lede {
  max-width: 580px;
  margin: 26px 0 0;
  color: var(--readable-on-light-soft);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: 1.68;
}

.hero-lede b {
  color: var(--readable-on-light);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 32px;
  margin-top: 34px;
}

/* Le logo n'est pas un bouton : aucun état de survol ne le fait ressembler
   à une cible cliquable (règle d'affordance du site). */
.hero-mark,
.hero-lockup {
  cursor: default;
}

.hero-foundation {
  margin: clamp(30px, 4vh, 52px) 0 0;
  color: var(--readable-on-light-soft);
  font: 500 max(0.72rem, 11.5px)/1.5 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

/* ---- 5. repères de la route et du défilement -------------------------- */
.scroll-cue {
  position: absolute;
  z-index: 5;
  bottom: 46px;
  left: 8px;
  display: none;
  align-items: center;
  gap: 14px;
  color: rgba(255, 250, 238, 0.86);
  font: 600 0.58rem/1 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(28, 20, 8, 0.65);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@media (min-width: 1300px) {
  .scroll-cue {
    display: flex;
  }
}

.scroll-cue i {
  display: block;
  width: 1px;
  height: 70px;
  flex: 0 0 auto;
  overflow: hidden;
  background: rgba(255, 250, 238, 0.4);
}

.scroll-cue i::after {
  display: block;
  width: 1px;
  height: 34px;
  background: var(--gold-light);
  content: "";
  animation: scroll-line-vertical 2.4s ease-in-out infinite;
}

@keyframes scroll-line-vertical {
  0%,
  100% {
    transform: translateY(-40px);
  }
  55% {
    transform: translateY(76px);
  }
}

/* ---- 6. tablette ------------------------------------------------------ */
@media (max-width: 1050px) {
  .hero {
    --land-h: clamp(430px, 58vh, 640px);
  }

  .hero,
  .hero-stage {
    min-height: max(760px, 100svh);
  }

  .hero-stage {
    justify-items: start;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-content {
    width: 100%;
    max-width: 660px;
    margin: clamp(30px, 4vw, 48px) 0 0;
  }

  .hero-lockup {
    width: min(100%, 640px);
  }
}

/* ---- 7. mobile ------------------------------------------------------- */
@media (max-width: 760px) {
  .hero {
    --land-h: clamp(340px, 48vh, 500px);
  }

  .hero,
  .hero-stage {
    min-height: auto;
  }

  .hero-stage {
    padding-top: 112px;
    padding-bottom: calc(var(--land-h) * 0.34 + 26px);
  }

  .hero-land img[width][height] {
    object-position: 62% 66%;
  }

  .hero-mark {
    gap: 14px;
  }

  .hero-lockup {
    width: 100%;
    max-width: 460px;
  }

  .hero-baseline {
    font-size: max(0.72rem, 11.5px);
    letter-spacing: 0.26em;
  }

  .hero-baseline::before {
    width: 20px;
  }

  .hero-content {
    max-width: 100%;
    margin-top: 30px;
  }

  .hero h1 {
    max-width: 100%;
    margin-top: 16px;
    font-size: clamp(2rem, 9.4vw, 3rem);
    line-height: 1.08;
  }

  .hero h1 em {
    margin-left: 14px;
  }

  .hero-lede {
    max-width: 100%;
    margin-top: 20px;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    margin-top: 30px;
  }

  .hero-actions .button {
    justify-content: space-between;
    width: 100%;
  }

  .hero-foundation {
    margin-top: 26px;
  }
}

/* ---- 8. sous 1040 px ------------------------------------------------- */
@media (max-width: 1050px) {
  .hero {
    --reel-space: 0px;
  }

  .hero-stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: clamp(26px, 4vw, 44px);
  }

  .hero-fresque {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
  }

  .fresque-loom {
    max-width: min(100%, 400px);
  }

}

@media (max-width: 760px) {
  .hero-stage {
    padding-bottom: calc(var(--land-h) * 0.34 + var(--reel-space) + 26px);
  }
}

@media (max-width: 560px) {
  .fresque-loom {
    max-width: min(100%, 300px);
  }
}