/* ===========================================
   ULTRAWIDE (>1920px)
   - Lifts the canvas-max-width letterbox: page uses full viewport width
   - Two-row header: single-line wide logo on top, controls below
   - Same controls / same behavior — only layout differs
   =========================================== */
@media (min-width: 1921px) {
  /* 1) Unlock max-width on every container that was clamped to --canvas-max-width */
  #app,
  .kpo-banner-strip,
  .header-inner,
  #timeline,
  #tuning-container,
  .about-inner,
  body.archive-mode .archive-image,
  body.archive-mode.archive-missing .archive-missing-message {
    max-width: none;
  }

  /* aspect-ratio + width: 100% would be broken by the 1080px max-height clamp at >1920px,
     so let height grow proportionally with width on the timeline/archive surfaces. */
  #timeline,
  body.archive-mode .archive-image,
  body.archive-mode.archive-missing .archive-missing-message {
    max-height: none;
  }

  /* 2) Header — two rows. Heights scale fluidly between threshold and 4K (3840px).
     Figma reference: header 736px tall on a 4096-wide frame (~18% of width). */
  #header {
    height: clamp(180px, 18vw, 736px);
    min-height: clamp(180px, 18vw, 736px);
  }

  .header-inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: clamp(16px, 1.6vw, 60px);
    padding: clamp(16px, 1.5vw, 40px) clamp(24px, 2vw, 80px);
  }

  /* Row 1: logo, full-width, centered */
  .header-left {
    width: 100%;
    justify-content: center;
  }

  .header-logo { display: none; }

  .header-logo-wide {
    display: block;
    width: 100%;
    height: auto;
    /* Cap so the SVG never grows past its natural rendering quality. */
    max-height: clamp(120px, 8.6vw, 354px);
  }

  /* Row 2: existing pill — same controls, same behavior.
     The pill row spans edge-to-edge under the logo, but is inset
     symmetrically by a small amount on both sides. This slight
     narrowing optically compensates for the wide logo's outermost
     letterforms (the round "G" on the left and the calligraphic
     italic "a" tail on the right): aligning the inner controls
     to the literal SVG bounding box would look "leaning right"
     because the "a" tail extends further than its visual stem.
     Inset starts at ~17px around the threshold and scales up to
     ~36px at 4K — tweak after visual review on hardware. */
  .header-outer-pill {
    width: 100%;
    padding-inline: clamp(15px, 0.9vw, 36px);
  }
}