/* ============================================================
   LAYOUT ENGINEERING - Phase 2
   ------------------------------------------------------------
   Ce fichier ne contient AUCUN style visuel (couleurs, ombres,
   typographie finale, transitions...). Il ne définit que la
   géométrie : dimensions, espacements, alignements, proportions.

   Rendu volontairement neutre / monochrome à ce stade.
   ============================================================ */

/* ------------------------------------------------------------
   1. RESET MINIMAL
   ------------------------------------------------------------
   Un reset minimal est nécessaire pour que les mesures de
   layout (paddings, marges, largeurs) soient fiables et ne
   soient pas faussées par les styles par défaut du navigateur.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2. TOKENS DE LAYOUT
   ------------------------------------------------------------
   Variables dédiées à la géométrie : grille, conteneur,
   échelle d'espacement. Elles seront complétées en Phase 3
   par les tokens de couleur / typographie, sans avoir à
   toucher à celles-ci.

   NOTE : --type-* ci-dessous sont des valeurs TEMPORAIRES,
   uniquement destinées à valider les proportions du layout.
   Elles seront remplacées par la typographie finale en Phase 3.
   ------------------------------------------------------------ */

:root {
  /* Grille / conteneur (mesurés sur la maquette à 1440px) */
  --container-max-width: 1440px;
  --container-padding-inline: 80px;

  /* Échelle d'espacement (basée sur une grille de 8px,
     dérivée des espacements mesurés sur la maquette) */
  --space-2xs: 8px;
  --space-xs: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 40px;
  --space-xl: clamp(48px, 6vw, 80px);
  --space-2xl: 120px; /* gap mesuré entre les deux colonnes */

  /* Typographie temporaire (placeholder de layout uniquement) */
  --type-eyebrow-size: 14px;
  --type-eyebrow-line: 1.4;
  --type-title-size: 40px;
  --type-title-line: 1.15;
  --type-body-size: 17px;
  --type-body-line: 1.6;
  --type-link-size: 16px;
  --type-link-line: 1.4;
}

/* ------------------------------------------------------------
   3. CONTENEUR GLOBAL
   ------------------------------------------------------------
   Wrapper générique réutilisable pour toutes les sections du
   site : centre le contenu, limite sa largeur maximale et
   applique les marges latérales mesurées sur la maquette.
   ------------------------------------------------------------ */

/* Fond clair sur toute la largeur de la section (comme le hero) :
   sans lui, la page laissait apparaître son fond beige/kraft autour
   du bloc texte et de l'image. */
.brand-story {
  background-color: var(--color-paper);
  /* L'image démarre en scale(1.04) avant son apparition (reveal) : en mobile elle est pleine
     largeur, donc ce zoom initial élargissait la page de 8 à 15 px. `clip` (et non `hidden`)
     coupe le débordement horizontal sans créer de conteneur de défilement. */
  overflow-x: clip;
}

.brand-story__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

/* ------------------------------------------------------------
   4. SECTION "BRAND STORY" - LAYOUT EN DEUX COLONNES
   ------------------------------------------------------------
   Système : Flexbox.

   - Le conteneur est une ligne flex à deux enfants (content / media).
   - "gap" gère l'espace entre les deux colonnes (mesuré ≈120px).
   - Ratio des colonnes ≈ 5 / 4 (texte légèrement plus large que
     l'image), obtenu via flex-grow - pas de largeur figée en %,
     pour rester cohérent avec l'approche Flexbox demandée.
   - align-items: stretch (valeur par défaut, explicitée pour la
     lisibilité) permet à la colonne image d'adopter exactement
     la hauteur de la colonne de texte, qui devient ainsi la
     référence de hauteur de la section.
   ------------------------------------------------------------ */

.brand-story__container {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--space-2xl);
}

/* --- Colonne de contenu (texte) --------------------------- */

