/* BFF — Belgian Fries Forever
   One family (Archivo, variable width) does all the talking:
   expanded black for the name, condensed heavy for slogans, normal width for reading. */

:root {
  --blue: #1433ff;      /* BFF blue: the brand ground, makes gold fries pop */
  --blue-deep: #0b1bb0;
  --ink: #0a1033;       /* deep navy instead of black */
  --gold: #ffb81c;      /* fry gold */
  --mayo: #fff6d8;      /* soft highlight */
  --white: #ffffff;

  --gutter: clamp(20px, 4vw, 64px);
  --section: clamp(96px, 14vw, 200px);

  --wide: 125%;
  --narrow: 62%;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iOS enlarges text on its own when the phone turns sideways; keep the sizes we set */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem; /* 17px, in rem so it follows the visitor's own text-size setting */
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Buttons ---------- */

.btn {
  --mx: 0px;
  --my: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-stretch: 110%;
  font-size: 16px;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform .35s var(--ease-out), background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translate(var(--mx), var(--my)) scale(.96); }
.btn:disabled { cursor: default; opacity: .6; }
.btn-small { min-height: 42px; padding: 0 20px; font-size: 14px; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--white); }
.btn-ghost { border-color: rgba(255,255,255,.55); color: var(--white); }
.btn-ghost:hover { border-color: var(--white); background: rgba(255,255,255,.08); }
.btn-blue { background: var(--blue); color: var(--white); }
.btn-blue:hover:not(:disabled) { background: var(--ink); }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px var(--gutter);
  color: var(--white);
  transition: background-color .3s ease, padding .3s ease, transform .45s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(20, 51, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-block: 12px;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-mark {
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: 26px;
  letter-spacing: -.02em;
  text-decoration: none;
  line-height: 1;
}
.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
}
.nav-links a { text-decoration: none; opacity: .85; }
.nav-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }

.lang {
  display: flex;
  padding: 3px;
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 999px;
}
.lang button {
  min-width: 38px;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lang button[aria-pressed="true"] { background: var(--white); color: var(--blue); }
/* touch screens: a finger needs a bigger target than a cursor */
@media (pointer: coarse) { .lang button { min-width: 44px; min-height: 38px; } }
.lang button:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,.14); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 110px var(--gutter) 48px;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  perspective: 1400px;
}

/* "BFF" measures 2.42em wide in Archivo: at 40% of the hero's width it runs edge to edge */
.hero-word {
  position: relative;
  margin: 0 0 0 -.02em;
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: min(40cqi, 62svh);
  line-height: .74;
  letter-spacing: -.06em;
  white-space: nowrap;
  transform-origin: 50% 80%;
  will-change: transform;
}
.hero-fill,
.hero-shadow {
  display: inline-block;
  padding: .04em .06em .02em 0;
  animation: reveal 1.2s var(--ease-out) .15s both;
}
/* the name is made of fries: one photo, clipped to the whole word */
.hero-fill {
  position: relative;
  background-image: url("assets/fries-closeup.jpg");
  background-size: 150% auto;
  background-position: 50% 48%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* a deep-blue twin behind it gives the letters their thickness */
.hero-shadow {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--blue-deep);
  transform: translate(.03em, .04em);
}

