/* Designed pages (type synthesis, 2026-10-26): the base of prototypes/type-synthesis/shared/sx-chrome.css,
   scoped to the content (.sx-main) so the site header and footer keep their own styles. The scope sits in :where()
   so element rules keep the prototype's weight (class rules such as .sx-standfirst still win over p).
   Left out: the prototype masthead and footer (the theme's header and footer are used) and the skip link (the theme has one). */
.sx-main{
  --paper:var(--wp--preset--color--page);--paper-deep:var(--wp--custom--color--paper-deep);--card:var(--wp--preset--color--surface);
  --navy:var(--wp--preset--color--heading);--navy-deep:var(--wp--custom--color--navy-deep);--ochre:var(--wp--preset--color--ochre);--ochre-text:var(--wp--preset--color--ochre-text);
  --sage:var(--wp--preset--color--sage);--slate:var(--wp--preset--color--body);--text:var(--wp--preset--color--text);--focus:var(--wp--preset--color--focus);--alert:var(--wp--custom--color--rust);--alert-bg:var(--wp--custom--color--blush);
  --line:rgba(11,42,91,.18);--line-strong:rgba(11,42,91,.32);
  --heading:var(--wp--preset--font-family--serif);
  --body:var(--wp--preset--font-family--sans);
  --content:1180px;--measure:68ch;--gutter:16px;--ease:cubic-bezier(.2,.7,.2,1);
  display:block;margin:0;color:var(--text);font:400 17px/1.65 var(--body)
}
html{scroll-padding-top:16px}
:where(.sx-main) *,:where(.sx-main) *::before,:where(.sx-main) *::after{box-sizing:border-box}
:where(.sx-main) img{max-width:100%;height:auto;display:block}
:where(.sx-main) :is(h1,h2,h3,h4){font-family:var(--heading);color:var(--navy);font-weight:600;line-height:1.2;text-wrap:wrap}
:where(.sx-main) p{margin:0 0 1em}
:where(.sx-main) a{color:var(--navy);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .2s var(--ease)}
:where(.sx-main) a:hover{text-decoration-thickness:2px}
:where(.sx-main) :focus-visible{outline:3px solid var(--focus);outline-offset:3px}

.sx-wrap{max-width:var(--content);margin:0 auto;padding:0 var(--gutter)}
.sx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons (the second selector of each pair outweighs the base link rule above) */
.sx-btn,.sx-main .sx-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;background:var(--navy);color:var(--paper);text-decoration:none;font-weight:600;padding:11px 20px;border:0;border-radius:2px;font-family:inherit;font-size:var(--wp--preset--font-size--body);cursor:pointer;transition:background-color .2s var(--ease),transform .2s var(--ease)}
.sx-btn:hover{background:var(--navy-deep);transform:translateY(-1px)}
.sx-btn--ghost,.sx-main .sx-btn--ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.sx-btn--ghost:hover{background:rgba(11,42,91,.06)}
.sx-arrow{display:inline-block;transition:transform .2s var(--ease)}
a:hover .sx-arrow,a:focus-visible .sx-arrow{transform:translateX(4px)}

/* Motion utilities (active only when sx.js adds .js-motion) */
.js-motion .sx-rise>*{animation:sx-rise .64s var(--ease) both}
.js-motion .sx-rise>*:nth-child(2){animation-delay:.07s}
.js-motion .sx-rise>*:nth-child(3){animation-delay:.14s}
.js-motion .sx-rise>*:nth-child(4){animation-delay:.21s}
.js-motion .sx-rise>*:nth-child(5){animation-delay:.28s}
.js-motion .sx-rise>*:nth-child(n+6){animation-delay:.32s}
.js-motion .sx-pending{opacity:0;transform:translateY(14px)}
.js-motion [data-reveal]{transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
@keyframes sx-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .sx-main *,.sx-main *::before,.sx-main *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sx-pending{opacity:1!important;transform:none!important}
}
@media print{
  .sx-rail,.sx-noprint{display:none!important}
  .sx-main a{text-decoration:none}
}