/* OFF-18 phone: the spine dots hang 5px left of the list; the base overflow clip cut them. Let them show (frame gutter is wider). */
body .sb-offset.sb-look-18{overflow-x:visible}
body .sb-offset p.eyebrow{font-size:var(--fs-small-titles-size) !important;line-height:1.3 !important}

body .sb-offset .tlink>span[aria-hidden]{font-family:system-ui,sans-serif}
/* Link arrow: one text run, like the design, so the underline is unbroken. */
body .sb-offset .tlink{display:inline-block;min-height:0;padding-block:calc((44px - 1lh) / 2)}
/* Branding text sizes. Kept here so Studio library re-extraction preserves these roles. */
body .sb-offset { font-size: var(--fs-copy) }
body .sb-offset .demo-top h1 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-offset .demo-top p { font-size: var(--fs-small) !important }
body .sb-offset .demo-ctl { font-size: var(--fs-small) !important }
body .sb-offset .demo-ctl button { font-size: var(--fs-small) }
body .sb-offset .eyebrow { font-size: var(--fs-small-titles-size) }
body .sb-offset .h { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) }
body .sb-offset .d { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) }
body .sb-offset .h3 { font-size: clamp(calc(var(--fs-medium) * 0.75), 2.65625vw, var(--fs-medium)) }
body .sb-offset .lead { font-size: var(--fs-lead) !important }
body .sb-offset .cap { font-size: var(--fs-small) !important }
body .sb-offset .btn { font-size: var(--fs-buttons) }
body .sb-offset .o08-p figcaption { font-size: var(--fs-small) }
body .sb-offset h2.h3 { font-size: clamp(calc(var(--fs-titles) * 0.65), 3.75vw, var(--fs-titles)) !important }

/* 3.6.10: the text card hangs 64px below the photo, and the room for it was section padding the framework removes, so
   the band clipped the card's link (OFF-01). The grid itself makes the room. */
@media (min-width: 768px) { body:not(.cc-look-pre-3-6-10) .sb-offset .o01-g { padding-bottom: 64px; } }
/* 3.6.10: the second print overlaps the right half of the first print's bottom edge, so a longer caption ran under it
   (OFF-08). The first caption keeps to the uncovered left half and wraps. */
body:not(.cc-look-pre-3-6-10) .sb-offset .o08-a figcaption { max-width: 46%; }

/* 3.6.10: 17's words sit on the brand panel drawn by the photo column's ::before; the text column paints the same color, so
   its contrast holds wherever the column ends up (and checkers that read element backgrounds see it). No visible change. */
body:not(.cc-look-pre-3-6-10) .sb-offset .o17-t { background: var(--pb-primary); }