/* WP integration: inherit shared chrome; scope layout and typography to portfolio. */
body.work-type-system #main,body.case-type-system #main{overflow:visible}
.work-study h1,.work-study h2,.painting-case h1,.painting-case h2{padding:0}
.work-study a,.painting-case a{box-sizing:border-box}
.work-study figure,.painting-case figure{padding:0}
body.work-type-system .work-study__intro h1,body.work-type-system .work-study__intro h1 *,body.work-type-system .work-study__caption h2,body.work-type-system .work-archive__intro h2,body.work-type-system .work-archive__row>span:first-of-type,body.work-type-system .work-invitation h2{font-family:'Roboto Slab',Georgia,serif!important;font-weight:400}
body.work-type-system .work-study,body.work-type-system .work-study *{font-family:Roboto,Arial,sans-serif}
body.work-type-system .work-study__eyebrow,body.work-type-system .work-study__caption p,body.work-type-system .work-study__year,body.work-type-system .work-invitation__label{font-family:'IBM Plex Mono',monospace!important}
.project-password h1{visibility:visible!important}
.project-password input{max-width:100%;box-sizing:border-box}

/* The WordPress header is fixed: reserve its space in content and pinned stages. */
body.work-type-system .work-study{margin-top:100px}
body.case-type-system .painting-case{margin-top:165px}
body.work-type-system .work-archive.is-pinned .work-archive__stage{height:calc(100svh - 100px)}
@media(max-width:700px){body.case-type-system .painting-case{margin-top:140px}}

