/*
  Layout du site — header flottant, panneaux, footer, sections de pages.
  Mobile first ; point de rupture desktop des tokens : 768 px. Les grilles à 2 colonnes
  démarrent à 1024 px pour garder des colonnes lisibles (≥ 480 px).
*/

/* ==== Conteneurs ==== */
.container { width: 100%; max-width: calc(1000px + 2 * var(--spacing-section-xs)); margin-inline: auto; padding-inline: var(--spacing-section-xs); }
.container--narrow { max-width: calc(480px + 2 * var(--spacing-section-xs)); }

.page {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-section-lg);
  /* Dégagement sous le header flottant (exception documentée dans la maquette) — mobile : Spacing/section-xl */
  padding-top: var(--spacing-section-xl);
}
@media (min-width: 768px) { .page { padding-top: 256px; } }
.page > * { width: 100%; }

.stack { display: flex; flex-direction: column; }
.gap-2xs { gap: var(--spacing-component-2xs); }
.gap-xs { gap: var(--spacing-component-xs); }
.gap-sm { gap: var(--spacing-component-sm); }
.gap-md { gap: var(--spacing-component-md); }
.gap-section-xs { gap: var(--spacing-section-xs); }
.gap-section-sm { gap: var(--spacing-section-sm); }
.gap-section-md { gap: var(--spacing-section-md); }
.gap-section-lg { gap: var(--spacing-section-lg); }

.split { display: grid; gap: var(--spacing-section-sm); }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; } .split--center { align-items: center; } }

/* ==== Header flottant ==== */
.site-header { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-section-sm);
  padding: var(--spacing-component-sm) var(--spacing-section-xs);
  padding-bottom: calc(var(--spacing-component-sm) + env(safe-area-inset-bottom));
  background: var(--color-background-sunken);
}
.site-header__center { display: flex; align-items: center; gap: var(--spacing-component-xl); }
.site-header__center > .switcher--lang, .site-header__id { display: none; }
.site-header__id { flex-direction: column; align-items: center; text-decoration: none; text-align: center; white-space: nowrap; }
body { padding-bottom: 72px; }

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  /*
    Desktop : deux états du composant PortfolioHeader.
    - Mode=Desktop (par défaut) : pilule flottante centrée, à Spacing/section-lg du haut.
    - Mode=Fixed (.is-scrolled, déclenché au défilement) : barre pleine largeur collée en haut.
    La transition anime position, largeur et rayon ; elle est neutralisée si l'utilisateur réduit les animations.
  */
  .site-header {
    bottom: auto; top: var(--spacing-section-lg);
    transition: top var(--motion-duration-scale-md) var(--motion-easing-scale-standard);
  }
  .site-header__bar {
    width: 100%; max-width: 652px; margin-inline: auto;
    padding: var(--spacing-component-sm) var(--spacing-section-sm);
    border: var(--border-scale-thin) solid var(--color-border-default);
    border-radius: 40px; /* = Radius/pill pour une barre de 80 px ; valeur finie pour que le rayon s'anime */
    transition:
      max-width var(--motion-duration-scale-md) var(--motion-easing-scale-standard),
      border-radius var(--motion-duration-scale-md) var(--motion-easing-scale-standard),
      border-color var(--motion-duration-scale-md) var(--motion-easing-scale-standard);
  }
  .site-header.is-scrolled { top: 0; }
  .site-header.is-scrolled .site-header__bar {
    max-width: 100%;
    border-radius: 0;
    border-color: transparent;
  }
  .site-header__center > .switcher--lang, .site-header__id { display: flex; }
}

/* ==== Panneaux Menu / Contact ==== */
.panel {
  position: fixed; left: 0; right: 0; bottom: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-section-md);
  max-height: calc(100dvh - 120px); overflow-y: auto;
  padding: var(--spacing-section-md) var(--spacing-component-md);
  background: var(--color-background-default);
  border-radius: var(--radius-scale-md) var(--radius-scale-md) 0 0;
}
/* Mobile : bottom sheet collée en bas de l'écran, par-dessus la barre fixe.
   Fermeture : poignée, clic sur le fond, touche Échap. */
