/* The portfolio keeps the site's archive header, then shifts into a quiet
   full-width image study inspired by long-form artist series pages. */
.portfolio-page {
    max-width: 1400px;
    padding-top: 0;
    padding-bottom: 5rem;
}

.portfolio-page .archive-header {
    margin-top: 40px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--blue-alpha-20);
    padding: 0 0 1.0rem;
}

.portfolio-page .section-title { margin-bottom: 2.2rem; }
.portfolio-page .text-content { max-width: 760px; margin-bottom: 0; font-size: 1.12rem; line-height: 1.9; }

.portfolio-total,
.portfolio-range-header > span,
.portfolio-range-en,
.portfolio-range-count,
.portfolio-range-index,
.portfolio-range-option-count,
.empty-index,
.lightbox-caption > div,
.lightbox-caption > p { font-family: var(--font-mono); }

.portfolio-total { color: var(--accent-red); }

.portfolio-range-section {
    padding: 2.0rem 0 2.0rem;
    border-bottom: 1px solid var(--blue-alpha-20);
}

.portfolio-range-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.0rem;
}

.portfolio-range-header h2 {
    color: var(--text-primary);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 400;
}

.portfolio-range-header > span {
    color: var(--text-secondary);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
}

.portfolio-range-grid {
    display: grid;
    gap: 0.35rem;
    max-width: 100%;
    overflow: visible;
    /* Keep each row's hover lift and focus ring inside its own breathing room. */
    padding: 0.35rem 0.1rem;
    overscroll-behavior-inline: contain;
}

.portfolio-range-row {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.45rem 0.1rem 0.5rem;
}

.portfolio-range-option {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    aspect-ratio: 1.45;
    flex: 0 0 clamp(92px, 9.2vw, 148px);
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--blue-alpha-25);
    border-radius: 0;
    background: var(--blue-alpha-05);
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}

.portfolio-range-option:hover,
.portfolio-range-option:focus-visible {
    border-color: var(--accent-red);
    background: var(--accent-alpha-10);
    color: var(--text-primary);
    outline: none;
    transform: translateY(-2px);
}

.portfolio-range-option[aria-selected="true"] {
    border-color: var(--accent-red);
    background: var(--accent-alpha-15);
    color: var(--text-primary);
}

.portfolio-range-index,
.portfolio-range-option-count {
    color: var(--accent-red);
    font-size: 0.58rem;
    line-height: 1;
}

.portfolio-range-option-count { position: absolute; top: 0.55rem; right: 0.55rem; }
.portfolio-range-option-title { --range-title-min-size: 0.62rem; display: block; width: 100%; min-width: 0; margin-top: auto; padding-right: 0.25rem; overflow: hidden; font-size: 0.88rem; line-height: 1.28; text-overflow: ellipsis; white-space: nowrap; }

.portfolio-range-description {
    display: grid;
    grid-template-columns: minmax(170px, 0.34fr) minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 2rem;
    padding: 2.75rem 0 3.35rem;
    border-bottom: 1px solid var(--blue-alpha-20);
}

.portfolio-range-description-heading h2 { color: var(--text-primary); font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 400; line-height: 1.3; }
.portfolio-range-en { margin-top: 0.3rem; color: var(--accent-red); font-size: 0.65rem; letter-spacing: 0.1em; }
.portfolio-range-copy { color: var(--text-secondary); font-size: 1rem; line-height: 1.9; }
.portfolio-range-count { align-self: end; color: var(--text-secondary); font-size: 0.68rem; white-space: nowrap; }

.portfolio-gallery { padding-top: 2rem; }

