/* Atelier — home entrance, chapters, memory wall */

.at-page-home .at-main {
    padding-bottom: calc(var(--at-nav-h) + var(--at-safe-bottom) + 2rem);
}

/* —— Entrance —— */
.at-entrance {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.at-entrance__canvas {
    position: relative;
    min-height: min(88vh, 760px);
    display: grid;
    align-items: end;
    padding: var(--at-space-xl) 0 var(--at-space-2xl);
    background:
        linear-gradient(
            155deg,
            var(--at-cream) 0%,
            var(--at-ivory) 48%,
            color-mix(in srgb, var(--at-pistachio-soft) 35%, var(--at-cream)) 100%
        );
}

.at-entrance__geometry {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.at-entrance__plane {
    position: absolute;
    inset-inline-start: -8%;
    top: 8%;
    width: min(48vw, 380px);
    height: min(42vh, 360px);
    background: color-mix(in srgb, var(--at-beige) 70%, var(--at-pistachio-soft));
    clip-path: polygon(0 12%, 88% 0, 100% 78%, 8% 100%);
    opacity: 0.55;
}

.at-entrance__frame {
    position: absolute;
    inset-inline-end: 6%;
    top: 14%;
    width: min(34vw, 260px);
    height: min(48vh, 420px);
    border: 1px solid var(--at-line);
    opacity: 0.7;
}

.at-entrance__accent {
    position: absolute;
    inset-inline-end: 10%;
    bottom: 18%;
    width: 18px;
    height: 18px;
    background: var(--at-pistachio);
}

.at-entrance__line {
    position: absolute;
    inset-inline-start: 12%;
    bottom: 28%;
    width: min(28vw, 160px);
    opacity: 0.45;
}

.at-entrance__photo {
    position: absolute;
    z-index: 1;
    inset-inline-end: max(0px, calc((100% - 1120px) / 2));
    top: 8%;
    width: min(46vw, 420px);
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    clip-path: polygon(8% 0, 100% 0, 100% 92%, 0 100%);
    border: 1px solid var(--at-line);
    background: var(--at-beige);
}

.at-entrance__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.at-entrance__body {
    position: relative;
    z-index: 2;
    max-width: min(34rem, 100%);
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding-inline: 1rem;
}

.at-entrance__title {
    margin: 0.55rem 0 0.65rem;
    font-size: clamp(2.1rem, 9vw, 3.6rem);
}

.at-entrance__slogan {
    margin: 0 0 1.35rem;
    max-width: 28rem;
    font-size: 1rem;
    color: var(--at-muted);
    line-height: 1.75;
}

.at-entrance__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 1.5rem;
}

.at-entrance__meta {
    display: inline-flex;
    align-items: stretch;
    gap: 1rem;
    margin: 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--at-line);
}

.at-entrance__meta div {
    display: grid;
    gap: 0.15rem;
}

.at-entrance__meta dt {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--at-muted);
}

.at-entrance__meta dd {
    margin: 0;
    font-family: var(--at-font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--at-charcoal);
}

.at-entrance__meta-rule {
    width: 1px;
    align-self: stretch;
    background: var(--at-line);
}

@media (min-width: 768px) {
    .at-entrance__body {
        margin-inline-start: max(1rem, calc((100% - 1120px) / 2 + 1rem));
        margin-inline-end: auto;
        padding-inline: 0;
        padding-bottom: 1rem;
    }

    .at-entrance__photo {
        top: 10%;
        width: min(40vw, 400px);
    }
}

@media (max-width: 640px) {
    .at-entrance__canvas {
        min-height: auto;
        padding-top: var(--at-space-lg);
    }

    .at-entrance__photo {
        position: relative;
        inset: auto;
        width: min(78%, 280px);
        margin: 0 1rem 1.25rem auto;
        aspect-ratio: 5 / 4;
        clip-path: polygon(6% 0, 100% 0, 100% 88%, 0 100%);
    }

    .at-entrance__frame {
        width: 42vw;
        height: 28vh;
        top: 4%;
        opacity: 0.4;
    }

    .at-entrance__plane {
        opacity: 0.35;
    }
}

/* —— Chapters —— */
.at-chapters {
    padding: var(--at-space-2xl) 0 var(--at-space-xl);
}

.at-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--at-space-xl);
}

.at-chapter__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "idx media arrow"
        "idx copy arrow";
    gap: 0.65rem 1rem;
    align-items: center;
    padding: 0.5rem 0;
    color: inherit;
}

.at-chapter__index {
    grid-area: idx;
    font-family: var(--at-font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--at-pistachio-deep);
    writing-mode: horizontal-tb;
}

.at-chapter__media {
    grid-area: media;
    margin: 0;
    width: min(42vw, 200px);
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--at-beige);
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-md);
    justify-self: start;
}

.at-chapter__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--at-transition);
}

.at-chapter__media--organic,
.at-chapter__media--rect,
.at-chapter__media--soft {
    border-radius: var(--at-r-md);
}

