/* EXTRA — personal archive */
#language-switcher { color: #171717; }

.extra-page {
    overflow: hidden;
    background: #f4f2ee;
}

.extra-hero {
    min-height: 78vh;
    padding: 10rem clamp(1.5rem, 8vw, 9rem) 5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr);
    align-items: end;
    gap: clamp(2rem, 7vw, 8rem);
    background: #e9e5df;
}

.extra-hero-copy {
    padding-bottom: clamp(1rem, 4vw, 4rem);
}

.extra-hero h1 {
    margin: 1rem 0 1.5rem;
    font-family: var(--font-display);
    font-size: clamp(5rem, 17vw, 14rem);
    line-height: .78;
    letter-spacing: -.07em;
}

.extra-hero-art {
    width: min(100%, 560px);
    height: clamp(420px, 66vh, 760px);
    margin: 0 auto;
    display: flex;
    align-items: end;
    justify-content: center;
    transform: translateY(clamp(.75rem, 2vw, 1.5rem));
}

.extra-hero-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.extra-dot {
    color: #b5523c;
}

.extra-intro {
    max-width: 28rem;
    color: #5f5b55;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.5;
}

.extra-index a {
    color: #171717;
    text-decoration: none;
    font-size: .73rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid #aaa49b;
    padding-bottom: .45rem;
}

.extra-section {
    padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 8vw, 9rem);
}

.music-section {
    background: #f4f2ee;
}

.section-heading {
    max-width: 1300px;
    margin: 0 auto 3rem;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
}

.section-heading h2 {
    margin-top: .75rem;
    font-family: var(--font-display);
    font-size: clamp(3.3rem, 7vw, 7rem);
    line-height: .85;
    letter-spacing: -.06em;
}

.music-player {
    max-width: 1300px;
    margin: auto;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid #c8c3ba;
    border-bottom: 1px solid #c8c3ba;
}

.player-topline,
.player-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #77736d;
    font-size: .65rem;
    letter-spacing: .13em;
}

.album-viewport {
    overflow: hidden;
    margin: 2rem 0 1.5rem;
    cursor: grab;
}

.album-viewport:active {
    cursor: grabbing;
}

.album-track {
    display: flex;
    gap: 1.25rem;
    transition: transform .55s var(--ease-out-expo);
}

.album-card {
    flex: 0 0 clamp(190px, 22vw, 280px);
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: #171717;
}

.album-cover {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    color: #171717;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-weight: 800;
    line-height: .9;
    text-align: left;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
    transition: transform .45s var(--ease-out-expo), box-shadow .45s ease;
}

.album-cover b {
    align-self: flex-end;
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .1em;
}

.album-card:hover .album-cover,
.album-card.is-selected .album-cover {
    transform: translateY(-7px) rotate(-1deg);
    box-shadow: 10px 16px 0 rgba(23, 23, 23, .09);
}

.album-meta {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    align-items: baseline;
    padding-top: .9rem;
}

.album-meta strong {
    font-size: .82rem;
    font-weight: 500;
}

.album-meta small {
    color: #99938b;
    font-size: .55rem;
    letter-spacing: .08em;
    text-align: right;
}

.circle-control {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #bbb5ad;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    transition: background .25s, color .25s;
}

.circle-control:hover {
    background: #171717;
    color: #fff;
}

.fake-progress {
    flex: 0 1 15rem;
    height: 2px;
    background: #d0cbc3;
}

.fake-progress span {
    display: block;
    width: 30%;
    height: 100%;
    background: #b5523c;
}

.books-section {
    background: #f4f2ee;
}

.library-layout {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, .75fr);
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
}

.bookcase {
    min-width: 0;
    padding: 1.5rem 1.5rem 0;
    background: #c7cfc5;
}

.shelf-label {
    margin-bottom: 3rem;
    color: #687068;
    font-size: .62rem;
    letter-spacing: .14em;
}

.books-row {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: clamp(.35rem, 1.3vw, 1rem);
    height: 19rem;
}

.book {
    position: relative;
    width: clamp(1.6rem, 3.5vw, 3rem);
    height: var(--book-height, 15rem);
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform-origin: bottom;
    transition: transform .45s var(--ease-out-expo), filter .35s;
}

.book-steve {
    --book-height: 13rem;
}

.book-silicio {
    --book-height: 15rem;
}

.book-source-code {
    --book-height: 18rem;
}

.book-industrial-design {
    --book-height: 14rem;
    width: clamp(1.9rem, 4vw, 3.4rem);
}