@keyframes reveal {
  from { clip-path: inset(100% 0 0 0); translate: 0 8%; }
  to   { clip-path: inset(0 0 0 0); translate: 0 0; }
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr minmax(0, 600px);
  gap: 32px 48px;
  align-items: end;
  margin-top: clamp(24px, 4vw, 48px);
  animation: fade .9s ease .7s both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.hero-name {
  margin: 0;
  font-weight: 800;
  font-stretch: var(--narrow);
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .005em;
}
.hero-line {
  --d: 650ms;
  margin: 0 0 14px;
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: min(8cqi, 52px); /* "De vraies frites." is 12.5em wide: one line per sentence */
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero-sub {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 17px;
  opacity: .9;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Ticker (moved by script.js, follows the scroll) ---------- */

.ticker {
  overflow: hidden;
  background: var(--ink);
  color: var(--gold);
  padding: 20px 0;
}
.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 36px;
  will-change: transform;
}
.ticker span {
  font-weight: 800;
  font-stretch: var(--narrow);
  font-size: clamp(26px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}
/* separator: a single fry, standing up */
.ticker i {
  width: 9px;
  height: 30px;
  border-radius: 3px;
  background: var(--gold);
  transform: rotate(14deg);
  flex: none;
}

/* ---------- Shared type ---------- */

.display {
  margin: 0;
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: min(13cqi, 140px);
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.display-ink { color: var(--ink); }
.display-light { color: var(--white); }
.display-gold { color: var(--gold); }

/* Responsive type, pure CSS. Every heading is sized in % of its own column (container query units,
   cqi), so it follows the column on any screen, and nothing is measured by JavaScript.
   Each size was set from the widest word of that heading type, measured in Archivo at 100px:
   "serviette." 7.7em -> 13cqi, "parenthèse" 8.9em -> 10.5cqi, "friends." 6.1em -> 16cqi (footer);
   the hero line and the card titles keep each sentence on one line (8cqi, 9.5cqi).
   If a future word is wider, it wraps instead of leaving the screen. */
.friend-copy, .way-copy, .real-copy, .menu, .belgium-title, .share, .friends-copy, .find-copy,
.hero, .hero-pitch, .list, .apply, .foot { container-type: inline-size; }
.display, .hero-line, .card-title, .foot-line { overflow-wrap: break-word; }
.menu .display, .belgium .display { font-size: min(10.5cqi, 140px); }

/* headings are split into lines by script.js; each line rises from behind its own edge */
.line {
  display: block;
  overflow: hidden;
  padding-block: .07em;
  margin-block: -.07em;
}
.line-inner { display: block; }

.lede {
  margin: 36px 0 0;
  max-width: 30ch;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.3;
  font-weight: 600;
}
.lede-light { color: var(--white); }

.body { margin: 20px 0 0; max-width: 46ch; font-size: 17px; }
.body-light { color: rgba(255,255,255,.82); }

/* ---------- Your new BFF ---------- */

.friend {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
  padding: var(--section) var(--gutter);
}
.friend-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 28px;
  max-width: 100%;
}
.friend-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.14);
  will-change: transform;
}

/* ---------- The Belgian way ---------- */

.way {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  padding: var(--section) var(--gutter);
  background: var(--mayo);
  overflow: hidden;
}
.steps {
  list-style: none;
  counter-reset: step;
  margin: 56px 0 0;
  padding: 0;
  max-width: 560px;
}
.steps li {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 18px 0;
  font-size: 17px;
}
.steps li::before {
  content: counter(step);
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: 22px;
  line-height: 1.15;
  color: var(--blue);
}
.steps p { margin: 0; }
.steps strong { font-weight: 800; }

.cone-stage {
  display: grid;
  place-items: center;
  min-height: 560px;
}
.cone {
  position: relative;
  width: min(360px, 78vw);
  aspect-ratio: 300 / 470;
  perspective: 900px;
  filter: drop-shadow(0 36px 36px rgba(10, 16, 51, .22));
  will-change: transform;
}
.cone-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* fries sit a little behind the paper, so they shift against it when the cone turns */
.cone-fries {
  position: absolute;
  left: 50%;
  top: 0;
  width: 118%;
  transform: translateX(-50%) translateZ(-40px) rotate(-4deg);
}
.cone-paper {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  transform: translateZ(0);
}
.cone-logo {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 72px;
  letter-spacing: -3px;
  fill: var(--white);
}
.cone-tag {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-stretch: 62%;
  font-size: 14px;
  letter-spacing: 1.2px;
  fill: var(--gold);
}
.cone-small {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-stretch: 62%;
  font-size: 12px;
  letter-spacing: 1.2px;
  fill: var(--mayo);
}

/* ---------- Not French ---------- */

.real {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--ink);
  color: var(--white);
}
.real-copy {
  padding: var(--section) var(--gutter);
  align-self: center;
}

