/* ============================================================
   GLOBAL STYLES
   ============================================================ */

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

body {
    font-family: 'Crimson Text', 'Georgia', serif;
    background: #f6f5f3;
    /*background: #fdfcfa;*/

    color: #1a1a1a;
    line-height: 1.6;
}

a {
    color: #0d801d;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.menu-toggle {
    color: #1a1a1a;
}


/* ============================================================
   HEADER
   ============================================================ */

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 30px 50px;
    background: rgba(253, 252, 250, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e8e4df;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 17px; /* was 16px */
    font-weight: 400;
    letter-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-decoration: none;
    color: #1a1a1a;
}

nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

nav ul {
    display: flex;
    gap: 40px;
    list-style: none;
}

nav a {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 12px; /* was 11px */
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: opacity 0.3s;
}

nav a:hover {
    opacity: 0.5;
}

.header-icons {
    display: flex;
    gap: 20px;
}

.header-icons svg {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    width: 20px;
    height: 20px;
}

.header-icons svg:hover {
    opacity: 1;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 21px; /* was 20px */
    cursor: pointer;
}


/* ============================================================
   DROPDOWN MENU
   ============================================================ */

.has-dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
    margin-left: 5px;
    font-size: 15px; /* was 14px */
    opacity: 0.7;
}

.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(253, 252, 250, 0.90);
    border: 1px solid #e8e4df;
    min-width: 220px;
    padding: 20px 0 10px;
    margin-top: 0;
    list-style: none;
    z-index: 1001;
}

.has-dropdown.active .dropdown {
    display: block;
}

.dropdown li {
    margin: 0;
}