.site-header .panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 1;
  padding-bottom: calc(var(--spacing-section-md) + env(safe-area-inset-bottom));
  max-height: calc(100vh - var(--spacing-section-lg)); max-height: calc(100dvh - var(--spacing-section-lg));
}
.panel[hidden] { display: none; }
/* Poignée : zone cliquable de 44 px de haut, trait visuel de 120 × 10 px */
.panel__grabber {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 160px; height: 44px; margin-block: calc(-1 * var(--spacing-component-md));
  padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius-card);
}
.panel__grabber::before { content: ""; width: 120px; height: 10px; border-radius: var(--radius-card); background: var(--color-action-secondary-active); }
.panel__grabber:hover::before { background: var(--color-action-neutral-active); }
/* Bouton Fermer explicite, mobile uniquement (la poignée seule n'est pas assez découvrable) */
.panel__close { position: absolute; top: var(--spacing-component-xs); right: var(--spacing-component-xs); }
.panel .menu { width: 100%; }
.panel__title { text-align: center; color: var(--color-text-primary); }
.panel-backdrop { position: fixed; inset: 0; z-index: 40; background: rgb(2 6 23 / 0.4); }
.panel-backdrop[hidden] { display: none; }

@media (min-width: 768px) {
  .panel {
    top: calc(100% + var(--spacing-component-xs)); bottom: auto; left: 50%; right: auto;
    transform: translateX(-50%);
    width: min(606px, calc(100vw - 2 * var(--spacing-section-xs)));
    gap: var(--spacing-component-md);
    padding: var(--spacing-component-md);
    border: var(--border-scale-thin) solid var(--color-border-subtle);
    border-radius: var(--radius-scale-md);
  }
  .site-header .panel { position: absolute; z-index: auto; bottom: auto; left: 50%; right: auto; padding-bottom: var(--spacing-component-md); max-height: calc(100dvh - var(--spacing-section-lg) - 112px); }
  .site-header.is-scrolled .panel { max-height: calc(100dvh - 112px); }
  .panel__grabber, .panel__lang, .panel__close { display: none; }
  .panel--contact { width: min(420px, calc(100vw - 2 * var(--spacing-section-xs))); padding-top: var(--spacing-section-md); }
  .panel-backdrop { background: transparent; }
}

/* ==== Carte de contact (footer + panneau) ==== */
.contact-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-md);
  padding: var(--spacing-component-xl) var(--spacing-component-md);
  background: var(--color-background-subtle); border-radius: var(--radius-card);
}
.contact-card--stack { align-items: stretch; width: 100%; }
.contact-card__id { display: flex; align-items: center; gap: var(--spacing-component-sm); }
.contact-card__id .t-body-lg { font-weight: var(--font-weight-scale-bold); }
.contact-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-component-xs); margin-top: var(--spacing-component-2xs); }
.meta-list { display: flex; flex-direction: column; gap: var(--spacing-component-md); }
.meta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-component-md) var(--spacing-component-xl); }
.meta { display: flex; flex-direction: column; gap: var(--spacing-component-sm); }
.meta-row .meta { align-items: center; text-align: center; }
.meta dd { margin: 0; }
.meta__label { font-family: var(--font-family-scale-alternate), ui-monospace, monospace; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); text-transform: uppercase; color: var(--color-text-secondary); }
/* Même hauteur pour toutes les valeurs d'une ligne (= hauteur du Tag Medium / du bouton copier) */
.meta__inline { display: flex; align-items: center; justify-content: center; gap: var(--spacing-component-xs); min-height: 28px; }

