#zeiss {
    margin: 0;
    padding: 0;
    display: block;
}

#zeiss.sponsor {
    margin-bottom: -20px; /* Adjust this value as needed */
}

#heidelberger-druckmaschinen.sponsor {
    transform: scale(120%);
}

/* FAQ table styles */
.qa table {
    border-collapse: collapse;
    border: 1px solid white;
}

.qa table td,
.qa table th {
    border: 1px solid white;
    padding: 5px;
}

.qa table th {
    text-align: left;
}

/* FAQ anchor links */
.qa .anchor-link {
    opacity: 0;
    text-decoration: none;
    font-size: 0.7em;
    margin-left: 0.5em;
    transition: opacity 0.2s ease;
}

.qa:hover .anchor-link {
    opacity: 0.7;
}

.qa .anchor-link:hover {
    opacity: 1;
}

.qa table td {
    text-align: right;
}

/* Contact Form Styles */
.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5em;
}

.form-group label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: bold;
    font-size: 1.1em;
}

.required {
    color: var(--red-light);
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 0.8em;
    font-size: 1em;
    font-family: "Helvetica Neue", "IBM Plex Sans", Arial, sans-serif;
    border: 2px solid white;
    border-radius: 4px;
    background-color: white;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0, 170, 65, 0.2);
}

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

.character-count {
    display: block;
    margin-top: 0.3em;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
}

.error-message {
    display: none;
    color: var(--red-light);
    font-size: 0.9em;
    margin-top: 0.3em;
    font-weight: bold;
}

/* Honeypot field - hidden from users */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* reCAPTCHA container */
.recaptcha-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Submit button */
.submit-button {
    background-color: var(--green);
    color: white;
    font-size: 1.2em;
    font-weight: bold;
    padding: 0.8em 2em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    text-transform: uppercase;
    font-family: "Helvetica Neue", "IBM Plex Sans", Arial, sans-serif;
}

.submit-button:hover:not(:disabled) {
    background-color: var(--green-light);
    transform: translateY(-2px);
}

.submit-button:active:not(:disabled) {
    transform: translateY(0);
}

.submit-button:disabled {
    background-color: var(--grey);
    cursor: not-allowed;
    opacity: 0.7;
}

.submit-button.loading {
    background-color: var(--blue);
}

/* Form messages */
.form-message {
    margin-top: 1.5em;
    padding: 1em;
    border-radius: 4px;
    font-weight: bold;
}

.success-message {
    background-color: var(--green);
    color: white;
    border: 2px solid var(--green-light);
}

.error-message-box {
    background-color: var(--red);
    color: white;
    border: 2px solid var(--red-light);
}

/* Mobile responsive adjustments */
@media screen and (max-width: 640px) {
    .contact-form {
        width: 100%;
    }

    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .submit-button {
        width: 100%;
        padding: 1em;
    }

    .recaptcha-container {
        transform: scale(0.9);
        transform-origin: 0 0;
    }
}

/* Accessibility improvements */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: var(--red-light);
}

.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
    border-color: var(--green-light);
}

/* ========================================
   Pretix Widget Styling
   ======================================== */

/* Main widget container */
.pretix-widget-compat,
.pretix-widget {
    margin: 2em 0;
    padding: 0;
    font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif !important;
}

