/* The hero wrapper is not .sb-edge, so base.css zeroes --st-space (the section padding the designs need) and --pb-text
   falls to currentColor. Give page titles the edge looks' spacing, and an explicit ink for the dark poster. */
body .sb-page-titles.sb-hero { --st-space: var(--section-padding, 120px); }
@media only screen and (max-width: 1200px) { body .sb-page-titles.sb-hero { --st-space: 80px; } }
@media only screen and (max-width: 501px) and (orientation: portrait) { body .sb-page-titles.sb-hero { --st-space: 40px; } }
body .sb-page-titles .p17 { background: var(--color-body); }
/* On a dark header --pb-text is currentColor (light), so the light button needs explicit dark text. */
body .sb-page-titles .dark .btn { color: var(--color-body); }
/* --pb-text is defined from --color-headings at :root, where the site does not set it, so borders using it vanished. */
body .sb-page-titles.sb-hero:not(.sb-dark) { --pb-text: var(--color-body); }
/* 15: the theme forces h2 to the heading font, color and line height; the label is small muted body-font caps. */
body .sb-page-titles .p15 .card h2{font-family:var(--pb-body-font) !important;color:var(--pb-muted) !important;line-height:1.6 !important;margin:0}
/* The arrow glyph is not in the Branding font's latin subset; the library page falls back to the system UI font. */
body .sb-page-titles .tlink span[aria-hidden]{font-family:system-ui, sans-serif}
/* 04 (owner rule): no set height unless Full. Top padding = header room (sticky/fixed/over header) + section padding,
   bottom = section padding; the photo runs up behind an over header; the breadcrumb flows inside the padding. */
body .sb-page-titles .p04{flex-direction:column;align-items:stretch;justify-content:flex-end;padding-top:calc(var(--sb-hdr-room, 0px) + var(--sb-hero-pad));padding-bottom:var(--sb-hero-pad)}
body .sb-page-titles .p04:not([data-full]){min-height:0}
body .sb-page-titles .p04[data-full]{min-height:var(--ct-hero-h, 100svh)}
body .sb-page-titles .p04 .crumbs{position:static;grid-column:1/-1;margin:0}
body .sb-page-titles .p04 .wrap{padding-block:0}

/* Heights (owner, 2026-10-21): no fixed heights unless Full. Normal = content plus the section padding (--st-space above);
   the header's room (0 for a normal header, its height when it floats over the band) is added to the TOP of the content
   box only, so photo and color backgrounds still run up behind the header. Full = min-height 100svh. */
body .sb-page-titles.sb-hero{--hp-top:calc(var(--sb-hdr-room, 0px) + var(--sb-hero-pad))}
body .sb-page-titles :is(.p04,.p05,.p06,.p12,.p17,.p19)[data-full]{min-height:var(--ct-hero-h, 100svh)}
body .sb-page-titles :is(.p04,.p05)[data-full]{justify-content:center}
/* top spacing of every content box = room + section padding */
body .sb-page-titles :is(.p01,.p08,.p10,.p12,.p13){padding-top:var(--hp-top)}
body .sb-page-titles :is(.p02,.p03,.p07,.p09,.p11,.p14,.p15,.p16){padding-top:var(--hp-top)}
body .sb-page-titles .p20{padding-top:calc(var(--sb-hdr-room, 0px) + clamp(28px,4vw,48px))}
body .sb-page-titles :is(.p06 .txt,.p17 .txt,.p19 .txt){padding-top:var(--hp-top)}
/* 04, 05: no min-height; breadcrumb flows inside the padding instead of sitting 24px under the header */
body .sb-page-titles .p05{min-height:0}
body .sb-page-titles .p05 .wrap{padding-top:var(--hp-top);padding-bottom:0}
body .sb-page-titles .p05 .head{padding-bottom:var(--sb-hero-pad)}
/* photo boxes keep the design's proportion (measured at 1440 and 390) instead of a px height */
body .sb-page-titles .p06 .ph{min-height:0;aspect-ratio:1.13}
body .sb-page-titles .p07 .ph{min-height:0;aspect-ratio:1.36}
body .sb-page-titles .p19 .ph{min-height:0;aspect-ratio:1.03}
body .sb-page-titles .p18 .photo{height:auto;aspect-ratio:2.77}
@media(max-width:820px){
	body .sb-page-titles .p06 .ph{aspect-ratio:var(--pb-ar-landscape)}
	body .sb-page-titles .p07 .ph{aspect-ratio:var(--pb-ar-landscape)}
	body .sb-page-titles .p19 .ph{aspect-ratio:var(--pb-ar-landscape)}
	body .sb-page-titles .p17 .rail{height:auto}
	body .sb-page-titles .p17 .rail .ph:first-child{aspect-ratio:1.27}
}
@media(max-width:600px){body .sb-page-titles .p18 .photo{aspect-ratio:1.3}}

