/* Rosy Art Studio - Global Creative CSS */

:root {
    --primary: #003153; /* Authentic Prussian Blue / Cyanotype tone */
    --primary-hover: #001f35;
    --primary-light: #e8f1f7;
    --bg-dark: #0f172a;
    --bg-light: #faf9f6; /* Soft linen white */
    --card-bg: #fdfcfb; /* Cotton cardstock */
    --text-main: #2a2b2e; /* Soft ink charcoal */
    --text-muted: #5e6b7d;
    --border-color: #d8d6d0; /* Soft card border */
    --success: #16a34a;
    --danger: #dc2626;
    --warning: #d97706;
    
    /* Typography */
    --font-heading: 'EB Garamond', 'Playfair Display', Georgia, serif;
    --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Base resets & styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-light);
    background-image: 
        linear-gradient(90deg, rgba(42, 43, 46, 0.012) 1px, transparent 1px),
        linear-gradient(0deg, rgba(42, 43, 46, 0.012) 1px, transparent 1px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' fill='transparent'/%3E%3C/svg%3E");
    background-size: 8px 8px, 8px 8px, 100px 100px;
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
}

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

/* Layout shell */
.main-content {
    flex-grow: 1;
}

/* Premium Header Component */
.main-header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='2'%3E%3Cpath d='M0,1 Q25,0.7 50,1.3 T100,0.8' fill='none' stroke='%23d8d6d0' stroke-width='1.5'/%3E%3C/svg%3E") 1;
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 58px;
    flex-wrap: nowrap;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--bg-dark);
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
}

.logo-dot {
    color: var(--primary);
}

.nav-menu {
    display: flex;
    gap: 22px;
    margin-left: auto;
    margin-right: 25px;
    align-items: center;
}

.nav-link {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    padding: 5px 0;
    letter-spacing: 0.1px;
}

.nav-link:hover, .nav-link.active {
    color: var(--primary);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

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

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.admin-login-btn {
    color: var(--text-muted);
    font-size: 1.2rem;
    padding: 5px;
}

.admin-login-btn:hover {
    color: var(--primary);
}

.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 6px;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    z-index: 100001;
}

.mobile-nav-toggle:focus-visible {
    outline: 2px solid var(--primary);
}

.mobile-nav-toggle .bar {
    width: 24px;
    height: 2px;
    background-color: var(--bg-dark);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

@media (max-width: 992px) {
    .mobile-nav-toggle {
        display: flex !important;
    }
}

/* Dynamic Hero Banner Styling */
/* Gallery-style Cover Hero Sizing */
.creative-page-hero {
    background-color: transparent;
    padding: 35px 20px 20px 20px;
    text-align: center;
    position: relative;
    
    /* Immersive cover landing page sizing */
    min-height: auto;
    display: flex;
    flex-direction: column; /* Stack room overlay and frame vertically */
    align-items: center;
    justify-content: center;
}

/* Framed Artwork Matting & Shadows */
.framed-artwork-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.framed-artwork {
    background-color: #ffffff; /* White matting board */
    padding: 20px 20px 30px 20px; /* bottom matting is wider for catalog signature/caption look */
    border: 1px solid rgba(42, 43, 46, 0.08); /* Frame keyline boundary */
    box-shadow: 
        0 4px 10px rgba(0, 0, 0, 0.04), /* close shadow */
        0 20px 45px rgba(0, 0, 0, 0.08); /* wall suspension shadow */
    max-width: 440px;
    width: 100%;
    transition: transform 0.4s ease;
}

.framed-artwork:hover {
    transform: translateY(-4px); /* micro-animation to lift when hovered */
}

.artwork-frame-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid rgba(42, 43, 46, 0.06);
    border-radius: 4px;
    cursor: pointer;
    transition: filter 0.3s ease;
}

.artwork-frame-img:hover {
    filter: brightness(0.96);
}

/* Gallery Wall Label Card Component */
.artwork-caption-card-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.artwork-caption-card {
    background-color: #fdfcfb; /* Cotton cardstock label */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.005 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' fill='%23fdfcfb'/%3E%3C/svg%3E");
    padding: 15px 20px;
    max-width: 320px;
    text-align: left; /* Align like standard gallery label plaques */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.08));
    
    /* Decol-edge clip path simulating manually torn paper labels */
    clip-path: polygon(
        0.9% 1.8%, 19% 0.8%, 37% 2.1%, 55% 1.1%, 74% 2.3%, 91% 0.9%, 99.1% 1.5%,  
        98.6% 19%, 99.3% 38%, 98.4% 57%, 99.2% 76%, 98.7% 92%, 99.1% 98.5%,  
        91% 99.1%, 74% 98.4%, 55% 99.3%, 37% 98.5%, 19% 99.2%, 0.9% 98.7%,  
        1.3% 92%, 0.8% 76%, 1.5% 57%, 0.9% 38%, 1.4% 19%
    );
}

.artwork-caption-title {
    display: block;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.artwork-caption-detail {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 8px;
}

.artwork-caption-desc {
    font-size: 0.82rem;
    color: #4a4b4e;
    line-height: 1.45;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 8px;
    margin: 0;
}

.hero-text-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

/* Ripped/Torn Deckled Edge Paper Card Wrapper */
.hero-card-wrapper {
    max-width: 680px;
    margin: 20px auto;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.45)); /* Shadow matching jagged shape */
}

.hero-paper-card {
    background-color: #faf9f6;
    /* Soft, low-frequency paper fiber texture with extremely low opacity to avoid pixelated dithering */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.006 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23paper)' fill='%23faf9f6'/%3E%3C/svg%3E");
    padding: 55px 45px;
    text-align: center;
    /* Jagged edge clip-path */
    clip-path: polygon(
        0.8% 1.2%, 18% 0.7%, 35% 1.5%, 52% 0.9%, 70% 1.4%, 87% 0.9%, 99.2% 1.1%, 
        98.8% 18%, 99.4% 36%, 98.7% 54%, 99.3% 72%, 98.9% 90%, 99.2% 98.8%, 
        87% 99.2%, 70% 98.6%, 52% 99.1%, 35% 98.7%, 18% 99.3%, 0.8% 98.9%, 
        1.1% 90%, 0.6% 72%, 1.3% 54%, 0.7% 36%, 1.2% 18%
    );
}

/* Poetic letterpress text styled inside the white paper card */
.letterpress-poetic-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.95rem;
    font-weight: 400;
    color: #121315; /* Darker, rich letterpress ink */
    
    /* Solid color rendering with deeper debossing and soft ink bleed edges */
    text-shadow: 
        0 0 0.55px rgba(18, 19, 21, 0.5),             /* Soft ink bleed edge */
        -0.5px -0.5px 0.6px rgba(0, 0, 0, 0.4),        /* Upper debossed shadow */
        0.75px 0.75px 0.5px rgba(255, 255, 255, 0.95);  /* Bottom paper highlight */
        
    letter-spacing: -0.015em;
    line-height: 1.85;
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px auto;
    opacity: 0.96;
    white-space: pre-line;
}

.letterpress-poetic-text span {
    display: inline-block;
    vertical-align: middle;
}

