/* recalls-site.css: the site's layout around the supplied chart-pages.css and recalls.css (left as supplied). Load last. */

/* The ad boxes hold real ad zones, so they lose the dashed placeholder look. */
.rcp .cp-ad.rcp-ad{display:flex;justify-content:center;min-width:0;overflow:hidden;min-height:0;padding:0;border:0;border-radius:0;background:none;
  color:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;width:auto}
.rcp .cp-ad.rcp-ad>*{max-width:360px}
.rcp .cp-ad.rcp-ad-wide>*{max-width:100%}

/* The columns, with the Census /chart pages' dimensions, and sticky sidebars:
   each column is a menu and a 600px ad, held in view while the page scrolls.
   The menus are capped so the ad under each always fits on the screen (72px
   header, 16px gap, 600px ad) and scroll inside themselves when longer.
   - 1600px and up: 360px | content | 360px, 32px apart, at most 1840px, 72px kept
     clear on the right for the floating share button. Left: Sidebar1, then the
     make links. Right: "On this page", then Sidebar2.
   - 1024 to 1599px: content | 360px (at most 1400px). No left ad; the make
     links run above the content as a row. The right column stays sticky.
   - Below 1024px: one column: makes, content, then the sidebar. */
:root{--cp-menu-max:max(100px,calc(100vh - 72px - 16px - 600px - 24px))}
.cp.rcp{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.cp.rcp>.cp-left{display:flex;flex-direction:column;gap:16px;min-width:0}
.cp.rcp .rcp-ad-left{display:none}
.cp.rcp>.cp-left .cp-nav{flex-direction:row;flex-wrap:wrap;gap:4px 18px}
.cp.rcp>.cp-left .cp-nav .cp-side-title{flex-basis:100%}
.cp.rcp>.cp-main{min-width:0}
.cp.rcp>.cp-side{position:static;flex:none;width:auto;min-width:0;max-width:none}
@media (min-width:1024px){
  .cp.rcp{grid-template-columns:minmax(0,1fr) 360px;column-gap:32px;padding-right:72px;max-width:1400px}
  .cp.rcp>.cp-left{grid-column:1;grid-row:1}
  .cp.rcp>.cp-main{grid-column:1;grid-row:2}
  .cp.rcp>.cp-side{grid-column:2;grid-row:1/span 2;position:sticky;top:72px;align-self:start}
  .cp.rcp>.cp-side .cp-nav{max-height:var(--cp-menu-max);overflow-y:auto;overscroll-behavior:contain}
}
@media (min-width:1600px){
  .cp.rcp{grid-template-columns:360px minmax(0,1fr) 360px;max-width:1840px}
  .cp.rcp>.cp-left{grid-column:1;grid-row:1;position:sticky;top:72px;align-self:start}
  .cp.rcp>.cp-main{grid-column:2;grid-row:1}
  .cp.rcp>.cp-side{grid-column:3;grid-row:1}
  .cp.rcp .rcp-ad-left{display:flex}
  .cp.rcp>.cp-left .cp-nav{flex-direction:column;flex-wrap:nowrap;gap:6px;max-height:var(--cp-menu-max);overflow-y:auto;overscroll-behavior:contain}
}
