/* Standalone Tier compositions use the same FO reading width as Sections.
   Existing public FO pages already supply their own composition wrappers. */
:where(html:not([data-site-style="modern"])) main>.lk-container{width:min(1256px,calc(100% - 64px));margin-inline:auto;padding-block:64px}
:where(html:not([data-site-style="modern"])) main>.wcms-grid{width:min(1256px,calc(100% - 64px));margin:0 auto;padding-block:32px 64px}
:where(html:not([data-site-style="modern"])) main>h1.wcms-heading{width:min(1256px,calc(100% - 64px));margin:0 auto;padding:32px 0;border:0;font-size:40px;color:var(--edu-action-primary)}
:where(html:not([data-site-style="modern"])) main>.lk-container>.lk-children>.wcms-grid[data-balance="5-7"]{grid-template-columns:140px minmax(0,1fr);gap:32px;padding:24px 0;border-bottom:1px solid var(--edu-border)}
:where(html:not([data-site-style="modern"])) main>.lk-container>.lk-children>.wcms-grid[data-balance="5-7"]>.rich{font-size:13px;color:var(--edu-text-muted)}
:where(html:not([data-site-style="modern"])) main>.lk-container>.lk-children>.wcms-grid[data-balance="5-7"]>.rich p{margin:0}
:where(html:not([data-site-style="modern"])) main>.wcms-grid>.wcms-item--option{padding:20px;background:#fff;border:1px solid var(--edu-border);border-radius:6px;min-height:72px;min-width:0}
@media(max-width:600px){
 :where(html:not([data-site-style="modern"])) main>.lk-container{width:calc(100% - 40px);padding-block:40px}
 :where(html:not([data-site-style="modern"])) main>.wcms-grid{width:calc(100% - 40px);padding-block:0 40px}
 :where(html:not([data-site-style="modern"])) main>h1.wcms-heading{width:calc(100% - 40px);font-size:30px;padding:24px 0}
 :where(html:not([data-site-style="modern"])) main>.lk-container>.lk-children>.wcms-grid[data-balance="5-7"]{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 0}
}
/* A pinned Modern header also precedes a Classic text-led first section. */
:where(html:not([data-site-style="modern"]))[data-shell="modern"] main>.home-block:first-child>.ocio-section{padding-top:calc(64px + var(--shell-head-h,104px))}
@media(max-width:600px){:where(html:not([data-site-style="modern"]))[data-shell="modern"] main>.home-block:first-child>.ocio-section{padding-top:calc(40px + var(--shell-head-h,64px))}}

/* tplfix: text-led legacy openings have no photo behind the pinned header.
   Leave photo-led FO/OCIO and Library hero/banner openings on their overlay. */
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-header{background:#fff;color:var(--kd-ink,#202723);box-shadow:var(--t2-sh-card)}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-header::before{opacity:0}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-brand img{filter:none}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-header :is(.kd-util a,.kd-groups .ocio-link){text-shadow:none}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-header .kd-groups .ocio-link:is(:hover,:focus-visible){color:var(--kd-green,#006437)}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-header .kd-groups :is(.shell-menu.is-active>summary,.shell-top[aria-current]){text-decoration-color:currentColor}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section,main>h1.wcms-heading:first-child) .kd-header :focus-visible{outline-color:var(--kd-green,#006437)}
/* The legacy footer-image/details blocks inherit a dark ink token; on a
   photo footer they need the same white artwork and type as native brand rows. */
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section) .kd-footer .ocio-footer-logo{filter:brightness(0) invert(1)}
html[data-shell="modern"] body:has(main>.home-block:first-child>.ocio-section) .kd-footer .kd-footer-column :is(h2,p,a){color:#fff}

/* tplfix: a standalone text heading also reserves the pinned shell. */
html[data-shell="modern"] main>h1.wcms-heading:first-child{padding-top:calc(32px + var(--shell-head-h,104px))}
@media(max-width:600px){html[data-shell="modern"] main>h1.wcms-heading:first-child{padding-top:calc(24px + var(--shell-head-h,64px))}}

/* tplfix: a surfaced card in a legacy photo composition already supplies its
   own contrast; do not shade dark card copy as if it were white photo copy. */
main>h1.wcms-heading:first-child~.home-block .wcms-design--text-shade .wcms-card :is(.rich,.wcms-heading,.fo-block-title){background:transparent}

/* tplfix: the eyebrow sits directly on the light sample photo too. */
:where(html:not([data-site-style="modern"])) main>h1.wcms-heading:first-child~.home-block .wcms-design--text-shade .ocio-label{background:#10251abf;color:#fff;padding:2px 6px}