/* Natural photo ratios and responsive positioning replace unrecoverable coordinates. */
.photography-card img, .collage-card img {
    height: auto;
    aspect-ratio: auto;
}
.asset-unavailable {
    min-height: 220px;
    display: grid;
    place-items: center;
    background: var(--muted);
    color: var(--muted-foreground);
    font-size: 0.85rem;
}
.about-resume__button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
body[data-section="others"] .main-body.project-gallery {
    margin: 0 auto;
    padding: 34px clamp(20px, 4vw, 72px) 80px;
}

body[data-section="others"] .container {
    display: block;
}

body[data-section] .container,
body[data-section] .architecture-index,
body[data-section] .home-main-hero {
    margin-top: 0;
}

body[data-section="others"] > main:not(.architecture-index) {
    margin: 0 auto;
    padding: 34px clamp(20px, 4vw, 72px) 80px;
}

body.art-index-page .architecture-index {
    padding-top: 34px;
}

.art-work-navigation {
    position: static;
    max-width: 1480px;
    margin: 0 auto 28px;
    background: var(--background);
}

.art-work-navigation .project-back-link {
    position: static;
    margin: 0;
}

/* The shared footer owns the gap after the final content on every page. */
body[data-section] > main,
body[data-section] > .container,
body[data-section] .main-body.project-gallery,
body[data-section="others"] > main:not(.architecture-index),
body[data-section] .about-editorial,
body[data-section] .about-editorial__inner:last-child,
body[data-section] .about-resume,
body[data-section] .interior-project-gallery,
body[data-section] .interior-project-press {
    margin-bottom: 0;
    padding-bottom: 0;
}

body[data-section] > .architecture-index {
    min-height: 0;
}

body[data-section] .fabric-work > .project-image:last-child,
body[data-section] .about-resume__entries > .resume-entry:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-end-navigation {
    width: min(calc(100% - 40px), 1480px);
    margin: 0 auto;
    padding: 28px 0 42px;
    border-top: 0;
    display: flex;
    justify-content: flex-end;
}

.page-end-navigation--no-divider {
    border-top: 0;
}

.page-top-link {
    padding: 8px 0;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.page-top-link:hover {
    color: var(--foreground);
}

.page-top-link:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

.art-project-intro {
    max-width: 1480px;
    margin: 0 auto 44px;
    padding: 8px 0 32px;
    border-bottom: 1px solid var(--line);
    color: var(--foreground);
}

.art-project-intro__copy {
    width: 100%;
    max-width: none;
}

.art-project-intro__copy p {
    margin: 0 0 1rem;
    font-size: 1rem;
    line-height: 1.85;
    letter-spacing: 0;
    text-align: justify;
    overflow-wrap: anywhere;
}

.art-project-intro__copy p:last-child {
    margin-bottom: 0;
}

.fabric-work .project-image {
    max-width: 1480px;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

.art-index-page .collage-thumbnail {
    overflow: hidden;
    background: transparent;
}

/* Trim the source's white bands without changing the preview box or gallery image. */
.art-index-page .collage-thumbnail__image {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: calc(100% * 4252 / 4156);
    object-fit: cover;
    transform: translateY(-50%);
}

.art-index-page .architecture-card[href="fabric.html"] .architecture-card__preview {
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

:is(.photography-wall, .collage-wall, .drawing-wall) {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    min-height: 0;
}

:is(.photography-wall, .collage-wall, .drawing-wall) > figure:nth-child(n) {
    position: static;
    width: min(88%, 520px);
    max-width: 100%;
    margin: 0;
    grid-column: auto;
    justify-self: start;
}

:is(.photography-wall, .collage-wall, .drawing-wall) > figure:nth-child(even) {
    justify-self: end;
}

.photography-wall > .photography-card.is-landscape:nth-child(n) {
    width: min(100%, 560px);
}

.photography-wall > .photography-card.is-portrait:nth-child(n) {
    width: min(80%, 430px);
}

.drawing-wall > .drawing-card.is-portrait:nth-child(n) {
    width: min(80%, 390px);
}

.drawing-wall--featured > .drawing-card:nth-child(n) {
    width: min(78%, 520px);
}

.drawing-wall--featured > .drawing-card.is-portrait:nth-child(n) {
    width: min(66%, 390px);
}

.drawing-wall--featured > .drawing-card.drawing-card--featured:nth-child(n) {
    width: min(100%, 680px);
}

:is(.photography-wall, .collage-wall, .drawing-wall).is-positioned {
    display: block;
}

:is(.photography-wall, .collage-wall, .drawing-wall).is-positioned > figure:nth-child(n) {
    position: absolute;
    margin: 0;
}

.photography-rotated-frame {
    display: block;
    padding: clamp(8px, 0.9vw, 12px) clamp(52px, 5.6vw, 80px);
    background: var(--popover);
}

.photography-card figcaption {
    justify-content: flex-end;
    text-align: right;
    color: var(--muted-foreground);
    font-weight: 600;
    white-space: nowrap;
}

.photography-rotated-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--source-height) / var(--source-width);
}

.photography-rotated-image > img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% * var(--source-width) / var(--source-height));
    max-width: none;
    height: auto;
    border: 0;
    background: transparent;
    transform: translate(-50%, -50%) rotate(90deg);
}

@media (max-width: 1180px) {
    .photography-card img {
        border-width: 8px clamp(16px, 4vw, 52px);
    }
    .photography-frame {
        padding: 8px 12%;
    }
    .photography-rotated-frame {
        padding: 8px clamp(16px, 4vw, 52px);
    }
    .photography-card.has-native-frame > img, .photography-frame img, .photography-rotated-image > img {
        border: 0;
    }
}