/*
 * MEDYUM
 * Logo + baseline + description multilingue
 *
 * Identité :
 * - connexion      = cyan
 * - transformation = violet
 * - transmission   = turquoise
 * - description    = or
 */

:root {
  --medyum-night: #060913;
  --medyum-gold: #e7c46e;
  --medyum-gold-light: #f4d98b;
  --medyum-cyan: #43e4f1;
  --medyum-purple: #a96cff;
  --medyum-turquoise: #39e5c7;
  --medyum-ivory: #f1ebdd;
}

/* =========================================================
 * BLOC DE MARQUE
 * ========================================================= */

.medyum-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.medyum-brand__logo {
  display: block;
  width: min(100%, 24rem);
  height: auto;
  margin-inline: auto;
}

/* =========================================================
 * SIGNATURE
 * ========================================================= */

.medyum-signature {
  width: 100%;
  max-width: 70rem;
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
 * BASELINE
 * CONNECTER. TRANSFORMER. TRANSMETTRE.
 * ========================================================= */

.medyum-baseline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 1.1em;
  row-gap: 0.2em;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.72rem, 1.15vw, 1.05rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: clamp(0.14em, 0.35vw, 0.3em);
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.medyum-baseline__item {
  display: inline-block;
  white-space: nowrap;
}

.medyum-baseline__connect {
  color: var(--medyum-cyan);
  text-shadow: 0 0 12px rgb(67 228 241 / 12%);
}

.medyum-baseline__transform {
  color: var(--medyum-purple);
  text-shadow: 0 0 12px rgb(169 108 255 / 12%);
}

.medyum-baseline__transmit {
  color: var(--medyum-turquoise);
  text-shadow: 0 0 12px rgb(57 229 199 / 12%);
}

.medyum-baseline__dot {
  opacity: 0.8;
}

/* =========================================================
 * DESCRIPTION
 * L'outil qui connecte les applications des magiciens.
 * ========================================================= */

.medyum-description {
  max-width: 52rem;
  margin: clamp(0.85rem, 2vw, 1.35rem) auto 0;
  color: var(--medyum-gold);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: clamp(0.06em, 0.18vw, 0.14em);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 14px rgb(231 196 110 / 10%);
}

/* =========================================================
 * DESKTOP: force single line
 * ========================================================= */

@media (min-width: 641px) {
  .medyum-baseline {
    flex-wrap: nowrap;
  }

  .medyum-description {
    white-space: nowrap;
  }
}

/* =========================================================
 * RESPONSIVE
 * ========================================================= */

@media (max-width: 640px) {
  .medyum-signature {
    padding-inline: 1rem;
  }

  .medyum-brand__logo {
    width: min(100%, 16rem);
  }

  .medyum-baseline {
    column-gap: 0.8em;
    font-size: 0.72rem;
    line-height: 1.9;
    letter-spacing: 0.11em;
  }

  .medyum-description {
    max-width: 28rem;
    font-size: 0.72rem;
    line-height: 1.7;
    letter-spacing: 0.05em;
  }
}

/* =========================================================
 * LANGUES CJK
 * ========================================================= */

:lang(zh) .medyum-baseline,
:lang(ja) .medyum-baseline,
:lang(ko) .medyum-baseline {
  letter-spacing: 0.08em;
}

:lang(zh) .medyum-description,
:lang(ja) .medyum-description,
:lang(ko) .medyum-description {
  letter-spacing: 0.04em;
}

/* =========================================================
 * LANGUES LONGUES (DE, NL)
 * ========================================================= */

:lang(de) .medyum-baseline,
:lang(nl) .medyum-baseline {
  letter-spacing: 0.1em;
}

/* =========================================================
 * ACCESSIBILITÉ
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .medyum-baseline__connect,
  .medyum-baseline__transform,
  .medyum-baseline__transmit,
  .medyum-description {
    text-shadow: none;
  }
}