.brand-story__content {
  flex: 5 1 0%;
  min-width: 0; /* empêche le contenu texte de forcer un débordement */

  display: flex;
  flex-direction: column;

  /* Padding vertical de section : voir note d'analyse - la
     maquette fournie semble recadrée au plus près du contenu ;
     une valeur de padding réelle et raisonnable est appliquée
     ici plutôt que de reproduire ce recadrage à la lettre. */
  padding-block: var(--space-xl);
}

/* Rythme vertical interne, dérivé des espacements mesurés
   entre les blocs de la maquette (arrondis sur l'échelle 8px). */

.brand-story__eyebrow {
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-line);
  margin-bottom: var(--space-sm);
}

.brand-story__title {
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  margin-bottom: var(--space-lg);
  max-width: 22ch; /* borne la longueur de ligne comme sur la maquette */
}

.brand-story__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  /* L'unité `ch` se calcule sur la taille de police de CE bloc. Comme le rem du site vaut 12 px,
     le bloc héritait de 12 px alors que les paragraphes sont plus grands : 46ch ne donnait que
     322 px (≈ 40 caractères par ligne, 7 lignes par paragraphe) contre ~600 px sur la maquette.
     On aligne donc la taille de référence sur celle des paragraphes avant de poser la mesure. */
  font-size: var(--type-body-size);
  max-width: 60ch; /* ≈ 60 caractères par ligne : 4 à 5 lignes par paragraphe, comme la maquette */
}

.brand-story__paragraph {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
}

.brand-story__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--type-link-size);
  line-height: var(--type-link-line);
  align-self: flex-start; /* le lien ne s'étire pas sur toute la largeur de la colonne */
}

/* --- Colonne média (image) --------------------------------- */

.brand-story__media {
  flex: 4 1 0%;
  min-width: 0;
  overflow: hidden; /* nécessaire pour que object-fit: cover ne déborde pas de la colonne */
}

/* <picture> est un élément inline par défaut : sans cette règle,
   il romprait la chaîne de hauteurs en pourcentage entre la
   colonne stretchée (.brand-story__media) et l'image. display:
   contents le retire de l'arbre de rendu sans toucher au HTML -
   l'image se comporte comme un enfant direct de <figure>. */
.brand-story__media picture {
  display: contents;
}

.brand-story__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================================
   UI PIXEL-PERFECT IMPLEMENTATION - Phase 3
   ------------------------------------------------------------
   Ce fichier habille le squelette de layout.css avec la
   direction artistique de la maquette : couleurs, typographie,
   détails de style. Il ne modifie ni la structure HTML, ni la
   géométrie définie en Phase 2 - il ne fait que la "peindre".

   Organisation :
     1. Polices (import)
     2. Variables de design (couleurs + typographie finale)
     3. Styles globaux
     4. Composants (eyebrow, lien à flèche)
     5. Section Brand Story (habillage visuel)
     6. États (hover / focus)
   ============================================================ */

/* ------------------------------------------------------------
   1. POLICES
   ------------------------------------------------------------
   - Fraunces (serif éditorial, empattements doux, contraste
     modéré) pour le titre : correspond à la police "classique
     mais vivante" observée sur la maquette (cf. "Un bois choisi,
     pas seulement vendu.").
   - Inter (sans-serif humaniste neutre) pour l'eyebrow, le corps
     de texte et le lien : lisible, professionnel, s'efface au
     profit du serif d'accroche.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   2. VARIABLES DE DESIGN
   ------------------------------------------------------------
   Couleurs mesurées par échantillonnage direct des pixels de la
   maquette (moyenne sur plusieurs points de chaque élément afin
   d'écarter les artefacts d'anti-aliasing). Valeurs arrondies à
   des codes hexadécimaux propres et réutilisables.

   Les --type-* redéfinissent ici les tokens temporaires posés en
   Phase 2 (layout.css) avec leurs valeurs typographiques
   définitives - la mécanique de layout qui les consomme
   (margin-bottom, max-width en ch...) reste, elle, inchangée.
   ------------------------------------------------------------ */