/* ==== Footer ==== */
.site-footer { padding: var(--spacing-section-lg) var(--spacing-section-xs) var(--spacing-section-xl); background: var(--color-background-default); }
.site-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-section-md); max-width: 1664px; margin-inline: auto; text-align: center; }
.site-footer__intro { display: flex; flex-direction: column; gap: var(--spacing-component-xs); }
.site-footer__social { display: flex; gap: var(--spacing-component-md); }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-component-xs) var(--spacing-component-xl); color: var(--color-text-tertiary); }
.site-footer__links a { color: inherit; text-underline-offset: 2px; }
.site-footer__links a:hover { color: var(--color-text-primary); }

/* ==== Titre de page (fil d'Ariane + H1) ==== */
.page-title { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-xs); padding-inline: var(--spacing-section-xs); text-align: center; }

/* ==== Carte projet (image de fond + légende) ==== */
.project-card {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 378 / 400; min-height: 320px;
  padding: var(--spacing-component-xl) var(--spacing-component-md);
  border-radius: var(--radius-card); overflow: hidden; isolation: isolate;
  color: var(--color-neutral-0); text-decoration: none;
  background: var(--color-background-sunken);
}
.project-card--lg { aspect-ratio: 584 / 600; }
.project-card--dark-text { color: var(--color-neutral-900); }
.project-card__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-duration-scale-md) var(--motion-easing-scale-standard); }
.project-card__body { display: flex; flex-direction: column; gap: var(--spacing-component-xs); }
.project-card__name { display: block; font-weight: var(--font-weight-scale-bold); }
.project-card__sub { display: block; }
.project-card .tag { background: var(--color-neutral-100); color: var(--color-neutral-900); }
a.project-card:hover .project-card__img { transform: scale(1.03); }
a.project-card:hover .project-card__name { text-decoration: underline; text-underline-offset: 3px; }

/* ==== Blocs « LE CONTEXTE », « L'ÉQUIPE »… ==== */
.block { display: flex; flex-direction: column; gap: var(--spacing-component-sm); }
.block > .t-caption:first-child { color: var(--color-text-secondary); }
.context { padding-block: var(--spacing-section-md); align-self: center; }
.context .t-body-md { color: var(--color-text-primary); }

.members { display: flex; flex-direction: column; gap: var(--spacing-component-md); padding: var(--spacing-component-md); }
.member { display: flex; gap: var(--spacing-component-xs); }
.member > .icon, .member > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-icon-secondary); }
.member__body { display: flex; flex-direction: column; gap: var(--spacing-component-xs); min-width: 0; }
.member__body > .t-body-sm { color: var(--color-text-secondary); }
.member__name { display: flex; flex-direction: column; }
.member__name .t-body-xs { color: var(--color-text-tertiary); }

.deliverables { padding: var(--spacing-component-md); }
.deliverables .t-body-md + .t-body-md { margin-top: var(--spacing-component-md); }

@media (min-width: 1024px) { .tasks { padding-top: var(--spacing-section-lg); } }
@media (min-width: 1024px) { .tasks .timeline-item__content { padding-right: var(--spacing-section-md); } }

/* ==== Illustrations ==== */
.figure { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-xs); }
.figure img, .figure video { width: 100%; border-radius: var(--radius-card); }
.figure--md { max-width: 1000px; margin-inline: auto; }
.figure figcaption { color: var(--color-text-secondary); }
.figure-row { display: grid; gap: var(--spacing-component-xl); max-width: 1000px; margin-inline: auto; }
@media (min-width: 768px) { .figure-row { grid-template-columns: 1fr 1fr; } }

/* ==== CTA de fin de page ==== */
.cta { padding: var(--spacing-section-lg) var(--spacing-section-xs); background: var(--color-background-subtle); }
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-sm); max-width: 480px; margin-inline: auto; text-align: center; }
.cta__inner .btn { margin-top: var(--spacing-component-md); }

/* =====================================================================
   Accueil
   ===================================================================== */