/* Product/Ticket Item Rows */
.pretix-widget-item-row {
    background-color: white !important;
    border-radius: 8px !important;
    padding: 1.5em !important;
    margin-bottom: 1.5em !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.pretix-widget-item-row:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Category Headers */
.pretix-widget-category-name {
    color: white !important;
    font-size: 1.5em !important;
    font-weight: 600 !important;
    margin: 0 0 1em 0 !important;
    padding-bottom: 0.5em !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.pretix-widget-category-description {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 1.5em !important;
    line-height: 1.6 !important;
}

/* Item Titles and Descriptions */
.pretix-widget-item-title {
    color: #333 !important;
    font-size: 1.15em !important;
    font-weight: 600 !important;
    margin-bottom: 0.5em !important;
}

.pretix-widget-item-description {
    color: #666 !important;
    line-height: 1.6 !important;
    margin-bottom: 1em !important;
}

/* Constrain description text width on large screens */
.pretix-widget .variation-description,
.pretix-widget .product-description {
    max-width: 800px !important;
}

@media screen and (min-width: 1200px) {
    .pretix-widget .variation-description,
    .pretix-widget .product-description {
        max-width: 700px !important;
    }
}

.pretix-widget-item-meta {
    color: #888 !important;
    font-size: 0.9em !important;
}

/* Pricing Display */
.pretix-widget-pricebox-original-price {
    color: #888 !important;
    text-decoration: line-through !important;
    margin-right: 0.5em !important;
}

.pretix-widget-pricebox-new-price,
.pretix-widget-pricebox .pretix-widget-pricebox-price,
.pretix-widget-item-row .pretix-widget-pricebox-new-price,
.pretix-widget-variation .pretix-widget-pricebox-new-price {
    color: var(--green) !important;
    font-weight: 700 !important;
    font-size: 1.3em !important;
}

.pretix-widget-pricebox-tax {
    color: #555 !important;
    font-size: 0.85em !important;
    margin-top: 0.3em !important;
}

.pretix-widget-pricebox {
    color: #1a1a1a !important;
}

/* Buttons */
.pretix-widget-button,
.pretix-widget-btn-default {
    background-color: var(--green) !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 0.8em 1.5em !important;
    font-weight: 600 !important;
    font-size: 1em !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pretix-widget-button:hover:not(:disabled),
.pretix-widget-btn-default:hover:not(:disabled) {
    background-color: var(--green-light) !important;
    transform: translateY(-2px) !important;
}

.pretix-widget-button:active:not(:disabled),
.pretix-widget-btn-default:active:not(:disabled) {
    transform: translateY(0) !important;
}

.pretix-widget-button:disabled,
.pretix-widget-btn-default:disabled {
    background-color: var(--grey) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Quantity Controls */
.pretix-widget-item-count-inc,
.pretix-widget-item-count-dec {
    background-color: var(--blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.5em 1em !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    min-width: 40px !important;
    font-size: 1.1em !important;
}

.pretix-widget-item-count-inc:hover:not(:disabled),
.pretix-widget-item-count-dec:hover:not(:disabled) {
    background-color: var(--blue-light) !important;
}

.pretix-widget-item-count-inc:disabled,
.pretix-widget-item-count-dec:disabled {
    background-color: var(--grey) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* Quantity Input Field */
.pretix-widget-pricebox-price-input {
    border: 2px solid #ddd !important;
    border-radius: 4px !important;
    padding: 0.5em !important;
    text-align: center !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    margin: 0 0.5em !important;
    width: 60px !important;
}

.pretix-widget-pricebox-price-input:focus {
    outline: none !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(0, 170, 65, 0.2) !important;
}

/* Availability Indicators */
.pretix-widget-event-availability-green,
.pretix-widget-day-availability-green {
    color: var(--green) !important;
    font-weight: 600 !important;
}

.pretix-widget-event-availability-orange,
.pretix-widget-day-availability-orange {
    color: var(--orange) !important;
    font-weight: 600 !important;
}

.pretix-widget-event-availability-red,
.pretix-widget-day-availability-red {
    color: var(--red) !important;
    font-weight: 600 !important;
}

.pretix-widget-availability-gone,
.pretix-widget-availability-unavailable {
    color: var(--red) !important;
    font-weight: 700 !important;
    font-size: 1.1em !important;
}

/* Alert and Info Messages */
.pretix-widget-alert-box,
.pretix-widget-info-message {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-left: 4px solid var(--blue) !important;
    padding: 1em 1.5em !important;
    margin: 1em 0 !important;
    border-radius: 4px !important;
    color: #333 !important;
}

.pretix-widget-error-message {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-left: 4px solid var(--red) !important;
    padding: 1em 1.5em !important;
    margin: 1em 0 !important;
    border-radius: 4px !important;
    color: #333 !important;
}

/* Voucher Input Section */
.pretix-widget-voucher-input-wrap input {
    border: 2px solid #ddd !important;
    border-radius: 6px 0 0 6px !important;
    padding: 0.8em 1em !important;
    font-size: 1em !important;
    transition: border-color 0.3s ease !important;
}

.pretix-widget-voucher-input-wrap input:focus {
    outline: none !important;
    border-color: var(--green) !important;
    box-shadow: 0 0 0 3px rgba(0, 170, 65, 0.2) !important;
}

.pretix-widget-voucher-button-wrap button {
    background-color: var(--blue) !important;
    color: white !important;
    border: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 0.8em 1.5em !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.pretix-widget-voucher-button-wrap button:hover {
    background-color: var(--blue-light) !important;
}

.pretix-widget-voucher-headline {
    color: white !important;
    font-size: 1.2em !important;
    font-weight: 600 !important;
    margin: 1.5em 0 0.8em 0 !important;
}

.pretix-widget-voucher-text {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Product Images */
.pretix-widget-item-picture {
    border-radius: 8px !important;
    max-width: 150px !important;
    height: auto !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Attribution Footer */
.pretix-widget-attribution {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.85em !important;
    margin-top: 2em !important;
    text-align: center !important;
}

.pretix-widget-attribution a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: underline !important;
}

.pretix-widget-attribution a:hover {
    color: white !important;
}

/* Loading States */
.pretix-widget-loading,
.pretix-widget-frame-loading,
.pretix-widget-lightbox-loading {
    color: white !important;
    font-size: 1.2em !important;
    text-align: center !important;
    padding: 2em !important;
}

/* Buy/Submit Button - 25% larger and 20% wider */
.pretix-widget button[type="submit"],
.pretix-widget input[type="submit"],
.pretix-widget-primary-button,
button.pretix-widget-button[type="submit"] {
    font-size: 1.25em !important;
    padding: 1em 2.25em !important;
    min-height: 50px !important;
    min-width: 200px !important;
    float: right !important;
    margin-left: auto !important;
}

/* Clear float after submit button */
.pretix-widget form::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .pretix-widget-item-row {
        padding: 1em !important;
        margin-bottom: 1em !important;
    }

    .pretix-widget-item-title {
        font-size: 1.1em !important;
    }

    .pretix-widget-category-name {
        font-size: 1.3em !important;
    }

    /* Override buy button size for mobile */
    .pretix-widget button[type="submit"],
    .pretix-widget input[type="submit"],
    .pretix-widget-primary-button,
    button.pretix-widget-button[type="submit"] {
        min-width: auto !important;
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .pretix-widget-button,
    .pretix-widget-btn-default {
        width: 100% !important;
        padding: 1em !important;
        font-size: 0.95em !important;
    }

    .pretix-widget-item-picture {
        max-width: 100% !important;
        margin-bottom: 1em !important;
    }

    .pretix-widget-pricebox-new-price,
    .pretix-widget-pricebox .pretix-widget-pricebox-price,
    .pretix-widget-item-row .pretix-widget-pricebox-new-price,
    .pretix-widget-variation .pretix-widget-pricebox-new-price {
        font-size: 1.2em !important;
        color: #1a1a1a !important;
    }
}

@media screen and (max-width: 480px) {
    .pretix-widget-item-count-inc,
    .pretix-widget-item-count-dec {
        padding: 0.6em 0.8em !important;
        min-width: 35px !important;
    }

    .pretix-widget-pricebox-price-input {
        width: 50px !important;
        margin: 0 0.3em !important;
    }
}

/* Focus States for Accessibility */
.pretix-widget-button:focus,
.pretix-widget-btn-default:focus,
.pretix-widget-item-count-inc:focus,
.pretix-widget-item-count-dec:focus,
.pretix-widget-pricebox-price-input:focus {
    outline: 3px solid var(--yellow) !important;
    outline-offset: 2px !important;
}

/* High Contrast Adjustments */
@media (prefers-contrast: high) {
    .pretix-widget-item-row {
        border: 2px solid #333 !important;
    }

    .pretix-widget-button,
    .pretix-widget-btn-default {
        border: 2px solid white !important;
    }
}


/* ========================================
   Pretix Widget - Variant Grouping
   ======================================== */

/* Parent product with variations */
.pretix-widget-item-with-variations {
    margin-bottom: 2em !important;
}

/* Parent product headline row */
.pretix-widget-main-item-row {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 1) 100%) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.8em !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    position: relative !important;
}

.pretix-widget-main-item-row::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    border-radius: 12px 0 0 0 !important;
}

/* Variations container - single unified white box */
.pretix-widget-item-variations {
    background: white !important;
    border-radius: 0 0 12px 12px !important;
    padding: 0 !important;
    margin-bottom: 2em !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    overflow: hidden !important;
}

/* Individual variation rows - unified within container */
.pretix-widget-variation .pretix-widget-item-row {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 1.5em 2em !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: background-color 0.2s ease !important;
}

/* Remove border from last variation */
.pretix-widget-variation:last-child .pretix-widget-item-row {
    border-bottom: none !important;
}

/* Hover state - subtle background tint only */
.pretix-widget-variation .pretix-widget-item-row:hover {
    background-color: rgba(0, 170, 65, 0.03) !important;
}

/* Variation titles */
.pretix-widget-variation .pretix-widget-item-title {
    color: #1a1a1a !important;
    font-size: 1.15em !important;
    font-weight: 600 !important;
    margin-bottom: 0.5em !important;
    letter-spacing: -0.01em !important;
}

/* Variation descriptions */
.pretix-widget-variation .pretix-widget-item-description {
    color: #555 !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    margin-top: 0.5em !important;
    opacity: 0.9 !important;
}

/* Show/Hide variants button */
.pretix-widget-collapse-indicator {
    background: white !important;
    color: #333 !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
}

.pretix-widget-collapse-indicator:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Responsive adjustments for variants */
@media screen and (max-width: 768px) {
    .pretix-widget-variation .pretix-widget-item-row {
        padding: 1.2em 1.5em !important;
    }

    .pretix-widget-main-item-row {
        padding: 1.5em !important;
    }
}

@media screen and (max-width: 480px) {
    .pretix-widget-variation .pretix-widget-item-row {
        padding: 1em 1.2em !important;
        border-left-width: 3px !important;
    }
}

/* ========================================
   Category-Specific Background Colors
   ======================================== */

/* On-Site Tickets - Blue */
.pretix-widget-category[data-id="243427"] {
    background: var(--blue) !important;
    padding: 1.5em !important;
    border-radius: 12px !important;
    margin-bottom: 2em !important;
}

/* Remote Tickets - Blue */
.pretix-widget-category[data-id="243430"] {
    background: var(--pink) !important;
    padding: 1.5em !important;
    border-radius: 12px !important;
    margin-bottom: 2em !important;
}

/* Discounted On-Site Tickets - Blue Light */
.pretix-widget-category[data-id="243432"] {
    background: var(--blue-light) !important;
    padding: 1.5em !important;
    border-radius: 12px !important;
    margin-bottom: 2em !important;
}

/* Discounted Remote Tickets - Pink */
.pretix-widget-category[data-id="243595"] {
    background: var(--pink-light) !important;
    padding: 1.5em !important;
    border-radius: 12px !important;
    margin-bottom: 2em !important;
}

/* Responsive adjustments for categories */
@media screen and (max-width: 768px) {
    .pretix-widget-category[data-id="243427"],
    .pretix-widget-category[data-id="243430"],
    .pretix-widget-category[data-id="243432"],
    .pretix-widget-category[data-id="243595"] {
        padding: 1em !important;
    }
}
/* ══════════════════════════════════════════════════════════════
   Design customizations v3–v9 (consolidated 2026-03-01)
   ══════════════════════════════════════════════════════════════ */

/* §06 primary button — yellow fill, ink text + border (authoritative for the
   newsletter CTA; more specific than the shared .newsletter__cta group). */
.newsletter a.newsletter__cta {
    display: inline-block;
    padding: 0.8em 2.2em;
    background: var(--yellow);
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-base);
    border-radius: 0;
    text-decoration: none;
    transition: all var(--t-fast) var(--ease);
}

/* Hover: 10 % darker yellow, transform stays flat (§06 / §10). */
.newsletter__cta:hover,
.newsletter__cta:focus {
    background: #e0b300;
    color: var(--text-primary);
}

/* ── Persistent Desktop Top Nav ─────────────────────────── */
.topnav {
    display: none; /* hidden on mobile — hamburger takes over */
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(17, 17, 17, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 0 var(--space-page-margin);
    height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.topnav__logo {
    color: var(--white);
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.topnav__links {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: nowrap;       /* topnav must stay on one line */
    white-space: nowrap;
    min-width: 0;
}

.topnav__links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: var(--space-xs) 0;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.topnav__links a:hover,
.topnav__links a:focus {
    color: var(--white);
}

.topnav__cta {
    display: inline-flex;
    align-items: center;
    background: var(--yellow);
    color: var(--text-primary) !important;
    font-weight: 700;
    font-size: var(--font-size-sm);
    text-decoration: none;
    padding: var(--space-xs) var(--space-md);
    border-radius: 0;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease;
}

.topnav__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.15s ease;
    flex-shrink: 0;
}
.topnav__search:hover,
.topnav__search:focus {
    color: var(--white);
}

.topnav__cta:hover,
.topnav__cta:focus {
    background: var(--orange);
    transform: translateY(-1px);
}

@media (min-width: 1024px) {
    .topnav {
        display: flex;
        flex-wrap: nowrap;
    }
    .hamburger-menu {
        display: none !important;
    }
    .sidebar {
        display: none !important;
    }
}

/* ── FAQ Accordion ──────────────────────────────────────── */
.faq-content {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-page-margin);
}

.faq-toc {
    background: var(--neutral-50);
    border-radius: 0;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
}

.faq-toc ol {
    list-style: decimal;
    padding-left: 1.5em;
    columns: 2;
    column-gap: var(--space-xl);
}

.faq-toc li {
    margin-bottom: var(--space-xs);
}

.faq-toc a {
    color: var(--blue);
    text-decoration: none;
    font-weight: 500;
}

.faq-toc a:hover {
    text-decoration: underline;
}

.faq-section {
    margin-bottom: var(--space-xl);
}

.faq-section__title {
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--blue);
    margin-bottom: var(--space-md);
}

.faq-section__desc {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.faq-item {
    border: 1px solid var(--neutral-200);
    border-radius: 0;
    margin-bottom: var(--space-sm);
    background: var(--white);
    transition: box-shadow 0.15s ease;
}

.faq-item[open] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.faq-item__question {
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
    font-size: var(--font-size-md);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    color: var(--text-primary);
}

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

.faq-item__question::after {
    content: "+";
    font-size: var(--font-size-xl);
    font-weight: 300;
    color: var(--blue);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

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

.faq-item__question .anchor-link {
    font-size: var(--font-size-xs);
    opacity: 0;
    transition: opacity 0.15s ease;
    text-decoration: none;
}

.faq-item:hover .anchor-link {
    opacity: 0.5;
}

.faq-item__answer {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-item__answer p {
    margin-bottom: var(--space-sm);
}

.faq-item__answer a {
    color: var(--blue);
}

.faq-item__answer table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-md) 0;
    font-size: var(--font-size-sm);
}

.faq-item__answer th,
.faq-item__answer td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--neutral-200);
    text-align: left;
}

.faq-item__answer th {
    background: var(--neutral-50);
    font-weight: 600;
}

/* Remove the old blue background from FAQ */
.faqs.content-block--blue {
    background: transparent;
}

@media (max-width: 768px) {
    .faq-toc ol {
        columns: 1;
    }
    .faq-item__question {
        padding: var(--space-sm) var(--space-md);
    }
    .faq-item__answer {
        padding: 0 var(--space-md) var(--space-md);
    }
}

/* ── Blog Index Cards ───────────────────────────────────── */
.blog-index {
    padding: var(--space-xl) 0;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: 0 var(--space-page-margin);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--neutral-200);
    border-radius: 0;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.blog-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.blog-card__date {
    font-size: var(--font-size-xs);
    color: var(--blue);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-card__author {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.blog-card__author::before {
    content: "·";
    margin-right: var(--space-xs);
}

.blog-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.blog-card__teaser {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
}

.blog-card__read-more {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--blue);
    margin-top: auto;
}

.blog-card:hover .blog-card__read-more {
    text-decoration: underline;
}

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

/* ── v4: Color Reduction — Calm the rainbow ─────────────── */
/* Override homepage section backgrounds to use a restrained palette:
   - Primary accent (blue) for 1-2 key sections
   - Neutral (off-white, neutral-50) for most content
   - Yellow kept for hero motto (brand identity)
   - White for breathing room between sections
*/

.community {
    background: var(--white);
}

.why-attend {
    background: var(--yellow) !important;
    color: var(--blue) !important;
}

.why-attend *,
.why-attend__title,
.why-attend__highlight-value,
.why-attend__value,
.why-attend__highlight-label,
.why-attend__label,
.why-attend__highlight-icon,
.why-attend h2,
.why-attend h3,
.why-attend p,
.why-attend span {
    color: var(--blue) !important;
}

.tickets-cta {
    background: var(--blue);
    color: var(--white);
}

.tickets-cta__title,
.tickets-cta__body {
    color: var(--white);
}

.tickets-cta__link {
    background: var(--yellow);
    color: var(--text-primary) !important;
}

.tickets-cta__price {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0.5rem 0 0;
}
.tickets-cta__price-strike {
    margin-left: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: line-through;
    opacity: 0.85;
}

/* Persistent archive funnel-CTA (rides the active/inactive switch). */
.funnel-cta {
    background: var(--blue);
    color: var(--white);
}
.funnel-cta__content {
    max-width: var(--content-max-width, 900px);
    margin-inline: auto;
    padding: clamp(1.5rem, 3vw, 2.5rem) var(--page-padding, 1.5rem);
}
.funnel-cta__headline {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 700;
    margin: 0 0 0.35rem;
}
.funnel-cta__sub,
.funnel-cta__deadline {
    margin: 0 0 0.25rem;
    opacity: 0.92;
}
.funnel-cta__deadline {
    font-size: 0.95rem;
}
.funnel-cta__link {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    background: var(--yellow);
    color: var(--text-primary) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Inline newsletter capture on archive surfaces. */
.newsletter-inline {
    background: var(--neutral-50, #f6f7f8);
    border-top: 1px solid var(--neutral-200, #e2e6ea);
    border-bottom: 1px solid var(--neutral-200, #e2e6ea);
}
.newsletter-inline__content {
    max-width: var(--content-max-width, 900px);
    margin-inline: auto;
    padding: clamp(1.25rem, 2.5vw, 2rem) var(--page-padding, 1.5rem);
}
.newsletter-inline__title {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 700;
    margin: 0 0 0.3rem;
}
.newsletter-inline__body {
    margin: 0 0 0.6rem;
    color: var(--text-secondary, #555);
}
.newsletter-inline__link {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 4px;
    background: var(--blue);
    color: var(--white) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Programme status band (active homepage milestone messaging). */
.programme-status {
    background: var(--neutral-50, #f6f7f8);
    border-block: 1px solid var(--neutral-200, #e2e6ea);
}
.programme-status__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    max-width: var(--content-max-width, 900px);
    margin-inline: auto;
    padding: clamp(1rem, 2.5vw, 1.75rem) var(--page-padding, 1.5rem);
}
.programme-status__headline {
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 700;
    margin: 0;
}
.programme-status__sub {
    margin: 0;
    color: var(--text-secondary, #555);
    flex: 1 1 16rem;
}
.programme-status__count {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}
.programme-status__count-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue);
}
.programme-status__count-label {
    color: var(--text-secondary, #555);
}
.programme-status__cta {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 4px;
    background: var(--blue);
    color: var(--white) !important;
    font-weight: 700;
    text-decoration: none;
}

/* Keynote reveal teaser band (active homepage). */
.keynote-teaser {
    background: var(--white);
}
.keynote-teaser__title {
    font-size: var(--font-size-3xl, 2rem);
    margin: 0 0 1.25rem;
}
.keynote-teaser__grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.keynote-teaser__card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--neutral-200, #e2e6ea);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--neutral-50, #f6f7f8);
}
.keynote-teaser__card:hover {
    border-color: var(--blue);
}
.keynote-teaser__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}
.keynote-teaser__info {
    padding: 1rem 1.1rem 1.25rem;
}
.keynote-teaser__name {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
}
.keynote-teaser__role {
    margin: 0 0 0.5rem;
    color: var(--text-secondary, #555);
    font-size: 0.9rem;
}
.keynote-teaser__talk {
    margin: 0 0 0.4rem;
    font-weight: 600;
}
.keynote-teaser__date {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary, #555);
}

/* §00 large colour field — blue primary, white text (§02 text-safe). */
.sponsoring-cta {
    background: var(--blue);
    color: var(--white);
}

.sponsoring-cta__title,
.sponsoring-cta__body {
    color: var(--white);
}

.sponsoring-cta__title {
    margin-top: 0;
}

/* Newsletter band colour lives in main.css (.newsletter — green
   colour field); no override needed here. */

/* ── v4: Team Photo Standardization ─────────────────────── */
.team-member > img,
.team-member > .default-image {
    width: 160px;
    height: 160px;
    border-radius: 0;
    object-fit: cover;
    border: 3px solid var(--neutral-200);
    background: var(--neutral-100);
}

.members {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: flex-start;
    margin-bottom: var(--space-xl);
}

.team-member {
    width: 180px;
    text-align: center;
}

.member-name {
    font-size: var(--font-size-sm) !important;
    margin-top: var(--space-sm);
}

/* ── v4: Sponsor Logo Consistency ───────────────────────── */
.sponsors .content img {
    filter: grayscale(30%);
    transition: filter 0.2s ease, transform 0.15s ease;
    padding: var(--space-sm);
}

.sponsors .content img:hover {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* ── v4: Subsite page backgrounds — unified ─────────────── */
.subsite {
    background: var(--white);
    color: var(--text-primary);
}

.subsite a {
    color: var(--blue);
}

/* v3 subsite-title overridden by v9 dark header below */

/* Override ALL colored subsite backgrounds to white */
.subsite[class*="content-block"] {
    background: var(--white) !important;
    color: var(--text-primary) !important;
}

.subsite[class*="content-block"] h2,
.subsite[class*="content-block"] h3,
.subsite[class*="content-block"] h4,
.subsite[class*="content-block"] p,
.subsite[class*="content-block"] li,
.subsite[class*="content-block"] a:not(.button) {
    color: var(--text-primary);
}

/* Blog post page — override green to white */
.subsite.blog.content-block--green {
    background: var(--white);
    color: var(--text-primary);
}

.subsite.blog.content-block--green h2,
.subsite.blog.content-block--green h3,
.subsite.blog.content-block--green h4,
.subsite.blog.content-block--green p,
.subsite.blog.content-block--green table,
.subsite.blog.content-block--green th,
.subsite.blog.content-block--green td {
    color: var(--text-primary);
}

/* ── v5: Back-to-top button ─────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: 99;
    width: 48px;
    height: 48px;
    border-radius: 0;
    background: var(--blue);
    color: var(--white);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    background: var(--text-primary);
}

/* ── v5: Footer mobile improvements ─────────────────────── */
@media (max-width: 768px) {
    .footer-links__nav {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .footer-links__nav a {
        padding: var(--space-sm) 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        font-size: var(--font-size-sm);
    }

    footer {
        padding: var(--space-lg) var(--space-page-margin);
    }

    .footer-social-links a {
        min-width: 48px;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── v5: Venue page styling ─────────────────────────────── */
.subsite.call-for-proposals .content h2 {
    font-size: var(--font-size-2xl);
    color: var(--blue);
    padding-bottom: var(--space-sm);
    border-bottom: 2px solid var(--neutral-200);
    margin-top: var(--space-xl);
}

.subsite.call-for-proposals .content h3 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-top: var(--space-lg);
}

.subsite.call-for-proposals .content h4 {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-top: var(--space-md);
}

.subsite.call-for-proposals .content {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-page-margin);
    line-height: 1.7;
}

.subsite.call-for-proposals .content p {
    margin-bottom: var(--space-md);
}

.subsite.call-for-proposals .content a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.subsite.call-for-proposals .content img {
    border-radius: 0;
    margin: var(--space-md) 0;
}

/* ── v5: Talks page improvements ────────────────────────── */
.talk-list .tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.talk-list .tag {
    font-size: var(--font-size-xs);
    background: var(--neutral-100);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 0;
    font-weight: 500;
}

/* ── v5: Single-member committee fix ────────────────────── */
.members:has(.team-member:only-child) {
    justify-content: flex-start;
}

/* ── v5: 404 page styling ───────────────────────────────── */
.error-page {
    text-align: center;
    padding: var(--space-3xl) var(--space-page-margin);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-page h1 {
    font-size: var(--font-size-5xl);
    color: var(--blue);
}

.error-page p {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.error-page a {
    background: var(--blue);
    color: var(--white);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 0;
    text-decoration: none;
    font-weight: 600;
}

/* ── v5 fix: Ensure venue and similar subsite body text is visible ── */
.subsite .content p,
.subsite .content li,
.subsite .content ul,
.subsite .content ol {
    color: var(--text-primary);
}

.subsite .content h2 {
    color: var(--blue);
    border-bottom: 2px solid var(--neutral-200);
    padding-bottom: var(--space-sm);
    margin-top: var(--space-xl);
}

.subsite .content h3 {
    color: var(--text-primary);
    margin-top: var(--space-lg);
}

/* ── v6: Bigger featured speaker images ─────────────────── */
/* Override multi-mode carousel images to be larger while keeping card height */
#carousel-slides-featured .slide-image {
    width: clamp(160px, 18vw, 240px);
    height: clamp(160px, 18vw, 240px);
    border-radius: 0;
    margin: 0 auto var(--space-sm);
}

#carousel-slides-featured .slide-content {
    padding: var(--space-md) var(--space-md);
}

#carousel-slides-featured .slide-title {
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
}

@media screen and (max-width: 768px) {
    #carousel-slides-featured .slide-image {
        width: clamp(180px, 45vw, 280px);
        height: clamp(180px, 45vw, 280px);
    }
}

/* ── v7: Masterclass carousel — text-only, distinct visual ──── */
/* Give the masterclass carousel a completely different look:
   - No images, text-focused cards
   - Left color accent border (Aicher-inspired color stripe)
   - White card on neutral background
   - Trainer name prominent
   - Compact, information-dense layout
*/

[data-carousel-id="masterclasses"] {
    background: var(--neutral-50);
    padding: var(--space-xl) 0;
}

[data-carousel-id="masterclasses"] .carousel-header {
    background: var(--blue);
    margin: 0 calc(-1 * var(--space-page-margin));
    padding: var(--space-lg) var(--space-page-margin) var(--space-lg);
}

[data-carousel-id="masterclasses"] .carousel-header__title {
    color: var(--white);
}

[data-carousel-id="masterclasses"] .carousel-header__teaser {
    color: rgba(255, 255, 255, 0.9);
}

[data-carousel-id="masterclasses"] .carousel-slide {
    background: var(--white);
    border-left: 4px solid var(--blue);
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

[data-carousel-id="masterclasses"] .carousel-slide:nth-child(3n+2) {
    border-left-color: var(--green);
}

[data-carousel-id="masterclasses"] .carousel-slide:nth-child(3n+3) {
    border-left-color: var(--yellow);
}

[data-carousel-id="masterclasses"] .carousel-slide:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

[data-carousel-id="masterclasses"] .slide-content {
    padding: var(--space-lg);
    text-align: left;
}

[data-carousel-id="masterclasses"] .slide-badge {
    background: var(--neutral-100);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

[data-carousel-id="masterclasses"] .slide-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

[data-carousel-id="masterclasses"] .slide-teaser {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

[data-carousel-id="masterclasses"] .slide-cta {
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
    font-weight: 600;
    padding: var(--space-xs) var(--space-md);
}

[data-carousel-id="masterclasses"] .slide-cta:hover {
    background: var(--blue);
    color: var(--white);
}

/* Masterclass carousel dots + controls: same as featured carousel */

/* ══════════════════════════════════════════════════════════════
   v8: Otl Aicher / Munich 1972 — Inspired Element Design
   ══════════════════════════════════════════════════════════════
   Philosophy: Strict geometry, flat color fields, no rounded corners,
   horizontal stripe compositions, reduction to essential forms.
   We keep the PyCon DE color palette — only the FORM changes.
   ══════════════════════════════════════════════════════════════ */

/* ── Global: Remove all rounded corners ─────────────────── */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* ── Buttons: Geometric, flat, bold ─────────────────────── */
.topnav__cta,
.slide-cta,
.tickets-cta__link,
.community__link,
.newsletter__cta,
.sponsoring-cta__link,
.blog-card__read-more,
a.button,
button.button,
.faq-toc a,
.error-page a {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    box-shadow: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

/* ── Top nav: Aicher-inspired horizontal bar ────────────── */
.topnav {
    border-radius: 0 !important;
    border-bottom: 3px solid var(--yellow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--text-primary);
}

.topnav__cta {
    border-radius: 0 !important;
    padding: var(--space-sm) var(--space-lg);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Cards: Sharp edges, structural borders ─────────────── */
.blog-card {
    border-radius: 0 !important;
    border: 2px solid var(--neutral-200);
    box-shadow: none;
}

.blog-card:hover {
    border-color: var(--blue);
    box-shadow: none;
    transform: none;
}

/* ── FAQ: Geometric accordion ───────────────────────────── */
.faq-item {
    border-radius: 0 !important;
    border: 2px solid var(--neutral-200);
    box-shadow: none !important;
}

.faq-item[open] {
    border-color: var(--blue);
    box-shadow: none !important;
}

.faq-item__question::after {
    font-family: monospace;
    font-weight: 700;
}

.faq-toc {
    border-radius: 0 !important;
    border: 2px solid var(--neutral-200);
    border-left: 4px solid var(--blue);
}

/* ── Carousel controls: Geometric ───────────────────────── */
.carousel-btn {
    border-radius: 0 !important;
    border: 2px solid currentColor;
}

.carousel-dot {
    border-radius: 0 !important;
    width: 12px;
    height: 12px;
}

/* Hero color stripe removed — clean edge */
.hero::after {
    display: none !important;
}

/* ── Facet pills: Flat geometric tags ───────────────────── */
.hero__facet {
    border-radius: 0 !important;
    padding: var(--space-xs) var(--space-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-xs);
}

/* ── Sponsor logos: No filter effects, clean grid ───────── */
.sponsors .content img {
    filter: none;
    padding: var(--space-md);
}

.sponsors .content img:hover {
    filter: none;
    transform: none;
}

/* ── Team photos: Square, not circular ──────────────────── */
.team-member > img,
.team-member > .default-image {
    border-radius: 0 !important;
    border: 2px solid var(--neutral-200);
}

/* ── Fix: Social icons must not inherit team photo sizing ── */
.team-member .member-social img {
    width: 24px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    border: none !important;
    object-fit: contain !important;
}

/* ── Slide badges: Flat, geometric, uppercase ───────────── */
.slide-badge {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* ── Featured carousel: Sharp slide images ──────────────── */
.slide-image {
    border-radius: 0 !important;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ── Back-to-top: Square, geometric ─────────────────────── */
.back-to-top {
    border-radius: 0 !important;
    width: 44px;
    height: 44px;
}

/* Color stripe removed — clean single-color header */
.subsite-title::after {
    display: none;
}

/* ── Ticket page button: Bold geometric CTA ─────────────── */
.pretix-widget button,
.pretix-widget .btn {
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Form inputs: Geometric ─────────────────────────────── */
input,
textarea,
select {
    border-radius: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   v9: Visual Consistency & Communication Excellence
   ══════════════════════════════════════════════════════════════
   Every page should feel like the same conference.
   Key actions (buy tickets, view talks, apply) should be unmissable.
   Content hierarchy should guide the eye.
   ══════════════════════════════════════════════════════════════ */

/* ── Consistent section spacing across all pages ────────── */
section.subsite .content,
section.subsite.blog .content,
section.subsite.faqs .content,
section.subsite.team .content {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-page-margin);
}

/* ── Subsite title: Consistent dark header bar on all pages ── */
.subsite-title {
    background: var(--text-primary);
    color: var(--white);
    padding: var(--space-lg) 0;
    text-align: left;
}

.subsite-title .content {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: 0 var(--space-page-margin);
}

.subsite-title h2 {
    color: var(--white);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Consistent link styling in content areas ───────────── */
.subsite .content a:not(.button):not(.slide-cta):not(.blog-card):not(.talk):not(.edition-tabs__tab) {
    color: var(--blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

.subsite .content a:not(.edition-tabs__tab):hover {
    color: var(--text-primary);
}

/* ── Consistent list styling in content areas ───────────── */
.subsite .content ul,
.subsite .content ol {
    padding-left: 1.5em;
    margin-bottom: var(--space-md);
}

.subsite .content li {
    margin-bottom: var(--space-xs);
    line-height: 1.7;
}

/* ── Venue, Speaker Briefing, Financial Aid, CfP:
      Consistent long-form content styling ───────────────── */
.subsite .content h2 {
    font-size: var(--font-size-2xl);
    color: var(--yellow);
    padding-bottom: var(--space-sm);
    border-bottom: 3px solid var(--yellow);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.subsite .content h3 {
    font-size: var(--font-size-xl);
    color: var(--text-primary);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.subsite .content h4 {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-top: var(--space-md);
}

/* ── Talk cards: Consistent styling ─────────────────────── */
.talk-list a,
.masterclass-item {
    border: 2px solid var(--neutral-200);
    transition: border-color 0.15s ease;
}

.talk-list a:hover,
.masterclass-item:hover {
    border-color: var(--blue);
}

/* ── Homepage: Consistent CTA button sizing ─────────────── */
.tickets-cta__link,
.community__link,
.newsletter__cta,
.sponsoring-cta__link {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-size-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    /* §06 button motion — guide easing, 120 ms */
    transition: all var(--t-fast) var(--ease);
}

/* Primary CTA — filled yellow, ink border (§06 .btn-primary) */
.tickets-cta__link,
.newsletter__cta {
    background: var(--yellow);
    color: var(--text-primary);
    border: 2px solid var(--text-primary);
}

/* Hover: 10 % darker yellow (§06) */
.tickets-cta__link:hover,
.newsletter__cta:hover {
    background: #e0b300;
    color: var(--text-primary);
}

/* Secondary CTA — outlined */
.community__link {
    background: transparent;
    color: var(--blue);
    border: 2px solid var(--blue);
}

.community__link:hover {
    background: var(--blue);
    color: var(--white);
}

/* Ghost button on the blue sponsoring field (§06 .btn-ghost) */
.sponsoring-cta__link {
    background: transparent;
    color: var(--white);
    border: 2px solid var(--white);
}

.sponsoring-cta__link:hover {
    background: var(--white);
    color: var(--blue);
}

/* §10 — hover stays flat: background changes, transform does not */
.tickets-cta__link:hover,
.community__link:hover,
.newsletter__cta:hover,
.sponsoring-cta__link:hover {
    transform: none;
}

/* §06 button states — active press + keyboard focus ring (all CTAs) */
.tickets-cta__link:active,
.community__link:active,
.newsletter__cta:active,
.sponsoring-cta__link:active {
    transform: scale(0.97);
}

.tickets-cta__link:focus-visible,
.community__link:focus-visible,
.newsletter__cta:focus-visible,
.sponsoring-cta__link:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

/* ── Footer: Consistent with site design language ───────── */
/* Top accent is the seven-colour brand bar (see .brand-bar); no single-colour border. */
footer {
    background: var(--text-primary);
    color: rgba(255, 255, 255, 0.8);
}

footer a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.15s ease;
}

footer a:hover {
    color: var(--white);
}

/* ── Sponsor section: Clean, professional ───────────────── */
.sponsors {
    background: var(--white);
    padding: var(--space-xl) 0;
}

.sponsors h3 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--neutral-200);
}

/* ── Blog post page: Consistent with blog index ─────────── */
.subsite.blog .content {
    max-width: var(--content-width-narrow);
}

.subsite.blog .content h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-sm);
}

.subsite.blog .pub-date {
    font-size: var(--font-size-xs);
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ── Masterclass detail page: Consistent ────────────────── */
.masterclass-item .masterclass-title {
    font-weight: 700;
    color: var(--text-primary);
}

.masterclass-item .masterclass-trainer {
    color: var(--blue);
    font-weight: 600;
}

.masterclass-item .tag {
    background: var(--neutral-100);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    padding: 2px 10px;
    border: 1px solid var(--neutral-200);
}

/* ── Talk detail page ───────────────────────────────────── */
.talk .content {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-page-margin);
}

/* ── Intro hero: Consistent with geometric language ─────── */
.intro__details {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Image reel: Clean horizontal strip ─────────────────── */
.image-reel-section {
    background: var(--text-primary);
    padding: var(--space-sm) 0;
}

/* ── Print styles for sharing ───────────────────────────── */
@media print {
    .topnav,
    .hamburger-menu,
    .sidebar,
    .back-to-top,
    .carousel-controls {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

/* ── Fix: Sponsors section — dense layout, readable text ── */
.sponsor-type {
    margin-bottom: var(--space-md);
}

.sponsor-type h4 {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--neutral-200);
}

.sponsor-logo {
    height: 5em;
}

.sponsor-type .sponsors {
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.keystone .sponsor-logo {
    height: 6em;
}

.platinum .sponsor-logo,
.diamond .sponsor-logo {
    height: 5em;
}

.gold .sponsor-logo,
.institutional-partners .sponsor-logo {
    height: 4em;
}

.silver .sponsor-logo,
.community-partners .sponsor-logo,
.diversity-sponsors .sponsor-logo {
    height: 3em;
}

/* Override the v4 grayscale removal — keep logos crisp */
.sponsors .content img {
    filter: none;
    padding: var(--space-xs);
    max-height: 100%;
    object-fit: contain;
}

/* Sponsors on homepage — compact section */
.sponsors.content-block {
    padding: var(--space-lg) 0;
}

/* Landing page sponsor section */
.landing-page--section.sponsors {
    min-height: auto !important;
    padding: var(--space-lg) 0;
}

@media screen and (min-width: 800px) {
    .sponsor-type .sponsors {
        gap: var(--space-sm);
    }

    .silver .sponsors,
    .community-partners .sponsors {
        grid-template-columns: repeat(6, 1fr);
    }

    .institutional-partners .sponsors,
    .diversity-sponsors .sponsors,
    .gold .sponsors {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ── Fix: Sponsoring page — ensure readable text on proper background ── */
.subsite.content-block--red-light {
    background: var(--white);
    color: var(--text-primary);
}

.subsite.content-block--red-light h2,
.subsite.content-block--red-light h3,
.subsite.content-block--red-light h4,
.subsite.content-block--red-light p,
.subsite.content-block--red-light li,
.subsite.content-block--red-light a {
    color: var(--text-primary);
}

.subsite.content-block--red-light a {
    color: var(--blue);
}

/* Sponsors page — ensure white background and readable tier labels */
.subsite.sponsors {
    background: var(--white);
    color: var(--text-primary);
}

/* ── Fix: Talks page — force white text on colored backgrounds ── */
.talks li a.talk,
.talks li a.talk *,
.talks--dense li .talk-title,
.talks li h4,
.talks li .talk-info-label,
.talks li .track,
.talks li .levels,
.talks li .talk-abstract,
.talks li .talk-info-container,
.talks li .talk-info-container * {
    color: var(--white) !important;
}

/* ── Sponsor section: compact vertical, #b7bcbf background ── */
.sponsors,
.landing-page--section.sponsors,
.sponsors.content-block {
    background: #b7bcbf !important;
}

.sponsor-type {
    margin-bottom: 4px !important;
}

.sponsor-type h4 {
    margin-bottom: 4px !important;
    padding-bottom: 2px !important;
}

.sponsor-type .sponsors {
    margin-bottom: 2px !important;
    gap: 4px !important;
}

.sponsor-logo {
    height: 3em !important;
}

.keystone .sponsor-logo {
    height: 4em !important;
}

.platinum .sponsor-logo,
.diamond .sponsor-logo {
    height: 3.5em !important;
}

.gold .sponsor-logo,
.institutional-partners .sponsor-logo {
    height: 2.5em !important;
}

.silver .sponsor-logo,
.community-partners .sponsor-logo,
.diversity-sponsors .sponsor-logo {
    height: 2em !important;
}

/* ── FAQ: Expand/Collapse buttons ──────────────────────── */
.faq-toggle-all,
.faq-toggle-section {
    background: transparent;
    border: 2px solid var(--text-primary);
    color: var(--text-primary);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.faq-toggle-all:hover,
.faq-toggle-section:hover {
    background: var(--text-primary);
    color: var(--white);
}

.faq-toggle-all {
    margin-bottom: var(--space-md);
}

.faq-section-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
}

.faq-section-header h2 {
    flex: 1;
}

/* ── FAQ: Copy link button ─────────────────────────────── */
.faq-item__question {
    display: inline;
}

.faq-copy-link {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8em;
    padding: 0;
    margin-left: 6px;
    opacity: 0.4;
    transition: opacity 0.15s ease;
    vertical-align: middle;
    display: inline;
}

.faq-item__question:hover .faq-copy-link,
.faq-copy-link:hover {
    opacity: 1;
}

/* ── Why Attend: smaller stat values ── */
.why-attend__value {
    font-size: var(--font-size-3xl) !important;
}

/* ── Carousel dots: numbered squares ── */
.carousel-dot {
    width: 40px !important;
    height: 40px !important;
    font-size: var(--font-size-sm) !important;
}

/* ── Mobile: compact dots, no wrapping ── */
@media (max-width: 768px) {
    .carousel-dots {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-2xs) !important;
        padding: 2px 0;
    }
    .carousel-dots::-webkit-scrollbar {
        display: none;
    }
    .carousel-dot {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        font-size: 0 !important;
        border-width: 2px !important;
        border-radius: 0 !important;
    }
    .carousel-dot.active {
        background-color: var(--yellow) !important;
        border-color: var(--yellow) !important;
    }
    .carousel-controls {
        gap: var(--space-sm) !important;
    }
    .carousel-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ── Keynote: Speaker Hero ─────────────────────────────── */
.keynote-hero {
    background: var(--yellow);
    padding: var(--space-xl) 0;
}

.keynote-hero__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    max-width: var(--content-width-wide);
    margin: 0 auto;
}

.keynote-hero__image-wrap {
    flex-shrink: 0;
}

.keynote-hero__image {
    width: 280px;
    height: 280px;
    object-fit: cover;
    border: 4px solid var(--blue);
}

.keynote-hero__info {
    flex: 1;
}

.keynote-hero__name {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--blue) !important;
    margin: 0 0 var(--space-xs);
}

.keynote-hero__role {
    font-size: var(--font-size-md);
    color: var(--blue) !important;
    opacity: 0.8;
    margin: 0 0 var(--space-md);
}

.keynote-hero__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary) !important;
    margin: 0 0 var(--space-sm);
    border: none !important;
    padding: 0 !important;
}

.keynote-hero__teaser {
    font-size: var(--font-size-md);
    color: var(--text-primary) !important;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .keynote-hero__inner {
        flex-direction: column;
        text-align: center;
    }
    .keynote-hero__image {
        width: 200px;
        height: 200px;
    }
}

/* ── Keynote: Article Body ─────────────────────────────── */
.keynote-body {
    max-width: var(--content-width-narrow);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-page-margin);
    font-size: var(--font-size-md);
    line-height: 1.8;
    color: var(--text-primary);
}

.keynote-body h2 {
    color: var(--blue) !important;
    border-bottom: 3px solid var(--yellow);
}

.keynote-body img {
    max-width: 100%;
    height: auto;
    margin: var(--space-lg) 0;
}

.keynote-body iframe {
    width: 100%;
    aspect-ratio: 16/9;
    border: none;
    margin: var(--space-lg) 0;
}

.keynote-body figure,
.keynote-body .keynote-embed {
    margin: var(--space-xl) 0;
}

.keynote-body figcaption {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-sm);
}

.keynote-body blockquote {
    border-left: 4px solid var(--yellow);
    padding-left: var(--space-md);
    color: var(--text-secondary);
    font-style: normal;
    margin: var(--space-lg) 0;
}

/* ── Keynote: CTA Footer ──────────────────────────────── */
.keynote-cta {
    background: var(--blue);
    padding: var(--space-xl) 0;
    text-align: center;
}

.keynote-cta__text {
    color: var(--white) !important;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
}

.keynote-cta__button {
    display: inline-block;
    background: var(--yellow);
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: var(--space-sm) var(--space-xl);
    text-decoration: none;
    border: 2px solid var(--yellow);
    transition: background 0.15s ease, color 0.15s ease;
}

.keynote-cta__button:hover {
    background: var(--white);
    color: var(--text-primary);
}

/* Hackerspace badge for carousel */
.slide-badge--hackerspace {
    background-color: var(--orange);
}

/* Satellite-events carousel badges */
.slide-badge--sprint {
    background-color: var(--green);
}

.slide-badge--meetup {
    background-color: var(--pink);
}

/* Carousel footer CTA (e.g. "Propose a satellite event") */
.carousel-cta {
    text-align: center;
    margin: var(--space-md) 0 0;
}

.carousel-cta__link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--blue, #00c8e1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
}

.carousel-cta__link:hover {
    filter: brightness(1.05);
}

/* ── No all-caps headings — normal casing per style guide ── */
h1, h2, h3, h4, h5, h6,
.subsite-title h2,
.sponsors h3,
.sponsor-type h4,
.section-heading,
.blog-post .title,
.carousel-header__title,
.masterclass-header h1 {
    text-transform: none !important;
}

/* ── Carousel header: more space below header, above slides ── */
.carousel-header {
    padding-bottom: var(--space-lg) !important;
}

/* ─── Certificate pages (validate + share) ─────────────────── */

.cert-header {
    background: var(--blue);
    color: white;
    padding: var(--space-2xl) 0 var(--space-xl);
    text-align: center;
}

.cert-header .content {
    max-width: var(--content-width-narrow);
    margin: 0 auto;
    padding: 0 var(--space-page-margin);
}

.cert-header__eyebrow {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    opacity: 0.85;
    margin: 0 0 var(--space-sm);
}

.cert-header__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: white;
}

.cert-section {
    background: var(--grey);
    padding: var(--space-xl) 0 var(--space-2xl);
}

.cert-section .content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--space-page-margin);
}

.cert-card {
    background: white;
    border-radius: 12px;
    padding: var(--space-xl) var(--space-lg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.cert-card--share {
    text-align: center;
}

.cert-card__badge {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
    background: var(--green);
    color: white;
    font-size: 2rem;
    line-height: 64px;
    font-weight: 700;
}

.cert-card__lead {
    font-size: var(--font-size-lg);
    color: #333;
    margin: 0 0 var(--space-lg);
}

.cert-card__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto var(--space-lg);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.cert-meta {
    margin: 0 auto;
    max-width: 480px;
    text-align: left;
    border-top: 1px solid #e5e7eb;
}

.cert-meta__row {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid #e5e7eb;
    align-items: baseline;
}

.cert-meta__row dt {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    font-weight: 600;
    margin: 0;
}

.cert-meta__row dd {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: #111827;
    margin: 0;
    word-break: break-word;
}

.cert-meta__row dd code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95em;
    background: #f3f4f6;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.cert-card__note {
    margin: var(--space-lg) 0 0;
    font-size: var(--font-size-sm);
    color: #6b7280;
    font-style: italic;
}

/* Share section */
.cert-share {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid #e5e7eb;
}

.cert-share__heading {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--space-md);
    color: #111827;
}

.cert-share__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

.cert-share__list li {
    margin: 0;
    padding: 0;
}

.cert-share__link {
    display: inline-block;
    padding: 0.65em 1.25em;
    border-radius: 999px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    color: white;
    background: var(--blue);
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cert-share__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: white;
}

.cert-share__link--linkedin { background: #0a66c2; }
.cert-share__link--x        { background: #111827; }
.cert-share__link--mastodon { background: #6364ff; }
.cert-share__link--whatsapp { background: #25d366; }
.cert-share__link--telegram { background: #229ed9; }
.cert-share__link--email    { background: var(--blue); }

/* ── A11y skip-to-content link ──────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 10000;
  background: var(--blue, #00c8e1);
  color: #fff;
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 120ms ease-out;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}
main:focus { outline: none; }

/* ── Talk recording embed ──────────────────────────────────────────── */
.talk-recording {
  background: #f5f7f9;
  padding: 2rem 0;
}
.talk-recording figure {
  margin: 0;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.talk-recording figure > iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  display: block;
}
.talk-recording figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: #4a5660;
  text-align: center;
}

/* External recording (non-YouTube, e.g. 2016 LMU-hosted videos): a button
   link instead of an embedded player. */
.talk-recording--external {
  text-align: center;
}
.talk-recording__external-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--blue, #00c8e1);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0;
}
.talk-recording__external-link:hover,
.talk-recording__external-link:focus {
  filter: brightness(1.05);
}

/* ── Recording-available badge in talks list ───────────────────────── */
.recording-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--blue, #00c8e1);
  color: #fff;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* ── Archive context ───────────────────────────────────────────────── */
.archive-banner {
  background: #f4f3ee;
  border-bottom: 1px solid #e0ddd2;
  color: #3a2d1d;
  padding: 0.85rem 0;
  font-size: 0.95rem;
  text-align: center;
}
.archive-banner strong {
  color: #6a4f1f;
  margin-right: 0.4rem;
}
.archive-banner a {
  color: #6a4f1f;
  text-decoration: underline;
}

/* The newest completed edition, still being promoted — see
   databags/site_state.yaml -> featured_edition. Same shape as the archive
   banner, brand accent instead of the sepia "this is old" tone. */
.archive-banner--featured {
  background: #eefbfd;
  border-bottom-color: var(--blue, #00c8e1);
  color: #10333a;
}
.archive-banner--featured strong,
.archive-banner--featured a {
  color: #06707f;
}

/* ── Talk list search + facet filter ───────────────────────────────────
   Injected by static/js/talks-filter.js; the markup does not exist without
   JS, so none of this affects the no-JS rendering of the list. */
/* `.subsite .content` (main.css) sets color:white for text on the dark
   bands. The talk list sits on a white section, so the filter UI has to
   win that rule — hence the matching-specificity selector. Everything
   inside inherits, including the currentColor borders on the pills. */
.subsite .content.talk-filters {
  padding-top: var(--space-md, 1.5rem);
  padding-bottom: var(--space-md, 1.5rem);
  color: #1a1a1a;
}
/* One field per facet rather than a wall of pills: an edition with twenty
   tracks costs the same vertical space as one with three. Square corners,
   flat brand colours, uppercase labels — the same language as the rest of
   the site's controls (see `input,textarea,select { border-radius: 0 }`). */
.talk-filters__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
}
.talk-filters__field {
  flex: 1 1 13rem;
  min-width: 11rem;
}
.talk-filters__field--search {
  flex: 2 1 20rem;
}
.talk-filters__label {
  display: block;
  margin-bottom: 0.35em;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.talk-filters__input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--text-primary, #111);
  font: inherit;
  font-size: 1rem;
  background: var(--white, #fff);
  color: var(--text-primary, #111);
}
.talk-filters__input::placeholder {
  color: var(--text-secondary, #555);
  opacity: 1;
}
.talk-filters__input:focus-visible {
  outline: 2px solid var(--blue, #3778be);
  outline-offset: 1px;
}
/* A facet with a selection says so even when its list is closed. */
.talk-filters__field.is-filtered .talk-filters__input {
  border-color: var(--blue, #3778be);
}
.talk-filters__field.is-filtered .talk-filters__input::placeholder {
  color: var(--text-primary, #111);
  font-weight: 700;
}

.combo {
  position: relative;
}
.combo__input {
  padding-right: 2rem;
  cursor: pointer;
}
.combo__toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 2rem;
  border: 0;
  background: none;
  color: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}
.combo__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--white, #fff);
  border: 2px solid var(--text-primary, #111);
  border-top: 0;
}
.subsite .content .combo__list li {
  margin: 0;
}
.combo__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
  line-height: 1.35;
  cursor: pointer;
}
.combo__option.is-active,
.combo__option:hover {
  background: var(--blue, #3778be);
  color: var(--white, #fff);
}
.combo__option.is-active .combo__option-count,
.combo__option:hover .combo__option-count {
  color: inherit;
}
.combo__option.is-selected {
  font-weight: 700;
}
/* The tick marks selection without a checkbox column, so a long track name
   still gets the full width of the list. */
.combo__option.is-selected .combo__option-label::before {
  content: "✓ ";
}
.combo__option-count {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--text-secondary, #555);
  font-weight: 400;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-top: 1rem;
}
.filter-chips__label {
  margin: 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25rem 0.6rem;
  border: 2px solid var(--text-primary, #111);
  background: var(--text-primary, #111);
  color: var(--white, #fff);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.filter-chip:hover,
.filter-chip:focus-visible {
  background: var(--blue, #3778be);
  border-color: var(--blue, #3778be);
}
.filter-chip__x {
  font-size: 1.1em;
  line-height: 1;
}
.filter-count {
  display: block;
  margin: 1rem 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}
.filter-clear {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

/* Provenance of the list itself, so it sits with the controls rather than
   repeating on every row. `margin: 0 auto` is what keeps it on the same
   left edge as the filter bar and the rows — plain `margin: 0` drops the
   centring that `.content` relies on. */
.subsite .content.talks-ai-note {
  max-width: var(--content-width-wide);
  margin: 0 auto;
  padding: 0 var(--space-page-margin) var(--space-md, 1.5rem);
  font-size: 0.9rem;
  color: var(--text-secondary, #555);
}

/* ── Talk list rows ──────────────────────────────────────────────────
   Denser than the section default: a programme is a list to scan, so each
   row is title, one meta line, one summary line. `.talk` also carries
   `.content`, whose section padding is far too generous here. */
.talks--dense li a.content.talk {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.talks--dense li .talk-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: 1.25;
}
.talks--dense li .talk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
}
.talks--dense li .talk-speakers {
  font-weight: 700;
}
.talks--dense li .talk-track {
  font-weight: 400;
}
.talks--dense li .talk-track::before {
  content: "· ";
}
/* Full body size: the summary is the only prose on the row and has to be
   read, not skimmed past. Three lines before the cut. */
.talks--dense li .talk-summary {
  margin: 0.1rem 0 0;
  font-size: var(--font-size-base);
  line-height: 1.55;
  max-width: 75ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Recording marker: the video glyph alone, no label. */
.talks--dense li .talk-play {
  flex: 0 0 auto;
  width: 1.5rem;
  height: auto;
  fill: currentColor;
}

/* Recording / slides / repo links on a talk page. These stay useful long
   after the slot time stops mattering, so they sit above the abstract.
   The selector must out-specify `.subsite .content ul` (0,0,2,1), which
   would otherwise re-apply bullets and left padding. */
.subsite .content ul.talk-resources {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.talk-resources__link {
  font-weight: 600;
}
/* ── Submission resource previews ────────────────────────────────────
   One card per file or link the speaker attached, in a single row under
   the description. Cards are the height of a collapsed .talk-aside so the
   page keeps one rhythm; with many resources the row scrolls sideways
   instead of growing downwards. */
.subsite .content ul.talk-previews {
  list-style: none;
  padding: 0 0 0.25rem;
  margin: 0 0 1.5rem;
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.subsite .content .talk-previews__item {
  margin: 0;
  flex: 0 0 auto;
}
.subsite .content a.talk-preview {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  width: 15rem;
  height: 3.5rem;
  border: 1px solid var(--neutral-200, #e0e0e0);
  background: var(--neutral-50, #f5f5f5);
  color: var(--text-primary, #111);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.subsite .content a.talk-preview:hover,
.subsite .content a.talk-preview:focus-visible {
  border-color: var(--blue, #3778be);
  background: #fff;
  color: var(--text-primary, #111);
}
/* The rendered first page, cropped to the card's left edge — enough to
   recognise a deck you have seen, not enough to read it. */
.talk-preview__thumb {
  flex: 0 0 auto;
  height: 100%;
  width: 4.5rem;
  object-fit: cover;
  object-position: top center;
  background: #fff;
  border-right: 1px solid var(--neutral-200, #e0e0e0);
}
/* Stand-in for anything Quick Look cannot render: the file type, or LINK. */
.talk-preview__badge {
  flex: 0 0 auto;
  width: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-primary, #111);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-right: 1px solid var(--neutral-200, #e0e0e0);
}
.talk-preview__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  padding-right: 0.65rem;
}
.talk-preview__label {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
  /* Descriptions run long ("Slides of internal, somewhat comparable
     talk"); two lines, then ellipsis. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.talk-preview__host {
  font-size: 0.7rem;
  color: var(--text-secondary, #555);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Marks the featured year in the edition list on /archive/. */
.archive-edition__flag {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--blue, #00c8e1);
  color: #06282e;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.archive-editions {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  gap: 1rem;
}
.archive-edition-card {
  display: block;
  padding: 1.2rem 1.5rem;
  background: #fff;
  border: 1px solid #e0ddd2;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 120ms ease-out;
}
.archive-edition-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.archive-edition__title {
  margin: 0 0 0.3rem 0;
  font-size: 1.4rem;
}
.archive-edition__dates,
.archive-edition__stats {
  margin: 0.2rem 0;
  color: #4a5660;
  font-size: 0.95rem;
}

/* ── Speaker pages ─────────────────────────────────────────────────── */
.speaker-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.speaker-avatar {
  width: 240px;
  height: 240px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.speaker-meta {
  flex: 1 1 280px;
}
/* The speaker header sits on the dark/blue subsite-title hero;
   pronoun / role / location lines must read as light text on dark to
   clear WCAG AA. The base `.subsite .content p` rule wins on
   specificity over a single-class `.speaker-meta`, so we chain
   `.subsite .subsite-title` to get a (0,3,1) selector that beats
   it. */
.subsite .subsite-title .speaker-meta,
.subsite .subsite-title .speaker-meta p {
  color: #fff;
}
.speaker-name { margin: 0 0 0.4rem 0; }
.speaker-pronouns {
  margin: 0 0 0.2rem 0;
  font-size: 0.95rem;
  /* opacity 0.85 keeps the subtle visual hierarchy without dropping
     contrast below the 4.5:1 threshold for normal text against the
     blue hero. */
  opacity: 0.85;
}
.speaker-role {
  margin: 0 0 0.2rem 0;
  font-weight: 500;
}
.speaker-location {
  margin: 0;
  opacity: 0.85;
}
.speaker-badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.3rem 0.7rem;
  background: var(--blue, #00c8e1);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
}

.speaker-socials {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.speaker-socials a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.45rem 0.9rem;
  background: #f0f3f5;
  color: inherit;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #d5dadd;
  transition: background 0.15s, border-color 0.15s;
  max-width: 22rem;
}
.speaker-socials a:hover,
.speaker-socials a:focus {
  background: #e7ebed;
  border-color: var(--blue, #00c8e1);
}
.speaker-social__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #555);
  font-weight: 700;
}
.speaker-social__handle {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.speaker-talks-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.speaker-talks-list li { margin-bottom: 0.6rem; }
.speaker-talks-list a {
  display: block;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid #e0ddd2;
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
}
.speaker-talks-list a:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.talk-list__title { display: block; font-weight: 600; }
.talk-list__track {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ── Speakers index grid ───────────────────────────────────────────── */
.speakers-count {
  margin-top: 0.5rem;
  font-size: 1rem;
  opacity: 0.85;
}
.speakers-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.speaker-card {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e0ddd2;
  border-radius: 8px;
  transition: box-shadow 120ms ease-out;
}
.speaker-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.speaker-card__avatar {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 0.8rem;
  border-radius: 50%;
  object-fit: cover;
}
.speaker-card__avatar--placeholder {
  background: var(--blue, #00c8e1);
  color: #fff;
  font-size: 3rem;
  line-height: 120px;
  font-weight: 700;
}
.speaker-card__name {
  display: block;
  font-weight: 600;
}
.speaker-card__company {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ── Past Editions homepage block ──────────────────────────────────── */
.past-editions {
  padding: var(--space-xl) 0;
  background: linear-gradient(180deg, #f7f5ee 0%, #fff 100%);
  border-top: 1px solid #e0ddd2;
}
.past-editions__heading {
  margin: 0 0 0.6rem;
  font-size: 2rem;
}
.past-editions__subheading {
  /* Left, on the same edge as every other section heading on the page —
     `margin: 0 auto` would re-centre the max-width block. */
  max-width: 720px;
  margin: 0 0 2.5rem;
  color: #4a5660;
  font-size: 1.05rem;
}
/* Compact table of editions: rows of "year | place", flowing into
   two columns on wide screens (down first, then across), a single
   column on mobile. */
.past-editions__grid {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  column-gap: var(--space-2xl);
}

@media screen and (min-width: 800px) {
  .past-editions__grid {
    columns: 2;
  }
}

.past-editions__item {
  break-inside: avoid;
}

.past-editions__row {
  display: grid;
  /* Fixed year column so rows align like a table */
  grid-template-columns: 4.5em 1fr;
  column-gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid #e0ddd2;
  text-decoration: none;
  color: inherit;
}

a.past-editions__row:hover .past-editions__location {
  text-decoration: underline;
}

.past-editions__year {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--blue, #00c8e1);
}

.past-editions__location {
  font-size: var(--font-size-sm);
  color: #6a7480;
}
.past-editions__cta {
  text-align: center;
  margin: 2rem 0 0;
}
.past-editions__cta-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--blue, #00c8e1);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 6px;
}
.past-editions__cta-link:hover { filter: brightness(1.05); }

/* ── Archive pointer on /talks/ + /speakers/ ───────────────────────── */
.archive-pointer {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: #4a5660;
}
.archive-pointer a {
  font-weight: 600;
  text-decoration: underline;
}

/* ── Tracks index + per-track pages ─────────────────────────────────── */
.tracks-intro {
  margin: 0.4rem 0 0;
  color: var(--text-secondary, #555);
}
.tracks-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}
.tracks-grid__card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--neutral-200, #e2e6ea);
  border-left: 4px solid var(--blue, #00c8e1);
  text-decoration: none;
  color: var(--text-primary, #111);
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.tracks-grid__card:hover,
.tracks-grid__card:focus {
  border-color: var(--blue, #00c8e1);
  border-left-color: var(--text-primary, #111);
  transform: translateY(-1px);
}
.tracks-grid__name {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.tracks-grid__count {
  font-size: 0.78rem;
  color: var(--text-secondary, #555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Speaker: other editions ────────────────────────────────────────── */
.speaker-other-editions {
  background: var(--neutral-50, #f6f7f8);
  border-top: 3px solid var(--blue, #00c8e1);
  padding: 1.5rem 0 2rem;
  margin-top: 2rem;
}
.speaker-other-editions h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}
.speaker-other-editions__intro {
  margin: 0 0 1rem;
  color: var(--text-secondary, #555);
}
.speaker-other-editions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.speaker-other-editions__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border: 1px solid var(--neutral-200, #e2e6ea);
  text-decoration: none;
  color: var(--text-primary, #111);
  min-width: 5.5rem;
  transition: border-color 0.15s, transform 0.1s;
}
.speaker-other-editions__link:hover,
.speaker-other-editions__link:focus {
  border-color: var(--blue, #00c8e1);
  transform: translateY(-1px);
}
.speaker-other-editions__year {
  font-size: 1.1rem;
  font-weight: 700;
}
.speaker-other-editions__count {
  font-size: 0.75rem;
  color: var(--text-secondary, #555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Related talks ──────────────────────────────────────────────────── */
.related-talks {
  background: var(--neutral-50, #f6f7f8);
  border-top: 3px solid var(--blue, #00c8e1);
  padding: 2rem 0 2.5rem;
  margin-top: 2rem;
}
.related-talks .content {
  max-width: var(--content-width-wide, 72rem);
  margin: 0 auto;
  padding: 0 var(--space-page-margin, 1.5rem);
}
.related-talks__heading {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
.related-talks__group {
  margin-bottom: 1.75rem;
}
.related-talks__group:last-child { margin-bottom: 0; }
.related-talks__subheading {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary, #555);
  font-weight: 700;
}
.related-talks__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}
.related-talks__item a {
  display: block;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--neutral-200, #e2e6ea);
  text-decoration: none;
  color: var(--text-primary, #111);
  transition: border-color 0.15s, transform 0.1s;
  height: 100%;
}
.related-talks__item a:hover,
.related-talks__item a:focus {
  border-color: var(--blue, #00c8e1);
  transform: translateY(-1px);
}
.related-talks__title {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
  margin-bottom: 0.35rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.related-talks__track,
.related-talks__meta {
  display: block;
  font-size: 0.8rem;
  color: var(--text-secondary, #555);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Breadcrumbs ────────────────────────────────────────────────────── */
.breadcrumb {
  max-width: var(--content-width-wide, 72rem);
  margin: 0 auto;
  padding: 0.75rem var(--space-page-margin, 1.5rem) 0;
  font-size: 0.85rem;
}
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary, #555);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--neutral-200, #c2c8d0);
  font-weight: 400;
}
.breadcrumb__link {
  color: var(--blue, #00c8e1);
  text-decoration: none;
}
.breadcrumb__link:hover,
.breadcrumb__link:focus {
  text-decoration: underline;
}
.breadcrumb__current {
  color: var(--text-primary, #111);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
  min-width: 0;
}

/* Mobile: the persistent hamburger menu sits at top-left ~18px from
   the edge. The breadcrumb's first item collides with it without
   extra left padding. Tighten max-width on the current-page label
   so long talk titles get a clean ellipsis instead of being clipped
   at the right edge. */
@media (max-width: 1023px) {
  .breadcrumb {
    padding-left: 4rem;
    padding-right: 1rem;
  }
  .breadcrumb__current {
    max-width: calc(100vw - 11rem);
  }
}

/* ── Talk description footnotes ──────────────────────────────────────
   Provenance of the description, then the speaker's own classification of
   the session. Both are <p>, so they need `.subsite .content` specificity
   to beat that section's blanket paragraph colour. */
.subsite .content .talk-ai-note {
  margin: 1rem 0 0.25rem;
  /* A hint, not a sentence of the text: the smallest size on the page,
     italic and muted, so it never competes with the description above it. */
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary, #555);
}
.subsite .content .talk-classification {
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
  color: var(--text-secondary, #555);
}

/* The social card closes a talk page. It is a separate artefact, not an
   illustration belonging to the speaker bios above it, so it gets real
   air rather than the default paragraph gap. */
.talk .content > img {
  display: block;
  margin-top: 3rem;
}

/* ── Talk asides: submission + transcript ───────────────────────────
   The speaker's original proposal and the transcript of the recording are
   the two secondary blocks on a talk page, so they read as siblings and
   share one definition. Only the transcript body caps its height. */
.talk-aside {
  margin: 1.5rem 0;
}
.talk-aside:last-of-type {
  margin-bottom: 2rem;
}
.talk-aside__details {
  border: 1px solid var(--neutral-200, #e0e0e0);
  border-left: 4px solid var(--neutral-200, #e0e0e0);
  padding: 1rem 1.25rem;
  background: var(--neutral-50, #f5f5f5);
  /* `.subsite .content` (main.css) sets color:white for text on the dark
     bands. This panel is light, so it owns its colour — and everything
     inside inherits ink, including <summary>, bare <strong> and <code>,
     which the section's paragraph-only override never reached. */
  color: var(--text-primary, #111);
}
.talk-aside__summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.talk-aside__summary::-webkit-details-marker { display: none; }
.talk-aside__summary::before {
  content: "▸";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--blue, #3778be);
}
.talk-aside__details[open] .talk-aside__summary::before {
  transform: rotate(90deg);
}
.talk-aside__status {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-secondary, #555);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.subsite .content .talk-aside__note {
  margin: 0.75rem 0 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary, #555);
}
.talk-aside__body {
  font-size: 0.95rem;
  line-height: 1.6;
}
.talk-aside__body p { margin: 0 0 0.9em; }
.talk-aside__body strong { color: var(--text-primary, #111); }
.talk-aside__body em { color: var(--text-secondary, #555); }
/* Transcripts run to tens of thousands of characters — cap the opened
   height so the rest of the page stays reachable. */
.talk-transcript__body {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* ── Edition tabs (Sessions / Speakers / Tracks) ───────────────────── */
/* One switcher for every per-edition index. The current tab is a <span>,
   not a link, so it never picks up the generic content-link styling and
   cannot be clicked back to itself. */
.edition-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--neutral-200);
}
.edition-tabs .edition-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: var(--blue, #3778be);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}
.edition-tabs a.edition-tabs__tab:hover,
.edition-tabs a.edition-tabs__tab:focus {
  background: var(--text-primary, #111);
  color: #fff;
  filter: none;
}
.edition-tabs .edition-tabs__tab--current {
  background: var(--text-primary, #111);
  cursor: default;
}
.edition-tabs__count {
  font-weight: 500;
  opacity: 0.85;
  font-size: 0.85rem;
}

/* ── Footer Archive (previous editions) ────────────────────────────── */
.footer-links__editions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}
.footer-links__editions a {
  font-size: 0.95rem;
}
.footer-links__editions-label {
  margin-right: 0.25rem;
  font-size: 1rem;
}
.footer-links__editions-label strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.footer-links__editions-all {
  margin-left: auto;
  font-weight: 600;
}
@media (max-width: 768px) {
  .footer-links__editions {
    gap: 0.5rem 1rem;
  }
  .footer-links__editions-all {
    margin-left: 0;
  }
}

/* Loading + error states for JS-driven cert share page */
.cert-card__loading,
.cert-card__error {
    text-align: center;
    padding: var(--space-lg) 0;
    color: #6b7280;
    font-size: var(--font-size-lg);
}

.cert-card__error {
    color: #991b1b;
}

/* Toast for clipboard feedback */
.cert-toast {
    position: fixed;
    left: 50%;
    bottom: var(--space-lg);
    transform: translateX(-50%);
    background: #111827;
    color: white;
    padding: 0.75em 1.25em;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    max-width: calc(100vw - 2 * var(--space-lg));
    text-align: center;
}

.cert-toast[hidden] {
    display: none;
}

/* Links inside the dark/blue subsite-title hero need a light colour
   to stay visible. The default site link colour is the same blue
   as the hero background, so an unstyled <a> reads as invisible
   text — only the trailing period was rendering on /talks/'s
   archive-pointer paragraph because the parent text colour is
   black inside that span. White with an underline keeps semantics
   + WCAG. The :not() chain matches the specificity of the
   existing `.subsite .content a:not(...)` rule above so the
   later declaration wins on source order; an extra `.subsite-title`
   class would also win on its own, but we keep the symmetric form
   to make the intent obvious. */
.subsite .subsite-title .content a:not(.button):not(.slide-cta):not(.blog-card):not(.talk):not(.edition-tabs__tab),
.subsite-title .content a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.subsite .subsite-title .content a:not(.edition-tabs__tab):hover,
.subsite-title .content a:hover,
.subsite-title .content a:focus {
  color: var(--yellow, #ffc34d);
  text-decoration-thickness: 2px;
}

/* ── Mobile: speakers-grid two-column override ───────────────────────
   Lives at the end of the file so it comes AFTER every default
   .speakers-grid / .speaker-card__avatar rule and wins on
   source-order tie-breaking. At ≤599px the default
   minmax(180px, 1fr) only fits one column on a 375 px phone; this
   drops to two equal columns with a smaller avatar to keep the
   181-speaker grid scannable. */
@media (max-width: 599px) {
  /* minmax(0, 1fr) instead of plain 1fr — 1fr defaults to minmax(auto,
     1fr) which falls back to content min-width, so long company names
     in cards push columns to ≈180–210 px and overflow the 285 px
     container. Forcing min=0 lets the columns shrink to half-container
     and the long text inside wraps cleanly. */
  .speakers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .speaker-card__avatar {
    width: 96px;
    height: 96px;
  }
  .speaker-card__avatar--placeholder {
    font-size: 2.5rem;
    line-height: 96px;
  }
  .speaker-card__company {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

/* 2027 hero logo is a portrait SVG — size by height, not the legacy
   width-led max-width caps in main.css. */
.intro__logo[src$="logo-2027-white.svg"] {
    height: clamp(140px, 22vw, 220px);
    width: auto;
    max-width: none;
}

/* Latest videos — horizontal slider, one row, latest-first,
   scroll-snap. Yellow colour field (ink text holds WCAG on #fac800;
   the guide's own hero pattern). */
.latest-videos {
    background: var(--yellow);
    color: var(--text-primary);
    padding: var(--space-lg) 0;
}
.latest-videos__title {
    font-size: var(--font-size-3xl, 2rem);
    margin: 0 0 0.75rem;
    color: var(--text-primary);
}
/* The shelf slides like the masterclasses carousel rather than scrolling.
   How many cards are on screen is declared here and nowhere else:
   carousel.js reads --carousel-visible back out to work out how far to
   translate, so the layout and the maths cannot drift apart. */
.carousel--videos {
    --carousel-visible: 5;
    overflow: hidden;
}
.carousel--videos .carousel-slide {
    flex: 0 0 calc(100% / var(--carousel-visible));
    /* Padding, not gap: a gap would not be part of the percentage the
       track translates by. */
    padding-right: 0.75rem;
    display: block;
    background: transparent;
}
@media (max-width: 1200px) {
    .carousel--videos { --carousel-visible: 3; }
}
@media (max-width: 768px) {
    .carousel--videos { --carousel-visible: 1; }
}
/* Nothing to page through: the arrows would be dead controls. */
.carousel--fits .carousel-controls {
  display: none;
}
/* On the video shelves the arrows sit over the outermost cards, centred
   on the row, instead of on a bar below it. Same buttons as the
   masterclasses carousel — solid here, because they land on artwork
   rather than on a flat band. */
.carousel--videos {
  position: relative;
}
.carousel--videos .carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* The row of cards, not the whole section: the controls box is only as
     tall as the viewport it overlays. */
  height: 100%;
  padding: 0 0.35rem;
  background: transparent;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  /* The bar itself must not swallow clicks meant for the cards. */
  pointer-events: none;
  z-index: 2;
}
.carousel--videos .carousel-btn {
  pointer-events: auto;
  background: var(--text-primary, #111);
  border-color: var(--text-primary, #111);
  color: #fff;
}
.carousel--videos .carousel-btn:hover,
.carousel--videos .carousel-btn:focus {
  background: var(--blue, #3778be);
  border-color: var(--blue, #3778be);
  color: #fff;
}
/* Horizontal drags belong to the shelf; vertical ones still scroll. The
   cards are links around images, so the browser's own drag has to be shut
   off or it swallows the pointer stream before the carousel sees it. */
.carousel--videos .carousel-viewport {
  touch-action: pan-y;
  cursor: grab;
}
.carousel--videos .carousel-slide a,
.carousel--videos .carousel-slide img {
  -webkit-user-drag: none;
  user-drag: none;
}
/* An arrow at the end of a shelf that does not wrap. */
.carousel-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.carousel--videos.is-dragging .carousel-viewport {
  cursor: grabbing;
  user-select: none;
}
.carousel--videos.is-dragging .carousel-slides {
  transition: none;
}
.latest-videos__card {
    /* border-box so the 5px white frame counts into the card width. */
    box-sizing: border-box;
    width: 100%;
    /* Poster card: the image IS the card; text overlays its lower
       edge (flat ink scrim — the brand allows no gradients). */
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    border: 5px solid var(--white);
    /* §11 — the brand has square corners */
    border-radius: 0;
    overflow: hidden;
    background: var(--neutral-50, #f6f7f8);
}
.latest-videos__card:hover { border-color: var(--blue); }
.latest-videos__thumb-wrap {
    position: relative;
    display: block;
    /* Social cards are 1200x630 — match their ratio so nothing crops. */
    aspect-ratio: 1200 / 630;
}
.latest-videos__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.latest-videos__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.25rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.latest-videos__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 17, 17, 0.78);
    padding: 0.3rem 0.45rem 0.35rem;
}
.latest-videos__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--white);
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.2;
    margin-bottom: 0.1rem;
}
.latest-videos__meta {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.7rem;
    line-height: 1.25;
}
/* Featured videos — same shelf, blue colour field (white title per
   §02; card hover flips to yellow because blue would vanish). */
.featured-videos {
    background: var(--blue);
}
.featured-videos .latest-videos__title {
    color: var(--white);
}
.featured-videos .latest-videos__card:hover {
    border-color: var(--yellow);
}

/* §06 — "default buttons are black on a primary" */
.latest-videos__all {
    display: inline-block;
    margin-top: 0.75rem;
    padding: var(--space-sm) var(--space-xl);
    background: var(--text-primary);
    color: var(--white);
    border: 2px solid var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all var(--t-fast, 120ms) var(--ease, ease);
}
.latest-videos__all:hover {
    background: #000;
    color: var(--white);
}
.latest-videos__all:active {
    transform: scale(0.97);
}
.latest-videos__all:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

/* Latest blog post cards — same layout as the latest-videos card
   (preview image on top, then title + meta). Up to `max_posts` cards
   in a responsive grid; single column on narrow screens. */
.latest-blog__title {
    font-size: var(--font-size-3xl, 2rem);
    margin: 0 0 1.25rem;
}
.latest-blog__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    max-width: 64rem;
}
.latest-blog__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--neutral-200, #e2e6ea);
    /* §11 — the brand has square corners */
    border-radius: 0;
    overflow: hidden;
    background: var(--neutral-50, #f6f7f8);
    transition: border-color var(--t-fast) var(--ease);
}
.latest-blog__card:hover { border-color: var(--blue); }
.latest-blog__thumb-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
}
.latest-blog__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.latest-blog__info { padding: 0.75rem 0.9rem 1rem; }
.latest-blog__name { display: block; font-weight: 700; margin-bottom: 0.2rem; }
.latest-blog__meta { display: block; color: var(--text-secondary, #555); font-size: var(--font-size-sm); }

/* ══════════════════════════════════════════════════════════════
   v11: Design-rules esprit pass (front page)
   ══════════════════════════════════════════════════════════════ */

/* §02 — body text sits on white/black/blue/green/orange, never on
   silver. The front page ground becomes paper-white; colour comes
   from the section fields, not the page background. */
body.front-page {
    background-color: var(--white);
}

/* Homepage content column: ~85% of the viewport (a common container
   ratio), capped at 1536px for ultra-wide screens. Other pages keep
   the 960px reading column; below 1024px the default responsive
   widths (93%/83%) stay in charge, so mobile is unaffected. */
@media (min-width: 1024px) {
    body.front-page main .content {
        width: 85%;
        max-width: 1536px;
    }
}

/* Blog card brand fallback — python on a blue colour field (§05). */
.latest-blog__thumb-wrap--brand {
    background: var(--blue);
}

.latest-blog__thumb--python {
    object-fit: contain;
    padding: 8% 12%;
}

/* §06 hero voice — display headline + one CTA on the intro. */
.intro__headline {
    font-size: calc(var(--font-size-5xl) / 2);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    color: var(--white);
    max-width: 32ch;
    margin: 0;
}

.intro__cta {
    display: inline-block;
    padding: var(--space-sm) var(--space-xl);
    background: var(--yellow);
    color: var(--text-primary) !important; /* beat the .intro a { color: white } rule */
    border: 2px solid var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: all var(--t-fast) var(--ease);
}

.intro__cta:hover {
    background: #e0b300;
}

.intro__cta:active {
    transform: scale(0.97);
}

.intro__cta:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 2px;
}

/* ── Share row ───────────────────────────────────────────────────────
   Small, right-aligned, directly under the title band. Ink on the page's
   own background; no brand colours, so five different marks read as one
   control rather than five logos. */
.share-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.share-links__label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary, #555);
  margin-right: 0.15rem;
}
.subsite .content a.share-links__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--text-primary, #111);
  text-decoration: none;
  border: 1px solid var(--neutral-200, #e0e0e0);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.subsite .content a.share-links__link:hover,
.subsite .content a.share-links__link:focus-visible {
  color: var(--blue, #3778be);
  border-color: var(--blue, #3778be);
}
.share-links__icon {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}