/* =============================================================
   MOBILE REGIME — built from Figma frame "Mobile EN" (420:1878),
   393 × 7805.

   Same scaling model as the desktop canvas, different constant:
   1rem = viewport/39.3, so 1rem = 10px at 393px and every Figma
   pixel maps to (px / 10)rem.

   Above 480px the canvas is frozen (agreed treatment for the
   481–1023px gap, which the Figma file does not cover) and centred,
   with backgrounds bleeding to the viewport edge.
   ============================================================= */
@media (max-width: 1023px) {
  html { font-size: calc(100vw / 39.3); }

  body { letter-spacing: -0.02em; }

  .band { --gutter: max(0px, calc((100vw - 39.3rem) / 2)); }
  /* same three layers as desktop; the frozen 481-1023px range showed gutters up
     to 53% of the width at 1023px */
  .plate { background-size: min(100%, 39.3rem) 100%, 50% 100%, 50% 100%; }

  /* swap the two hand-set break sets */
  .br-d { display: none; }
  .br-m { display: inline; }
  /* The <img> width/height attributes carry the desktop ratio, which would
     squash the mobile SVG selected by <source>. Restate the mobile aspect. */
  .hero__mark img       { aspect-ratio: 62 / 9; }
  .project__flags-a img,
  .project__flags-b img { aspect-ratio: 377 / 22; }
  .wall__marquee img    { aspect-ratio: 367 / 41; }
  .voices__rail img     { aspect-ratio: 55 / 15; width: 100%; }
  .agenda__lines img    { aspect-ratio: 755 / 1997; }
  .footer__social img   { aspect-ratio: 246 / 26; }

  .colourbar { height: 0.9rem; }
  .colourbar--m { display: flex; }

  /* ---------- type roles at mobile sizes ---------- */
  .heading   { font-size: 2.5rem; line-height: 1.16; letter-spacing: -0.05rem; }
  .pull      { font-size: 1.78rem; line-height: 1.01; letter-spacing: -0.036rem; }
  .statement { font-size: 2.14rem; line-height: 1.16; letter-spacing: -0.043rem; }
  .prose     { font-size: 1.4rem; line-height: 1.214; letter-spacing: -0.028rem; }
  .prose p + p { margin-top: 1.7rem; }
  .lede      { font-size: 1.4rem; line-height: 1.214; letter-spacing: -0.028rem; }
  .byline    { font-size: 1.43rem; line-height: 1.25; }
  .discover  { font-size: 1.4rem; letter-spacing: -0.028rem; }
  .discover img { width: 1.6rem; }

  /* ---------- nav: EN/FR left, burger right ---------- */
  .nav { height: 7.8rem; }
  .nav__inner { width: min(100%, 39.3rem); }
  .nav a, .nav__lang { top: 3.4rem; font-size: 1.35rem; letter-spacing: -0.027rem; }
  .nav__lang { left: 2.2rem; }
  .nav__toggle {
    display: block; position: absolute; left: auto; right: 2rem; top: 2.6rem;
    width: 2.8rem; height: 2.4rem; transform: none; cursor: pointer;
  }
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after {
    content: ''; position: absolute; left: 0; width: 2.8rem; height: 0.2rem; background: #fff;
  }
  .nav__toggle span { top: 1.1rem; }
  .nav__toggle span::before { top: -0.8rem; }
  .nav__toggle span::after  { top:  0.8rem; }

  .nav__menu {
    position: absolute; left: 0; top: 7.8rem; width: 100%;
    display: none; flex-direction: column; gap: 1.6rem; padding: 2rem 2.2rem;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(0.8rem); -webkit-backdrop-filter: blur(0.8rem);
    transform: translateX(var(--gutter));
  }
  .nav__menu[data-open='true'] { display: flex; }
  .nav__menu a { position: static; top: auto; left: auto; font-size: 1.7rem; }

  .hero__mark img       { aspect-ratio: 62 / 9; }
  .project__flags-a img,
  .project__flags-b img { aspect-ratio: 377 / 22; }
  .wall__marquee img    { aspect-ratio: 367 / 41; }
  .voices__rail img     { aspect-ratio: 55 / 15; width: 100%; }
  .agenda__lines img    { aspect-ratio: 755 / 1997; }
  .footer__social img   { aspect-ratio: 246 / 26; }

  .colourbar { height: 0.9rem; }
  .colourbar--m { display: flex; }

  /* ---------- type roles at mobile sizes ---------- */
  .heading   { font-size: 2.5rem; line-height: 1.16; letter-spacing: -0.05rem; }
  .pull      { font-size: 1.78rem; line-height: 1.01; letter-spacing: -0.036rem; }
  .statement { font-size: 2.14rem; line-height: 1.16; letter-spacing: -0.043rem; }
  .prose     { font-size: 1.4rem; line-height: 1.214; letter-spacing: -0.028rem; }
  .prose p + p { margin-top: 1.7rem; }
  .lede      { font-size: 1.4rem; line-height: 1.214; letter-spacing: -0.028rem; }
  .byline    { font-size: 1.43rem; line-height: 1.25; }
  .discover  { font-size: 1.4rem; letter-spacing: -0.028rem; }
  .discover img { width: 1.6rem; }

  /* ---------- nav: EN/FR left, burger right ---------- */
  .nav { height: 7.8rem; }
  .nav__inner { width: min(100%, 39.3rem); }
  .nav a, .nav__lang { top: 3.4rem; font-size: 1.35rem; letter-spacing: -0.027rem; }
  .nav__lang { left: 2.2rem; }
  .nav__toggle {
    display: block; position: absolute; left: auto; right: 2rem; top: 2.6rem;
    width: 2.8rem; height: 2.4rem; transform: none; cursor: pointer;
  }
  .nav__toggle span,
  .nav__toggle span::before,
  .nav__toggle span::after {
    content: ''; position: absolute; left: 0; width: 2.8rem; height: 0.2rem; background: #fff;
  }
  .nav__toggle span { top: 1.1rem; }
  .nav__toggle span::before { top: -0.8rem; }
  .nav__toggle span::after  { top:  0.8rem; }

  .nav__menu {
    position: absolute; left: 0; top: 7.8rem; width: 100%;
    display: none; flex-direction: column; gap: 1.6rem; padding: 2rem 2.2rem;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(0.8rem); -webkit-backdrop-filter: blur(0.8rem);
    transform: translateX(var(--gutter));
  }
  .nav__menu[data-open='true'] { display: flex; }
  .nav__menu a { position: static; top: auto; left: auto; font-size: 1.7rem; }

  /* ---------- 1 · hero (0 → 864) ---------- */
  .hero {
    height: 86.4rem;
    background-image: url('img/hero-m.jpg'), url('img/hero-m-edge-l.png'), url('img/hero-m-edge-r.png');
    background-image: -webkit-image-set(url('img/hero-m.jpg') 1x, url('img/hero-m@2x.jpg') 2x, url('img/hero-m@3x.jpg') 3x),
                      url('img/hero-m-edge-l.png'), url('img/hero-m-edge-r.png');
    background-image: image-set(url('img/hero-m.jpg') 1x, url('img/hero-m@2x.jpg') 2x, url('img/hero-m@3x.jpg') 3x),
                      url('img/hero-m-edge-l.png'), url('img/hero-m-edge-r.png');
  }
  .hero__mark   { left: 16.69rem; top: 10.3rem; width: 6.18rem; }
  .hero__lockup { left: 10.9rem;  top: 15.55rem; width: 17.75rem; }
  .hero__cta {
    left: 6.7rem; top: 78.7rem; width: 26rem; gap: 0.6rem;
    font-size: 1.25rem; letter-spacing: -0.025rem;
  }
  .hero__cta img { width: 1.75rem; }
  .hero__rail, .hero__federations, .hero__supporting { display: none; }

  /* ---------- 2 · the project (blue, 864 → 1712) ---------- */
  .project { height: 84.8rem; }
  .project__flags-a   { left: 0.9rem; top: 0.01rem;  width: 37.7rem; }
  .project__flags-b   { left: 0.9rem; top: 81.01rem; width: 37.7rem; }
  .project__lede      { left: 3.9rem; top: 10.3rem;  width: 31.6rem; }
  .project__pill      { left: 13rem;  top: 22rem;    width: 13.45rem; }
  .project__statement { left: 3.7rem; top: 29.1rem;  width: 32.1rem; }
  .project__closing   { left: 4rem;   top: 58rem;    width: 31.2rem; text-align: center; }

  /* ---------- 3 · media strip (black, 1712 → 2146) ---------- */
  .media { height: 43.4rem; }
  .media__carousel { left: 0; top: 7.8rem; width: 39.3rem; }
  .media__scroller { gap: 1.6rem; padding: 0 3.1rem; scroll-padding-inline-start: 3.1rem; }
  .media__arrow { width: 3.6rem; height: 3.6rem; margin-top: -1.8rem; }
  .media__arrow svg { width: 1.7rem; height: 1.7rem; }
  .media__arrow--prev { left: 0.8rem; }
  .media__arrow--next { right: 0.8rem; }
  .media__item { height: 23.5rem; }
  .media__item--wide { width: 41.6rem; }
  .media__item--tall { width: 19rem; }
  .media__social { left: 3.3rem; top: 2.5rem; gap: 0; width: 33.05rem; justify-content: space-between; }
  .media__social svg { width: 2.55rem; height: 2.55rem; }
  .media__link { left: 6.4rem; top: 37rem; font-size: 2.2rem; letter-spacing: -0.044rem; }

  /* ---------- 4 · agenda 2030 (photo, 2146 → 3598) ---------- */
  .agenda {
    height: 145.2rem; background-color: #a6adb5;
    background-image: url('img/agenda-m.jpg'), url('img/agenda-m-edge-l.png'), url('img/agenda-m-edge-r.png');
  }
  .agenda__lines   { left: -22rem; top: 0rem; width: 75.45rem; }
  .agenda__heading { left: 3rem;   top: 6.3rem;  width: 33.3rem; color: var(--ink); }
  .agenda__jersey  { left: 3.9rem; top: 19.1rem; width: 31.1rem; }
  .agenda__stack   { width: 33.3rem; margin: 63.4rem 0 0 3rem; }
  .agenda__pull    { width: 100%;    color: var(--ink); }
  .agenda__byline  { width: 33.3rem; margin: 1.64rem 0 0 0;      color: var(--ink); }
  .agenda__prose   { width: 33.8rem; margin: 5.63rem 0 0 -0.2rem; color: var(--ink); line-height: 1.214; }

  /* ---------- 5 · santini (black, 3607 → 4760) ---------- */
  /* height stays auto here too: the English quote alone needed 1.58rem more than
     the frame allowed, and the French prose 5.96rem more than the band held */
  .santini__heading { left: 3rem; top: 5.8rem; width: 33.3rem; }
  .santini__stack   { width: 33.3rem; margin: 15.7rem 0 5.93rem 3rem; }
  .santini__pull    { width: 100%; }
  .santini__byline  { width: 33.3rem; margin: 1.64rem 0 0 0; }
  /* in the mobile frame the atelier photo sits between byline and prose, so here
     it stays in the flow instead of going absolute */
  .santini__atelier { position: static; width: 33.1rem; margin: 7.23rem 0 0 0.1rem; }
  .santini__badge   { display: none; }
  .santini__cols {
    width: 33.8rem; margin: 6.5rem 0 0 -0.2rem;
    display: block;
  }
  .santini__cols > .prose + .prose { margin-top: 1.7rem; }

  /* ---------- 6 · in the words of … (black, 4760 → 5606) ---------- */
  .voices { height: 77.2rem; }   /* colonne la plus longue (FR) 71.16rem + le mou d origine 6.03rem */   /* grown for the real quote: 7 lines in French vs 3 in the placeholder */
  .voices__photo   { left: 3.1rem;  top: 0.34rem; width: 33.1rem; }
  .voices__rail    { left: 16.8rem; top: 36.4rem; width: 5.45rem; }
  .voices__heading { left: 3rem;    top: 39.9rem; width: 33.3rem; }
  /* same single column, with the mobile frame's own gaps */
  .voices__quotes { left: 5.7rem; top: 51.6rem; width: 28.1rem; }
  .voices__slot .pull { font-size: 1.7rem; }
  .voices__slot .byline { margin-top: 3.97rem; }
  .voices__slot + .voices__slot { margin-top: 5.03rem; }

  /* ---------- 7 · jersey wall (5615 → 6298) ---------- */
  .wall { height: 68.3rem; background: #e9eaea; }
  .wall__carousel { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  /* 68.3rem x the 366:583 tile aspect — keeps the framing uncropped, so the rail
     joins exactly between contiguous tiles. One kit fills the viewport, as the
     mobile frame intends (its panorama allots 471px per kit at 393px wide). */
  .wall__item { flex: 0 0 42.88rem; }
  .wall__arrow { width: 4.2rem; height: 4.2rem; margin-top: -2.1rem; }
  .wall__arrow svg { width: 1.9rem; height: 1.9rem; }
  .wall__arrow--prev { left: 1rem; }
  .wall__arrow--next { right: 1rem; }
  .wall__marquee { left: 1.4rem; top: 3.94rem;  width: 36.65rem; }
  .wall__link {
    left: 5.5rem; top: 56.3rem; width: 28.4rem; font-size: 1.3rem;
    display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
    text-align: center; color: var(--ink);
  }
  /* the desktop .fr override right-aligns the longer French label at 120rem; it
     carries two classes, so it would beat the single-class rule above and throw
     the button off a 39.3rem canvas. Reset it at the same specificity. */
  .fr .wall__link { left: 5.5rem; }

  /* ---------- 8 · participating national federations (6307 -> 6858) ---------- */
  .federations { height: 55.1rem; }
  .federations__heading { left: 3.5rem; top: 5.1rem;  width: 32.2rem; }
  /* measured on the mobile reference: 16 lines, 24px pitch, 13px caps, and the
     names are underlined here where the desktop list is not */
  .federations__names {
    left: 3.2rem; top: 13.2rem; width: 33.3rem;
    font-size: 1.86rem; line-height: 1.29; letter-spacing: -0.037rem;
  }
  .federations__names .fed { text-decoration: underline; text-underline-offset: 0.25rem; }
  .kit__close { top: 1.6rem; right: 1.6rem; width: 4rem; height: 4rem; }
  /* the 70vh cap belongs on the window, not the image: on the image it fought
     height:auto and squashed the kit to a 1.106 ratio instead of 0.631 */
  .kit__window { width: min(78vw, 45.8vh, 44rem); }
  .kit__name { font-size: 1.5rem; }

  .fr .federations__list--en-m { display: none; }
  .fr .federations__list--fr-m { display: block; }

  /* ---------- 9 · vote (black, 6867 → 7460) ---------- */
  /* On a mobile user agent Fastory renders no iframe: it drops in a cover that
     opens the story full screen on tap. That cover keeps a ~1.584 ratio, so its
     height is constant in rem — 33.1 / 1.584 = 20.9rem — unlike the desktop
     iframe's fixed 800px. */
  /* 27.3rem of content (button bottom) plus the 9.6rem tail the tile layout had. */
  .vote { height: 36.9rem; }
  .vote__heading { left: 3rem;   top: 6.8rem;  width: 33.3rem; }
  .vote__prose   { left: 3rem;   top: 12.7rem; width: 33.3rem; font-size: 1.4rem; letter-spacing: -0.028rem; }
  /* The embed stays in the DOM - desktop shares the one script - but its tile is not
     shown here; .vote__play takes the slot the tile used to occupy. */
  .vote__frame   { display: none; }
  .vote__play {
    left: 3rem; top: 21.7rem; width: 33.3rem; height: 5.6rem;
    display: flex; align-items: center; justify-content: center; gap: 1.1rem;
    background: var(--bar-red); color: var(--paper); border-radius: 0.4rem;
    font-family: var(--util); font-weight: 600; font-size: 1.6rem;
    letter-spacing: -0.032rem; text-transform: uppercase; text-decoration: none;
    transition: opacity 0.2s;
  }
  .vote__play:active { opacity: 0.75; }
  /* arrow-right.svg has fill="black" baked in, invisible here, so the glyph is inline
     and takes currentColor - the same approach as .wall__arrow and .kit__close. */
  .vote__play svg { width: 1.6rem; height: 1.8rem; fill: currentColor; }

  /* ---------- 10 · footer (black, 7460 → 7805) ---------- */
  .footer { height: 34.5rem; }
  .footer__links {
    left: 6.9rem; top: 3.4rem; gap: 2.6rem;
    font-size: 1.6rem; letter-spacing: -0.032rem;
  }
  .footer__social  { left: 6.8rem; top: 10.4rem; width: 24.55rem; }
  .footer__partner { left: 6.8rem; top: 19.4rem; width: 24.9rem; }
  .footer__legal   { left: 0; top: 28rem; width: 39.3rem; font-size: 1.1rem; }
}

/* Freeze the canvas above 480px — the Figma file has no tablet design,
   so the mobile composition is held at its largest comfortable size and
   centred, with backgrounds running edge to edge. */
@media (min-width: 481px) and (max-width: 1023px) {
  html { font-size: 12.214px; }
}