/* Global utility class for ink-bleed letterpress headers, logo, and nav links */
.letterpress-text {
    font-family: 'EB Garamond', Georgia, serif !important;
    color: #121315 !important; /* Darker, rich letterpress ink */
    text-shadow: 
        0 0 0.55px rgba(18, 19, 21, 0.5),             /* Soft ink bleed edge */
        -0.5px -0.5px 0.6px rgba(0, 0, 0, 0.4),        /* Upper debossed shadow */
        0.75px 0.75px 0.5px rgba(255, 255, 255, 0.95) !important;  /* Bottom paper highlight */
}

.letterpress-text span {
    display: inline-block;
    vertical-align: middle;
}

/* Base Forms & Cards styling */
.form-narrow-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 20px;
}

.about-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    margin-top: 20px;
}

.form-container-card {
    background-color: var(--card-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.005 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' fill='%23fdfcfb'/%3E%3C/svg%3E");
    padding: 45px 40px;
    /* Same reasoning as the popup card: at this width the deckle polygon's six
       points per edge became slow undulations rather than a torn edge, and the
       corners bulged. Flat sheet, with the paper carried by stock and grain. */
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.manager-table-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;
    gap: 15px;
}

.card-header-row h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--bg-dark);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    transition: all 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.form-tip-text {
    display: block;
    margin-top: 5px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Custom Checkbox Toggle */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.radio-tab-toggle {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.radio-tab-toggle input[type="radio"] {
    display: none;
}

.radio-tab-toggle label {
    flex: 1;
    text-align: center;
    padding: 12px;
    margin: 0;
    cursor: pointer;
    background-color: #f8fafc;
    transition: all 0.2s ease;
}

.radio-tab-toggle input[type="radio"]:checked + label {
    background-color: var(--primary);
    color: #ffffff;
}

/* Buttons style */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-primary {
    background-color: var(--primary);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.3);
}

.btn-secondary {
    background-color: #f1f5f9;
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: #e2e8f0;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* Colors picker custom row */
.color-picker-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Alerts CSS */
.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

.alert-success {
    background-color: #f0fdf4;
    color: var(--success);
    border: 1px solid #bbf7d0;
}

.alert-danger {
    background-color: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
}

/* Grid galleries */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Artwork Card Aesthetics */
.artwork-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.artwork-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
}

.artwork-image-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 75%; /* 4:3 Aspect ratio */
    background-color: var(--bg-light); /* Show linen through torn photo edges */
}

.artwork-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s ease;
    cursor: pointer;
}

.artwork-card:hover .artwork-image {
    transform: scale(1.05);
}

.artwork-status-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.artwork-status-badge.available {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--bg-dark);
}

.artwork-status-badge.sold {
    background-color: rgba(15, 23, 42, 0.85);
    color: #ffffff;
}

.artwork-details {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.artwork-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--bg-dark);
    margin-bottom: 8px;
}

.artwork-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
    flex-grow: 1;
}

.artwork-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.artwork-price {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--bg-dark);
    font-family: var(--font-heading); /* EB Garamond pricing */
    letter-spacing: 0.5px;
}

/* Event Schedule styling */
.event-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
}

.event-flyer {
    width: 300px;
    object-fit: cover;
}

.event-details {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-details h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--bg-dark);
    margin-bottom: 10px;
}

.event-meta-info {
    display: flex;
    gap: 20px;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.event-meta-info i {
    color: var(--primary);
    margin-right: 5px;
}

.event-desc {
    color: var(--text-main);
    margin-bottom: 20px;
    flex: 1;
}

.event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
}

.event-cost {
    font-size: 1.25rem;
    font-weight: 700;
}

/* Admin Dashboard layout styling */
.admin-body {
    background-color: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1d1d1f;
}

.admin-wrapper {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 250px;
    background-color: #ffffff;
    border-right: 1px solid #d2d2d7;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: 100vh;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header .logo {
    color: #1d1d1f;
    font-size: 1.35rem;
    font-weight: 700;
}

.sidebar-header .badge {
    background-color: #f5f5f7;
    color: #86868b;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 99px;
    font-weight: 600;
    border: 1px solid #d2d2d7;
}

.user-profile-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #f5f5f7;
    padding: 10px 12px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.user-profile-summary i {
    font-size: 1.6rem;
    color: #86868b;
}

.user-profile-summary h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 1px;
}

.user-profile-summary p {
    font-size: 0.7rem;
    color: #86868b;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #515154;
    font-weight: 500;
    font-size: 0.88rem;
    transition: all 0.15s ease-in-out;
}

.menu-link:hover {
    color: #1d1d1f;
    background-color: #f5f5f7;
}

.menu-link.active {
    color: #0071e3;
    background-color: rgba(0, 113, 227, 0.08);
    font-weight: 600;
}

.sidebar-footer {
    border-top: 1px solid #e5e5ea;
    padding-top: 15px;
}

.logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff3b30;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background-color 0.15s;
}

.logout-btn:hover {
    background-color: rgba(255, 59, 48, 0.05);
}

.admin-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-topbar {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid #d2d2d7;
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.admin-topbar h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1d1d1f;
}

.view-site-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 99px;
    border: 1px solid #d2d2d7;
    font-size: 0.85rem;
    font-weight: 500;
    color: #1d1d1f;
    background-color: #ffffff;
    transition: all 0.15s;
}

.view-site-btn:hover {
    background-color: #f5f5f7;
    border-color: #86868b;
}

.admin-content-inner {
    padding: 30px;
    flex-grow: 1;
    overflow-y: auto;
}

/* Metric Cards style */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.metric-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.card-info h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1d1d1f;
    line-height: 1.1;
}

.card-info p {
    font-size: 0.82rem;
    color: #86868b;
    font-weight: 500;
    margin-top: 2px;
}

/* Dashboard split grid layout */
.settings-split-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 25px;
}

.section-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 25px 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e5ea;
    color: #86868b;
}

.current-image-preview {
    margin-top: 12px;
}

.current-image-preview img {
    margin-top: 6px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid #d2d2d7;
}

/* Table management - Apple List style */
.manager-table-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.88rem;
}

.admin-table th, .admin-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #f5f5f7;
}

.admin-table th {
    background-color: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #86868b;
    border-bottom: 2px solid #e5e5ea;
}

.admin-table tr {
    transition: background-color 0.15s ease-in-out;
}

.admin-table tbody tr:hover {
    background-color: #f5f5f7;
}

.table-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #d2d2d7;
}