.intro { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-md); padding: var(--spacing-section-sm) var(--spacing-component-md); text-align: center; }
.intro__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spacing-component-sm); }
.intro__role { font-family: var(--font-family-scale-alternate), ui-monospace, monospace; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); text-transform: uppercase; color: var(--color-text-secondary); }
.intro__content { display: flex; flex-direction: column; gap: var(--spacing-component-xs); max-width: 900px; }

.approach { display: grid; gap: var(--spacing-component-xl) var(--spacing-component-md); padding: var(--spacing-component-xl) var(--spacing-component-md); }
@media (min-width: 600px) { .approach { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .approach { grid-template-columns: repeat(5, 1fr); } }
.approach__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.approach__item svg { width: 40px; height: 40px; color: var(--color-icon-primary); border-radius: var(--radius-card); background: rgb(207 250 254 / 0.2); }
.approach__item div { display: flex; flex-direction: column; gap: var(--spacing-component-2xs); padding-top: var(--spacing-component-xs); }

.section-head { display: flex; flex-direction: column; gap: var(--spacing-component-xs); text-align: center; }
.section-head .t-body-md { color: var(--color-text-secondary); }

.projects { display: grid; gap: var(--spacing-section-sm); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

.skills { padding: var(--spacing-section-lg) var(--spacing-section-xs); background: var(--color-background-subtle); }
.skills__inner { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-section-sm); max-width: 924px; margin-inline: auto; }
.skills__grid { display: grid; gap: var(--spacing-section-xs); justify-items: center; width: 100%; }
.skills__col { display: grid; gap: var(--spacing-section-xs); width: 100%; }
.skills__chart { order: -1; }
@media (min-width: 1024px) {
  .skills__grid { grid-template-columns: 1fr 276px 1fr; align-items: center; gap: var(--spacing-section-md); }
  .skills__chart { order: 0; }
}
.step { display: flex; flex-direction: column; gap: var(--spacing-component-xs); padding: var(--spacing-component-md); background: var(--color-background-elevated); border: var(--border-scale-thin) solid var(--color-border-strong); border-radius: var(--radius-card); }
.step__num { color: var(--color-text-secondary); }
.step__title { display: flex; align-items: center; gap: var(--spacing-component-xs); font-weight: var(--font-weight-scale-bold); }
.step__title .icon { width: 20px; height: 20px; color: var(--color-icon-primary); }
.step > .t-body-md { color: var(--color-text-secondary); }

.spider { width: 276px; height: 276px; max-width: 100%; overflow: visible; }
.spider__grid { stroke: var(--color-border-default); stroke-width: 1; }
.spider__area { fill: var(--color-blue-400); fill-opacity: 0.5; }
.spider__point { fill: var(--color-background-elevated); stroke: var(--color-border-strong); }
.spider__point, .spider__halo, .spider__label text { transform-box: fill-box; transform-origin: center; transition: transform var(--motion-duration-scale-sm) var(--motion-easing-scale-spring), fill var(--motion-duration-scale-sm) var(--motion-easing-scale-standard), stroke var(--motion-duration-scale-sm) var(--motion-easing-scale-standard); }
.spider__halo { fill: var(--color-action-primary); opacity: 0; }

/* Survol d'une étape (ou de son point) : point et étiquette du graphe en avant, carte mise en avant */
.step { transition: border-color var(--motion-duration-scale-sm) var(--motion-easing-scale-standard), background-color var(--motion-duration-scale-sm) var(--motion-easing-scale-standard); }
.skills__grid[data-active] .step { border-color: var(--color-border-subtle); }
.skills__grid[data-active="01"] .step[data-step="01"],
.skills__grid[data-active="02"] .step[data-step="02"],
.skills__grid[data-active="03"] .step[data-step="03"],
.skills__grid[data-active="04"] .step[data-step="04"] { border-color: var(--color-action-primary); box-shadow: inset 0 0 0 1px var(--color-action-primary); }
.skills__grid[data-active="01"] .spider__dot[data-step="01"] .spider__point,
.skills__grid[data-active="02"] .spider__dot[data-step="02"] .spider__point,
.skills__grid[data-active="03"] .spider__dot[data-step="03"] .spider__point,
.skills__grid[data-active="04"] .spider__dot[data-step="04"] .spider__point { fill: var(--color-action-primary); stroke: var(--color-action-primary); transform: scale(1.5); }
.skills__grid[data-active="01"] .spider__dot[data-step="01"] .spider__halo,
.skills__grid[data-active="02"] .spider__dot[data-step="02"] .spider__halo,
.skills__grid[data-active="03"] .spider__dot[data-step="03"] .spider__halo,
.skills__grid[data-active="04"] .spider__dot[data-step="04"] .spider__halo { animation: spider-pulse calc(var(--motion-duration-scale-md) * 2) var(--motion-easing-scale-standard) 1; } /* une seule impulsion par survol */
.skills__grid[data-active="01"] .spider__label [data-step="01"],
.skills__grid[data-active="02"] .spider__label [data-step="02"],
.skills__grid[data-active="03"] .spider__label [data-step="03"],
.skills__grid[data-active="04"] .spider__label [data-step="04"] { fill: var(--color-text-brand); font-weight: var(--font-weight-scale-bold); }
.spider__dot { cursor: pointer; }
@keyframes spider-pulse {
  0% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0; transform: scale(3.2); }
}
.spider__label { font-family: var(--font-family-scale-alternate), ui-monospace, monospace; font-size: 12px; fill: var(--color-text-secondary); }
.spider__icon { fill: var(--color-icon-primary); }
.skills .alert { width: 100%; }

