/* Azulma 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;
    /* Portrait-leaning, because the work is. These are 18x24 and 15x11 prints
       photographed vertically; the old 4:3 landscape box cropped the top and
       bottom off every one of them. 4:5 holds a 3:4 print with only a little
       air at the sides. */
    padding-top: 125%;
    background-color: var(--bg-light); /* Show linen through torn photo edges */
}

.artwork-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Never crop the artwork. It is the product; a cropped print is the wrong
       print. The linen ground behind it reads as mount board. */
    object-fit: contain;
    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%;
        /* Pinned to the bottom of the viewport rather than given a height in
           vh. On a phone 100vh is the LARGE viewport - the height with the
           address bar hidden - so calc(100vh - 60px) made the drawer taller
           than the screen and pushed its lower half out of sight, and it
           resized mid-gesture as the bar showed and hid. bottom:0 is whatever
           is actually visible, with no arithmetic to get wrong. */
        bottom: 0;
        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;
        /* Stacked, the sidebar is a strip across the top. Left at full height
           it reserves a whole screen of blank space above every console page. */
        min-height: 0;
        max-height: none;
        overflow-y: visible;
    }
    
    .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%;
    /* Same reason as .artwork-image: the plates are portrait prints, and a
       fixed 132px landscape strip beheaded them. */
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: contain;
    background: var(--bg-light);
    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; }
}

/* ===========================================================================
   Photo lightbox inside a journal entry
   The gallery thumbnails used to open the raw file in a new tab, which threw
   the reader out of the story. This keeps them in it.
   =========================================================================== */