.portfolio-grid {
    --gallery-gap: clamp(0.75rem, 1.7vw, 1.65rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    grid-auto-rows: 8px;
    grid-auto-flow: dense;
    column-gap: var(--gallery-gap);
    row-gap: 0;
    align-items: start;
}

.portfolio-load-more {
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    pointer-events: none;
}

.portfolio-load-more[hidden] { display: none; }

.portfolio-work { position: relative; min-width: 0; width: 100%; color: var(--text-primary); }
.portfolio-artwork { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: var(--surface-dark); cursor: zoom-in; }
.portfolio-artwork img { display: block; width: 100%; height: auto; transition: transform 0.5s ease; }
.portfolio-artwork::after { position: absolute; inset: 0; border: 1px solid transparent; content: ""; pointer-events: none; transition: border-color 0.25s; }
.portfolio-artwork:hover img,
.portfolio-artwork:focus-visible img { transform: scale(1.025); }
.portfolio-artwork:hover::after,
.portfolio-artwork:focus-visible::after { border-color: var(--accent-red); }
.portfolio-artwork:focus-visible { outline: 2px solid var(--accent-red); outline-offset: 3px; }

.portfolio-empty { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-top: 1px solid var(--blue-alpha-20); color: var(--text-secondary); text-align: center; }
.portfolio-empty[hidden] { display: none; }
.empty-index { color: var(--accent-red); font-size: 0.72rem; }
.portfolio-empty h2 { margin-top: 0.65rem; color: var(--text-primary); font-size: 1.35rem; font-weight: 400; }
.portfolio-empty p { margin-top: 0.25rem; font-size: 0.88rem; }

.portfolio-lightbox { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 4rem 6rem 2rem; background: var(--surface-blue-95); opacity: 0; visibility: hidden; cursor: default; transition: opacity 0.22s ease, visibility 0.22s ease; }
.portfolio-lightbox.is-left-hover { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M27 16H5m0 0 8-8m-8 8 8 8' fill='none' stroke='%23b0bbdc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize; }
.portfolio-lightbox.is-right-hover { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 16h22m0 0-8-8m8 8-8 8' fill='none' stroke='%23b0bbdc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize; }
.portfolio-lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-figure { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lightbox-figure img { display: block; max-width: min(88vw, 1200px); max-height: min(72vh, calc(100vh - 13rem)); width: auto; height: auto; object-fit: contain; box-shadow: 0 18px 60px var(--surface-black-50); }
.lightbox-caption { width: min(100%, 780px); padding-top: 0.85rem; }
.lightbox-caption > div { display: flex; gap: 1rem; color: var(--text-secondary); font-size: 0.68rem; }
.lightbox-caption > div span:first-child { color: var(--accent-red); }
.lightbox-caption h2 { margin-top: 0.15rem; color: var(--text-primary); font-size: 1.1rem; font-weight: 400; }
.lightbox-caption > p { margin-top: 0.1rem; color: var(--text-secondary); font-size: 0.68rem; }
.lightbox-close { position: absolute; top: 20px; right: 40px; z-index: 10001; width: auto; height: auto; padding: 0; appearance: none; border: 0; background: transparent; color: var(--text-bright); font-family: inherit; font-size: 48px; font-weight: bold; line-height: 1; cursor: pointer; transition: color 0.3s; }
.lightbox-close:hover { color: var(--accent-red); }
.lightbox-close:focus-visible { outline: 1px solid var(--accent-red); outline-offset: 2px; }

@media (max-width: 1000px) {
    .portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
    .portfolio-range-description { grid-template-columns: 1fr auto; row-gap: 1rem; }
    .portfolio-range-copy { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 680px) {
    .portfolio-page { padding-bottom: 4rem; }
    .portfolio-page .archive-header { margin-top: 10px; padding-bottom: 1.6rem; }
    .portfolio-page .section-title { margin-bottom: 1.8rem; }
    .portfolio-page .text-content { font-size: 0.92rem; line-height: 1.75; }
    .portfolio-range-section { padding: 1.85rem 0 2rem; }
    .portfolio-range-header { align-items: flex-start; flex-direction: column; gap: 0.45rem; margin-bottom: 1rem; }
    .portfolio-range-grid { gap: 0.25rem; padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .portfolio-range-row { gap: 0.45rem; padding-top: 0.4rem; padding-bottom: 0.45rem; }
    .portfolio-range-option { flex-basis: 108px; padding: 0.5rem; }
    .portfolio-range-option-count { top: 0.55rem; right: 0.55rem; }
    .portfolio-range-option-title { --range-title-min-size: 0.58rem; font-size: 0.78rem; }
    .portfolio-range-description { display: block; padding: 2rem 0 2.35rem; }
    .portfolio-range-copy { margin-top: 1rem; font-size: 0.9rem; line-height: 1.85; }
    .portfolio-range-count { display: block; margin-top: 1rem; }
    .portfolio-gallery { padding-top: 1.35rem; }
    .portfolio-load-more { margin-top: 1rem; }
    .portfolio-grid { grid-template-columns: 1fr; grid-auto-rows: 8px; }
    .portfolio-lightbox { padding: 3.5rem 0.9rem 1.5rem; }
    .lightbox-figure img { max-width: 94vw; max-height: 62vh; }
    .lightbox-caption { padding: 0.7rem 0.35rem 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .portfolio-artwork img,
    .portfolio-lightbox,
    .portfolio-range-option,
    .lightbox-close { transition: none; }
}