.table-desc-clip {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.available {
    background-color: #dcfce7;
    color: #15803d;
}

.status-badge.sold {
    background-color: #f1f5f9;
    color: #475569;
}

.table-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.action-btn:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.action-btn.delete:hover {
    color: var(--danger);
    border-color: var(--danger);
    background-color: #fef2f2;
}

.table-row-past {
    opacity: 0.65;
}

/* Admin Apple Aesthetic Overrides */
.admin-main .form-container-card {
    background-color: #ffffff;
    background-image: none !important;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    filter: none !important;
    clip-path: none !important;
    border-radius: 16px;
}

.admin-main .btn {
    border-radius: 99px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 8px 18px;
    transition: all 0.15s ease-in-out;
    border: none;
}

.admin-main .btn-primary {
    background-color: #1d1d1f;
    color: #ffffff;
}

.admin-main .btn-primary:hover {
    background-color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-main .btn-secondary {
    background-color: #ffffff;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
}

.admin-main .btn-secondary:hover {
    background-color: #f5f5f7;
    border-color: #86868b;
}

.admin-main .btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.admin-main input[type="text"],
.admin-main input[type="email"],
.admin-main input[type="url"],
.admin-main input[type="password"],
.admin-main input[type="number"],
.admin-main select,
.admin-main textarea {
    border: 1px solid #d2d2d7;
    background-color: #ffffff;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    padding: 10px 14px;
    transition: all 0.15s ease-in-out;
}

.admin-main input:focus,
.admin-main textarea:focus,
.admin-main select:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.admin-main .badge {
    background: #f5f5f7;
    color: #86868b;
    border: 1px solid #d2d2d7;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 0.72rem;
    font-weight: 500;
}

/* Glassmorphic Login Portal Styles */
.login-body {
    background: radial-gradient(circle at 10% 20%, rgba(18, 53, 91, 0.05) 0%, rgba(255, 255, 255, 0) 90%),
                radial-gradient(circle at 90% 80%, rgba(0, 113, 227, 0.03) 0%, rgba(255, 255, 255, 0) 90%),
                #f5f5f7;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.login-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.04),
                0 1px 3px 0 rgba(0, 0, 0, 0.02);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-top: 15px;
    margin-bottom: 8px;
}

.login-header p {
    font-size: 0.82rem;
    color: #86868b;
    line-height: 1.4;
}

.login-error {
    background-color: rgba(255, 59, 48, 0.08);
    border: 1px solid rgba(255, 59, 48, 0.15);
    color: #ff3b30;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-notice {
    background-color: rgba(0, 113, 227, 0.06);
    border: 1px solid rgba(0, 113, 227, 0.15);
    color: #0071e3;
    border-radius: 12px;
    padding: 12px 15px;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.login-notice code {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.85em;
    font-weight: 600;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #86868b;
    margin-bottom: 6px;
}

.input-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon-wrapper i {
    position: absolute;
    left: 14px;
    color: #86868b;
    font-size: 0.95rem;
}

.input-icon-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 40px !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.45) !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
    transition: all 0.15s ease-in-out !important;
}

.input-icon-wrapper input:focus {
    background-color: #ffffff !important;
    border-color: #0071e3 !important;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15) !important;
}

.login-btn {
    width: 100%;
    background-color: #1d1d1f !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px !important;
    border-radius: 99px !important;
    margin-top: 10px;
    border: none !important;
}

.login-btn:hover {
    background-color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.login-footer {
    text-align: center;
    margin-top: 25px;
    font-size: 0.82rem;
}

.login-footer a {
    color: #86868b;
    text-decoration: none;
    transition: color 0.15s;
}

.login-footer a:hover {
    color: #1d1d1f;
}

/* Glassmorphic Security settings widget override */
.admin-main .form-container-card.security-card {
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.03) !important;
}

.admin-main .form-container-card.security-card input {
    background-color: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.admin-main .form-container-card.security-card input:focus {
    background-color: #ffffff !important;
    border-color: #0071e3 !important;
}

/* Empty State component */
.empty-state {
    text-align: center;
    padding: 50px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 3.5rem;
    margin-bottom: 15px;
    color: var(--border-color);
}

.main-footer {
    background-color: transparent;
    color: var(--text-main);
    padding: 60px 20px 20px 20px;
    border-top: 2px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='2'%3E%3Cpath d='M0,1 Q25,1.2 50,0.7 T100,1.1' fill='none' stroke='%23d8d6d0' stroke-width='1.5'/%3E%3C/svg%3E") 1;
    position: relative;
    z-index: 10;
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand .logo {
    color: var(--text-main);
}

.footer-tagline {
    color: var(--text-muted);
    margin-top: 15px;
    font-size: 0.95rem;
    max-width: 320px;
}

.footer-links h4, .footer-contact h4 {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--primary);
}

.footer-contact p {
    color: var(--text-muted);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.footer-contact p i {
    margin-right: 8px;
    color: var(--primary);
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-icons a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--border-color);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.social-icons a:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.footer-bottom {
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Tablet adjustments */
@media (max-width: 992px) {
    .settings-split-grid {
        grid-template-columns: 1fr;
    }
    
    .event-card {
        flex-direction: column;
    }
    
    .event-flyer {
        width: 100%;
        max-height: 250px;
    }
}

/* Mobile responsive menu & Page Layouts */
@media (max-width: 992px) {
    .main-header {
        padding: 0;
        height: auto !important;
        min-height: 56px;
    }

    .header-container {
        padding: 8px 16px;
        min-height: 56px;
        flex-wrap: nowrap;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .logo {
        font-size: 1.55rem;
    }

    .mobile-nav-toggle {
        display: flex !important;
        z-index: 100001;
    }
    
    .nav-menu {
        display: flex !important;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: #fdfbf7;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.005 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' fill='%23fdfbf7'/%3E%3C/svg%3E");
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 30px 20px 40px 20px;
        gap: 16px;
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        border-bottom: 2px solid #d8d6d0;
        z-index: 100000;
        overflow-y: auto;
        margin: 0 !important;
        
        /* Smooth Slide-in from Left to Right */
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                    opacity 0.3s ease, 
                    visibility 0.35s ease;
    }
    
    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nav-menu .nav-link {
        font-family: var(--font-heading) !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        display: block !important;
        padding: 14px 20px !important;
        width: 100% !important;
        max-width: 320px !important;
        text-align: center !important;
        border-bottom: 1px dashed rgba(216, 214, 208, 0.8) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .nav-menu .nav-link:hover,
    .nav-menu .nav-link.active {
        color: var(--primary) !important;
        font-weight: 700 !important;
    }
    
    /* Responsive About Page */
    .about-grid-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .form-container-card {
        padding: 32px 22px !important;
    }

    /* Responsive Blog / Journal Titles & Layout */
    .content-header-container {
        margin: 24px auto 18px auto !important;
        padding: 0 15px !important;
    }

    .content-header-container .page-title,
    .page-title {
        font-size: 1.85rem !important;
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    .content-header-container p {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }

    .journal-entry-card h2 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    #readerTitle {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
    }

    .newsletter-paper-card {
        padding: 36px 20px 28px 20px !important;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .admin-wrapper {
        flex-direction: column;
    }
    
    .settings-split-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .admin-sidebar {
        width: 100%;
        padding: 12px 15px;
        border-right: none;
        border-bottom: 1px solid #d2d2d7;
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #ffffff;
    }
    
    .sidebar-header {
        margin-bottom: 12px;
    }
    
    .user-profile-summary {
        display: none;
    }

    .mobile-logout-btn {
        display: inline-block;
    }
    
    .sidebar-menu {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 3px;
        -webkit-overflow-scrolling: touch;
    }
    
    .sidebar-menu::-webkit-scrollbar {
        display: none;
    }
    
    .sidebar-menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .menu-link {
        padding: 6px 12px;
        font-size: 0.8rem;
        display: inline-flex;
    }
    
    .sidebar-footer {
        display: none;
    }
}

/* Burger Animation */
.mobile-nav-toggle.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

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

.mobile-nav-toggle.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.exhibition-journal-section {
    padding: 100px 20px;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(rgba(253, 252, 251, 0.94), rgba(253, 252, 251, 0.94)), url('../uploads/gallery/paper_texture.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.journal-card {
    background-color: #faf9f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.005 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' fill='%23faf9f6'/%3E%3C/svg%3E");
    padding: 60px 45px;
    max-width: 760px;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.05));
    
    /* Torn paper deckled edge polygon */
    clip-path: polygon(
        0.8% 1.2%, 18% 0.7%, 35% 1.5%, 52% 0.9%, 70% 1.4%, 87% 0.9%, 99.2% 1.1%, 
        98.8% 18%, 99.4% 36%, 98.7% 54%, 99.3% 72%, 98.9% 90%, 99.2% 98.8%, 
        87% 99.2%, 70% 98.6%, 52% 99.1%, 35% 98.7%, 18% 99.3%, 0.8% 98.9%, 
        1.1% 90%, 0.6% 72%, 1.3% 54%, 0.7% 36%, 1.2% 18%
    );
}

.journal-quote {
    font-size: 1.65rem;
    line-height: 1.8;
    color: #121315;
    margin-bottom: 25px;
    font-style: italic;
}

.journal-author {
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.exhibition-grid-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 100px 20px;
}

.exhibition-grid-title {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 50px;
}

.exhibition-staggered-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    align-items: start;
}

/* Stagger columns visually for gallery dynamic hanging */
.exhibition-staggered-grid .grid-column:nth-child(2) {
    margin-top: 50px;
}

.exhibition-staggered-grid .grid-column:nth-child(3) {
    margin-top: -30px;
}

.exhibition-process-section {
    max-width: 1400px;
    margin: 0 auto 100px auto;
    padding: 0 20px;
}

.process-divider {
    border-top: 2px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='2'%3E%3Cpath d='M0,1 Q25,1.2 50,0.7 T100,1.1' fill='none' stroke='%23d8d6d0' stroke-width='1.5'/%3E%3C/svg%3E") 1;
    margin-bottom: 70px;
}

.process-title {
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 50px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.process-step {
    padding: 20px 0;
}

.process-step-num {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 12px;
}

.process-step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #121315;
    margin-bottom: 10px;
    display: block;
}

.process-step-text {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
}

@media (max-width: 992px) {
    .exhibition-staggered-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .exhibition-staggered-grid .grid-column:nth-child(2),
    .exhibition-staggered-grid .grid-column:nth-child(3) {
        margin-top: 0;
    }
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 576px) {
    .process-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Lightbox Overlay Styles */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(18, 19, 21, 0.98); /* Deep off-black gallery background */
    backdrop-filter: blur(15px);
    z-index: 10000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 40px 20px;
}

.lightbox-overlay.active {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
}

.lightbox-close {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 200;
    cursor: pointer;
    transition: opacity 0.2s;
    user-select: none;
    z-index: 10002;
}

.lightbox-close:hover {
    opacity: 0.7;
}

.lightbox-content-wrapper {
    max-width: 900px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10001;
}

/* Tactile Fine-Art Newsletter Modal */
.newsletter-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 19, 21, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.newsletter-modal-overlay.active {
    display: flex !important;
    opacity: 1;
}

.newsletter-paper-card {
    background-color: #fdfcf9;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.006 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23paper)' fill='%23fdfbf7'/%3E%3C/svg%3E");
    padding: 50px 42px 38px 42px;
    max-width: 540px;
    width: 100%;
    text-align: center;
    position: relative;
    /* Plain rectangle, matching the event and shop modals so every popup on the
       site shares one shape. The deckled clip-path that used to be here only had
       six points per edge, so at this size its 1.5% deviations came out as 5-8px
       undulations - the card read as a warped rubber sheet rather than as torn
       cotton. Deckle needs high-frequency detail to work; at modal scale it does
       not survive. The paper still reads through the stock colour and grain. */
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(216, 214, 208, 0.6);
}

.newsletter-paper-card .paper-close-btn {
    position: absolute;
    top: 18px;
    right: 24px;
    background: none;
    border: none;
    color: #86868b;
    font-size: 1.8rem;
    cursor: pointer;
    font-weight: 200;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.newsletter-paper-card .paper-close-btn:hover {
    color: #1d1d1f;
    transform: scale(1.1);
}

.newsletter-paper-card .studio-seal {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #002b49;
    color: #e5b869;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 14px;
    box-shadow: 0 4px 15px rgba(0, 43, 73, 0.25);
    border: 1px solid rgba(229, 184, 105, 0.4);
}

.newsletter-paper-card h3 {
    font-family: var(--font-heading, 'EB Garamond', serif);
    font-size: 2.1rem;
    color: var(--bg-dark, #121315);
    margin: 0 0 8px 0;
    font-weight: 500;
    letter-spacing: -0.3px;
}

.newsletter-paper-card .paper-subtitle {
    font-family: var(--font-heading, 'EB Garamond', serif);
    font-size: 1.05rem;
    color: #4a5568;
    line-height: 1.6;
    margin: 0 auto 16px auto;
    max-width: 420px;
}

.newsletter-paper-card .paper-incentive {
    display: inline-block;
    background: rgba(0, 43, 73, 0.04);
    border: 1px dashed rgba(0, 43, 73, 0.4);
    color: #002b49;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 15px;
    border-radius: 2px;
    margin-bottom: 20px;
    letter-spacing: 0.3px;
}

.newsletter-paper-card .paper-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d8d6d0;
    border-radius: 4px;
    background: #ffffff;
    font-family: var(--font-sans, 'Outfit', sans-serif);
    font-size: 0.95rem;
    color: #1d1d1f;
    outline: none;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-paper-card .paper-input:focus {
    border-color: #002b49;
    box-shadow: 0 0 0 3px rgba(0, 43, 73, 0.08);
}

.newsletter-paper-card .paper-submit-btn {
    width: 100%;
    padding: 13px;
    background: #121315;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-sans, 'Outfit', sans-serif);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}

.newsletter-paper-card .paper-submit-btn:hover {
    background: #002b49;
}

.newsletter-paper-card .dismiss-link {
    background: none;
    border: none;
    color: #86868b;
    font-size: 0.85rem;
    margin-top: 14px;
    cursor: pointer;
    font-style: italic;
    font-family: var(--font-heading, 'EB Garamond', serif);
}

.newsletter-paper-card .dismiss-link:hover {
    color: #121315;
    text-decoration: underline;
}

.lightbox-frame {
    background-color: #faf9f6;
    padding: 30px; /* White matting board effect inside lightbox */
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5);
    margin-bottom: 25px;
    max-height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-img {
    max-height: calc(70vh - 60px);
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.lightbox-caption-card {
    background-color: #fdfcfb;
    padding: 20px 25px;
    max-width: 420px;
    width: 100%;
    text-align: left;
    filter: drop-shadow(0 6px 15px rgba(0,0,0,0.2));
    
    /* Torn paper deckled edge polygon */
    clip-path: polygon(
        0.9% 1.8%, 19% 0.8%, 37% 2.1%, 55% 1.1%, 74% 2.3%, 91% 0.9%, 99.1% 1.5%, 
        98.6% 19%, 99.3% 38%, 98.4% 57%, 99.2% 76%, 98.7% 92%, 99.1% 98.5%, 
        91% 99.1%, 74% 98.4%, 55% 99.3%, 37% 98.5%, 19% 99.2%, 0.9% 98.7%, 
        1.3% 92%, 0.8% 76%, 1.5% 57%, 0.9% 38%, 1.4% 19%
    );
}

/* Hero Exhibition Slider Styles */
.hero-exhibition-slider {
    position: relative;
    width: 100%;
    max-width: 420px; /* Symmetrical, tightened size to fit all viewport heights */
    margin: 0 auto;
    overflow: visible;
}

.slider-viewport {
    overflow: hidden;
    width: 100%;
    padding: 10px 0 25px 0; /* Space for shadows & deckled overlays */
}

.slider-track {
    display: flex;
    transition: transform 0.6s steps(6, end);
}

.slide-item {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.slider-arrow {
    position: absolute;
    top: 210px; /* Center vertically align with the tightened framed image */
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2.2rem;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s ease, color 0.3s ease;
    z-index: 10;
    padding: 10px;
}

.slider-arrow:hover {
    opacity: 1;
    color: var(--primary);
}

.prev-arrow {
    left: -60px;
}

.next-arrow {
    right: -60px;
}

@media (max-width: 768px) {
    .slider-arrow {
        font-size: 1.8rem;
    }
    .prev-arrow {
        left: -35px;
    }
    .next-arrow {
        right: -35px;
    }
}

/* ---------------------------------------------------------------------------
   RETIRED: original "Ink Blot Splatters" treatment.
   Kept for reference only. Nothing ever generated .ink-blot elements, so this
   never rendered on the page. Superseded by the "Watercolour Bloom" system
   at the end of this file.

.ink-blot-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ink-blot {
    position: absolute;
    width: 180px;
    height: 180px;
    fill: #12355b; (prussian blue ink drop)
    opacity: 0;
    mix-blend-mode: multiply;
    transform: scale(0.6) rotate(0deg);
    transition: opacity 1.6s cubic-bezier(0.1, 0.8, 0.3, 1), 
                transform 2.2s cubic-bezier(0.1, 0.8, 0.3, 1);
    filter: blur(0.8px); (capillary bleed)
}

.ink-blot.soaked { opacity: 0.12; }
--------------------------------------------------------------------------- */

/* Stop-Motion Tactile Entrance Animations */
.hero-exhibition-slider .framed-artwork {
    opacity: 0;
    animation: stopMotionLaydown 0.8s steps(4) 0.3s forwards;
}

@keyframes stopMotionLaydown {
    0% {
        transform: scale(0.85) rotate(-3.9deg);
        opacity: 0;
    }
    33% {
        transform: scale(0.90) rotate(2deg);
        opacity: 0.4;
    }
    66% {
        transform: scale(0.95) rotate(-1.5deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Distressed Prussian Blue Letterpress & Ink Typography */
.distressed-blue-text, .distressed-ink {
    color: #002b49;
    background: linear-gradient(135deg, #001f35 0%, #002b49 55%, #0d3d63 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='distress'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0.15'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23distress)' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='distress'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.85 0.15'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23distress)' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100px 100px;
    mask-size: 100px 100px;
    text-shadow: 0.5px 0.5px 0px rgba(0, 43, 73, 0.2);
    display: inline-block;
}

.distressed-stamp-badge {
    color: #002b49 !important;
    background: rgba(0, 43, 73, 0.05) !important;
    border: 1.5px dashed rgba(0, 43, 73, 0.45) !important;
    padding: 5px 14px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 0.74rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: inset 0 0 4px rgba(0, 43, 73, 0.06);
}


/* ===========================================================================
   Watercolour Bloom
   Replaces the retired .ink-blot treatment above. Markup is generated by
   js/watercolor.js; mount it with data-watercolor on a positioned element.

   Three phases, on separate elements because they have to overlap in time:
     .wc-specks  impact spray   - thrown clear in ~120ms, then soaks in
     .wc-body    the puddle     - lands hard, then creeps out and lightens
     .wc-ring    the tidemark   - stays invisible while wet, resolves as it dries

   Every base rule below is the DRIED state, and each keyframe set runs 0% ->
   that state with fill-mode both. So switching animations off (reduced motion)
   lands on the finished stain rather than on nothing.
   =========================================================================== */

#wc-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.wc-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    /* Multiply lets blooms tint the paper and pool where they overlap, the way
       real washes do, instead of stacking as flat discs. */
    mix-blend-mode: multiply;
}

.wc-bloom {
    position: absolute;
    /* The container holds the drop's final orientation only. All motion is on
       the children, so the phases can run on different clocks. */
    transform:
        translate(-50%, -50%)
        scale(var(--wc-sx, 1), var(--wc-sy, 1))
        rotate(var(--wc-drift, 0deg));
}

.wc-bloom svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.wc-bloom circle,
.wc-bloom .wc-specks {
    transform-origin: 100px 100px;
}

/* Every 0% keyframe below starts at opacity 0.01, never a flat 0. A filtered
   SVG group whose contents sit at exactly zero opacity - which is what an
   animation-delay with fill-mode:both does before the drop is due - makes Chrome
   paint the whole filter region opaque black. A hair of opacity avoids it and is
   invisible at these gradient strengths. Do not "tidy" these back to 0. */

/* --- Phase 1: impact spray ------------------------------------------------ */

.wc-specks {
    opacity: 0.55;
    animation: wc-spray calc(3400ms * var(--wc-t, 1)) var(--wc-delay, 0ms) both;
}

@keyframes wc-spray {
    /* Held at the point of contact until the drop actually lands. */
    0%   { transform: scale(0.30); opacity: 0.01; }
    /* Thrown clear. 4% of 3400ms is ~135ms - this is the whole splatter. */
    4%   { transform: scale(1.06); opacity: 1; animation-timing-function: ease-out; }
    10%  { transform: scale(1); opacity: 1;
           animation-timing-function: cubic-bezier(0.22, 0.55, 0.25, 1); }
    /* Then they soak in over a long decelerating tail, never quite vanishing. */
    100% { transform: scale(1.03); opacity: 0.55; }
}

/* --- Phase 2: the puddle -------------------------------------------------- */

.wc-body {
    opacity: 0.78;
    animation: wc-splat calc(4400ms * var(--wc-t, 1)) var(--wc-delay, 0ms) both;
}

@keyframes wc-splat {
    /* A drop in the air, not yet touching. */
    0% {
        transform: scale(0.24);
        opacity: 0.01;
        animation-timing-function: cubic-bezier(0.15, 0.95, 0.35, 1);
    }
    /* IMPACT at ~120ms: it hits and flattens. Sudden, full strength, no ring. */
    3.5% {
        transform: scale(0.74);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1);
    }
    /* Surface tension pulls back a touch before the paper takes over. */
    6% {
        transform: scale(0.71);
        animation-timing-function: cubic-bezier(0.16, 0.62, 0.24, 1);
    }
    /* Creep outward, decelerating, losing density to the rim as it dries. The
       old curve here was so aggressive it hit its final size in the first
       fifth and then flatlined, which read as the spread being over early. */
    100% { transform: scale(1); opacity: 0.78; }
}

/* --- Phase 3: the tidemark ------------------------------------------------ */

.wc-ring {
    opacity: 1;
    animation: wc-tidemark calc(6400ms * var(--wc-t, 1)) var(--wc-delay, 0ms) both;
}

@keyframes wc-tidemark {
    /* Nothing while the wash is still wet - pigment is evenly suspended. */
    0%  { transform: scale(0.62); opacity: 0.01; }
    16% { transform: scale(0.80); opacity: 0.01;
          animation-timing-function: cubic-bezier(0.45, 0.05, 0.75, 0.62); }
    /* Most of the migration happens across here, still visibly moving. */
    56% { transform: scale(0.95); opacity: 0.76;
          animation-timing-function: cubic-bezier(0.22, 0.50, 0.24, 1); }
    /* A long decelerating tail. This segment used to be ease-in, which ends at
       full speed: the ring was still darkening at its fastest when the
       animation hit 100% and stopped dead. Drying asymptotes - it has to ease
       out, or the whole drop appears to be cut off mid-way. */
    100% { transform: scale(1); opacity: 1; }
}

/* --- Water running ahead of the pigment ----------------------------------- */

.wc-halo {
    opacity: 1;
    animation: wc-halo-spread calc(7600ms * var(--wc-t, 1)) var(--wc-delay, 0ms) both;
}

@keyframes wc-halo-spread {
    /* Transform is declared on every keyframe here, not just the ends. With it
       missing from the middle one, which timing function governs the tween is
       ambiguous and browsers disagree. */
    0%   { transform: scale(0.50); opacity: 0.01;
           animation-timing-function: cubic-bezier(0.14, 0.62, 0.20, 1); }
    5%   { transform: scale(0.66); opacity: 1;
           animation-timing-function: cubic-bezier(0.18, 0.55, 0.22, 1); }
    /* Water outruns the pigment and is still creeping once the ring has set. */
    100% { transform: scale(1.14); opacity: 1; }
}

/* Oldest blooms lift out rather than vanishing, so the cap is never visible. */
.wc-bloom.is-lifting {
    opacity: 0;
    transition: opacity 1.3s ease-in;
}

/* Content must sit above the wash. Scoped to opted-in hosts only, so pages
   that use .creative-page-hero without the effect keep their own stacking. */
[data-watercolor] > *:not(.wc-layer) {
    position: relative;
    z-index: 1;
}

/* Reduced motion: no impact, no spray, just the dried stain. Because every base
   rule is the finished state, switching the animations off is all that is
   needed - nothing has to be redeclared. */
@media (prefers-reduced-motion: reduce) {
    .wc-bloom .wc-specks,
    .wc-bloom .wc-body,
    .wc-bloom .wc-ring,
    .wc-bloom .wc-halo {
        animation: none !important;
    }
}

.wc-bloom.no-motion .wc-specks,
.wc-bloom.no-motion .wc-body,
.wc-bloom.no-motion .wc-ring,
.wc-bloom.no-motion .wc-halo {
    animation: none !important;
}

/* Filtered SVG is the costly part; keep the wash lighter on small screens. */
@media (max-width: 768px) {
    .wc-layer { opacity: 0.72; }
}

/* ===========================================================================
   Cyanotype Exposure Reveal
   Artwork develops rather than fading in, following the sequence in the studio
   journal: chartreuse emulsion -> bronze-green under UV -> gunmetal slate ->
   washed, leaving Prussian blue. Driven by js/exposure.js.

   Everything is scoped to .js-exposure, a flag the inline head script adds. With
   JavaScript off the flag never appears, no filter is applied, and the artwork
   simply renders as normal - it never gets stranded mid-development.
   =========================================================================== */

/* Latent: freshly coated emulsion, no image present yet. Applied from the first
   paint so a developed photograph never flashes before the reveal begins. */
.js-exposure .artwork-frame-img {
    filter: sepia(1) saturate(1.45) brightness(1.78) contrast(0.36);
}

.js-exposure .artwork-frame-img.is-developing {
    animation: cyanotype-develop 2200ms var(--exp-delay, 0ms)
               cubic-bezier(0.32, 0.06, 0.28, 1) both;
    will-change: filter;
}

/* Developed. The filter is dropped entirely rather than left at its identity
   values, so a finished image stops costing anything to composite. */
.js-exposure .artwork-frame-img.is-developed {
    filter: none;
    animation: none;
    will-change: auto;
}

@keyframes cyanotype-develop {
    /* Freshly coated rag. Pale, flat, warm - no image resolved yet. */
    0% {
        filter: sepia(1) saturate(1.45) brightness(1.78) contrast(0.36);
    }
    /* Sunlight begins to act and the coating deepens toward tan. */
    38% {
        filter: sepia(0.95) saturate(1.4) brightness(1.28) contrast(0.6);
    }
    /* Fully exposed, before washing: the darkest and least saturated moment. */
    70% {
        filter: sepia(0.5) saturate(0.85) brightness(0.9) contrast(0.9);
    }
    /* Washed in cold water. Unexposed salts dissolve; Prussian blue remains.
       No hue-rotate in the chain at all now: it only existed to push the
       beige toward chartreuse, and it carried the hazard that any value other
       than 0deg at the end would be applied to the real photograph once sepia
       reached zero. */
    100% {
        filter: sepia(0) saturate(1) brightness(1) contrast(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-exposure .artwork-frame-img {
        filter: none;
        animation: none;
    }
}

/* ===========================================================================
   Journal frame mark
   Replaces the translucent blurred pill that used to float over the cover
   photo - that chip was the one element on the card made of glass rather than
   paper. This is a slip of cotton stock torn down its left edge and laid on the
   print, carrying a serif plate number and a letterpress label.
   =========================================================================== */

.journal-frame-mark {
    position: absolute;
    /* Flush into the corner: a label affixed to the print, not a floating chip. */
    bottom: 0;
    right: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px 7px 22px;
    background: var(--card-bg);
    /* Deckled top and left edges. The right and bottom sit flush in the card
       corner, so only these two are exposed. Deviations stay under ~2.5% to
       match the torn-paper polygons used elsewhere on the site: any larger
       and the shape stops reading as torn cotton and becomes a ribbon tail. */
    clip-path: polygon(
        1.4% 2.4%, 20% 0.8%, 42% 2.6%, 63% 0.9%, 84% 2.3%, 100% 1.2%,
        100% 100%, 0 100%,
        0.9% 78%, 2.3% 56%, 0.7% 34%, 2.1% 14%
    );
    /* box-shadow would be clipped away with the torn edge; drop-shadow follows
       the clipped silhouette instead, so the slip lifts off the photograph. */
    filter: drop-shadow(-2px -2px 5px rgba(0, 0, 0, 0.22));
}

.journal-frame-count {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    line-height: 1;
    font-weight: 600;
    color: var(--primary);
}

/* Sized to match the distressed labels on the About page. The turbulence mask
   eats roughly 15% of every glyph, so it needs the weight and the tracking to
   stay legible - do not shrink this further. */
.journal-frame-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
}

/* ===========================================================================
   Scrollable popups
   The paper card is rounded, so a default square scrollbar runs straight into
   the corner radius and reads as a separate strip bolted to the outside. This
   slims it, insets it, and puts it in the site's ink.
   =========================================================================== */

.newsletter-paper-card {
    scrollbar-width: thin;                                  /* Firefox */
    scrollbar-color: rgba(0, 49, 83, 0.32) transparent;
}

.newsletter-paper-card::-webkit-scrollbar {
    width: 11px;
}

.newsletter-paper-card::-webkit-scrollbar-track {
    background: transparent;
    /* Keep the track clear of the rounded corners at both ends. */
    margin: 26px 0;
}

.newsletter-paper-card::-webkit-scrollbar-thumb {
    background-color: rgba(0, 49, 83, 0.28);
    border-radius: 99px;
    /* Transparent border plus content-box clipping is what insets the thumb, so
       it floats in the margin instead of touching the card edge. */
    border: 3px solid transparent;
    background-clip: content-box;
}

.newsletter-paper-card::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 49, 83, 0.46);
}

/* ===========================================================================
   Journal category stamp
   Was a translucent block with a backdrop blur. Solid ink instead: the glass
   was the tell, and it clashed with the torn cotton frame mark opposite it.
   =========================================================================== */

.journal-category-stamp {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--primary);
    color: #f3f0e9;
    padding: 5px 12px;
    border-radius: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ===========================================================================
   Events: date stamp and status marks
   Replaces frosted-glass pills carrying Apple system blue and red.
   =========================================================================== */

.event-date-stamp {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 13px 6px 13px;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid rgba(0, 49, 83, 0.22);
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.event-date-stamp .stamp-month {
    display: block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.event-date-stamp .stamp-day {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--text-main);
}

.event-stamp {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--card-bg);
    border: 1px solid rgba(0, 49, 83, 0.22);
    color: var(--primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

/* A red dot beside a work means sold in a gallery. Worth keeping the colour
   here - it is an art-world convention rather than an alert. */
.event-stamp.is-soldout {
    color: var(--text-main);
    border-color: rgba(0, 0, 0, 0.14);
}

.event-stamp.is-soldout::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c8102e;
    flex: none;
}

/* ===========================================================================
   Calendar ledger
   The month view was a stock widget: Apple blue, neutral greys and floating
   rounded tiles. A studio date book instead - one ruled grid, serif numerals,
   and days carrying work marked with an ink wash rather than a blue chip.
   =========================================================================== */

.cal-weekday-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.cal-weekday {
    padding: 9px 0;
    text-align: center;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* No gaps: the cells share hairlines so it reads as one ruled sheet. */
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
}

.cal-cell {
    min-height: 88px;
    padding: 8px 9px;
    background: var(--card-bg);
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cal-cell.is-blank {
    background: rgba(42, 43, 46, 0.022);
}

.cal-daynum {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1;
    color: var(--text-muted);
    align-self: flex-start;
}

.cal-cell.is-today .cal-daynum {
    color: var(--primary);
    font-weight: 700;
    border-bottom: 1.5px solid var(--primary);
    padding-bottom: 2px;
}

.cal-cell.has-event {
    cursor: pointer;
    background: rgba(0, 49, 83, 0.05);
}

.cal-cell.has-event:hover {
    background: rgba(0, 49, 83, 0.09);
}

.cal-cell.has-event .cal-daynum {
    color: var(--text-main);
}

.cal-event-label {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 49, 83, 0.28);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cal-cell { min-height: 62px; padding: 5px; }
    .cal-daynum { font-size: 0.9rem; }
    .cal-event-label { font-size: 0.52rem; letter-spacing: 0; }
}

/* ===========================================================================
   Distressed display type
   A coarser sibling of .distressed-blue-text, for type set large.

   The label version masks at 100px with a fine 0.3 turbulence. At label sizes
   that grain sits below the stroke width and reads as ink soaking in. Used on
   a 1.65rem serif it lands ON the stroke width instead, chewing thin italic
   serifs into noise. So this variant scales the grain up with the type (260px
   tile, coarser noise) and eases the erosion floor from 0.15 to 0.55, which
   varies ink density across a letterform rather than punching holes in it -
   the difference between an inked impression and a damaged one.

   It carries its own font and colour rather than pairing with .letterpress-text:
   that class sets a text-shadow with !important, which paints behind the
   transparent glyph fill and shows through as a dark ghost.
   =========================================================================== */

.distressed-display {
    font-family: 'EB Garamond', Georgia, serif;
    /* Charcoal leaning very slightly to Prussian, as ink on rag does. */
    background: linear-gradient(158deg, #141518 0%, #17202b 48%, #101a24 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Shown if background-clip: text is unsupported. */
    color: #141518;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='distressLg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.58 0.42'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23distressLg)' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='distressLg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='4' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.58 0.42'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23distressLg)' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 260px 260px;
    mask-size: 260px 260px;
}

/* ===========================================================================
   Admin console theme
   The console was built on Apple's system palette and font stack - #f5f5f7
   chrome, #0071e3 accents, -apple-system type - so it reads as a different
   product from the site it administers. This retones the shared shell onto the
   studio's own tokens.

   Appended rather than edited in place: these override the originals by source
   order at equal specificity, so the change is easy to read and easy to revert.
   =========================================================================== */

.admin-body {
    background-color: var(--bg-light);
    font-family: var(--font-sans);
    color: var(--text-main);
}

.admin-sidebar {
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
}

.sidebar-header {
    border-bottom-color: var(--border-color);
}

.user-profile-summary {
    background-color: rgba(0, 49, 83, 0.04);
    border: 1px solid rgba(0, 49, 83, 0.09);
}

.user-profile-summary i {
    color: var(--primary);
}

.user-profile-summary h4 {
    font-family: var(--font-heading);
    color: var(--text-main);
}

.menu-link {
    border-radius: 3px;
    color: var(--text-muted);
}

.menu-link:hover {
    color: var(--text-main);
    background-color: rgba(0, 49, 83, 0.05);
}

.menu-link.active {
    color: var(--primary);
    background-color: rgba(0, 49, 83, 0.08);
    /* A ruled marker rather than a filled tab, matching the ledger elsewhere. */
    box-shadow: inset 2px 0 0 var(--primary);
}

.admin-topbar {
    background-color: var(--card-bg);
    border-bottom: 1px solid var(--border-color);
}

.admin-topbar h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--text-main);
}

.sidebar-footer {
    border-top-color: var(--border-color);
}

/* Muted ink red rather than iOS alert red. */
.logout-btn,
.mobile-logout-btn {
    color: #8f2436 !important;
}

.metric-card,
.manager-table-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-color);
}

/* Status marks: stamps rather than pills, and the gallery red dot for sold -
   the same convention now used on the public events cards. */
.status-badge {
    border-radius: 2px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 5px 11px;
}

.status-badge.available {
    background-color: rgba(0, 49, 83, 0.06);
    color: var(--primary);
    border: 1px solid rgba(0, 49, 83, 0.22);
}

.status-badge.sold {
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 1px solid rgba(0, 0, 0, 0.14);
}

.status-badge.sold::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8102e;
    margin-right: 6px;
    vertical-align: middle;
}

/* ===========================================================================
   Journal reader: book typesetting
   She reads, and photographs quotes she likes. So her own writing should be set
   the way a book sets writing - a measured column, a drop cap, an epigraph -
   rather than dumped full-bleed the way a blog template would.
   =========================================================================== */

.journal-entry-no {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* A measured column. The modal is ~730px of content width, which runs to about
   85 characters a line - well past comfortable. This holds it near 70. */
#readerContent {
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
    white-space: normal;
}

.journal-para {
    margin: 0 0 1.15em 0;
}

.journal-para:last-child {
    margin-bottom: 0;
}

/* Drop cap on the opening paragraph only.
   A real span rather than ::first-letter, because the gap after the cap has to
   be set per glyph and ::first-letter cannot be told them apart. journal.php
   measures each letter's right sidebearing and writes --cap-kern accordingly.
   It also lets leading punctuation be handled deliberately. */
.journal-dropcap {
    font-family: var(--font-heading);
    float: left;
    font-size: 3.5em;
    line-height: 0.82;
    padding-top: 0.06em;
    margin-right: var(--cap-kern, 0.02em);
    /* Tapered letters carry a shape-outside silhouette; this keeps an even gap
       all the way down that edge instead of only beside the widest point. */
    shape-margin: 0.07em;
    color: var(--primary);
    font-weight: 600;
}

/* An opening quote hangs into the margin rather than pushing the letter in. */
.journal-dropcap .cap-quote {
    margin-left: -0.42em;
    margin-right: 0.02em;
}

/* An epigraph: a quote she has collected, set above the entry the way a book
   sets one - indented, italic, unquoted, with the source beneath. */
.journal-epigraph {
    max-width: 30em;
    margin: 0 auto 30px auto;
    padding: 0 0 0 20px;
    border-left: 2px solid rgba(0, 49, 83, 0.25);
}

.journal-epigraph p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--text-main);
    margin: 0 0 8px 0;
}

.journal-epigraph cite {
    font-size: 0.76rem;
    font-style: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The field log. Freeform label/value lines, so she records whatever she
   actually bothered to note - anything she leaves out simply does not appear. */
.journal-fieldlog {
    max-width: 36em;
    margin: 0 auto 28px auto;
    padding: 16px 20px;
    background: rgba(0, 49, 83, 0.035);
    border-top: 1px solid rgba(0, 49, 83, 0.22);
    border-bottom: 1px solid rgba(0, 49, 83, 0.22);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 22px;
}

.journal-fieldlog dt {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.journal-fieldlog dd {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--text-main);
}

/* Colophon: what she was reading and listening to while the work was made. */
.journal-colophon {
    max-width: 36em;
    margin: 26px auto 0 auto;
    padding-top: 18px;
    border-top: 1px dashed rgba(216, 214, 208, 0.9);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
}

.journal-colophon > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.journal-colophon .colophon-label {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex: none;
}

.journal-colophon .colophon-value {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-main);
}

.journal-colophon a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 49, 83, 0.3);
}

.journal-colophon a:hover {
    border-bottom-color: var(--primary);
}

/* Signs off the entry, using the seal already used on the newsletter card. */
.journal-studio-mark {
    max-width: 36em;
    margin: 30px auto 4px auto;
    text-align: center;
    color: rgba(0, 49, 83, 0.4);
    font-size: 1.1rem;
    letter-spacing: 6px;
}

/* ===========================================================================
   Share preview
   Shows how an entry's link will actually unfurl when it is posted, and hands
   over a caption ready to paste. Facebook renders the OG tags the page serves,
   so this mirrors those exact fields rather than inventing a layout.
   =========================================================================== */

.share-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 18px;
}

.share-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.share-panel-head h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
}

.share-schedule-note {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 2px;
    background: rgba(0, 49, 83, 0.06);
    border: 1px solid rgba(0, 49, 83, 0.22);
    color: var(--primary);
}

.share-schedule-note.is-scheduled {
    background: rgba(200, 129, 0, 0.08);
    border-color: rgba(200, 129, 0, 0.35);
    color: #8a5a00;
}

.share-grid {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 18px;
    align-items: start;
}

/* --- The Facebook link card ------------------------------------------------
   Deliberately in Facebook's own visual language, not the studio's: the point
   is to show what it will look like over there, so restyling it to match this
   site would defeat the purpose. */
.fb-card {
    border: 1px solid #dddfe2;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

.fb-card-img {
    width: 100%;
    aspect-ratio: 1.91 / 1;
    object-fit: cover;
    display: block;
    background: #e9ebee;
}

.fb-card-body {
    padding: 10px 12px;
    background: #f2f3f5;
    border-top: 1px solid #dddfe2;
}

.fb-card-domain {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #606770;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
}

.fb-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1d2129;
    line-height: 1.25;
    margin: 0 0 3px 0;
    /* Facebook clamps the headline to two lines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fb-card-desc {
    font-size: 0.85rem;
    color: #606770;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Caption kit ---------------------------------------------------------- */

.share-caption-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.share-caption {
    width: 100%;
    min-height: 132px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 0.85rem;
    line-height: 1.55;
    resize: vertical;
    background: #fff;
    color: var(--text-main);
}

.share-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.share-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}

.share-count.is-over {
    color: #c8102e;
    font-weight: 700;
}

@media (max-width: 860px) {
    .share-grid { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Plates from this session
   Finished work linked to a journal entry. Distinct from the process
   photographs above it - those are frames from the session, these are the
   plates that came out of it, and they are for sale.
   =========================================================================== */

.plates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
}

.plate-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.plate-card:hover {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

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

.plate-card-body {
    padding: 9px 11px 11px 11px;
    border-top: 1px solid var(--border-color);
}

.plate-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--text-main);
    margin: 0 0 5px 0;
}

.plate-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.plate-price {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--primary);
}

.plate-status {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Gallery convention: a red dot means the work is spoken for. */
.plate-status.is-sold::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c8102e;
    margin-right: 5px;
    vertical-align: middle;
}

/* The picker in the composer. */
.plate-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 10px;
    max-height: 232px;
    overflow-y: auto;
    padding: 4px;
}

