/* The large-canvas system (P01b, 6 Oct 2026, after David's review of P01).
   Up to 1920 px nothing here applies, so phones, laptops and 1920 keep the approved P01 composition exactly.
   Above 1920 px every role grows continuously with the screen until 3840 px, each on its own ramp, so the P4
   relationship between type, object and metadata holds without zooming the page as a whole:
     text (root size)      17 px at 1920 to 28.8 px at 3840: labels 11 to 19 px, intro copy 14 to 24 px
     headline              135 to 290 px (7.5 percent of the width; headline to plate stays near its 1440 ratio)
     project block title   34 to 66 px (a quarter of the headline, as at 1920)
     artefact plate        448 to about 945 px (fitted to its stage; capped at 1000 px so its 1080 px layers are
                           never shown larger than their pixels)
     loupe                 340 to 628 px
     margins, gutters      40 to 115 px, 24 to 48 px (about 3 percent margin, as at 1440)
     nav band, hero and section spacing grow with them.
   The page is no longer held at 3000 px (that cap made 3840 read as a 1440 page floating in paper); it now stops at
   3840 px, so only screens wider than 4K get paper either side.
   --x is the ramp: 0 px at 1920, 1920 px at 3840, constant beyond. */

@media (min-width: 1921px) {
  :root {
    --x: clamp(0px, 100vw - 1920px, 1920px);
    --page-max: 3840px;
    --m: calc((100vw - var(--page)) / 2 + 40.32px + var(--x) * 0.039);
    --g: calc(24px + var(--x) * 0.0125);
    --nav-h: calc(88px + var(--x) * 0.0333);
    --fs-hero: min(8.2vw, calc(7.375rem * 1.08 + var(--x) * 0.0316));
    --pw-max: min(calc(460px + var(--x) * 0.28), 1000px);
    --loupe-max: calc(340px + var(--x) * 0.15);
    --hero-pad-b: calc(64px + var(--x) * 0.029);
  }
  /* rem is a percentage plus the ramp: a reader's own text size still scales the percentage part */
  html { font-size: calc(106.25% + var(--x) * 0.006146); }

  /* the first screen's spacing grows with its type */
  .hero { padding-bottom: var(--hero-pad-b); }
  .hero .rule-h.bottom { bottom: calc(40px + var(--x) * 0.0208); }
  .hero-title { margin-top: calc(24px + var(--x) * 0.0125); }
  .intro { padding-top: calc(40px + var(--x) * 0.0208); }
  .entry { margin-bottom: calc(10px + var(--x) * 0.0052); max-width: calc(20.625rem * 1.08 + var(--x) * 0.063); }
  .entry .t { font-size: calc(1.875rem * 1.08 + var(--x) * 0.0057); }

  /* "Provly, opened." stands exactly where the headline stood */
  .opened .display { bottom: var(--hero-pad-b); }
  .opened .hair { bottom: calc(var(--hero-pad-b) + var(--fs-hero) * 1.05 + 26px + var(--x) * 0.0135); }
  .opened .note { bottom: calc(var(--hero-pad-b) + 86px + var(--x) * 0.041); }
  .opened .clock { bottom: calc(var(--hero-pad-b) - 10px - var(--x) * 0.0052); }

  /* the artefact's depth scales with the artefact: the prototype's 1700 px perspective is tuned for a plate of about
     448 px (its 1920 size); with a fixed perspective a 950 px stack would bulge toward the viewer and climb off the
     top of the screen. Same ratio as at 1920, so the object reads exactly as it does there, only larger */
  .art-world { perspective: calc(var(--pw) * 3.794); }

  /* the sections below keep the same rhythm */
  .index { padding-top: calc(120px + var(--x) * 0.0625); padding-bottom: calc(120px + var(--x) * 0.0625); }
  .profile { padding-top: calc(90px + var(--x) * 0.047); padding-bottom: calc(120px + var(--x) * 0.0625); }
  .close { padding-top: calc(120px + var(--x) * 0.0625); padding-bottom: calc(136px + var(--x) * 0.07); }
  .close-actions { margin-top: calc(4.5rem + var(--x) * 0.02); }
  .foot { padding-top: calc(28px + var(--x) * 0.015); padding-bottom: calc(40px + var(--x) * 0.02); }
  .idx-item dl { margin: calc(22px + var(--x) * 0.0115) 0 calc(28px + var(--x) * 0.0146); }
  .idx-item dt { margin-top: calc(14px + var(--x) * 0.0073); }
  /* (P02: the featured poster now has a 3840 px source from the 4K master, so its 1920 px cap is gone) */

  /* P02, the case study: the same ramps for its rhythm. Reading text keeps --measure (about 68 characters). */
  .c-open { padding-top: calc(86px + var(--x) * 0.045); }
  .c-hair { margin-top: calc(76px + var(--x) * 0.04); }
  .c-meta { padding-top: calc(34px + var(--x) * 0.018); padding-bottom: calc(40px + var(--x) * 0.02); }
  .c-meta .v { margin-top: calc(8px + var(--x) * 0.004); }
  .c-sec { padding-top: calc(110px + var(--x) * 0.06); padding-bottom: calc(40px + var(--x) * 0.02); }
  .c-sec h2 { margin: calc(14px + var(--x) * 0.008) 0 calc(20px + var(--x) * 0.012); }
  .c-sec .body + .body { margin-top: calc(14px + var(--x) * 0.007); }
  .c-sec figcaption, .c-sec .cap, .evidence figcaption { margin-top: calc(16px + var(--x) * 0.008); }
  .pull { margin-top: calc(90px + var(--x) * 0.045); }
  .phone-fig:nth-child(2) { margin-top: calc(90px + var(--x) * 0.045); }
  .phone-fig:nth-child(3) { margin-top: calc(44px + var(--x) * 0.022); }
  .phone-fig figcaption { margin-top: calc(20px + var(--x) * 0.01); }
  .s-craft .play-open { margin-top: calc(26px + var(--x) * 0.013); }
  .transcript { margin-top: calc(18px + var(--x) * 0.009); }
  .evidence { padding-top: calc(120px + var(--x) * 0.06); }
  .ev-list > div { padding: calc(18px + var(--x) * 0.009) 0 calc(20px + var(--x) * 0.01); }
  .c-end { padding-top: calc(140px + var(--x) * 0.07); padding-bottom: calc(120px + var(--x) * 0.06); }
  /* figures never shown larger than their sources (2x cuts from the 4K master): the specimen bed stops where its
     smallest piece (the record, 748 px) would be stretched, and the pack crops at their 860 px width; the app phone
     beside them grows to keep the pair's 1440 balance */
  .bed, .bed + .cap { width: min(100%, 1900px); justify-self: end; }
  .evidence .film-side { max-width: 860px; }
  .evidence .app-side .phone { max-width: calc(300px + var(--x) * 0.135); }

  /* P03, Before the interface: the chapter's spacing on the same ramps */
  .art { padding-top: calc(120px + var(--x) * 0.0625); padding-bottom: calc(120px + var(--x) * 0.0625); }
  .art-title { margin-bottom: calc(20px + var(--x) * 0.012); }
  .art-plate figcaption { margin-top: calc(14px + var(--x) * 0.007); }
  .art-break { margin: calc(72px + var(--x) * 0.036) 0 calc(44px + var(--x) * 0.022); gap: calc(18px + var(--x) * 0.009); }
  .art-motion__toggle { left: calc(14px + var(--x) * 0.007); bottom: calc(14px + var(--x) * 0.007); min-height: calc(44px + var(--x) * 0.012); padding: 0 calc(18px + var(--x) * 0.009); }

  /* the film room's chrome grows with the screen it sits on */
  .room .bar { height: calc(64px + var(--x) * 0.02); }
  .room .length { top: calc(84px + var(--x) * 0.03); }
  .room .foot { padding-top: calc(70px + var(--x) * 0.035); padding-bottom: calc(26px + var(--x) * 0.013); }
  .scrub, .scrub button { height: calc(28px + var(--x) * 0.008); }
  .scrub button::before { top: calc(13.5px + var(--x) * 0.004); }
  .scrub button i { top: calc(13px + var(--x) * 0.004); }
  .pill { min-height: calc(44px + var(--x) * 0.012); padding: 0 calc(22px + var(--x) * 0.01); }
  .room.is-cinema .cc { bottom: calc(132px + var(--x) * 0.06); }
}