/* ========================================
   INSTITUTE OF MACHINE UNLEARNING
   Edgy, playful, non-corporate
   ======================================== */

/* CSS Variables */
:root {
    --coral: #FB5D48;
    --green: #22B43A;
    --blue: #2A66DE;
    --lavender: #A7A4F7;
    --yellow: #EDFB06;
    --black: #0A0A0A;
    --white: #FAFAFA;
    --off-white: #F5F2EB;
    --sky: #ABD2DD;
    --pink: #EF99BC;
    --magenta: #F07AD2;
    --lab-pink: #FF6AF0;

    --font-main: 'InterVariable', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* InterVariable optical sizing */
    font-feature-settings: 'liga' 1, 'calt' 1;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 8rem;

    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;
    

}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scrollbar-color: transparent transparent;
}

html.lenis, html.lenis body {
    height: auto;
}

html::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

body {
    font-family: var(--font-main);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--black);
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom cursors - white on colorful backgrounds */
.bg-coral,
.bg-green,
.bg-blue,
.bg-black,
.bg-sky,
.bg-pink,
.bg-magenta,
.bg-lab {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23FAFAFA' stroke-width='2'/%3E%3C/svg%3E") 10 10, crosshair;
}

/* Black cursor on light backgrounds */
.bg-white,
.bg-off-white,
.bg-yellow,
.bg-metalabel,
.bg-lavender {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E") 10 10, crosshair;
}

/* Pointer cursor - coral dot default */
a, button, .action-card, .workshop-card, .event-card, .filter-btn, .syllabus-preview-card {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FB5D48'/%3E%3C/svg%3E") 10 10, pointer;
}

/* Nav bar cursor - green default */
.nav a, .nav button, .nav-toggle, .nav-logo, .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%2322B43A'/%3E%3C/svg%3E") 10 10, pointer;
}

/* Cursor overrides to ensure visibility on matching backgrounds */
/* On coral bg - use green cursor everywhere */
.bg-coral a,
.bg-coral button,
.bg-coral .action-card,
.bg-coral .workshop-card,
.bg-coral .event-card,
.bg-coral .nav a,
.bg-coral .nav button,
.bg-coral .nav-toggle,
.bg-coral .nav-logo,
.bg-coral .nav-link,
.bg-coral .mobile-menu a,
.bg-coral .mobile-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%2322B43A'/%3E%3C/svg%3E") 10 10, pointer !important;
}

/* On green bg - use coral cursor everywhere */
.bg-green a,
.bg-green button,
.bg-green .action-card,
.bg-green .workshop-card,
.bg-green .event-card,
.bg-green .nav a,
.bg-green .nav button,
.bg-green .nav-toggle,
.bg-green .nav-logo,
.bg-green .nav-link,
.bg-green .mobile-menu a,
.bg-green .mobile-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FB5D48'/%3E%3C/svg%3E") 10 10, pointer !important;
}

/* On blue bg - use coral cursor */
.bg-blue a, .bg-blue button, .bg-blue .action-card, .bg-blue .workshop-card, .bg-blue .event-card {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FB5D48'/%3E%3C/svg%3E") 10 10, pointer;
}
.bg-blue .nav a, .bg-blue .nav button, .bg-blue .nav-toggle, .bg-blue .nav-logo, .bg-blue .nav-link {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%2322B43A'/%3E%3C/svg%3E") 10 10, pointer;
}

/* On pink/magenta bg - use green cursor */
.bg-pink a, .bg-pink button, .bg-magenta a, .bg-magenta button, .bg-lab a, .bg-lab button {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%2322B43A'/%3E%3C/svg%3E") 10 10, pointer;
}

/* On yellow/lavender (light bg) - use coral cursor */
.bg-yellow a, .bg-yellow button, .bg-metalabel a, .bg-metalabel button, .bg-lavender a, .bg-lavender button {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FB5D48'/%3E%3C/svg%3E") 10 10, pointer;
}

/* On sky bg - use coral cursor */
.bg-sky a, .bg-sky button, .bg-sky .action-card, .bg-sky .publication-card {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FB5D48'/%3E%3C/svg%3E") 10 10, pointer;
}

/* Background Colors - ensuring good contrast */
.bg-coral { background-color: var(--coral); color: var(--white); }
.bg-green { background-color: var(--green); color: var(--white); }
.bg-blue { background-color: var(--blue); color: var(--white); }
.bg-lavender { background-color: var(--lavender); color: var(--white); }
.bg-yellow { background-color: var(--yellow); color: var(--black); }
.bg-metalabel { background-color: #F7F774; color: var(--black); }
.bg-black { background-color: var(--black); color: var(--white); }
.bg-white { background-color: var(--white); color: var(--black); }
.bg-off-white { background-color: var(--off-white); color: var(--black); }
.bg-sky { background-color: var(--sky); color: var(--white); }
.bg-pink { background-color: var(--pink); color: var(--white); }
.bg-magenta { background-color: var(--magenta); color: var(--white); }
.bg-lab { background-color: var(--lab-pink); color: var(--white); }

/* Gradient transitions from page color to white/off-white - smooth fade */
.gradient-from-coral {
    background: linear-gradient(180deg, var(--coral) 0%, var(--coral) 10%, var(--off-white) 34%, var(--off-white) 100%);
    color: var(--black);
}
.gradient-from-green {
    background: linear-gradient(180deg, var(--green) 0%, var(--green) 8%, var(--off-white) 30%, var(--off-white) 100%);
    color: var(--black);
}

/* Index-only counter-syllabus transition (earlier + shorter) */
.gradient-from-green-index {
    background: linear-gradient(180deg, var(--green) 0%, var(--green) 2%, var(--off-white) 20%, var(--off-white) 100%);
}

.gradient-from-green-events {
    background: linear-gradient(180deg, var(--green) 0%, var(--green) 2%, var(--off-white) 20%, var(--off-white) 100%);
}
.gradient-from-blue {
    background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 8%, var(--off-white) 35%, var(--off-white) 100%);
    color: var(--black);
}
.gradient-from-yellow {
    background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow) 6%, var(--off-white) 18%, var(--off-white) 100%);
    color: var(--black);
}
.gradient-from-lavender {
    background: linear-gradient(180deg, var(--lavender) 0%, var(--lavender) 6%, var(--white) 15%, var(--white) 100%);
    color: var(--black);
}

.gradient-from-lavender-origin {
    background: linear-gradient(180deg, var(--lavender) 0%, var(--lavender) 2%, #f0efff 6.5%, var(--white) 11%, var(--white) 100%);
    color: var(--black);
}
.gradient-from-sky {
    background: linear-gradient(180deg, var(--sky) 0%, var(--sky) 8%, var(--off-white) 35%, var(--off-white) 100%);
    color: var(--black);
}

.gradient-from-lab {
    background: linear-gradient(180deg, var(--lab-pink) 0%, var(--lab-pink) 12%, #ffc9f8 30%, #f3e9f1 48%, #f3e9f1 100%);
    color: var(--black);
}

.gradient-from-coral,
.gradient-from-green,
.gradient-from-blue,
.gradient-from-yellow,
.gradient-from-lavender,
.gradient-from-lavender-origin,
.gradient-from-sky,
.gradient-from-lab {
    background-size: 112% 150%;
    background-position: 50% 0%;
}



/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-regular);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ========================================
   NAVIGATION
   ======================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--white);
    transition: background-color var(--transition-medium), color var(--transition-medium);
}

.nav a,
.nav-logo,
.nav-link {
    color: inherit;
}

/* Nav on light backgrounds */
.nav.nav-light {
    color: var(--black);
}

.nav.nav-light .nav-logo,
.nav.nav-light .nav-link {
    color: var(--black);
}


.nav-logo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
}

.nav.scrolled .nav-logo {
    opacity: 1;
    pointer-events: all;
}