.dropdown a {
    display: block;
    padding: 12px 20px;
    font-size: 12px; /* was 13px */
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dropdown a:hover {
    background: #f5f2ed;
    opacity: 0.5;
}

@media (min-width: 951px) {
    .has-dropdown:hover .dropdown {
        display: block;
    }
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    padding: 80px 50px;
    border-top: 1px solid #e8e4df;
    text-align: center;
}

footer p {
    font-size: 11px; /* was 10px */
    color: #777; /* was #999 */
    letter-spacing: 1px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    margin-top: 71px;
    padding: 100px 50px 50px;
    text-align: center;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.hero h1 {
    font-size: 42px; /* was 40px */
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 25px;
    line-height: 1.2;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero .meta {
    font-size: 15px; /* was 14px */
    color: #1a1a1a;
    margin-bottom: 15px;
    font-weight: 300;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.hero .dates {
    font-size: 14px; /* was 13px */
    color: #666; /* was #999 */
    letter-spacing: 1px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.divider {
    width: 60px;
    height: 1px;
    background: #d0cbc3;
    margin: 60px auto;
}


/* ============================================================
   INTRO
   ============================================================ */

.intro {
    max-width: 700px;
    /* MARGIN AFFECTS DESKTOP PADDING*/
    margin: 0 auto 60px;
    padding: 0 50px;
}

.intro p {
    font-size: 19px; /* was 18px */
    line-height: 1.9;
    color: #333;
    font-weight: 300;
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.article-page .intro p {
    font-size: 17px; /* was 16px */
    line-height: 1.7;
}

.main-content .intro p + p {
    margin-top: 1.5em;
}


/* ============================================================
   GALLERY GRID
   ============================================================ */

.gallery {
    padding: 0 50px 120px;
}

.gallery-header {
    text-align: center;
    margin-bottom: 60px;
}

.gallery-header h2 {
    font-size: 12px; /* was 11px */
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777; /* was #999 */
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.gallery-grid {   
    max-width: 1400px; 
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* EDIT NUM OF COLUMNS ON DESKTOP */
    gap: 40px;
}

.artwork {
    text-decoration: none;
    color: inherit;
}


.artwork-image {
    width: 100%;
    aspect-ratio: 3/4;
    background: #b5aea6;
    margin-bottom: 20px;
    transition: opacity 0.4s;
    object-fit: cover;
    display: block;
    border-radius: 4px; /* rounded corners — edit this value, e.g. 4px subtle, 12px more rounded, 0px for none */
}


.artwork-title {
    font-size: 19px; /* was 19px */
    font-weight: 300;
    font-style: italic;
    margin-bottom: 0px;
    color: #1a1a1a;
    text-align: center;
}

.artwork-info {
    font-size: 13px; /* was 13px */
    color: #777; /* was #999 */
    font-weight: 300;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
}


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

.main-content {
    margin-top: 91px;
    padding: 100px 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.page-title {
    font-size: 19px; /* was 18px */
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 70px;
    font-weight: 400;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* ============================================================
   EXHIBITIONS TABLE
   ============================================================ */

.exhibition-table {
    width: 100%;
    border-collapse: collapse;
}

.exhibition-table td {
    padding: 25px 0;
    border-bottom: 1px solid #e8e4df;
    vertical-align: top;
}

.exhibition-table tr:last-child td {
    border-bottom: none;
}

.year-column {
    width: 15%;
    font-size: 15px; /* was 14px */
    font-weight: 400;
    color: #555; /* was #666 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding-right: 40px;
}

.details-column {
    width: 85%;
    font-size: 17px; /* was 16px */
    line-height: 1.8;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300;
}


/* ============================================================
   ARTWORK DETAIL PAGE — DESKTOP (above 950px)
   
   Layout: text column on the left, image column on the right.
   The image was appearing too small because max-width: 600px
   was capping the image container, and max-height: 70vh was
   shrinking tall images further. Both have been removed so the
   image fills the full width of its right-hand column.
   ============================================================ */

.artwork-detail {
    display: grid;
    grid-template-columns: 1fr 2fr; /* EDIT: text-to-image width ratio. 
                                       "1fr 2fr" = text gets 1/3, image gets 2/3 of the page.
                                       Try "1fr 3fr" for an even wider image, or "1fr 1fr" for equal halves. */
    gap: 60px;                       /* EDIT: space between the text column and image column */
    max-width: 1400px;               /* EDIT: maximum width of the whole detail layout */
    margin: 0 auto;
    align-items: start;
}

.artwork-detail-info {
    padding-right: 20px;
    position: sticky;
    top: 120px;                      /* EDIT: how far from the top the text sticks when scrolling */
}

.artwork-detail-description p {
    font-size: 17px; /* was 16px */
    line-height: 1.7;
    color: #333;
    font-weight: 300;
    margin-top: 30px;
    margin-bottom: 1.5em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.artwork-detail-image {
    /* Removed: max-width: 600px — this was capping the image too small on wide screens */
    width: 100%;                     /* Image container fills its full grid column */
}

.artwork-detail-image img {
    width: 100%;                     /* Image fills the full width of its container */
    height: auto;
    /* Removed: max-height: 70vh — this was shrinking tall images on desktop.
       If you want to add a height cap back, uncomment the line below and adjust the value: */
    /* max-height: 85vh; */
    object-fit: contain;
    object-position: left top;       /* EDIT: aligns image to top-left. 
                                        Try "center top" to centre it horizontally instead. */
    display: block;
}


/* ============================================================
   RESPONSIVE — TABLET GALLERY (max 950px)
   ============================================================ */

@media (max-width: 950px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

@media (max-width: 750px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}


/* ============================================================
   RESPONSIVE — TABLET ARTWORK DETAIL (601px–950px)
   
   Keeps the two-column layout but balances the columns more
   evenly, and adds a max-height so very tall images don't
   push the text off screen on smaller tablet sizes.
   ============================================================ */

@media (min-width: 601px) and (max-width: 950px) {

    .main-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .artwork-detail {
        grid-template-columns: 1fr 1fr; /* EDIT: tablet column ratio. 
                                           "1fr 1fr" = equal halves, which works better on narrower screens.
                                           Change to "1fr 2fr" to match the desktop ratio if you prefer. */
        gap: 30px;                       /* EDIT: space between columns on tablet */
    }

    .artwork-detail-info {
        position: sticky;
        top: 100px;
        order: unset;
        padding-right: 10px;
    }

    .artwork-detail-image {
        order: unset;
        width: 100%;
    }

    .artwork-detail-image img {
        width: 100%;
        height: auto;
        max-height: 65vh;            /* EDIT: caps image height on tablet so it doesn't appear too large.
                                        Increase to e.g. 80vh for taller images, decrease to 50vh for shorter. */
        object-fit: contain;
        object-position: left top;
        display: block;
    }
}


/* ============================================================
   RESPONSIVE — ALL SCREENS BELOW 950px
   (header, nav, hero, gallery, footer, exhibitions table, etc.)
   ============================================================ */

@media (max-width: 950px) {

    /* Header */
    header {
        padding: 20px 25px;
    }

    .logo {
        font-size: 15px; /* was 14px */
    }

    nav {
        position: fixed;
        top: 71px;
        left: 0;
        right: 0;
        background: rgba(253, 252, 250, 0.98);
        border-bottom: 1px solid #e8e4df;
        display: none;
    }

    nav.active {
        display: block;
    }

    nav ul {
        flex-direction: column;
        gap: 0;
        padding: 20px 0;
    }

    nav ul li.has-dropdown {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    nav ul li.has-dropdown > a {
        flex: 0 0 auto;
        padding: 12px 5px 12px 25px;
    }

    nav ul li.has-dropdown .dropdown {
        flex-basis: 100%;
    }

    nav a {
        display: block;
        padding: 12px 25px;
    }

    .header-icons {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    /* Mobile dropdown */
    .dropdown-toggle {
        display: inline-block;
        cursor: pointer;
        padding: 5px 12px;
        font-size: 15px; /* was 14px */
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .dropdown-toggle.open {
        transform: rotate(180deg);
    }

    .dropdown {
        position: static;
        display: none;
        border: none;
        margin-top: 0;
        padding-left: 20px;
        background: transparent;
        width: 100%;
    }

    .has-dropdown.active .dropdown {
        display: block;
    }

    .dropdown a {
        padding: 10px 25px;
        font-size: 13px; /* was 12px */
        white-space: normal;
    }

    /* Hero */
    .hero {
        /*HOME TITLE*/
        margin-top:50px;
        padding: 100px 25px 60px;
    }

    .hero h1 {
        font-size: 34px; /* was 32px */
    }

    /* Intro */
   /* Intro AFFECTS TABLET*/
    .intro {
        padding: 0 25px;
        margin-bottom: 60px;
    }

    .intro p {
        font-size: 17px; /* was 16px */
    }

    /* Gallery — changes left and right padding on images */
    .gallery {
        padding: 0 25px 70px;
    }

    /* Footer */
    footer {
        padding: 60px 25px;
    }

    /* Main content */
    .main-content {
        margin-top: 71px;
        padding: 80px 10px;
    }

    /* Exhibitions table */
    .page-title {
        font-size: 16px; /* was 15px */
        margin-bottom: 60px;
    }

    .year-column {
        width: 25%;
        font-size: 14px; /* was 13px */
        padding-right: 20px;
    }

    .details-column {
        width: 75%;
        font-size: 15px; /* was 14px */
    }

    .exhibition-table td {
        padding: 20px 0;
    }

    /* --------------------------------------------------------
       ARTWORK DETAIL — MOBILE (stacked, single column)
       Image appears on top, text info below.
       Image is naturally sized by its width — no height cap
       needed since it fills the screen width at the right ratio.
       -------------------------------------------------------- */

    .artwork-detail {
        grid-template-columns: 1fr;  /* Single column on mobile */
        gap: 30px;
        padding: 0;
    }

    .artwork-detail-info {
        padding-right: 0;
        order: 2;                    /* EDIT: swap order: 1 here and order: 2 below 
                                        if you want text above the image on mobile */
        position: static;
    }

    .artwork-detail-image {
        order: 1;                    /* EDIT: see note above */
        width: 100%;
    }

    .artwork-detail-image img {
        width: 100%;
        height: auto;
        /* No max-height on mobile — the image fills the screen width naturally
           at whatever aspect ratio it has, which you said looks perfect already */
        object-fit: contain;
        object-position: center top; /* EDIT: "center top" centres the image horizontally on mobile */
        display: block;
        margin: 0 auto;
    }
}


/* ============================================================
   RESPONSIVE — SMALL PHONE (max 400px)
   ============================================================ */

@media (max-width: 400px) { /* EDIT: this breakpoint controls when gallery jumps to single column */

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .gallery { /* Changes left and right padding on mobile only */
        padding: 0 15px 80px;
    }

    .intro {
        padding: 0 0px;
    }

    #email-1, #email-2, #email-3, #email-4, #email-5 {
        word-break: break-all;
        overflow-wrap: break-word;
    }
}


/* ============================================================
   RESPONSIVE — TABLET PARAGRAPH PADDING
   ============================================================ */

@media (min-width: 601px) and (max-width: 950px) {
    p {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (max-width: 600px) {
    p {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* ============================================================
   HIDES ORANGE BORDER FOR ANCHOR FOCUS
   ============================================================ */

a:focus {
    outline: none;
}