/* =====================================================================
   A propos
   ===================================================================== */
.about-grid { display: grid; gap: var(--spacing-section-sm); }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 388fr 780fr; align-items: start; } }
/* Pas de bordure autour du bloc : seul le tableau est encadré (maquette ChartCard) */
.chart-card { display: flex; flex-direction: column; gap: var(--spacing-section-xs); }
@media (min-width: 1024px) { .chart-card { padding-top: var(--spacing-section-lg); } }
.skill-table { list-style: none; padding: 0; background: var(--color-background-subtle); border: var(--border-scale-thin) solid var(--color-border-subtle); border-radius: var(--radius-card); }
.skill { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-component-xs) var(--spacing-component-md); padding: var(--spacing-component-md); }
.skill + .skill { border-top: var(--border-scale-thin) solid var(--color-border-subtle); }
.skill__name { flex: 1 1 200px; }
.skill__note { min-width: 150px; display: flex; }
.legend { display: flex; flex-direction: column; gap: var(--spacing-component-sm); padding: var(--spacing-component-md); background: var(--color-background-subtle); }
.legend ul { display: flex; flex-wrap: wrap; gap: var(--spacing-component-sm) var(--spacing-component-md); }
.legend li { display: flex; align-items: center; gap: var(--spacing-component-sm); }

.tools-band { padding: var(--spacing-section-lg) var(--spacing-section-xs); background: var(--color-background-subtle); }
.tools-band__inner { display: grid; gap: var(--spacing-section-md); max-width: 1000px; margin-inline: auto; }
@media (min-width: 1024px) { .tools-band__inner { grid-template-columns: 1fr 1fr; align-items: start; } .tools-band__inner > .stack:first-child { padding-top: var(--spacing-section-lg); } }
/* Mobile : tag au-dessus du tableau (maquette About/Mobile) ; ≥ 768 px : tag vertical à gauche */
.tools-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-component-sm); }
.tools-col > .tools-table { width: 100%; }
@media (min-width: 768px) {
  .tools-col { display: grid; grid-template-columns: auto 1fr; align-items: start; }
  /* Lecture de bas en haut (rotation 90° de la maquette) */
  .tools-col > .tag { writing-mode: vertical-rl; transform: rotate(180deg); padding: var(--spacing-component-xs) var(--spacing-component-2xs); }
}
.tools-table { list-style: none; padding: 0; background: var(--color-background-elevated); border: var(--border-scale-thin) solid var(--color-border-subtle); border-radius: var(--radius-card); }
.tools-row { display: flex; flex-direction: column; gap: var(--spacing-component-2xs); padding: var(--spacing-component-md); }
.tools-row + .tools-row { border-top: var(--border-scale-thin) solid var(--color-border-subtle); }
.tools-row .tags { padding-block: var(--spacing-component-2xs); }