.nav-links {
    display: flex;
    gap: var(--space-md);
}

.nav-link {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    position: relative;
    padding: var(--space-xs) 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5 Q4 0 8 5 Q12 10 15 5 Q18 0 22 6 Q26 10 30 4' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 20px 10px;
    transition: width var(--transition-medium);
}

.nav-link:hover::after {
    width: 100%;
}

/* Invert squiggle for dark backgrounds */
.bg-coral .nav-link::after,
.bg-green .nav-link::after,
.bg-blue .nav-link::after,
.bg-black .nav-link::after,
.bg-lavender .nav-link::after,
.bg-sky .nav-link::after,
.bg-pink .nav-link::after,
.bg-magenta .nav-link::after,
.bg-lab .nav-link::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 10'%3E%3Cpath d='M0 5 Q4 0 8 5 Q12 10 15 5 Q18 0 22 6 Q26 10 30 4' stroke='%23F5F2EB' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--space-xs);
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 3px;
    background: currentColor;
    transition: var(--transition-fast);
}

/* Nav colors controlled by JS via nav-light class */
/* White text is default, nav-light adds black text for yellow backgrounds */


/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: var(--space-lg);
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
}

.mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

.mobile-link {
    font-size: clamp(2.5rem, 10vw, 4rem);
    font-weight: var(--font-weight-regular);
    color: inherit;
    letter-spacing: -0.06em;
    line-height: 1.1;
    padding: var(--space-xs) 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    transition: var(--transition-fast);
}

.mobile-link:nth-child(odd) {
    font-style: normal;
}

.mobile-link:hover,
.mobile-link.active {
    opacity: 0.5;
}

/* ========================================
   MAIN CONTENT
   ======================================== */
.main {
    padding-top: 80px;
}

/* Hero Section */
.hero {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-lg) var(--space-md);
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '↓';
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    opacity: 0.3;
    animation: subtle-bounce 2s ease-in-out infinite;
}

.hero-content {
    max-width: 900px;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(3rem, 12vw, 10rem);
    font-weight: var(--font-weight-regular);
    line-height: 0.9;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
}

.hero-title em {
    font-style: italic;
    font-weight: inherit;
    letter-spacing: -0.01em;
    margin-left: -0.01em;
    margin-right: -0.01em;
}

.title-line {
    display: block;
}

.hero-tagline {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    max-width: 600px;
    margin-bottom: var(--space-sm);
    margin-left: 0.5rem;
    font-weight: var(--font-weight-medium);
}

.hero-sub {
    font-size: 1rem;
    font-style: italic;
    margin-left: 0.5rem;
    opacity: 0.8;
}

/* Hero Confetti */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.confetti {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: fish-swim 8s ease-in-out infinite;
    will-change: left, top;
}

/* Fish-like swimming animations */
@keyframes fish-swim {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
    }
    10% {
        transform: translateX(12px) translateY(-8px) scale(1.02);
    }
    20% {
        transform: translateX(20px) translateY(-3px) scale(1);
    }
    30% {
        transform: translateX(15px) translateY(10px) scale(0.98);
    }
    40% {
        transform: translateX(5px) translateY(15px) scale(1);
    }
    50% {
        transform: translateX(-10px) translateY(8px) scale(1.02);
    }
    60% {
        transform: translateX(-18px) translateY(-5px) scale(1);
    }
    70% {
        transform: translateX(-12px) translateY(-15px) scale(0.98);
    }
    80% {
        transform: translateX(-5px) translateY(-10px) scale(1);
    }
    90% {
        transform: translateX(5px) translateY(-5px) scale(1.01);
    }
}

@keyframes fish-wander {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    15% {
        transform: translateX(-25px) translateY(15px);
    }
    30% {
        transform: translateX(-15px) translateY(30px);
    }
    45% {
        transform: translateX(20px) translateY(20px);
    }
    60% {
        transform: translateX(35px) translateY(-10px);
    }
    75% {
        transform: translateX(15px) translateY(-25px);
    }
    90% {
        transform: translateX(-10px) translateY(-15px);
    }
}

@keyframes fish-drift {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(1);
    }
    25% {
        transform: translateX(30px) translateY(-20px) scale(1.03);
    }
    50% {
        transform: translateX(-20px) translateY(-35px) scale(0.97);
    }
    75% {
        transform: translateX(-30px) translateY(10px) scale(1.02);
    }
}

@keyframes fish-lazy {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(15px) translateY(-10px);
    }
}

/* Intro Grid */
.intro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--black);
    margin: var(--space-lg) 0;
}

.grid-item {
    background: var(--off-white);
    padding: var(--space-lg) var(--space-md);
}

.grid-label {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-sm);
    color: var(--coral);
}

.grid-item p {
    font-size: 1.25rem;
    line-height: 1.4;
}


/* Section Styles */
.section-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: var(--font-weight-regular);
    line-height: 0.9;
    letter-spacing: -0.06em;
    margin-bottom: var(--space-md);
}