.book img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book:hover,
.book.is-selected {
    transform: translateY(-1.8rem) rotate(2deg);
    filter: brightness(1.1);
}

.shelf-plank {
    height: 1.15rem;
    margin: 0 -.5rem;
    background: #68736b;
    box-shadow: 0 .7rem 1rem rgba(40, 49, 42, .15);
}

.book-detail {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 1.5rem;
    align-items: end;
}

.book-detail .extra-eyebrow {
    grid-column: 1 / -1;
}

.detail-cover {
    aspect-ratio: .68;
    width: 100%;
    overflow: hidden;
    box-shadow: 7px 9px 0 rgba(50, 61, 52, .15);
}

.detail-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-detail h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2.3rem);
    line-height: .95;
}

.book-detail #book-author {
    margin-top: .5rem;
    color: #687068;
    font-size: .8rem;
}

.detail-description {
    margin-top: 1.5rem;
    color: #586158;
    font-size: .85rem;
    line-height: 1.55;
}

@media (min-width: 701px) and (max-width: 1100px) {
    .extra-hero {
        min-height: 68vh;
        padding: 7rem 5vw 3rem;
        align-items: center;
        gap: 4vw;
    }

    .extra-hero-copy {
        padding-bottom: 0;
    }

    .extra-hero-art {
        height: min(50vh, 520px);
        transform: none;
    }
}