.brand-story {
  /* Familles de polices : héritées de tokens.css (Fraunces / Work Sans).
     L'ancienne redéfinition locale de --font-sans en 'Inter' (police jamais chargée)
     faisait retomber le lien « En savoir plus… » sur la police système. */

  /* Couleurs - échantillonnées sur la maquette */
  --color-accent-hover: color-mix(in srgb, var(--color-ember) 82%, black); /* variante plus sombre pour l'état hover */

  /* Typographie finale (remplace les placeholders de la Phase 2) */
  --type-eyebrow-size: 13px;
  --type-eyebrow-line: 1.4;
  --type-eyebrow-tracking: 0.09em;

  --type-title-size: 44px;
  --type-title-line: 1.15;
  --type-title-tracking: -0.01em;

  --type-body-size: 17px;
  --type-body-line: 1.75;

  --type-link-size: 16px;
  --type-link-line: 1.4;
}

/* ------------------------------------------------------------
   3. STYLES GLOBAUX
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   4. COMPOSANTS
   ------------------------------------------------------------ */

/* --- Eyebrow (label de survitre) ---------------------------
   Sans-serif engraissée, majuscules espacées, couleur accent.
   Réutilisable sur toutes les futures sections du site. */

.brand-story__eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--type-eyebrow-tracking);
  color: var(--color-ember);
}

/* --- Lien à flèche ------------------------------------------
   Composant réutilisable : texte souligné + icône flèche,
   couleur accent, soulignement fin décollé de la ligne de base
   (text-underline-offset) pour un rendu élégant plutôt que
   l'épais soulignement par défaut du navigateur. */

.link--arrow {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-ember);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.link--arrow__icon {
  /* L'icône ne doit pas être soulignée : elle porte son propre
     élément afin d'isoler la décoration du texte. */
  text-decoration: none;
}

/* ------------------------------------------------------------
   5. SECTION - BRAND STORY (habillage visuel)
   ------------------------------------------------------------ */

.brand-story__title {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: var(--type-title-tracking);
  color: var(--color-forest);
}

.brand-story__paragraph {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-wood);
}

/* Aucun traitement supplémentaire (filtre, superposition,
   dégradé) n'a été appliqué à la photographie : l'analyse de la
   maquette ne montre ni vignette, ni overlay de couleur - la
   photo est utilisée telle quelle, seul object-fit (Phase 2)
   gère son cadrage. Les coins de la colonne image sont nets
   (aucun border-radius visible sur la maquette). */

/* ------------------------------------------------------------
   6. ÉTATS
   ------------------------------------------------------------ */

.link--arrow:hover,
.link--arrow:focus-visible {
  color: var(--color-accent-hover);
}

.link--arrow:focus-visible {
  outline: 2px solid var(--color-ember);
  outline-offset: 4px;
  border-radius: var(--r-badge);
}


/* ============================================================
   MOTION DESIGN & MICRO-INTERACTIONS - Phase 5
   ------------------------------------------------------------
   Périmètre réel de cette page : un lien (seul élément
   interactif) et une section (seul bloc dont l'entrée en
   viewport mérite d'être animée). Il n'y a ni bouton, ni carte,
   ni champ de formulaire, ni icône autonome sur cette maquette -
   ces familles de micro-interactions ne sont donc volontairement
   PAS inventées ici. Mieux vaut deux animations justifiées que
   dix décoratives.

   Organisation :
     1. Tokens de motion (durées, courbes)
     2. Micro-interaction du lien (hover / focus)
     3. Animation d'apparition au scroll (section + stagger)
     4. Accessibilité (prefers-reduced-motion)
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS DE MOTION
   ------------------------------------------------------------
   Centralisent les durées et la courbe d'accélération pour que
   toutes les transitions de la page appartiennent au même
   "langage de mouvement", comme demandé.
   ------------------------------------------------------------ */

.brand-story {
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-hover: 200ms;   /* micro-interactions (lien) */
  --duration-reveal: 600ms;  /* apparition au scroll */
  --stagger-step: 90ms;      /* décalage entre éléments d'un même groupe */
}