.section-intro {
    font-size: 1.125rem;
    max-width: 700px;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.section-intro--centered {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Utility classes */
.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.justify-center { justify-content: center; }

.section-link {
    display: inline-block;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
    padding: var(--space-sm) 0;
    border-bottom: 2px solid currentColor;
    transition: var(--transition-fast);
}

.section-link:hover {
    opacity: 0.7;
}

/* Featured Event */
.featured-section {
    padding: var(--space-xl) var(--space-md);
    background: var(--green);
    color: var(--white);
}

.featured-section .section-title {
    margin-bottom: var(--space-md);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: -0.04em;
}

.featured-event {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: var(--space-md);
}

.featured-event[data-href] {
    cursor: pointer;
    transition: background 0.2s ease;
}

.featured-event[data-href]:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* On gradient (light) backgrounds, use dark tint for hover */
.gradient-from-green .featured-event[data-href]:hover,
.gradient-from-coral .featured-event[data-href]:hover,
.gradient-from-blue .featured-event[data-href]:hover,
.gradient-from-sky .featured-event[data-href]:hover,
.gradient-from-lavender .featured-event[data-href]:hover {
    background: rgba(0, 0, 0, 0.04);
}

.featured-section .section-link {
    display: inline-block;
    color: var(--off-white);
}

.featured-section .section-link-wrapper {
    text-align: center;
}

.event-date {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    width: 280px;
    justify-content: flex-start;
}

.date-emoji {
    font-size: clamp(1.25rem, 3vw, 2rem);
}

.date-text {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-style: italic;
    letter-spacing: 0.01em;
    white-space: nowrap;
    width: 220px;
    display: inline-block;
}

.event-info {
    flex: 1;
    padding-left: var(--space-lg);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.event-type {
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: var(--space-xs);
}

.event-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin-bottom: var(--space-xs);
}

.event-location {
    font-size: 0.875rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.event-location .location-emoji {
    font-size: 1em;
}


.event-cta {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    color: var(--off-white);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.event-cta:hover {
    background: var(--off-white);
    color: var(--green);
    border-color: var(--off-white);
}

/* Horizontal Event Cards - for events page */
.events-horizontal {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* Gradient sections fade to off-white — use dark cursor */
.gradient-from-green,
.gradient-from-coral,
.gradient-from-blue,
.gradient-from-sky,
.gradient-from-lavender {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E") 10 10, crosshair;
}

.gradient-from-green a,
.gradient-from-green button,
.gradient-from-green .featured-event[data-href],
.gradient-from-coral a,
.gradient-from-coral button,
.gradient-from-coral .featured-event[data-href],
.gradient-from-blue a,
.gradient-from-blue button,
.gradient-from-blue .featured-event[data-href],
.gradient-from-sky a,
.gradient-from-sky button,
.gradient-from-sky .featured-event[data-href],
.gradient-from-lavender a,
.gradient-from-lavender button,
.gradient-from-lavender .featured-event[data-href] {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%23FB5D48'/%3E%3C/svg%3E") 10 10, pointer;
}

/* Black borders for events on gradient backgrounds */
.gradient-from-green .featured-event,
.gradient-from-coral .featured-event,
.gradient-from-blue .featured-event,
.gradient-from-sky .featured-event,
.gradient-from-lavender .featured-event {
    border-color: var(--black);
}

.gradient-from-green .event-info,
.gradient-from-coral .event-info,
.gradient-from-blue .event-info,
.gradient-from-sky .event-info,
.gradient-from-lavender .event-info {
    border-left-color: rgba(0, 0, 0, 0.3);
    border-top-color: rgba(0, 0, 0, 0.3);
}

/* Centered Event Cards - for events page */
.events-centered {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.event-centered-card {
    text-align: center;
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.event-centered-card .event-date {
    justify-content: center;
    width: 100%;
    margin-bottom: var(--space-sm);
}

.event-centered-card .event-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: var(--space-md) 0;
}

.event-centered-card .event-title {
    margin-bottom: var(--space-xs);
}

.event-centered-card .event-location {
    justify-content: center;
}

/* Dark background adjustments for centered cards */
.bg-coral .event-centered-card,
.bg-green .event-centered-card,
.bg-blue .event-centered-card {
    border-color: rgba(255, 255, 255, 0.3);
}

.bg-coral .event-centered-card .event-divider,
.bg-green .event-centered-card .event-divider,
.bg-blue .event-centered-card .event-divider {
    background: rgba(255, 255, 255, 0.2);
}

/* Light background adjustments */
.bg-off-white .event-centered-card,
.bg-lavender .event-centered-card,
.bg-yellow .event-centered-card {
    border-color: rgba(0, 0, 0, 0.15);
}

.bg-off-white .event-centered-card .event-divider,
.bg-lavender .event-centered-card .event-divider,
.bg-yellow .event-centered-card .event-divider {
    background: rgba(0, 0, 0, 0.1);
}

/* Gradient backgrounds */
.gradient-from-green .event-centered-card,
.gradient-from-coral .event-centered-card,
.gradient-from-blue .event-centered-card {
    border-color: rgba(0, 0, 0, 0.15);
}

.gradient-from-green .event-centered-card .event-divider,
.gradient-from-coral .event-centered-card .event-divider,
.gradient-from-blue .event-centered-card .event-divider {
    background: rgba(0, 0, 0, 0.1);
}

/* Workshop Cards */
.workshops-preview {
    padding: var(--space-xl) var(--space-md);
    background: var(--black);
    color: var(--white);
}

.workshops-header {
    max-width: 600px;
    margin-bottom: var(--space-lg);
}

.workshops-preview .section-intro {
    color: var(--off-white);
    opacity: 0.8;
}

.workshops-preview .section-link {
    color: var(--off-white);
    border-color: var(--off-white);
}

.workshop-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    margin-bottom: var(--space-lg);
}

.workshop-card {
    position: relative;
    padding: var(--space-lg) var(--space-md);
    transition: var(--transition-fast);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

.workshop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    opacity: 0;
    transition: var(--transition-fast);
    z-index: 1;
}

.workshop-card:hover::before {
    opacity: 0.15;
}

.workshop-card:hover {
    transform: scale(1.02);
    z-index: 2;
}

.workshop-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: lowercase;
    padding: 0.25em 0.6em;
    border: 1px solid currentColor;
    opacity: 0.7;
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 2;
}

.workshop-card h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: var(--space-xs);
    position: relative;
    z-index: 2;
}

.workshop-card p {
    font-size: 0.875rem;
    opacity: 0.7;
    position: relative;
    z-index: 2;
}

.workshop-card .workshop-arrow {
    margin-top: auto;
    font-size: 1.5rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--transition-fast);
    position: relative;
    z-index: 2;
}

.workshop-card:hover .workshop-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Card color variants */
.workshop-card--coral {
    background: var(--coral);
    color: var(--white);
}

.workshop-card--lavender {
    background: var(--lavender);
    color: var(--off-white);
}

.workshop-card--yellow {
    background: var(--yellow);
    color: var(--black);
}

.workshop-card--green {
    background: var(--green);
    color: var(--white);
}

.workshop-card--blue {
    background: var(--blue);
    color: var(--white);
}

/* CTA Section */
.cta-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--space-xl) var(--space-md);
    background: var(--lavender);
    color: var(--white);
    text-align: center;
}

.cta-section--soft {
    background: var(--lavender);
    color: var(--white);
    overflow-y: visible;
    overflow-x: clip;
}

.cta-section--soft::before {
    background: radial-gradient(circle,
        rgba(251, 93, 72, 0.14) 0%,
        rgba(167, 164, 247, 0.12) 34%,
        rgba(250, 250, 250, 0.1) 58%,
        rgba(250, 250, 250, 0) 100%);
}

.cta-section--soft .cta-content {
    padding-bottom: 0;
}

.cta-flag-sticker {
    position: absolute;
    right: clamp(-92px, -9vw, -28px);
    bottom: -64px;
    width: clamp(250px, 36vw, 390px);
    height: auto;
    transform: translate(15%, 27%);
    pointer-events: none;
}

.cta-section::before {
    content: "";
    position: absolute;
    width: min(70vw, 760px);
    height: min(70vw, 760px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.48;
    background: radial-gradient(circle,
        rgba(237, 251, 6, 0.18) 0%,
        rgba(250, 250, 250, 0.17) 32%,
        rgba(239, 153, 188, 0.08) 58%,
        rgba(250, 250, 250, 0) 100%);
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: var(--font-weight-regular);
    line-height: 0.95;
    letter-spacing: -0.04em;
    margin-bottom: var(--space-md);
}

.cta-title-image {
    width: 100%;
    max-width: 360px;
    height: auto;
    display: block;
    margin: 0 auto var(--space-md);
}

.cta-content p {
    font-size: 1.125rem;
    margin-bottom: var(--space-lg);
    opacity: 0.8;
}

.cta-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.cta-content .btn {
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
    border: 1px solid currentColor;
    background: transparent;
    transition: var(--transition-fast);
    cursor: pointer;
}

/* Dark button - for use on light backgrounds */
.btn-dark {
    color: var(--black);
    border-color: var(--black);
}

.btn-dark:hover {
    background: var(--black);
    color: var(--off-white);
}

/* Light button - for use on dark backgrounds */
.btn-light {
    color: var(--off-white);
    border-color: var(--off-white);
}

.btn-light:hover {
    background: var(--off-white);
    color: var(--black);
}

/* Button in content sections - add top margin */
.content-section .btn,
.content-narrow .btn {
    display: block;
    width: fit-content;
    margin: var(--space-md) auto 0;
}

/* ========================================
   FOOTER
   ======================================== */
.footer {
    position: relative;
    z-index: 3;
    background: var(--coral);
    color: var(--white);
    padding: var(--space-lg) var(--space-md);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.footer-logo {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.03em;
    line-height: 1;
}

.footer-logo em {
    font-style: italic;
}

.footer-tagline {
    font-size: 0.8125rem;
    opacity: 0.7;
    margin-top: var(--space-xs);
}

.footer-email {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-style: italic;
    font-size: 0.875rem;
    opacity: 0.8;
}

.footer-email a {
    transition: var(--transition-fast);
}

.footer-email a:hover {
    opacity: 0.6;
}

.footer-links {
    display: flex;
    gap: var(--space-md);
}

.footer-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: var(--transition-fast);
}

.footer-links a:hover {
    opacity: 1;
}

.footer-bottom {
    display: none;
}

.footer-tagline {
    font-size: 0.8125rem;
    opacity: 0.7;
    max-width: 400px;
    line-height: 1.5;
}

.footer-contact a {
    font-size: 0.8125rem;
    opacity: 0.8;
    transition: var(--transition-fast);
}

.footer-contact a:hover {
    opacity: 1;
}

/* ========================================
   PAGE-SPECIFIC STYLES
   ======================================== */

/* Page Hero */
.page-hero {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--space-lg);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    padding-bottom: var(--space-lg);
    position: relative;
}