/* Width rule (owner): one .wrap per look, its width from base.css only. Split halves pad with --sb-side / --sb-split-pad. */
/* 05: the sibling bar sits in the box; its tint and rule still run edge to edge behind it. */
body .sb-page-titles .p05{overflow-x:clip}
body .sb-page-titles .p05 .bar{position:relative;background:none;border-top:0}
body .sb-page-titles .p05 .bar::before{content:"";position:absolute;z-index:-1;inset:0 -100vmax;background:var(--st-scrim);border-top:var(--st-line-w) solid var(--pb-rule-on-dark)}
body .sb-page-titles .p05 .sibs{padding-inline:0}
/* 06, 17: the text half is the box. */
body .sb-page-titles :is(.p06,.p17) .txt{padding-left:var(--sb-side);padding-right:var(--sb-split-pad)}
@media(max-width:820px){
	body .sb-page-titles :is(.p06,.p17) .txt{padding-inline:var(--sb-side)}
	body .sb-page-titles .p17 .rail{padding-inline:var(--sb-side)}
}
/* 08: the wide photo is inside the box, as wide as it. */
body .sb-page-titles .p08 .ph{width:100%;margin-inline:0}
/* Branding text sizes. Kept here so Studio library re-extraction preserves these roles. */
body .sb-page-titles { font-size: var(--fs-copy); }
body .sb-page-titles .intro h1 { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)); }
body .sb-page-titles .ctl { font-size: var(--fs-small) !important; }
body .sb-page-titles .ctl button { font-size: var(--fs-small); }
body .sb-page-titles .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .lead { font-size: var(--fs-lead) !important; }
body .sb-page-titles .crumbs ol { font-size: var(--fs-small) !important; }
body .sb-page-titles .eyebrow { font-size: var(--fs-small-titles-size) !important; }
body .sb-page-titles .btn { font-size: var(--fs-buttons) !important; }
body .sb-page-titles .sibs { font-size: var(--fs-small) !important; }
body .sb-page-titles .p02 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p03 dl { font-size: var(--fs-small) !important; }
body .sb-page-titles .p04 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p05 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p07 .date b { font-size: var(--fs-titles-small); }
body .sb-page-titles .p07 .date span small { font-size: var(--fs-small) !important; }
body .sb-page-titles .p07 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p07 dl { font-size: var(--fs-small) !important; }
body .sb-page-titles .p08 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p10 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p10 .count { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important; }
body .sb-page-titles .p11 .sig small { font-size: var(--fs-small) !important; }
body .sb-page-titles .p11 figcaption { font-size: var(--fs-small) !important; }
body .sb-page-titles .p12 .t { font-size: clamp(calc(var(--fs-huge) * 0.55), 6.25vw, var(--fs-huge)) !important; }
body .sb-page-titles .p14 ul b { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)); }
body .sb-page-titles .p14 ul small { font-size: var(--fs-small) !important; }
body .sb-page-titles .p14 ul i { font-size: var(--fs-lead) !important; }
body .sb-page-titles .p15 .card h2 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) !important; }
body .sb-page-titles .p15 .card li::marker { font-size: var(--fs-small) !important; }
body .sb-page-titles .p16 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p16 dt { font-size: var(--fs-small) !important; }
body .sb-page-titles .p16 dd { font-size: var(--fs-copy) !important; }
body .sb-page-titles .p17 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p20 .t { font-size: clamp(calc(var(--fs-hero) * 0.5), 5.5vw, var(--fs-hero)) !important; }
body .sb-page-titles .p20 .meta { font-size: var(--fs-small) !important; }

/* Full applies to every page-title look, including the content-height library
   variants. The shared header budget supplies the remaining screen height. */
body header.ct2-hero:has(> .sb-page-titles) { height: auto; display: block; }
body header.ct2-hero.is-below-header > .sb-page-titles { --sb-hdr-room: 0px; }
body .sb-page-titles.sb-hh-full > :first-child { min-height: var(--ct-hero-h, 100svh); }
/* Single content bands can center their existing wrapper without changing its
   internal grid. Photo splits and layered cards retain their designed tracks. */
body .sb-page-titles.sb-hh-full > :is(.p01,.p02,.p03,.p10,.p12,.p13,.p14,.p15,.p16,.p20) {
 display: flex; flex-direction: column; justify-content: center;
 padding-top: var(--hp-top); padding-bottom: var(--sb-hero-pad);
}

/* 3.6.10: 19 sits on a brand panel; its fill button was the panel's color and read as loose text (SEC-19). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-page-titles .p19 .btn:not(.ghost) { background: var(--color-on-main); color: var(--color-main); border-color: var(--color-on-main); }

/* 3.6.11 (owner, 2026-10-31): photo page titles sit low, 60px from the text to the band's bottom (40px phones), Full too. */
body:not(.cc-look-pre-3-6-11) .sb-page-titles .p04,
body:not(.cc-look-pre-3-6-11) .sb-page-titles .p04[data-full]{justify-content:flex-end;padding-bottom:60px}
body:not(.cc-look-pre-3-6-11) .sb-page-titles .p05 .head{padding-bottom:60px}
body:not(.cc-look-pre-3-6-11) .sb-page-titles .p05[data-full]{justify-content:flex-end}
@media only screen and (max-width: 767px){
	body:not(.cc-look-pre-3-6-11) .sb-page-titles .p04,
	body:not(.cc-look-pre-3-6-11) .sb-page-titles .p04[data-full]{padding-bottom:40px}
	body:not(.cc-look-pre-3-6-11) .sb-page-titles .p05 .head{padding-bottom:40px}
}