/* Shared, portable width contract. Background fields remain full viewport. */
:root {
  --ac-layout-max: 1280px;
  --ac-reading-max: 680px;
}

/* In-flight Index templates inherit the same frame as the authored pages. */
body[data-ac-width="index-entry"] .index-entry-shell {
  width: 100%;
  max-width: var(--ac-layout-max);
  margin-inline: auto;
}
body[data-ac-width="index-entry"] main#main .prose {
  width: 100%;
  max-width: var(--ac-reading-max);
}
body[data-ac-width="index-entry"] .index-entry-top {
  position: relative;
  isolation: isolate;
}
body[data-ac-width="index-entry"] .index-entry-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: inherit;
  box-shadow: 0 0 0 100vmax var(--page-bg, #F2F2ED);
  clip-path: inset(0 -100vmax);
}

@media (min-width: 1281px) {
  body[data-ac-width="index-landing"] :is(.wrap, .site-header) {
    width: 89.6%;
    max-width: calc(var(--ac-layout-max) * .896);
    margin-inline: auto;
  }
  body[data-ac-width="index-landing"] .site-hero {
    width: 100%;
    max-width: var(--ac-layout-max);
    margin-inline: auto;
    padding-inline: calc(var(--ac-layout-max) * .052);
  }
  body[data-ac-width="index-landing"] .site-hero h1 { font-size: 84.48px; }
  body[data-ac-width="index-landing"] :is(.site-hero .intro, .ix-search input) { font-size: 25.6px; }
  body[data-ac-width="index-landing"] .ix-entry-title { font-size: 22.4px; }
  body[data-ac-width="index-landing"] .ix-type-image-title { font-size: 26.24px; }
  body[data-ac-width="index-landing"] .ix-workspace {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 64px;
  }
  body[data-ac-width="index-landing"] .ix-results[data-view="images"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-ac-width="index-landing"] .site-footer {
    width: 93.4%;
    max-width: calc(var(--ac-layout-max) * .934);
    margin-inline: auto;
    padding-inline: calc(var(--ac-layout-max) * .04);
  }
  body[data-ac-width] .ix-global-navigation :is(.ix-navigation-top, .ix-navigation-columns) {
    max-width: calc(var(--ac-layout-max) * .896);
    margin-inline: auto;
  }
  body[data-ac-width] .ix-global-navigation .ix-navigation-services > span { font-size: 38.4px; }
  body[data-ac-width] .ix-global-navigation .ix-navigation-services a { font-size: 30.72px; }
  body[data-ac-width] .ix-global-navigation .ix-navigation-primary { font-size: 46.08px; }
  body[data-ac-width] .ix-global-navigation .ix-navigation-secondary { font-size: 25.6px; }
}

/* The general article template has a separate navigation/content grid. */
body[data-ac-width="generic"] > main#main .prose {
  width: 100%;
  max-width: var(--ac-reading-max);
}

@media (min-width: 1281px) {
  body[data-ac-width="generic"] .wrap,
  body[data-ac-width="generic"] .site-header {
    width: 89.6%;
    max-width: calc(var(--ac-layout-max) * .896);
    margin-left: auto;
    margin-right: auto;
  }

  body[data-ac-width="generic"] .site-hero,
  body[data-ac-width="generic"] .site-menu {
    width: 100%;
    max-width: var(--ac-layout-max);
    margin-inline: auto;
    padding-left: calc(var(--ac-layout-max) * .052);
    padding-right: calc(var(--ac-layout-max) * .052);
  }

  body[data-ac-width="generic"] .site-hero h1 {
    font-size: calc(var(--ac-layout-max) * .077);
  }

  body[data-ac-width="generic"] .site-hero .intro {
    font-size: calc(var(--ac-layout-max) * .022);
  }

  body[data-ac-width="generic"] .site-footer {
    width: 93.4%;
    max-width: calc(var(--ac-layout-max) * .934);
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--ac-layout-max) * .04);
    padding-right: calc(var(--ac-layout-max) * .04);
  }
}

/* Reference documents already use their tighter native 840px text frame. */


/*
 * Pillar width proposal. Load after the authored pillar CSS.
 * The body tag is supplied by the publisher; no markup rewrite is required.
 */
body[data-ac-width="pillar"] :is(#ac-pillar-review, #ac-development-editorial) {
  width: 100%;
  max-width: var(--ac-layout-max, 1280px);
  margin-left: auto;
  margin-right: auto;
}