.page-hero::after {
    content: '↓';
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    opacity: 0.3;
    animation: subtle-bounce 2s ease-in-out infinite;
}

@keyframes subtle-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
}

.page-title {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.06em;
    line-height: 0.9;
    max-width: 1000px;
}

/* Counter-syllabus page title uses InterVariable */
.bg-yellow .page-title {
    font-family: var(--font-main);
}

.page-subtitle {
    font-size: 1.25rem;
    margin-top: var(--space-md);
    max-width: 600px;
    opacity: 0.9;
}

/* Content Blocks */
.content-section {
    padding: var(--space-xl) var(--space-md);
}

.content-narrow {
    max-width: 700px;
    margin: 0 auto;
}

.content-wide {
    max-width: 1200px;
    margin: 0 auto;
}

.prose {
    font-size: 1.125rem;
    line-height: 1.8;
}

.prose p {
    margin-bottom: var(--space-md);
}

.content-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: var(--space-lg) 0;
    display: block;
}

.origin-inline-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: var(--space-sm) auto var(--space-lg);
    display: block;
}

.origin-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin: var(--space-md) 0 var(--space-lg);
}

.origin-reference-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.origin-reference-grid--workshops {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.origin-reference-grid--workshops .origin-reference--wide {
    grid-column: 1 / -1;
}

.origin-reference-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
}

.origin-reference {
    margin: 0;
}

.origin-reference img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.origin-reference figcaption {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0.72;
}

.origin-flow-image {
    width: min(46%, 320px);
    margin: 0 0 var(--space-md);
}

.origin-flow-image--left {
    float: left;
    margin-right: var(--space-md);
    margin-left: -72px;
}

.origin-flow-image--right {
    float: right;
    margin-left: var(--space-md);
    margin-right: -72px;
}

.origin-flow-image img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.origin-flow-image figcaption {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.35;
    opacity: 0.72;
}

.origin-flow-clear {
    clear: both;
}

@media (max-width: 1200px) {
    .origin-flow-image--left {
        margin-left: -40px;
    }

    .origin-flow-image--right {
        margin-right: -40px;
    }
}

.origin-side-note {
    width: 170px;
}

.origin-side-note--pink {
    width: 220px;
}

.origin-side-stack {
    display: grid;
    gap: 0.45rem;
}

/* Margin notes / references */
.ref {
    font-size: 0.7em;
    color: rgba(0, 0, 0, 0.7);
    margin-left: 2px;
}

.ref--splash {
    color: var(--coral);
}

.margin-note {
    position: absolute;
    right: -180px;
    width: 150px;
    font-size: 0.75rem;
    text-align: left;
}

.margin-note-ref {
    display: block;
    font-size: 0.7rem;
    color: rgba(0, 0, 0, 0.7);
    margin-bottom: var(--space-xs);
}

.margin-note-ref--line {
    line-height: 1.35;
}

.margin-note-ref--line a {
    text-decoration: underline;
}

.margin-note--splash .margin-note-ref {
    color: var(--coral);
}

.margin-note--splash .margin-note-ref--line {
    margin-top: 0.3rem;
    margin-bottom: 0;
}

.margin-note-image {
    width: 100%;
    height: auto;
    opacity: 0.9;
}

.content-narrow {
    position: relative;
}

@media (max-width: 1100px) {
    .margin-note {
        position: static;
        width: 120px;
        margin: var(--space-sm) 0;
    }

    .origin-reference-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .origin-reference-grid,
    .origin-reference-grid--three,
    .origin-reference-grid--single {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    .origin-flow-image,
    .origin-flow-image--left,
    .origin-flow-image--right {
        float: none;
        width: 100%;
        max-width: none;
        margin: 0 0 var(--space-sm);
    }

    .cta-section--soft .cta-content {
        padding-bottom: 0;
    }

    .cta-flag-sticker {
        right: -18px;
        width: min(46vw, 190px);
        bottom: -72px;
        transform: translate(-3%, -20%);
    }

    .origin-side-note--pink {
        width: 100%;
        margin: 0 0 var(--space-md);
    }

    .origin-side-note--pink .margin-note-ref {
        display: none;
    }

    .origin-side-note--pink .margin-note-image {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        display: block;
    }

}

.prose h2 {
    font-size: 2rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.06em;
    line-height: 0.9;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}

.prose h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

/* Image Block */
.image-block {
    margin: var(--space-lg) 0;
}

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

.image-caption {
    font-size: 0.875rem;
    margin-top: var(--space-sm);
    opacity: 0.7;
    font-style: italic;
}

/* Quote Block */
.quote-block {
    margin: var(--space-lg) 0;
    padding: 0;
    background: transparent;
}

.quote-text {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-style: italic;
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.quote-text::before {
    content: '"';
}

.quote-text::after {
    content: '"';
}

.quote-author {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-top: var(--space-sm);
}

/* Quote color variants */
.quote-block--coral .quote-text { color: var(--coral); }
.quote-block--green .quote-text { color: var(--green); }
.quote-block--blue .quote-text { color: var(--blue); }
.quote-block--lavender .quote-text { color: var(--lavender); }

/* Signature */
.signature {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-style: italic;
    color: var(--coral);
    margin-top: var(--space-lg);
}

/* Workshop Filters */
.workshop-filters {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.filter-btn {
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-main);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--black);
    background: transparent;
    border: 2px solid var(--black);
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--black);
    color: var(--white);
}

/* Workshop List - old styles kept for reference */

.workshop-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--white);
    transition: var(--transition-fast);
}

.workshop-item:hover {
    background: var(--off-white);
}

.workshop-icon {
    font-size: 2rem;
    width: 60px;
    text-align: center;
}

.workshop-details h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
}

.workshop-details p {
    font-size: 0.875rem;
    opacity: 0.7;
}

.workshop-type {
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-xs) var(--space-sm);
    background: var(--off-white);
}

.workshop-arrow {
    font-size: 1.5rem;
    opacity: 0.3;
    transition: var(--transition-fast);
}

.workshop-item:hover .workshop-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Events List */
.events-list {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-lg);
}

.event-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: none;
    background: transparent;
    transition: var(--transition-fast);
}

.event-card:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.bg-coral .event-card,
.bg-green .event-card,
.bg-black .event-card {
    border-color: rgba(255, 255, 255, 0.3);
    border-bottom: none;
}

.bg-coral .event-card:last-child,
.bg-green .event-card:last-child,
.bg-black .event-card:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}


.event-card.past {
    opacity: 0.85;
    border: none;
}

/* All event cards - consistent style without divider */
.event-card .event-info {
    border-left: none;
    padding-left: var(--space-md);
}

.bg-off-white .event-card .event-title {
    color: var(--black);
}

.bg-off-white .event-card .event-location {
    color: var(--black);
}

/* Syllabus Cards - matching event card style */
.workshop-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.syllabus-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: transparent;
    transition: var(--transition-fast);
}

.syllabus-card:hover {
    background: rgba(0, 0, 0, 0.03);
}

.syllabus-icon {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    flex-shrink: 0;
}

.syllabus-info {
    flex: 1;
}

.syllabus-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.04em;
    line-height: 1.1;
    margin-bottom: var(--space-xs);
    color: var(--black);
}

.syllabus-desc {
    font-size: 0.9375rem;
    opacity: 0.7;
    line-height: 1.5;
    color: var(--black);
}