/* ------------------------------------------------------------
   2. MICRO-INTERACTION - LIEN À FLÈCHE
   ------------------------------------------------------------
   Intention : donner une sensation de réactivité immédiate sans
   jamais paraître mécanique. Trois signaux combinés, discrets :
     - la couleur progresse vers la variante plus sombre déjà
       définie en Phase 3 (design.css) ;
     - le soulignement s'épaissit légèrement, comme si le trait
       "s'affirmait" sous le doigt/curseur ;
     - la flèche glisse de quelques pixels vers la droite,
       renforçant physiquement l'idée d'aller "plus loin".
   Le lien reste souligné en permanence (fidèle à la maquette,
   Phase 3) : on anime son intensité, pas son apparition, pour ne
   pas contredire le design déjà validé.
   ------------------------------------------------------------ */

.link--arrow {
  transition:
    color var(--duration-hover) var(--ease-standard),
    text-decoration-thickness var(--duration-hover) var(--ease-standard),
    outline-offset var(--duration-hover) var(--ease-standard);
}

.link--arrow:hover,
.link--arrow:focus-visible {
  text-decoration-thickness: 2px;
}

.link--arrow__icon {
  display: inline-block;
  transition: transform var(--duration-hover) var(--ease-standard);
}

.link--arrow:hover .link--arrow__icon,
.link--arrow:focus-visible .link--arrow__icon {
  transform: translateX(4px);
}


/* ------------------------------------------------------------
   3. APPARITION AU SCROLL
   ------------------------------------------------------------
   Intention : la section n'apparaît pas d'un bloc - le regard
   est guidé dans l'ordre naturel de lecture (eyebrow → titre →
   texte → lien), l'image se révélant en léger retrait pour
   accompagner plutôt que concurrencer le texte.

   Mécanique : chaque élément part légèrement en dessous de sa
   position finale et transparent ; le JavaScript (motion.js)
   ajoute la classe .is-visible sur le conteneur dès que la
   section entre dans le viewport, ce qui déclenche la
   transition. Le décalage (stagger) vient uniquement de
   transition-delay par enfant - aucune keyframe requise.

   Propriétés animées : uniquement `opacity` et `transform`
   (accélérées par le GPU), jamais `margin`/`top`/`height`.
   ------------------------------------------------------------ */

.brand-story__content > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-reveal) var(--ease-standard),
    transform var(--duration-reveal) var(--ease-standard);
}

.brand-story__content > *:nth-child(1) { transition-delay: calc(var(--stagger-step) * 0); }
.brand-story__content > *:nth-child(2) { transition-delay: calc(var(--stagger-step) * 1); }
.brand-story__content > *:nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
.brand-story__content > *:nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }

.brand-story__media {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity var(--duration-reveal) var(--ease-standard),
    transform calc(var(--duration-reveal) * 1.2) var(--ease-standard);
  transition-delay: calc(var(--stagger-step) * 2);
}

.brand-story__container.is-visible .brand-story__content > * {
  opacity: 1;
  transform: none;
}

.brand-story__container.is-visible .brand-story__media {
  opacity: 1;
  transform: scale(1);
}

/* Sans JavaScript (ou avant son exécution), le contenu doit
   rester visible : on ne pénalise jamais l'accès à l'information. */
.no-js .brand-story__content > *,
.no-js .brand-story__media {
  opacity: 1;
  transform: none;
}


