/* ============================================================
   Short version, editorial layout
   Loaded AFTER style.css; everything is scoped to body#short.
   ============================================================ */

body#short {
    /* short-accent-picker.js sets --frgd (ink) and --accent (paper) on :root.
       style.css pins --accent/--action on body#short, which blocked that, so
       release them here and derive the rest of the palette from the pair. */
    --accent: inherit;
    --action: color-mix(in srgb, var(--frgd) 14%, var(--accent));
    --border: color-mix(in srgb, var(--frgd) 24%, var(--accent));

    --s-paper: var(--accent);
    --s-ink: var(--frgd);
    --s-rule: color-mix(in srgb, var(--frgd) 20%, transparent);
    --s-mute: color-mix(in srgb, var(--frgd) 62%, transparent);

    --s-pad: clamp(20px, 2.8vw, 36px);
    --s-gap: clamp(48px, 7vw, 104px);
    --s-bar: clamp(56px, 6vw, 76px);

    background: var(--s-paper);
    color: var(--s-ink);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body#short,
body#short * {
    font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important;
}

body#short .material-symbols-outlined {
    font-family: "Material Symbols Outlined", sans-serif !important;
}

/* Same carve-out for pixelarticons: the Inter lock above is more specific
   than the font's own rule, so it has to be restated here. */
body#short [class^="pixelart-icons-font-"],
body#short [class*=" pixelart-icons-font-"] {
    font-family: 'pixelart-icons-font' !important;
}

/* Pair Departure Mono with pixelart-icons: any control/list item that
   hosts an icon glyph uses the pixel mono for its label text. */
body#short li:has(> [class*="pixelart-icons-font-"]),
body#short a:has(> [class*="pixelart-icons-font-"]),
body#short button:has(> [class*="pixelart-icons-font-"]) {
    font-family: 'Departure Mono', ui-monospace, monospace !important;
    letter-spacing: 0 !important;
}

/* Metadata / small UI text: Departure Mono (https://departuremono.com/).
   Needs !important to beat the Inter lock on body#short *. */
body#short .s-eyebrow,
body#short .s-small,
body#short .s-role,
body#short .s-identity,
body#short .s-pill,
body#short .metaInformation,
body#short .sq-result-meta .sq-link,
body#short .sq-rec-carousel .carouselControls .sq-rec-see-all,
body#short .sq-rec-carousel .recommendationAuthorRole,
body#short footer > span,
body#short .accent-picker__trigger::after {
    font-family: 'Departure Mono', ui-monospace, monospace !important;
    letter-spacing: 0 !important;
}

body#short .s-ico {
    display: inline-block;
    font-size: 1.2em;
    line-height: 1;
    vertical-align: -0.16em;
    margin-right: 0.55em;
    opacity: 0.78;
}

body#short .s-ico-inline {
    font-size: 1.05em;
    margin-right: 0.4em;
    vertical-align: -0.14em;
    opacity: 0.7;
}

body#short h1,
body#short h2,
body#short h3,
body#short h4 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 400;
    margin: 0;
    padding: 0;
    text-align: left;
    letter-spacing: normal;
    text-transform: none;
}

body#short p,
body#short li {
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: inherit;
    line-height: inherit;
    /* style.css justifies and auto-hyphenates every p and li */
    text-align: left;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Dark themes (paper darker than ink): lift the hairlines and flip the
   logo artwork, which is all drawn for a light background. */
[data-short-theme="dark"] body#short {
    --s-rule: color-mix(in srgb, var(--frgd) 34%, transparent);
    --s-mute: color-mix(in srgb, var(--frgd) 74%, transparent);
}

[data-short-theme="dark"] body#short .slider .slide img,
[data-short-theme="dark"] body#short .sq-company-logo {
    filter: grayscale(1) invert(1);
}

[data-short-theme="dark"] body#short #ProfilePic,
[data-short-theme="dark"] body#short .sq-rec-carousel .recommendationimage {
    filter: grayscale(1) brightness(1.15);
}

[data-short-theme="dark"] body#short footer .socialNavigation ol a {
    fill: var(--s-ink);
}