@media (max-width: 700px) {
    .extra-hero {
        min-height: 78vh;
        grid-template-columns: 1fr;
        gap: .25rem;
        padding-top: 7rem;
        padding-bottom: 1.5rem;
    }

    .extra-hero-copy {
        padding-bottom: 0;
    }

    .extra-hero-art {
        width: min(90vw, 360px);
        height: min(40vh, 430px);
        justify-self: center;
        transform: translateY(0);
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .library-layout {
        grid-template-columns: 1fr;
    }

    .bookcase {
        padding-inline: .75rem;
    }

    .books-row {
        height: 14rem;
    }

    .book {
        width: clamp(1.5rem, 8vw, 2.5rem);
    }

    .book-detail {
        grid-template-columns: 115px 1fr;
    }

    .footer-links {
        flex-wrap: wrap;
        row-gap: .8rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .album-track,
    .album-cover,
    .book,
    .detail-cover {
        transition: none;
    }
}

/* 3D book browsing shelf */
.book-3d-container {
    position: relative;
    display: flex;
    width: min(100%, 1000px);
    height: 560px;
    margin: 0 auto;
    overflow: hidden;
    perspective: 800px;
    transform-style: preserve-3d;
}

.book-3d-container>input[type='radio'] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.book-3d-surface {
    position: relative;
    width: 320px;
    height: 224px;
    margin: auto;
    transform: translateY(152px) rotateX(80deg);
    transform-style: preserve-3d;
    transition: transform .25s;
    will-change: transform;
}

.book-3d-block {
    position: absolute;
    bottom: 0;
    display: block;
    transform-style: preserve-3d;
}

.book-3d-inner {
    position: relative;
    width: 16px;
    transform: rotateX(-90deg) translateZ(var(--size));
    transform-style: preserve-3d;
    transition: transform .25s linear;
}

.book-3d-inner>div {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: var(--size);
    height: var(--size);
    background-color: #171717;
}

.book-3d-inner>div::before {
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background: #3d3d3d;
}

.book-3d-inner .top,
.book-3d-inner .bottom {
    transform-origin: top center;
}

.book-3d-inner .top,
.book-3d-inner .bottom {
    width: var(--width);
    height: var(--depth);
    transform: rotateX(-90deg) translateY(calc(-1 * (var(--depth) - var(--size))));
}

.book-3d-inner .bottom {
    transform: rotateX(-90deg) translateY(calc(-1 * (var(--depth) - var(--size)))) translateZ(var(--height));
}

.book-3d-inner .front,
.book-3d-inner .back {
    width: var(--width);
    height: var(--height);
}

.book-3d-inner .front {
    transform: translateZ(calc(var(--depth) - var(--size)));
}

.book-3d-inner .left,
.book-3d-inner .right {
    width: var(--depth);
    height: var(--height);
}

.book-3d-inner .left {
    transform-origin: center left;
    transform: rotateY(270deg) translateX(calc(-1 * var(--size)));
}

.book-3d-inner .right {
    transform-origin: top right;
    transform: rotateY(-270deg) translate3d(var(--size), 0, calc(var(--width) - var(--depth)));
}

.book-3d-inner .back {
    transform: translateZ(calc(-1 * var(--size))) rotateY(180deg);
}

.book-3d-inner .front::before,
.book-3d-inner .back::before {
    opacity: .2;
}

.book-3d-block.b1 {
    --width: 288px;
    --depth: 224px;
    --height: 16px;
    --size: 16px;
    transform: translate3d(16px, -224px, 16px);
}

.book-3d-block.b2 {
    --width: 320px;
    --depth: 16px;
    --height: 288px;
    --size: 16px;
    transform: translate3d(0, -224px, 16px);
}

.book-3d-block.b3 {
    --width: 16px;
    --depth: 208px;
    --height: 288px;
    --size: 16px;
    transform: translate3d(0, -208px, 16px);
}

.book-3d-block.b4 {
    --width: 16px;
    --depth: 208px;
    --height: 288px;
    --size: 16px;
    transform: translate3d(304px, -208px, 16px);
}

.book-3d-block.b5 {
    --width: 320px;
    --depth: 224px;
    --height: 16px;
    --size: 16px;
    transform: translate3d(0, -16px, 304px);
}

.book-3d-block.b1 .book-3d-inner>div,
.book-3d-block.b2 .book-3d-inner>div,
.book-3d-block.b3 .book-3d-inner>div,
.book-3d-block.b4 .book-3d-inner>div,
.book-3d-block.b5 .book-3d-inner>div {
    background-color: #171717;
}

.book-3d-block.b6 {
    --width: 32px;
    --depth: 176px;
    --height: 224px;
    --size: 16px;
    transform: translate3d(16px, -208px, 240px);
}

.book-3d-block.b7 {
    --width: 32px;
    --depth: 176px;
    --height: 240px;
    --size: 16px;
    transform: translate3d(80px, -208px, 256px);
}

.book-3d-block.b8 {
    --width: 32px;
    --depth: 160px;
    --height: 224px;
    --size: 16px;
    transform: translate3d(144px, -192px, 240px);
}

.book-3d-block.b9 {
    --width: 32px;
    --depth: 160px;
    --height: 240px;
    --size: 16px;
    transform: translate3d(208px, -192px, 256px);
}

.book-3d-block.b6 .book-3d-inner>div {
    background-color: #b5523c;
}

.book-3d-block.b7 .book-3d-inner>div {
    background-color: #171717;
}

.book-3d-block.b8 .book-3d-inner>div {
    background-color: #f4f2ee;
}

.book-3d-block.b9 .book-3d-inner>div {
    background-color: #171717;
}

.book-3d-block.b6 .book-3d-inner .front::before,
.book-3d-block.b7 .book-3d-inner .front::before,
.book-3d-block.b8 .book-3d-inner .front::before,
.book-3d-block.b9 .book-3d-inner .front::before {
    opacity: 0;
}

.book-3d-block.b8 .book-spine {
    color: #171717;
}

.book-3d-block.b6 .book-3d-inner .right,
.book-3d-block.b7 .book-3d-inner .right,
.book-3d-block.b8 .book-3d-inner .right,
.book-3d-block.b9 .book-3d-inner .right {
    background: #ffffff;
    cursor: pointer;
}

.book-3d-block.b6 .book-3d-inner .top::before,
.book-3d-block.b6 .book-3d-inner .back::before,
.book-3d-block.b6 .book-3d-inner .bottom::before,
.book-3d-block.b7 .book-3d-inner .top::before,
.book-3d-block.b7 .book-3d-inner .back::before,
.book-3d-block.b7 .book-3d-inner .bottom::before,
.book-3d-block.b8 .book-3d-inner .top::before,
.book-3d-block.b8 .book-3d-inner .back::before,
.book-3d-block.b8 .book-3d-inner .bottom::before,
.book-3d-block.b9 .book-3d-inner .top::before,
.book-3d-block.b9 .book-3d-inner .back::before,
.book-3d-block.b9 .book-3d-inner .bottom::before {
    opacity: .15;
    background: repeating-linear-gradient(90deg, transparent, transparent 21%, #aaa 21%, #aaa 25%, transparent 25%, transparent 46%, #aaa 46%, #aaa 50%, transparent 50%);
    background-size: 16px 16px;
}

.book-spine {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 16px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    white-space: nowrap;
    transform: rotate(90deg) translate(12px, -50%);
}

.book-cover,
.book-contents {
    position: absolute;
    inset: 0;
    transform-origin: 0 50%;
    transition: transform .25s .25s linear;
}

.book-cover {
    z-index: 1;
    background: transparent;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.book-cover::before,
.book-cover::after {
    position: absolute;
    inset: 0;
    display: block;
    content: '';
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.book-cover::after {
    background: #fff;
    transform: rotateY(180deg);
}

.cover-steve::before {
    background: url('Images/imgSteve2.jpg') center / cover;
}

.cover-silicio::before {
    background: url('Images/imgFaggin2.jpg') center / cover;
}

.cover-source::before {
    background: url('Images/imgSourceCode2.jpg') center / cover;
}

.cover-industrial::before {
    background: url('Images/imgIndustrialDesign2.jpg') center / cover;
}

.book-contents {
    z-index: 0;
    padding: 28px 18px;
    color: #222;
    background: #faf9f4;
    font-size: 11px;
    line-height: 1.35;
}

.book-contents h3 {
    margin-bottom: 10px;
    color: #222;
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
}

.book-3d-container>input[type='radio']:checked~.book-3d-surface {
    transform: translate(80px, 152px) rotateX(80deg);
}

.book-3d-container>input[type='radio']:checked~.book-3d-surface .book-3d-block .book-3d-inner {
    animation: book-return .25s linear;
}

.book-3d-container>input:nth-of-type(1):checked~.book-3d-surface label:nth-of-type(1) .book-3d-inner,
.book-3d-container>input:nth-of-type(2):checked~.book-3d-surface label:nth-of-type(2) .book-3d-inner,
.book-3d-container>input:nth-of-type(3):checked~.book-3d-surface label:nth-of-type(3) .book-3d-inner,
.book-3d-container>input:nth-of-type(4):checked~.book-3d-surface label:nth-of-type(4) .book-3d-inner {
    animation: book-view .25s .25s linear forwards;
}

.book-3d-container>input:nth-of-type(1):checked~.book-3d-surface label:nth-of-type(1):hover .book-cover,
.book-3d-container>input:nth-of-type(2):checked~.book-3d-surface label:nth-of-type(2):hover .book-cover,
.book-3d-container>input:nth-of-type(3):checked~.book-3d-surface label:nth-of-type(3):hover .book-cover,
.book-3d-container>input:nth-of-type(4):checked~.book-3d-surface label:nth-of-type(4):hover .book-cover {
    transform: rotateY(-135deg);
}

.book-3d-container>input[type='radio']:checked~.book-3d-surface label:hover .book-cover {
    transform: rotateY(-135deg);
}

.book-3d-container:not(:has(> input[type='radio']:checked)) .book-3d-surface label:hover .book-3d-inner {
    transform: rotateX(-90deg) translateZ(64px);
}

.book-3d-reset {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 20;
    padding: .65rem 1.15rem;
    border: 1px solid #171717;
    border-radius: 999px;
    background: #ffffff;
    color: #171717;
    font-family: var(--font-body);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    visibility: hidden;
    transform: translateX(-50%);
    box-shadow: 4px 4px 0 #b5523c;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s var(--ease-out-expo);
}

.book-3d-reset:hover {
    background: #b5523c;
    color: #fff;
    box-shadow: 2px 2px 0 #171717;
    transform: translateX(-50%) translateY(2px);
}

.book-3d-container>input[type='radio']:checked~.book-3d-reset {
    visibility: visible;
}

@keyframes book-view {
    from {
        transform: rotateX(-90deg) translateZ(64px) rotateY(0);
    }

    50% {
        transform: rotateX(-90deg) translateZ(240px) rotateY(0);
    }

    to {
        transform: rotateX(-90deg) translateZ(240px) rotateY(-90deg) rotateZ(-10deg) translateZ(-80px);
    }
}

@keyframes book-return {
    from {
        transform: rotateX(-90deg) translateZ(240px) rotateY(-90deg) rotateZ(-10deg) translateZ(-80px);
    }

    50% {
        transform: rotateX(-90deg) translateZ(240px) rotateY(0);
    }

    to {
        transform: rotateX(-90deg) translateZ(16px) rotateY(0);
    }
}

@media (max-width: 700px) {
    .book-3d-container {
        height: 470px;
        overflow: visible;
        transform: scale(.72);
        transform-origin: center top;
    }

    .book-3d-reset {
        bottom: -45px;
    }

    .book-3d-container>input[type='radio']:checked~.book-3d-surface {
        transform: translate(0, 152px) rotateX(80deg);
    }
}

/* Vinyl carousel: card-carousel layout + vinyl-albums interaction */
.extra-page {
    background: var(--white);
}

.extra-hero,
.music-section {
    background: var(--white);
}

.books-section {
    background: var(--off-white);
}

.extra-hero h1,
.section-heading h2 {
    color: var(--black);
}

.player-topline,
.album-caption span {
    color: var(--mid-gray);
}

.extra-dot,
.carousel-arrow:hover,
.carousel-dots button.active {
    color: var(--dark-gray);
}

.music-player {
    border-color: var(--light-gray);
}

.album-carousel {
    position: relative;
    height: clamp(270px, 38vw, 430px);
    margin: 1rem auto 0;
    max-width: 1100px;
    perspective: 1000px;
}

.album-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.album-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(190px, 25vw, 290px);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform-origin: center;
    transition: transform .65s var(--ease-out-expo), opacity .65s ease, filter .65s ease;
}

.album-card.center {
    z-index: 5;
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
}

.album-card.left-1 {
    z-index: 4;
    transform: translate(calc(-50% - clamp(170px, 23vw, 260px)), -50%) scale(.88);
    opacity: .82;
    filter: grayscale(55%);
}

.album-card.right-1 {
    z-index: 4;
    transform: translate(calc(-50% + clamp(170px, 23vw, 260px)), -50%) scale(.88);
    opacity: .82;
    filter: grayscale(55%);
}

.album-card.left-2 {
    z-index: 2;
    transform: translate(calc(-50% - clamp(295px, 40vw, 440px)), -50%) scale(.7);
    opacity: .35;
    filter: grayscale(100%);
}

.album-card.right-2 {
    z-index: 2;
    transform: translate(calc(-50% + clamp(295px, 40vw, 440px)), -50%) scale(.7);
    opacity: .35;
    filter: grayscale(100%);
}

.album-card.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.5);
}

.vinyl-card-cover {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 14px 28px rgba(10, 10, 10, .16);
    transition: transform .5s ease-in-out;
}

.vinyl-card-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .3), transparent 12%), linear-gradient(to top, rgba(0, 0, 0, .35), transparent 12%);
}