.at-chapter__copy {
    grid-area: copy;
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.at-chapter__copy strong {
    font-family: var(--at-font-display);
    font-size: clamp(1.15rem, 3.5vw, 1.55rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--at-charcoal);
}

.at-chapter__copy small {
    font-size: 0.8rem;
    color: var(--at-muted);
}

.at-chapter__arrow {
    grid-area: arrow;
    width: 18px;
    height: 18px;
    border-inline-start: 1.5px solid var(--at-pistachio);
    border-bottom: 1.5px solid var(--at-pistachio);
    transform: rotate(45deg);
    opacity: 0.7;
    transition: transform var(--at-transition), opacity var(--at-transition);
}

.at-chapter__link:hover .at-chapter__media img,
.at-chapter__link:focus-visible .at-chapter__media img {
    transform: scale(1.04);
}

.at-chapter__link:hover .at-chapter__arrow,
.at-chapter__link:focus-visible .at-chapter__arrow {
    transform: rotate(45deg) translate(-2px, 2px);
    opacity: 1;
}

.at-chapter__link:focus-visible {
    outline: 2px solid var(--at-pistachio);
    outline-offset: 4px;
}

.at-chapter--offset .at-chapter__link {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.at-chapter--offset .at-chapter__media {
    justify-self: end;
    width: min(48vw, 240px);
}

@media (min-width: 768px) {
    .at-chapter__link {
        grid-template-columns: 3rem minmax(160px, 240px) minmax(0, 1fr) auto;
        grid-template-areas: "idx media copy arrow";
        gap: 1.25rem 1.5rem;
        align-items: center;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--at-line);
    }

    .at-chapter--offset .at-chapter__link {
        grid-template-columns: 3rem minmax(0, 1fr) minmax(180px, 280px) auto;
        grid-template-areas: "idx copy media arrow";
        padding-inline-start: 4%;
    }

    .at-chapter--offset .at-chapter__media {
        justify-self: end;
        width: min(100%, 280px);
    }

    .at-chapter:not(.at-chapter--offset) .at-chapter__link {
        padding-inline-end: 4%;
    }
}

/* —— Memory wall —— */
.at-wall {
    padding: var(--at-space-2xl) 0 calc(var(--at-space-3xl) + 1rem);
}

.at-wall__inner {
    position: relative;
}

.at-wall__board {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(88px, auto);
    gap: 0.65rem;
    margin-top: var(--at-space-lg);
}

.at-wall__shot {
    margin: 0;
    grid-column: span 3;
    display: grid;
    gap: 0.35rem;
}

.at-wall__shot--sq {
    grid-row: span 2;
}

.at-wall__shot--wide {
    grid-column: span 4;
    grid-row: span 2;
}

.at-wall__shot--tall {
    grid-column: span 2;
    grid-row: span 3;
}

.at-wall__shot--hero {
    grid-column: span 6;
    grid-row: span 3;
}

.at-wall__frame {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 120px;
    padding: 0;
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-md);
    background: var(--at-beige);
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--at-transition), box-shadow var(--at-transition);
}

.at-wall__shot:nth-child(3n) .at-wall__frame,
.at-wall__shot:nth-child(4n) .at-wall__frame {
    border-radius: var(--at-r-md);
}

.at-wall__frame img {
    width: 100%;
    height: 100%;
    min-height: 120px;
    object-fit: cover;
    transition: transform var(--at-transition);
}

.at-wall__frame:hover,
.at-wall__frame:focus-visible {
    border-color: var(--at-pistachio);
    outline: none;
}

.at-wall__frame:hover img,
.at-wall__frame:focus-visible img {
    transform: scale(1.03);
}

.at-wall__caption {
    font-size: 0.75rem;
    color: var(--at-muted);
    line-height: 1.5;
    padding-inline: 0.15rem;
}

/* Lightbox */
.at-wall-lightbox {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.at-wall-lightbox[hidden] {
    display: none !important;
}

.at-wall-lightbox__veil {
    position: absolute;
    inset: 0;
    border: 0;
    background: color-mix(in srgb, var(--at-ink) 48%, transparent);
    cursor: pointer;
}

.at-wall-lightbox__panel {
    position: relative;
    z-index: 1;
    width: min(720px, 100%);
    max-height: min(88dvh, 860px);
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--at-ivory);
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-lg);
    overflow: auto;
    box-shadow: var(--at-shadow);
}

.at-wall-lightbox__close {
    position: absolute;
    top: 0.65rem;
    inset-inline-start: 0.65rem;
    z-index: 2;
    width: var(--at-control-h);
    height: var(--at-control-h);
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-sm);
    background: var(--at-cream);
    color: var(--at-ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.at-wall-lightbox__close:focus-visible {
    outline: 2px solid var(--at-pistachio);
    outline-offset: 2px;
}

.at-wall-lightbox__panel img {
    width: 100%;
    max-height: min(68dvh, 640px);
    object-fit: contain;
    background: var(--at-beige);
}

.at-wall-lightbox__caption {
    margin: 0;
    padding: 0.25rem 0.35rem 0.5rem;
    font-size: 0.9rem;
    color: var(--at-charcoal);
    text-align: center;
}

@media (max-width: 640px) {
    .at-wall__board {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.55rem;
    }

    .at-wall__shot,
    .at-wall__shot--sq,
    .at-wall__shot--wide,
    .at-wall__shot--tall,
    .at-wall__shot--hero {
        grid-column: span 1;
        grid-row: span 1;
    }

    .at-wall__shot--wide,
    .at-wall__shot--hero {
        grid-column: span 2;
    }

    .at-wall__shot:nth-child(5n) {
        grid-column: span 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .at-chapter__media img,
    .at-wall__frame img,
    .at-chapter__arrow {
        transition: none;
    }
}