[data-short-theme="dark"] body#short footer .socialNavigation ol a img {
    filter: grayscale(1) invert(1);
}

/* ---------- Top bar: identity left, section pills + accent picker right ---------- */

body#short .s-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--s-bar);
    padding: 0 var(--s-pad);
    background: var(--s-paper);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

body#short .s-topbar.is-stuck {
    border-bottom-color: var(--s-rule);
}

body#short #BackToHome {
    position: static;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--s-ink);
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

body#short #BackToHome:hover {
    box-shadow: none;
    opacity: 1;
}

body#short .s-identity {
    display: block;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--s-ink);
    text-decoration: none;
}

body#short .s-identity span {
    color: var(--s-mute);
}

body#short nav.mainNavigation {
    position: static;
    z-index: 60;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0 0 0 auto;
    background: none;
    border: 0;
    box-shadow: none;
}

body#short nav.mainNavigation > ol {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
    border: 0;
}

body#short nav.mainNavigation > ol > li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    background: none;
}

body#short .s-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 999px;
    border: 0;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    color: var(--s-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body#short .s-pill:hover {
    background: color-mix(in srgb, var(--frgd) 12%, transparent);
    box-shadow: none;
    top: 0;
    left: 0;
}

body#short .s-pill.is-current {
    background: var(--s-ink);
    color: var(--s-paper);
}

/* Accent picker sits inline as the last item of the pill row. */
body#short .accent-picker-item {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

body#short .accent-picker__swatch {
    width: 26px;
    height: 26px;
    border-style: solid;
    border-width: 2px;
    border-color: var(--s-ink);
    box-shadow: none;
    transition: background-color 700ms ease, border-color 700ms ease;
}

@media (prefers-reduced-motion: reduce) {
    body#short .accent-picker__swatch {
        transition: none;
    }
}

body#short .accent-picker__menu {
    top: calc(100% + 12px);
    right: 0;
}

@media only screen and (min-width: 769px) {
    body#short .accent-picker__trigger {
        position: relative;
    }

    body#short .accent-picker__trigger::after {
        content: "What color are you feeling today?";
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        width: max-content;
        max-width: 220px;
        padding: 7px 11px;
        border-radius: 6px;
        border: 1px solid var(--s-rule);
        background: var(--s-paper);
        color: var(--s-ink);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.35;
        letter-spacing: 0;
        text-align: left;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
        z-index: 70;
    }

    body#short .accent-picker__trigger:hover::after,
    body#short .accent-picker__trigger:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    body#short .accent-picker.is-open .accent-picker__trigger::after {
        opacity: 0;
        visibility: hidden;
    }
}

/* ---------- Page shell ---------- */

body#short main.shortContent {
    box-sizing: border-box;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 var(--s-pad);
    backdrop-filter: none;
    /* body's background propagates to the canvas, which the logo tint cannot
       blend against, so the paper is painted for real here. */
    background: var(--s-paper);
}

body#short .s-section {
    box-sizing: border-box;
    padding: clamp(76px, 9vw, 116px) 0 var(--s-gap);
    scroll-margin-top: calc(var(--s-bar) + 8px);
    scroll-snap-margin-top: calc(var(--s-bar) + 8px);
}

body#short .s-section + .s-section {
    padding-top: clamp(56px, 7vw, 96px);
    border-top: 1px solid var(--s-rule);
}

/* A closed question is just its heading, so it needs less room below. */
body#short .s-section:has(.s-fold:not([open])) {
    padding-bottom: clamp(40px, 5vw, 72px);
}

/* ---------- Collapsible questions ---------- */

body#short .s-fold {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

body#short .s-fold-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 48px);
    padding: 0;
    margin: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    list-style: none;
    cursor: pointer;
    letter-spacing: normal;
    font-size: inherit;
    font-weight: inherit;
}

summary.s-fold-summary:hover {
    border-radius: 150px 0 0 !important;
    background: linear-gradient(146deg, #ffffff, transparent, transparent) !important;
}

body#short .s-fold-summary::-webkit-details-marker { display: none; }
body#short .s-fold-summary::marker { content: ""; }

body#short .s-fold-summary:focus-visible {
    outline: 2px solid var(--s-ink);
    outline-offset: 8px;
}

