/* Work page (work.html): one case study per row, big.
   No card chrome: each project leads with a wide live cover (the homepage's
   demo frames, wireframe deck and component board, plus two demos made for
   this page), then logo, title, a paragraph, the key figures and the link.
   The page's old animated loop sits beside "Read case study", at the
   button's height. The three retired projects close the page in an
   "Earlier work" strip.
   Everything is scoped to body.workPage; the mocks' own styles live in
   style.css (.LatestDemo) and top-projects.css. Projects fade in through
   section-appear.js, like the rest of the site. */

body.workPage .wk {
    --wk-w: min(1040px, 100vw - 232px);
    width: var(--wk-w);
    margin: 72px calc((100% - var(--wk-w)) / 2) 0;
    text-align: left;
}

body.workPage .wk-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 176px;
}

/* --- project --------------------------------------------------------------- */
body.workPage .wk-card {
    --caseAccent: var(--border, #c9c9c9);
    --homeAccent: var(--caseAccent);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* --- cover --------------------------------------------------------------- */
body.workPage .wk-card__media {
    position: relative;
}

body.workPage .wk-card__cover {
    position: relative;
    margin: 0;
    border-radius: 20px;
    aspect-ratio: 2 / 1;
    background: color-mix(in srgb, var(--caseAccent) 8%, #fff);
    transition: box-shadow 0.3s ease;
}

html[data-canvas] body.workPage .wk-card__cover {
    box-shadow: var(--rgc-card-shadow);
}

body.workPage .wk-card:hover .wk-card__cover,
body.workPage .wk-card:focus-within .wk-card__cover {
    box-shadow: 0 18px 44px color-mix(in srgb, var(--caseAccent) 22%, transparent);
}

body.workPage .wk-card--featured .wk-card__cover {
    aspect-ratio: 832 / 420;
}

/* The deck brings its own stage plus a control bar. */
body.workPage .wk-card--deck .wk-card__cover {
    aspect-ratio: auto;
}

body.workPage .wk-card--deck .wfDeck__stage,
body.workPage .wk-card--board .dsSpecs {
    aspect-ratio: 2 / 1;
}

/* The board's cards are sized for a 16:10 frame; ease them down for 2:1. */
body.workPage .wk-card--board .dsSpecs {
    --ds-card-w: 17cqw;
}

body.workPage .wk-card--deck .wfDeck {
    --wf-sheet-w: 26cqw;
    --wf-sheet-h: 39cqw;
}

/* Over the mock, so a click on the picture opens the case study. The demo
   frames are inert, so nothing underneath is lost. */
body.workPage #main-content a.wk-card__coverLink,
body.workPage #main-content a.wk-card__coverLink:hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

body.workPage #main-content a.wk-card__coverLink::before,
body.workPage #main-content a.wk-card__coverLink::after {
    content: none;
}

body.workPage .wk-card__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: color-mix(in srgb, var(--frgd, #050038) 62%, transparent);
    font-family: var(--font-meta, ui-monospace, monospace);
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Demo frames: laid out at a fixed design size, scaled to the cover
   (work-demos.js; the calc() is the no-script path where supported). */
body.workPage .wk-card__cover .LatestDemo {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    flex: none;
}

body.workPage .wk-card__cover .LatestDemo--kb,
body.workPage .wk-card__cover .LatestDemo--berst,
body.workPage .wk-card__cover .LatestDemo--hx {
    aspect-ratio: 2 / 1;
}

body.workPage .LatestDemo--kb .LatestDemo__viewport,
body.workPage .LatestDemo--kb iframe {
    width: 900px;
    height: 450px;
}

body.workPage .LatestDemo--kb .LatestDemo__viewport {
    transform: scale(calc(100cqw / 900px));
}

body.workPage .LatestDemo--berst {
    background: #fff;
}

body.workPage .LatestDemo--berst .LatestDemo__viewport,
body.workPage .LatestDemo--berst iframe,
body.workPage .LatestDemo--hx .LatestDemo__viewport,
body.workPage .LatestDemo--hx iframe {
    width: 1000px;
    height: 500px;
}

body.workPage .LatestDemo--berst .LatestDemo__viewport,
body.workPage .LatestDemo--hx .LatestDemo__viewport {
    transform: scale(calc(100cqw / 1000px));
}

/* The board tilts a little further under the pointer, as on the homepage. */
body.workPage .wk-card:hover .dsSpecs__plane {
    transform: translate(-50%, -50%) rotateX(50deg) rotateZ(-40deg) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    body.workPage .wk-card:hover .dsSpecs__plane {
        transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-45deg);
    }
}

body.workPage #main-content .wk-card .dsViewer a.dsViewer__case {
    color: color-mix(in srgb, var(--homeAccent) 72%, var(--frgd, #050038)) !important;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--homeAccent) 55%, currentColor);
    text-underline-offset: 3px;
}

/* --- badge: the work page's loop, as a round badge with a 1px ring in the
   organisation's accent and no glow. On a project it sits to the right of
   "Read case study" and takes the button's height (.wk-card__cta below); in
   the earlier-work strip it leads the card at 54px. */
body.workPage .wk-card__orb {
    position: relative;
    flex: none;
    border: 1px solid var(--caseAccent) !important;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent);
    box-sizing: border-box;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Out of flow, so the loop's own size never sets the badge's. */
body.workPage .wk-card__orb svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.85;
}

body.workPage .wk-card:hover .wk-card__orb {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    body.workPage .wk-card:hover .wk-card__orb {
        transform: none;
    }
}

/* --- text: title, one paragraph, figures, link; nothing boxed --------------- */
body.workPage .wk-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 760px;
    padding: 40px 4px 0;
}

body.workPage .wk-card__head,
body.workPage .wk-card__text {
    display: contents;
}

body.workPage .wk-card__logo { order: 1; }
body.workPage .wk-card__title { order: 2; }
body.workPage .wk-card__blurb { order: 3; }
body.workPage .wk-card .topKeyFigures { order: 4; }
body.workPage .wk-card__note { order: 5; }
body.workPage .wk-card__cta { order: 6; }

body.workPage .wk-card__logo {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 44px;
    margin: 0 0 24px;
}

body.workPage .wk-card__logo .caseStudyLogoPair {
    display: contents;
}

body.workPage .wk-card__logo img {
    flex: none;
    width: auto;
    height: 44px;
    max-width: 210px;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
}

/* Square marks carry more ink per pixel than wordmarks; ease them down. */
body.workPage .wk-card__logo img[src*="org-05"] {
    height: 48px;
}

body.workPage .wk-card__logo img[src*="org-40"] {
    height: 34px;
}

body.workPage .wk-card__logo img[src*="org-04"] {
    height: 36px;
}

body.workPage .wk-card__title {
    margin: 0 0 10px;
    padding: 0 !important;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
    line-height: 1.15;
    text-align: left;
}

body.workPage #main-content a.wk-card__titleLink {
    color: inherit;
    font: inherit;
    text-decoration: none;
}

body.workPage #main-content a.wk-card__titleLink:hover,
body.workPage #main-content a.wk-card__titleLink:focus-visible {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--caseAccent) 70%, currentColor);
    text-underline-offset: 4px;
}

