@charset "UTF-8";

.phase-five-page { min-height: 100vh; }
.privy-page .case-cover-panel { padding-top: 32px; }

.case-hero {
    padding-block: 88px 64px;
    scroll-margin-top: 72px;
}

.case-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    align-items: center;
    gap: 64px;
}

.case-hero-copy h1 {
    max-width: 680px;
    margin: 8px 0 20px;
    font-size: 52px;
    line-height: 64px;
}

.case-hero-copy .body-lg {
    max-width: 620px;
    margin: 0;
    color: var(--body);
}

.case-hero-copy .button-row { margin-top: 28px; }

.case-cover-panel {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 600px;
    padding: 48px 32px 32px;
    overflow: hidden;
    color: #ffffff;
    background: #000000;
    border-radius: 16px;
}

.case-cover-panel::before,
.case-cover-panel::after {
    content: "";
    position: absolute;
    opacity: .28;
    background: #ffffff;
}

.case-cover-panel::before { top: 50%; left: 10%; width: 80%; height: 1px; }
.case-cover-panel::after { top: 10%; left: 50%; width: 1px; height: 80%; }

.case-cover-label {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    padding: 6px 10px;
    color: #000000;
    background: #ffffff;
    border-radius: 999px;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
}

.case-cover-label:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.case-screen-frame {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    background: #000000;
    border: 8px solid #000000;
    border-radius: 16px;
}

.case-screen-frame { width: min(62%, 286px); }
.case-screen-frame picture,
.case-gallery picture { display: contents; }
.case-screen-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }

.project-transition-incoming .case-screen-frame img,
.case-screen-frame img.is-project-transition-target { opacity: 0; }

.project-transition-arrival {
    position: fixed;
    z-index: 1001;
    display: block;
    object-fit: contain;
    background: transparent;
    border-radius: 16px;
    filter: drop-shadow(0 16px 24px rgba(0,0,0,.24));
    pointer-events: none;
    will-change: left, top, width, height;
}

.case-facts { margin-top: 32px; }
.case-facts dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 24px;
    background: var(--canvas-soft);
    border-radius: 16px;
}

.case-facts dl > div { padding-inline: 20px; border-left: 1px solid var(--surface-pressed); }
.case-facts dl > div:first-child { padding-left: 0; border-left: 0; }
.case-facts dt { margin-bottom: 6px; color: var(--body); font-size: 12px; line-height: 16px; }
.case-facts dd { margin: 0; color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; }

.contribution-band {
    padding-block: 72px;
    color: #ffffff;
    background: #000000;
    scroll-margin-top: 72px;
}

.contribution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.contribution-card {
    padding: 32px;
    border-radius: 16px;
}

.contribution-card-primary { color: #000000; background: #ffffff; }
.contribution-card-shared { color: #ffffff; background: #282828; border: 1px solid #4b4b4b; }
.contribution-card h3 { margin: 8px 0 20px; font-size: 24px; line-height: 32px; }
.contribution-card ul { display: grid; gap: 12px; margin: 0; padding-left: 20px; }
.contribution-card li,
.contribution-card p { line-height: 24px; }
.contribution-card-primary .eyebrow { color: #5e5e5e; }
.contribution-card-shared .eyebrow { color: #d5d5d5; }

.privy-tech-stack {
    margin-top: 24px;
    padding: 24px 32px;
    color: #000000;
    background: #ffffff;
    border-radius: 16px;
}

.privy-tech-stack h3 {
    margin: 0;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.privy-tech-stack .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0;
    margin: 12px 0 0;
    padding: 0;
}

/* These surfaces stay white in both themes, so their inline tech labels must
   not inherit the page-level dark-theme text token. */
.contribution-card-primary .skill-dot-list li,
.privy-tech-stack .skill-dot-list li {
    color: #000000;
}

.contribution-card-primary .skill-dot-list li:not(:last-child)::after,
.privy-tech-stack .skill-dot-list li:not(:last-child)::after {
    color: #707070;
}

#contributions .section-heading > p,
#gallery .section-heading > p {
    justify-self: end;
    text-align: right;
}

.gallery-section { scroll-margin-top: 72px; }
.case-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-gallery figure {
    height: 100%;
    margin: 0;
    padding: 16px;
    background: var(--canvas-soft);
    border-radius: 16px;
}

.case-gallery figure > div {
    position: relative;
    display: grid;
    place-items: center;
    height: 500px;
    overflow: hidden;
    background: #000000;
    border-radius: 12px;
}

.case-gallery img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.case-gallery figcaption { display: grid; gap: 3px; margin-top: 12px; }
.case-gallery figcaption strong { font-size: 14px; line-height: 20px; }
.case-gallery figcaption span { color: var(--body); font-size: 12px; line-height: 20px; }

.case-motion-ready [data-case-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 380ms cubic-bezier(.2,.8,.2,1), transform 380ms cubic-bezier(.2,.8,.2,1);
}

.case-motion-ready [data-case-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1000px) {
    .case-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr); gap: 36px; }
    .case-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; }
    .case-facts dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .case-hero { padding-block: 64px 48px; }
    .case-hero-grid { grid-template-columns: 1fr; gap: 32px; }
    .case-hero-copy h1 { font-size: 42px; line-height: 50px; }
    .case-cover-panel { min-height: 540px; }
    .case-screen-frame { width: min(72%, 250px); }
    .case-facts dl { grid-template-columns: 1fr; }
    .case-facts dl > div,
    .case-facts dl > div:nth-child(3) { padding: 12px 0; border-top: 1px solid var(--surface-pressed); border-left: 0; }
    .case-facts dl > div:first-child { padding-top: 0; border-top: 0; }

    .contribution-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    #contributions .section-heading > p,
    #gallery .section-heading > p {
        justify-self: start;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .case-hero-copy h1 { font-size: 36px; line-height: 44px; }
    .case-cover-panel { min-height: 500px; padding-inline: 20px; }
    .case-facts dl { padding: 20px; }
    .case-gallery { grid-template-columns: 1fr; }
    .case-gallery figure > div { height: 560px; }
    .contribution-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .case-motion-ready [data-case-reveal] { opacity: 1; transform: none; transition: none; }
}