body#short .s-fold-summary .s-q {
    flex: 1;
    overflow: visible;
    line-height: 1.2;
    padding: 0.04em 0 0;
    margin: 0;
    background-image: none;
    background-repeat: repeat;
    background-size: var(--s-q-pattern-size) auto;
    background-position: 0 50%;
    -webkit-text-fill-color: currentColor;
    transition: color 0.2s ease, -webkit-text-fill-color 0.2s ease;
}

/* Pattern fill clipped to the question text on hover; one tile per section. */
body#short #q1 .s-fold-summary .s-q {
    --s-q-pattern: url("../images/short-fold-pattern-q1.jpg");
}

body#short #q2 .s-fold-summary .s-q {
    --s-q-pattern: url("../images/short-fold-pattern-q2.jpg");
}

body#short #q3 .s-fold-summary .s-q {
    --s-q-pattern: url("../images/short-fold-pattern-q3.jpg");
}

body#short #q4 .s-fold-summary .s-q {
    --s-q-pattern: url("../images/short-fold-pattern-q4.jpg");
}

body#short .s-fold-summary:hover .s-q,
body#short .s-fold[open] .s-fold-summary .s-q {
    /* Same metrics as default — only the fill/animation change. */
    line-height: 1.2;
    padding: 0.04em 0 0;
    margin: 0;
    background-image: var(--s-q-pattern);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: s-q-pattern-scroll 2s linear infinite;
}

@keyframes s-q-pattern-scroll {
    from { background-position: 0 50%; }
    to { background-position: var(--s-q-pattern-size) 50%; }
}

/* Plus that becomes a minus, scaled to sit with the display type. */
body#short .s-fold-icon {
    flex: none;
    position: relative;
    width: clamp(26px, 3.4vw, 44px);
    height: clamp(26px, 3.4vw, 44px);
    margin-top: clamp(10px, 1.6vw, 26px);
}

body#short .s-fold-icon::before,
body#short .s-fold-icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    margin-top: -1px;
    background: var(--s-ink);
    transition: transform 0.35s ease;
}

body#short .s-fold-icon::after {
    transform: rotate(90deg);
}

body#short .s-fold[open] .s-fold-icon::after {
    transform: rotate(0deg);
}

body#short .s-fold-body {
    overflow: hidden;
    padding-top: clamp(28px, 4vw, 56px);
    transition: height 0.4s ease;
}

body#short .s-fold:not([open]) .s-fold-body {
    padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    body#short .s-fold-icon::before,
    body#short .s-fold-icon::after,
    body#short .s-fold-body {
        transition: none;
    }

    body#short .s-fold-summary:hover .s-q,
    body#short .s-fold[open] .s-fold-summary .s-q {
        animation: none;
    }
}

/* ---------- Type components ---------- */

body#short .s-q {
    --s-q-pattern-size: 1.35em;
    font-size: clamp(2.75rem, 9.7vw, 7.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
    padding: 0 0 clamp(28px, 4vw, 56px);
}

body#short .s-eyebrow {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    color: var(--s-ink);
    padding: 0 0 22px;
}

body#short .s-answer {
    font-size: clamp(2.5rem, 6.1vw, 4.875rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.06em;
    padding: 0 0 clamp(40px, 6vw, 88px);
}

body#short .s-statement {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.06em;
    padding: 0 0 clamp(32px, 4.5vw, 64px);
}

body#short .s-lede {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.035em;
    max-width: 30ch;
    padding: 0 0 clamp(32px, 4.5vw, 64px);
}

/* Ledes that break their own lines with <br> don't need a measure cap. */
body#short .s-lede--lines {
    max-width: none;
}

body#short .s-small {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    padding: 0 0 14px;
}

body#short .s-body {
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
    max-width: 46ch;
    padding: 0 0 26px;
}

body#short .s-body a,
body#short .s-list a {
    color: var(--s-ink);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    display: inline;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
    border-radius: 0;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--s-rule);
}

