/* =============================================================
   Desktop — 1024px and up.
   NOT BUILT YET, and the page says so instead of pretending.

   Filter ①: every product declares where it stops.
   So the wide screen gets an honest notice and the mobile layout,
   held to a readable column, rather than a stretched improvisation.
   ============================================================= */
@media (min-width: 1024px) {

  /* ---- The notice ---- */
  .desktop-banner {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 2rem;
    text-align: left;
  }
  .desktop-banner__text { max-width: 46rem; font-size: .95rem; }
  .desktop-banner__text strong { margin-bottom: .15rem; }
  .desktop-banner__close:hover { opacity: .65; }

  /* When the notice is showing, push the sticky header below it */
  body:not(.banner-dismissed) .site-header { top: var(--banner-h, 4.25rem); }
  body:not(.banner-dismissed) { padding-top: var(--banner-h, 4.25rem); }

  /* ---- Hold the mobile composition in a centred column ---- */
  .site-header,
  .hero,
  .links,
  .about,
  .site-footer {
    max-width: 34rem;
    margin-inline: auto;
  }

  /* The ground goes a step darker so the column reads as the
     phone it was drawn for, rather than a stretched page. */
  body { background-color: var(--pine-900); }

  .hero,
  .links        { background-color: var(--pine); }
  .site-header  { background-color: var(--pine-700); }

  .site-nav { max-width: 34rem; margin-inline: auto; }

  /* ---- Slightly calmer scale than tablet: nothing is set in a size
          that cannot be spoken quietly ---- */
  .hero__name .sig { width: min(100%, 19rem); }
  .portrait { width: min(100%, 28rem); }

  /* Pointer devices get the hover affordances the touch layout doesn't need */
  .link-chip { transition-duration: .25s; }

  /* ---- Language toggle stays reachable, clear of the column ---- */
  .lang-toggle {
    right: 2.5rem;
    bottom: 2.5rem;
  }
}

/* Very wide: keep the column honest, do not let it drift */
@media (min-width: 1440px) {
  .site-header,
  .hero,
  .links,
  .about,
  .site-footer,
  .site-nav { max-width: 36rem; }
}