/* the official source, under the claim */
.facts { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.16); max-width: 46ch; }
.facts-line { margin: 0 0 20px; font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--white); }
.btn-facts {
  gap: 10px;
  border-color: var(--gold);
  color: var(--gold);
}
.btn-facts svg { width: 18px; height: 18px; flex: none; }
.btn-facts:hover { background: var(--gold); color: var(--ink); }
.real-photo { position: relative; min-height: 560px; overflow: hidden; }
.real-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  will-change: transform;
}

/* ---------- Menu ---------- */

.menu { padding: var(--section) var(--gutter); }
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(40px, 6vw, 100px);
  margin-top: clamp(56px, 7vw, 96px);
}
.menu-head {
  margin: 0 0 8px;
  font-weight: 800;
  font-stretch: var(--narrow);
  font-size: 30px;
  text-transform: uppercase;
  color: var(--blue);
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 18px;
  padding: 18px 0;
}
.item {
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: 22px;
  letter-spacing: -.01em;
  transition: transform .4s var(--ease-out), color .2s ease;
}
.desc { color: rgba(10, 16, 51, .62); font-size: 15px; }
.price {
  font-weight: 800;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.menu-list li:hover .item { transform: translateX(8px); color: var(--blue); }

/* ---------- A Belgian time-out ---------- */

.belgium {
  padding: var(--section) var(--gutter);
  background: var(--gold);
}
.belgium-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 32px clamp(40px, 6vw, 100px);
  align-items: end;
}
.belgium-head .lede { margin: 0; }
.senses {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 48px);
  margin: clamp(64px, 8vw, 110px) 0 0;
  padding: 0;
}
.senses li { position: relative; padding-top: 28px; }
.senses h3 {
  margin: 0 0 12px;
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.senses p { margin: 0; max-width: 32ch; }

/* ---------- Share ---------- */

.share {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--section) var(--gutter);
  background: var(--blue);
}
.share .display { font-size: min(13cqi, 190px); }
.share .lede { margin-bottom: 40px; }
.share-status { min-height: 1.5em; margin: 18px 0 0; color: var(--mayo); font-weight: 600; }

/* ---------- Friends of BFF ---------- */

.friends {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: center;
  padding: var(--section) var(--gutter);
  background: var(--ink);
}
.friends .lede { color: var(--gold); }

/* ---------- Cards (join the list, introduce yourself) ---------- */

.list,
.apply {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 28px;
}
.list { background: var(--gold); }
.apply { background: var(--mayo); }
.card-title {
  margin: 0;
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: min(9.5cqi, 42px); /* "Présente-toi." is 10em wide: stays on one line */
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--blue);
}
.field { display: block; margin: 22px 0 0; }
.field span { display: block; margin-bottom: 8px; font-weight: 700; font-size: 15px; }
.field input,
.field select {
  width: 100%;
  min-height: 56px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 17px;
  color: var(--ink);
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 52px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%230A1033'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 20px;
  cursor: pointer;
}
.field input:focus-visible,
.field select:focus-visible { outline-offset: 2px; }
.field input[aria-invalid="true"] { border-color: #d0021b; }
.list .btn,
.apply .btn { width: 100%; margin-top: 24px; }
/* bot trap: a field no human sees or fills in */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; margin: 14px 0 0; font-weight: 600; }
.form-status.is-error { color: #b00016; }
.form-status.is-ok { color: var(--blue); }
.list .form-status.is-ok { color: var(--ink); }

/* ---------- Find us ---------- */

.find {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(48px, 6vw, 110px);
  align-items: start;
  padding: var(--section) var(--gutter);
}
.modes { margin: 48px 0 0; }
.modes div {
  position: relative;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 18px 0;
}
.modes dt { font-weight: 900; font-stretch: var(--wide); font-size: 19px; }
.modes dd { margin: 0; }

/* ---------- Rules that draw themselves ---------- */

.steps li::after,
.senses li::after,
.modes div::after,
.menu-list li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(10, 16, 51, .16);
  transform-origin: left;
}
.menu-list li::after { top: auto; bottom: 0; background: rgba(10, 16, 51, .1); }
.senses li::after { background: var(--ink); }