.story-photo-thumb {
    display: block;
    height: 140px;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: none;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.story-photo-thumb:hover,
.story-photo-thumb:focus-visible {
    border-color: rgba(0, 43, 73, 0.45);
    transform: translateY(-2px);
}

.story-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    /* Above the reader modal, which sits at 100000. */
    z-index: 100010;
    background: rgba(18, 19, 21, 0.93);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.story-lightbox.is-open {
    opacity: 1;
}

.story-lightbox-stage {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.story-lightbox-stage img {
    max-width: 100%;
    /* Room left under the photo for the counter. */
    max-height: calc(100vh - 110px);
    object-fit: contain;
    border-radius: 3px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.story-lightbox-count {
    font-family: var(--font-heading);
    font-size: 0.84rem;
    letter-spacing: 1.5px;
    color: rgba(243, 240, 233, 0.72);
}

.story-lightbox-close,
.story-lightbox-nav {
    background: rgba(243, 240, 233, 0.1);
    border: 1px solid rgba(243, 240, 233, 0.22);
    color: #f3f0e9;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.story-lightbox-close:hover,
.story-lightbox-nav:hover {
    background: rgba(243, 240, 233, 0.22);
    border-color: rgba(243, 240, 233, 0.45);
}

.story-lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    line-height: 1;
}

.story-lightbox-nav {
    flex: none;
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.story-lightbox.is-single .story-lightbox-nav {
    visibility: hidden;
}

@media (max-width: 620px) {
    .story-lightbox {
        padding: 14px;
    }

    /* On a phone the arrows sit over the photo rather than beside it. */
    .story-lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .story-lightbox-nav.is-prev { left: 10px; }
    .story-lightbox-nav.is-next { right: 10px; }
}

/* ===========================================================================
   Narrow screens: forms and the admin console
   The commission form's paired fields and the console's two-column layouts
   were fixed at two columns with no breakpoint, so both overflowed the
   viewport on a phone. Several carry inline styles, hence the !important.
   =========================================================================== */

@media (max-width: 680px) {
    /* Paired fields stack: name/email, timeline/budget. */
    .color-picker-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Commission Art / Book Event sat side by side and ran off the edge. */
    .radio-tab-toggle {
        flex-direction: column;
    }

    .radio-tab-toggle label {
        width: 100%;
        text-align: center;
    }

    /* The shop's three filters are short enough to stay on one line, and
       stacking them cost a third of the screen before any work was visible.
       Opt in per use, since it depends on the labels. */
    .radio-tab-toggle.is-compact {
        flex-direction: row;
    }

    .radio-tab-toggle.is-compact label {
        width: auto;
        padding: 7px 6px !important;
        font-size: 0.76rem !important;
        letter-spacing: -0.1px;
    }

    .form-narrow-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .form-container-card {
        padding: 24px 18px;
    }

    /* Anything laid out in fixed columns inline collapses to one. */
    .form-container-card [style*="grid-template-columns"],
    .admin-content-inner [style*="grid-template-columns: 1fr 1fr"],
    .admin-content-inner [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Nothing should be able to push the page sideways. */
    body {
        overflow-x: hidden;
    }
}

/* --- Admin console on a phone -------------------------------------------- */

@media (max-width: 860px) {
    .admin-wrapper {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 14px;
    }

    /* The menu becomes a scrolling strip rather than a tall column that
       pushes every screen's content below the fold. */
    .sidebar-menu {
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .menu-link {
        flex: none;
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    .menu-link.active {
        box-shadow: inset 0 -2px 0 var(--primary);
    }

    .user-profile-summary,
    .sidebar-footer {
        display: none;
    }

    .admin-topbar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }

    .admin-topbar h2 {
        font-size: 1.15rem;
    }

    .admin-content-inner {
        padding: 16px 14px;
    }

    .metrics-grid {
        grid-template-columns: 1fr;
    }

    /* Card grids in the managers, all declared inline. */
    .inventory-cards-grid,
    .journal-cards-grid,
    .gallery-cards-grid {
        grid-template-columns: 1fr !important;
    }

    .inventory-controls-bar,
    .filter-pills {
        flex-wrap: wrap;
    }

    /* Console tables have too many columns for a phone. Rather than crushing
       them, let the card they sit in scroll sideways on its own. */
    .admin-main .form-container-card {
        overflow-x: auto;
    }

    .admin-main table {
        min-width: 540px;
    }
}

/* ===========================================================================
   Studio Image Library (admin)
   Her photographs, kept in the albums they arrived in. Everything here is
   portrait-first: the work is 18x24 and 15x11 prints shot vertically, so the
   grid is built around tall images rather than cropping them to fit.
   =========================================================================== */

.media-album-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px 2px;
    -webkit-overflow-scrolling: touch;
}

.media-album {
    flex: none;
    width: 124px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.media-album:hover {
    border-color: rgba(0, 43, 73, 0.4);
    transform: translateY(-2px);
}

.media-album.is-current {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 43, 73, 0.14);
}

.media-album img {
    width: 100%;
    height: 84px;
    object-fit: cover;
    display: block;
    background: var(--bg-light);
}

.media-album-name {
    display: block;
    padding: 7px 9px 9px 9px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1d1d1f;
}

.media-album-count {
    position: absolute;
    top: 7px;
    right: 7px;
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9px;
}

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

.media-item {
    margin: 0;
}

.media-thumb {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-light);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.media-thumb:hover {
    border-color: rgba(0, 43, 73, 0.45);
    transform: translateY(-2px);
}

.media-thumb img {
    width: 100%;
    /* Tall, because the work is. contain rather than cover, so nothing is
       cropped out of a print she is trying to recognise at a glance. */
    aspect-ratio: 4 / 5;
    object-fit: contain;
    display: block;
}

.media-item figcaption {
    padding: 7px 2px 0 2px;
    line-height: 1.35;
}

.media-item figcaption strong {
    display: block;
    font-size: 0.84rem;
    color: #1d1d1f;
}

.media-meta {
    font-size: 0.76rem;
    color: #86868b;
    word-break: break-word;
}

/* One photograph, opened large */
.media-detail {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100020;
    background: rgba(18, 19, 21, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    justify-content: center;
    padding: 26px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.media-detail.is-open {
    opacity: 1;
}

.media-detail-inner {
    display: flex;
    gap: 22px;
    align-items: flex-start;
    max-width: 1000px;
    width: 100%;
}

.media-detail-inner img {
    max-height: calc(100vh - 90px);
    max-width: 62%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}

.media-detail-side {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    min-width: 250px;
}

.media-detail-side h4 {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
}

.media-detail-side input[type="text"] {
    width: 100%;
    font-size: 0.78rem;
    padding: 8px 10px;
    margin-top: 5px;
}

.media-detail-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 50%;
    background: rgba(243, 240, 233, 0.1);
    border: 1px solid rgba(243, 240, 233, 0.22);
    color: #f3f0e9;
    cursor: pointer;
}

@media (max-width: 800px) {
    .media-detail { padding: 14px; }
    .media-detail-inner { flex-direction: column; align-items: stretch; }
    .media-detail-inner img { max-width: 100%; max-height: 52vh; }
}

/* ===========================================================================
   Quote library (admin)
   =========================================================================== */

.quote-today {
    background: rgba(0, 43, 73, 0.045);
    border: 1px solid rgba(0, 43, 73, 0.16);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 18px;
}

.quote-today-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--primary);
}

.quote-today blockquote {
    margin: 8px 0 4px 0;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.55;
    color: #1d1d1f;
}

.quote-today cite {
    font-size: 0.82rem;
    color: #6e6e73;
}

.quote-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.quote-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #fff;
}

/* A resting quote is dimmed, not hidden, so it can still be read and edited. */
.quote-row:not(.is-on) {
    opacity: 0.62;
    background: #fbfbfa;
}

.quote-switch {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 2px;
    color: #c7c7cc;
}

.quote-row.is-on .quote-switch {
    color: #34c759;
}

.quote-body {
    flex: 1;
    min-width: 0;
}

.quote-body textarea {
    width: 100%;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
}

.quote-row-foot {
    display: flex;
    gap: 8px;
    margin-top: 7px;
}

.quote-row-foot input {
    flex: 1;
    font-size: 0.82rem;
    padding: 6px 10px;
}

.quote-delete {
    color: #ff3b30;
    border-color: rgba(255, 59, 48, 0.22);
    padding: 7px 10px;
}

@media (max-width: 620px) {
    .quote-row { flex-wrap: wrap; }
    .quote-body { flex-basis: 100%; order: 3; }
}

/* ===========================================================================
   Picking from the library while writing
   The composer opens this instead of asking for a typed image path.
   =========================================================================== */

.libpick {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100030;
    background: rgba(18, 19, 21, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.libpick.is-open {
    display: flex;
}

.libpick-shell {
    background: var(--bg-light);
    border-radius: 14px;
    width: 100%;
    max-width: 940px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

.libpick-bar h4 {
    margin: 0;
    font-size: 1rem;
    flex: 1;
}

.libpick-albums {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 10px 18px;
    background: #fff;
    border-bottom: 1px solid var(--border-color);
}

.libpick-album {
    flex: none;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    color: #515154;
}

.libpick-album.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.libpick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
    gap: 12px;
    padding: 16px 18px;
    overflow-y: auto;
}

.libpick-item {
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-light);
    padding: 0;
    cursor: pointer;
    position: relative;
}

.libpick-item img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    display: block;
}

.libpick-item.is-picked {
    border-color: var(--primary);
}

.libpick-item.is-picked::after {
    content: "\2713";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.libpick-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: #fff;
    border-top: 1px solid var(--border-color);
}

.libpick-empty {
    padding: 30px 18px;
    text-align: center;
    color: #86868b;
    font-size: 0.9rem;
}

/* Rows in the epigraph picker */
.quote-pick-row {
    display: block;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 9px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.quote-pick-row:hover {
    border-color: var(--primary);
    background: rgba(0, 43, 73, 0.03);
}

.quote-pick-text {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.96rem;
    line-height: 1.5;
    color: #1d1d1f;
}

.quote-pick-source {
    display: block;
    margin-top: 5px;
    font-size: 0.78rem;
    color: #86868b;
}

.quote-pick-resting {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #86868b;
    background: #f0efec;
    border-radius: 9px;
    padding: 2px 8px;
}

/* ===========================================================================
   Shop: the plate viewer
   This popup was styled like a SaaS product page - iOS green pills, black
   capsules, 24px radii, sans-serif headings. Nothing else on the site looks
   like that. It now uses the same vocabulary as the journal reader and the
   newsletter card: paper ground, Garamond titles, Prussian blue, tight radii,
   and spaced small-cap labels.
   =========================================================================== */

.plate-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(18, 19, 21, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.26s ease;
}

.plate-modal.is-open {
    opacity: 1;
}

.plate-modal-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    width: 100%;
    max-width: 940px;
    max-height: 88vh;
    overflow-y: auto;
    /* Same cotton-cardstock ground as the reader and the newsletter card. */
    background-color: #fdfcf9;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.plate-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    background: none;
    border: none;
    color: #86868b;
    font-size: 1.9rem;
    font-weight: 200;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.plate-modal-close:hover {
    color: var(--primary);
}

/* The piece hangs on linen, matching the gallery cards. */
.plate-modal-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px;
    background: var(--bg-light);
    border-right: 1px solid var(--border-color);
}

.plate-modal-image img {
    max-width: 100%;
    max-height: 66vh;
    object-fit: contain;
    border: 1px solid rgba(42, 43, 46, 0.08);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.plate-modal-body {
    display: flex;
    flex-direction: column;
    padding: 34px 32px 28px 32px;
}

.plate-modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

/* Outlined, not filled. The old solid green and solid black read as system
   chrome dropped onto a paper page. */
.plate-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    padding: 3px 11px;
    border-radius: 2px;
    border: 1px solid rgba(0, 49, 83, 0.3);
    color: var(--primary);
    background: rgba(0, 49, 83, 0.05);
}

.plate-tag.is-sold {
    border-color: rgba(140, 44, 44, 0.32);
    color: #8c2c2c;
    background: rgba(140, 44, 44, 0.05);
}

.plate-tag.is-edition {
    border-color: rgba(42, 43, 46, 0.22);
    color: var(--text-main);
    background: transparent;
}

/* The same tag sitting over a photograph, where it needs its own ground to
   stay legible against whatever is behind it. */
.plate-tag.on-image {
    background: rgba(253, 252, 249, 0.93);
    border-color: rgba(0, 49, 83, 0.25);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.plate-modal-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-main);
    margin: 0 0 6px 0;
}

.plate-modal-price {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border-color);
}

/* A specimen label rather than a spec card. */
.plate-spec {
    margin: 0 0 18px 0;
}

.plate-spec dt {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8a8a8f;
    margin-bottom: 2px;
}

.plate-spec dd {
    margin: 0 0 11px 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-main);
}

