/* Shared page rails. Outer sections align; colored panels own their inner padding. */
:root{--harper-page-max:1360px;--harper-page-gutter:48px;--harper-panel-padding:24px}
@media(max-width:899px){:root{--harper-page-gutter:26px}}
@media(max-width:600px){:root{--harper-page-gutter:20px;--harper-panel-padding:20px}}
body main,body main.home-hub,body main:has(#casing:not([hidden])),
body .harper-ribbon-inner,body .harper-crumb,body .harper-hero-inner,
body .harper-footer-inner,body .harper-threads-inner,body .masthead,body .section-nav{
 box-sizing:border-box;width:100%;max-width:var(--harper-page-max);margin-inline:auto;
 padding-inline:var(--harper-page-gutter);
}
body details.harper-page-help{
 box-sizing:border-box;width:calc(100% - 2 * var(--harper-page-gutter));
 max-width:calc(var(--harper-page-max) - 2 * var(--harper-page-gutter));
 margin-inline:auto;padding-inline:var(--harper-panel-padding);
}
body main>.panel,body main>.reading,body main .panel>.reading{
 width:100%;max-width:none;margin-inline:0;
}
body main .section-head{margin-inline:0;max-width:none}
body .harper-site-footer #harper-feedback{padding-inline:0}
@media print{body main{max-width:none;padding-inline:0}}
/* Page titles own the left rail; only nested content cards indent their text. */
body>header.intro,body>header:has(h1):not(#harper-header),body>.intro:has(h1){box-sizing:border-box;width:100%;max-width:var(--harper-page-max);margin-inline:auto;padding-inline:var(--harper-page-gutter);text-align:left}
body main>header,body .masthead,body main .section-head{text-align:left}
body main>header:not(.hub-heading){margin-inline:0}
body .home-hub .hub-heading{text-align:left}
body .home-hub .hub-heading .home-wordmark{justify-content:flex-start}
body .home-identity>p{margin-inline:0}
body .hub-heading .hub-tools{justify-content:flex-start}
body .home-wordmark:before{display:none}
body main .catalog-overview{margin-inline:0;padding-inline:0}
body main .catalog-overview>summary{text-align:left;justify-content:flex-start;padding:16px 0;min-height:48px;background:#fff}
body main .catalog-overview[open]>summary{position:sticky;top:var(--harper-header-height,82px);z-index:3;border-bottom:1px solid #ded6cc}
body footer.harper-site-footer{width:100%;max-width:none;margin-inline:0;padding:0;box-sizing:border-box}
body>header .masthead{padding-inline:0;justify-content:flex-start;text-align:left}
body>header .masthead h1{margin-inline:0}
body>header .masthead-rule:first-child{display:none}

/* Introductory copy follows its heading, with natural wrapping rather than centered offsets. */
body .masthead .identity{justify-content:flex-start}
body .masthead .identity:before{display:none}
body .masthead>.intro,body main>header>.intro,body main>.intro,
body main>header>p:not(.eyebrow),body>header:has(h1)>p:not(.eyebrow){
 margin-inline:0;text-align:left;width:auto;max-width:80ch;
}
body .masthead>.intro{padding-inline:0;margin-top:16px;margin-bottom:24px}
body .masthead .desktop-break{display:none}

/* Colored surfaces align at their outer edge and keep a separate inner text inset. */
body main>header.intro,body main>header.calendar-intro{
 padding:var(--harper-panel-padding)!important;
 border-top:3px solid #800000;
}
body main>header.intro> :first-child,body main>header.calendar-intro> :first-child{margin-top:0}
body main>header.intro> :last-child,body main>header.calendar-intro> :last-child{margin-bottom:0}
body main>header.intro h1,body main>header.calendar-intro h1{margin:12px 0 18px}
body main>header.intro>p,body main>header.calendar-intro>p{line-height:1.65}
body main>header.intro>a,body main>header.calendar-intro>a{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
body main>header.intro,body main>header.calendar-intro{width:100%;max-width:none}