/* Syllabus cards on dark background (main page) - horizontal grid */
.syllabus-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.syllabus-card-dark {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: transparent;
    transition: var(--transition-fast);
}

.syllabus-card-dark:hover {
    background: rgba(255, 255, 255, 0.05);
}

.syllabus-card-dark .syllabus-icon {
    font-size: 1.5rem;
}

.syllabus-card-dark .syllabus-title {
    color: var(--off-white);
    font-size: 1.125rem;
}

.syllabus-card-dark .syllabus-desc {
    color: var(--off-white);
    opacity: 0.6;
    font-size: 0.875rem;
}

.event-status {
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-xs) var(--space-sm);
    align-self: start;
}

.event-status.upcoming {
    background: var(--green);
}

.event-status.past {
    background: var(--off-white);
}

/* Publications */
.publications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 400px));
    gap: var(--space-lg);
    justify-content: center;
}

.publication-card {
    border: 2px solid var(--black);
    transition: var(--transition-fast);
}

.publication-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--black);
}

.publication-image {
    aspect-ratio: 1;
    background: var(--off-white);
    overflow: hidden;
}

.publication-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.publication-info {
    padding: var(--space-md);
}

.publication-info h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
}

.publication-info p {
    font-size: 0.875rem;
    opacity: 0.7;
    margin-bottom: var(--space-sm);
}

.publication-link {
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.02em;
}

.metalabel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: var(--space-sm);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.metalabel-badge img {
    width: 2rem;
    height: 2rem;
    display: block;
    border-radius: 999px;
}

/* Lab page */
.lab-page .page-title,
.lab-page .page-subtitle {
    color: var(--white);
}

.lab-page {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%230A0A0A' stroke-width='2'/%3E%3C/svg%3E") 10 10, crosshair;
}

.lab-page a,
.lab-page button,
.lab-page .lab-app-card,
.lab-page .publication-link,
.lab-page .btn {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='%2322B43A'/%3E%3C/svg%3E") 10 10, pointer;
}

.lab-intro-section {
    padding-bottom: var(--space-sm);
}

.lab-intro-section .section-title {
    margin-bottom: var(--space-xs);
}

.lab-intro-section .section-intro {
    margin-bottom: var(--space-sm);
}

.lab-apps-section {
    padding-top: var(--space-md);
    background: #f3e9f1;
    color: var(--black);
}

/* Lab app cards */
.lab-apps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: var(--space-md);
}

.lab-app-card {
    border: 2px solid var(--black);
    background: #f4e6ef;
    transition: var(--transition-fast);
}

.lab-app-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--black);
}

.lab-app-card.is-locked {
    opacity: 0.8;
}

.lab-app-card.is-locked:hover {
    transform: none;
    box-shadow: none;
}

.lab-app-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 2px solid var(--black);
    background: #ecdee8;
}

.lab-app-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-medium);
}

.lab-app-card:hover .lab-app-thumb img {
    transform: scale(1.03);
}

.lab-app-card.is-locked .lab-app-thumb img {
    transform: none;
    filter: saturate(0.75) contrast(0.95);
}

.lab-app-info {
    padding: var(--space-md);
}

.lab-app-info h3 {
    font-size: 1.2rem;
    margin-bottom: var(--space-xs);
}

.lab-coming-soon {
    display: inline-block;
    padding: 0.22rem 0.58rem;
    border: 1px solid var(--black);
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--lab-pink);
}

.lab-app-thumb .lab-coming-soon {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    margin: 0;
}

.lab-app-info p {
    font-size: 0.875rem;
    opacity: 0.75;
    margin-bottom: var(--space-sm);
}

.lab-release-meta {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    opacity: 0.9;
}

.lab-release-status {
    font-weight: var(--font-weight-medium);
}

.lab-release-timer {
    font-weight: var(--font-weight-bold);
}

.lab-cta {
    background: linear-gradient(180deg, #f56be7 0%, #df4fd0 100%);
}

/* Contact Form */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.contact-info h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.06em;
    line-height: 0.95;
    margin-bottom: var(--space-md);
}

.contact-info p {
    font-size: 1rem;
    margin-bottom: var(--space-md);
}

.contact-links-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.contact-link-item {
    display: block;
    padding: var(--space-sm);
    transition: var(--transition-fast);
}

.contact-link-item:hover {
    opacity: 0.85;
    transform: translateX(4px);
}

/* Newsletter form */
.newsletter-form {
    padding: var(--space-lg);
}

.newsletter-form h3 {
    margin-bottom: var(--space-md);
}

.newsletter-form > p {
    margin-bottom: var(--space-lg);
    opacity: 0.8;
}

.form-note {
    margin-top: var(--space-md);
    font-size: 0.75rem;
    opacity: 0.6;
}

.form-note a {
    text-decoration: underline;
}

/* Prose list */
.prose-list {
    margin: var(--space-md) 0;
    padding-left: var(--space-md);
}

/* Flags inline */
.flags-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.flag-item {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    transition: var(--transition-fast);
}

.flag-item:hover {
    transform: scale(1.15);
}

/* Venue tags */
.venue-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.venue-tag {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid currentColor;
    font-size: 0.875rem;
    transition: var(--transition-fast);
}

a.venue-tag:hover {
    background: var(--off-white);
    color: var(--black);
}

/* Action Cards - Join page */
.content-section:has(.action-cards) {
    padding-top: var(--space-lg);
}

.action-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    padding-top: 10rem;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
    aspect-ratio: 1;
    text-decoration: none;
    border: 2px solid var(--black);
    transition: var(--transition-fast);
    justify-content: flex-start;
}

.action-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--black);
}

.action-emoji {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.action-title {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: var(--font-weight-medium);
    font-style: italic;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: var(--space-xs);
}

.action-desc {
    font-size: 0.8125rem;
    opacity: 0.8;
    line-height: 1.4;
    flex: 1;
}

.action-cta {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin-top: auto;
    padding-top: var(--space-sm);
}

/* Syllabus Preview Cards */
.syllabus-preview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.syllabus-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-md);
    aspect-ratio: 1;
    text-decoration: none;
    border: 2px solid var(--black);
    transition: var(--transition-fast);
    justify-content: flex-start;
}

.syllabus-preview-card:hover {
    transform: translateY(-4px);
    box-shadow: 8px 8px 0 var(--black);
}

.syllabus-preview-card--disabled {
    position: relative;
    cursor: default;
}

.syllabus-preview-card--disabled::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    transition: var(--transition-fast);
    pointer-events: none;
}

.syllabus-preview-card--disabled:hover::after {
    background: rgba(255, 255, 255, 0);
}

.syllabus-preview-card--disabled:hover {
    transform: none;
    box-shadow: none;
}

.card-badge {
    font-family: var(--font-main);
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--black);
    color: var(--white);
    padding: 3px 10px;
    border-radius: 2px;
    margin-top: auto;
}

.syllabus-preview-card .action-title {
    font-family: var(--font-main);
    font-style: normal;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    letter-spacing: -0.06em;
    line-height: 1.4;
}

/* Form Styles */
.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: var(--space-sm);
    font-family: var(--font-main);
    font-size: 1rem;
    border: 2px solid currentColor;
    background: transparent;
    color: inherit;
    transition: var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    background: rgba(255,255,255,0.1);
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

/* ========================================
   MODULAR GRID (Reference Image Style)
   ======================================== */
.modular-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 4px;
}

.modular-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
}