body#short .s-body a:hover,
body#short .s-list a:hover {
    border: 0;
    top: 0;
    left: 0;
    box-shadow: none;
    text-decoration-color: currentColor;
}

/* Dash list, "– Question assumptions" */
body#short .s-list {
    list-style: none;
    margin: 0;
    padding: 0 0 clamp(32px, 4.5vw, 64px);
    background: none;
    border: 0;
    opacity: 1;
}

body#short .s-list li {
    display: flex;
    align-items: baseline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
}


body#short .s-list li .s-ico {
    flex: none;
}

/* ---------- Two-column split (statement left, list right) ---------- */

body#short .s-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
    padding: 0 0 clamp(48px, 8vw, 120px);
}

body#short .s-split .s-statement {
    padding: 0;
    letter-spacing: -0.055em;
}

body#short .s-split-aside {
    font-size: clamp(1.25rem, 2.65vw, 2.125rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.035em;
    padding: 0;
}

/* ---------- Compatibility check ---------- */

body#short .s-vibe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 72px);
    padding: 0 0 clamp(40px, 6vw, 88px);
}

body#short .s-vibe-quotes {
    font-size: clamp(1.375rem, 3vw, 2.375rem);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.06em;
    padding: 0;
}

body#short .s-vibe-quotes span {
    display: block;
    color: var(--s-mute);
}

body#short .s-vibe-verdict {
    display: block;
    padding-top: 0.6em;
    font-weight: 400;
    color: var(--s-ink);
}

/* ---------- Result rows (metric left, client right) ---------- */

body#short .sq-rows {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

body#short .sq-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 16px;
    margin: 0;
    padding: 24px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--s-rule);
    border-radius: 0;
    box-shadow: none;
}

body#short .sq-row:last-child {
    border-bottom: 1px solid var(--s-rule);
}

body#short .sq-row h4 {
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
    padding: 0;
    margin: 0;
    text-transform: none;
}

body#short .sq-result-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
}

body#short .sq-result-meta .sq-link {
    font-size: clamp(0.9375rem, 1.7vw, 1.375rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
}

/* ---------- Links ---------- */

body#short .sq-link,
body#short .s-link {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--s-ink);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-transform: none;
    text-decoration: none !important;
    border-bottom: 1px solid var(--s-rule);
    transition: border-color 0.2s ease;
}

body#short .sq-link:hover,
body#short .s-link:hover {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--s-ink);
    box-shadow: none;
    top: 0;
    left: 0;
}

body#short .sq-actions,
body#short .s-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    padding: 8px 0 0;
}

body#short .downloadIcon {
    display: none;
}

/* "Next" affordance, bottom-right of each section */
body#short .s-next {
    display: none;
}

body#short .s-next a {
    display: inline-block;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    color: var(--s-ink);
    font-size: clamp(1.25rem, 2.3vw, 1.875rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: none;
    text-decoration: none !important;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

body#short .s-next a:hover {
    opacity: 1;
    border: 0;
    top: 0;
    left: 0;
    box-shadow: none;
}

/* ---------- Intro ---------- */

body#short .s-intro {
    padding-top: calc(var(--s-bar) + clamp(48px, 10vh, 130px));
}

body#short #ProfilePic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    box-shadow: none;
    object-fit: cover;
    display: block;
    margin: 0 0 clamp(24px, 3vw, 40px);
    filter: grayscale(1);
}

body#short h1.s-title {
    font-size: clamp(2.25rem, 6.1vw, 4.875rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.05em;
    padding: 0 0 20px;
}

body#short h2.s-role {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--s-mute);
    padding: 0 0 clamp(28px, 4vw, 44px);
    margin: 0;
}

body#short .s-intro .s-body {
    max-width: 52ch;
    font-size: clamp(1.0625rem, 1.7vw, 1.375rem);
    line-height: 1.35;
}

body#short .s-intro .s-body i {
    font-style: italic;
}

