/* --- DESIGN SYSTEM & TOKENS --- */

html {
    scroll-behavior: smooth;
}

:root {
    --font-header: 'Impact', 'Arial Narrow Bold', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    
    --color-bg: #ffffff;
    --color-text-main: #000000;
    --color-text-muted: #000000;
    --color-accent: #000000;
    --color-border: #e5e5e5;
    
    --site-max-width: 1100px;
}

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

body {
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* --- TYPOGRAPHY PATTERNS --- */
h1, h2, h3, h4 {
    font-family: var(--font-header);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 0.85;
    font-weight: 900;
}

p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

/* --- LAYOUT UTILITIES --- */
.container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 5rem 0;
}

.text-center {
    text-align: center;
}

hr {
    border: 0;
    border-top: 2px solid var(--color-accent);
    margin: 4rem 0;
}

/* --- NAVIGATION BAR --- */
.site-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 2.5rem 0;
}

.nav-container {
    max-width: 1450px;
    width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 45px;
    width: auto;
    display: block;
}

.nav-links a {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    margin-left: 2.5rem;
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
}

.nav-links a:hover {
    opacity: 0.7;
}

/* --- SECTION 1: THE HERO --- */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8rem;
    padding-bottom: 4rem;
    overflow: hidden;
    background-color: #000000;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: #ffffff;
}

.hero h1 {
    font-size: 7.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    word-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-eyebrow {
    font-family: var(--font-header);
    font-weight: 900;
    font-size: 2.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.hero .meta-dates {
    font-family: var(--font-header);
    font-weight: 900;
    font-size: 2.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
    margin-top: 1rem;
    margin-bottom: 3rem;
}

.mobile-break::before {
    content: "|";
}

/* --- SECTION 2: THE INTRO BLOCK --- */
#about.section-padding {
    padding-top: 2.5rem;
    padding-bottom: 0rem;
}

.intro-block {
    max-width: 1250px;
    margin: 0 auto;
    padding: 1rem 2rem 0rem 2rem;
}

.intro-p {
    font-size: 2rem;
    line-height: 1.45;
    text-align: center;
    color: var(--color-text-main);
    font-weight: 500;
    letter-spacing: 0.01em;
}

#about + hr, 
.intro-block + hr {
    margin-top: 1.5rem;
    margin-bottom: 3rem;
}

/* --- FULL-WIDTH COLOR BLOCKS --- */
.yellow-feature-block,
.dark-feature-block,
.venue-feature-block,
.form-section-block,
.details-section-block {
    margin: 1.5rem 1.5rem;
    padding: 3.5rem 3rem;
    border-radius: 4px;
}

.yellow-feature-block {
    background-color: #f1b83a;
}

.dark-feature-block {
    background-color: #212A37;
}

.venue-feature-block,
.details-section-block {
    background-color: #2b3a2f;
}

.form-section-block {
    background-color: #C18980;
}

.yellow-block-inner,
.dark-block-inner,
.venue-block-inner {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.media-feature-text {
    flex: 0 0 340px;
}

/* Automatically adds a clean gap between consecutive paragraphs in feature blocks */
.media-feature-text p + p {
    margin-top: 1.2rem;
}

.media-feature-text h2 {
    font-size: 4.5rem;
    line-height: 0.85;
    margin-bottom: 0.5rem;
    color: #000000;
}

.media-feature-text .feature-sub {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    color: #000000;
}

.media-feature-text p {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 500;
    color: #000000;
    letter-spacing: -0.01em;
}

.dark-feature-block .media-feature-text h2,
.dark-feature-block .media-feature-text .feature-sub,
.dark-feature-block .media-feature-text p,
.venue-feature-block .media-feature-text h2,
.venue-feature-block .media-feature-text .feature-sub,
.venue-feature-block .media-feature-text p {
    color: #ffffff;
}

.media-feature-display {
    flex: 1;
    display: flex;
    gap: 1.5rem;
}

.media-box {
    flex: 1;
    position: relative;
    aspect-ratio: 4 / 5;
    background-color: #0c3352;
    border-radius: 12px;
    overflow: hidden;
}

.media-box.dark-theme {
    background-color: #222222;
}

/* --- SLIDER ENGINE A: ONE INCREDIBLE VENUE --- */
.venue-slider-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1f2922;
}

.venue-slider-container input[type="radio"] {
    display: none;
}

.venue-slider-container .slider-track {
    display: flex;
    width: 300%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.venue-slider-container .slide {
    width: 33.3333%;
    height: 100%;
    position: relative;
}

#slide-1:checked ~ .slider-track { transform: translateX(0%); }
#slide-2:checked ~ .slider-track { transform: translateX(-33.3333%); }
#slide-3:checked ~ .slider-track { transform: translateX(-66.6666%); }

.media-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 2;
}

/* Slider Nav Dots */
.slider-nav-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 5;
}

.dot-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot-btn:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

#slide-1:checked ~ .slider-nav-dots label[for="slide-1"],
#slide-2:checked ~ .slider-nav-dots label[for="slide-2"],
#slide-3:checked ~ .slider-nav-dots label[for="slide-3"] {
    background-color: #ffffff;
    transform: scale(1.2);
}

/* Tactile Slider Arrow Controls */
.slider-arrow-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 10;
    pointer-events: none;
}