/* Readable endings and balanced large copy. */
.painting-case .painting-case__credits{max-width:68ch;line-height:1.8!important}
.painting-case .painting-case__lead,.painting-case section p{text-wrap:pretty}
.painting-case h1,.painting-case h2,.next-project__title{text-wrap:balance}
/* Keep project thumbnails intact, including on hover. */
.painting-case .next-project img{aspect-ratio:16/9;object-fit:contain;transform:none}
.painting-case .next-project:hover img{transform:none}
/* Live-site links: a quiet outlined invitation, distinct from internal cards. */
.painting-case .case-primary-cta{max-width:760px;padding:23px 26px;border:1px solid #bcc6d3;border-radius:2px;background:none;color:#1f365b;transition:border-color 220ms ease}
.painting-case .case-primary-cta__label{margin-bottom:10px;color:#6c737e;font-size:11px}
.painting-case .case-primary-cta__title{font-size:clamp(22px,2.4vw,29px);line-height:1.35;gap:24px}
.painting-case .case-primary-cta svg{width:22px;height:22px;transform:none;transition:opacity 220ms ease;opacity:.65}
.painting-case .case-primary-cta:hover,.painting-case .case-primary-cta:focus-visible{background:none;border-color:#1f365b;color:#1f365b}
.painting-case .case-primary-cta:hover svg{transform:none;opacity:1}
@media(max-width:700px){.painting-case .case-primary-cta{padding:20px}.painting-case .case-primary-cta__title{font-size:22px}}
@media(prefers-reduced-motion:reduce){.painting-case .case-primary-cta,.painting-case .case-primary-cta svg{transition:none}}

/* Sparse blueprint markers tie the portfolio to the rest of the site. */
.work-study__intro>p{position:relative}
.work-study__intro>p::before{content:"";display:block;position:absolute;top:-4px;left:0;width:8px;height:8px;box-sizing:border-box;border:1px solid #a7b2c2;background:#f6f6f6}
.work-invitation h2{position:relative;padding-left:24px}
.work-invitation h2::before{content:"";position:absolute;left:0;top:.48em;width:9px;height:9px;box-sizing:border-box;border:1px solid #a7b2c2;background:#f6f6f6}
/* Back links share exactly the same rising blue rollover at either end. */
.painting-case .case-back-top,.painting-case .painting-case__back{display:inline-block;padding:0;margin-bottom:38px;font-size:15px;line-height:1.6;color:#1f365b;text-decoration:none;background:linear-gradient(rgba(117,161,210,.2),rgba(117,161,210,.2)) left bottom/100% 5% no-repeat;transition:background-size 200ms ease}
.painting-case .painting-case__back{margin-top:20px;margin-bottom:0}
.painting-case .case-back-top:hover,.painting-case .case-back-top:focus-visible,.painting-case .painting-case__back:hover,.painting-case .painting-case__back:focus-visible{background-size:100% 100%;color:#1f365b}
@media(min-width:768px){
 .painting-case .next-project{position:relative}
 .painting-case .next-project::after{content:"";position:absolute;top:-5px;right:-1px;width:9px;height:9px;box-sizing:border-box;border:1px solid #a7b2c2;background:#f6f6f6}
 body.case-type-system .next-project__label{margin-bottom:6px}
}
@media(prefers-reduced-motion:reduce){.painting-case .case-back-top,.painting-case .painting-case__back{transition:none}}

/* Closing marker sits on its underline, rather than beside the heading. */
.work-invitation h2{display:table;max-width:100%;padding-left:0;padding-bottom:26px}
.work-invitation h2::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px dashed #bcc6d3}
.work-invitation h2::before{top:auto;bottom:-4px;left:0;z-index:1}

@media(min-width:768px){.painting-case .next-project::after{top:0;right:0;transform:translate(50%,-50%)}}

/* One divider above the invitation, with its marker at the left endpoint. */
.work-invitation h2{display:block;padding-bottom:0}
.work-invitation h2::before,.work-invitation h2::after{content:none;display:none}
.work-invitation::before{content:"";position:absolute;top:0;left:0;width:9px;height:9px;box-sizing:border-box;border:1px solid #a7b2c2;background:#f6f6f6;transform:translate(-50%,-50%)}

/* A calm, native WordPress password gate for private case studies. */
.painting-case.project-password{min-height:58svh;padding-bottom:30px}
.project-password .work-case__label{margin:0 0 18px;color:#6c737e}
.painting-case.project-password h1{font-size:clamp(40px,6vw,76px);line-height:1.12;margin:0 0 22px;text-wrap:balance}
.painting-case .project-password__intro{font-size:clamp(21px,2.5vw,29px)!important;max-width:650px;margin:0 0 42px!important;color:#6c737e}
.project-password__access{position:relative;max-width:640px;padding-top:28px;border-top:1px dashed #bcc6d3}
.project-password__access::before{content:"";position:absolute;left:0;top:0;width:8px;height:8px;border:1px solid #a7b2c2;background:#f6f6f6;box-sizing:border-box;transform:translate(-50%,-50%)}
.project-password__access>p{font-size:17px;line-height:1.65;color:#505965;margin:0 0 25px;max-width:48ch}
.project-password .post-password-form{margin:0}
.project-password .post-password-form>p{display:flex;align-items:flex-end;gap:14px;margin:0}
.project-password .post-password-form label{display:flex;flex:1;min-width:0;flex-direction:column;gap:10px;color:#6c737e;font:12px/1.5 'IBM Plex Mono',monospace!important;text-transform:uppercase;letter-spacing:.05em}
.project-password .post-password-form input[type=password]{display:block;width:100%;height:52px;padding:12px 15px;margin:0;border:1px solid #bcc6d3;border-radius:2px;background:#fff;color:#1f365b;font:18px/1.4 Roboto,Arial,sans-serif;box-shadow:none;letter-spacing:normal;text-transform:none}
.project-password .post-password-form input[type=password]::placeholder{color:#8b929c}
.project-password .post-password-form input[type=submit]{height:52px;padding:12px 22px;margin:0;border:1px solid #1f365b;border-radius:2px;background:#1f365b;color:#fff;font:16px/1.4 Roboto,Arial,sans-serif!important;text-shadow:none;box-shadow:none;cursor:pointer;transition:background-color .2s}
.project-password .post-password-form input[type=submit]:hover{background:#304e77}
.project-password .post-password-form input:focus-visible{outline:2px solid #1f365b;outline-offset:3px}
.project-password__access .project-password__contact{margin:25px 0 0;font-size:15px;color:#6c737e}
.project-password__contact a{color:#1f365b;text-decoration:none;background:linear-gradient(rgba(117,161,210,.2),rgba(117,161,210,.2)) left bottom/100% 5% no-repeat;transition:background-size .2s}
.project-password__contact a:hover,.project-password__contact a:focus-visible{background-size:100% 100%}
@media(max-width:600px){.project-password .post-password-form>p{align-items:stretch;flex-direction:column;gap:16px}.project-password .post-password-form label{width:100%}.project-password .post-password-form input[type=submit]{align-self:flex-start}.painting-case.project-password{min-height:55svh}}
@media(prefers-reduced-motion:reduce){.project-password input,.project-password__contact a{transition:none!important}}

/* Password focus uses the control itself, without a detached outline. */
.project-password .post-password-form input[type=password]:focus,.project-password .post-password-form input[type=password]:focus-visible{border-color:#1f365b;outline:none;box-shadow:none}
.project-password .post-password-form input[type=submit]:focus,.project-password .post-password-form input[type=submit]:focus-visible{background:#304e77;border-color:#1f365b;outline:none;box-shadow:none}
.project-password__access #project-password-help{max-width:none;text-wrap:pretty}

.project-password__contact a{display:inline-block;line-height:1.8;padding-bottom:2px;vertical-align:baseline}

/* Show complete project artwork at its natural ratio, with no hover crop. */
.work-study .work-study__visual{aspect-ratio:auto;height:auto}
.work-study .work-study__image-frame{position:relative;inset:auto}
.work-study .work-study__visual img,.work-study .work-study__card:hover .work-study__visual img,.work-study .work-study__card:focus-visible .work-study__visual img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;transform:none;will-change:auto}
.work-study .work-archive__preview img,.work-study .work-archive__row>img{object-fit:contain}

/* The archive uses matching 16:9 exports and a matching preview frame. */
.work-study .work-archive.is-pinned .work-archive__preview{height:auto;aspect-ratio:16/9;top:42%;transform:translateY(-50%)}

/* A smaller look at the decorative motion within the CNN article. */
.painting-case .case-video-detail{max-width:560px}
.painting-case .case-video-detail figcaption{max-width:58ch;line-height:1.7}

/* Small motion details sit together, stacking naturally on mobile. */
.case-video-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:65px 0;max-width:1148px}
.painting-case .case-video-details .case-video-detail{margin:0;max-width:none;min-width:0}
@media(max-width:767px){.case-video-details{grid-template-columns:1fr;max-width:560px;gap:35px}}

/* Let the paired motion details use the full project grid. */
.painting-case .case-video-details{width:100%;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:767px){.painting-case .case-video-details{grid-template-columns:1fr}}

.painting-case .story-callout{max-width:760px;padding:32px 0;margin:65px 0;border-block:1px dashed #bcc6d3}
.painting-case .story-callout h2{font-size:clamp(28px,3vw,42px);line-height:1.25;margin:0 0 18px;text-wrap:balance}
.painting-case .story-callout p{font-size:20px;line-height:1.65;color:#6c737e;margin:0;text-wrap:pretty}
@media(max-width:700px){.painting-case .story-callout p{font-size:18px}}

.painting-case .case-video-medium{max-width:760px}

/* Keep the label/title group compact and centred against the thumbnail. */
.painting-case .next-project{align-items:center}
.painting-case .next-project__copy{display:flex;flex-direction:column;justify-content:center;gap:3px}
body.case-type-system .next-project__label{margin:0;line-height:1.35}
body.case-type-system .next-project__title{margin:0;line-height:1.2}

.painting-case .case-video-details>figure{margin:0;min-width:0;align-self:start}

/* Body-copy links use the site's rising-blue underline. */
.painting-case p a:not(.case-primary-cta) {
    color: #1f365b;
    text-decoration: none;
    background: linear-gradient(rgba(117, 161, 210, .2), rgba(117, 161, 210, .2)) left bottom / 100% 5% no-repeat;
    transition: background-size 200ms ease, color 200ms ease;
}
.painting-case p a:not(.case-primary-cta):hover,
body #main .painting-case p a:not(.case-primary-cta):focus-visible {
    color: #111;
    text-decoration: none;
    background-size: 100% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .painting-case p a:not(.case-primary-cta) { transition: none; }
}

/* Offset paired media on desktop without interfering with reveal transforms. */
@media (min-width: 1024px) {
    .painting-case .case-video-details--staggered > figure:nth-child(2) {
        width: 90%;
        justify-self: end;
        margin-top: 130px;
    }
}

.painting-case figure.case-media-centered {
    margin-inline: auto;
}