/* Logo slider, flattened to a quiet strip */
body#short .slider {
    margin: clamp(40px, 6vw, 88px) 0 0;
    padding: 4px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--s-rule) !important;
    border-bottom: 1px solid var(--s-rule) !important;
    box-shadow: none;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

body#short .slider .slide img,
body#short .sq-company-logo {
    display: block;
    height: 18px;
    width: auto;
    max-width: 74px;
    object-fit: contain;
    filter: grayscale(1);
    mix-blend-mode: normal;
}

/* ---------- Logo tint ----------
   A colour overlay on a pseudo-element: the image is left untouched in the
   background and a separate layer on top carries the theme ink.

   Each logo sits on its own white base so the overlay has something to blend
   against, then the whole chip multiplies away onto the page. That keeps the
   tint on the marks only, instead of leaving a coloured card behind them, and
   it also drops the white box that a few of the logo files bake in. */

/* The track animates a transform, which isolates everything inside it, so the
   paper has to be repeated here for the chips to multiply away against. */
body#short .slider .slide-track {
    background: var(--s-paper);
}

body#short .slider .slide,
body#short .s-logo-tint {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    line-height: 0;
    background: #fff;
    mix-blend-mode: multiply;
}

body#short .slider .slide::after,
body#short .s-logo-tint::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--s-ink);
    opacity: 0.85;
    /* White base stays white, dark marks take the ink. */
    mix-blend-mode: lighten;
    pointer-events: none;
}

/* Dark themes invert the whole relationship: black base, light marks. */
[data-short-theme="dark"] body#short .slider .slide,
[data-short-theme="dark"] body#short .s-logo-tint {
    background: #000;
    mix-blend-mode: screen;
}

[data-short-theme="dark"] body#short .slider .slide-track {
    background: var(--s-paper);
}

[data-short-theme="dark"] body#short .slider .slide::after,
[data-short-theme="dark"] body#short .s-logo-tint::after {
    mix-blend-mode: darken;
}



/* ---------- Trio ---------- */

body#short .sq-trio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(16px, 2vw, 24px) 0 clamp(40px, 6vw, 80px);
    margin: 0;
    border-top: 1px solid var(--s-rule);
}

body#short .sq-trio-item {
    display: block;
    padding: 24px 0 0;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body#short .sq-trio-media {
    width: 72px;
    height: 72px;
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
    opacity: 0.85;
}

body#short .sq-trio-media .CaseStudyAnimation {
    background: none;
    width: 100%;
    height: 100%;
}

body#short .sq-trio-media svg {
    width: 100%;
    height: 100%;
    display: block;
}

body#short .sq-trio-copy {
    padding: 0;
}

body#short .sq-trio h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.035em;
    padding: 0 0 10px;
    margin: 0;
    text-transform: none;
}

body#short .sq-trio p {
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
    padding: 0;
    margin: 0;
    color: var(--s-mute);
}

/* ---------- Recommendations carousel ---------- */

body#short .sq-rec-carousel {
    display: flex;
    flex-direction: column;
    max-width: none;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(20px, 3vw, 32px) 0 0;
    margin: 0 0 clamp(28px, 4vw, 48px);
    background: none;
    border: 0;
    border-top: 1px solid var(--s-rule);
    border-radius: 0;
    box-shadow: none;
}

body#short .sq-rec-carousel .carouselControls {
    order: 2;
    display: flex;
    align-items: baseline;
    gap: clamp(18px, 3vw, 36px);
    padding: 0;
    margin: 0;
    justify-content: flex-start;
}

body#short .sq-rec-carousel .carouselControls button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    color: var(--s-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(1.125rem, 2.3vw, 1.875rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.04em;
    text-transform: none;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

body#short .sq-rec-carousel .carouselControls .sq-rec-prev .s-ico,
body#short .sq-rec-carousel .carouselControls .sq-rec-next .s-ico {
    margin: 0;
    vertical-align: 0;
    opacity: 1;
    font-size: 1em;
}

body#short .sq-rec-carousel .carouselControls button:hover:not(:disabled) {
    background: none;
    border: 0;
    opacity: 1;
    box-shadow: none;
    top: 0;
    left: 0;
}

