/* Project gallery: one artboard system for screens, photographs and logos. */
[data-page="projects"] {
    --case-line: rgb(255 255 255 / 13%); --case-accent: #d4d4d4;
    --case-surface: #111111; --case-media: #151515; --case-inset: #0c0c0c;
}
.projects-main { gap: 22px; }
.projects-heading > p { max-width: 300px; color: #bcbcbc; }
.project-stage { overflow: clip; }
.project-gallery, .project-detail {
    transition: transform 280ms cubic-bezier(.2,.75,.2,1), opacity 200ms ease, visibility 280ms;
}
.project-gallery { gap: 18px; }
.project-filters { gap: 25px; }
.project-filters button { color: #ababab; }
.project-filters button[aria-pressed="true"] { color: #e5e5e5; border-color: var(--case-accent); }
.project-track { gap: 22px; padding: 1px 1px 3px; scroll-padding-inline: 1px; }
.project-card {
    flex: 0 0 calc((100% - 22px) / 2.08);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 42px minmax(0, 1fr) 156px;
    padding: 0; border: 1px solid var(--case-line); border-radius: 14px;
    overflow: hidden; background: var(--case-surface); color: #f1f1f1;
    transition: border-color 180ms ease;
}
.project-card:hover { background: var(--case-surface); border-color: rgb(255 255 255 / 32%); box-shadow: none; }
.project-card:focus-visible { outline-offset: -5px; }
.card-topline {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 0 20px; border-bottom: 1px solid var(--case-line);
    color: #a8a8a8; font-size: 9px; letter-spacing: 1.6px;
}
.project-card-number { position: static; padding: 0; background: none; color: #bcbcbc; font-size: 10px; }
.card-topline-label { margin-left: auto; font-size: 8px; letter-spacing: 1.4px; text-transform: uppercase; }
.project-card-arrow { position: static; width: 16px; height: 16px; color: #c9c9c9; transition: transform 250ms; }
.project-card:hover .project-card-arrow { transform: translate(2px, -2px); }
.project-card-media {
    isolation: isolate; min-width: 0; min-height: 0;
    background: var(--case-media);
    border-bottom: 1px solid var(--case-line);
}
.project-image-frame {
    position: absolute; inset: 12px;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border: 1px solid var(--case-line); border-radius: 7px;
    background: var(--case-inset);
    transition: transform 180ms ease;
}
.project-card-media img,
.project-card[data-fit="contain"] .project-card-media img,
.project-card[data-kind="logo"] .project-card-media img,
.project-card[data-kind="photo"] .project-card-media img {
    display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0;
    object-fit: contain; object-position: center; transform: none;
}
.project-card:hover .project-card-media img,
.project-card[data-kind="photo"]:hover .project-card-media img { transform: none; }
.project-card:hover .project-image-frame { transform: translateY(-3px); }
.project-card[data-kind="screen"] .project-card-media img { object-fit: cover; }
.project-card[data-project="rocketcalc"] .project-card-media img { object-position: center 32%; }
.project-card[data-kind="logo"] .project-image-frame {
    inset: 12px 18px; border: 0; border-radius: 0; background: none; box-shadow: none;
}
.project-card[data-kind="logo"] .project-card-media img { max-width: 100%; max-height: 100%; padding: 4px; }
.project-card[data-kind="photo"] .project-image-frame { background: var(--case-inset); }
.project-card[data-kind="photo"] .project-card-media img { padding: 0; }
.project-card[data-feature="true"] .project-image-frame { inset: 30px 18px 33px; }
.project-card-feature {
    position: absolute; top: 14px; left: 20px; color: #e8d3af;
    font-size: 10px; font-weight: 600; letter-spacing: 2.4px;
}
.card-achievements { position: absolute; bottom: 12px; left: 20px; right: 20px; display: flex; justify-content: center; gap: 22px; }
.card-achievement { display: flex; align-items: baseline; gap: 8px; }
.card-achievement + .card-achievement { border-left: 1px solid var(--case-line); padding-left: 22px; }
.card-achievement strong { color: #d9c39d; font-size: 19px; font-weight: 500; }
.card-achievement small { color: #bcbcbc; font-size: 8px; }
.project-card-metric {
    right: 35px; bottom: 30px; padding: 7px 10px;
    border-color: rgb(255 255 255 / 24%); border-radius: 4px;
    background: var(--case-inset); color: #e7e7e7; font-size: 10px;
}
.project-card-info { display: flex; flex-direction: column; align-items: start; padding: 20px; min-width: 0; }
.project-card-category { display: none; }
.project-card h2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 0; margin: 0 0 9px; font-size: clamp(22px, 2vw, 28px);
    line-height: 1.15; font-weight: 500; letter-spacing: -.7px;
}
.project-card-info p { min-height: 0; margin: 0; color: #b5b5b5; font-size: 11px; line-height: 1.65; }
.card-baseline { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: auto; padding-top: 12px; }
.card-technologies { color: #999999; font-size: 9px; }
.card-open { display: inline-flex; align-items: center; gap: 9px; color: #d4d4d4; font-size: 10px; }
.card-open svg { width: 14px; height: 14px; transition: transform 250ms; }
.project-card:hover .card-open svg { transform: translateX(4px); }
.gallery-bottom { gap: 26px; }
.gallery-count { font-size: 10px; color: #b5b5b5; }
.gallery-progress { position: relative; flex: 1; height: 2px; max-width: 200px; margin-left: auto; overflow: hidden; background: rgb(255 255 255 / 14%); }
.gallery-progress span { position: absolute; top: 0; bottom: 0; left: 0; background: var(--case-accent); }
.gallery-pagination { gap: 14px; }
.gallery-position { min-width: 75px; color: #cccccc; font-size: 10px; }
.icon-button { border-color: var(--case-line); border-radius: 50%; background: var(--case-surface); transition: border-color 200ms, background 200ms; }
.icon-button:hover { border-color: var(--case-accent); background: #1c1c1c; }
.detail-topbar { min-height: 44px; }
.detail-topbar .plain-button { color: #d4d4d4; }
.detail-body { gap: 26px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); scrollbar-color: #707070 transparent; touch-action: pan-y; }
.detail-visual { display: flex; flex-direction: column; gap: 11px; min-width: 0; min-height: 0; }
.detail-image-wrap {
    position: relative; flex: 1; min-height: 0; overflow: hidden;
    border: 1px solid var(--case-line); border-radius: 12px;
    background: var(--case-media);
}
.detail-image,
.detail-image-wrap[data-kind="logo"] .detail-image,
.detail-image-wrap[data-kind="photo"] .detail-image {
    position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
    padding: 10px; object-fit: contain; object-position: center; transform: none;
}
.detail-image-wrap[data-kind="logo"] .detail-image { padding: 18px; }
.detail-image-wrap[data-feature="true"] .detail-image { padding-top: 42px; }
.detail-feature { position: absolute; top: 22px; left: 25px; color: #e0c89f; font-size: 11px; letter-spacing: 3px; }
.detail-achievements { display: flex; gap: 24px; padding: 16px 20px; border: 1px solid var(--case-line); border-radius: 8px; background: var(--case-surface); }
.detail-achievements[hidden] { display: none; }
.detail-achievements .card-achievement { flex: 1; }
.detail-achievements strong { font-size: 26px; }
.detail-achievements small { font-size: 10px; }
.detail-caption-row { min-height: 18px; }
.detail-caption { color: #ababab; line-height: 1.5; }
.detail-image-choices button { border-color: var(--case-line); border-radius: 5px; background: var(--case-surface); transition: border-color 180ms; }
.detail-image-choices button[aria-pressed="true"] { color: #e2cba5; border-color: #b69c73; }
.detail-copy { min-width: 0; align-self: start; padding: 24px; border: 1px solid var(--case-line); border-radius: 12px; background: var(--case-surface); }
.detail-copy .page-eyebrow { font-size: 9px; color: #ababab; letter-spacing: 2px; margin-bottom: 15px; }
.detail-copy h2 { margin-bottom: 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 500; letter-spacing: -1px; outline: none; }
.detail-subtitle { margin-bottom: 20px; font-size: 12px; color: #d2d2d2; line-height: 1.6; }
.detail-description, .detail-contribution { font-size: 12px; line-height: 1.8; color: #b8b8b8; }
.detail-label { margin-top: 22px; margin-bottom: 10px; color: #a3a3a3; font-size: 9px; letter-spacing: 1.8px; }
.detail-technologies { gap: 6px; }
.detail-technologies li { padding: 5px 8px; border: 1px solid var(--case-line); border-radius: 3px; color: #c7c7c7; font-size: 9px; }
.detail-metric { margin-top: -2px; margin-bottom: 19px; border-color: var(--case-line); border-radius: 4px; background: var(--case-inset); color: #e7e7e7; }
.detail-status { color: #c6b391; }
.detail-bottom { border-top-color: var(--case-line); }
.detail-links .text-link { border-bottom-color: #7f715a; color: #e1ccaa; }
.project-image-ghost { position: fixed; z-index: 40; pointer-events: none; margin: 0; overflow: hidden; border: 1px solid var(--case-line); border-radius: 9px; background: var(--case-media); }
.project-image-ghost img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
@media (max-width: 1100px) {
    .project-card { flex-basis: calc((100% - 22px) / 2); }
    .project-card h2 { font-size: 23px; }
    .project-filters { gap: 20px; }
    .detail-body { gap: 20px; }
    .detail-copy { padding: 20px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .projects-main { gap: 17px; }
    .projects-main:has(.is-detail) { gap: 0; }
    .project-gallery { gap: 14px; }
    .project-track { gap: 14px; }
    .project-card { flex-basis: 94%; grid-template-columns: minmax(0, 1fr); grid-template-rows: 35px minmax(0, 1fr) 155px; border-radius: 12px; }
    .card-topline { padding: 0 16px; gap: 10px; }
    .card-topline-label { font-size: 7px; letter-spacing: .8px; }
    .project-image-frame { inset: 10px; }
    .project-card[data-kind="logo"] .project-image-frame { inset: 10px 14px; }
    .project-card[data-feature="true"] .project-image-frame { inset: 28px 14px 34px; }
    .project-card-feature { left: 16px; top: 12px; font-size: 9px; }
    .card-achievements { bottom: 9px; left: 14px; right: 14px; gap: 12px; }
    .card-achievement { gap: 6px; }
    .card-achievement + .card-achievement { padding-left: 12px; }
    .card-achievement strong { font-size: 17px; }
    .card-achievement small { font-size: 7px; }
    .project-card-info { padding: 16px; }
    .project-card h2 { margin-bottom: 8px; font-size: 23px; }
    .project-card-info p { min-height: 0; font-size: 10px; line-height: 1.6; }
    .card-technologies { font-size: 8px; }
    .card-baseline { padding-top: 10px; gap: 8px; }
    .project-card-arrow { width: 14px; height: 14px; }
    .project-card-metric { bottom: 24px; right: 24px; padding: 6px 8px; font-size: 9px; }
    .gallery-bottom { gap: 10px; }
    .gallery-progress { display: none; }
    .gallery-pagination { gap: 10px; }
    .gallery-position { min-width: 56px; font-size: 9px; }
    .detail-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; gap: 17px; }
    .detail-image-wrap { flex: auto; height: 195px; }
    .detail-image, .detail-image-wrap[data-kind="photo"] .detail-image { padding: 8px; }
    .detail-image-wrap[data-kind="logo"] .detail-image { padding: 12px; }
    .detail-feature { top: 15px; left: 18px; font-size: 9px; }
    .detail-image-wrap[data-feature="true"] .detail-image { padding-top: 38px; }
    .detail-achievements { padding: 12px 15px; gap: 14px; }
    .detail-achievements strong { font-size: 23px; }
    .detail-achievements small { font-size: 9px; }
    .detail-copy { padding: 20px; }
    .detail-copy h2 { font-size: 28px; }
    .detail-subtitle { font-size: 11px; margin-bottom: 17px; }
    .detail-description, .detail-contribution { font-size: 11px; line-height: 1.8; }
    .detail-bottom .plain-button { font-size: 10px; }
}
@media (max-height: 850px) and (min-width: 701px) {
    .projects-main { padding-top: 12px; }
    .projects-heading h1 { font-size: 42px; }
    .projects-heading .page-eyebrow { margin-bottom: 8px; }
    .projects-main { gap: 14px; }
    .project-gallery { gap: 10px; }
    .project-card { grid-template-rows: 34px minmax(0, 1fr) 130px; }
    .project-card-info { padding: 15px 18px; }
    .project-card h2 { font-size: 22px; margin-bottom: 7px; }
    .project-card-info p { font-size: 10px; }
    .project-image-frame { inset: 10px; }
    .detail-copy { padding: 18px; }
    .detail-copy h2 { font-size: 30px; }
}
@media (max-height: 650px) and (orientation: portrait) {
    .projects-main { gap: 12px; }
    .project-card { flex-basis: 100%; grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .card-topline { position: absolute; z-index: 2; top: 10px; left: 12px; padding: 0; border: 0; }
    .card-topline-label, .card-topline .project-card-arrow { display: none; }
    .project-card-media { grid-column: 1; grid-row: 1; border: 0; border-right: 1px solid var(--case-line); }
    .project-image-frame, .project-card[data-kind="logo"] .project-image-frame { inset: 30px 9px 12px; }
    .project-card[data-feature="true"] .project-image-frame { inset: 42px 9px 42px; }
    .project-card-feature { left: 10px; top: 28px; font-size: 7px; letter-spacing: 1px; }
    .project-card-info { grid-column: 2; grid-row: 1; padding: 15px 12px; }
    .project-card h2 { font-size: 17px; letter-spacing: -.4px; }
    .project-card-info p { -webkit-line-clamp: 3; font-size: 9px; line-height: 1.6; }
    .card-technologies { display: none; }
    .card-open { font-size: 9px; }
    .card-baseline { padding-top: 6px; }
    .card-achievements { gap: 5px; left: 6px; right: 6px; bottom: 7px; }
    .card-achievement { flex-direction: column; gap: 2px; align-items: center; }
    .card-achievement + .card-achievement { padding-left: 5px; }
    .card-achievement strong { font-size: 13px; }
    .card-achievement small { font-size: 5px; }
    .project-card-metric { bottom: 8px; right: 5px; left: 5px; text-align: center; font-size: 7px; padding: 5px 2px; }
    .detail-image-wrap { height: 135px; }
    .detail-copy { padding: 16px; }
    .detail-copy h2 { font-size: 24px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .projects-main { gap: 8px; }
    .project-gallery { gap: 6px; }
    .project-card { flex-basis: calc((100% - 16px) / 2); grid-template-columns: 40% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .project-track { gap: 16px; }
    .card-topline { position: absolute; z-index: 2; left: 10px; top: 8px; padding: 0; border: 0; }
    .card-topline-label, .card-topline .project-card-arrow { display: none; }
    .project-card-media { grid-column: 1; grid-row: 1; border-right: 1px solid var(--case-line); border-bottom: 0; }
    .project-image-frame, .project-card[data-kind="logo"] .project-image-frame { inset: 26px 8px 10px; }
    .project-card[data-feature="true"] .project-image-frame { inset: 33px 8px 35px; }
    .project-card-info { grid-column: 2; grid-row: 1; padding: 14px 12px; }
    .project-card h2 { font-size: 16px; }
    .project-card-info p, .card-technologies { display: none; }
    .project-card-feature { top: 23px; left: 9px; font-size: 7px; letter-spacing: .8px; }
    .card-achievements { left: 5px; right: 5px; bottom: 6px; gap: 6px; }
    .card-achievement { flex-direction: column; gap: 2px; align-items: center; }
    .card-achievement + .card-achievement { padding-left: 6px; }
    .card-achievement strong { font-size: 12px; }
    .card-achievement small { font-size: 5px; }
    .project-card-metric { right: 5px; left: 5px; bottom: 7px; padding: 4px 2px; font-size: 7px; text-align: center; }
    .card-baseline { padding-top: 5px; }
    .card-open { font-size: 8px; }
    .detail-copy { padding: 14px; }
    .detail-copy h2 { font-size: 23px; }
    .detail-image-wrap { min-height: 135px; }
    .detail-image { padding: 10px; }
    .detail-achievements { padding: 8px 12px; }
    .detail-achievements strong { font-size: 18px; }
    .detail-achievements small { font-size: 8px; }
    .gallery-progress { max-width: 85px; }
}
@media (prefers-reduced-motion: reduce) {
    .project-gallery, .project-detail, .project-card, .project-image-frame, .card-open svg, .gallery-progress span { transition: none; }
}

/* Centred, circular project carousel. Only the active card opens details. */
.project-track {
    position: relative; display: block; overflow: hidden; padding: 0;
    scroll-snap-type: none; touch-action: pan-y; isolation: isolate;
}
.project-track .project-card {
    position: absolute; left: 50%; top: 50%; width: min(44%, 600px); height: calc(100% - 8px);
    margin: 0; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(calc(-50% + var(--offset) * 80%), -50%) scale(.6);
    transition: transform 280ms cubic-bezier(.2,.75,.2,1), opacity 200ms ease, visibility 280ms, border-color 180ms;
}
.project-track .project-card[data-slot="previous"],
.project-track .project-card[data-slot="next"] {
    z-index: 2; opacity: .6; visibility: visible; pointer-events: auto;
    transform: translate(calc(-50% + var(--offset) * 80%), -50%) scale(.66);
}
.project-track .project-card[data-slot="active"] {
    z-index: 3; opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1); border-color: rgb(255 255 255 / 25%);
}
.project-track .project-card[data-slot="previous"]:hover,
.project-track .project-card[data-slot="next"]:hover { opacity: .85; }
.project-card[data-kind="logo"] .project-image-frame { inset: 14px 24px; }
.project-card[data-feature="true"] .project-image-frame { inset: 30px 24px 36px; }
.project-card[data-project="rocketcalc"] .project-card-media img { object-position: center; }
.project-card:not([data-slot="active"]) .card-open { visibility: hidden; }
@media (max-width: 700px) and (orientation: portrait) {
    .project-track .project-card { width: 82%; }
    .project-track .project-card[data-slot="previous"],
    .project-track .project-card[data-slot="next"] {
        transform: translate(calc(-50% + var(--offset) * 86%), -50%) scale(.78);
    }
    .project-track .project-card[data-slot="hidden"] { transform: translate(calc(-50% + var(--offset) * 86%), -50%) scale(.72); }
    .project-card[data-kind="logo"] .project-image-frame { inset: 12px 16px; }
    .project-card[data-feature="true"] .project-image-frame { inset: 28px 16px 34px; }
    .project-track .project-card h2 { font-size: 21px; }
    .project-track .card-topline-label { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-height: 650px) and (orientation: portrait) {
    .project-track .project-card { width: 82%; }
    .project-card[data-kind="logo"] .project-image-frame { inset: 27px 7px 10px; }
    .project-card[data-feature="true"] .project-image-frame { inset: 40px 7px 41px; }
    .project-track .project-card h2 { font-size: 16px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .project-track .project-card { width: 52%; }
    .project-card[data-kind="logo"] .project-image-frame { inset: 25px 8px 10px; }
    .project-card[data-feature="true"] .project-image-frame { inset: 33px 8px 35px; }
}
@media (prefers-reduced-motion: reduce) {
    .project-track .project-card { transition: none; }
}

/* Give an open project the available viewport rather than the gallery heading. */
.projects-main:has(.is-detail) {
    grid-template-rows: minmax(0, 1fr); gap: 0;
    padding: 8px clamp(16px, 3vw, 56px) 12px;
}
.projects-main:has(.is-detail) .projects-heading { display: none; }
.project-stage.is-detail .detail-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(18px, 2vw, 32px); }
.project-stage.is-detail .detail-copy { align-self: stretch; padding: clamp(22px, 2.5vw, 38px); }
.project-stage.is-detail .detail-copy h2 { font-size: clamp(30px, 3.2vw, 48px); }
.project-stage.is-detail .detail-description,
.project-stage.is-detail .detail-contribution { font-size: 14px; }
.project-stage.is-detail .detail-subtitle { font-size: 14px; }
[data-page="projects"]:has(.is-detail) .home-footer { padding-top: 4px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
@media (min-width: 701px) and (min-height: 521px) {
    [data-page="projects"]:has(.is-detail) .home-header { min-height: 92px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .projects-main:has(.is-detail) { padding: 8px 14px 8px; }
    .project-stage.is-detail .detail-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .project-stage.is-detail .detail-image-wrap { height: clamp(220px, 32dvh, 340px); }
    .project-stage.is-detail .detail-copy { padding: 22px; }
    .project-stage.is-detail .detail-copy h2 { font-size: 30px; }
    .project-stage.is-detail .detail-description,
    .project-stage.is-detail .detail-contribution,
    .project-stage.is-detail .detail-subtitle { font-size: 12px; }
}
@media (max-height: 650px) and (orientation: portrait) {
    .project-stage.is-detail .detail-image-wrap { height: 185px; }
    .project-stage.is-detail .detail-copy { padding: 18px; }
    .project-stage.is-detail .detail-copy h2 { font-size: 26px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .projects-main:has(.is-detail) { padding-top: 0; padding-bottom: 4px; }
    .project-stage.is-detail .detail-copy { padding: 16px; }
    .project-stage.is-detail .detail-copy h2 { font-size: 26px; }
    .project-stage.is-detail .detail-description,
    .project-stage.is-detail .detail-contribution,
    .project-stage.is-detail .detail-subtitle { font-size: 12px; }
}

/* Keep long desktop content inside its panel; mobile retains one scroll area. */
@media (min-width: 701px), (orientation: landscape) {
    .project-stage.is-detail .detail-body { overflow: hidden; }
    .project-stage.is-detail .detail-copy,
    .project-stage.is-detail .detail-visual {
        min-height: 0; overflow-y: auto; overscroll-behavior-y: contain;
        scrollbar-width: thin; scrollbar-color: #707070 transparent;
    }
    .project-stage.is-detail .detail-image-wrap { flex-shrink: 0; min-height: 160px; }
}