/* ------------------------------------------------------------
   4. ACCESSIBILITÉ - PRÉFÉRENCE DE MOUVEMENT RÉDUIT
   ------------------------------------------------------------
   Les personnes sensibles au mouvement voient le contenu
   directement dans son état final, sans aucune transition ni
   translation, tout en conservant l'interactivité du lien
   (seul le déplacement de la flèche est retiré ; le changement
   de couleur, lui, ne provoque pas d'inconfort et est conservé).
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  .brand-story__content > *,
  .brand-story__media {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .link--arrow,
  .link--arrow__icon {
    transition: color var(--duration-hover) linear;
  }

  .link--arrow:hover .link--arrow__icon,
  .link--arrow:focus-visible .link--arrow__icon {
    transform: none;
  }
}


/* ============================================================
   RESPONSIVE EXPERIENCE DESIGN - Phase 4
   ------------------------------------------------------------
   Philosophie : le fluide d'abord, les ruptures ensuite.

   La plupart des tailles d'écran demandées (1600, 1440, 1280,
   1024, 992px) sont couvertes par des tokens FLUIDES (clamp) qui
   font évoluer le padding, le gap et la taille du titre en
   continu - sans media query, sans "saut" visuel. Une seule
   vraie rupture de composition est nécessaire : le passage en
   colonne unique, car en dessous d'une certaine largeur, la
   colonne image devient trop étroite pour garder son impact
   (elle finit en bande verticale écrasée à côté du texte).
   Une seconde rupture, plus légère, affine le confort sur
   smartphone (typographie, cadrage de l'image, zone tactile
   du lien).

   Organisation :
     1. Tokens fluides (remplacent les valeurs figées de la Phase 2/3)
     2. Très grands écrans (≥1600px) - confort, pas de sur-étirement
     3. Rupture de composition (≤840px) - passage en colonne unique
     4. Raffinement smartphone (≤480px) - typographie & cadrage photo
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS FLUIDES
   ------------------------------------------------------------
   Remplacent les valeurs fixes posées en Phase 2 par des
   fonctions clamp(min, préféré, max) : la valeur "préférée"
   varie linéairement avec la largeur de viewport, ce qui évite
   les paliers brusques entre deux breakpoints.

   - --container-padding-inline : 80px à 1440px → se resserre
     jusqu'à 20px sur les très petits écrans.
   - --space-2xl (gap entre colonnes) : 120px à 1440px → 28px
     minimum, pour ne jamais coller les deux colonnes tant
     qu'elles cohabitent côte à côte.
   - --type-title-size : recalculé pour valoir exactement 44px
     à 1440px (fidèle à la Phase 3), tout en montant jusqu'à
     48px sur très grand écran et en descendant jusqu'à 28px
     sur mobile, sans jamais nécessiter de valeur "en dur" par
     breakpoint.
   ------------------------------------------------------------ */

.brand-story {
  --container-padding-inline: clamp(16px, 6vw, 80px);
  --space-2xl: clamp(28px, 8vw, 120px);
  --type-title-size: clamp(28px, 20px + 1.667vw, 48px);

  /* Nouveaux tokens dédiés à la composition empilée (mobile/tablette) */
  --stack-gap: clamp(28px, 7vw, 40px);
  --stack-content-measure: 56ch; /* mesure de lecture en colonne unique */
}


/* ------------------------------------------------------------
   2. TRÈS GRANDS ÉCRANS (≥1600px)
   ------------------------------------------------------------
   Sans intervention, un contenu plafonné à 1440px flotte dans
   un vide excessif sur un très grand moniteur. On autorise le
   conteneur à respirer un peu plus large, ce que --type-title-size
   accompagne déjà naturellement (il continue de croître avec le
   viewport jusqu'à 48px).
   ------------------------------------------------------------ */

@media (min-width: 1600px) {
  .brand-story__container {
    max-width: 1560px;
  }
}