.modular-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cell-magenta { background: var(--magenta); }
.cell-green { background: var(--green); }
.cell-coral { background: var(--coral); }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .featured-event {
        flex-direction: column;
        text-align: center;
        gap: var(--space-md);
    }

    .event-date {
        flex-direction: row;
        gap: var(--space-sm);
        justify-content: center;
    }

    .event-info {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: var(--space-md);
    }

    .gradient-from-green .event-info,
    .gradient-from-coral .event-info,
    .gradient-from-blue .event-info,
    .gradient-from-sky .event-info,
    .gradient-from-lavender .event-info {
        border-top-color: rgba(0, 0, 0, 0.3);
    }

    .event-location {
        justify-content: center;
    }

    .featured-section .section-link {
        text-align: center;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --space-lg: 2.5rem;
        --space-xl: 4rem;
    }

    /* Main content padding adjustment */
    .main {
        padding-top: 60px;
    }

    /* Navigation */
    .nav {
        padding: var(--space-sm);
    }

    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: flex;
        padding: 12px;
        margin: -12px;
    }

    .nav-toggle span {
        width: 22px;
        height: 2px;
    }

    /* Mobile menu improvements */
    .mobile-menu {
        padding: var(--space-xl) var(--space-md);
    }

    .mobile-link {
        font-size: 1.5rem;
        padding: var(--space-sm) 0;
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    /* Hero */
    .hero {
        min-height: calc(100vh - 60px);
        padding: var(--space-md);
        justify-content: flex-start;
        padding-top: 15vh;
    }

    .hero-content {
        text-align: center;
        margin: 0 auto;
    }

    .hero-title {
        font-size: clamp(2.5rem, 14vw, 5rem);
        margin-bottom: var(--space-md);
        line-height: 0.9;
    }

    .hero-tagline {
        font-size: 1.1rem;
        line-height: 1.4;
        margin-left: 0;
        margin-top: var(--space-sm);
    }

    .hero-sub {
        font-size: 0.875rem;
    }

    /* Page hero - don't need full height on mobile */
    .page-hero {
        min-height: auto;
        padding-top: calc(60px + var(--space-lg));
        padding-bottom: var(--space-xl);
    }

    .page-hero::after {
        display: none;
    }

    .page-title {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .page-subtitle {
        font-size: 1rem;
    }

    /* Featured section */
    .featured-section {
        padding: var(--space-lg) var(--space-md);
    }

    .featured-section .section-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        margin-bottom: var(--space-md);
        text-align: center;
    }

    .featured-event {
        padding: var(--space-md);
        gap: var(--space-sm);
    }

    .date-text {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .date-emoji {
        font-size: 1.25rem;
    }

    .event-title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .event-location {
        font-size: 0.8125rem;
    }

    /* Section titles */
    .section-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .section-intro {
        font-size: 1rem;
    }

    /* Content sections */
    .content-section {
        padding: var(--space-lg) var(--space-md);
    }

    .content-narrow {
        padding: 0;
    }

    /* Workshop cards */
    .workshops-preview {
        padding: var(--space-lg) var(--space-md);
    }

    .workshop-cards {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .workshop-card {
        min-height: 140px;
        padding: var(--space-md);
    }

    .workshop-card h3 {
        font-size: 1.25rem;
    }

    /* Workshop list items */
    .workshop-item {
        grid-template-columns: auto 1fr;
        padding: var(--space-md);
        min-height: 80px;
    }

    .workshop-type,
    .workshop-arrow {
        display: none;
    }

    .workshop-details h3 {
        font-size: 1rem;
    }

    .workshop-details p {
        font-size: 0.875rem;
    }

    /* Syllabus cards mobile */
    .syllabus-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .syllabus-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .syllabus-icon {
        font-size: 1.5rem;
    }

    .syllabus-title {
        font-size: 1.125rem;
    }

    .syllabus-desc {
        font-size: 0.875rem;
    }

    /* Event cards mobile */
    .event-card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
        padding: var(--space-md);
        border: 1px solid var(--black);
        margin-bottom: var(--space-sm);
    }

    .event-card:last-child {
        margin-bottom: 0;
    }

    .event-card.past {
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .event-card .event-date {
        width: auto;
    }

    .event-card .date-text {
        width: auto;
    }

    .event-card .event-info {
        width: 100%;
        padding-left: 0;
    }

    .event-card .event-location {
        justify-content: flex-start;
        margin-top: 0.25rem;
    }

    /* Upcoming events on gradient need black border */
    .gradient-from-green .event-card,
    .gradient-from-coral .event-card,
    .gradient-from-blue .event-card,
    .gradient-from-sky .event-card,
    .gradient-from-lavender .event-card {
        border-color: var(--black);
    }

    /* Action cards mobile - match event card framing */
    .action-cards {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-top: var(--space-lg);
    }

    .action-card {
        aspect-ratio: auto;
        flex-direction: row;
        align-items: center;
        text-align: left;
        padding: var(--space-md);
        gap: var(--space-md);
        border: 1px solid var(--black);
        border-bottom: none;
    }

    .action-card:last-child {
        border-bottom: 1px solid var(--black);
    }

    .action-card:hover {
        transform: none;
        box-shadow: none;
    }

    .action-emoji {
        font-size: 1.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .action-card-content {
        flex: 1;
    }

    .action-title {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
    }

    .action-desc {
        display: none;
    }

    .action-cta {
        display: none;
    }

    /* Syllabus preview cards tablet */
    .syllabus-preview-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .syllabus-preview-card {
        aspect-ratio: 1;
        padding: var(--space-md);
    }

    /* Events */
    .intro-grid {
        grid-template-columns: 1fr;
    }

    .event-item {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        padding: var(--space-md);
    }

    .event-item-date {
        order: 2;
        font-size: 0.875rem;
    }

    .event-status {
        order: 1;
        justify-self: start;
    }

    /* Publications */
    .publications-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        max-width: 400px;
        margin: 0 auto;
    }

    .publication-card {
        flex-direction: column;
    }

    .publication-image {
        max-width: 100%;
    }

    .publication-info {
        padding: var(--space-sm);
    }

    .publication-info h3 {
        font-size: 1.125rem;
    }

    .publication-info p {
        font-size: 0.8125rem;
    }

    .lab-apps-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        max-width: 460px;
        margin: 0 auto;
    }

    .lab-app-info {
        padding: var(--space-sm);
    }

    .lab-app-info h3 {
        font-size: 1.05rem;
    }

    /* CTA section */
    .cta-section {
        padding: var(--space-lg) var(--space-md);
    }

    .cta-content h2 {
        font-size: clamp(1.5rem, 6vw, 2rem);
    }

    .lab-page .lab-cta .cta-content h2 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }

    .lab-page .content-section.bg-green,
    .lab-page .lab-cta {
        padding: var(--space-xl) var(--space-md);
    }

    .content-section > .content-narrow,
    .content-section > .content-wide,
    .cta-section > .cta-content {
        padding-top: var(--space-md);
        padding-bottom: var(--space-md);
    }

    .cta-content p {
        font-size: 0.9375rem;
    }

    /* Buttons - ensure good tap targets */
    .btn {
        padding: 14px 24px;
        font-size: 0.875rem;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Contact grid */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer {
        padding: var(--space-lg) var(--space-md);
    }

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

    .footer-top {
        flex-direction: column;
        gap: var(--space-md);
        align-items: center;
    }

    .footer-links {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-sm) var(--space-md);
    }

    .footer-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        text-align: center;
    }

    .footer-tagline {
        max-width: 100%;
    }

    /* Prose */
    .prose {
        font-size: 1rem;
        line-height: 1.6;
    }

    .prose-list li {
        padding-left: var(--space-md);
    }

    /* Quote blocks */
    .quote-block {
        margin: var(--space-md) 0;
    }

    .quote-text {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
    }

    .modular-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 480px) {
    :root {
        --space-lg: 2rem;
        --space-xl: 3rem;
    }

    /* Even smaller hero on tiny screens */
    .hero-title {
        font-size: clamp(2.5rem, 16vw, 4rem);
        line-height: 0.85;
    }

    .page-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    /* Stack buttons */
    .cta-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    /* Workshop cards tighter */
    .workshop-card {
        min-height: 120px;
    }

    /* Featured event tighter padding */
    .featured-event {
        padding: var(--space-sm);
    }

    .event-date {
        flex-direction: column;
        gap: var(--space-xs);
    }

    /* Smaller section titles */
    .section-title {
        font-size: clamp(1.5rem, 8vw, 2rem);
    }

    /* Footer links stack on very small */
    .footer-links {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-md);
    }

    /* Single column grids */
    .modular-grid,
    .syllabus-list {
        grid-template-columns: 1fr;
    }

    .action-cards {
        grid-template-columns: 1fr;
    }

    .action-card {
        aspect-ratio: auto;
        padding: var(--space-lg);
    }

    /* Syllabus preview cards mobile */
    .syllabus-preview-cards {
        grid-template-columns: 1fr;
    }

    .syllabus-preview-card {
        aspect-ratio: auto;
        padding: var(--space-lg);
    }
}

