/*
 * XIS approved presets (plugin 1.3.0): drawn only where an editor chose one (data-xs="…"); "As approved" adds nothing.
 * Every value is taken from the approved designs, and sizes follow the screen width as they do there.
 * The choices are deliberate overrides of the approved styles, hence !important.
 */

/* Text style */
.xis [data-xs~="t-display"] { font: 350 clamp(32px, 4.6vw, 58px)/1.08 var(--font-display) !important; font-variation-settings: 'opsz' 60, 'wdth' 87 !important; letter-spacing: -.02em !important; text-transform: none !important; }
.xis [data-xs~="t-section"] { font: 350 clamp(28px, 3.4vw, 44px)/1.12 var(--font-display) !important; font-variation-settings: 'opsz' 60, 'wdth' 87 !important; letter-spacing: -.015em !important; text-transform: none !important; }
.xis [data-xs~="t-sub"] { font: 350 24px/1.2 var(--font-display) !important; font-variation-settings: 'opsz' 60, 'wdth' 87 !important; letter-spacing: 0 !important; text-transform: none !important; }
.xis [data-xs~="t-lead"] { font: 400 clamp(15px, 1.3vw, 17px)/1.75 var(--font-body) !important; font-variation-settings: normal !important; letter-spacing: 0 !important; text-transform: none !important; }
.xis [data-xs~="t-body"] { font: 400 15.5px/1.75 var(--font-body) !important; font-variation-settings: normal !important; letter-spacing: 0 !important; text-transform: none !important; }
.xis [data-xs~="t-small"] { font: 400 14px/1.65 var(--font-body) !important; font-variation-settings: normal !important; letter-spacing: 0 !important; text-transform: none !important; }
.xis [data-xs~="t-label"] { font: 500 11.5px/1.6 var(--font-mono) !important; font-variation-settings: normal !important; letter-spacing: .22em !important; text-transform: uppercase !important; }

/* Weight (after the style, so it wins) */
.xis [data-xs~="w-300"] { font-weight: 300 !important; }
.xis [data-xs~="w-350"] { font-weight: 350 !important; }
.xis [data-xs~="w-400"] { font-weight: 400 !important; }
.xis [data-xs~="w-500"] { font-weight: 500 !important; }
.xis [data-xs~="w-600"] { font-weight: 600 !important; }

/* Alignment */
.xis [data-xs~="a-left"] { text-align: left !important; justify-self: stretch !important; margin-inline: 0 !important; }
.xis [data-xs~="a-center"] { text-align: center !important; justify-self: center !important; margin-inline: auto !important; }

/* Space above an element: a step closer to, or further from, what is above it (on the approved spacing scale) */
.xis [data-xs~="sa-closer"] { margin-top: -8px !important; }
.xis [data-xs~="sa-further"] { margin-top: 20px !important; }
.xis :is(h1, h2, h3, .h2)[data-xs~="sa-further"] { margin-top: 28px !important; }

/* A section's space above and below (the approved section space is 72 px on phones to 128 px on desktop) */
.xis section[data-xs~="above-none"] { padding-top: 0 !important; }
.xis section[data-xs~="above-tighter"] { padding-top: clamp(40px, 5vw, 72px) !important; }
.xis section[data-xs~="above-looser"] { padding-top: clamp(96px, 12vw, 168px) !important; }
.xis section[data-xs~="below-none"] { padding-bottom: 0 !important; }
.xis section[data-xs~="below-tighter"] { padding-bottom: clamp(40px, 5vw, 72px) !important; }
.xis section[data-xs~="below-looser"] { padding-bottom: clamp(96px, 12vw, 168px) !important; }