.vinyl-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vinyl-disc {
    position: absolute;
    z-index: 1;
    top: 5%;
    right: 0;
    display: grid;
    place-items: center;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, #272727 0, #292929 1px, #111 3px, #242424 4px);
    box-shadow: 0 0 18px rgba(0, 0, 0, .4);
    transform: translateX(0) rotate(270deg);
    transition: transform .5s ease-in-out;
}

.vinyl-disc::before {
    content: '';
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .12);
}

.vinyl-disc span {
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 5px #111;
}

.album-card:hover .vinyl-card-cover,
.album-card.center .vinyl-card-cover {
    transform: translateX(-10px) rotate(-2deg);
}

.album-card:hover .vinyl-disc,
.album-card.center .vinyl-disc {
    transform: translateX(42%) rotate(360deg);
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid var(--light-gray);
    border-radius: 50%;
    background: var(--white);
    color: var(--black);
    cursor: pointer;
    font-size: 1.2rem;
    transform: translateY(-50%);
    transition: background .25s, color .25s, border-color .25s;
}

.carousel-arrow:hover {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
}

.carousel-arrow.left {
    left: 0;
}

.carousel-arrow.right {
    right: 0;
}

.album-caption {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1rem;
    min-height: 2rem;
    text-align: center;
}

.album-caption strong {
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.album-caption span {
    font-size: .62rem;
    letter-spacing: .1em;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: .55rem;
    margin-top: 1rem;
}

.carousel-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--light-gray);
    cursor: pointer;
    transition: transform .25s, background .25s;
}

.carousel-dots button.active {
    background: var(--black);
    transform: scale(1.35);
}

.bookcase {
    background: var(--off-white);
    border: 1px solid var(--light-gray);
}

.shelf-plank {
    background: var(--black);
}

.book-detail {
    color: var(--black);
}

@media (max-width: 700px) {
    .album-carousel {
        height: 250px;
    }

    .album-card {
        width: min(58vw, 230px);
    }

    .album-card.left-1 {
        transform: translate(calc(-50% - 38vw), -50%) scale(.72);
    }

    .album-card.right-1 {
        transform: translate(calc(-50% + 38vw), -50%) scale(.72);
    }

    .album-card.left-2,
    .album-card.right-2 {
        opacity: 0;
    }

    .carousel-arrow {
        width: 2.25rem;
        height: 2.25rem;
    }

    .album-caption {
        flex-direction: column;
        align-items: center;
        gap: .25rem;
    }
}