body.workPage .wk-card .topKeyFigures {
    margin: 0;
}

body.workPage .wk-card .topKeyFigure__value {
    color: color-mix(in srgb, var(--caseAccent) 78%, var(--frgd, #050038));
}

body.workPage .wk-card__note {
    margin: 8px 0 0;
    padding: 0;
    color: color-mix(in srgb, var(--frgd, #050038) 55%, transparent);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: left;
}

body.workPage .wk-card__blurb {
    margin: 0 0 18px;
    padding: 0;
    color: color-mix(in srgb, var(--frgd, #050038) 68%, transparent);
    font-size: 1.1875rem;
    line-height: 1.5;
    text-align: left;
}

/* The button and, to its right, the badge: stretched to the button's height
   and kept square. */
body.workPage .wk-card__cta {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 18px 0 0;
}

body.workPage .wk-card__cta .wk-card__orb {
    align-self: stretch;
    aspect-ratio: 1 / 1;
}

/* Same pill as the work page's "Read case study" (style.css,
   article .CaseStudyDescription > a). */
body.workPage #main-content a.wk-card__link {
    --link-accent: var(--caseAccent, var(--frgd, #050038));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 14px 7px 16px;
    background: var(--rgc-panel, #fff);
    border: 1px solid color-mix(in srgb, var(--link-accent) 35%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--link-accent) 12%, transparent);
    font-family: 'Inter', "Inter Fallback", "Inter Fallback R", Arial, Helvetica, sans-serif;
    font-size: var(--text-body);
    font-weight: var(--link-weight, 600);
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-underline-offset: 3px;
    color: color-mix(in srgb, var(--link-accent) 45%, var(--frgd, #050038));
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

body.workPage #main-content a.wk-card__link:hover,
body.workPage #main-content a.wk-card__link:focus-visible {
    border-color: var(--link-accent);
    background: color-mix(in srgb, var(--link-accent) 10%, var(--rgc-panel, #fff));
    color: color-mix(in srgb, var(--link-accent) 35%, var(--frgd, #050038));
    text-decoration: underline;
}

body.workPage #main-content a.wk-card__link:focus-visible {
    outline: 2px solid var(--link-accent);
    outline-offset: 2px;
}

body.workPage #main-content a.wk-card__link::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: var(--icon-arrow) center / contain no-repeat;
    mask: var(--icon-arrow) center / contain no-repeat;
    transition: transform 120ms ease;
}

body.workPage #main-content a.wk-card__link:hover::after {
    transform: translateX(2px);
}

/* --- earlier work ----------------------------------------------------------- */
body.workPage .wk-earlier {
    margin: 176px 0 0;
}

body.workPage .wk-earlier__title {
    margin: 0 0 16px;
    padding: 0;
    color: color-mix(in srgb, var(--frgd, #050038) 62%, transparent);
    font-family: var(--font-meta, ui-monospace, monospace);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
}

body.workPage .wk-earlier__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.workPage .wk-mini {
    --caseAccent: var(--border, #c9c9c9);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--rgc-panel, #fff) 60%, transparent);
    list-style: none;
}

body.workPage .wk-mini::before,
body.workPage .wk-mini::marker {
    content: none;
}

body.workPage .wk-mini__orb {
    width: 54px;
    height: 54px;
}

body.workPage .wk-mini__body {
    min-width: 0;
}

body.workPage .wk-mini .wk-card__logo {
    min-height: 26px;
    margin-bottom: 12px;
    opacity: 0.8;
}

body.workPage .wk-mini .wk-card__logo img,
body.workPage .wk-mini .wk-card__logo img[src] {
    height: 24px;
    max-width: 120px;
}

body.workPage .wk-mini__title {
    margin: 0 0 6px;
    padding: 0;
    font-size: 1.0625rem;
    line-height: 1.25;
    text-align: left;
}

body.workPage .wk-mini__blurb {
    display: -webkit-box;
    margin: 0 0 8px;
    padding: 0;
    overflow: hidden;
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

body.workPage .wk-mini__note {
    margin: 0;
    padding: 0;
    color: color-mix(in srgb, var(--frgd, #050038) 55%, transparent);
    font-size: 0.75rem;
    line-height: 1.4;
    text-align: left;
}

/* Highlighter on: a band inside a line-clamped blurb renders settled, as in
   the site's other clipped boxes (style.css). */
@media only screen and (min-width: 769px) {
    [data-highlights="on"] body.workPage .wk-mini__blurb mark {
        animation-name: none;
        background-position: 0% 0;
    }
}

/* --- narrower screens --------------------------------------------------------- */
@media (max-width: 900px) {
    body.workPage .wk {
        width: auto;
        margin: 56px 0 0;
    }

    body.workPage .wk-grid {
        gap: 128px;
    }

    body.workPage .wk-earlier {
        margin-top: 128px;
    }

    body.workPage .wk-earlier__list {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    body.workPage .wk {
        margin: 40px 0 0;
    }

    body.workPage .wk-grid {
        gap: 96px;
    }

    body.workPage .wk-earlier {
        margin-top: 96px;
    }

    body.workPage .wk-card__cover {
        border-radius: 14px;
    }

    body.workPage .wk-card--board .wk-card__cover {
        aspect-ratio: auto;
    }

    body.workPage .wk-card--deck .wfDeck__stage,
    body.workPage .wk-card--board .dsSpecs {
        aspect-ratio: 16 / 10;
    }

    body.workPage .wk-card--board .dsSpecs {
        --ds-card-w: 21cqw;
    }

    body.workPage .wk-card--deck .wfDeck {
        --wf-sheet-w: 31cqw;
        --wf-sheet-h: 46cqw;
    }

    body.workPage .wk-card__body {
        padding-top: 28px;
    }

    body.workPage .wk-card__logo {
        gap: 20px;
        min-height: 34px;
        margin-bottom: 18px;
    }

    body.workPage .wk-card__logo img {
        height: 34px;
        max-width: 170px;
    }

    body.workPage .wk-card__logo img[src*="org-05"] {
        height: 38px;
    }

    body.workPage .wk-card__logo img[src*="org-40"] {
        height: 27px;
    }

    body.workPage .wk-card__logo img[src*="org-04"] {
        height: 28px;
    }

    body.workPage .wk-card__blurb {
        font-size: 1rem;
    }
}