/* =====================================================================
   asma.ds — diagramme de workflow
   ===================================================================== */
.workflow { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-component-sm); }
.workflow__edge { width: 1px; height: 20px; background: var(--color-border-strong); }
.workflow__split { width: 140px; height: 40px; color: var(--color-border-strong); }
.workflow__pair { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-component-sm); }

/* =====================================================================
   Ex Makina — cartes d'univers
   ===================================================================== */
.universe { display: grid; gap: var(--spacing-component-md); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: start; }
.universe__card { display: flex; flex-direction: column; gap: var(--spacing-component-xs); padding: var(--spacing-component-md); background: var(--color-background-subtle); border-radius: var(--radius-card); }
.universe__card .t-body-xs { color: var(--color-text-secondary); }

/* Mentions légales */
.legal { max-width: 720px; }
.legal h2 { margin-top: var(--spacing-section-sm); }
.figure-row--wide { max-width: none; }
.deliverables.list { padding-left: calc(var(--spacing-component-md) + 1.4em); }
.center-items { align-items: center; }

/* Header : Menu et Contact ont la même largeur (111 px dans la maquette) pour garder le bloc central centré */
.site-header__bar > .btn { min-width: 112px; }


/* ==== Transitions des panneaux Menu / Contact ====
   Ouverture : Duration/md + Easing/standard ; fermeture : Duration/sm + Easing/accelerate.
   Mobile : la bottom sheet monte depuis le bas ; desktop : léger glissement vers le bas + fondu. */
.panel, .panel-backdrop {
  opacity: 0;
  transition: opacity var(--motion-duration-scale-sm) var(--motion-easing-scale-accelerate),
              translate var(--motion-duration-scale-sm) var(--motion-easing-scale-accelerate);
}
.panel { translate: 0 100%; }
.panel.is-open, .panel-backdrop.is-open {
  opacity: 1; translate: 0 0;
  transition: opacity var(--motion-duration-scale-md) var(--motion-easing-scale-standard),
              translate var(--motion-duration-scale-md) var(--motion-easing-scale-standard);
}
@media (min-width: 768px) {
  .panel { translate: 0 calc(-1 * var(--spacing-component-xs)); }
}

/* ==== Cartes projet : même retour au focus clavier qu'au survol ==== */
a.project-card:focus-visible .project-card__img { transform: scale(1.03); }
a.project-card:focus-visible .project-card__name { text-decoration: underline; text-underline-offset: 3px; }


/* ==== Footer mobile (maquette PortfolioFooter Mode=Mobile) ====
   Métadonnées empilées et centrées ; rôle et expérience détaillés comme dans le panneau Contact. */
.only-mobile { display: inline; }
.meta__inline--stack { flex-direction: column; gap: 0; }
@media (max-width: 767px) {
  .site-footer { padding-inline: var(--spacing-component-md); }
  .site-footer .contact-card { align-self: stretch; }
  .meta-row { flex-direction: column; align-items: stretch; gap: var(--spacing-component-md); }
  .meta-row .meta { gap: var(--spacing-component-sm); }
  .site-footer__links { gap: var(--spacing-component-xl); }
}
@media (min-width: 768px) {
  .only-mobile { display: none; }
  .meta__inline--stack { flex-direction: row; }
  .site-footer { padding-inline: var(--spacing-section-xl); }
}