/*
 * CROSS-SEC — the phone layout.
 *
 * The desktop design is a wide cinematic void with a terminal panel floating in
 * it. Narrowed to a handset that stops working, and the three faults are
 * measurable rather than matters of taste:
 *
 *   1. The navigation links were 25px tall. A finger needs 44px — every
 *      platform guideline says so — and below that people miss and try again.
 *      This was the real defect, and no amount of resizing type fixed it.
 *   2. The headline rendered at 16.8px, smaller than ordinary body text, on a
 *      screen where it is the only thing being said.
 *   3. The small print sits at 50% opacity. On a laptop indoors that reads as
 *      restraint; on a phone in daylight it reads as nothing at all.
 *
 * So: fingers first, then hierarchy, then contrast. Everything is confined to
 * phone widths — the desktop layout is untouched — and it is an overlay rather
 * than a rebuild because the deployed site is a built bundle with no source.
 */

@media (max-width: 767px) {
  /* ----------------------------------------------------------- top bar --- */
  #root header {
    padding: 1.1rem 1.25rem 0;
    gap: 0.7rem;
  }

  #root header > div:first-child {
    margin-bottom: 0;
  }

  #root header img {
    height: 1.85rem;
  }

  #root header nav {
    width: 100%;
    gap: 0;
    font-size: 11px;
    letter-spacing: 0.06em;
    /* A row of real targets, spread across the width and separated from the
       screen below by the same hairline the desktop uses. */
    justify-content: space-between;
    flex-wrap: nowrap;
    border-top: 1px solid rgb(0 0 0 / 0.08);
    margin-top: 0.35rem;
  }

  #root header nav > div {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  /* 44px of height, bought with padding rather than type size. */
  #root header nav button,
  #root header nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
    padding: 0 0.15rem;
  }

  /* --------------------------------------------------------- the panel --- */
  #root main > div {
    padding: 1.25rem 1.15rem;
  }

  /*
   * Sized by what is in it. A minimum height only produced an empty bordered
   * rectangle, and an empty box with a visible border reads as a page that
   * failed to load rather than one that is waiting.
   */
  #root main [class*='corner-borders'] {
    width: 100%;
    padding: 2.4rem 1.4rem;
  }

  #root main [class*='tracking-[0.25em]'] {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: 0.1em;
  }

  #root main [class*='my-8'] {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #root main [class*='leading-loose'] {
    font-size: 12px;
    letter-spacing: 0.13em;
    line-height: 1.9;
    opacity: 1;
    color: rgb(38 34 28 / 0.72);
  }

  /* ------------------------------------------------------------ footer --- */
  #root footer {
    padding: 1rem 1.25rem 1.1rem;
    gap: 0.65rem;
  }

  #root footer [class*='max-w-md'] {
    font-size: 10px;
    letter-spacing: 0.09em;
    line-height: 1.8;
    color: rgb(38 34 28 / 0.68);
  }

  /* The client strip is decoration: quiet, but whole rather than sliced by a
     container shorter than the logos inside it. */
  #root footer [class*='h-14'] {
    height: 2.3rem;
  }

  #root footer img {
    height: 1.6rem;
  }
}

/*
 * Short handsets (SE and friends). The layout is 100dvh and cannot scroll, so
 * anything that grows here pushes the footer off the bottom instead of moving
 * it down.
 */
@media (max-width: 767px) and (max-height: 720px) {
  #root header img {
    height: 1.6rem;
  }

  #root header nav button,
  #root header nav a {
    min-height: 40px;
  }

  #root main [class*='corner-borders'] {
    padding: 1.6rem 1.25rem;
  }

  #root main [class*='tracking-[0.25em]'] {
    font-size: 1.4rem;
  }

  #root main [class*='my-8'] {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Narrow handsets: the four labels still share one row, so they give up
   tracking before they give up being on it. */
@media (max-width: 380px) {
  #root header nav {
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  #root main [class*='tracking-[0.25em]'] {
    font-size: 1.5rem;
    letter-spacing: 0.06em;
  }
}