.plate-modal-desc {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 24px 0;
    flex-grow: 1;
}

.plate-modal-action {
    margin-top: auto;
}

.plate-modal-buy {
    width: 100%;
    padding: 13px;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

@media (max-width: 780px) {
    .plate-modal {
        padding: 0;
    }

    .plate-modal-card {
        grid-template-columns: 1fr;
        max-height: 100vh;
        height: 100vh;
        border-radius: 0;
        border: none;
    }

    .plate-modal-image {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 22px;
    }

    .plate-modal-image img {
        max-height: 44vh;
    }

    .plate-modal-body {
        padding: 22px 20px 26px 20px;
    }
}

/* ===========================================================================
   Home gallery: a peek, then the rest on request
   The wall runs to nineteen pieces. Showing all of them buries everything
   below it, so six are shown and the rest slide open.
   =========================================================================== */

.curation-more-wrap {
    text-align: center;
    margin-top: 26px;
}

.curation-more-btn {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-family: var(--font-heading);
    font-size: 0.94rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 11px 30px;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.curation-more-btn:hover {
    background: var(--primary);
    color: var(--bg-light);
}

.curation-more-btn i {
    margin-left: 7px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.curation-more-btn.is-open i {
    transform: rotate(180deg);
}

/* Collapsed to nothing and opened by measuring the content, so the reveal is
   an actual slide rather than a jump. */
.curation-rest {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
}

.curation-rest.is-open {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .curation-rest {
        transition: none;
    }
}

/* The pieces on the home wall are clickable now, so they should say so. */
.framed-artwork.is-clickable {
    cursor: pointer;
}

/* ===========================================================================
   Mobile navigation drawer
   The drawer is pinned between the header and the bottom of the viewport, so
   nothing here works in vh: on a phone 100vh is the height with the address
   bar hidden, which is taller than what you can actually see.
   =========================================================================== */

/* Holds the page still behind the open drawer. The class was already being
   toggled by main.js but had no styles, so the page scrolled underneath and
   the address bar showing/hiding resized the menu mid-gesture. The top offset
   is set in JS and carries the parked scroll position. */
body.nav-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

@media (max-width: 992px) {
    /* THE ROOT CAUSE of the drawer's positioning trouble.
       backdrop-filter makes an element the containing block for fixed-position
       descendants, and the drawer lives inside this header. So `position:
       fixed` on the drawer resolved against the 59px header instead of the
       viewport: top and bottom were measured from the header's box, and the
       menu could only be given a size by writing an explicit height in vh -
       which is what the JS was doing, and why the drawer kept ending up the
       wrong size and in the wrong place.
       The blur is a desktop nicety. Dropping it here restores the viewport as
       the containing block; the background goes near-opaque so the header
       still reads as a solid bar with content scrolling under it. */
    .main-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background-color: rgba(255, 255, 255, 0.97);
    }

    /* Short viewports - a phone held sideways is about 360px tall, and six
       menu items at reading size do not fit in what is left under the header.
       Tighten rather than rely on scrolling for a six-item menu. */
    @media (max-height: 500px) {
        .nav-menu {
            padding: 12px 20px 18px 20px !important;
            gap: 4px !important;
        }

        .nav-menu .nav-link {
            font-size: 1rem !important;
            padding: 8px 20px !important;
        }
    }
}