.arrow-btn {
    pointer-events: auto;
    width: 55px;
    height: 55px;
    background-color: #f1b83a;
    color: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease;
    user-select: none;
}

.arrow-btn:hover {
    background-color: #ffffff;
    transform: scale(1.1);
}

.arrow-btn:active {
    transform: scale(0.95);
}

/* --- SLIDER ENGINE B: PAST EVENT HIGHLIGHTS (6-CARD FIXED CAROUSEL ENGINE) --- */
.multi-slider-wrapper {
    position: relative;
    width: 100%;
}

.highlights-carousel-viewport {
    background-color: transparent !important;
    overflow: hidden;
    height: auto !important;
    aspect-ratio: auto !important;
}

.highlights-multi-track {
    width: 200% !important;
    display: flex;
    gap: 1.5rem;
}

.highlight-card-slide {
    width: 16.6666% !important;
    display: flex;
    flex-direction: column;
}

.highlight-card-slide .history-frame {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
}

#highlight-group-a:checked ~ .slider-track { transform: translateX(0%); }
#highlight-group-b:checked ~ .slider-track { transform: translateX(calc(-16.6666% - 0.25rem)); }
#highlight-group-c:checked ~ .slider-track { transform: translateX(calc(-50% - 0.75rem)); }

.highlight-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.highlight-card-slide .history-card-body {
    text-align: center;
    padding-top: 1.2rem;
}

/* --- SECTION 5A: PAST EVENT HIGHLIGHTS DISPLAY --- */
.wide-highlights-block {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.5rem 3rem 4rem 3rem;
}

.highlights-intro {
    margin-bottom: 4rem;
}

.highlights-intro h2 {
    font-size: 4.5rem;
    color: var(--color-text-main);
    margin-bottom: 0.8rem;
}

/* --- SECTION 5B: PAST ARTOBERS HISTORICAL GRID --- */
.wide-history-block {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.5rem 3rem 0rem 3rem;
}

.history-intro {
    margin-bottom: 4rem;
}

.history-intro h2 {
    font-size: 4.5rem;
    color: var(--color-text-main);
    margin-bottom: 0.8rem;
}

.history-lead {
    font-size: 1.4rem;
    font-weight: 500;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.history-grid {
    display: flex;
    gap: 1.5rem;
}

.history-card {
    flex: 1;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.history-card:hover {
    transform: translateY(-4px);
}

.history-frame {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #000000;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.history-asset {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.2s ease;
}

.history-card:hover .history-asset {
    opacity: 0.85;
}

.history-card-body h3 {
    font-size: 2.2rem;
    line-height: 1.0;
    margin-bottom: 0.4rem;
    color: var(--color-text-main);
}

.history-card-body h4 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666666;
}

/* --- SECTION 6: ARTIST APPLICATION FORM --- */
.form-block-inner {
    max-width: 900px;
    margin: 0 auto;
}

.form-header {
    margin-bottom: 4rem;
}

.form-header h2 {
    font-size: 4.5rem;
    margin-bottom: 0.8rem;
    color: #ffffff;
}

.form-header p {
    font-size: 1.3rem;
    font-weight: 500;
    color: #ffffff;
}

.application-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-row-dual {
    display: flex;
    gap: 2rem;
}

.form-row-dual .form-group {
    flex: 1;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.form-group label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 1.1rem 1.2rem;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 500;
    border: 2px solid #000000;
    border-radius: 6px;
    background-color: #ffffff;
    color: #000000;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    background-color: #fafafa;
    border-color: #000000;
}

#wall-size-group {
    width: 100%;
}

.cta-submit-btn {
    font-family: var(--font-header);
    font-size: 2.2rem;
    text-transform: uppercase;
    background-color: #000000;
    color: #ffffff;
    border: 2px solid #000000;
    padding: 1rem 4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.02em;
    margin-bottom: 0.8rem;
}

.cta-submit-btn:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}

.cta-submit-btn:active {
    transform: scale(0.98);
}

.submit-note {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    color: #eaeaea;
}

/* --- SECTION 7: EXHIBITION DETAILS & PRICING --- */
.details-block-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.details-grid {
    display: flex;
    gap: 5rem;
    align-items: flex-start;
}

.creed-card {
    flex: 0 0 400px;
}