body#short .sq-rec-carousel .carouselControls button:active:not(:disabled) {
    top: 0;
    left: 0;
    box-shadow: none;
}

body#short .sq-rec-carousel .carouselControls button:disabled {
    opacity: 0.3;
    cursor: default;
}

body#short .sq-rec-carousel .carouselControls button:focus-visible {
    outline: 2px solid var(--s-ink);
    outline-offset: 4px;
}

body#short .sq-rec-carousel .carouselControls .sq-rec-see-all {
    width: auto;
    min-height: 0;
    height: auto;
    margin: 0 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
    font-weight: 400;
    letter-spacing: 0;
    border-bottom: 1px solid var(--s-rule);
}

body#short .sq-rec-carousel .carouselControls .sq-rec-see-all[aria-pressed="true"] {
    border-bottom-color: var(--s-ink);
    opacity: 1;
}

body#short .sq-rec-viewport {
    order: 1;
    min-height: 12rem;
}

body#short .sq-rec-carousel .singlerecomendation {
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
}

body#short .sq-rec-carousel .recommendation {
    background: none;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.03em;
    max-width: 34ch;
}

body#short .sq-rec-carousel .recommendation::before,
body#short .sq-rec-carousel .recommendation::after {
    content: none;
    display: none;
}

body#short .sq-rec-carousel .recommendationAuthor {
    font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
    font-weight: 400;
    letter-spacing: 0;
    padding-top: 14px;
}

body#short .sq-rec-carousel .recommendationAuthorRole {
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    font-weight: 400;
    color: var(--s-mute);
    opacity: 1;
}

body#short .sq-rec-carousel.is-show-all .sq-rec-viewport {
    gap: 40px;
    padding-right: 8px;
}

/* ---------- Contact ---------- */

body#short a.contactMeShort,
body#short .s-body a.contactMeShort {
    display: inline-block;
    width: auto;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--s-rule);
    border-radius: 0;
    box-shadow: none;
    color: var(--s-ink);
    font-size: clamp(1.75rem, 4.6vw, 3.75rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.05em;
    text-transform: none;
    text-decoration: none !important;
    transition: border-color 0.2s ease;
}

body#short a.contactMeShort:hover {
    position: static;
    top: auto;
    left: auto;
    box-shadow: none;
    border-bottom-color: var(--s-ink);
}

body#short .NDAsign {
    background: none;
    border-radius: 0;
    margin: 0;
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--s-mute);
    padding: 28px 0 0;
}

body#short .NDAsign .sq-link {
    color: var(--s-ink);
}

/* ---------- Footer & page furniture ---------- */

body#short .metaInformation {
    display: block;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 0 0 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--s-mute);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    background: none;
    border: 0;
    box-shadow: none;
}

body#short .gotSomeTime {
    display: block;
    width: auto;
    margin: 0;
    padding: 0 0 clamp(40px, 6vw, 72px);
    text-align: left;
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    letter-spacing: -0.02em;
    color: var(--s-mute);
}

body#short .gotSomeTime a {
    display: inline-block;
    padding: 0;
    margin: 0 0 0 6px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--s-rule);
    border-radius: 0;
    box-shadow: none;
    color: var(--s-ink);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: inherit;
    line-height: inherit;
    text-transform: none;
    text-decoration: none !important;
}

body#short .gotSomeTime a:hover {
    border: 0;
    border-bottom: 1px solid var(--s-ink);
    top: 0;
    left: 0;
    box-shadow: none;
}

body#short footer {
    padding: clamp(40px, 5vw, 64px) var(--s-pad) clamp(40px, 5vw, 56px);
    margin: 0;
    background: none;
    border-top: 1px solid var(--s-rule);
    box-shadow: none;
    align-items: flex-start;
    text-align: left;
}

body#short footer .socialNavigation {
    margin: 0 0 24px;
}

body#short footer .socialNavigation ol {
    justify-content: flex-start;
    gap: 10px;
    padding-left: 0;
}

body#short footer .socialNavigation ol li {
    margin: 0;
    padding: 0;
    border: 0;
}