/* ========================================
   WORKSHOP MODAL
   ======================================== */
.workshop-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium);
}

.workshop-modal.active {
    opacity: 1;
    pointer-events: all;
}

.workshop-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 10, 0.85);
}

.workshop-modal-container {
    position: relative;
    width: 90vw;
    max-width: 800px;
    max-height: 90vh;
    overflow: hidden;
    transform: translateY(40px);
    transition: transform var(--transition-medium);
}

.workshop-modal.active .workshop-modal-container {
    transform: translateY(0);
}

.workshop-modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: 10;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: var(--white);
    border: none;
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.workshop-modal-close:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Hide scrollbar */
.workshop-modal-scroll {
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.workshop-modal-scroll::-webkit-scrollbar {
    display: none;
}

.workshop-modal-body {
    padding: var(--space-lg);
}

/* Header with floating cover */
.workshop-modal-header {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    margin-bottom: var(--space-lg);
}

.workshop-modal-header > div:first-child {
    flex: 1;
}

.workshop-modal-cover {
    width: 200px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.25);
}

.workshop-modal-cover img {
    width: 100%;
    height: auto;
    display: block;
}

.workshop-modal-tags {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.workshop-modal-tags span {
    font-size: 0.65rem;
    font-weight: var(--font-weight-medium);
    color: currentColor;
    -webkit-text-fill-color: currentColor;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2em 0.5em;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.workshop-modal-body h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.04em;
    line-height: 0.95;
}

.workshop-modal-desc {
    font-size: 0.9375rem;
    line-height: 1.5;
    opacity: 0.75;
    margin-top: var(--space-sm);
}

/* Meta grid */
.workshop-modal-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px solid rgba(255, 255, 255, 0.4);
    margin-bottom: var(--space-lg);
}

.meta-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}

.meta-card:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.meta-card:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.meta-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1;
}

.meta-label {
    display: block;
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.55;
    margin-bottom: 0.15em;
}

.meta-value {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Body text */
.workshop-modal-text p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.workshop-modal-text blockquote {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-size: clamp(1.125rem, 3vw, 1.4rem);
    font-style: italic;
    line-height: 1.35;
    padding-left: var(--space-md);
    border-left: 3px solid rgba(255, 255, 255, 0.45);
    margin: var(--space-lg) 0;
}

.workshop-modal-text h3 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.workshop-modal-text ul {
    padding-left: var(--space-md);
    margin-bottom: var(--space-md);
}

.workshop-modal-text ul li {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-xs);
}

/* Reference images — aligned with headings */
.workshop-modal-ref {
    margin-bottom: var(--space-sm);
    clear: both;
}

.workshop-modal-ref img {
    width: 100%;
    height: auto;
    display: block;
}

.workshop-modal-ref span {
    display: block;
    font-size: 0.7rem;
    font-style: italic;
    color: inherit;
    opacity: 0.7;
    padding-top: 4px;
    text-align: center;
}

.workshop-modal-ref--tool {
    width: 75%;
    margin: var(--space-md) auto;
    float: none;
}

/* First image — float right next to heading */
.workshop-modal-ref:nth-of-type(1) {
    float: right;
    width: 170px;
    margin: 0 0 var(--space-sm) var(--space-md);
    clear: none;
}

/* Second image — full width */
.workshop-modal-ref:nth-of-type(2) {
    float: none;
    width: 100%;
    margin: var(--space-md) 0;
}

/* Compact ref image — float alongside text instead of full-width block */
.workshop-modal-ref--compact {
    float: right;
    width: auto;
    max-width: 160px;
    margin: 0 0 var(--space-sm) var(--space-md);
    clear: none;
    margin-top: -2px;
}

/* Inline image cycler — tap/swipe to change */
.inline-cycler {
    position: relative;
    cursor: pointer;
}

.inline-cycler img {
    display: none;
    width: auto;
    max-width: 100%;
    height: auto;
}

.inline-cycler img.active {
    display: block;
}

.workshop-modal-ref--compact.workshop-modal-ref--left {
    float: left;
    margin: 0 var(--space-md) var(--space-sm) 0;
}

.workshop-modal-ref--compact img {
    width: auto;
    max-width: 100%;
}

.workshop-modal-ref--compact.workshop-modal-ref--bear {
    float: right;
    clear: none;
    width: 170px;
    margin: 0 0 var(--space-sm) var(--space-md);
}

/* What to expect gallery */
.workshop-modal-gallery {
    margin-top: var(--space-lg);
    clear: both;
}

.workshop-modal-gallery h3 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.workshop-modal-gallery-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-xs);
}

.workshop-modal-gallery-grid::-webkit-scrollbar {
    display: none;
}

.workshop-modal-gallery-grid.dragging {
    scroll-snap-type: none;
    user-select: none;
}

.workshop-modal-gallery-grid.dragging img {
    pointer-events: none;
}

.workshop-modal-gallery-grid img {
    flex-shrink: 0;
    height: 260px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    scroll-snap-align: start;
}

/* Resource callout */
.workshop-modal-resource {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 2px solid rgba(255, 255, 255, 0.4);
    text-decoration: none;
    color: inherit;
    margin: var(--space-md) 0;
    transition: background 0.2s ease;
    clear: both;
}

.workshop-modal-resource:hover {
    background: rgba(255, 255, 255, 0.1);
}

.resource-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.resource-title {
    display: block;
    font-weight: var(--font-weight-medium);
    font-size: 0.95rem;
}

.resource-desc {
    display: block;
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 2px;
}

.workshop-modal-resource--thumb {
    display: grid;
    grid-template-columns: auto 1fr 92px;
    align-items: stretch;
    gap: var(--space-md);
    padding: 0 0 0 var(--space-md);
    overflow: hidden;
}

.workshop-modal-resource--thumb .resource-emoji {
    grid-column: 1;
    align-self: center;
}

.workshop-modal-resource--thumb > div {
    grid-column: 2;
    flex: 1;
    padding: var(--space-md) 0;
}

.resource-thumb {
    grid-column: 3;
    width: 100%;
    height: 100%;
    min-height: 92px;
    object-fit: cover;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    align-self: stretch;
}

/* Zines section */
.workshop-modal-zines {
    margin-top: var(--space-lg);
    clear: both;
}

.workshop-modal-zines h3 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
}

.workshop-modal-zines-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.zine-card {
    text-decoration: none;
    color: inherit;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: var(--space-sm);
    transition: background 0.2s ease;
}

.zine-card:hover {
    background: rgba(255, 255, 255, 0.1);
}

.zine-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    margin-bottom: var(--space-xs);
}

.zine-title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
}

/* Are.na board + image grid — styled like meta grid */
.workshop-modal-arena-grid {
    display: grid;
    grid-template-columns: 1fr 120px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    margin-top: var(--space-lg);
    clear: both;
}

.arena-cell {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}

