/* Pipeline-owned. Written before the build; do not edit or overwrite. */
/* The floor. Loaded after every authored style, so it wins on equal
   specificity without !important, and a design that deliberately wants a
   larger value simply sets a larger value.

   clip, not hidden: overflow:hidden turns the root into a scroll container,
   and a scroll container is a new containing block for position:sticky --
   every sticky header on the site would stop sticking the moment this rule
   loaded. clip prevents the same sideways scroll without creating one.
   renderCheck.js's per-element overflow-x-element scan runs unconditionally
   (not only when scrollWidth exceeds the viewport) for exactly this reason:
   clip clamps scrollWidth to the viewport even while an overflowing child is
   still laid out past the edge and simply not painted there, so the
   page-level scrollWidth check alone would go blind the moment this rule
   started doing its job. */
html, body { overflow-x: clip; max-width: 100%; }

/* A post photograph is a thumbnail, and nothing below stops it becoming a
   screen. saloon-test-001 rendered its Instagram images 1218x1218 on desktop
   from a natural 1080x608: the builder wrote its own post markup, styled six
   .social-post rules in its own stylesheet, and put the cards in a plain block
   container -- so each card was the full content column wide and its own
   aspect-ratio:1/1 turned 1218px of width into 1218px of height, cropping a
   landscape photograph into a square the size of the viewport.

   reset.css does have a post grid, but every rule in it is scoped under
   .social-posts, the container class applySourceOfTruth injects -- and a
   builder that writes its own section uses .social-post on the cards and never
   that. So the grid was inert on exactly the pages that needed it. The grid
   belongs in grammar.md, where it now is; this is the net under it.

   480px, because a correct grid never reaches it and a broken one always does:
   three or four cards across the 72rem content column are 250-360px wide, so a
   square cell is 250-360px tall and this rule never fires on a design that got
   it right. Past 480px -- half a laptop viewport -- a post has stopped being a
   thumbnail whatever the layout meant. object-fit:cover is already set in
   reset.css, so the cap crops and never distorts. Deliberately no max-width on
   the card: capping the height alone turns the runaway square into a wide
   strip, which is survivable, while a width cap would re-lay-out a section the
   builder may have designed full-bleed on purpose. */
.social-post img { max-height: 480px; }

/* A fixed bottom bar: floor.js measures it into --ewb-bar-b, pads body when
   the author did not, and slides it off the first screen only when it covers
   a control there. See the bar block at the end of floor.js. */
html.ewb-bar-pad body { padding-bottom: var(--ewb-bar-b); }
.ewb-bar-defer { transform: translateY(calc(100% + 8px)) !important; }
@media (prefers-reduced-motion: no-preference) {
  .ewb-bar-defer { transition: transform .35s cubic-bezier(.22,1,.36,1); }
}