/* One desktop coordinate system preserves authored alignment and media offsets.
   Body type keeps its reference size and wraps inside those same columns.
   Header/footer remain attached to the real window; phones keep readable flow. */
@media (min-width: 761px) {
  html { scrollbar-gutter: stable; }
  :root { --canvas-scale: 1; --canvas-width: 1905px; }

  :where(.project-content, .custom-text-box-tail, .inserted-image-tail,
      .about-page-hero, .about-layout, .archive-heading, .archive-collection,
      .hero-center, #intro .intro-grid, .works-section > .container, .outro-grid) {
    --layout-vw: 19.2px;
    --layout-vh: 10.8px;
    --layout-svh: 10.8px;
    --native-video-parent-zoom: var(--canvas-scale);
    max-width: none;
    zoom: var(--canvas-scale);
  }

  body[data-page="project"] :is(.project-content, .custom-text-box-tail, .inserted-image-tail) {
    --native-video-parent-zoom: calc(.8907675 * var(--canvas-scale));
    width: 1536px;
    max-width: none;
    zoom: calc(.8907675 * var(--canvas-scale));
  }
  /* Chromium paints the native timeline fill using the inherited CSS zoom
     twice. Cancel zoom on the video itself; its percentage dimensions still
     fill the same scaled container. Also keep this cancellation in fullscreen,
     where the control tree continues to inherit its original ancestor zoom. */
  video[controls] {
    zoom: calc(1 / var(--native-video-parent-zoom, 1));
  }
  .project-content {
    --case-gap: 28.8px;
    --case-title-size: 69.12px;
    --case-heading-size: 38.4px;
    --case-body-size: 21.504px;
    --case-caption-size: 14px;
    --case-label-size: 12px;
    --case-section-space: 57.6px;
  }
  .project-content .project-head { padding-block: 76.8px 48px; }
  .case-study .case-head {
    grid-template-columns: minmax(0, 1.8fr) minmax(280px, .7fr);
    gap: 57.6px;
  }
  .case-study .case-credits { grid-template-columns: none; gap: 24px; padding-top: 38px; }
  .case-study .case-credit { grid-template-columns: 80px minmax(0, 1fr); gap: 20px; }
  .case-credit dt { font-size: 13.44px; }
  .case-credit dd { font-size: 15.744px; }
  .case-study[data-case-id="project-04"] .case-media[data-case-size="quarter"] {
    --case-base-width: min(calc((100% - 3 * var(--case-gap)) / 4), 286.666667px, 420px);
  }
  .case-study[data-case-id="project-04"] .case-media[data-case-size="portrait"] {
    --case-base-width: min(100%, 483.75px, 560px);
  }
  .case-study .case-media[data-case-size="inset"][data-case-portrait] {
    --case-base-width: min(100%, calc(860px * var(--case-native-ratio)), 900px);
  }

  body[data-page="about"] :is(.about-page-hero, .about-layout) { width: 1600px; margin-inline: auto; }
  .about-content .about-layout { gap: 96px; }
  .archive-heading.page-hero, .archive-collection { width: calc(var(--canvas-width) - 153.6px); margin-inline: auto; }
  /* Avoid native button border rounding moving the last category by several
     pixels at small zoom factors. Keep the same outer dimensions and outline. */
  .archive-filters button { border: 0; padding: 10px 22px; box-shadow: inset 0 0 0 1px var(--filter-outline, #a3a69d); }
  .archive-filters button[aria-pressed="true"], .archive-filters button:hover:not([aria-pressed="true"]) { --filter-outline: var(--ink); }

  body[data-page="home"] .hero-center.container {
    --hero-viewport-height: 1080px;
    width: calc(var(--canvas-width) - 153.6px);
    margin-inline: auto;
  }
  body[data-page="home"] #intro .intro-grid { width: 1040px; max-width: none; }
  body[data-page="home"] :is(#selected-work > .container, .outro-grid) { width: 1600px; max-width: none; }
  .home-fluid #selected-work.section-pad { padding-top: calc(var(--header-height) + 24px); }
  #intro .intro-content > .intro-lead { margin-top: 20px; }
  #intro .intro-content > .muted-copy { margin-top: 16px; }
  #intro .intro-content > .greeting-more { margin-top: var(--greeting-link-gap); }

  body:not([data-page="project"]) :is(.custom-text-box-tail, .inserted-image-tail) { width: 1200px; max-width: none; margin-inline: auto; }
}