/* Site content frame v8 — 2026-10-11.
 * Actual HTML: header.php opens #content.site-content > .container.smysly-content-frame;
 * footer.php closes both elements. Header/footer: max 1500px and 20px gutters.
 * IMPORTANT: profiles must be recognized by URL, not um_profile_id().
 * A minimal critical fallback is printed in header.php (CSS optimization-safe).
 * Avoid changing individual reading columns, dialog widths or author profile grids.
 */
:root{--smysly-page-width:1500px;--smysly-page-gutter:20px}

html body #content.site-content{
  width:100%!important; max-width:none!important; min-width:0!important;
  box-sizing:border-box!important;
}
html body #content.site-content>.smysly-content-frame--standard.container{
  width:min(var(--smysly-page-width),calc(100% - 40px))!important;
  max-width:var(--smysly-page-width)!important;
  margin:0 auto!important;
  padding:0!important;
  box-sizing:border-box!important;
}
/* Full-width backgrounds on partner and editorial workshop pages. */
html body #content.site-content>.smysly-content-frame--fullbleed.container{
  width:100%!important;max-width:none!important;margin:0!important;padding:0!important;
  box-sizing:border-box!important;
}
/* .smysly-content-frame--profile deliberately uses the tested profile rules. */

/* Standard ListingHive page wrappers, often a second hidden width limit. */
#content>.smysly-content-frame--standard>.page,
#content>.smysly-content-frame--standard>.page>.page__content,
#content>.smysly-content-frame--standard>.page>.page__content>main.home{
  width:100%!important; max-width:none!important; box-sizing:border-box!important;
}

/* Homepage: home.css formerly capped hero/promo/content to 1200px. */
#content .home .container,
#content .home-hero>.container,
#content .home-promo>.container{
  width:100%!important;max-width:none!important;margin-inline:auto!important;
  box-sizing:border-box!important;
}
#content .home>.container{padding-inline:0!important}
#content .home-hero,#content .home-promo{
  width:100%!important;max-width:none!important;
}


/* Homepage cards follow the catalogue layout, rather than auto-fill (which
 * started inserting a fifth prose/poetry card after the 1500px expansion).
 * Scope to the actual home main so author-profile and listing rules stay intact.
 * Art follows the catalogue's independent masonry breakpoints. */
#content .home .art-grid:not(.art-grid--masonry){
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#content .home .art-grid.art-grid--masonry{
  display:block!important;
  column-count:5!important;
  column-gap:24px!important;
}
@media(max-width:1100px){
  #content .home .art-grid:not(.art-grid--masonry){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #content .home .art-grid.art-grid--masonry{column-count:3!important}
}
@media(max-width:860px){
  #content .home .art-grid:not(.art-grid--masonry){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #content .home .art-grid.art-grid--masonry{column-count:2!important}
}
@media(max-width:720px){
  #content .home .art-grid.art-grid--masonry{column-gap:12px!important}
}
@media(max-width:560px){
  #content .home .art-grid:not(.art-grid--masonry){grid-template-columns:minmax(0,1fr)!important}
  /* Exactly as the art listing: two image cards even on a narrow phone. */
  #content .home .art-grid.art-grid--masonry{column-count:2!important}
}

/* Poet / writer / artist landings: restore an INNER gutter within the
 * shared 1500px frame. The old width:100% erased their original padding. */
#content .lp-poet .lp-container{
  width:calc(100% - 40px)!important;max-width:1460px!important;
  margin-inline:auto!important;box-sizing:border-box!important;
}
@media(max-width:520px){
  #content .lp-poet .lp-container{width:calc(100% - 28px)!important}
}

/* About, public publication landings and support page. Keep intentionally
 * narrower text/FAQ blocks and .publish-shell--narrow unchanged. */
/* About page sections keep their own 20px inset within the 1500px content frame. */
#content .sm-about__shell{
  width:calc(100% - 40px)!important;max-width:1460px!important;
  margin-inline:auto!important;box-sizing:border-box!important;
}
@media(max-width:520px){
  #content .sm-about__shell{width:calc(100% - 28px)!important}
}
#content .publish-shell:not(.publish-shell--narrow){
  width:100%!important;max-width:none!important;margin-inline:auto!important;
  box-sizing:border-box!important;
}
#content .smysly-project-support-page{
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
}

/* These pages have full-width section backgrounds. The 1500px shell is
 * internal. Do not widen --narrow forms and long-form reading columns. */
#content .sm-partners__shell:not(.sm-partners__shell--narrow),
#content .sm-workshop__shell:not(.sm-workshop__shell--narrow){
  width:min(1500px,calc(100% - 40px))!important;max-width:1500px!important;
  margin-inline:auto!important;box-sizing:border-box!important;
}

/* Other custom templates without full-bleed layouts. */
#content .smysly-promotion-landing,
#content .smysly-promotion-dashboard,
#content .smysly-promotion-preview,
#content .smysly-follow-feed{
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
}
@media(max-width:860px){
  :root{--smysly-page-gutter:20px}
}