.plate-pick {
    position: relative;
    display: block;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

.plate-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.plate-pick img {
    width: 100%;
    height: 78px;
    object-fit: cover;
    display: block;
}

.plate-pick span {
    display: block;
    padding: 6px 8px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-main);
}

.plate-pick:has(input:checked) {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.plate-pick:has(input:checked)::after {
    content: '\2713';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.72rem;
    line-height: 19px;
    text-align: center;
}

/* ===========================================================================
   Journal preview
   Opens an entry the way it will look published, before offering the editor.
   The frame loads the real journal page rather than re-creating its layout,
   so a draft is shown by the same code that will render it once it is live.
   =========================================================================== */

.preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(18, 19, 21, 0.72);
    backdrop-filter: blur(6px);
    z-index: 100001;
    justify-content: center;
    align-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.preview-shell {
    background: var(--card-bg);
    border-radius: 14px;
    width: 100%;
    max-width: 1080px;
    height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
}

.preview-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: #fff;
    flex-wrap: wrap;
}

.preview-bar h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-main);
    flex: 1;
    min-width: 180px;
}

.preview-state {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 2px;
    background: rgba(0, 49, 83, 0.06);
    border: 1px solid rgba(0, 49, 83, 0.22);
    color: var(--primary);
}

.preview-state.is-draft {
    background: rgba(200, 129, 0, 0.09);
    border-color: rgba(200, 129, 0, 0.35);
    color: #8a5a00;
}

.preview-frame {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--bg-light);
}

@media (max-width: 720px) {
    .preview-overlay { padding: 0; }
    .preview-shell { height: 100vh; border-radius: 0; max-width: none; }
}