/* =========================================================
   NOIR PUR — responsive.css v1.1
   Desktop keeps the same single-column composition as mobile.
   Artwork and manifesto always share the same width and left edge.
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .site-shell {
    width: min(100%, var(--site-max-desktop));
    min-height: 100svh;
    padding:
      max(28px, env(safe-area-inset-top))
      clamp(28px, 4.5vw, 84px)
      max(30px, env(safe-area-inset-bottom));
  }

  .site-header {
    min-height: 50px;
  }

  .wordmark {
    font-size: .92rem;
  }

  .hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding:
      clamp(52px, 8vh, 96px)
      0
      clamp(54px, 8vh, 92px);
  }

  .hero > .art-frame,
  .hero > .intro {
    /*
      Previous artwork max height: 860px.
      Mme.D ratio: 1520 / 2048 = 0.7421875.
      Therefore the text column follows the real artwork width.
    */
    width: min(53.4375vw, 638.28125px);
    max-width: 100%;
    margin-inline: auto;
    justify-self: center;
  }

  .art-frame {
    aspect-ratio: 1520 / 2048;
  }

  .intro {
    gap: 0;
  }

  .intro h1,
  .intro .statement-cn,
  .intro .statement-fr,
  .intro .statement-en,
  .intro .statement-ko,
  .intro .statement-ja,
  .intro .actions {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  h1 {
    font-size: 2.4rem;
    line-height: .95;
    margin-top: 0;
    margin-bottom: 18px;
  }

  .statement-cn {
    font-size: 1.12rem;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 4px;
  }

  .statement-fr {
    font-size: 1.12rem;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 6px;
  }

  .statement-en,
  .statement-ko,
  .statement-ja {
    font-size: 1.02rem;
    line-height: 1.45;
    margin-top: 0;
    margin-bottom: 6px;
  }

  .statement-ja {
    margin-bottom: 24px;
  }

  .actions {
    margin-top: 0;
  }

  .site-footer {
    gap: 24px;
    padding-bottom: 14px;
    font-size: .72rem;
    line-height: 1.35;
    letter-spacing: .12em;
  }

  .vertical-mark {
    letter-spacing: .16em;
  }
}

@media (hover: hover) and (pointer: fine) {
  .site-shell > .hero {
    align-content: start;
    padding-top: 0.3cm;
  }
}