/* Gutter scopes (body class from inc/setup.php). home: 20/24/32, sub (blog, post, legal, 404, archive): 16/24/32, flow (order, thanks): 16. */
.ll-scope-home { --ll-gutter: 1.25rem; }
.ll-scope-sub, .ll-scope-flow { --ll-gutter: 1rem; }
@media (min-width: 640px)  { .ll-scope-home, .ll-scope-sub { --ll-gutter: 1.5rem; } }
@media (min-width: 1024px) { .ll-scope-home, .ll-scope-sub { --ll-gutter: 2rem; } }

/* The one shared container: centred, border-box, max-width includes the gutter (as Tailwind's max-w-* + px-*). */
.ll-container { max-width: 64rem; margin-left: auto; margin-right: auto; padding-left: var(--ll-gutter); padding-right: var(--ll-gutter); }
.ll-container--md      { max-width: 28rem; }   /* thank-you centre box (max-w-md px-4) */
.ll-container--narrow  { max-width: 48rem; }   /* Section narrow */
.ll-container--ty      { max-width: 50rem; }   /* thank-you success: max-w-3xl content + 2 x 1rem outer px-4 */
.ll-container--legal   { max-width: 56rem; }   /* legal header, content, footer C/D */
.ll-container--order   { max-width: 58rem; }   /* order: max-w-4xl content + 2 x 1rem outer px-4 */
.ll-container--default { max-width: 64rem; }   /* Section default */
.ll-container--blog    { max-width: 72rem; }   /* blog header, content, footer B, 404, archives */
.ll-container--wide    { max-width: 80rem; }   /* home header, hero, Section wide, footer A */

/* Sections (frontend-spec 4.2) */
.ll-section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .ll-section { padding-top: 6rem; padding-bottom: 6rem; } }
.ll-section--paper   { background-color: var(--ll-paper);   color: var(--ll-ink); }
.ll-section--paper-2 { background-color: var(--ll-paper-2); color: var(--ll-ink); }
.ll-section--ink     { background-color: var(--ll-ink);     color: #fff; }

/* Generic scroll reveal (frontend-spec 6.4). Hidden states exist only under html.ll-motion. */
.ll-reveal { transition: all 700ms var(--ll-ease); }
.ll-motion .ll-revealroot:not(.is-visible) .ll-reveal { opacity: 0; transform: translateY(1rem); }