/* ------------------------------------------------------------
   3. RUPTURE DE COMPOSITION - COLONNE UNIQUE (≤840px)
   ------------------------------------------------------------
   Seuil choisi juste au-dessus de la résolution tablette 768px
   testée : en dessous de ~840px, la colonne image tombe sous
   ~300px de large et devient une bande écrasée à côté du texte,
   ce qui casse l'équilibre des masses voulu par la maquette.

   Choix de conception :
   - Le texte reste AVANT l'image dans l'ordre du DOM (inchangé)
     et à l'écran : le message de marque reste prioritaire à la
     lecture, l'image vient l'illustrer ensuite plutôt que
     l'introduire. Pas de réordonnancement visuel (order) pour
     éviter tout écart entre ordre visuel et ordre de lecture au
     clavier / lecteur d'écran.
   - L'image passe en "bord à bord" horizontalement (elle
     déborde volontairement du padding du conteneur) : c'est la
     transposition, en composition empilée, du même principe
     que sur desktop où l'image touche déjà le bord droit de
     l'écran. L'identité visuelle ("l'image respire en pleine
     largeur") est ainsi conservée plutôt que reproduite au pixel.
   - Le texte, lui, garde un confortable padding latéral.
   - max-width en `ch` du titre/texte est retiré : en colonne
     unique, le bloc de texte doit utiliser toute la largeur
     disponible plutôt que de laisser un vide déséquilibré à
     droite (ce qui arriverait en conservant une mesure pensée
     pour une colonne desktop bien plus étroite).
   ------------------------------------------------------------ */

@media (max-width: 840px) {

  .brand-story__container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--stack-gap);
    /* Le rythme vertical de la section, porté en desktop par le
       padding de la colonne de texte (étirée par l'image), doit
       être repris explicitement ici puisque les deux colonnes
       ne partagent plus la même logique de hauteur. */
    padding-block: clamp(48px, 10vw, 64px);
  }

  /* --- Colonne de contenu, devenue pleine largeur --- */

  .brand-story__content {
    padding-block: 0; /* le rythme vertical vient désormais du gap de la section + du padding du <main> */
    max-width: none;
  }

  .brand-story__title,
  .brand-story__text {
    max-width: var(--stack-content-measure);
  }

  /* --- Image en pleine largeur, débordant du padding --- */

  .brand-story__media {
    order: 2; /* explicite : l'image reste après le texte (valeur par défaut, posée ici pour lisibilité) */
    /* La compensation doit reprendre la gouttière réellement appliquée au conteneur
       (--container-padding-x, imposée par rhythm.css) : avec l'ancienne variable locale,
       l'image dépassait de 3 à 16 px et élargissait toute la page en mobile. */
    width: calc(100% + var(--container-padding-x) * 2);
    margin-inline: calc(var(--container-padding-x) * -1);
    aspect-ratio: 3 / 2; /* hauteur pilotée, l'image n'a plus de colonne "grande hauteur" pour se caler dessus */
  }

  /* --- Confort tactile du lien --- */

  .link--arrow {
    /* Agrandit la zone tactile (~44px de haut) sans déplacer le
       texte visuellement, grâce à une marge négative compensatoire. */
    padding-block: 10px;
    margin-block: -10px 0;
  }
}


/* ------------------------------------------------------------
   4. RAFFINEMENT SMARTPHONE (≤480px)
   ------------------------------------------------------------
   La composition en colonne unique fonctionne déjà correctement
   à cette taille (héritée de la section précédente) : il ne
   s'agit plus de restructurer, mais d'affiner le confort de
   lecture et l'impact de l'image sur un écran étroit.

   - Le corps de texte descend à 16px / line-height resserrée :
     à cette largeur, un line-height de 1.75 (pensé pour des
     lignes longues) aère inutilement un texte déjà court par
     ligne.
   - L'eyebrow et le lien perdent 1px : à 13px/16px, leur
     graisse et leur tracking les rendaient proportionnellement
     plus imposants sur un écran étroit qu'à l'origine sur la
     maquette desktop.
   - Le cadrage photo passe d'un ratio "paysage" (3/2, pensé pour
     une bande large type tablette) à un ratio "portrait" (4/5) :
     sur un écran étroit, une image plus haute que large occupe
     l'espace disponible avec plus de présence, à la manière
     d'une photo éditoriale plutôt que d'un bandeau écrasé.
   ------------------------------------------------------------ */

@media (max-width: 480px) {

  .brand-story__eyebrow {
    font-size: 12px;
  }

  .brand-story__paragraph {
    font-size: 16px;
    line-height: 1.65;
  }

  .link--arrow {
    font-size: 15px;
  }

  .brand-story__media {
    aspect-ratio: 4 / 5;
  }
}