.arena-cell:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.arena-link {
    display: block;
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-style: italic;
    font-size: 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition-fast);
}

.arena-link:hover {
    opacity: 0.6;
}

.arena-cell--image {
    padding: 0;
    overflow: hidden;
}

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

.arena-cell--image span {
    display: none;
}

/* Sessions */
.workshop-modal-sessions {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    clear: both;
}

.workshop-modal-sessions h3 {
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-sm);
    margin-top: var(--space-md);
}

.workshop-modal-sessions h3:first-child {
    margin-top: 0;
}

.workshop-modal-session {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

a.workshop-modal-session {
    text-decoration: none;
    color: inherit;
    transition: background 0.2s ease;
}

a.workshop-modal-session:hover {
    background: rgba(255, 255, 255, 0.1);
}

.session-date {
    font-size: 1.125rem;
}

.session-date-text {
    font-family: 'Times New Roman', Times, Georgia, serif;
    font-style: italic;
}

.session-location {
    font-size: 0.875rem;
    opacity: 0.7;
}

.session-duration {
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3em 0.6em;
    background: rgba(255, 255, 255, 0.2);
    margin-left: auto;
}

.session-empty {
    font-style: italic;
    opacity: 0.6;
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}

.session-empty a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.session-empty a::after {
    content: ' ↗';
    font-style: normal;
    font-size: 0.75em;
}

/* ========================================
   WORKSHOP MODAL RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .workshop-modal {
        padding: var(--space-lg) 0;
    }

    .workshop-modal-container {
        width: 95vw;
        max-height: 85vh;
    }

    .workshop-modal-scroll {
        max-height: 85vh;
    }

    .workshop-modal-header {
        gap: var(--space-md);
    }

    .workshop-modal-cover {
        width: 160px;
    }

    .workshop-modal-meta-grid {
        grid-template-columns: 1fr;
    }

    .meta-card:nth-child(odd) {
        border-right: none;
    }

    .meta-card:nth-child(-n+2) {
        border-bottom: none;
    }

    .meta-card {
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    }

    .meta-card:last-child {
        border-bottom: none;
    }

    .workshop-modal-ref,
    .workshop-modal-ref:nth-of-type(1),
    .workshop-modal-ref:nth-of-type(2) {
        float: none;
        width: 100%;
        margin: var(--space-sm) 0;
    }

    .workshop-modal-ref--tool {
        width: 75%;
        margin: var(--space-md) auto;
    }

    .workshop-modal-ref--compact,
    .workshop-modal-ref--compact.workshop-modal-ref--left {
        float: none;
        width: 100%;
        max-width: none;
        margin: var(--space-sm) 0;
    }

    .workshop-modal-ref--compact.workshop-modal-ref--bear {
        float: none;
        width: 100%;
        max-width: none;
        margin: var(--space-sm) 0;
    }

    .workshop-modal-zines-grid {
        gap: var(--space-sm);
    }

    .workshop-modal-gallery-grid img {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .workshop-modal-body {
        padding: var(--space-sm) var(--space-md);
    }

    .workshop-modal-header {
        flex-direction: column-reverse;
        gap: var(--space-sm);
    }

    .workshop-modal-cover {
        width: 120px;
    }

    .workshop-modal-body h2 {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    .workshop-modal-desc {
        font-size: 0.85rem;
    }

    .meta-card {
        padding: var(--space-xs) var(--space-sm);
    }

    .workshop-modal-text p {
        font-size: 0.9375rem;
    }

    .workshop-modal-resource {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .resource-emoji {
        font-size: 1.25rem;
    }

    .workshop-modal-resource--thumb {
        grid-template-columns: auto 1fr 68px;
        padding: 0 0 0 var(--space-sm);
    }

    .workshop-modal-resource--thumb > div {
        padding: var(--space-sm) 0;
    }

    .resource-thumb {
        min-height: 68px;
    }

    .workshop-modal-gallery-grid img {
        height: 160px;
    }

    .workshop-modal-zines-grid {
        gap: var(--space-sm);
    }

    .zine-card {
        padding: var(--space-xs);
    }

    .zine-title {
        font-size: 0.7rem;
    }

    .workshop-modal-arena-grid {
        grid-template-columns: 1fr 80px;
    }

    .workshop-modal-session {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .session-duration {
        margin-left: 0;
    }
}

/* ========================================
   ANIMATIONS & EFFECTS
   ======================================== */

@media (prefers-reduced-motion: no-preference) {
    .gradient-from-coral,
    .gradient-from-green,
    .gradient-from-blue,
    .gradient-from-yellow,
    .gradient-from-lavender,
    .gradient-from-lavender-origin,
    .gradient-from-sky,
    .gradient-from-lab {
        animation: gradient-drift 18s ease-in-out infinite alternate;
    }

    .cta-section::before {
        animation: cta-halo 8s ease-in-out infinite;
    }
}

@keyframes gradient-drift {
    0% {
        background-position: 50% 0%;
    }
    50% {
        background-position: 48% 10%;
    }
    100% {
        background-position: 52% 20%;
    }
}

@keyframes cta-halo {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.42;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: 0.58;
    }
}

/* Grain Overlay */
.grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* Page Transitions - View Transitions API dissolve */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
}

::view-transition-old(root) {
    animation-name: fade-out;
}

::view-transition-new(root) {
    animation-name: fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Hero Animation on Load */
.hero-title .title-line {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease forwards;
}

.hero-title .title-line:nth-child(1) { animation-delay: 0.1s; }
.hero-title .title-line:nth-child(2) { animation-delay: 0.25s; }
.hero-title .title-line:nth-child(3) { animation-delay: 0.4s; }

.hero-tagline {
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.6s;
}

.hero-sub {
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.75s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Reveal */
.reveal {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(24px) scale(0.99);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

/* Staggered reveal for cards */
.reveal-stagger > * {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(16px) scale(0.985);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), filter 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }

.reveal-stagger.visible > * {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: var(--space-md);
    right: var(--space-md);
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-medium), transform var(--transition-fast);
    z-index: 100;
    padding: var(--space-sm);
}

.back-to-top.visible {
    opacity: 0.3;
    pointer-events: all;
}

.back-to-top:hover {
    opacity: 0.7;
    transform: translateY(-2px);
}

/* Hover Effects */
.hover-lift {
    transition: transform var(--transition-fast);
}

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

/* Cursor */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border: 2px solid var(--black);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transition: transform 0.1s ease, background 0.2s ease;
    mix-blend-mode: difference;
}

.custom-cursor.hover {
    transform: scale(2);
    background: var(--white);
}

/* Glitch Effect */
.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    animation: glitch-1 2s infinite linear alternate-reverse;
    color: var(--coral);
    z-index: -1;
}

.glitch::after {
    animation: glitch-2 3s infinite linear alternate-reverse;
    color: var(--blue);
    z-index: -2;
}

@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 95% 0); transform: translate(-2px, -2px); }
    20% { clip-path: inset(30% 0 60% 0); transform: translate(2px, 2px); }
    40% { clip-path: inset(60% 0 30% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, -2px); }
}

@keyframes glitch-2 {
    0%, 100% { clip-path: inset(95% 0 0 0); transform: translate(2px, 2px); }
    20% { clip-path: inset(60% 0 30% 0); transform: translate(-2px, -2px); }
    40% { clip-path: inset(30% 0 60% 0); transform: translate(2px, -2px); }
    60% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 2px); }
    80% { clip-path: inset(80% 0 10% 0); transform: translate(2px, 2px); }
}

/* Text Scramble */
.scramble-char {
    display: inline-block;
    transition: none;
}

.scramble-char.scrambling {
    opacity: 0.6;
}

/* View Transitions */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 0.3s ease-out fade-out;
}

::view-transition-new(root) {
    animation: 0.3s ease-in fade-in;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}