:root {
    --primary: #0B95D2;
    --primary-dark: #0878AA;
    --background: #FAFAF8;
    --white: #FFFFFF;
    --text: #333333;
    --heading: #3D3D3D;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.7;
}


/* =========================
   ACCORDION
========================= */

.publications-accordion {
    width: 100%;
    min-height: 100vh;

    display: flex;
    gap: 6px;

    padding: 10px 20px 30px;

    overflow: hidden;
}

.accordion-panel {
    min-width: 70px;
    flex: 0 0 70px;

    min-height: calc(100vh - 40px);

    display: flex;

    background: var(--white);

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10),
        0 3px 8px rgba(0,0,0,.06);

    transition:
        flex .55s ease,
        flex-basis .55s ease;
}

.accordion-panel.active {
    flex: 1 1 auto;
}


/* =========================
   VERTICAL CATEGORY TAB
========================= */

.accordion-tab {
    flex: 0 0 70px;

    width: 70px;

    border: none;

    background: var(--primary);

    color: white;

    display: flex;

    justify-content: center;
    align-items: center;

    cursor: pointer;

    transition: background .30s ease;
}

.accordion-tab:hover,
.accordion-tab:focus-visible {
    background: var(--primary-dark);

    outline: none;
}

.accordion-tab span {

    font-family: "Cinzel",
                 Georgia,
                 serif;

    font-size: 1rem;

    font-weight: 700;

    letter-spacing: .08em;

    writing-mode: vertical-rl;

    text-orientation: upright;
}


/* IMPORTANT:
   Do NOT add a horizontal writing-mode
   when the panel opens. */


/* =========================
   CONTENT
========================= */

.accordion-content {

    min-width: 0;

    flex: 1;

    padding:
        42px
        clamp(20px, 4vw, 60px);

    overflow-y: auto;

    overflow-x: hidden;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility 0s linear .55s;
}

.accordion-panel.active .accordion-content {

    opacity: 1;

    visibility: visible;

    transition:
        opacity .35s ease .20s,
        visibility 0s;
}


/* =========================
   HEADINGS
========================= */

.category-header {

    text-align: center;

    margin-bottom: 35px;
}

.category-header h1 {

    color: var(--heading);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2rem, 4vw, 2.8rem);

    font-weight: 700;

    line-height: 1.2;
}


/* =========================
   BOOK — LARGER
========================= */

.book-display {

    width: min(100%, 520px);

    margin: 0 auto;

    text-align: center;
}

.book-button {

    width: fit-content;

    margin: 0 auto;

    border: none;

    background: transparent;

    padding: 0;

    cursor: pointer;
}

.book-button img {

    display: block;

    width:
        min(380px, 82vw);

    max-height: 600px;

    height: auto;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.book-button:hover img {

    transform: scale(1.03);

    box-shadow:
        0 20px 45px rgba(0,0,0,.28);
}

.book-button:focus-visible {

    outline:
        3px solid var(--primary);

    outline-offset: 6px;
}

.book-display h2 {

    margin-top: 22px;

    color: var(--heading);

    font-size: 1.45rem;
}


/* =========================
   POEMS — SMALLER
========================= */

.poems-grid {

    width:
        min(100%, 650px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}

.poem-image {

    width: 100%;

    aspect-ratio: 280 / 400;

    border: none;

    padding: 0;

    background: transparent;

    cursor: pointer;
}

.poem-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.poem-image:hover img {

    transform: scale(1.03);

    box-shadow:
        0 20px 45px rgba(0,0,0,.28);
}


/* =========================
   MAGAZINE + PROMOTIONS
========================= */

.single-column-gallery {

    width:
        min(100%, 1000px);

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 35px;
}

.magazine-image,
.websites-image {

    width: fit-content;

    max-width: 100%;

    border: none;

    padding: 0;

    background: transparent;

    cursor: pointer;
}

.magazine-image img,
.websites-image img {

    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: 700px;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.magazine-image:hover img,
.websites-image:hover img {

    transform: scale(1.015);

    box-shadow:
        0 20px 45px rgba(0,0,0,.25);
}


/* =========================
   LIGHTBOX
========================= */

.lightbox {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 35px 25px;

    background:
        rgba(0,0,0,.90);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility 0s linear .25s;
}

.lightbox.open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity .25s ease,
        visibility 0s;
}

.lightbox-content {

    width:
        min(94vw, 1200px);

    max-height: 92vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

.lightbox-content img {

    display: block;

    max-width: 90vw;

    max-height: 75vh;

    width: auto;

    height: auto;

    object-fit: contain;

    border-radius: 10px;

    box-shadow:
        0 0 35px rgba(255,255,255,.25);
}

#lightbox-description {

    max-width: 90%;

    margin-top: 16px;

    color: white;

    text-align: center;

    font-size: 1.15rem;
}


/* =========================
   VISIT WEBSITE BUTTON
========================= */

.lightbox-link {

    display: none;

    margin-top: 18px;

    padding: 10px 24px;

    border-radius: 6px;

    background: var(--primary);

    color: white;

    font-family: Arial, sans-serif;

    font-size: 1rem;

    font-weight: 700;

    text-decoration: none;

    transition:
        background .25s ease,
        transform .25s ease;
}

.lightbox-link.visible {

    display: inline-block;
}

.lightbox-link:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);
}


/* =========================
   CLOSE BUTTON
========================= */

.lightbox-close {

    position: fixed;

    top: 20px;

    right: 30px;

    width: 52px;

    height: 52px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.12);

    color: white;

    font-family: Arial, sans-serif;

    font-size: 46px;

    line-height: 1;

    cursor: pointer;
}

.lightbox-close:hover {

    background:
        rgba(255,255,255,.25);
}

body.lightbox-open {

    overflow: hidden;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .publications-accordion {

        padding:
            8px 12px 20px;

        gap: 4px;
    }

    .accordion-panel {

        min-width: 58px;

        flex-basis: 58px;

        min-height:
            calc(100vh - 28px);
    }

    .accordion-tab {

        flex-basis: 58px;

        width: 58px;
    }

    .accordion-content {

        padding:
            35px 25px;
    }

    .poems-grid {

        gap: 18px;
    }
}


/* =========================
   PHONE
========================= */

@media (max-width: 600px) {

    .publications-accordion {

        padding: 5px;

        gap: 3px;
    }

    .accordion-panel {

        min-width: 43px;

        flex-basis: 43px;

        min-height:
            calc(100vh - 10px);

        border-radius: 6px;
    }

    .accordion-tab {

        flex-basis: 43px;

        width: 43px;
    }

    .accordion-tab span {

        font-size: .72rem;
    }

    .accordion-content {

        padding:
            25px 12px;
    }

    .poems-grid {

        grid-template-columns: 1fr;

        width:
            min(100%, 330px);

        gap: 20px;
    }

    .book-button img {

        width:
            min(380px, 82vw);
    }

    .single-column-gallery {

        gap: 22px;
    }

    .lightbox-close {

        top: 8px;

        right: 10px;

        width: 46px;

        height: 46px;

        font-size: 40px;
    }
}