/* Preserve the authored <=1280px layouts and their container-query breakpoints. */
@media (min-width: 1281px) {
  /* This existing descendant clip would otherwise cut off the hero's bleed. */
  body[data-ac-width="pillar"] #ac-branding-review .br-page {
    overflow: visible;
  }

  /* These are plain, rectangular hero fields, not artwork or footer cards. */
  body[data-ac-width="pillar"] :is(#ac-pillar-stage, #ac-development-editorial) .pp-masthead {
    --ac-pillar-band-color: var(--pp-color, #283242);
  }

  body[data-ac-width="pillar"] #ac-branding-review .br-top {
    --ac-pillar-band-color: var(--br-brown, #51433a);
  }

  body[data-ac-width="pillar"] #ac-branding-review .br-image-opening .br-top {
    --ac-pillar-band-color: var(--br-paper, #f2f2ed);
  }

  body[data-ac-width="pillar"] #ac-digital-design-review .dd-top {
    --ac-pillar-band-color: var(--dd-navy, #283242);
  }

  /* Retain compatibility with the earlier development wrapper, if selected. */
  body[data-ac-width="pillar"] #ac-development-editorial .dv-top {
    --ac-pillar-band-color: #3b4c52;
  }

  body[data-ac-width="pillar"] :is(
    #ac-pillar-stage .pp-masthead,
    #ac-development-editorial .pp-masthead,
    #ac-development-editorial .dv-top,
    #ac-branding-review .br-top,
    #ac-digital-design-review .dd-top
  ) {
    position: relative;
    isolation: isolate;
  }

  body[data-ac-width="pillar"] :is(
    #ac-pillar-stage .pp-masthead,
    #ac-development-editorial .pp-masthead,
    #ac-development-editorial .dv-top,
    #ac-branding-review .br-top,
    #ac-digital-design-review .dd-top
  )::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: inherit;
    /* A painted shadow does not create the scrollbar overflow of 100vw boxes. */
    box-shadow: 0 0 0 100vmax var(--ac-pillar-band-color);
    /* Clip the paint to the band's height, on this noninteractive pseudo only. */
    clip-path: inset(0 -100vmax);
  }
}


/*
 * Artwork reading pages only: canonical Gallery/Index pages and their authored
 * review-page counterparts. The review hub, PDF exports and standalone Room
 * experience receive no family tag and are outside these selectors.
 * Shared defaults are fallbacks; the root stylesheet owns the two tokens.
 */
body[data-ac-width="artwork"],
body[data-ac-width="collection"] {
  background: #F2F2ED;
}

body[data-ac-width="artwork"] .ac-page {
  inline-size: 100%;
  max-inline-size: var(--ac-layout-max, 1280px);
  margin-inline: auto;
}

body[data-ac-width="artwork"] .ac-page > main .prose {
  max-inline-size: var(--ac-reading-max, 680px);
}

/*
 * Keep the identity field rectangular and edge-to-edge while its contents use
 * the bounded page container. Shadow is ink overflow, so this does not add a
 * 100vw scrollbar-width overflow. Only this background pseudo is clipped;
 * the page, menu, focus outlines and interactive artwork are never clipped.
 * Isolation keeps the negative background layer behind this header's content
 * without creating a containing block for fixed descendants.
 */
body[data-ac-width="artwork"] .ac-page > .page-top {
  position: relative;
  isolation: isolate;
}

body[data-ac-width="artwork"] .ac-page > .page-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: inherit;
  box-shadow: 0 0 0 100vmax var(--page-bg, #F2F2ED);
  clip-path: inset(0 -100vmax);
}

/*
 * The authored Gallery landing carries its identity background on .collection
 * itself. Bound its existing content measure through symmetric gutters rather
 * than narrowing that colored outer field or changing the grid/card geometry.
 * At/below the layout cap these resolve to the original 5.2% gutters.
 */
body[data-ac-width="collection"] > main.collection {
  padding-inline: max(
    5.2%,
    calc(
      (100% - var(--ac-layout-max, 1280px)) / 2
      + var(--ac-layout-max, 1280px) * 0.052
    )
  );
}

@media (max-width: 600px) {
  body[data-ac-width="collection"] > main.collection {
    padding-inline: 6%;
  }
}


/*
 * Native authored families: retain their 1280px composition on wider screens.
 * Load after every native family stylesheet. The shared layer owns the tokens.
 * These rules do not change native case reading (720px) or media (1120px) caps.
 */