/* ---------- Footer ---------- */

.foot {
  padding: clamp(72px, 10vw, 140px) var(--gutter) 32px;
  background: var(--ink);
  color: var(--white);
}
.foot-line {
  margin: 0;
  font-weight: 900;
  font-stretch: var(--wide);
  font-size: min(16cqi, 170px);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--gold);
}
.foot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.foot-meta span { margin-right: auto; }
.foot-meta a { text-decoration: none; }
.foot-meta a:hover { color: var(--white); text-decoration: underline; }

/* ---------- Scroll reveals (only with JS, only when motion is welcome) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .line-inner { transform: translateY(112%); }
  .js .is-in .line-inner {
    transform: none;
    transition: transform 1.1s var(--ease-out) calc(var(--l) * 90ms + var(--d, 0ms));
  }

  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease .15s, transform 1.1s var(--ease-out) .15s;
  }

  .js .stagger > * { opacity: 0; transform: translateY(14px); }
  .js .stagger.is-in > * {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease calc(var(--i) * 80ms + 120ms), transform .9s var(--ease-out) calc(var(--i) * 80ms + 120ms);
  }
  .js .stagger > *::after { transform: scaleX(0); }
  .js .stagger.is-in > *::after {
    transform: scaleX(1);
    transition: transform 1.2s var(--ease-out) calc(var(--i) * 80ms);
  }

  .js .friend-photo { clip-path: inset(14% 10% 14% 10% round 28px); }
  .js .friend-photo.is-in { clip-path: inset(0 0 0 0 round 28px); transition: clip-path 1.4s var(--ease-out); }

  /* The mask sits on the image, not on the observed frame: a frame clipped to nothing is never
     "visible" to IntersectionObserver in Chrome, so its reveal would never fire. */
  .js .real-photo img { clip-path: inset(0 0 0 100%); }
  .js .real-photo.is-in img { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease-out) .1s; }

  .js .cone-stage { opacity: 0; transform: translateY(80px) scale(.9); }
  .js .cone-stage.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform 1.4s var(--ease-out);
  }
}

/* ---------- Language switch: a soft cross-fade ---------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::view-transition-old(root) { animation-name: lang-out; }
::view-transition-new(root) { animation-name: lang-in; }
@keyframes lang-out { to { opacity: 0; filter: blur(8px); } }
@keyframes lang-in { from { opacity: 0; filter: blur(8px); } }

/* browsers without view transitions: fade the words out and back in */
main, .nav-links, .nav-cta, .foot { transition: opacity .2s ease, filter .2s ease; }
.lang-out main, .lang-out .nav-links, .lang-out .nav-cta, .lang-out .foot { opacity: 0; filter: blur(6px); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .senses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .nav-links { display: none; }
  .lang { margin-left: auto; }
  /* minmax(0, …): a column must never grow to fit an unbroken heading; the heading shrinks instead */
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
  .friend, .way, .real, .find, .friends, .belgium-head { grid-template-columns: minmax(0, 1fr); }
  .friend-photo { aspect-ratio: 4 / 4.4; }
  .cone-stage { min-height: 0; padding-top: 16px; }
  .real-photo { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
  .menu-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding-top: 96px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .nav-cta { display: none; }
  .senses { grid-template-columns: minmax(0, 1fr); }
  .menu-list li { grid-template-columns: 1fr auto; }
  .menu-list .desc { grid-column: 1 / -1; grid-row: 2; }
  .modes div { grid-template-columns: 1fr; gap: 4px; }
  .foot-meta span { margin-right: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}