:root { --xn-ground: #f6f2ea; --xn-ink: #0b1626; --xn-body: #2a3a52; --xn-text-2: #53647c; --xn-line: #d9d2c3; --xn-field: #7c8799; --xn-accent: #0b1626; --xn-accent-hover: #24385a; --xn-break: #8a5200; --xn-break-wash: #f3e4c8; --xn-error: #a3261b; --xn-logo: #004aad; --xn-tag-line: #cfc7b6; --xn-tag-text: #3b4a60; --xn-text-3: #3b4a60; --xn-accent-wash: #efe9dc; --xn-prose-ink: #1b2a40; --xn-shadow-color: rgba(11, 22, 38, 0.06); --xn-font: "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --xn-w-regular: 400; --xn-w-medium: 500; --xn-w-semibold: 600; --xn-w-bold: 700; --xn-fs-h1: clamp(40px, 4.8vw, 64px); --xn-lh-h1: 1.04; --xn-ls-h1: -0.025em; --xn-fs-h2: clamp(30px, 3vw, 42px); --xn-lh-h2: 1.12; --xn-ls-h2: -0.018em; --xn-fs-h3: 22px; --xn-lh-h3: 1.3; --xn-fs-h4: 19px; --xn-lh-h4: 1.35; --xn-fs-lead: 20px; --xn-fs-lead-mobile: 18px; --xn-lh-lead: 1.6; --xn-fs-body: 17px; --xn-fs-shell: 16px; --xn-lh-body: 1.65; --xn-fs-long: 18px; --xn-lh-long: 1.75; --xn-fs-eyebrow: 13px; --xn-ls-eyebrow: 0.08em; --xn-fs-small: 14px; --xn-lh-small: 1.55; --xn-fs-button: 15px; --xn-fs-menu-name: 15px; --xn-fs-menu-desc: 13.5px; --xn-fs-tag: 12px; --xn-fs-label-mobile: 12px; --xn-fs-colh: 12px; --xn-ls-colh: 0.1em; --xn-fs-more: 14px; --xn-fs-panel-line: 20px; --xn-fs-card-name: 18px; --xn-fs-latest: 20px; --xn-fs-acc: 18px; --xn-fs-sheet-link: 16px; --xn-fs-footer-line: 15px; --xn-lh-menu-desc: 1.4; --xn-lh-card-desc: 1.5; --xn-lh-panel-line: 1.3; --xn-lh-footer-line: 1.6; --xn-s-1: 8px; --xn-s-2: 16px; --xn-s-3: 24px; --xn-s-4: 32px; --xn-s-5: 40px; --xn-s-6: 48px; --xn-s-7: 56px; --xn-s-8: 64px; --xn-s-14: 112px; --xn-s-half: 4px; --xn-s-item: 3px; --xn-s-quarter: 2px; --xn-s-gap-card: 10px; --xn-s-gap-panel: 14px; --xn-s-pad-item: 10px; --xn-s-pad-panel: 28px; --xn-s-pad-more: 12px; --xn-s-chev: 6px; --xn-s-12: 12px; --xn-s-mega-top: 40px; --xn-s-footer-bottom: 40px; --xn-s-colh-gap: 14px; --xn-s-section-mobile: 72px; --xn-s-footer-top: 72px; --xn-container: 1320px; --xn-pad: 32px; --xn-gutter: 32px; --xn-header-h: 80px; --xn-logo-size: 36px; --xn-logo-size-sheet: 32px; --xn-sheet-top-h: 64px; --xn-mega-col-a: 220px; --xn-mega-col-b: 240px; --xn-mega-card-min: 220px; --xn-mega-latest-min: 200px; --xn-footer-col-min: 180px; --xn-footer-brand-min: 220px; --xn-footer-line-max: 260px; --xn-cta-pad-header: 22px; --xn-cta-pad-small: 20px; --xn-cta-pad-sheet: 0; --xn-btn-h-sheet: 52px; --xn-fs-button-sheet: 16px; --xn-sheet-row-h: 56px; --xn-cookie-max-h: 33vh; --xn-cookie-text-min: 320px; --xn-cookie-btn-w: 144px; --xn-cookie-panel-max-h: 70vh; --xn-cookie-panel-w: 640px; --xn-fs-cookie: 15px; --xn-switch-w: 44px; --xn-switch-h: 24px; --xn-switch-knob: 16px; --xn-switch-travel: 20px; --xn-measure-tagline: 30ch; --xn-radius: 4px; --xn-hairline: 1px; --xn-gap-rule: 44px; --xn-btn-h: 48px; --xn-btn-pad: 24px; --xn-target: 44px; --xn-focus-w: 2px; --xn-nav-line: 2px; --xn-focus-offset: 3px; --xn-underline-offset: 3px; --xn-chevron: 10px; --xn-icon: 16px; --xn-icon-close: 20px; --xn-shadow-mega: 0 12px 24px var(--xn-shadow-color); --xn-px-1: 1px; --xn-px-700: 700px; --xn-px-38: 38px; --xn-px-34: 34px; --xn-px-640: 640px; --xn-px-600: 600px; --xn-px-50: 50px; --xn-px-42: 42px; --xn-px-13: 13px; --xn-px-11: 11px; --xn-px-7: 7px; --xn-px-2: 2px; --xn-px-3: 3px; --xn-px-4: 4px; --xn-px-6: 6px; --xn-px-8: 8px; --xn-px-10: 10px; --xn-px-12: 12px; --xn-px-14: 14px; --xn-px-15: 15px; --xn-px-16: 16px; --xn-px-17: 17px; --xn-px-18: 18px; --xn-px-19: 19px; --xn-px-20: 20px; --xn-px-21: 21px; --xn-px-22: 22px; --xn-px-24: 24px; --xn-px-26: 26px; --xn-px-28: 28px; --xn-px-30: 30px; --xn-px-32: 32px; --xn-px-36: 36px; --xn-px-40: 40px; --xn-px-44: 44px; --xn-px-48: 48px; --xn-px-52: 52px; --xn-px-56: 56px; --xn-px-60: 60px; --xn-px-64: 64px; --xn-px-72: 72px; --xn-px-80: 80px; --xn-px-96: 96px; --xn-px-104: 104px; --xn-px-112: 112px; --xn-px-120: 120px; --xn-px-160: 160px; --xn-px-180: 180px; --xn-px-200: 200px; --xn-px-220: 220px; --xn-px-230: 230px; --xn-px-240: 240px; --xn-px-260: 260px; --xn-px-280: 280px; --xn-px-300: 300px; --xn-px-320: 320px; --xn-px-340: 340px; --xn-px-360: 360px; --xn-px-400: 400px; --xn-px-420: 420px; --xn-px-440: 440px; --xn-px-460: 460px; --xn-px-520: 520px; --xn-px-560: 560px; --xn-px-680: 680px; --xn-px-720: 720px; --xn-px-760: 760px; --xn-px-860: 860px; --xn-px-900: 900px; --xn-px-980: 980px; --xn-measure: 720px; --xn-wide: 1040px; --xn-rail-min: 148px; --xn-rail-card: 190px; --xn-art-gap: 24px; --xn-paper: #ece6d9; --xn-font-display: "Sorts Mill Goudy", "Goudy Fallback", Georgia, "Times New Roman", serif; --xn-slate: #0b1626; --xn-slate-2: #5b6f8a; --xn-mist: #e4e8ee; --xn-on-dark: #ffffff; --xn-on-dark-2: #c9d3dd; --xn-dark-line: #3d4b58; --xn-signal: #f2b134; --xn-coral: #ff6a4d; --xn-night: #0b1626; --xn-night-2: #14233a; --xn-px-1040: 1040px; --xn-px-84: 84px; --xn-px-88: 88px; --xn-px-58: 58px; --xn-px-68: 68px; --xn-px-92: 92px; --xn-px-5: 5px; --xn-px-9: 9px; --xn-hero-art-max: 520px; --xn-fs-display: clamp(34px, 4vw, 54px); --xn-fs-h2-art: clamp(24px, 2.3vw, 30px); --xn-fs-statement: clamp(22px, 2.4vw, 30px); --xn-fs-kf-n: 26px; --xn-z-progress: 55; --xn-motion: 160ms ease-out; --xn-motion-time: 160ms; --xn-z-header: 50; --xn-z-mega: 60; --xn-z-cookie: 70; --xn-z-sheet: 80; } @media (max-width: 759px) { :root { --xn-pad: 20px; } }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/Archivo-latin-variable.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo Fallback"; font-style: normal; font-weight: 400 700; src: local("Arial"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; size-adjust: 98.94%; ascent-override: 88.74%; descent-override: 21.23%; line-gap-override: 0%; } @font-face { font-family: "Sorts Mill Goudy"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/SortsMillGoudy.woff2") format("woff2"); } @font-face { font-family: "Sorts Mill Goudy"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/SortsMillGoudy-Italic.woff2") format("woff2"); } @font-face { font-family: "Goudy Fallback"; font-style: normal; font-weight: 400; src: local("Georgia"), local("Times New Roman"); size-adjust: 97.8%; ascent-override: 98.2%; descent-override: 48.9%; line-gap-override: 0%; }
body { background: var(--xn-ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .xn-skip, .xn-header, .xn-footer, .xn-sheet, .xn-cookie { box-sizing: border-box; } .xn-header, .xn-footer, .xn-sheet, .xn-cookie { font-family: var(--xn-font); font-size: var(--xn-fs-body); font-weight: var(--xn-w-regular); line-height: var(--xn-lh-body); color: var(--xn-ink); background: var(--xn-ground); -webkit-text-size-adjust: 100%; } .xn-header, .xn-footer, .xn-sheet { font-size: var(--xn-fs-shell); line-height: normal; text-rendering: auto; } :where(.xn-header, .xn-footer, .xn-sheet, .xn-cookie) *, :where(.xn-header, .xn-footer, .xn-sheet, .xn-cookie) *::before, :where(.xn-header, .xn-footer, .xn-sheet, .xn-cookie) *::after { box-sizing: border-box; } .xn-header :where(*), .xn-footer :where(*), .xn-sheet :where(*), .xn-cookie :where(*) { font-family: inherit; overflow-wrap: normal; text-wrap: wrap; text-rendering: auto; } .xn-header :where(ul, ol, li, p, h2, h3, h4), .xn-footer :where(ul, ol, li, p, h2, h3, h4), .xn-sheet :where(ul, ol, li, p, h2, h3, h4), .xn-cookie :where(ul, ol, li, p, h2, h3, h4) { margin: 0; padding: 0; list-style: none; } .xn-header :where(h2, h3, h4), .xn-footer :where(h2, h3, h4), .xn-sheet :where(h2, h3, h4) { font-size: inherit; font-weight: inherit; letter-spacing: normal; text-transform: none; } .xn-header :where(a), .xn-footer :where(a), .xn-sheet :where(a), .xn-cookie :where(a) { color: inherit; text-decoration: none; } .xn-skip:hover, .xn-header :where(a):hover, .xn-footer :where(a):hover, .xn-sheet :where(a):hover, .xn-cookie :where(a):hover { color: inherit; } .xn-header :where(button), .xn-footer :where(button), .xn-sheet :where(button), .xn-cookie :where(button) { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } .xn-header :where(svg), .xn-footer :where(svg), .xn-sheet :where(svg), .xn-cookie :where(svg) { display: block; flex: none; } .xn-skip:focus-visible, .xn-header :focus-visible, .xn-footer :focus-visible, .xn-sheet :focus-visible, .xn-cookie :focus-visible { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-focus-offset); } .xn-vh { position: absolute; width: var(--xn-hairline); height: var(--xn-hairline); margin: calc(var(--xn-hairline) * -1); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .xn-container { width: 100%; max-width: var(--xn-container); margin-inline: auto; padding-inline: var(--xn-pad); } html.xn-lock { overflow: hidden; } html { scroll-padding-bottom: var(--xn-cookie-h, 0); } .xn-skip { position: absolute; top: var(--xn-s-2); left: var(--xn-s-2); z-index: var(--xn-z-sheet); display: inline-flex; align-items: center; min-height: var(--xn-btn-h); padding: 0 var(--xn-btn-pad); background: var(--xn-ink); color: var(--xn-ground); font-family: var(--xn-font); font-size: var(--xn-fs-button); font-weight: var(--xn-w-semibold); text-decoration: none; border-radius: var(--xn-radius); transform: translateY(-300%); } .xn-skip:focus { transform: translateY(0); } .xn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--xn-btn-h); padding: 0 var(--xn-btn-pad); border: 0; border-radius: var(--xn-radius); font-size: var(--xn-fs-button); font-weight: var(--xn-w-semibold); line-height: normal; text-align: center; text-decoration: none; cursor: pointer; transition: background-color var(--xn-motion), color var(--xn-motion), border-color var(--xn-motion); } .xn-btn--primary { background: var(--xn-accent); color: var(--xn-ground); } .xn-btn--primary:hover { background: var(--xn-accent-hover); color: var(--xn-ground); } .xn-btn--secondary { background: var(--xn-ground); border: var(--xn-hairline) solid var(--xn-ink); color: var(--xn-ink); } .xn-btn--secondary:hover { background: var(--xn-ink); color: var(--xn-ground); } .xn-btn--small { min-height: var(--xn-target); padding: 0 var(--xn-cta-pad-small); } .xn-btn--block { display: flex; width: 100%; } .xn-link { font-size: var(--xn-fs-button); font-weight: var(--xn-w-semibold); color: var(--xn-ink); text-decoration: underline; text-decoration-thickness: var(--xn-hairline); text-underline-offset: var(--xn-underline-offset); transition: color var(--xn-motion); } .xn-link:hover { color: var(--xn-accent); } .xn-tag { display: inline-flex; align-items: center; padding: var(--xn-s-half) var(--xn-s-1); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); background: transparent; color: var(--xn-tag-text); font-size: var(--xn-fs-tag); font-weight: var(--xn-w-semibold); line-height: 1.2; } .xn-eyebrow { font-size: var(--xn-fs-eyebrow); font-weight: var(--xn-w-semibold); letter-spacing: var(--xn-ls-eyebrow); text-transform: uppercase; color: var(--xn-text-2); } .xn-header { position: relative; z-index: var(--xn-z-header); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xn-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--xn-s-2) var(--xn-s-5); min-height: var(--xn-header-h); } .xn-logo { display: inline-flex; align-items: center; min-height: var(--xn-target); } .xn-logo svg { width: var(--xn-logo-size); height: var(--xn-logo-size); } .xn-logo .xn-logo__img { display: block; width: auto; max-width: calc(var(--xn-logo-size) * 5); height: var(--xn-logo-size); object-fit: contain; } .xn-nav { display: none; } .xn-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-s-half); } .xn-nav__btn { display: inline-flex; align-items: center; gap: var(--xn-s-chev); min-height: var(--xn-target); padding: 0 var(--xn-s-2); border-bottom: var(--xn-nav-line) solid transparent; font-size: var(--xn-fs-button); font-weight: var(--xn-w-medium); color: var(--xn-ink); } .xn-nav__btn[aria-expanded="true"] { border-bottom-color: var(--xn-accent); color: var(--xn-accent); } .xn-chev { width: var(--xn-chevron); height: var(--xn-chevron); } .xn-header__cta { display: none; margin-inline-start: auto; min-height: var(--xn-target); padding: 0 var(--xn-cta-pad-header); } .xn-menu-btn { display: inline-flex; align-items: center; gap: var(--xn-s-1); min-height: var(--xn-target); margin-inline-start: auto; padding: 0 var(--xn-s-2); border: var(--xn-hairline) solid var(--xn-ink); border-radius: var(--xn-radius); font-size: var(--xn-fs-button); font-weight: var(--xn-w-semibold); } .xn-menu-btn svg { width: var(--xn-icon); height: var(--xn-icon); } .xn-mega { position: absolute; top: calc(100% + var(--xn-hairline)); right: 0; left: 0; z-index: var(--xn-z-mega); background: var(--xn-ground); border-bottom: var(--xn-hairline) solid var(--xn-line); box-shadow: var(--xn-shadow-mega); } .xn-mega[hidden] { display: none; } .xn-mega.is-open { animation: xn-in var(--xn-motion); } @keyframes xn-in { from { opacity: 0; } to { opacity: 1; } } .xn-mega__wrap { padding-top: var(--xn-s-mega-top); padding-bottom: var(--xn-s-6); } .xn-mega__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-mega-col, var(--xn-mega-col-a)), 1fr)); gap: var(--xn-s-5); } .xn-layout-b, .xn-layout-c { --xn-mega-col: var(--xn-mega-col-b); } .xn-featured, .xn-latest-card { grid-column: span 2; } .xn-group__label { padding-bottom: var(--xn-s-colh-gap); border-bottom: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-fs-colh); font-weight: var(--xn-w-semibold); letter-spacing: var(--xn-ls-colh); text-transform: uppercase; color: var(--xn-text-2); } .xn-item { display: flex; flex-direction: column; gap: var(--xn-s-item); min-height: var(--xn-target); padding: var(--xn-s-pad-item) 0; } .xn-item__name { font-size: var(--xn-fs-menu-name); font-weight: var(--xn-w-semibold); color: var(--xn-ink); transition: color var(--xn-motion); } .xn-item__desc { font-size: var(--xn-fs-menu-desc); line-height: var(--xn-lh-menu-desc); color: var(--xn-text-2); } .xn-item:hover .xn-item__name { color: var(--xn-accent); } .xn-more, .xn-latest__link { font-size: var(--xn-fs-more); font-weight: var(--xn-w-semibold); color: var(--xn-accent); } .xn-more { display: inline-block; padding-top: var(--xn-s-pad-more); } .xn-more::after, .xn-latest__link::after { content: " \2192" / ""; } .xn-panel { display: flex; flex-direction: column; align-self: start; gap: var(--xn-s-gap-panel); padding: var(--xn-s-pad-panel); border: var(--xn-hairline) solid var(--xn-line); } .xn-panel__line { font-size: var(--xn-fs-panel-line); font-weight: var(--xn-w-semibold); line-height: var(--xn-lh-panel-line); color: var(--xn-ink); } .xn-panel .xn-btn { box-sizing: content-box; align-self: flex-start; min-height: var(--xn-target); padding: 0 var(--xn-cta-pad-small); } .xn-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-mega-card-min), 1fr)); gap: var(--xn-s-2); } .xn-card { display: flex; flex-direction: column; gap: var(--xn-s-gap-card); padding: var(--xn-s-3); border: var(--xn-hairline) solid var(--xn-line); } .xn-card .xn-tag { align-self: flex-start; padding: var(--xn-s-item) var(--xn-s-1); border-radius: 0; line-height: normal; } .xn-card__name { font-size: var(--xn-fs-card-name); font-weight: var(--xn-w-bold); color: var(--xn-ink); transition: color var(--xn-motion); } .xn-card__desc { font-size: var(--xn-fs-small); line-height: var(--xn-lh-card-desc); color: var(--xn-text-2); } .xn-card:hover .xn-card__name, .xn-latest-card:hover .xn-latest__title { color: var(--xn-accent); } .xn-latest-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-mega-latest-min), 1fr)); gap: var(--xn-s-3); align-items: center; padding: var(--xn-s-pad-panel); border: var(--xn-hairline) solid var(--xn-line); } .xn-latest__body { display: flex; flex-direction: column; gap: var(--xn-s-gap-card); } .xn-latest__title { font-size: var(--xn-fs-latest); font-weight: var(--xn-w-bold); line-height: var(--xn-lh-panel-line); color: var(--xn-ink); transition: color var(--xn-motion); } .xn-ph--img { display: block; padding: 0; } .xn-ph--img { background: var(--xn-slate); } .xn-ph--img img { display: block; width: 100%; height: 100%; object-fit: cover; } .xn-ph { display: flex; align-items: flex-end; aspect-ratio: 16 / 10; padding: var(--xn-s-pad-item); border: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-fs-tag); color: var(--xn-text-2); } .xn-sheet { position: fixed; inset: 0; z-index: var(--xn-z-sheet); display: flex; flex-direction: column; } .xn-sheet[hidden] { display: none; } .xn-sheet__top { box-sizing: content-box; display: flex; flex: none; align-items: center; justify-content: space-between; height: var(--xn-sheet-top-h); padding: 0 var(--xn-s-12) 0 var(--xn-pad); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xn-sheet__top .xn-logo { min-height: 0; } .xn-sheet__top .xn-logo .xn-logo__img { height: var(--xn-logo-size-sheet); } .xn-sheet__top .xn-logo svg { width: var(--xn-logo-size-sheet); height: var(--xn-logo-size-sheet); } .xn-sheet__close { display: flex; align-items: center; justify-content: center; width: var(--xn-target); height: var(--xn-target); } .xn-sheet__close svg { width: var(--xn-icon-close); height: var(--xn-icon-close); } .xn-sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; } .xn-sheet__foot { flex: none; padding: 0 var(--xn-pad) var(--xn-pad); } .xn-sheet__foot .xn-btn { min-height: var(--xn-btn-h-sheet); font-size: var(--xn-fs-button-sheet); } .xn-acc__btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--xn-sheet-row-h); padding: 0 var(--xn-pad); border-bottom: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-fs-acc); font-weight: var(--xn-w-semibold); } .xn-acc__sign::after { content: "+"; } .xn-acc__btn[aria-expanded="true"] .xn-acc__sign::after { content: "\2212"; } .xn-acc__panel { display: flex; flex-direction: column; gap: var(--xn-s-quarter); padding: var(--xn-s-1) var(--xn-pad) var(--xn-pad); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xn-acc__panel[hidden] { display: none; } .xn-acc__panel ul { display: flex; flex-direction: column; gap: var(--xn-s-quarter); } .xn-acc__label { padding-top: var(--xn-s-colh-gap); font-size: var(--xn-fs-label-mobile); font-weight: var(--xn-w-semibold); letter-spacing: var(--xn-ls-colh); text-transform: uppercase; color: var(--xn-text-2); } .xn-acc__link { display: flex; align-items: center; min-width: var(--xn-target); min-height: var(--xn-target); font-size: var(--xn-fs-sheet-link); font-weight: var(--xn-w-regular); } .xn-acc__link:hover { color: var(--xn-accent); } .xn-quiet { padding: var(--xn-pad); } .xn-quiet ul { display: flex; flex-direction: column; gap: var(--xn-s-half); } .xn-quiet a { display: flex; align-items: center; min-width: var(--xn-target); min-height: var(--xn-target); font-size: var(--xn-fs-button); color: var(--xn-text-3); } .xn-quiet a:hover { color: var(--xn-accent); } .xn-footer { padding-bottom: var(--xn-cookie-h, 0); border-top: var(--xn-hairline) solid var(--xn-ink); } .xn-footer > .xn-container { display: flex; flex-direction: column; gap: var(--xn-s-7); padding-top: var(--xn-s-footer-top); padding-bottom: var(--xn-s-footer-bottom); } .xn-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-footer-col-min), 1fr)); gap: var(--xn-s-5); } .xn-footer__brand { display: flex; flex-direction: column; gap: var(--xn-s-2); min-width: var(--xn-footer-brand-min); } .xn-footer__brand .xn-logo { min-height: 0; } .xn-footer__brand svg { width: var(--xn-logo-size); height: var(--xn-logo-size); } .xn-footer__brand p { max-width: var(--xn-footer-line-max); font-size: var(--xn-fs-footer-line); line-height: var(--xn-lh-footer-line); color: var(--xn-text-3); } .xn-footer__brand .xn-btn { align-self: flex-start; } .xn-footer__col { display: flex; flex-direction: column; gap: var(--xn-s-12); } .xn-footer__h { margin-bottom: var(--xn-s-half); line-height: normal; font-size: var(--xn-fs-eyebrow); font-weight: var(--xn-w-semibold); letter-spacing: var(--xn-ls-eyebrow); text-transform: uppercase; color: var(--xn-text-2); } .xn-footer__list { display: flex; flex-direction: column; gap: var(--xn-s-12); } .xn-footer__list a, .xn-footer__legal a, .xn-footer__social, .xn-footer__cookie { position: relative; } .xn-footer__list a::after, .xn-footer__legal a::after, .xn-footer__social::after, .xn-footer__cookie::after { content: ""; position: absolute; inset: calc(var(--xn-s-chev) * -1) calc(var(--xn-s-half) * -1); } .xn-footer__list a { display: block; font-size: var(--xn-fs-button); color: var(--xn-ink); transition: color var(--xn-motion); } .xn-footer__list a:hover { color: var(--xn-accent); } .xn-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--xn-s-2); padding-top: var(--xn-s-3); border-top: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-fs-small); color: var(--xn-text-2); } .xn-footer__left { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-s-1) var(--xn-s-3); } .xn-footer__legal { display: flex; flex-wrap: wrap; gap: var(--xn-s-3); } .xn-footer__legal a, .xn-footer__social, .xn-footer__cookie { font-size: var(--xn-fs-small); color: var(--xn-text-2); transition: color var(--xn-motion); } .xn-footer__legal a:hover, .xn-footer__social:hover, .xn-footer__cookie:hover { color: var(--xn-accent); } .xn-cookie { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--xn-z-cookie); max-height: var(--xn-cookie-max-h); overflow-y: auto; border-top: var(--xn-hairline) solid var(--xn-line); } .xn-cookie[data-panel="open"] { max-height: var(--xn-cookie-panel-max-h); } .xn-cookie[hidden] { display: none; } .xn-cookie:focus { outline: 0; } .xn-cookie__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xn-s-2) var(--xn-s-4); padding-block: var(--xn-s-2); } .xn-cookie__text { flex: 1 1 var(--xn-cookie-text-min); font-size: var(--xn-fs-cookie); line-height: var(--xn-lh-small); color: var(--xn-body); } .xn-cookie__text .xn-link { font-size: inherit; } .xn-cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-s-1) var(--xn-s-2); } .xn-cookie__actions .xn-btn, .xn-cookie__panel .xn-btn { min-width: var(--xn-cookie-btn-w); } .xn-cookie[data-gpc="1"] .xn-cookie__actions .xn-btn, .xn-cookie[data-gpc="1"] .xn-cookie__manage { display: none; } .xn-cookie__manage { display: inline-flex; align-items: center; justify-content: center; min-width: var(--xn-target); min-height: var(--xn-target); padding-inline: var(--xn-s-1); font-size: var(--xn-fs-cookie); } .xn-cookie__panel { display: flex; flex: 1 1 100%; flex-direction: column; align-items: flex-start; gap: var(--xn-s-3); padding-top: var(--xn-s-3); border-top: var(--xn-hairline) solid var(--xn-line); } .xn-cookie__panel[hidden] { display: none; } .xn-cookie__h { font-size: var(--xn-fs-h4); font-weight: var(--xn-w-semibold); line-height: var(--xn-lh-h4); color: var(--xn-ink); } .xn-cookie__cats { display: grid; width: 100%; max-width: var(--xn-cookie-panel-w); } .xn-cookie__cat { display: grid; gap: var(--xn-s-1); padding-block: var(--xn-s-2); border-top: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-fs-cookie); line-height: var(--xn-lh-small); color: var(--xn-body); } .xn-cookie__cat:first-child { border-top: 0; padding-top: 0; } .xn-cookie__cathead { display: flex; align-items: center; justify-content: space-between; gap: var(--xn-s-2); min-height: var(--xn-target); } .xn-cookie__catname { font-size: var(--xn-fs-cookie); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xn-cookie__always { font-size: var(--xn-fs-small); font-weight: var(--xn-w-semibold); color: var(--xn-body); } .xn-cookie__gpc { max-width: var(--xn-cookie-panel-w); font-size: var(--xn-fs-small); line-height: var(--xn-lh-small); color: var(--xn-body); } .xn-cookie__gpc[hidden] { display: none; } .xn-switch { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; min-width: var(--xn-target); min-height: var(--xn-target); cursor: pointer; } .xn-switch__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .xn-switch__track { position: relative; width: var(--xn-switch-w); height: var(--xn-switch-h); border: var(--xn-hairline) solid var(--xn-ink); border-radius: var(--xn-switch-h); background: var(--xn-ground); transition: background-color var(--xn-motion); } .xn-switch__track::after { content: ""; position: absolute; top: 50%; left: var(--xn-s-item); width: var(--xn-switch-knob); height: var(--xn-switch-knob); margin-top: calc(var(--xn-switch-knob) / -2); border-radius: 50%; background: var(--xn-ink); transition: transform var(--xn-motion), background-color var(--xn-motion); } .xn-switch__input:checked + .xn-switch__track { background: var(--xn-ink); } .xn-switch__input:checked + .xn-switch__track::after { background: var(--xn-ground); transform: translateX(var(--xn-switch-travel)); } .xn-switch__input:focus-visible + .xn-switch__track { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-focus-offset); } .xn-switch__input:disabled { cursor: not-allowed; } .xn-switch__input:disabled + .xn-switch__track { border-color: var(--xn-body); opacity: 0.5; } @media (min-width: 1024px) { .xn-nav { display: flex; flex-wrap: wrap; align-items: center; } .xn-header__cta { display: inline-flex; } .xn-menu-btn { display: none; } } @media (max-width: 1023px) { .xn-mega { display: none; } } @media (max-width: 759px) { .xn-cookie__actions { width: 100%; } .xn-cookie__actions .xn-btn { flex: 1 1 0; min-width: 0; } .xn-cookie__manage { flex: 1 1 100%; order: 3; } .xn-cookie__panel .xn-btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .xn-skip, .xn-header, .xn-header *, .xn-footer, .xn-footer *, .xn-sheet, .xn-sheet *, .xn-cookie, .xn-cookie * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } .xn-header-sticky .xn-header { position: sticky; top: 0; } .admin-bar.xn-header-sticky .xn-header { top: 32px; } @media (max-width: 782px) { .admin-bar.xn-header-sticky .xn-header { top: 46px; } }
:root, .xb-preview { --xl-sec: var(--xn-px-104); --xl-plain: var(--xn-px-96); --xl-hero-pt: var(--xn-px-72); --xl-hero-pb: var(--xn-px-96); --xl-h1-fs: var(--xn-fs-display); --xl-h1-lh: 1.03; --xl-h1-ls: -0.03em; --xl-h1-max: var(--xn-px-900); --xl-lead-fs: var(--xn-px-19); --xl-lead-max: var(--xn-px-720); --xl-h2-fs: clamp(var(--xn-px-26), 2.6vw, var(--xn-px-34)); --xl-h2-lh: 1.12; --xl-h2-ls: -0.018em; --xl-h3-fs: var(--xn-px-22); --xl-h3-lh: 1.3; --xl-h3-ls: -0.006em; --xl-body-lh: 1.65; --xl-hero-btn-pt: 0; --xl-art-w: var(--xn-px-720); --xl-art-pt: 0; --xl-toc-pad: var(--xn-px-8) 0; --xl-part-gap: var(--xn-px-18); --xl-part-pad: var(--xn-px-56) 0; --xl-part-rule: var(--xn-hairline) solid var(--xn-line); --xl-prose-fs: var(--xn-px-17); --xl-prose-lh: 1.7; --xl-prose-color: var(--xn-prose-ink); --xl-sum-h: var(--xn-px-60); --xl-sum-fs: var(--xn-px-18); --xl-btn-h: var(--xn-btn-h); --xl-cta-gap: var(--xn-px-20); } .xb-lay--home { --xl-sec: var(--xn-px-112); --xl-h3-fs: var(--xn-px-22); } .xb-lay--services { --xl-lead-max: var(--xn-px-700); } .xb-lay--pillar { --xl-h1-max: none; --xl-lead-max: none; --xl-sum-h: var(--xn-px-64); --xl-sum-fs: var(--xn-px-19); } .xb-lay--offering { --xl-hero-pb: var(--xn-px-80); --xl-hero-btn-pt: var(--xn-px-4); --xl-h2-fs: var(--xn-fs-h2-art); --xl-h2-lh: 1.15; --xl-h2-ls: -0.015em; --xl-h3-fs: var(--xn-px-20); --xl-h3-ls: 0; --xl-body-lh: 1.7; --xl-art-pt: 0; } .xb-lay--products { --xl-sec: var(--xn-px-104); --xl-cta-gap: var(--xn-px-16); } .xb-lay--proprietary { --xl-hero-pb: var(--xn-px-72); --xl-plain: var(--xn-px-104); --xl-h3-fs: var(--xn-px-28); --xl-h3-lh: 1.2; --xl-h3-ls: -0.012em; } .xb-lay--productdev { --xl-h1-max: none; --xl-lead-max: none; --xl-h3-fs: var(--xn-px-24); --xl-h3-lh: 1.25; --xl-h3-ls: -0.01em; } .xb-lay--insights { --xl-sec: var(--xn-px-96); --xl-hero-pb: var(--xn-px-72); } .xb-lay--report { --xl-h1-fs: var(--xn-fs-display); --xl-h1-lh: 1.05; --xl-h1-ls: -0.026em; --xl-lead-fs: var(--xn-px-19); --xl-lead-max: var(--xn-px-760); --xl-h2-fs: var(--xn-fs-h2-art); --xl-h2-lh: 1.2; --xl-h2-ls: -0.012em; --xl-art-w: var(--xn-px-720); --xl-art-pt: var(--xn-px-56); --xl-toc-pad: var(--xn-px-7) 0; --xl-part-gap: var(--xn-px-20); --xl-part-pad: var(--xn-px-48) 0 0; --xl-part-rule: 0; --xl-prose-fs: var(--xn-px-18); --xl-prose-lh: 1.75; --xl-prose-color: var(--xn-prose-ink); } .xb-lay--resources { --xl-hero-pb: var(--xn-px-56); --xl-lead-max: var(--xn-px-760); --xl-h2-fs: clamp(var(--xn-px-28), 2.8vw, var(--xn-px-38)); --xl-h2-lh: 1.15; --xl-h2-ls: -0.016em; } .xb-lay--assessment { --xl-h1-fs: clamp(var(--xn-px-36), 4.2vw, var(--xn-px-56)); --xl-h1-lh: 1.06; --xl-h1-ls: -0.022em; --xl-h1-max: var(--xn-px-860); --xl-h2-fs: clamp(var(--xn-px-24), 2.4vw, var(--xn-px-32)); --xl-h2-lh: 1.2; --xl-h2-ls: -0.012em; } .xb-lay--about { --xl-h1-max: var(--xn-px-980); --xl-lead-max: var(--xn-px-760); --xl-hero-pb: 0; --xl-h3-fs: var(--xn-px-21); --xl-h3-ls: 0; --xl-body-lh: 1.7; } .xb-lay--discuss { --xl-h1-fs: clamp(var(--xn-px-40), 4.8vw, var(--xn-px-60)); --xl-h1-lh: 1.05; --xl-h1-ls: -0.024em; --xl-h2-fs: clamp(var(--xn-px-24), 2.4vw, var(--xn-px-30)); --xl-h2-lh: 1.2; --xl-h2-ls: normal; --xl-btn-h: var(--xn-px-52); } .xb-lay--contact { --xl-hero-pb: var(--xn-px-64); } .xb-page, .xb-preview { font-family: var(--xn-font); font-size: var(--xn-px-16); font-weight: var(--xn-w-regular); line-height: normal; color: var(--xn-ink); background: var(--xn-ground); -webkit-font-smoothing: antialiased; } .xb-page :where(*), .xb-preview :where(*) { box-sizing: border-box; min-width: auto; font-family: inherit; text-wrap: wrap; text-rendering: auto; overflow-wrap: normal; } .xb-page :where(h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote), .xb-preview :where(h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, blockquote) { margin: 0; } .xb-page :where(figcaption, blockquote), .xb-preview :where(figcaption, blockquote) { margin: 0; max-width: none; padding: 0; border: 0; font: inherit; color: inherit; } .xb-page :where(label), .xb-preview :where(label) { display: inline; font-size: inherit; font-weight: inherit; } .xb-page :where(a:not(.xn-btn)), .xb-preview :where(a:not(.xn-btn)) { color: var(--xn-accent); text-decoration: none; } .xb-page :where(a:not(.xn-btn)):hover, .xb-preview :where(a:not(.xn-btn)):hover { color: var(--xn-accent-hover); } .xb-page :where(a[class]:not(.xn-btn)):hover, .xb-preview :where(a[class]:not(.xn-btn)):hover { color: inherit; } .xb-page :where(a, button, summary, input, select, textarea):focus-visible, .xb-preview :where(a, button, summary, input, select, textarea):focus-visible { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-focus-offset); } .xb-h1 { font-size: var(--xl-h1-fs); font-weight: var(--xn-w-semibold); line-height: var(--xl-h1-lh); letter-spacing: var(--xl-h1-ls); } .xb-h2 { font-size: var(--xl-h2-fs); font-weight: var(--xn-w-semibold); line-height: var(--xl-h2-lh); letter-spacing: var(--xl-h2-ls); } .xb-h3 { font-size: var(--xl-h3-fs); font-weight: var(--xn-w-semibold); line-height: var(--xl-h3-lh); letter-spacing: var(--xl-h3-ls); } .xb-h3--20 { font-size: var(--xn-px-20); } .xb-h3--26 { font-size: var(--xn-px-26); } .xb-sg .xb-h3, .xb-lc .xb-h3 { } .xb-sg--includes .xb-h3, .xb-sg--practice .xb-h3 { font-size: var(--xn-px-19); } .xb-rc--stages .xb-h3 { font-size: var(--xl-h3-fs); } .xb-lead { font-size: var(--xl-lead-fs); line-height: 1.6; color: var(--xn-body); } .xb-lead--600 { max-width: var(--xn-px-600); } .xb-body { font-size: var(--xn-px-16); line-height: var(--xl-body-lh); color: var(--xn-body); } .xb-body--16 { font-size: var(--xn-px-16); } .xb-small { font-size: var(--xn-px-14); line-height: 1.55; color: var(--xn-text-2); } .xb-small--15 { font-size: var(--xn-px-15); } .xb-small--16 { font-size: var(--xn-px-16); } .xb-strong { font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-semibold { font-weight: var(--xn-w-semibold); } .xb-ink { color: var(--xn-ink); } .xb-accent { color: var(--xn-accent); } .xb-tlink { padding-bottom: var(--xn-px-3); border-bottom: var(--xn-hairline) solid var(--xn-ink); font-size: var(--xn-px-15); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-tlink:hover { color: var(--xn-accent); border-color: var(--xn-accent); } .xb-page .xn-btn, .xb-preview .xn-btn { min-height: var(--xl-btn-h); } .xb-page .xn-tag, .xb-preview .xn-tag { display: inline-block; line-height: normal; letter-spacing: 0.04em; } .xb-stack { display: flex; flex-direction: column; } .xb-stack--6 { gap: var(--xn-px-6); } .xb-stack--8 { gap: var(--xn-px-8); } .xb-stack--10 { gap: var(--xn-px-10); } .xb-stack--12 { gap: var(--xn-px-12); } .xb-stack--14 { gap: var(--xn-px-14); } .xb-stack--16 { gap: var(--xn-px-16); } .xb-stack--18 { gap: var(--xn-px-18); } .xb-stack--20 { gap: var(--xn-px-20); } .xb-stack--24 { gap: var(--xn-px-24); } .xb-stack--28 { gap: var(--xn-px-28); } .xb-stack--32 { gap: var(--xn-px-32); } .xb-stack--40 { gap: var(--xn-px-40); } .xb-stack--48 { gap: var(--xn-px-48); } .xb-cta-left { gap: var(--xl-cta-gap); } .xb-stack--gap-numbered { gap: var(--xn-px-56); } .xb-stack--gap-stages, .xb-stack--gap-principles { gap: var(--xn-px-48); } .xb-start { align-items: flex-start; } .xb-self-start { align-self: flex-start; } .xb-grow { flex-grow: 1; } .xb-pt8 { padding-top: var(--xn-px-8); } .xb-pb16 { padding-bottom: var(--xn-px-16); } .xb-pb32 { padding-bottom: var(--xn-px-32); } .xb-mt24 { margin-top: var(--xn-px-24); } .xb-max-640 { max-width: var(--xn-px-640); } .xb-max-760 { max-width: var(--xn-px-760); } .xb-max-860 { max-width: var(--xn-px-860); } .xb-row { display: flex; flex-wrap: wrap; } .xb-row--btn { gap: var(--xn-px-14); } .xb-row--8 { gap: var(--xn-px-8); } .xb-row--24 { gap: var(--xn-px-24); } .xb-row--20 { gap: var(--xn-px-20); } .xb-row--pt8 { padding-top: var(--xn-px-8); } .xb-row--pt6 { padding-top: var(--xn-px-6); } .xb-hero .xb-row--btn:last-child { padding-top: var(--xl-hero-btn-pt); } .xb-sec { padding: var(--xl-sec) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-sec--open { padding-top: 0; border-top: 0; } .xb-sec--plain { padding: var(--xl-plain) 0; border-top: 0; } .xb-sec--96 { padding: var(--xn-px-96) 0; } .xb-sec--related { padding: var(--xn-px-96) 0; } .xb-head { display: flex; flex-direction: column; gap: var(--xn-px-16); } .xb-head--numbered, .xb-head--principles { max-width: var(--xn-px-760); } .xb-head--stages { max-width: var(--xn-px-720); } .xb-headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--xn-px-24); } .xb-headrow .xb-head { max-width: var(--xn-px-680); } .xb-sec--lc .xb-head { max-width: var(--xn-px-640); } .xb-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sm)), 1fr)); gap: var(--sg); } .xb-split--320 { --sm: var(--xn-px-320); } .xb-split--340 { --sm: var(--xn-px-340); } .xb-split--360 { --sm: var(--xn-px-360); } .xb-split--400 { --sm: var(--xn-px-400); } .xb-split--48 { --sg: var(--xn-px-48); } .xb-split--64 { --sg: var(--xn-px-64); } .xb-split--end { align-items: end; } .xb-split--center { align-items: center; } .xb-crumb { font-size: var(--xn-px-14); color: var(--xn-text-2); } .xb-crumb a, .xb-crumb a:hover { color: var(--xn-text-2); } .xb-hero--plain, .xb-hero--split, .xb-hero--download { padding: var(--xl-hero-pt) 0 var(--xl-hero-pb); } .xb-hero--plain .xb-h1 { max-width: var(--xl-h1-max); } .xb-hero--plain .xb-lead { max-width: var(--xl-lead-max); } .xb-hero__split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-440)), 1fr)); gap: var(--xn-px-64); align-items: end; } .xb-note { display: flex; flex-direction: column; gap: var(--xn-px-14); padding-top: var(--xn-px-28); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-tabs { display: flex; flex-wrap: wrap; gap: var(--xn-px-28); margin-top: var(--xn-px-40); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-tabs a { box-sizing: content-box; display: inline-flex; align-items: center; min-height: var(--xn-target); padding: 0 var(--xn-px-2); border-bottom: 2px solid transparent; font-size: var(--xn-px-15); color: var(--xn-ink); } .xb-tabs a.is-current { border-bottom-color: var(--xn-ink); font-weight: var(--xn-w-semibold); } .xb-hero--article { padding: var(--xn-px-64) 0 var(--xn-px-56); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-hero--article .xb-h1 { max-width: var(--xl-h1-max); } .xb-hero--article .xb-lead { max-width: var(--xl-lead-max); } .xb-byline { display: flex; flex-wrap: wrap; gap: var(--xn-px-32); align-items: center; padding-top: var(--xn-px-8); } .xb-author { display: flex; gap: var(--xn-px-14); align-items: center; } .xb-author__img { box-sizing: content-box; display: flex; align-items: center; justify-content: center; width: var(--xn-px-48); height: var(--xn-px-48); border: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-px-11, 11px); color: var(--xn-text-2); } .xb-author__img img { width: 100%; height: 100%; object-fit: cover; } .xb-author__name { font-size: var(--xn-px-15); font-weight: var(--xn-w-semibold); } .xb-hero--tool { padding: var(--xn-px-64) 0 var(--xn-px-48); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-hero--tool .xb-h1 { max-width: var(--xl-h1-max); } .xb-hero--tool .xb-lead { max-width: var(--xl-lead-max); } .xb-hero--figure { padding: var(--xn-px-104) 0 var(--xn-px-96); } .xb-hero__figure { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-460)), 1fr)); gap: var(--xn-px-64); align-items: center; } .xb-figbox { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 4; border: var(--xn-hairline) solid var(--xn-line); background: var(--xn-ground); } .xb-figbox svg { width: 88%; height: auto; } .xb-figbox img { width: 100%; height: 100%; object-fit: cover; } .xb-figcap { position: absolute; left: var(--xn-px-16); bottom: var(--xn-px-12); } .xb-diagram { display: block; width: 100%; height: auto; } .xb-fig .xb-diagram { display: inline; } .xb-d-node { fill: none; stroke: var(--xn-ink); stroke-width: 1; } .xb-d-path { fill: none; stroke: var(--xn-accent); stroke-width: 2.5; } .xb-d-break { fill: none; stroke: var(--xn-break); stroke-width: 2; } .xb-diagram--curve .xb-d-break { stroke-width: 2.5; } .xb-d-dash { stroke-dasharray: 5 5; } .xb-d-wash { fill: var(--xn-break-wash); } .xb-d-mark { fill: var(--xn-ground); stroke: var(--xn-break); stroke-width: 2; } .xb-d-ring { fill: var(--xn-ground); stroke: var(--xn-ink); stroke-width: 1.5; } .xb-d-text { font-size: var(--xn-px-13, 13px); fill: var(--xn-text-2); } .xb-d-break-text { fill: var(--xn-break); } .xb-d-stage { font-size: var(--xn-px-18); font-weight: var(--xn-w-semibold); fill: var(--xn-ink); text-anchor: middle; } .xb-d-sub { font-size: var(--xn-px-14); fill: var(--xn-text-2); text-anchor: middle; } .xb-rc { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--m), 1fr)); gap: var(--g); padding: 0; list-style: none; } .xb-rc--numbered { --m: var(--xn-px-260); --g: var(--xn-px-48); } .xb-rc--stages { --m: var(--xn-px-230); --g: var(--xn-px-40); } .xb-rc--principles { --m: var(--xn-px-240); --g: var(--xn-px-40); } .xb-rc__item { display: flex; flex-direction: column; gap: var(--xn-px-14); padding-top: var(--xn-px-24); border-top: 2px solid var(--xn-ink); } .xb-rc--stages .xb-rc__item, .xb-rc--principles .xb-rc__item { gap: var(--xn-px-12); padding-top: var(--xn-px-22); } .xb-rc--principles .xb-body { font-size: var(--xn-px-16); } .xb-sg { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--m), 1fr)); gap: var(--g); } .xb-sg--includes { --m: var(--xn-px-240); --g: var(--xn-px-32); } .xb-sg--practice { --m: var(--xn-px-240); --g: var(--xn-px-40); } .xb-sg--standards { --m: var(--xn-px-220); --g: var(--xn-px-32); } .xb-sg__item { display: flex; flex-direction: column; gap: var(--xn-px-8); } .xb-sg--practice .xb-sg__item { gap: var(--xn-px-10); } .xb-sg--includes .xb-h3 { font-size: var(--xn-px-19); } .xb-std-title { font-size: var(--xn-px-18); font-weight: var(--xn-w-semibold); } .xb-lc { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-300), 1fr)); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-lc__item { display: flex; flex-direction: column; gap: var(--xn-px-16); padding: var(--xn-px-32) var(--xn-px-32) var(--xn-px-40) 0; color: var(--xn-ink); } .xb-rows { display: flex; flex-direction: column; } .xb-rowlink { display: flex; justify-content: space-between; align-items: baseline; gap: var(--xn-px-16); padding: var(--xn-px-18) 0; border-top: var(--xn-hairline) solid var(--xn-line); color: var(--xn-ink); } .xb-rowlink:hover { color: var(--xn-accent); } .xb-last { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-rowlink__title { font-size: var(--xn-px-19); font-weight: var(--xn-w-semibold); line-height: 1.3; letter-spacing: var(--xl-h3-ls); } .xb-rowlink--plain .xb-rowlink__title { line-height: normal; letter-spacing: normal; } .xb-rowlink--meta { align-items: stretch; } .xb-rowlink--stack { flex-direction: column; gap: var(--xn-px-8); } .xb-post { display: flex; flex-direction: column; gap: var(--xn-px-10); padding: var(--xn-px-24) 0; border-top: var(--xn-hairline) solid var(--xn-line); color: var(--xn-ink); } .xb-post:hover .xb-h3 { color: var(--xn-accent); } .xb-offs { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-240), 1fr)); column-gap: var(--xn-px-40); } .xb-offs--narrow { grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-220), 1fr)); } .xb-off { display: flex; flex-direction: column; gap: var(--xn-px-10); padding: var(--xn-px-24) 0; border-top: var(--xn-hairline) solid var(--xn-line); color: var(--xn-ink); } .xb-off:hover .xb-h3 { color: var(--xn-accent); } .xb-lr { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-220), 1fr)); column-gap: var(--xn-px-40); } .xb-lr__item { padding: var(--xn-px-22) 0; border-top: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-px-18); font-weight: var(--xn-w-semibold); } .xb-cards { display: grid; gap: var(--xn-px-24); } .xb-cards--large { grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-300), 1fr)); } .xb-cards--compact { grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-260), 1fr)); } .xb-card { display: flex; flex-direction: column; gap: var(--xn-px-16); padding: var(--xn-px-32); border: var(--xn-hairline) solid var(--xn-line); } .xb-cards--compact .xb-card { gap: var(--xn-px-14); padding: var(--xn-px-28); } .xb-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--xn-px-12); } .xb-cards--compact .xb-card__top { gap: var(--xn-px-8); align-items: stretch; } .xb-ph { display: flex; align-items: flex-end; padding: var(--xn-px-14); border: var(--xn-hairline) solid var(--xn-line); font-size: var(--xn-px-13, 13px); color: var(--xn-text-2); } .xb-ph--16-10 { aspect-ratio: 16 / 10; } .xb-ph--16-10.xb-slot--wide { aspect-ratio: 1200 / 630; } .xb-ph--small { font-size: inherit; } .xb-ph--square { aspect-ratio: 1 / 1; max-width: var(--xn-px-420); padding: var(--xn-px-16); font-size: var(--xn-px-14); } .xb-ph--note { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: var(--xn-px-4); padding: var(--xn-px-16); } .xb-ph--note b { font-size: var(--xn-px-14); color: var(--xn-ink); } .xb-ph img { width: 100%; height: 100%; object-fit: cover; } .xb-feature { padding: 0 0 var(--xn-px-96); } .xb-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-440)), 1fr)); gap: var(--xn-px-56); align-items: center; color: var(--xn-ink); } .xb-fc { display: flex; flex-direction: column; gap: var(--xn-px-18); color: var(--xn-ink); } .xb-tc { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--m), 1fr)); gap: var(--g); } .xb-tc--tools { --m: var(--xn-px-280); --g: var(--xn-px-24); } .xb-tc--types { --m: var(--xn-px-230); --g: var(--xn-px-32); } .xb-tc--labeled { --m: var(--xn-px-220); --g: var(--xn-px-32); } .xb-tc--related { --m: var(--xn-px-260); --g: var(--xn-px-32); } .xb-tc__item { display: flex; flex-direction: column; gap: var(--xn-px-12); padding-top: var(--xn-px-24); border-top: 2px solid var(--xn-ink); color: var(--xn-ink); } .xb-tc__item--type { gap: var(--xn-px-8); padding-top: var(--xn-px-20); } .xb-tc__title { font-size: var(--xn-px-20); font-weight: var(--xn-w-semibold); line-height: 1.3; } .xb-related { padding: var(--xn-px-80) 0 var(--xn-px-96); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-offer { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-260)), 1fr)); gap: var(--xn-px-32); padding: var(--xn-px-40) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-offer:last-child { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-300)), 1fr)); gap: var(--xn-px-40); padding: var(--xn-px-48) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-svc:last-child { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-ticks { display: flex; flex-direction: column; gap: var(--xn-px-10); padding: 0; list-style: none; } .xb-ticks li { position: relative; padding-left: var(--xn-px-22); font-size: var(--xn-px-16); line-height: 1.55; color: var(--xn-body); } .xb-ticks li::before { content: ""; position: absolute; left: 0; top: var(--xn-px-11, 11px); width: var(--xn-px-10); height: 1.5px; background: var(--xn-ink); } .xb-ticks--article { gap: var(--xn-px-12); } .xb-ticks--article li { font-size: var(--xn-px-17); line-height: 1.6; } .xb-faq__item { border-top: var(--xn-hairline) solid var(--xn-line); } .xb-faq__item:last-child { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--xn-px-24); min-height: var(--xl-sum-h); font-size: var(--xl-sum-fs); font-weight: var(--xn-w-semibold); list-style: none; cursor: pointer; } .xb-faq__item summary::-webkit-details-marker { display: none; } .xb-faq__item .xb-body { padding: 0 0 var(--xn-px-24); max-width: var(--xn-px-760); } .xb-lay--offering .xb-faq__item .xb-body { padding-bottom: var(--xn-px-22); max-width: none; } .xb-pg__cat { padding: var(--xn-px-24) 0 0; } .xb-prod { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-420)), 1fr)); gap: var(--xn-px-56); align-items: center; padding: var(--xn-px-72) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-prod--last { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-prod--text { grid-template-columns: minmax(0, var(--xn-px-760)); } .xb-meta { margin: var(--xn-px-14) 0; display: grid; grid-template-columns: var(--xn-px-120) 1fr; gap: var(--xn-px-8) var(--xn-px-16); padding-top: var(--xn-px-8); font-size: var(--xn-px-14); line-height: 1.5; } .xb-meta dt { color: var(--xn-text-2); } .xb-meta dd { margin: 0; color: var(--xn-ink); } .xb-lib { padding: 0 0 var(--xn-px-104); } .xb-chips { display: flex; flex-wrap: wrap; gap: var(--xn-px-10); padding-bottom: var(--xn-px-24); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-chip { min-height: var(--xn-target); padding: 0 var(--xn-px-18); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); background: var(--xn-ground); font: inherit; font-size: var(--xn-px-15); font-weight: var(--xn-w-medium); color: var(--xn-ink); cursor: pointer; } .xb-chip[aria-pressed="true"], .xb-chip[aria-current="true"] { background: var(--xn-ink); border-color: var(--xn-ink); color: var(--xn-ground); } .xb-chips--bare { padding-bottom: 0; border-bottom: 0; } a.xb-chip { display: inline-flex; align-items: center; text-decoration: none; } .xb-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-8); padding-top: var(--xn-px-32); font-size: var(--xn-px-15); } .xb-pager__num, .xb-pager__step { display: inline-flex; align-items: center; justify-content: center; min-height: var(--xn-target); min-width: var(--xn-target); padding: 0 var(--xn-px-12); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); color: var(--xn-ink); text-decoration: none; } .xb-pager__num[aria-current="page"] { background: var(--xn-ink); border-color: var(--xn-ink); color: var(--xn-ground); } .xb-lib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--xn-px-300)), 1fr)); gap: var(--xn-px-20); } .xb-item { display: flex; flex-direction: column; gap: var(--xn-px-12); min-height: var(--xn-px-220); padding: var(--xn-px-28); border: var(--xn-hairline) solid var(--xn-line); color: var(--xn-ink); } .xb-item:hover { border-color: var(--xn-ink); color: var(--xn-ink); } .xb-item[hidden] { display: none; } .xb-item__top { display: flex; justify-content: space-between; align-items: center; gap: var(--xn-px-8); } .xb-item__title { font-size: var(--xn-px-20); font-weight: var(--xn-w-semibold); line-height: 1.3; } .xb-label { font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); } .xb-page .xb-input, .xb-f input:not([type="checkbox"]):not([type="radio"]), .xb-f select, .xb-f textarea { width: 100%; border: var(--xn-hairline) solid var(--xn-field); border-radius: var(--xn-radius); background: var(--xn-ground); padding: 0 var(--xn-px-14); font: inherit; font-size: var(--xn-px-16); color: var(--xn-ink); } .xb-page .xb-input { box-sizing: content-box; height: var(--xn-px-48); } .xb-page .xb-input--grow { flex: 1 1 var(--xn-px-240); width: auto; } .xb-nl__row { display: flex; flex-wrap: wrap; gap: var(--xn-px-10); } .xb-assess { display: flex; flex-wrap: wrap; gap: var(--xn-px-64); padding-top: var(--xn-px-48); padding-bottom: var(--xn-px-104); } .xb-assess__main { display: flex; flex-direction: column; flex: 999 1 var(--xn-px-560); min-width: 0; max-width: var(--xn-px-760); } .xb-assess__aside { display: flex; flex-direction: column; flex: 1 1 var(--xn-px-280); gap: var(--xn-px-32); max-width: var(--xn-px-360); } .xb-fs { display: flex; flex-direction: column; gap: var(--xn-px-12); min-width: 0; margin: 0; padding: var(--xn-px-28) 0; border: 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-fs legend { padding: 0 0 var(--xn-px-12); font-size: var(--xn-px-19); font-weight: var(--xn-w-semibold); line-height: 1.4; } .xb-opt { box-sizing: content-box; display: flex; align-items: center; gap: var(--xn-px-14); min-height: var(--xn-px-48); padding: 0 var(--xn-px-16); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); font-size: var(--xn-px-16); cursor: pointer; } .xb-opt input { width: var(--xn-px-18); height: var(--xn-px-18); margin: 0; accent-color: var(--xn-accent); } .xb-opt.is-on { border-color: var(--xn-accent); background: var(--xn-accent-wash); } .xb-assess__actions { display: flex; flex-wrap: wrap; gap: var(--xn-px-14); padding-top: var(--xn-px-28); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-assess__actions .xn-btn[disabled] { opacity: 0.45; cursor: not-allowed; } .xb-result { display: flex; flex-direction: column; gap: var(--xn-px-20); margin-top: var(--xn-px-48); padding: var(--xn-px-36); border: var(--xn-hairline) solid var(--xn-ink); } .xb-result[hidden] { display: none; } .xb-result__weak { display: flex; flex-direction: column; gap: var(--xn-px-8); padding-top: var(--xn-px-8); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-result__weaklabel { padding-top: var(--xn-px-16); font-size: var(--xn-px-16); font-weight: var(--xn-w-semibold); } .xb-asidebox { display: flex; flex-direction: column; gap: var(--xn-px-12); padding-top: var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-nextlink { font-size: var(--xn-px-16); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-enq { display: flex; flex-wrap: wrap; gap: var(--xn-px-72); padding-top: var(--xn-px-64); padding-bottom: var(--xn-px-112); } .xb-enq__left { flex: 1 1 var(--xn-px-340); max-width: var(--xn-px-440); } .xb-enq__right { flex: 999 1 var(--xn-px-520); min-width: 0; max-width: var(--xn-px-680); } .xb-enq__steps { padding: 0; list-style: none; border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-enq__steps li { display: grid; grid-template-columns: var(--xn-px-40) 1fr; gap: var(--xn-px-12); padding: var(--xn-px-22) 0; border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-link16 { font-size: var(--xn-px-16); font-weight: var(--xn-w-semibold); } .xb-form { display: flex; flex-direction: column; gap: var(--xn-px-26, 26px); padding-top: var(--xn-px-32); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-240), 1fr)); gap: var(--xn-px-26, 26px); } .xb-f { display: flex; flex-direction: column; gap: var(--xn-px-8); } .xb-f label { font-size: var(--xn-px-15); font-weight: var(--xn-w-semibold); } .xb-f__opt { font-weight: var(--xn-w-regular); color: var(--xn-text-2); } .xb-f input:not([type="checkbox"]):not([type="radio"]), .xb-f select { height: var(--xn-px-50, 50px); } .xb-f textarea { min-height: var(--xn-px-120); padding: var(--xn-px-12) var(--xn-px-14); line-height: 1.5; resize: vertical; } .xb-f [aria-invalid="true"] { border-color: var(--xn-error); } .xb-err { font-size: var(--xn-px-14); color: var(--xn-error); } .xb-err[hidden] { display: none; } .xb-err--summary { font-size: var(--xn-px-15); font-weight: var(--xn-w-semibold); } .xb-err--consent { margin-top: calc(var(--xn-px-14) * -1); } .xb-consent { display: flex; align-items: flex-start; gap: var(--xn-px-12); font-size: var(--xn-px-15); line-height: 1.55; color: var(--xn-body); cursor: pointer; } .xb-consent input { flex-shrink: 0; width: var(--xn-px-20); height: var(--xn-px-20); margin-top: 1px; accent-color: var(--xn-accent); } .xb-btn52 { min-height: var(--xn-px-52); padding: 0 var(--xn-px-28); font-size: var(--xn-px-16); } .xb-ok { display: flex; flex-direction: column; gap: var(--xn-px-18); padding: var(--xn-px-40); border: var(--xn-hairline) solid var(--xn-ink); } .xb-ok[hidden] { display: none; } .xb-boxes { padding: 0 0 var(--xn-px-104); } .xb-boxes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--xn-px-340)), 1fr)); column-gap: var(--xn-px-64); } .xb-box { display: flex; flex-direction: column; gap: var(--xn-px-10); padding: var(--xn-px-28) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-mail { align-self: flex-start; padding-bottom: var(--xn-px-2); border-bottom: var(--xn-hairline) solid var(--xn-ink); font-size: var(--xn-px-20); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-mail:hover { color: var(--xn-accent); border-color: var(--xn-accent); } .xb-pointer { padding: var(--xn-px-72) 0 var(--xn-px-96); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-book { scroll-margin-top: var(--xn-px-96); } .xb-book .xb-row { align-items: center; } .xb-book [hidden] { display: none; } .xb-book__frame { margin-top: var(--xn-px-32); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-book__frame iframe { display: block; width: 100%; height: var(--xn-px-720); border: 0; } .xb-art { display: flex; flex-wrap: wrap; gap: var(--xn-px-64); padding-top: var(--xl-art-pt); padding-bottom: var(--xn-px-96); } .xb-art__aside { flex: 1 1 var(--xn-px-200); max-width: var(--xn-px-240); } .xb-art__main { flex: 999 1 var(--xn-px-560); min-width: 0; max-width: var(--xl-art-w); } .xb-toc { padding-top: var(--xn-px-16); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-toc .xn-eyebrow { padding-bottom: var(--xn-px-8); } .xb-toc a { display: block; padding: var(--xl-toc-pad); font-size: var(--xn-px-14); color: var(--xn-text-3); } .xb-toc a:hover { color: var(--xn-accent); } .xb-part { display: flex; flex-direction: column; gap: var(--xl-part-gap); padding: var(--xl-part-pad); border-top: var(--xl-part-rule); } .xb-art__main > .xb-part:first-child { padding-top: 0; border-top: 0; } .xb-lay--report .xb-art__main > .xb-part:first-child { padding-top: var(--xn-px-48); } .xb-prose { font-size: var(--xl-prose-fs); line-height: var(--xl-prose-lh); color: var(--xl-prose-color); } .xb-brief { display: flex; flex-direction: column; gap: var(--xn-px-16); padding: var(--xn-px-32); border: var(--xn-hairline) solid var(--xn-ink); } .xb-prose--brief { font-size: var(--xn-px-17); } .xb-steps { display: flex; flex-direction: column; padding: 0; list-style: none; } .xb-steps li { display: grid; grid-template-columns: var(--xn-px-56) 1fr; gap: var(--xn-px-16); padding: var(--xn-px-20) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-steps li:last-child { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-fig { border: var(--xn-hairline) solid var(--xn-line); } .xb-exhibit { margin: var(--xn-gap-rule) 0 0; padding-top: var(--xn-gap-rule); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-exhibit__label { margin: 0 0 var(--xn-px-6); } .xb-exhibit__title { margin: 0 0 var(--xn-px-16); font-size: var(--xn-px-19); line-height: 1.35; font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-exhibit__body { overflow-x: auto; } .xb-exhibit__body picture { display: block; } .xb-exhibit__body img { display: block; width: 100%; height: auto; } @media (max-width: 759px) { .xb-exhibit__body picture { width: var(--xn-px-760); } .xb-exhibit__body img { width: var(--xn-px-760); max-width: none; } } .xb-exhibit figcaption { padding-top: var(--xn-px-14); } .xb-exhibit__source { margin: var(--xn-px-8) 0 0; } .xb-exhibit__desc { margin-top: var(--xn-px-12); } .xb-exhibit__desc summary { cursor: pointer; font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-exhibit__desc p { margin-top: var(--xn-px-8); } .xb-fig--article { margin: var(--xn-px-36) 0 0; padding: var(--xn-px-28); } .xb-fig--article figcaption { padding-top: var(--xn-px-14); } .xb-fig--wide { padding: var(--xn-px-40) var(--xn-px-32); } .xb-fig picture, .xb-figbox picture, .xb-ph picture { display: block; } .xb-fig img { display: block; width: 100%; height: auto; } .xb-next { display: flex; flex-direction: column; gap: var(--xn-px-20); margin-top: var(--xn-gap-rule); padding-top: var(--xn-gap-rule); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-stat { display: flex; flex-direction: column; gap: var(--xn-px-8); padding-top: var(--xn-px-24); border-top: 2px solid var(--xn-ink); } .xb-stat__value { font-size: var(--xl-h2-fs); font-weight: var(--xn-w-semibold); line-height: var(--xl-h2-lh); letter-spacing: var(--xl-h2-ls); } .xb-quote { display: flex; flex-direction: column; gap: var(--xn-px-14); padding-left: var(--xn-px-24); border-left: 2px solid var(--xn-ink); } .xb-notice { display: flex; flex-direction: column; gap: var(--xn-px-8); padding: var(--xn-px-24) 0; border-top: var(--xn-hairline) solid var(--xn-line); } @media (max-width: 760px) { .xb-sec { padding-block: var(--xn-s-section-mobile); } .xb-sec--open { padding-top: 0; } .xb-sec--plain { padding-block: var(--xl-plain); } .xb-sec--96, .xb-sec--related { padding-block: var(--xn-px-96); } .xb-lay--home .xb-lead { font-size: var(--xn-fs-lead-mobile); } .xb-lay--report { --xl-prose-fs: var(--xn-px-17); } } @media (prefers-reduced-motion: reduce) { .xb-page *, .xb-preview * { animation: none !important; transition: none !important; } } .xb-rule { color: var(--xn-text-2); padding-bottom: var(--xn-px-4); } .xb-block { display: block; } .xb-f__opt { font-weight: var(--xn-w-regular); color: var(--xn-text-2); } .xb-outputs { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--xn-px-10) var(--xn-px-24); margin: 0; font-size: var(--xn-px-16); } .xb-outputs dt { color: var(--xn-text-2); } .xb-outputs dd { margin: 0; font-weight: var(--xn-w-semibold); text-align: right; } .xb-tablewrap { overflow-x: auto; } .xb-table { width: 100%; border-collapse: collapse; font-size: var(--xn-px-15); } .xb-table th, .xb-table td { padding: var(--xn-px-10) var(--xn-px-12) var(--xn-px-10) 0; border-bottom: var(--xn-hairline) solid var(--xn-line); text-align: left; vertical-align: top; } .xb-table thead th { font-weight: var(--xn-w-semibold); border-bottom-color: var(--xn-ink); } .xb-table tbody th { font-weight: var(--xn-w-medium); } .xb-matrix { min-width: var(--xn-px-520); } .xb-matrix .xb-input { width: 100%; min-width: var(--xn-px-96); } .xb-briefout { white-space: pre-wrap; font-size: var(--xn-px-16); line-height: 1.6; color: var(--xn-ink); } .xb-resultblock { display: flex; flex-direction: column; gap: var(--xn-px-12); padding-top: var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-resultblock[hidden] { display: none; } .xb-chartbox { max-width: var(--xn-px-720); } .xb-chart { display: block; width: 100%; } .xb-chart text { font-family: inherit; } .xb-list, .xb-steps-list { margin: 0; padding-left: var(--xn-px-20); display: flex; flex-direction: column; gap: var(--xn-px-8); font-size: var(--xn-px-16); line-height: 1.55; } .xb-focus { display: flex; flex-direction: column; gap: var(--xn-px-8); padding: var(--xn-px-16) 0 var(--xn-px-20); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-focus:last-child { border-bottom: 0; } .xb-focus__name { margin: 0; font-size: var(--xn-px-19); font-weight: var(--xn-w-semibold); } .xb-focus__label { margin: var(--xn-px-8) 0 0; font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); color: var(--xn-text-2); text-transform: uppercase; letter-spacing: 0.06em; } .xb-weight { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-12); padding-top: var(--xn-px-8); font-size: var(--xn-px-14); color: var(--xn-text-2); } .xb-weight select { min-height: var(--xn-px-44); padding: 0 var(--xn-px-12); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); font: inherit; color: var(--xn-ink); background: var(--xn-ground); } .xb-example { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-16); padding-bottom: var(--xn-px-24); } .xb-example .xb-small { flex: 1 1 var(--xn-px-240); margin: 0; } .xb-fs--group { padding-top: var(--xn-px-20); } .xb-input--weight { width: var(--xn-px-72); min-width: var(--xn-px-72); } .xb-brief__h { margin: var(--xn-px-20) 0 var(--xn-px-8); font-size: var(--xn-px-19); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } @media print { .xn-header, .xn-footer, .xn-cookie, .xn-skip, .xb-assess__actions, .xb-assess__aside .xb-nextlink, [data-xn-print], [data-xn-copy], [data-xn-reset], [data-xn-submit], .xb-result .xn-btn { display: none !important; } .xb-result { border: 0; padding: 0; margin: 0; } .xb-assess { display: block; } .xb-assess__main > *:not(.xb-result) { display: none; } .xb-assess__aside { margin-top: var(--xn-px-24); } } .xb-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .xb-ts { display: block; } .xb-ts:not(:empty) { margin-bottom: var(--xn-px-16); } .xb-form [aria-invalid="true"], .xb-stack [aria-invalid="true"] { border-color: var(--xn-error); } .xb-briefwrap { padding-top: var(--xn-px-48); padding-bottom: var(--xn-px-48); } .xb-briefwrap .xb-brief { max-width: var(--xn-px-760); } .xb-policymeta { flex-wrap: wrap; gap: var(--xn-px-12) var(--xn-px-24); } .xb-art--numbered .xb-art__main { counter-reset: xb-section; } .xb-art--numbered .xb-part > .xb-h2::before { counter-increment: xb-section; content: counter(xb-section) ". "; } .xb-art__main .wp-block-table { margin: var(--xn-px-24) 0; overflow-x: auto; } .xb-art__main .wp-block-table thead { border: 0; } .xb-art__main .wp-block-table figcaption { display: none; } .xb-art__main .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--xn-px-15); line-height: 1.5; border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-art__main .wp-block-table th, .xb-art__main .wp-block-table td { padding: var(--xn-px-12) var(--xn-px-16) var(--xn-px-12) 0; border: 0; border-bottom: var(--xn-hairline) solid var(--xn-line); text-align: left; vertical-align: top; } .xb-art__main .wp-block-table th { font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-contactline { padding-top: var(--xn-px-32); border-top: var(--xn-hairline) solid var(--xn-line); } .xb-art__main > .xb-contactline { padding-top: var(--xn-px-32); } .xb-latest__img { display: block; } .xb-split .xb-h2 a { color: inherit; } .xb-split .xb-h2 a:hover { color: var(--xn-accent); } .xb-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--xn-px-320)), 1fr)); column-gap: var(--xn-px-48); row-gap: var(--xn-px-32); } .xb-pcard { display: flex; flex-direction: column; gap: var(--xn-px-12); color: var(--xn-ink); } .xb-pcard__title { font-size: var(--xn-px-21); font-weight: var(--xn-w-semibold); line-height: 1.3; } .xb-pcard:hover .xb-pcard__title { color: var(--xn-accent); } .xb-pager--boxes { gap: var(--xn-px-8); padding-top: var(--xn-px-48); align-items: center; } .xb-pager__box { display: inline-flex; align-items: center; justify-content: center; min-width: var(--xn-target); min-height: var(--xn-target); border: var(--xn-hairline) solid transparent; color: var(--xn-ink); } a.xb-pager__box:hover { color: var(--xn-accent); } .xb-pager__box[aria-current="page"] { border-color: var(--xn-ink); } .xb-pager__next { margin-left: var(--xn-px-16); } .xb-ph--5-4 { aspect-ratio: 5 / 4; } .xb-dlimg { margin: 0; } .xb-dlrow { align-items: center; gap: var(--xn-px-16) var(--xn-px-24); } .xb-rowlink--aside .xb-rowlink__title { font-size: var(--xn-px-16); line-height: 1.4; letter-spacing: normal; }
.xb-hero--art { padding: var(--xn-px-56) 0 var(--xn-px-72); } .xb-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--xn-px-64); align-items: center; } .xb-hero--art .xb-h1 { max-width: none; } .xb-hero--art .xb-lead { max-width: var(--xn-px-600); } .xb-hero__art { margin: 0; justify-self: end; width: 100%; max-width: var(--xn-hero-art-max); } .xb-hero__art picture, .xb-hero__art img { display: block; width: 100%; height: auto; } .xb-hero__note { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--xn-px-64); margin-top: var(--xn-px-56); } .xb-hero__note .xb-note { grid-column: 2; } .xb-hero--article { padding: var(--xn-px-56) 0 var(--xn-px-48); } .xb-hero--article.xb-hero--art .xb-lead { font-size: var(--xn-px-19); line-height: 1.55; } .xb-hero--article:not(.xb-hero--art) .xb-hero__grid { display: block; } .xb-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xn-px-24) var(--xn-px-48); margin-top: var(--xn-gap-rule); padding: var(--xn-gap-rule) 0 0; border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-strip__facts { display: flex; flex-wrap: wrap; gap: var(--xn-px-20) var(--xn-px-48); margin: 0; } .xb-strip__c { display: flex; flex-direction: column; gap: var(--xn-px-4); } .xb-strip__c dt { margin: 0; } .xb-strip__c dd { margin: 0; display: flex; flex-direction: column; font-size: var(--xn-px-16); color: var(--xn-ink); } .xb-strip__c dd b { font-weight: var(--xn-w-semibold); } .xb-strip__btns { margin: 0; } .xb-hero--tool.xb-hero--art { padding: var(--xn-px-56) 0 var(--xn-px-40); } .xb-hero--tool.xb-hero--art .xb-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .xb-art { --xe-side: 0px; display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center; padding: var(--xn-px-48) var(--xn-pad) var(--xn-px-96); max-width: none; margin: 0 auto; gap: 0 var(--xn-px-56); } .xb-art__rail { display: none; } .xb-art__main { display: grid; grid-template-columns: [wide-start] minmax(0, 1fr) [text-start] minmax(0, min(var(--xn-measure), 100%)) [text-end] minmax(0, 1fr) [wide-end]; max-width: var(--xn-wide); width: 100%; margin: 0 auto; min-width: 0; flex: none; } .xb-art__main > * { grid-column: text; min-width: 0; } .xb-art__main > .xb-wide { grid-column: wide; } .xb-toc-top { max-width: var(--xn-measure); width: 100%; margin: 0 auto var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-ink); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-toc-top summary { display: flex; justify-content: space-between; align-items: center; min-height: var(--xn-target); font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; list-style: none; } .xb-toc-top summary::-webkit-details-marker { display: none; } .xb-toc-top summary::after { content: "+"; font-size: var(--xn-px-20); font-weight: var(--xn-w-regular); } .xb-toc-top[open] summary::after { content: "\2212"; } .xb-toc-top nav { display: flex; flex-direction: column; padding-bottom: var(--xn-px-12); } .xb-toc-top nav a { padding: var(--xn-px-8) 0; font-size: var(--xn-px-15); color: var(--xn-body); } @media (min-width: 1560px) { .xb-art { grid-template-columns: var(--xn-rail-card) minmax(0, var(--xn-wide)) var(--xn-rail-card); justify-content: center; gap: 0 var(--xn-art-gap); } .xb-art__main { grid-column: 2; grid-row: 1; max-width: var(--xn-wide); } .xb-art__rail--l { display: block; grid-column: 1; grid-row: 1; } .xb-art__rail--r { display: block; grid-column: 3; grid-row: 1; } .xb-art--no-r { grid-template-columns: var(--xn-rail-card) minmax(0, var(--xn-wide)) var(--xn-rail-card); } .xb-toc-top { display: none; } } .xb-art__rail > * { position: sticky; top: calc(var(--xn-header-h) + var(--xn-px-24)); } .xb-toc { padding-top: var(--xn-px-16); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-toc a { padding: var(--xn-px-6) 0 var(--xn-px-6) var(--xn-px-12); border-left: 2px solid transparent; font-size: var(--xn-px-13); line-height: 1.4; color: var(--xn-text-2); } .xb-toc a:hover { color: var(--xn-ink); } .xb-toc a.is-active { border-left-color: var(--xn-slate); color: var(--xn-ink); font-weight: var(--xn-w-semibold); } .xb-rail__card { padding-top: var(--xn-px-16); border-top: var(--xn-hairline) solid var(--xn-ink); display: flex; flex-direction: column; gap: var(--xn-px-16); } .xb-rail__facts { display: flex; flex-direction: column; gap: var(--xn-px-12); margin: 0; } .xb-rail__facts div { display: flex; flex-direction: column; gap: var(--xn-px-2); } .xb-rail__facts dt { font-size: var(--xn-px-12); letter-spacing: 0.06em; text-transform: uppercase; color: var(--xn-text-2); } .xb-rail__facts dd { margin: 0; font-size: var(--xn-px-14); line-height: 1.4; color: var(--xn-ink); } .xb-rail__foot { display: flex; flex-direction: column; align-items: flex-start; gap: var(--xn-px-12); } .xb-rail__btn { min-height: var(--xn-px-44); padding: 0 var(--xn-px-16); font-size: var(--xn-px-14); } .xb-rail__link { padding: 0; border: 0; border-bottom: var(--xn-hairline) solid var(--xn-ink); background: none; font: inherit; font-size: var(--xn-px-14); font-weight: var(--xn-w-semibold); color: var(--xn-ink); cursor: pointer; } .xb-rail__link:hover { color: var(--xn-accent); border-color: var(--xn-accent); } .xb-progress { position: fixed; top: 0; left: 0; right: 0; height: var(--xn-px-3); z-index: var(--xn-z-progress); background: transparent; pointer-events: none; } .xb-progress span { display: block; height: 100%; background: var(--xn-accent); transform-origin: left; transform: scaleX(0); } @media (prefers-reduced-motion: reduce) { .xb-progress span { transition: none; } } .xb-art__main .xb-part { padding-top: var(--xn-px-56); gap: var(--xn-px-20); border-top: 0; } .xb-art__main > .xb-part:first-child { padding-top: 0; } .xb-art__main .xb-h2 { font-size: var(--xn-fs-h2-art); line-height: 1.18; letter-spacing: -0.014em; } .xb-art__main .xb-h3 { font-size: var(--xn-px-19); } .xb-art__main .xb-prose { color: var(--xn-prose-ink); } .xb-art__main .xb-prose + .xb-prose { margin-top: var(--xn-px-4); } .xb-art__main .xb-prose a { border-bottom: var(--xn-hairline) solid var(--xn-accent); } .xb-art--numbered .xb-art__main { counter-reset: xb-section; } .xb-art--numbered .xb-part > .xb-h2::before { display: block; margin-bottom: var(--xn-px-10); content: counter(xb-section, decimal-leading-zero); counter-increment: xb-section; font-size: var(--xn-px-13); font-weight: var(--xn-w-semibold); letter-spacing: 0.1em; color: var(--xn-slate-2); } .xb-art__main .xb-brief { margin-bottom: var(--xn-px-8); } .xb-brief { padding: var(--xn-px-4) 0 var(--xn-px-4) var(--xn-px-28); border: 0; border-left: 3px solid var(--xn-slate); background: transparent; gap: var(--xn-px-12); } .xb-brief .xb-prose--brief { font-size: var(--xn-px-18); line-height: 1.55; color: var(--xn-ink); } .xb-briefwrap { padding-top: var(--xn-px-16); padding-bottom: var(--xn-px-56); } .xb-briefwrap .xb-brief { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--xn-px-64); max-width: none; padding: var(--xn-px-28) 0 0; border-left: 0; border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-briefwrap .xb-brief .xb-prose--brief { font-size: var(--xn-px-20); line-height: 1.5; max-width: var(--xn-px-860); } .xb-steps li { grid-template-columns: var(--xn-px-68) 1fr; padding: var(--xn-px-40) 0 var(--xn-px-28); } .xb-steps li > span:first-child { font-family: var(--xn-font-display); font-size: var(--xn-px-26); font-weight: var(--xn-w-regular); line-height: 1; color: var(--xn-slate-2); } .xb-steps--track { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-180), 1fr)); gap: var(--xn-px-32); counter-reset: xb-track; } .xb-steps--track li { position: relative; display: flex; flex-direction: column; gap: var(--xn-px-12); padding: var(--xn-px-28) 0 0; border-top: 2px solid var(--xn-ink); } .xb-steps--track li:last-child { border-bottom: 0; } .xb-steps--track li > span:first-child { font-size: var(--xn-px-13); letter-spacing: 0.1em; } .xb-steps--track li::before { content: ""; position: absolute; top: calc(var(--xn-px-5) * -1 - 1px); left: 0; width: var(--xn-px-9); height: var(--xn-px-9); border: 2px solid var(--xn-ink); border-radius: 50%; background: var(--xn-ground); } .xb-steps--track .xb-h3 { font-size: var(--xn-px-19); } .xb-art__main .xb-exhibit { margin-top: var(--xn-gap-rule); padding-top: var(--xn-gap-rule); border-top: 2px solid var(--xn-ink); } .xb-art__main .xb-exhibit__title { font-size: var(--xn-px-18); line-height: 1.3; } .xb-art__main .xb-exhibit figcaption { max-width: var(--xn-measure); } .xb-art__main .xb-fig--article { margin-top: var(--xn-px-48); padding: 0; border: 0; } .xb-art__main .wp-block-table { grid-column: wide; } .xb-fband { padding: var(--xn-px-80) 0; border-top: var(--xn-hairline) solid var(--xn-line); background: var(--xn-paper); } .xb-fband__head { margin-bottom: var(--xn-px-40); max-width: var(--xn-px-720); } .xb-fband__fig { margin: 0 auto; max-width: var(--xn-px-1040); } .xb-fband__fig picture, .xb-fband__fig img { display: block; width: 100%; height: auto; } .xb-fband__fig figcaption { margin-top: var(--xn-px-16); max-width: var(--xn-measure); } .xb-kf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--xn-px-32) var(--xn-px-56); margin: var(--xn-px-48) 0 0; padding: var(--xn-px-40) var(--xn-px-44); background: var(--xn-paper); } .xb-kf__label { margin: 0; color: var(--xn-ink); } .xb-kf__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .xb-kf__list li { display: grid; grid-template-columns: var(--xn-px-44) 1fr; gap: var(--xn-px-12); padding: var(--xn-px-34) 0 var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-tag-line); } .xb-kf__list li:first-child { padding-top: 0; border-top: 0; } .xb-kf__list li:last-child { padding-bottom: 0; } .xb-kf__n { font-family: var(--xn-font-display); font-size: var(--xn-fs-kf-n); font-weight: var(--xn-w-regular); line-height: 1; color: var(--xn-slate-2); } .xb-kf__t { margin: 0 0 var(--xn-px-6); font-size: var(--xn-px-17); line-height: 1.35; font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-kf__x { margin: 0; font-size: var(--xn-px-15); line-height: 1.6; color: var(--xn-body); } .xb-callout { margin: var(--xn-px-40) 0 0; padding: var(--xn-px-24) var(--xn-px-28); border-left: 3px solid var(--xn-ink); background: var(--xn-paper); display: flex; flex-direction: column; gap: var(--xn-px-10); } .xb-callout--pattern { border-left-color: var(--xn-slate-2); background: var(--xn-paper); } .xb-callout--warning { border-left-color: var(--xn-break); background: var(--xn-paper); } .xb-callout__t { margin: 0; font-size: var(--xn-px-19); line-height: 1.35; font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-callout__x { margin: 0; font-size: var(--xn-px-16); line-height: 1.65; color: var(--xn-prose-ink); } .xb-scn { margin: var(--xn-px-24) 0 0; padding-top: var(--xn-gap-rule); border-top: 2px solid var(--xn-ink); display: flex; flex-direction: column; gap: var(--xn-px-24); } .xb-scn__h { margin: var(--xn-px-6) 0 0; } .xb-scn__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--xn-px-48); } .xb-scn__sit { display: flex; flex-direction: column; gap: var(--xn-px-14); } .xb-scn__seq { display: flex; flex-direction: column; gap: var(--xn-px-16); margin: 0; padding: 0 0 0 var(--xn-px-24); list-style: none; border-left: var(--xn-hairline) solid var(--xn-ink); counter-reset: xb-seq; } .xb-scn__seq li { position: relative; font-size: var(--xn-px-16); line-height: 1.6; color: var(--xn-body); } .xb-scn__seq li::before { content: ""; position: absolute; left: calc(var(--xn-px-24) * -1 - 5px); top: var(--xn-px-9); width: var(--xn-px-9); height: var(--xn-px-9); border: 2px solid var(--xn-ink); border-radius: 50%; background: var(--xn-ground); } .xb-scn__seq li b { display: block; font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-scn__out { display: flex; flex-direction: column; gap: var(--xn-px-6); margin: 0; padding: var(--xn-px-20) var(--xn-px-24); background: var(--xn-paper); font-size: var(--xn-px-16); line-height: 1.55; color: var(--xn-ink); } .xb-scn__out .xn-eyebrow { color: var(--xn-slate-2); } .xb-crit { margin: var(--xn-px-64) 0 0; display: flex; flex-direction: column; gap: var(--xn-px-20); } .xb-crit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xn-px-40); margin-top: var(--xn-px-8); } .xb-crit__col { padding-top: var(--xn-px-28); border-top: 2px solid var(--xn-ink); } .xb-crit__col--no { border-top-color: var(--xn-break); } .xb-crit__h { margin: 0 0 var(--xn-px-14); font-size: var(--xn-px-19); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-crit__col ul { display: flex; flex-direction: column; gap: var(--xn-px-12); margin: 0; padding: 0; list-style: none; } .xb-crit__col li { position: relative; padding-left: var(--xn-px-24); font-size: var(--xn-px-16); line-height: 1.6; color: var(--xn-body); } .xb-crit__col--yes li::before { content: "+"; position: absolute; left: 0; font-weight: var(--xn-w-semibold); color: var(--xn-slate-2); } .xb-crit__col--no li::before { content: "\2212"; position: absolute; left: 0; font-weight: var(--xn-w-semibold); color: var(--xn-break); } .xb-crit__trade { margin-top: var(--xn-px-8); } .xb-statement { margin: var(--xn-px-72) 0 0; padding: var(--xn-px-4) 0 var(--xn-px-4) var(--xn-px-28); border-left: 3px solid var(--xn-slate); display: flex; flex-direction: column; gap: var(--xn-px-12); } .xb-statement__t { margin: 0; font-size: var(--xn-fs-statement); line-height: 1.2; font-weight: var(--xn-w-medium); letter-spacing: -0.022em; color: var(--xn-ink); max-width: var(--xn-px-860); } .xb-facts-wrap { padding-block: var(--xn-px-40); border-top: var(--xn-hairline) solid var(--xn-line); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--xn-px-220), 1fr)); margin: 0; } .xb-facts__c { display: flex; flex-direction: column; gap: var(--xn-px-8); padding: var(--xn-px-28) var(--xn-px-28) var(--xn-px-28) 0; } .xb-facts__c + .xb-facts__c { padding-left: var(--xn-px-28); border-left: var(--xn-hairline) solid var(--xn-line); } .xb-facts__c dt { margin: 0; color: var(--xn-ink); } .xb-facts__c dd { margin: 0; font-size: var(--xn-px-16); line-height: 1.55; color: var(--xn-body); } .xb-band { background: var(--xn-paper); } .xb-band--paper { background: var(--xn-mist); } .xb-band > .xb-sec:first-child, .xb-band > section:first-child { border-top: 0; } .xb-sources { margin-top: var(--xn-gap-rule); padding-top: var(--xn-gap-rule); border-top: 2px solid var(--xn-ink); display: flex; flex-direction: column; gap: var(--xn-px-14); } .xb-sources__h { margin: 0; font-size: var(--xn-px-13); font-weight: var(--xn-w-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--xn-ink); } .xb-sources__intro { margin: 0; font-size: var(--xn-px-14); line-height: 1.65; color: var(--xn-text-2); } .xb-sources__list { display: flex; flex-direction: column; gap: var(--xn-px-8); margin: 0; padding: 0; list-style: none; counter-reset: xb-src; } .xb-sources__list li { position: relative; padding-left: var(--xn-px-36); font-size: var(--xn-px-14); line-height: 1.6; color: var(--xn-text-2); counter-increment: xb-src; } .xb-sources__list li::before { content: counter(xb-src); position: absolute; left: 0; font-size: var(--xn-px-12); font-weight: var(--xn-w-semibold); color: var(--xn-ink); } .xb-sources__list a { color: var(--xn-text-2); border-bottom: var(--xn-hairline) solid var(--xn-tag-line); } .xb-sources__list a:hover { color: var(--xn-accent); border-color: var(--xn-accent); } @media (max-width: 899px) { .xb-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-40); } .xb-hero__art { justify-self: start; max-width: var(--xn-px-300); } .xb-hero__note { grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-16); } .xb-hero__note .xb-note { grid-column: 1; } .xb-briefwrap .xb-brief { grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-16); } .xb-briefwrap .xb-brief .xb-prose--brief { font-size: var(--xn-px-20); } .xb-kf { grid-template-columns: minmax(0, 1fr); padding: var(--xn-px-28) var(--xn-px-24); } .xb-scn__grid, .xb-crit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-28); } .xb-facts__c + .xb-facts__c { padding-left: 0; border-left: 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-art { padding-top: var(--xn-px-32); } } .xb-tools { display: flex; flex-wrap: wrap; gap: var(--xn-px-10); margin: 0 0 var(--xn-px-28); padding: 0 0 var(--xn-px-24); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-tool { display: inline-flex; align-items: center; gap: var(--xn-px-10); min-height: var(--xn-target); padding: 0 var(--xn-px-18); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); background: var(--xn-ground); color: var(--xn-ink); font: inherit; font-size: var(--xn-px-15); font-weight: var(--xn-w-medium); line-height: 1.2; text-decoration: none; cursor: pointer; } .xb-tool:hover { border-color: var(--xn-ink); } .xb-tool[hidden] { display: none; } .xb-tool[aria-expanded="true"] { background: var(--xn-ink); border-color: var(--xn-ink); color: var(--xn-ground); } .xb-tool__icon { flex: none; } .xb-listen { margin: calc(-1 * var(--xn-px-4)) 0 var(--xn-px-32); padding: var(--xn-px-20) var(--xn-px-20) var(--xn-px-16); border: var(--xn-hairline) solid var(--xn-line); border-radius: var(--xn-radius); background: var(--xn-accent-wash); } .xb-listen[hidden] { display: none; } .xb-listen__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--xn-px-12) var(--xn-px-16); } .xb-listen__btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--xn-target); height: var(--xn-target); padding: 0; border: var(--xn-hairline) solid var(--xn-ink); border-radius: 50%; background: var(--xn-ground); color: var(--xn-ink); cursor: pointer; } .xb-listen__btn[data-xn-l="play"] { width: 52px; height: 52px; background: var(--xn-ink); color: var(--xn-ground); } .xb-listen__btn:disabled { opacity: .35; cursor: default; } .xb-listen__btn:not(:disabled):hover { border-color: var(--xn-accent); } .xb-listen__i--pause, [data-state="playing"] .xb-listen__i--play { display: none; } [data-state="playing"] .xb-listen__i--pause { display: inline-flex; } .xb-listen__i { display: inline-flex; } .xb-listen__track { flex: 1 1 14rem; min-width: 12rem; display: flex; flex-direction: column; gap: var(--xn-px-4); } .xb-listen__track input[type="range"] { width: 100%; height: var(--xn-target); margin: 0; accent-color: var(--xn-accent); background: transparent; cursor: pointer; } .xb-listen__time { color: var(--xn-body); font-variant-numeric: tabular-nums; } .xb-listen__speeds { display: flex; flex-wrap: wrap; gap: var(--xn-px-6); } .xb-listen__speed { min-width: 44px; min-height: 36px; padding: 0 var(--xn-px-8); border: var(--xn-hairline) solid var(--xn-tag-line); border-radius: var(--xn-radius); background: var(--xn-ground); color: var(--xn-ink); font: inherit; font-size: var(--xn-px-14); cursor: pointer; } .xb-listen__speed[aria-pressed="true"] { background: var(--xn-ink); border-color: var(--xn-ink); color: var(--xn-ground); } .xb-listen__close { margin-left: auto; padding: 0; border: 0; border-bottom: var(--xn-hairline) solid var(--xn-ink); background: none; color: var(--xn-ink); font: inherit; font-size: var(--xn-px-14); cursor: pointer; } .xb-listen__more { margin-top: var(--xn-px-12); font-size: var(--xn-px-14); } .xb-listen__more summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; } .xb-listen__more summary::after { content: "+"; margin-left: var(--xn-px-8); } .xb-listen__more[open] summary::after { content: "\2212"; } .xb-listen__opts { display: flex; flex-wrap: wrap; gap: var(--xn-px-12) var(--xn-px-24); padding: var(--xn-px-8) 0; } .xb-listen__opts select { max-width: 100%; margin-left: var(--xn-px-6); font: inherit; font-size: var(--xn-px-14); } .xb-listen__note { margin: var(--xn-px-8) 0 0; color: var(--xn-body); } .xn-listen-now { background: var(--xn-break-wash); box-shadow: -0.6em 0 0 var(--xn-break-wash), 0.6em 0 0 var(--xn-break-wash); border-radius: 2px; } .xb-listen :focus-visible, .xb-tool:focus-visible { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-focus-offset); } @media (max-width: 599px) { .xb-tool { flex: 1 1 100%; justify-content: center; } .xb-listen__close { margin-left: 0; } .xb-listen__row { gap: var(--xn-px-12); } } .xn-print-logo { display: none; } @media print { @page { size: A4; margin: 18mm 16mm 20mm; @bottom-left { content: "XONIK"; font: 8pt Arial, sans-serif; color: #555; } @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt Arial, sans-serif; color: #555; } } html, body { background: #fff !important; color: #111 !important; } body { font-size: 10.5pt; line-height: 1.5; } .xn-header, .xn-footer, .xn-cookie, .xn-skip, .xb-progress, .xb-art__rail, .xb-toc-top, .xb-tools, .xb-listen, .xb-related, .xb-closing, .xb-cta, .xb-hero__art, .xb-strip__btns, .xb-crumb, .xn-print-hide { display: none !important; } .xb-hero, .xn-look-midnight .xb-hero { background: none !important; color: #111 !important; padding: 0 0 6mm !important; border: 0 !important; } .xb-hero *, .xn-look-midnight .xb-hero * { color: #111 !important; border-color: #bbb !important; background: none !important; } .xn-print-logo { display: block !important; width: 44mm; height: auto; margin: 0 0 8mm; } .xb-hero__grid { display: block !important; } .xb-hero .xn-eyebrow { color: #555 !important; } .xb-art { display: block; padding: 0; margin: 0; } .xb-art__main { max-width: none; margin: 0; padding: 0; } .xb-kf, .xb-callout, .xb-band, .xb-scn__out, .xb-brief, .xb-statement { background: none !important; } h2, h3, h4, summary { break-after: avoid; } figure, table, tr, .xb-kf__list > li, .xb-statement, .xb-callout, .xb-brief, .xb-faq__item { break-inside: avoid; } p, li { orphans: 3; widows: 3; } img, picture { max-width: 100% !important; height: auto !important; } .xb-exhibit__body { overflow: visible !important; } .xb-sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; } a { color: #111; text-decoration: underline; } .xn-listen-now { background: none !important; box-shadow: none !important; } } .xb-item { min-height: 0; padding: 0; gap: 0; } .xb-item > :not(.xb-item__img) { margin-left: var(--xn-px-24); margin-right: var(--xn-px-24); } .xb-item__img { display: block; aspect-ratio: 16 / 10; margin: 0 0 var(--xn-px-20); background: var(--xn-slate); overflow: hidden; } .xb-item__img picture, .xb-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .xb-item .xb-item__top { margin-bottom: var(--xn-px-10); } .xb-item .xb-item__title { margin-bottom: var(--xn-px-10); } .xb-item > .xb-small:last-child { margin-bottom: var(--xn-px-24); } .xb-item .xb-grow { margin-bottom: var(--xn-px-14); } .xb-page > .xb-scn, .xb-page > .xb-crit, .xb-page > .xb-statement, .xb-page > .xb-callout, .xb-page > .xb-kf, .xb-page > .xb-sources { width: calc(100% - 2 * var(--xn-pad)); max-width: var(--xn-wide); margin-left: auto; margin-right: auto; } .xb-page > .xb-scn, .xb-page > .xb-crit, .xb-page > .xb-statement, .xb-page > .xb-kf { margin-top: var(--xn-px-72); margin-bottom: var(--xn-px-72); } .xb-page > .xb-callout { margin-top: var(--xn-px-48); margin-bottom: var(--xn-px-48); } @media (min-width: 600px) and (max-width: 899px) { .xb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xb-facts__c + .xb-facts__c { padding-left: 0; border-left: 0; border-top: 0; } .xb-facts__c:nth-child(even) { padding-left: var(--xn-px-28); border-left: var(--xn-hairline) solid var(--xn-line); } .xb-facts__c:nth-child(n+3) { border-top: var(--xn-hairline) solid var(--xn-line); } } .xb-h1, .xb-h2, .xb-statement__t, .xb-scn__h { font-family: var(--xn-font-display); font-weight: var(--xn-w-regular); letter-spacing: -0.012em; } .xb-h1 { line-height: 1.08; } .xb-h2 { line-height: 1.16; } .xb-statement__t { line-height: 1.22; } .xb-hero .xn-eyebrow, .xb-sec .xn-eyebrow, .xb-head .xn-eyebrow, .xb-kf__label, .xb-scn header .xn-eyebrow { display: inline-flex; align-items: center; gap: var(--xn-px-12); } .xb-hero .xn-eyebrow::before, .xb-sec .xn-eyebrow::before, .xb-head .xn-eyebrow::before, .xb-scn header .xn-eyebrow::before { content: ""; width: var(--xn-px-24); height: var(--xn-hairline); background: var(--xn-slate-2); } .xb-hero__note { display: block; margin-top: var(--xn-gap-rule); } .xb-hero__note .xb-note { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: var(--xn-px-64); row-gap: var(--xn-px-10); padding-top: var(--xn-gap-rule); border-top: var(--xn-hairline) solid var(--xn-ink); } .xb-hero__note .xb-note .xn-eyebrow { grid-column: 1; align-self: start; } .xb-hero__note .xb-note .xb-body { grid-column: 2; max-width: var(--xn-px-860); font-size: var(--xn-px-17); line-height: 1.6; color: var(--xn-ink); } .xb-hero__note .xb-note .xn-eyebrow::before { display: none; } @media (max-width: 899px) { .xb-hero__note .xb-note { grid-template-columns: minmax(0, 1fr); } .xb-hero__note .xb-note .xb-body { grid-column: 1; } } .xb-close { padding: var(--xn-px-92) 0 var(--xn-px-84); background: var(--xn-slate); color: var(--xn-on-dark); } .xb-close__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--xn-px-40) var(--xn-px-64); align-items: center; } .xb-close__copy { display: flex; flex-direction: column; gap: var(--xn-px-16); } .xb-close .xb-h2 { max-width: var(--xn-px-760); color: var(--xn-on-dark); font-size: clamp(var(--xn-px-26), 2.8vw, var(--xn-px-36)); } .xb-close__text { margin: 0; max-width: var(--xn-px-600); font-size: var(--xn-px-17); line-height: 1.6; color: var(--xn-on-dark-2); } .xb-close__btns { justify-content: flex-end; align-items: center; gap: var(--xn-px-24); } .xb-close .xn-btn--primary { background: var(--xn-on-dark); border-color: var(--xn-on-dark); color: var(--xn-slate); } .xb-close .xn-btn--primary:hover { background: var(--xn-mist); border-color: var(--xn-mist); color: var(--xn-slate); } .xb-close .xn-btn--secondary { background: transparent; border-color: var(--xn-on-dark-2); color: var(--xn-on-dark); } .xb-close .xn-btn--secondary:hover { background: var(--xn-on-dark); color: var(--xn-slate); } .xb-close .xb-tlink { color: var(--xn-on-dark); border-bottom-color: var(--xn-on-dark-2); } .xb-close .xb-tlink:hover { color: var(--xn-on-dark); border-bottom-color: var(--xn-on-dark); } .xb-close :focus-visible { outline-color: var(--xn-on-dark); } @media (max-width: 899px) { .xb-close { padding: var(--xn-px-56) 0 var(--xn-px-40); } .xb-close__grid { grid-template-columns: minmax(0, 1fr); } .xb-close__btns { justify-content: flex-start; } } .xb-hero .xn-btn--primary::after, .xb-close .xn-btn--primary::after, .xb-cta-inline .xn-btn--primary::after, .xb-rail__btn.xn-btn--primary::after { content: "\2192"; margin-left: var(--xn-px-10); } .xb-rowlink--meta { align-items: center; } .xb-rowlink__go { flex: none; font-size: var(--xn-px-18); color: var(--xn-slate-2); transition: transform var(--xn-motion), color var(--xn-motion); } .xb-rowlink:hover .xb-rowlink__go { color: var(--xn-accent); transform: translateX(var(--xn-px-4)); } .xb-rowlink--meta .xb-small { margin-left: auto; padding-right: var(--xn-px-16); } .xb-cta-inline { grid-column: text; display: flex; align-items: center; justify-content: space-between; gap: var(--xn-px-24) var(--xn-px-32); flex-wrap: wrap; margin-top: var(--xn-px-72); padding: var(--xn-px-28) var(--xn-px-32); background: var(--xn-paper); border-top: 2px solid var(--xn-slate); } .xb-cta-inline__t { margin: 0 0 var(--xn-px-4); font-family: var(--xn-font-display); font-size: var(--xn-px-22); line-height: 1.2; color: var(--xn-ink); } .xb-cta-inline__x { margin: 0; max-width: var(--xn-px-420); font-size: var(--xn-px-15); line-height: 1.55; color: var(--xn-body); } @media (min-width: 1560px) { .xb-cta-inline { display: none; } } .xb-readnext { padding: var(--xn-px-96) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-readnext__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--xn-px-24) var(--xn-px-64); align-items: start; } .xb-readnext .xb-rows .xb-rowlink:last-child { border-bottom: var(--xn-hairline) solid var(--xn-line); } @media (max-width: 899px) { .xb-readnext { padding: var(--xn-px-72) 0; } .xb-readnext__grid { grid-template-columns: minmax(0, 1fr); } } .xb-rowlink--desc { align-items: center; padding: var(--xn-px-22) 0; } .xb-rowlink__main { display: flex; flex-direction: column; gap: var(--xn-px-4); min-width: 0; } .xb-rowlink__desc { font-size: var(--xn-px-15); line-height: 1.5; color: var(--xn-text-2); max-width: var(--xn-px-600); } .xb-page p a:not(.xn-btn):not(.xb-tlink):not(.xb-rowlink):not([class]), .xb-page li a:not(.xn-btn):not(.xb-tlink):not(.xb-rowlink):not([class]) { text-decoration: underline; text-decoration-thickness: var(--xn-hairline); text-underline-offset: var(--xn-px-3); } .xb-ph.xb-slot--filled { display: block; overflow: hidden; padding: 0; border: 0; background: var(--xn-slate); } .xb-ph.xb-slot--filled picture, .xb-ph.xb-slot--filled img { display: block; width: 100%; height: 100%; object-fit: cover; } .xb-ph--square.xb-slot--filled { padding: 0; border: 0; } .xb-ph--square.xb-slot--filled img { width: 100%; height: 100%; object-fit: cover; } .xb-icards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-24); } .xb-icard { display: flex; flex-direction: column; min-width: 0; border: var(--xn-hairline) solid var(--xn-line); color: inherit; text-decoration: none; } .xb-icard__img { overflow: hidden; background: var(--xn-slate); } .xb-icard__img picture, .xb-icard__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } .xb-icard__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--xn-px-12); padding: var(--xn-px-24) var(--xn-px-24) var(--xn-px-32); } .xb-icard__t { margin: 0; font-family: var(--xn-font-display); font-size: var(--xn-px-28); font-weight: var(--xn-w-regular); line-height: 1.15; color: var(--xn-ink); } .xb-icard__p { margin: 0; font-size: var(--xn-px-16); line-height: 1.55; } .xb-icard:hover .xb-icard__t { text-decoration: underline; text-underline-offset: var(--xn-underline-offset); text-decoration-thickness: var(--xn-hairline); } @media (min-width: 760px) { .xb-icards--2, .xb-icards--3, .xb-icards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .xb-icards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xb-icards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xb-icards--4 .xb-icard__t { font-size: var(--xn-px-24); } } .xb-panels { display: flex; flex-direction: column; } .xb-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-32); align-items: center; padding: var(--xn-px-48) 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-panel:last-child { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-panel__img { overflow: hidden; background: var(--xn-slate); } .xb-panel__img picture, .xb-panel__img img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; } .xb-panel__body { display: flex; flex-direction: column; gap: var(--xn-px-16); min-width: 0; } .xb-panel__t { margin: 0; font-family: var(--xn-font-display); font-size: clamp(var(--xn-px-34), 3.4vw, var(--xn-px-48)); font-weight: var(--xn-w-regular); line-height: 1.08; letter-spacing: -0.02em; color: var(--xn-ink); } .xb-panel__body .xb-body { max-width: var(--xn-px-520); font-size: var(--xn-px-18); } @media (min-width: 900px) { .xb-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--xn-px-64); padding: var(--xn-px-64) 0; } .xb-panel--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .xb-panel--rev .xb-panel__img { order: 2; } .xb-panel--bare { grid-template-columns: minmax(0, 1fr); } }
.xb-pt-sm { padding-top: var(--xn-px-24); } .xb-pt-md { padding-top: var(--xn-px-48); } .xb-pt-lg { padding-top: var(--xn-px-88); } .xb-pt-xl { padding-top: var(--xn-px-120); } .xb-pb-sm { padding-bottom: var(--xn-px-24); } .xb-pb-md { padding-bottom: var(--xn-px-48); } .xb-pb-lg { padding-bottom: var(--xn-px-88); } .xb-pb-xl { padding-bottom: var(--xn-px-120); } .xb-pt-none { padding-top: 0; } .xb-pb-none { padding-bottom: 0; } .xb-bg-paper { background: var(--xn-paper); } .xb-bg-mist { background: var(--xn-mist); } .xb-lay.xb-bg-paper, .xb-lay.xb-bg-mist, .xb-lay.xb-bg-slate { padding-block: var(--xn-px-24); } .xb-bg-slate { --xn-ink: var(--xn-on-dark); --xn-body: var(--xn-on-dark-2); --xn-text-2: var(--xn-on-dark-2); --xn-text-3: var(--xn-on-dark-2); --xn-prose-ink: var(--xn-on-dark); --xn-ground: var(--xn-slate); --xn-paper: var(--xn-slate); --xn-mist: var(--xn-slate); --xn-accent-wash: var(--xn-slate); --xn-line: var(--xn-dark-line); --xn-tag-line: var(--xn-dark-line); --xn-slate-2: var(--xn-on-dark-2); --xl-prose-color: var(--xn-on-dark-2); --xn-tag-text: var(--xn-on-dark-2); --xn-accent: var(--xn-on-dark); --xn-accent-hover: var(--xn-mist); --xn-break: var(--xn-signal); --xn-break-wash: var(--xn-night-2); background: var(--xn-slate); color: var(--xn-on-dark); } .xb-bg-slate .xn-btn--primary { background: var(--xn-on-dark); border-color: var(--xn-on-dark); color: var(--xn-slate); } .xb-bg-slate .xn-btn--primary:hover { background: var(--xn-mist); border-color: var(--xn-mist); color: var(--xn-slate); } .xb-bg-slate .xn-btn--secondary { background: transparent; border-color: var(--xn-on-dark-2); color: var(--xn-on-dark); } .xb-bg-slate .xn-btn--secondary:hover { background: var(--xn-on-dark); color: var(--xn-slate); } .xb-bg-slate :focus-visible { outline-color: var(--xn-on-dark); } .xb-lsec { box-sizing: border-box; width: 100%; } .xb-lsec__in { box-sizing: border-box; width: 100%; margin-inline: auto; padding-inline: var(--xn-pad); } .xb-lw-standard { max-width: var(--xn-container); } .xb-lw-narrow { max-width: calc(var(--xn-px-760) + 2 * var(--xn-pad)); } .xb-lw-wide { max-width: none; } .xb-lsec__in .xn-container, .xb-col .xn-container { max-width: none; padding-inline: 0; } .xb-rule-top, .xb-rule-both { border-top: var(--xn-hairline) solid var(--xn-line); } .xb-rule-bottom, .xb-rule-both { border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-lsec__in > * + *, .xb-col > * + * { margin-top: var(--xn-px-24); } .xb-lsec__in > .xb-spacer, .xb-col > .xb-spacer { margin-top: 0; } .xb-cols { display: grid; grid-template-columns: minmax(0, 1fr); } .xb-gap-sm { gap: var(--xn-px-24); } .xb-gap-md { gap: var(--xn-px-40); } .xb-gap-lg { gap: var(--xn-px-64); } .xb-va-top { align-items: start; } .xb-va-center { align-items: center; } .xb-va-bottom { align-items: end; } .xb-col { min-width: 0; } .xb-col--paper { padding: var(--xn-px-24); background: var(--xn-paper); } .xb-col--mist { padding: var(--xn-px-24); background: var(--xn-mist); } @media (min-width: 760px) { .xb-cols--n2, .xb-cols--n3, .xb-cols--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xb-cols--left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .xb-cols--right { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .xb-cols--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } .xb-cols--aside2 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } } @media (min-width: 1024px) { .xb-cols--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xb-cols--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xb-rootel { padding-block: var(--xn-px-16); } .xb-partwrap { max-width: var(--xn-px-760); } .xb-lsec__in.xb-ta-center .xb-partwrap, .xb-col.xb-ta-center .xb-partwrap { margin-inline: auto; text-align: left; } .xb-el > .xn-eyebrow { margin: 0 0 var(--xn-px-12); } .xb-ta-center { text-align: center; } .xb-ta-right { text-align: right; } .xb-measure { max-width: var(--xn-px-720); } .xb-ta-center.xb-measure { margin-inline: auto; } .xb-jc-center { justify-content: center; } .xb-jc-end { justify-content: flex-end; } .xb-pic, .xb-vid { margin: 0; } .xb-pic img { display: block; width: 100%; height: auto; } .xb-pic figcaption, .xb-vid figcaption { margin-top: var(--xn-px-8); color: var(--xn-text-2); } .xb-pic--narrow { max-width: var(--xn-px-520); } .xb-pic--standard { max-width: var(--xn-px-760); } .xb-vid video { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--xn-ink); } .xb-vid__tx { margin-top: var(--xn-px-16); } .xb-vid__tx summary { cursor: pointer; font-weight: var(--xn-w-semibold); } .xb-hr { margin: 0; border: 0; border-top: var(--xn-hairline) solid var(--xn-line); } .xb-hr--strong { border-top-color: var(--xn-ink); } .xb-hr--short { width: var(--xn-px-96); } .xb-spacer--xs { height: var(--xn-px-16); } .xb-spacer--sm { height: var(--xn-px-32); } .xb-spacer--md { height: var(--xn-px-56); } .xb-spacer--lg { height: var(--xn-px-88); } .xb-spacer--xl { height: var(--xn-px-120); } @media (max-width: 759px) { .xb-show-desktop { display: none; } } @media (min-width: 760px) { .xb-show-mobile { display: none; } } .xb-tabs-el__panel + .xb-tabs-el__panel { margin-top: var(--xn-px-40); } .xb-tabs-el.is-ready .xb-tabs-el__panel + .xb-tabs-el__panel { margin-top: 0; } .xb-tabs-el.is-ready .xb-tabs-el__h { display: none; } .xb-tabs-el__list { display: flex; flex-wrap: wrap; gap: var(--xn-px-28); margin: 0 0 var(--xn-px-32); border-bottom: var(--xn-hairline) solid var(--xn-line); } .xb-tabs-el__tab { box-sizing: content-box; display: inline-flex; align-items: center; min-height: var(--xn-target); margin: 0 0 -1px; padding: 0 var(--xn-px-2); border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--xn-px-16); color: var(--xn-text-2); cursor: pointer; } .xb-tabs-el__tab:hover { color: var(--xn-ink); } .xb-tabs-el__tab[aria-selected="true"] { border-bottom-color: var(--xn-ink); color: var(--xn-ink); font-weight: var(--xn-w-semibold); } .xb-tabs-el__panel[hidden] { display: none; } .xb-tabs-el__panel:focus-visible { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-focus-offset); } .xb-icon { display: block; width: var(--xn-px-24); height: var(--xn-px-24); } .xb-ilist { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-16) var(--xn-px-40); margin: 0; padding: 0; list-style: none; } .xb-ilist li { display: flex; align-items: flex-start; gap: var(--xn-px-14); font-size: var(--xn-px-17); line-height: 1.5; color: var(--xn-body); } .xb-ilist__i { flex: none; margin-top: var(--xn-px-1); color: var(--xn-break); } @media (min-width: 760px) { .xb-ilist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .xb-iboxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-40) var(--xn-px-32); } .xb-ibox { display: flex; flex-direction: column; gap: var(--xn-px-12); padding-top: var(--xn-px-24); border-top: var(--xn-hairline) solid var(--xn-ink); min-width: 0; } .xb-ibox__i { color: var(--xn-break); } .xb-ibox__t { margin: 0; font-family: var(--xn-font-display); font-size: var(--xn-px-26); font-weight: var(--xn-w-regular); line-height: 1.15; color: var(--xn-ink); } @media (min-width: 760px) { .xb-iboxes--2, .xb-iboxes--3, .xb-iboxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .xb-iboxes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xb-iboxes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xb-gal { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--xn-px-24); margin: 0; padding: 0; list-style: none; } .xb-gal__f { margin: 0; } .xb-gal__f picture, .xb-gal__f img { display: block; width: 100%; height: auto; } .xb-gal--wide .xb-gal__f img { aspect-ratio: 16 / 10; object-fit: cover; } .xb-gal--square .xb-gal__f img { aspect-ratio: 1 / 1; object-fit: cover; } .xb-gal__f figcaption { margin-top: var(--xn-px-8); color: var(--xn-text-2); } @media (min-width: 560px) { .xb-gal--2, .xb-gal--3, .xb-gal--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .xb-gal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xb-gal--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .xb-scroller { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: var(--xn-px-16); } .xb-scroller:focus-visible { outline: var(--xn-focus-w) solid var(--xn-accent); outline-offset: var(--xn-focus-offset); } .xb-scroller__row { display: flex; gap: var(--xn-px-24); margin: 0; padding: 0; list-style: none; } .xb-scroller__row > li { flex: 0 0 min(82%, var(--xn-px-360)); scroll-snap-align: start; display: flex; } .xb-scroller__row .xb-icard { width: 100%; } .xb-embed { margin: 0; } .xb-embed__ph { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--xn-slate); color: var(--xn-on-dark); } .xb-embed__bg { position: absolute; inset: 0; opacity: 0.45; } .xb-embed__bg picture, .xb-embed__bg img { display: block; width: 100%; height: 100%; object-fit: cover; } .xb-embed__msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--xn-px-12); max-width: var(--xn-px-520); padding: var(--xn-px-24); } .xb-embed__t { margin: 0; font-family: var(--xn-font-display); font-size: var(--xn-px-28); line-height: 1.15; color: var(--xn-on-dark); } .xb-embed__msg .xb-small { margin: 0; color: var(--xn-on-dark-2); } .xb-embed__msg .xn-btn--secondary { background: transparent; border-color: var(--xn-on-dark-2); color: var(--xn-on-dark); } .xb-embed__msg .xb-tlink { color: var(--xn-on-dark); border-bottom-color: var(--xn-on-dark-2); } .xb-embed__ph.is-loaded { display: block; background: transparent; } .xb-embed__ph iframe { display: block; width: 100%; height: 100%; border: 0; aspect-ratio: 16 / 9; } .xb-embed figcaption { margin-top: var(--xn-px-8); color: var(--xn-text-2); } .xb-tx-ink { --xn-body: var(--xn-ink); --xn-text-2: var(--xn-ink); --xn-prose-ink: var(--xn-ink); --xl-prose-color: var(--xn-ink); } .xb-tx-muted { --xn-ink: var(--xn-text-2); --xn-body: var(--xn-text-2); --xn-prose-ink: var(--xn-text-2); --xl-prose-color: var(--xn-text-2); } .xb-tx-emphasis { --xn-ink: var(--xn-break); --xn-body: var(--xn-break); --xn-text-2: var(--xn-break); --xn-prose-ink: var(--xn-break); --xl-prose-color: var(--xn-break); } .xb-tx-light { --xn-ink: var(--xn-on-dark); --xn-body: var(--xn-on-dark-2); --xn-text-2: var(--xn-on-dark-2); --xn-prose-ink: var(--xn-on-dark); --xl-prose-color: var(--xn-on-dark-2); } .xb-bd-line, .xb-bd-strong { padding: var(--xn-px-24); border: var(--xn-hairline) solid var(--xn-line); } .xb-bd-strong { border-color: var(--xn-ink); } .xb-sh-soft { box-shadow: 0 2px 14px var(--xn-shadow-color); } .xb-rd-round { overflow: hidden; border-radius: var(--xn-radius); } .xb-mx-read { max-width: var(--xn-px-720); margin-inline: auto; } .xb-mx-narrow { max-width: var(--xn-px-520); margin-inline: auto; } @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .xb-reveal { animation: xb-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; } @keyframes xb-reveal { from { opacity: 0; transform: translateY(var(--xn-px-16)); } to { opacity: 1; transform: none; } } } } .block-editor-block-list__block[data-xn-label] { position: relative; } .block-editor-block-list__block[data-xn-label]:hover::before, .block-editor-block-list__block[data-xn-label].is-selected::before { content: attr(data-xn-label); position: absolute; top: 0; left: 0; z-index: 5; padding: 2px 8px; background: #1d2327; color: #fff; font: 600 11px/1.6 system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; } .xb-richtext p { margin: 0 0 1em; } .xb-richtext p:last-child { margin-bottom: 0; } .xn-edit { position: relative; margin: 8px 0; } .xn-edit__bar { margin: 0; padding: 6px 10px; background: #f6f7f7; border: 1px solid #dcdcde; font: 13px/1.5 system-ui, sans-serif; } .xn-edit__hint { color: #646970; font-size: 12px; } .xn-edit__empty { margin: 0; padding: 16px; border: 1px dashed #949494; color: #50575e; font: 13px/1.5 system-ui, sans-serif; } .xn-edit__inner { padding: 8px 0 8px 12px; border-left: 2px solid #c3c4c7; } .xn-preview { pointer-events: none; overflow: hidden; }
.xn-look-midnight .xb-hero, .xn-look-midnight.xn-footer-dark .xn-footer { --xn-ink: var(--xn-on-dark); --xn-body: var(--xn-on-dark-2); --xn-text-2: var(--xn-on-dark-2); --xn-text-3: var(--xn-on-dark-2); --xn-prose-ink: var(--xn-on-dark); --xn-ground: var(--xn-slate); --xn-paper: var(--xn-slate); --xn-mist: var(--xn-slate); --xn-accent-wash: var(--xn-slate); --xn-line: var(--xn-dark-line); --xn-tag-line: var(--xn-dark-line); --xn-tag-text: var(--xn-on-dark-2); --xn-slate-2: var(--xn-on-dark-2); --xn-accent: var(--xn-on-dark); --xn-accent-hover: var(--xn-mist); --xn-break: var(--xn-coral); --xn-break-wash: var(--xn-night-2); --xl-prose-color: var(--xn-on-dark-2); background: var(--xn-slate); color: var(--xn-on-dark); } .xn-look-midnight .xb-hero :focus-visible, .xn-look-midnight.xn-footer-dark .xn-footer :focus-visible { outline-color: var(--xn-signal); } .xn-look-midnight .xb-hero .xn-eyebrow { color: var(--xn-signal); } .xn-look-midnight .xb-hero .xn-eyebrow::before { background: var(--xn-signal); } .xn-look-midnight .xb-hero .xn-btn--primary, .xn-look-midnight.xn-footer-dark .xn-footer .xn-btn--primary, .xn-look-midnight .xb-close .xn-btn--primary { background: var(--xn-signal); border-color: var(--xn-signal); color: var(--xn-night); } .xn-look-midnight .xb-hero .xn-btn--primary:hover, .xn-look-midnight.xn-footer-dark .xn-footer .xn-btn--primary:hover, .xn-look-midnight .xb-close .xn-btn--primary:hover { background: var(--xn-signal); border-color: var(--xn-signal); color: var(--xn-night); filter: brightness(1.1); } .xn-look-midnight .xb-hero .xn-btn--secondary { background: transparent; border-color: var(--xn-on-dark-2); color: var(--xn-on-dark); } .xn-look-midnight .xb-hero .xn-btn--secondary:hover { background: var(--xn-on-dark); color: var(--xn-slate); } .xn-look-midnight .xb-hero .xb-tlink { color: var(--xn-on-dark); border-bottom-color: var(--xn-on-dark-2); } .xn-look-midnight.xn-footer-dark .xn-footer .xn-logo svg g { fill: var(--xn-on-dark); } .xn-look-midnight .xb-hero .xb-d-path { stroke: var(--xn-signal); stroke-width: 3.5; } .xn-look-midnight .xb-hero .xb-d-break { stroke: var(--xn-coral); stroke-width: 3.5; } .xn-look-midnight .xb-hero .xb-d-node, .xn-look-midnight .xb-hero .xb-d-ring { stroke: var(--xn-on-dark); stroke-width: 2; } .xn-look-midnight .xb-hero .xb-d-mark { stroke: var(--xn-coral); stroke-width: 3; } .xn-look-midnight .xb-hero .xb-d-wash { fill: var(--xn-night-2); } .xn-look-midnight .xb-hero .xb-d-break-text { fill: var(--xn-coral); } .xn-look-midnight .xb-hero .xb-d-stage { fill: var(--xn-on-dark); } .xn-look-midnight .xb-hero .xb-h1 { font-size: clamp(var(--xn-px-34), 3.7vw, var(--xn-px-52)); line-height: 1.08; letter-spacing: -0.024em; text-wrap: balance; } .xn-look-midnight .xb-hero--figure .xb-h1 { font-size: clamp(var(--xn-px-34), 3.7vw, var(--xn-px-52)); line-height: 1.08; } .xn-look-midnight .xb-hero .xb-lead { font-size: clamp(var(--xn-px-18), 1.6vw, var(--xn-px-22)); } .xn-look-midnight .xb-hero--figure { padding: var(--xn-px-112) 0 var(--xn-px-104); } .xn-look-midnight .xb-hero__figure { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--xn-px-64); } .xn-look-midnight .xb-figbox { flex-direction: column; align-items: stretch; justify-content: center; aspect-ratio: auto; border: 0; background: transparent; } .xn-look-midnight .xb-figbox svg { width: 100%; } .xn-look-midnight .xb-figcap { position: static; margin-top: var(--xn-px-16); } .xn-look-midnight .xb-hero--art { position: relative; overflow: hidden; padding: var(--xn-px-88) 0 var(--xn-px-80); } .xn-look-midnight .xb-hero--art .xb-hero__grid { display: block; position: relative; z-index: 1; } .xn-look-midnight .xb-hero--art .xb-hero__text { max-width: 56%; } .xn-look-midnight .xb-hero--art .xb-hero__art { position: absolute; top: 0; right: 0; bottom: 0; z-index: 0; width: 40%; max-width: none; margin: 0; } .xn-look-midnight .xb-hero--art .xb-hero__art picture, .xn-look-midnight .xb-hero--art .xb-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: left center; } .xn-look-midnight .xb-hero--download { padding-block: var(--xn-px-80); } @media (max-width: 759px) { .xn-look-midnight .xb-hero--download { padding-bottom: var(--xn-px-64); } } .xn-look-midnight .xb-hero--tool { padding-bottom: var(--xn-px-80); } .xn-look-midnight .xb-hero--plain { padding-bottom: var(--xn-px-80); } .xn-look-midnight .xb-hero--plain:not(.xb-hero--art), .xn-look-midnight .xb-hero--article:not(.xb-hero--art), .xn-look-midnight .xb-hero--tool:not(.xb-hero--art) { padding-top: var(--xn-px-80); padding-bottom: var(--xn-px-72); } @media (max-width: 1023px) { .xn-look-midnight .xb-hero--art .xb-hero__text { max-width: none; } .xn-look-midnight .xb-hero--art .xb-hero__art { position: relative; width: 100%; max-width: var(--xn-px-420); margin-top: var(--xn-px-40); } .xn-look-midnight .xb-hero__figure { grid-template-columns: minmax(0, 1fr); } } .xn-look-midnight .xb-h2 { letter-spacing: -0.022em; } .xn-look-midnight .xn-eyebrow { color: var(--xn-break); } .xn-look-midnight .xb-sec { border-top-color: var(--xn-line); } .xn-look-midnight .xb-hero + .xb-briefwrap { margin-top: 0; } .xn-look-midnight .xb-hero + .xb-briefwrap .xb-brief { padding-top: var(--xn-px-56); border-top: 0; } .xn-look-midnight .xb-hero + .xb-lib { padding-top: var(--xn-px-56); } .xn-look-midnight .xb-hero + .xb-boxes { padding-top: var(--xn-px-56); } .xn-look-midnight .xb-hero + .xb-feature { padding-top: var(--xn-px-56); }