/* Wide screens for the public pages that do not carry the site chrome
   (Federation at 90, event registration, thank you, program payment, event
   balance, the fundraiser pages, the webinar room, the e-card). The same rule as the
   chrome pages (partials/ubar.html, #jfsd-width): above 1,440px the page is
   zoomed a little (min(.5 + screen / 2,880, 1.3333): 1.1667 at 1,920, 1.3333
   from 2,400), so it is the laptop layout scaled up, type, photos and spacing together. At 1,440px and below
   nothing here applies.
   Everything in <body> zooms, the floating Give now and Help buttons too
   (support-widget.js measures in the zoomed pixels). <body> itself does not,
   so a body min-height:100vh stays one screen tall. A page that loads the
   readable type ramp keeps its 1,440px type size (17.2px) and lets the zoom
   do the rest. Inside the zoomed page a vh or vw that must stay a share of
   the real screen divides by --z, as on the chrome pages.
   My Giving and the Back Office use this file too, with assets/wide-zoom.js
   so their scripts measure in page pixels. Their viewport units divide by
   --zv, which is only set on pages that load this file, so the same shared
   stylesheets stay as they are on the chrome pages. The Back Office keeps
   its 1,440px type size (16px, times the Settings text size). In a browser
   with the older zoom, wide-zoom.js adds html.jfsd-vz-off and nothing here
   applies on those two. */
@media (min-width:1441px){
  :root{--z:1;--zv:var(--z)}
  html:not(.jfsd-vz-off):has(link[href*="readable.css"]){font-size:1.075em}
  html:not(.jfsd-vz-off):has(> body[data-staff-only]){font-size:1em}
  html[data-text-size="large"]:not(.jfsd-vz-off):has(> body[data-staff-only]){font-size:1.125em}
  html[data-text-size="larger"]:not(.jfsd-vz-off):has(> body[data-staff-only]){font-size:1.25em}
  body > :not(script):not(style):not(link):not(noscript):not(template){zoom:var(--z)}
  /* wide-zoom.js sets this in a browser with the older zoom: no zoom there. */
  html.jfsd-vz-off{--z:1}
}
@supports (zoom:calc(.5 + 100vw / 2880px)){
  @media (min-width:1441px){:root{--z:min(calc(.5 + 100vw / 2880px), 1.3333)}}
}
@supports not (zoom:calc(.5 + 100vw / 2880px)){
  @media (min-width:1480px){:root{--z:1.0139}}
  @media (min-width:1520px){:root{--z:1.0278}}
  @media (min-width:1560px){:root{--z:1.0417}}
  @media (min-width:1600px){:root{--z:1.0556}}
  @media (min-width:1640px){:root{--z:1.0694}}
  @media (min-width:1680px){:root{--z:1.0833}}
  @media (min-width:1720px){:root{--z:1.0972}}
  @media (min-width:1760px){:root{--z:1.1111}}
  @media (min-width:1800px){:root{--z:1.1250}}
  @media (min-width:1840px){:root{--z:1.1389}}
  @media (min-width:1880px){:root{--z:1.1528}}
  @media (min-width:1920px){:root{--z:1.1667}}
  @media (min-width:1960px){:root{--z:1.1806}}
  @media (min-width:2000px){:root{--z:1.1944}}
  @media (min-width:2040px){:root{--z:1.2083}}
  @media (min-width:2080px){:root{--z:1.2222}}
  @media (min-width:2120px){:root{--z:1.2361}}
  @media (min-width:2160px){:root{--z:1.2500}}
  @media (min-width:2200px){:root{--z:1.2639}}
  @media (min-width:2240px){:root{--z:1.2778}}
  @media (min-width:2280px){:root{--z:1.2917}}
  @media (min-width:2320px){:root{--z:1.3056}}
  @media (min-width:2360px){:root{--z:1.3194}}
  @media (min-width:2400px){:root{--z:1.3333}}
}