.creed-card h2 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.creed-text {
    font-size: 1.6rem;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.creed-card p {
    color: #ffffff;
}

.options-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.option-row {
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.option-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.option-row p {
    color: #ffffff;
}

.option-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.option-title {
    font-family: var(--font-header);
    font-size: 2rem;
    text-transform: uppercase;
    color: #ffffff;
}

.option-price {
    font-family: var(--font-header);
    font-size: 2rem;
    color: #000000;
    background-color: #ffffff;
    padding: 0.1rem 0.6rem;
    border-radius: 4px;
}

/* --- SECTION 8: UPCOMING UPDATES & PARTNERS --- */
.partners-section {
    background-color: #ffffff;
    padding: 6rem 0;
    border-top: 2px solid #000000;
}

.partners-grid {
    display: flex;
    gap: 6rem;
    align-items: flex-start;
}

.status-panel,
.partner-panel {
    flex: 1;
}

.status-panel h2,
.partner-panel h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: #000000;
}

.status-lead {
    font-size: 1.4rem;
    line-height: 1.45;
    font-weight: 700;
    color: #000000;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.status-badge {
    display: inline-block;
    font-family: var(--font-header);
    font-size: 1.1rem;
    text-transform: uppercase;
    background-color: #f1b83a;
    color: #000000;
    padding: 0.4rem 1rem;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.partner-panel p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #333333;
    margin-bottom: 2rem;
}

.partner-contact-box {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.contact-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #666666;
    letter-spacing: 0.05em;
}

.partner-email {
    font-family: var(--font-header);
    font-size: 2.2rem;
    color: #000000;
    text-decoration: none;
    line-height: 1;
    display: inline-block;
    transition: color 0.2s ease;
}

.partner-email:hover {
    color: #f1b83a;
}

/* --- FOOTER (ROW SPECIFIC TWO-COLUMN ENGINE) --- */
.site-footer {
    background-color: #111111;
    padding: 4rem 0;
}

.footer-content {
    display: flex;
    flex-direction: row;        /* Formats as a linear row instead of a vertical stack */
    justify-content: space-between; /* Pushes copyright to the left edge and your signature link to the right */
    align-items: center;
    gap: 2rem;
}

.site-footer .copyright {
    font-size: 0.95rem;
    font-weight: 500;
    color: #888888; /* Keeps the regular copyright text a soft silver-grey */
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

/* Forces the Artedly link to stay bright white and removes the underline */
.site-footer .copyright a {
    color: #ffffff !important; 
    text-decoration: none;
    transition: opacity 0.2s ease;
}

/* Adds a clean, subtle hover reaction when mouse lines pass over it */
.site-footer .copyright a:hover {
    opacity: 0.7;
}

.footer-signature-link {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    max-width: 220px;          /* Scaled down width parameter for a smaller footprint profile */
    width: 100%;
}

.footer-signature-link:hover {
    transform: scale(1.03);
}

.footer-signature-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1024px) {
    .yellow-block-inner,
    .dark-block-inner,
    .venue-block-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    
    .media-feature-text {
        flex: none;
        width: 100%;
    }

    .details-grid {
        flex-direction: column;
        gap: 3.5rem;
    }
    .creed-card {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 900px) {
    .partners-grid {
        flex-direction: column;
        gap: 4rem;
    }
    .status-panel h2,
    .partner-panel h2 {
        font-size: 2.5rem;
    }
    .partner-email {
        font-size: 1.8rem;
    }
    .history-grid {
        flex-direction: column;
        gap: 3.5rem;
    }

    /* Mobile horizontal swipe engines */
    .multi-slider-wrapper .slider-arrow-controls {
        display: none !important;
    }
    .highlights-carousel-viewport {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1.5rem;
    }
    .highlights-multi-track {
        width: auto !important;
        display: inline-flex !important;
        transform: none !important;
        transition: none !important;
    }
    .highlight-card-slide {
        width: 280px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 768px) {
    .hero h1 { font-size: 4.5rem; }
    .hero { min-height: auto; }
    .nav-links a:not(.nav-lang-toggle) {
        display: none !important;
    }
    
    /* Hard-lock the language switcher to stay visible and look clean */
    .nav-links {
        display: flex !important;
        align-items: center;
    }
    
    .nav-lang-toggle {
        display: inline-block !important;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        padding: 0.4rem 0.8rem;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.05);
    }
    .intro-p { font-size: 1.25rem; }
    
    .mobile-break::before { content: ""; }
    .mobile-break::after { content: "\A"; white-space: pre; }
    .hero .meta-dates { font-size: 1.8rem; line-height: 1.3; }

    .form-row-dual { flex-direction: column; gap: 2rem; }
    .form-header h2 { font-size: 3.2rem; }
    .option-title, .option-price { font-size: 1.6rem; }

    /* Returns the footer to a stacked format for crisp scaling layouts on narrow smartphone displays */
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    .footer-signature-link {
        max-width: 200px;
    }
}

@media (max-width: 600px) {
    .yellow-feature-block,
    .dark-feature-block,
    .venue-feature-block,
    .form-section-block,
    .details-section-block {
        margin: 0.75rem;
        padding: 2rem 1.5rem;
    }
    .media-feature-display {
        flex-direction: column;
        width: 100%;
    }
}

/* --- HERO ARTIST CREDIT BADGE --- */
.hero-credit {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 5;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95); /* Bright, high-contrast white initially */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.hero-credit:hover {
    color: rgba(255, 255, 255, 0.4); /* Smoothly fades out/softens on mouse hover */
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .hero-credit {
        bottom: 1.2rem;
        left: 1.5rem;
        font-size: 0.75rem;
    }
}

/* --- MOBILE PRICING BADGE FIX --- */
@media (max-width: 576px) {
    .option-meta .option-price {
        font-size: 1.1rem !important; /* Scales it down slightly just for mobile screens */
        white-space: nowrap !important; /* Forcefully locks the price onto a single line */
    }
}

/* ========================================================
   ARTOBER 2026 — ARTIST INFORMATION PAGE
   ======================================================== */
/* Artober 2026 Artist Information page additions */
.artist-info-page { background:#fff; }
.artist-hero { position:relative; min-height:72vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#000; padding:9rem 0 5rem; }
.artist-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:1; }
.artist-hero .hero-overlay { z-index:2; }
.artist-hero-content { position:relative; z-index:3; color:#fff; }
.artist-hero h1 { font-size:7.5rem; color:#fff; margin:.4rem 0 1.5rem; }
.artist-hero .meta-dates { font-family:var(--font-header); font-size:2.2rem; text-transform:uppercase; line-height:1; }
.artist-welcome { padding:5rem 2rem; }
.artist-narrow { max-width:950px; margin:0 auto; }
.artist-welcome p, .artist-final p { font-size:1.55rem; line-height:1.55; }
.artist-section { margin:1.5rem; padding:5rem 3rem; border-radius:4px; }
.artist-inner { max-width:1400px; margin:0 auto; }
.artist-heading { margin-bottom:3rem; }
.artist-heading h2, .artist-final h2 { font-size:4.8rem; line-height:.9; margin-top:.6rem; }
.section-kicker { font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.artist-lead { margin-top:3rem; max-width:1000px; font-size:1.35rem; }
.key-details-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.detail-card { padding:2rem; border:2px solid #000; border-radius:8px; min-height:160px; display:flex; flex-direction:column; justify-content:space-between; }
.detail-card span { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.detail-card strong { font-family:var(--font-header); font-size:1.9rem; text-transform:uppercase; line-height:1; }
.artist-section-dark { background:#111; color:#fff; }
.artist-section-yellow { background:#f1b83a; }
.artist-section-green { background:#2b3a2f; color:#fff; }
.artist-section-pink { background:#C18980; color:#fff; }
.inverted h2, .inverted p, .inverted .section-kicker, .inverted-copy p { color:#fff; }
.schedule-list { border-top:2px solid rgba(255,255,255,.25); }
.schedule-row { display:grid; grid-template-columns:150px 1fr; gap:2rem; padding:1.7rem 0; border-bottom:2px solid rgba(255,255,255,.25); align-items:center; }
.schedule-date { font-family:var(--font-header); font-size:2rem; }
.schedule-row h3 { color:#fff; font-size:2rem; margin-bottom:.4rem; }
.schedule-row p { color:#fff; font-size:1.05rem; opacity:.85; }
.artist-small-note { color:#fff; font-size:1rem; margin-top:2rem; opacity:.75; }
.two-column-info { display:grid; grid-template-columns:minmax(280px,420px) 1fr; gap:6rem; align-items:start; }
.two-column-info .artist-heading { margin:0; }
.artist-copy { max-width:850px; }
.artist-copy p { font-size:1.25rem; line-height:1.6; }
.artist-copy p + p { margin-top:1.5rem; }
.artist-final { padding:7rem 2rem; }
.artist-final h2 { margin:.8rem 0 2rem; }
.artist-final p + p { margin-top:1.3rem; }
.artist-cta { display:inline-block; margin-top:2.5rem; padding:1rem 2rem; background:#000; color:#fff; text-decoration:none; font-family:var(--font-header); font-size:1.6rem; text-transform:uppercase; border:2px solid #000; border-radius:5px; }
.artist-cta:hover { background:#fff; color:#000; }
@media(max-width:1024px){
  .key-details-grid{grid-template-columns:repeat(2,1fr)}
  .two-column-info{grid-template-columns:1fr;gap:2.5rem}
  .artist-hero h1{font-size:6rem}
}
@media(max-width:768px){
  .artist-hero{min-height:70vh;padding-top:8rem}
  .artist-hero h1{font-size:4.5rem}
  .artist-hero .meta-dates{font-size:1.6rem;line-height:1.25}
  .artist-heading h2,.artist-final h2{font-size:3.4rem}
  .artist-section{margin:.75rem;padding:3rem 1.5rem}
  .artist-welcome{padding:3.5rem 1.5rem}
  .artist-welcome p,.artist-final p{font-size:1.25rem}
  .schedule-row{grid-template-columns:1fr;gap:.5rem}
  .schedule-date{font-size:1.5rem}
  .nav-links a:not(:last-child){display:none!important}
}
@media(max-width:560px){
  .key-details-grid{grid-template-columns:1fr}
  .detail-card{min-height:135px}
  .artist-copy p{font-size:1.1rem}
}

.artist-payment-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 2rem 0;
}

.artist-payment-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    color: #111;
    text-decoration: none;
    border-radius: 10px;
    transition: transform 0.2s ease;
}

.artist-payment-link:hover {
    transform: translateY(-2px);
}

.artist-payment-link strong {
    font-weight: 700;
}

.artist-payment-link span {
    white-space: nowrap;
}

@media (max-width: 600px) {
    .artist-payment-links {
        grid-template-columns: 1fr;
    }
}

.philosophy-section {
    background: #2b3a2f;
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.philosophy-section .creed-card {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
}

.philosophy-section .creed-card h2 {
    color: #fff;
    margin-bottom: 2.5rem;
}

.philosophy-section .creed-card p {
    color: #fff;
    line-height: 1.65;
    margin: 0 auto 1.75rem;
}

.philosophy-section .creed-card .creed-text {
    max-width: 850px;
    margin: 0 auto 2.75rem;
    line-height: 1.45;
}

.philosophy-section .creed-card p:last-child {
    margin-bottom: 0;
}
/* --- ARTOBER 2026 EVENING EVENTS --- */
.events-section { padding: 0rem 3rem 1rem; scroll-margin-top: 2rem; }
.events-inner { max-width: 1504px; margin: 0 auto; }
.events-intro {
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.events-intro p {
    max-width: none;
}
.events-intro h2 { font-size: clamp(2.8rem, 5vw, 4.5rem); line-height: 1; margin-bottom: 1.2rem; }
.events-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.event-card { display: flex; flex-direction: column; padding: 2rem; border-radius: 12px; color: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.event-card-play { background: #2B3A2F;}
.event-card-meetup { background: #FF4F4E; }
.event-card-halloween { background: #212A37; }
.event-card:hover { transform: translateY(-5px); box-shadow: 0 12px 24px rgba(0,0,0,.13); }
.event-card:focus-visible { outline: 3px solid #000; outline-offset: 6px; }
.event-card-top { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid currentColor; font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.event-card-content { flex: 1; padding: 2rem 0; }
.event-eyebrow { display: block; min-height: 3em; font-size: .75rem; line-height: 1.5; letter-spacing: .05em; font-weight: 700; }
.event-card h3 { font-size: clamp(2.6rem, 3.8vw, 4rem); line-height: 1; margin: 1rem 0 1.5rem; overflow-wrap: anywhere; }
.event-card p { font-size: 1rem; line-height: 1.65; color: inherit; }
.event-card-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid currentColor; padding-top: 1rem; font-size: .95rem; font-weight: 700; }
.event-card-link span { font-size: 1.5rem; line-height: 1; }
@media (max-width: 900px) { .events-section { padding: 4rem 1.5rem 1rem; } .events-grid { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; } .event-card h3 { font-size: 3.5rem; } .event-eyebrow { min-height: 0; } }
@media (max-width: 480px) { .event-card { padding: 1.5rem; } .events-intro p { font-size: 1.1rem; } .event-card h3 { font-size: 3rem; } }
@media (prefers-reduced-motion: reduce) { .event-card { transition: none; } .event-card:hover { transform: none; } }

/* Event card photos */
.event-card {
    padding: 0;
    overflow: hidden;
}

.event-card-image {
    width: 100%;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.12);
}

.event-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.event-card:hover .event-card-image img {
    transform: scale(1.04);
}

.event-card-top {
    margin: 1.5rem 2rem 0;
}

.event-card-content {
    padding: 2rem;
}

.event-card-link {
    margin: 0 2rem 2rem;
}

@media (max-width: 480px) {
    .event-card {
        padding: 0;
    }

    .event-card-top {
        margin: 1.5rem 1.5rem 0;
    }

    .event-card-content {
        padding: 1.5rem;
    }

    .event-card-link {
        margin: 0 1.5rem 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-card-image img {
        transition: none;
    }

    .event-card:hover .event-card-image img {
        transform: none;
    }
}

/* FAQ accordion */
.faq-section {
    background: #212A37;
    color: #fff;
    padding: 5rem 2rem;
}

.faq-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-inner h2 {
    color: #fff;
    margin-bottom: 2.5rem;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;
    text-align: center;
}

.faq-list {
    border-top: 2px solid #fff;
}

.faq-item {
    border-bottom: 1px solid #444;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 1;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item summary:hover {
    color: #f5e642;
}

.faq-item summary:focus-visible {
    outline: 3px solid #f5e642;
    outline-offset: 4px;
}

.faq-answer {
    max-width: 850px;
    padding: 0 2.5rem 1.5rem 0;
}

.faq-answer p {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.75;
}

.faq-answer p + p {
    margin-top: 0.8rem;
}

@media (max-width: 600px) {
    .faq-section {
        padding: 3.5rem 1.5rem;
        margin-bottom: 2.5rem;
    }

    .faq-item summary {
        font-size: 1rem;
        gap: 1rem;
    }

    .faq-answer {
        padding-right: 0;
    }

    .faq-answer p {
        font-size: 1rem;
    }
}

/* Access: venue photograph with an overlapping information panel */
.artober-access {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.artober-access-image {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.artober-access-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.artober-access-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6rem 3rem;
}

.artober-access-card {
    max-width: 520px;
    padding: 3rem;
    background: #fff;
    color: #202020;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.artober-access-card h2 {
    margin-bottom: 1.5rem;
    color: #202020;
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1;
}

.artober-access-card p {
    margin-bottom: 1.25rem;
    color: #202020;
    font-size: 1.05rem;
    line-height: 1.7;
}

.artober-access-stations {
    margin: 0 0 2rem;
    padding-left: 1.25rem;
    font-size: 1rem;
    line-height: 1.9;
}

.artober-access-button {
    display: inline-block;
    padding: 1rem 1.4rem;
    background: #FF4F4E;
    color: #fff;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.artober-access-button:hover {
    background: #2B3A2F;
    color: #fff;
}

.artober-access-button:focus-visible {
    outline: 3px solid #2B3A2F;
    outline-offset: 4px;
}

@media (max-width: 700px) {
    .artober-access {
        background: #2B3A2F;
    }

    .artober-access-image {
        position: relative;
        inset: auto;
        z-index: auto;
        aspect-ratio: 16 / 10;
    }

    .artober-access-inner {
        padding: 1.5rem;
    }

    .artober-access-card {
        max-width: none;
        padding: 2rem;
        box-shadow: none;
    }
}

 /* Styles specific to this event page */
        .play-page {
            --play-yellow: #F1B83A;
            --play-green: #2B3A2F;
            --play-blue: #212A37;
            --play-red: #FF4F4E;
        }

        .play-nav {
            padding: 1.5rem 2rem;
            background: var(--play-blue);
        }

        .play-nav-inner {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
        }

        .play-logo img {
            display: block;
            width: auto;
            height: 42px;
        }

        .play-back {
            color: #fff;
            font-size: 0.95rem;
            font-weight: 700;
            text-decoration: none;
        }

        .play-back:hover {
            text-decoration: underline;
        }

        .play-hero {
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: var(--play-green);
            color: #ffffff;
        }

        .play-hero-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: clamp(2rem, 5vw, 6rem);
        }

        .play-eyebrow {
            margin-bottom: 1.5rem;
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .play-hero h1 {
            margin-bottom: 1.5rem;
            font-size: clamp(4rem, 7vw, 8rem);
            line-height: 0.95;
            color: #fff;
        }

        .play-date {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
            font-weight: 700;
        }

        .play-hero-description {
            max-width: 580px;
            color: #fff;
            font-size: 1.2rem;
            line-height: 1.65;
        }

        .play-hero-image {
            min-height: 550px;
        }

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

        .play-section {
            padding: 5rem 2rem;
        }

        .play-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .play-section h2 {
            margin-bottom: 1.5rem;
            font-size: clamp(2.5rem, 4vw, 4rem);
            line-height: 1;
        }

        .play-section p {
            font-size: 1.1rem;
            line-height: 1.75;
        }

        .play-intro {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .play-intro p + p {
            margin-top: 1rem;
        }

        .play-info {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 1.5rem;
            padding-top: 2rem;
            border-top: 2px solid #000;
        }

        .play-info dt {
            margin-bottom: 0.5rem;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .play-info dd {
            font-size: 1rem;
            line-height: 1.6;
        }

        .play-expect {
            background: var(--play-blue);
            color: #fff;
        }

        .play-features {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 2rem;
            margin-top: 2.5rem;
        }

        .play-feature {
            padding-top: 1.5rem;
            border-top: 2px solid #fff;
        }

        .play-feature h3 {
            margin-bottom: 1rem;
            font-size: 2rem;
            line-height: 1.05;
        }

        .play-feature p {
            font-size: 1rem;
            color: #fff;
        }

        .play-gallery-note {
            margin-top: 3rem;
            padding: 2rem;
            background: #fff;
            border-radius: 12px;
        }

        .play-gallery-note h3 {
            margin-bottom: 1rem;
            font-size: 2rem;
            line-height: 1.1;
        }

        .play-gallery-note p {
            font-size: 1rem;
        }

        .play-photo {
            margin-top: 3rem;
        }

        .play-photo img {
            display: block;
            width: 100%;
            max-height: 600px;
            object-fit: cover;
            border-radius: 12px;
        }

        .play-photo figcaption {
            margin-top: 0.75rem;
            color: #555;
            font-size: 0.85rem;
        }

        .play-access {
            background: var(--play-green);
            color: #fff;
        }

        .play-access h2,
        .play-access p {
            color: #fff;
        }

        .play-access-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 4rem;
        }

        .play-access p + p {
            margin-top: 1rem;
        }

        .play-stations {
            padding-left: 1.25rem;
            font-size: 1rem;
            line-height: 1.9;
        }

        .play-map-link {
            display: inline-block;
            margin-top: 1.5rem;
            padding: 0.9rem 1.3rem;
            border-radius: 6px;
            background: var(--play-yellow);
            color: #000;
            font-weight: 700;
            text-decoration: none;
        }

        .play-map-link:hover {
            background: #fff;
        }

        .play-footer {
            padding: 2rem;
            text-align: center;
        }

        .play-footer p {
            font-size: 0.9rem;
        }

        .play-footer a {
            color: inherit;
        }

        .play-page a:focus-visible {
            outline: 3px solid currentColor;
            outline-offset: 5px;
        }

        @media (max-width: 900px) {
            .play-hero {
                grid-template-columns: 1fr;
            }

            .play-hero-copy {
                padding: 3.5rem 2rem;
            }

            .play-hero-image {
                min-height: 0;
                aspect-ratio: 16 / 10;
            }

            .play-info {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .play-features {
                grid-template-columns: 1fr;
            }

            .play-access-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
        }

        @media (max-width: 600px) {
            .play-nav {
                padding: 1.25rem 1.5rem;
            }

            .play-logo img {
                height: 32px;
            }

            .play-back {
                font-size: 0.8rem;
            }

            .play-hero-copy {
                padding: 3rem 1.5rem;
            }

            .play-hero h1 {
                font-size: clamp(3.5rem, 14vw, 5rem);
            }

            .play-hero-description {
                font-size: 1.05rem;
            }

            .play-section {
                padding: 3.5rem 1.5rem;
            }

            .play-info {
                gap: 1.5rem 1rem;
            }

            .play-gallery-note {
                padding: 1.5rem;
            }
        }
        .play-last-year {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid #000;
}

.play-last-year > p {
    max-width: 850px;
    margin-bottom: 2rem;
}

.play-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.play-photo-grid a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}

.play-photo-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.play-photo-grid a:hover img {
    transform: scale(1.04);
}

.play-previous-link {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.9rem 1.3rem;
    background: var(--play-green);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

.play-previous-link:hover {
    background: #000;
}

@media (max-width: 600px) {
    .play-photo-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .play-photo-grid img {
        transition: none;
    }

    .play-photo-grid a:hover img {
        transform: none;
    }
}
.event-artober-section {
    background: #F3EFE6;
    padding: 4rem 2rem;
}

.event-artober-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.event-artober-inner h2 {
    margin-bottom: 1.5rem;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1;
    color: #202020;
}

.event-artober-inner p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    line-height: 1.75;
    color: #202020;
}

.event-artober-link {
    display: inline-block;
    margin-top: 1rem;
    color: #2B3A2F;
    font-weight: 700;
    text-underline-offset: 4px;
}

.event-artober-link:hover {
    color: #202020;
}

@media (max-width: 600px) {
    .event-artober-section {
        padding: 3rem 1.5rem;
    }
}

/* Previous event gallery */
.pc-gallery {
    background: #2B3A2F;
    padding: 5rem 2rem;
}

.pc-gallery-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.pc-gallery h2 {
    max-width: 1000px;
    margin: 0 auto 1.5rem;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.05;
    text-align: center;
    color: #fff;
}

.pc-gallery-inner > p {
    margin-bottom: 2.5rem;
    text-align: center;
    color: #fff;
    font-size: 1rem;
}

.pc-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.pc-gallery-grid a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #ded9d0;
}

.pc-gallery-grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.pc-gallery-grid a:hover img {
    transform: scale(1.05);
}

.pc-gallery-grid a:focus-visible {
    outline: 3px solid #2B3A2F;
    outline-offset: 3px;
}

/* Full-screen lightbox */
.pc-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 4rem 5rem;
    border: 0;
    background: rgba(10, 10, 10, 0.97);
    color: #fff;
}

.pc-lightbox::backdrop {
    background: #000;
}

.pc-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-lightbox-figure {
    width: 100%;
    margin: 0;
    text-align: center;
    pointer-events: none;
}

.pc-lightbox-figure img {
    display: block;
    max-width: 100%;
    max-height: calc(100dvh - 11rem);
    width: auto;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    pointer-events: auto;
}

.pc-lightbox-figure figcaption {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #fff;
}

.pc-lightbox button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
}

.pc-lightbox button:hover {
    background: #F1B83A;
    color: #000;
}

.pc-lightbox button:focus-visible {
    outline: 3px solid #F1B83A;
    outline-offset: 4px;
}

.pc-lightbox-close {
    top: 1rem;
    right: 1rem;
}

.pc-lightbox-prev {
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.pc-lightbox-next {
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

@media (max-width: 900px) {
    .pc-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .pc-gallery {
        padding: 3.5rem 1.5rem;
    }

    .pc-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .pc-lightbox {
        padding: 4.5rem 0.5rem 6rem;
    }

    .pc-lightbox-prev,
    .pc-lightbox-next {
        top: auto;
        bottom: 1rem;
        transform: none;
    }

    .pc-lightbox-prev {
        left: calc(50% - 60px);
    }

    .pc-lightbox-next {
        right: calc(50% - 60px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pc-gallery-grid img {
        transition: none;
    }

    .pc-gallery-grid a:hover img {
        transform: none;
    }
}

/* Wider introduction on event pages */
.play-page #about {
    max-width: 1400px;
    padding-left: 2rem;
    padding-right: 2rem;
}

.play-page #about .intro-block,
.play-page #about .intro-p {
    width: 100%;
    max-width: none;
}

/* Tokyo Weekender partner section */
.tw-partner-section {
    background: #212A37;
    color: #fff;
    padding: 5rem 2rem;
}

.tw-partner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 4rem;
}

.tw-partner-logo {
    display: block;
}

.tw-partner-logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.tw-partner-copy h2 {
    margin-bottom: 1.5rem;
    color: #fff;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.05;
}

.tw-partner-copy p {
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.75;
}

.tw-partner-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.tw-partner-links a {
    display: inline-block;
    padding: 0.9rem 1.25rem;
    border: 1px solid #fff;
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
}

.tw-partner-links a:hover {
    background: #fff;
    color: #212A37;
}

.tw-partner-section a:focus-visible {
    outline: 3px solid #F1B83A;
    outline-offset: 5px;
}

@media (max-width: 800px) {
    .tw-partner-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .tw-partner-logo {
        max-width: 320px;
    }
}

@media (max-width: 600px) {
    .tw-partner-section {
        padding: 3.5rem 1.5rem;
    }
}

/* Embassy of El Salvador partner section */
.embassy-partner-section {
    background: #F3EFE6;
    color: #202020;
    padding: 5rem 2rem;
}

.embassy-partner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
    gap: 4rem;
}

.embassy-partner-logo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.embassy-partner-copy h2 {
    margin-bottom: 1.5rem;
    color: #202020;
    font-size: clamp(2.5rem, 4vw, 4rem);
    line-height: 1.05;
}

.embassy-partner-copy p {
    margin-bottom: 1.25rem;
    color: #202020;
    font-size: 1.05rem;
    line-height: 1.75;
}

.embassy-partner-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .embassy-partner-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .embassy-partner-logo {
        max-width: 320px;
    }
}

@media (max-width: 600px) {
    .embassy-partner-section {
        padding: 3.5rem 1.5rem;
    }
}

.sat-artist-link {
    display: inline-block;
    margin-top: 0.5rem;
    color: #fff;
    font-weight: 700;
    text-underline-offset: 4px;
}

.sat-artist-link:hover {
    color: #F1B83A;
}

.partners-section {
    padding: 100px 30px;
    background: #212A37;
    color: #fff;
    text-align: center;
    border-top: none;
}

.partners-inner {
    max-width: 1600px;
    margin: 0 auto;
}

.partners-section h2 {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    margin: 0 0 25px;
}

.partners-intro {
    max-width: 1100px;
    margin: 0 auto 55px;
    font-size: 20px;
    line-height: 1.6;
    color: #fff;
}

.partners-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.partners-track-wrapper {
    overflow: hidden;
    width: 100%;
}

.partners-track {
    display: flex;
    gap: 25px;
    transition: transform 0.45s ease;
}

.partner-slide {
    flex: 0 0 calc((100% - 50px) / 3);
    display: block;
    overflow: hidden;
}

.partner-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.partners-arrow {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    border: 0;
    background: #222;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.partners-arrow:hover {
    opacity: 0.75;
}

.partners-all-button {
    display: inline-block;
    margin-top: 45px;
    padding: 17px 32px;
    background: #ff5055;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (max-width: 800px) {
    .partners-section {
        padding: 70px 20px;
    }

    .partners-intro {
        max-width: 100%;
        font-size: 18px;
        margin-bottom: 35px;
    }

    .partners-slider {
        gap: 10px;
    }

    .partner-slide {
        flex: 0 0 100%;
    }

    .partners-arrow {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
    }
}

/* BOOK GIVEAWAY */

.book-giveaway {
    background: #fff;
    color: #212A37;
    padding: 100px 40px;
}

.book-giveaway-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
    gap: 90px;
    align-items: center;
}

.book-giveaway-image {
    display: flex;
    justify-content: center;
}

.book-giveaway-image img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

.book-giveaway-copy {
    max-width: 650px;
}

.book-giveaway-eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.book-giveaway-copy h2 {
    margin: 0 0 30px;
    font-size: clamp(48px, 6vw, 82px);
    line-height: 0.95;
    color: #212A37;
}

.book-giveaway-copy p {
    margin: 0 0 20px;
    font-size: 19px;
    line-height: 1.65;
    color: #212A37;
}

.book-giveaway-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .book-giveaway {
        padding: 70px 20px;
    }

    .book-giveaway-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .book-giveaway-image img {
        max-width: 320px;
    }

    .book-giveaway-copy {
        max-width: none;
    }

    .book-giveaway-copy p {
        font-size: 17px;
    }
}

/* =========================================================
   GAME GIVEAWAY
   ========================================================= */

.game-giveaway {
    background: #fff;
    color: #212A37;
    padding: 100px 40px;
}

.game-giveaway-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, .75fr) minmax(0, 1.25fr);
    gap: 90px;
    align-items: center;
}

.game-giveaway-image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

.game-giveaway-image img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
}

.game-giveaway-copy {
    max-width: 650px;
}

.game-giveaway-eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.game-giveaway-copy h2 {
    margin: 0 0 30px;
    font-size: clamp(48px, 6vw, 82px);
    line-height: .95;
    color: #212A37;
}

.game-giveaway-copy p {
    margin: 0 0 20px;
    font-size: 19px;
    line-height: 1.65;
    color: #212A37;
}

.game-giveaway-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px) {
    .game-giveaway {
        padding: 70px 20px;
    }

    .game-giveaway-inner {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .game-giveaway-image img {
        max-width: 320px;
    }

    .game-giveaway-copy {
        max-width: none;
    }

    .game-giveaway-copy p {
        font-size: 17px;
    }
}


/* =========================================
   MOBILE HAMBURGER NAVIGATION
   ========================================= */

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 12;
}

.nav-toggle span {
    display: block;
    width: 27px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 900px) {

    .site-nav {
        z-index: 100;
        padding: 1.5rem 0;
    }

    .nav-container {
        padding: 0 1.5rem;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #212A37;
        padding: 1.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        box-shadow: 0 12px 24px rgba(0,0,0,0.2);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
    }

    .nav-links.is-open {
        display: flex !important;
    }

    .nav-links a,
    .nav-links a:not(.nav-lang-toggle),
    .nav-links a:not(:last-child) {
        display: block !important;
        margin: 0 !important;
        padding: 0.9rem 0.5rem;
        font-size: 0.95rem;
        color: #fff;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }

    .nav-links .nav-lang-toggle {
        display: block !important;
        margin-top: 0.5rem !important;
        border: 0;
        background: transparent;
    }

    /* Animate hamburger into an X */

    .nav-toggle.is-active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav-toggle.is-active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.is-active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-toggle span {
        transition: none;
    }
}