body#short footer .socialNavigation ol a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    background: none;
    border: 1px solid var(--s-rule);
    border-radius: 999px;
    box-shadow: none;
    fill: var(--s-ink);
    opacity: 0.7;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

body#short footer .socialNavigation ol a:hover {
    top: 0;
    left: 0;
    opacity: 1;
    border-color: var(--s-ink);
    box-shadow: none;
}

body#short footer .socialNavigation ol a svg,
body#short footer .socialNavigation ol a img {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    object-fit: contain;
}

body#short footer .socialNavigation ol a img {
    filter: grayscale(1);
}

body#short footer span {
    margin: 0;
    max-width: 62ch !important;
    color: var(--s-mute);
    text-align: left;
    line-height: 1.5;
}

/* Quiet closing asides, kept from the long version, stripped to text. */
body#short .noTimeLink.bottomNotime,
body#short .relaxTime {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    position: static;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 0 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: none;
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    letter-spacing: -0.02em;
    color: var(--s-mute);
}

body#short .noTimeLink.bottomNotime svg,
body#short .relaxTime img {
    width: 34px;
    height: 34px;
    flex: none;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(1);
}

body#short .noTimeLink.bottomNotime > div,
body#short .relaxTime p {
    display: inline;
    max-width: none;
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: 1.4;
    text-align: left;
}

body#short .noTimeLink.bottomNotime span {
    display: inline;
    font-size: inherit;
    font-weight: 400;
    text-align: left;
    color: var(--s-mute);
}


body#short .noTimeLink.bottomNotime a,
body#short .relaxTime a {
    display: inline-block;
    flex: none;
    white-space: nowrap;
    margin: 0 0 0 6px;
    padding: 0;
    background: none;
    border: 0 !important;
    border-bottom: 1px solid var(--s-rule);
    border-radius: 0;
    box-shadow: none;
    color: var(--s-ink);
    font-size: inherit;
    font-weight: 400;
    letter-spacing: inherit;
    line-height: 1.4;
    text-transform: none;
    text-decoration: none !important;
}


body#short .noTimeLink.bottomNotime a:hover,
body#short .relaxTime a:hover {
    border: 0 !important;
    border-bottom: 1px solid var(--s-ink);
    top: 0;
    left: 0;
    box-shadow: none;
}

body#short .s-outro {
    padding: clamp(48px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
    border-top: 1px solid var(--s-rule);
}

/* ---------- Responsive ---------- */

@media only screen and (max-width: 900px) {
    body#short .s-split {
        grid-template-columns: minmax(0, 1fr);
    }

    body#short .sq-trio {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    body#short .sq-trio-item + .sq-trio-item {
        border-top: 1px solid var(--s-rule);
    }
}

@media only screen and (max-width: 768px) {
    body#short .s-identity {
        flex: 0 1 auto;
        min-width: 0;
        font-size: 13px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* No room for the role on a phone, the name carries it. */
    body#short .s-identity span {
        display: none;
    }

    body#short nav.mainNavigation {
        flex: none;
    }

    body#short nav.mainNavigation > ol {
        gap: 6px;
    }

    body#short .s-pill {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    body#short .accent-picker-item {
        margin: 0 0 0 2px !important;
    }

    body#short .accent-picker__swatch {
        width: 22px;
        height: 22px;
    }

    body#short .s-vibe {
        grid-template-columns: minmax(0, 1fr);
    }

    body#short .sq-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    body#short .sq-result-meta {
        justify-content: flex-start;
    }

    body#short .sq-rec-carousel .recommendation {
        max-width: none;
    }
}

@media only screen and (max-width: 480px) {
    body#short .s-q {
        letter-spacing: -0.03em;
    }

    body#short .sq-rec-carousel .singlerecomendation {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 12px;
    }

    body#short .sq-rec-carousel .recommendationimage {
        width: 34px;
        height: 34px;
        background-size: calc(var(--rec-count) * 34px) 34px;
        background-position: calc(var(--rec-i, 0) * -34px) 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body#short * {
        scroll-behavior: auto !important;
    }
}