body[data-ac-width="home"] #ac-home-hero-navigation,
body[data-ac-width="partnership"] #ac-partnership-page,
body[data-ac-width="case"] > :is(
  #ac-circular-case,
  #ac-rocket-case,
  #ac-conscious-case,
  #ac-irv-case-expanded,
  #ac-wayne-case,
  #ac-glcc-case,
  #ac-via-solano-case,
  #ac-pair-case,
  #ac-anamaria-case,
  #ac-ernest-case,
  #ac-barkful-case,
  #ac-hearst-case,
  #ac-data-migrators-case,
  #ac-fact-international-case,
  #ac-lisa-mechanic-case,
  #ac-wellness-house-case
) {
  width: 100%;
  max-width: var(--ac-layout-max, 1280px);
  margin-inline: auto;
}

/* Cap the native size containers too; do not replace their container-type. */
body[data-ac-width="home"] #ac-home-hero-navigation > .hn-variant,
body[data-ac-width="partnership"] #ac-partnership-page > .pp-page,
body[data-ac-width="case"] .cs-page {
  width: 100%;
  max-width: var(--ac-layout-max, 1280px);
  margin-inline: auto;
}

@media (min-width: 1281px) {
  body[data-ac-width="home"] #ac-home-hero-navigation .hn-page > .hn-header,
  body[data-ac-width="home"] #ac-home-hero-navigation .hn-statement .hn-hero-copy,
  body[data-ac-width="home"] #ac-home-hero-navigation #ac-home-gateways-review .ag-partnership {
    --ac-band-color: var(--hn-identity-bg);
  }
  body[data-ac-width="case"] .cs-masthead { --ac-band-color: var(--cs-identity); }
  body[data-ac-width="partnership"] #ac-partnership-page .pp-page > .hn-header,
  body[data-ac-width="partnership"] #ac-partnership-page .pp-hero {
    --ac-band-color: var(--visit-bg);
  }
  body[data-ac-width="case"] .hn-local-case-return {
    padding-left: calc((100% - var(--ac-layout-max)) / 2 + var(--ac-layout-max) * .06);
    padding-right: calc((100% - var(--ac-layout-max)) / 2 + var(--ac-layout-max) * .06);
  }

  /* Only rectangular identity fields extend beyond the centered frame.
     Rounded footer cards, reading fields and media keep their native geometry. */
  body[data-ac-width="home"] #ac-home-hero-navigation .hn-page > .hn-header,
  body[data-ac-width="home"] #ac-home-hero-navigation .hn-statement .hn-hero-copy,
  body[data-ac-width="home"] #ac-home-hero-navigation #ac-home-gateways-review .ag-partnership,
  body[data-ac-width="case"] .cs-masthead,
  body[data-ac-width="partnership"] #ac-partnership-page .pp-page > .hn-header,
  body[data-ac-width="partnership"] #ac-partnership-page .pp-hero {
    position: relative;
    isolation: isolate;
  }

  body[data-ac-width="home"] #ac-home-hero-navigation .hn-page > .hn-header::before,
  body[data-ac-width="home"] #ac-home-hero-navigation .hn-statement .hn-hero-copy::before,
  body[data-ac-width="home"] #ac-home-hero-navigation #ac-home-gateways-review .ag-partnership::before,
  body[data-ac-width="case"] .cs-masthead::before,
  body[data-ac-width="partnership"] #ac-partnership-page .pp-page > .hn-header::before,
  body[data-ac-width="partnership"] #ac-partnership-page .pp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 100vmax var(--ac-band-color);
    clip-path: inset(0 -100vmax);
  }

  /* Partnership uses vw in its native page/workflow styles. A capped wrapper
     alone would leave these growing with the viewport. Freeze their exact
     native 1280px values; <=1280px keeps every existing responsive rule. */
  body[data-ac-width="partnership"] #ac-partnership-page .pp-hero h1 {
    font-size: 87.68px; /* clamp(62px, 6.85vw, 112px) at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .pp-section h2 {
    font-size: 40.32px; /* clamp(35px, 3.15vw, 50px) at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .pp-copy .pp-intro {
    font-size: 25.6px; /* clamp(23px, 2vw, 28px) at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .pp-judgment {
    font-size: 37.12px; /* clamp(27px, 2.9vw, 41px) at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .pp-price {
    font-size: 55.04px; /* clamp(40px, 4.3vw, 60px) at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .wf-figure-title {
    font-size: 29.44px; /* clamp(22px, 2.3vw, 32px) at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .wf-rhythm-steps h4 {
    font-size: 21px; /* native clamp already reaches its maximum at 1280 */
  }

  body[data-ac-width="partnership"] #ac-partnership-page .wf-scenario-heading h3 {
    font-size: 36px; /* native clamp already reaches its maximum at 1280 */
  }

  /* Its native 1700px viewport rule adds space despite the capped frame.
     Preserve the 1280px section rhythm on larger monitors as well. */
  body[data-ac-width="partnership"] #ac-partnership-page .pp-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}