/* ==========================================================================
   IdoAI - Main Responsive Design System (Updated)
   ========================================================================== */

:root {
    /* Palette from the Dept. of AI Foundation Day flyer: cream paper, burnt orange, royal indigo.
       Dark theme (default) is the flyer "after dusk": indigo night with cream text and amber accents. */
    --bg-main: #0b0919;
    --bg-gradient: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59, 50, 196, 0.38) 0%, transparent 70%);
    --bg-surface: rgba(32, 27, 70, 0.62);
    --bg-surface-hover: rgba(42, 36, 88, 0.8);
    --bg-card: rgba(34, 29, 74, 0.55);
    --bg-card-hover: rgba(46, 39, 96, 0.78);
    --glass-border: rgba(255, 236, 200, 0.1);
    --glass-border-hover: rgba(var(--primary-rgb), 0.5);

    --text-main: #fbf3e1;
    --text-muted: #bcb2c8;
    --text-dim: #8a80a0;

    /* Brand: burnt orange for actions, royal indigo for branding (light) / amber on the dark theme.
       Buttons are flat; --primary-gradient keeps its name but is one solid colour. */
    --primary: #c0531a;
    --primary-rgb: 192, 83, 26;
    --primary-light: #f5a65b;
    --brand-text: #f5a65b;
    /* Wordmark colours, taken from the favicon: cream "Ido", orange "AI" */
    --brand-ido: #fbf3e1;
    --brand-ai: #f5a65b;
    --brand-indigo: #3b32c4;
    --primary-gradient: #c0531a;
    --secondary: #a8a2ff;
    --accent: #f5a65b;
    --accent-glow: rgba(var(--primary-rgb), 0.28);

    /* The flyer's signature orange → plum → indigo blend ("FOUNDATION DAY").
       Reserved for a few accents: hero highlight, reading-progress bar, spotlight card edge. */
    --sig-1: #e07b2c;
    --sig-2: #b05a8a;
    --sig-3: #7d74ff;
    --signature-gradient: linear-gradient(100deg, var(--sig-1) 0%, var(--sig-2) 50%, var(--sig-3) 100%);
    /* Deep indigo band, like the flyer's footer strip */
    --band-bg: #221c6e;
    --band-text: #fbf3e1;
    /* Selected text: royal indigo (the flyer's "DAY" colour) with cream text */
    --selection-bg: #4b40d6;
    --selection-text: #fff8ec;

    --nav-bg: rgba(17, 14, 38, 0.82);
    --nav-solid: #141030;
    --card-shadow: 0 12px 32px -12px rgba(5, 3, 20, 0.6);
    --glow-shadow: 0 0 25px rgba(var(--primary-rgb), 0.2);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --header-height: 4.75rem;
}

[data-theme="light"] {
    /* The flyer itself: warm cream page, ivory cards, ink-indigo text */
    --bg-main: #fdf8ec;
    --bg-gradient: radial-gradient(ellipse 60% 45% at 12% -8%, rgba(200, 102, 26, 0.1) 0%, transparent 70%),
        radial-gradient(ellipse 60% 45% at 88% -8%, rgba(59, 50, 196, 0.08) 0%, transparent 70%);
    --bg-surface: rgba(255, 253, 248, 0.9);
    --bg-surface-hover: rgba(255, 253, 248, 0.98);
    --bg-card: #fffdf8;
    --bg-card-hover: #fff6e4;
    --glass-border: rgba(110, 72, 30, 0.13);
    --glass-border-hover: rgba(var(--primary-rgb), 0.45);

    --text-main: #241b3a;
    --text-muted: #5b4f66;
    --text-dim: #857888;

    --primary: #c0531a;
    --primary-rgb: 192, 83, 26;
    --primary-light: #a8440f;
    --brand-text: #3b30b5;
    --brand-ido: #221c6e;
    --brand-ai: #c0531a;
    --brand-indigo: #3b30b5;
    --primary-gradient: #c0531a;
    --secondary: #3b30b5;
    --accent: #c0531a;
    --accent-glow: rgba(var(--primary-rgb), 0.15);

    --sig-1: #c8661a;
    --sig-2: #8a4a8c;
    --sig-3: #3b32c4;
    --band-bg: #241d7a;
    --selection-bg: #f6d2b0;
    --selection-text: #241b3a;

    --nav-bg: rgba(250, 242, 223, 0.86);
    --nav-solid: #faf2df;
    --card-shadow: 0 12px 30px -12px rgba(90, 55, 20, 0.16);
    --glow-shadow: 0 0 25px rgba(var(--primary-rgb), 0.12);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    font-size: 16px;
}

/* Tablets and computers: the root size grows smoothly with the window, slightly under 16px on
   ordinary laptop/desktop screens (about 14.75px at 1366px wide, 15.3px at 1920px, 16px at 2560px).
   Every size is in rem, so text and spacing scale together. Phones keep 16px for comfortable reading. */
@media (min-width: 769px) {
    html {
        font-size: clamp(14.5px, 13.32px + 0.105vw, 17.5px);
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Fixed gradient backdrop on its own layer (background-attachment: fixed repaints on every scroll frame) */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: var(--bg-gradient);
    pointer-events: none;
}

/* Selected text in the site's own colours: peach in light mode, royal indigo in dark (also readable on the gradient "AI", whose own fill is transparent) */
::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-main);
}

/* Brand-coloured text (kept the old class name so the HTML needn't change) */
.text-gradient {
    color: var(--brand-text);
    display: inline-block;
}

/* Hero highlight: the one place headline text wears the flyer's orange → indigo blend */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-title .text-gradient {
        background: var(--signature-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding-right: 0.04em; /* keeps the last letter's edge inside the painted area */
    }
}

p {
    color: var(--text-muted);
}

a {
    color: var(--primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header & Navigation */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--glass-border);
    transition: all var(--transition-normal);
}

.site-header.scrolled {
    box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.45);
    border-bottom-color: var(--glass-border-hover);
}

/* Reading progress bar along the bottom edge of the header */
.scroll-progress {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--signature-gradient);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-logo img {
    height: 2.625rem;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.logo-dark {
    display: block;
}

.logo-light {
    display: none;
}

[data-theme="light"] .logo-dark {
    display: none;
}

[data-theme="light"] .logo-light {
    display: block;
}

.brand-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* Wordmark in the favicon's design: cream "Ido", orange "AI", short signature-gradient bar */
.brand-title.brand-wordmark {
    position: relative;
    display: inline-block;
    color: var(--brand-ido);
}

.brand-wordmark .brand-ai {
    color: var(--brand-ai);
}

.brand-wordmark::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0.17em;
    width: 62%;
    height: 0.12em;
    border-radius: 999px;
    background: var(--signature-gradient);
    transform: translateX(-50%);
}

/* Header wordmark drops the bar */
.site-header .brand-wordmark::after {
    content: none;
}

/* Tight two-line lockup so title and subtitle sit together, centred on the logo */
.site-header .brand-title {
    display: block;
    line-height: 1.1;
}

.site-header .brand-subtitle {
    margin-top: 0.3rem;
}

.brand-subtitle {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 500;
    display: block;
    line-height: 1;
    margin-top: 2px;
    white-space: nowrap;
}

.subtitle-short {
    display: none;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

/* Icons and the call-to-action only appear in the mobile menu */
.nav-link i,
.nav-cta {
    display: none;
}

.nav-link:not(.active):hover {
    color: var(--text-main);
    background: var(--glass-border);
}

.nav-link.active {
    color: var(--text-main);
    isolation: isolate;
}

/* Active pill + underline. Its own view-transition name lets it glide to the new tab on page change. */
.nav-indicator {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--glass-border);
    view-transition-name: nav-indicator;
}

/* Underline grows softly from the centre as the page opens */
.nav-indicator::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 12px;
    right: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-gradient);
    transform-origin: center;
    animation: underlineIn 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s backwards;
}

@keyframes underlineIn {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
}

@media (min-width: 769px) {
    /* Hover: a soft background fades in on the tab itself */
    .nav-link:not(.active):hover {
        background: var(--glass-border);
    }

    .nav-link.active > span:not(.nav-indicator) {
        color: var(--brand-text);
        font-weight: 600;
    }
}

/* Small laptops and tablets: the same top header, just with tighter tab spacing
   (below 769px the bottom bar takes over; there is no in-between hamburger header) */
@media (min-width: 769px) and (max-width: 1000px) {
    .nav-menu {
        gap: 0.5rem;
    }

    .nav-actions {
        gap: 0.6rem;
    }
}

/* Crossing the phone breakpoint while resizing (class set briefly by js/main.js): no transitions
   replay mid-swap, and the bar that appears just fades in, the bottom bar rising slightly */
html.layout-swap .site-header,
html.layout-swap .site-header *,
html.layout-swap .bottom-nav,
html.layout-swap .bottom-nav * {
    transition: none !important;
}

html.layout-swap .nav-container {
    animation: layoutSwapFade 0.3s ease;
}

html.layout-swap .bottom-nav {
    animation: layoutSwapRise 0.35s var(--ease-out-expo);
}

@keyframes layoutSwapFade {
    from {
        opacity: 0;
    }
}

@keyframes layoutSwapRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Theme button: one round button. Light mode shows a moon (go dark), dark mode shows a sun (go light).
   Both icons are in the HTML and stacked; the theme turns one in and the other out, before the first paint. */
.theme-toggle-btn {
    position: relative;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    width: 2.625rem;
    height: 2.625rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.4s ease, border-color var(--transition-fast),
        transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Hover: the round frame stays in place (only its border and glow change); the icon inside does the moving */
.theme-toggle-btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    box-shadow: var(--glow-shadow);
}

.theme-toggle-btn:active {
    transform: scale(0.94);
}

.theme-icon-sun,
.theme-icon-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.2rem;
    height: 1.2rem;
    margin: -0.6rem 0 0 -0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), color 0.4s ease;
}

/* Sun: warm saffron, shown in dark mode */
.theme-icon-sun {
    color: #ffb347;
    opacity: 1;
    transform: rotate(0) scale(1);
}

.theme-icon-sun .sun-rays {
    transform-origin: 12px 12px;
    transition: transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.4s ease;
}

/* Moon: IIT KGP indigo, shown in light mode */
.theme-icon-moon {
    color: var(--brand-indigo);
    opacity: 0;
    transform: rotate(-90deg) scale(0.3) translateY(0.6rem);
}

[data-theme="light"] .theme-icon-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.3);
}

/* As the sun leaves, its rays pull in, so it reads as setting rather than just shrinking */
[data-theme="light"] .theme-icon-sun .sun-rays {
    transform: scale(0.4) rotate(45deg);
    opacity: 0;
}

[data-theme="light"] .theme-icon-moon {
    opacity: 1;
    transform: rotate(0) scale(1) translateY(0);
}

/* Hover: the sun's rays slowly turn, the moon tilts */
.theme-toggle-btn:hover .theme-icon-sun .sun-rays {
    transform: rotate(45deg);
}

[data-theme="light"] .theme-toggle-btn:hover .theme-icon-moon {
    transform: rotate(-18deg) scale(1);
}

/* While the theme changes, colours fade instead of snapping (class added for ~0.5s by js/main.js).
   The theme button is left out so its icons keep their own turn-and-fade timing. */
html.theme-switching *:not(.theme-toggle-btn, .theme-toggle-btn *),
html.theme-switching *:not(.theme-toggle-btn, .theme-toggle-btn *)::before,
html.theme-switching *:not(.theme-toggle-btn, .theme-toggle-btn *)::after {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke !important;
    transition-duration: 0.45s !important;
    transition-timing-function: ease !important;
}

html.theme-switching body {
    transition: background-color 0.45s ease, color 0.45s ease !important;
}

/* Hover popup under the theme toggle; its text comes from data-tooltip (set in js/main.js).
   Right-aligned to the button so it never runs off the edge of the screen.
   z-index lifts it above the header's scroll progress bar, which is appended later in the header */
.theme-toggle-btn {
    position: relative;
    z-index: 2;
}

.theme-toggle-btn[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    background: var(--text-main);
    color: var(--bg-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Only real hover devices get the popup (a tap on a phone would leave it stuck open) */
@media (hover: hover) {
    .theme-toggle-btn:hover::after {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.25s;
    }
}

.theme-toggle-btn:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Menu button matches the theme toggle; three bars morph into an X */
.mobile-menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mobile-menu-btn:hover,
.mobile-menu-btn[aria-expanded="true"] {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    box-shadow: var(--glow-shadow);
}

.hamburger {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
}

.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top 0.3s var(--ease-out-expo), transform 0.35s var(--ease-out-expo), opacity 0.2s ease;
}

.hamburger span:nth-child(1) {
    top: 0;
}

.hamburger span:nth-child(2) {
    top: 6px;
}

.hamburger span:nth-child(3) {
    top: 12px;
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-btn[aria-expanded="true"] .hamburger span:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
}

/* Dims the page behind the open mobile menu (element injected by JS) */
.nav-backdrop {
    display: none;
}

/* Hero Section */
.hero-section {
    padding-top: 9.375rem;
    padding-bottom: 4.375rem;
    position: relative;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-light);
    margin-bottom: 1.5rem;
}

.hero-badge .pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 10px #22c55e;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.hero-title {
    font-size: clamp(2rem, 1.75rem + 3vw, 4.25rem);
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

/* Hero & page-header entrance: each child rises in with a short stagger */
.hero-section .container > *,
.page-header > * {
    animation: fadeUp 0.9s var(--ease-out-expo) both;
}

.hero-section .container > :nth-child(2),
.page-header > :nth-child(2) {
    animation-delay: 0.1s;
}

.hero-section .container > :nth-child(3) {
    animation-delay: 0.2s;
}

.hero-section .container > :nth-child(4) {
    animation-delay: 0.3s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-description {
    font-size: 1.25rem;
    max-width: 48.75rem;
    margin: 0 auto 2.5rem;
    color: var(--text-muted);
}

.hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    border: none;
}

.btn-primary {
    background: var(--primary-gradient);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.35);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.5);
    color: #ffffff;
}

.btn-secondary {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--primary);
    transform: translateY(-2px);
    color: var(--text-main);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

/* Stat Cards Banner */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    transition: transform var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-5px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--card-shadow);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-light);
    font-family: 'Outfit', sans-serif;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-dim);
    margin-top: 4px;
    font-weight: 500;
}

/* Featured / Upcoming Talk Card */
.section-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-align: left;
}

/* Section headings lead with an icon in the accent colour (Next Talk, Past Talks, About, ...) */
.section-title > i:first-child {
    color: var(--primary-light);
}

/* Headings that lead with an icon get clear breathing room before the first letter */
:is(h1, h2, h3, h4) > i:first-child {
    margin-right: 0.4em;
}

.section-subtitle {
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 2rem;
    text-align: justify;
    hyphens: auto;
}

.featured-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    margin-bottom: 4rem;
    box-shadow: var(--card-shadow);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-normal);
}

.featured-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, var(--sig-1), var(--sig-2), var(--sig-3));
}

.featured-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.event-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    color: var(--primary-light);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.featured-title {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.presenter-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.presenter-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.2rem;
}

.presenter-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-main);
}

.presenter-role {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.abstract-box {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: justify;
    hyphens: auto;
}

.abstract-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Featured Spotlight Footer & Countdown Alignment */
/* Buttons at the foot of the Next Talk card (details, slides) */
.featured-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.featured-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.countdown-container {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    flex-wrap: wrap;
}

.countdown-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.countdown-timer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.timer-val {
    font-size: 1.65rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    line-height: 1;
    color: var(--brand-text);
}

.timer-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* About Section Styles */
.about-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 3rem;
}

.about-grid {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

.about-main {
    flex: 1;
    min-width: 280px;
}

.about-text {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-top: 1rem;
    color: var(--text-muted);
}

.about-action {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.venue-box {
    flex: 0 0 280px;
    background: var(--bg-card);
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border);
}

.venue-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--primary-light);
}

.venue-item {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    color: var(--text-main);
}

.venue-item:last-child {
    margin-bottom: 0;
}

/* Filterable Search & Events Cards */
.controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.search-input-wrapper > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 46px;
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.95rem;
    outline: none;
    transition: all var(--transition-fast);
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-shadow);
}

/* With fewer than 4 photos the filter buttons are hidden before the first paint, so the grid
   never jumps up (js/main.js applies the same rule for browsers without :has) */
.controls-bar:has(+ .gallery-grid):not(:has(+ .gallery-grid > .filterable-item:nth-child(4))) {
    display: none;
}

/* Archive search: clear button, "searching" sweep, result count, empty state, highlights */
.search-input-wrapper .search-input {
    padding-right: 44px;
}

.archive-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity 0.2s ease, visibility 0.2s, color var(--transition-fast);
}

.search-input-wrapper.has-value .archive-clear {
    opacity: 1;
    visibility: visible;
}

.archive-clear:hover,
.archive-clear:focus-visible {
    color: var(--text-main);
}

.search-input-wrapper .archive-progress {
    left: 14px;
    right: 14px;
    bottom: 0;
}

.search-input-wrapper.is-searching .archive-progress {
    opacity: 1;
}

.search-input-wrapper.is-searching .archive-progress::before {
    animation: searchSweep 0.9s ease-in-out infinite;
}

.archive-status {
    margin: -1.25rem 0 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
}

.archive-status:empty {
    display: none;
}

/* Matches from talks outside the archive (Recent Events), linked above the filtered list */
.archive-elsewhere[hidden] {
    display: none;
}

.archive-elsewhere {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 1.25rem;
    animation: searchItemIn 0.4s var(--ease-out-expo) backwards;
}

.archive-elsewhere-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
}

.archive-elsewhere-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--text-main);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.archive-elsewhere-link:hover,
.archive-elsewhere-link:focus-visible {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-color: var(--primary);
}

.archive-elsewhere-speaker {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.archive-elsewhere mark {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

.archive-empty[hidden] {
    display: none;
}

.archive-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
    animation: searchItemIn 0.4s var(--ease-out-expo) backwards;
}

.archive-empty p {
    margin-top: 4px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

mark.find-hit {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* Cards that come back into view when the filter changes */
.filter-in {
    animation: searchItemIn 0.4s var(--ease-out-expo) backwards;
    animation-delay: calc(min(var(--i, 0), 8) * 40ms);
}

.category-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pill-btn {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.pill-btn:hover,
.pill-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

/* Events Grid & Accordion Cards */
.events-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.event-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition-normal);
}

.event-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--card-shadow);
}

.event-summary {
    display: grid;
    grid-template-columns: 130px 14.5rem 1fr auto; /* speaker column fits the longest name ("Shri Anil Kishore Yadav, IPS") on one line */
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    user-select: none;
}

.event-date-badge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-light);
    display: flex;
    align-items: center;
    gap: 6px;
}

.event-speaker {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
}

/* Speaker Profile Links & Badges */
.event-speaker a.speaker-profile-link,
.speaker-profile-link {
    color: var(--text-main);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.event-speaker a.speaker-profile-link:hover,
.speaker-profile-link:hover {
    color: var(--primary-light);
}

.event-speaker a.speaker-profile-link i,
.speaker-profile-link i {
    color: var(--primary-light);
    font-size: 0.9em;
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.event-speaker a.speaker-profile-link:hover i,
.speaker-profile-link:hover i {
    transform: scale(1.2);
    color: var(--secondary);
}

.speaker-profile-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light);
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    border-radius: var(--radius-full);
    text-decoration: none;
    vertical-align: middle;
    transition: all var(--transition-fast);
}

.speaker-profile-badge:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.3);
}

.speaker-profile-badge:hover i {
    color: #ffffff !important;
}

/* Speaker name without a profile link: same look as the link, no hover */
.speaker-name {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.speaker-name i {
    color: var(--primary-light);
    font-size: 0.9em;
}

/* Home page link to the inaugural IdoAI event */
.inaugural-callout {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.75rem;
    padding: 1.25rem 1.5rem;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: var(--radius-md);
    color: var(--text-main);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.inaugural-callout:hover,
.inaugural-callout:focus-visible {
    border-color: var(--glass-border-hover);
    box-shadow: var(--card-shadow), var(--glow-shadow);
    transform: translateY(-2px);
}

.inaugural-callout-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 1.15rem;
}

.inaugural-callout-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.inaugural-callout-title {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Wide screens: "Inaugural IdoAI Event • 21 July 2025" on one line */
.inaugural-callout-date::before {
    content: '\2022\00a0';
}

.inaugural-callout-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.inaugural-callout-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-light);
}

.inaugural-callout-cta i {
    transition: transform var(--transition-fast);
}

.inaugural-callout:hover .inaugural-callout-cta i {
    transform: translateX(4px);
}

/* Phones: event name on one line, the date on its own line below; the text and the
   "View details" link share one left edge beside the icon */
@media (max-width: 600px) {
    .inaugural-callout {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        column-gap: 0.9rem;
        row-gap: 0.6rem;
        padding: 1.1rem;
    }

    .inaugural-callout-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .inaugural-callout-name {
        white-space: nowrap;
    }

    .inaugural-callout-date {
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--primary-light);
    }

    .inaugural-callout-date::before {
        content: none;
    }

    .inaugural-callout-desc {
        margin-top: 4px;
    }

    .inaugural-callout-cta {
        grid-column: 2;
    }
}

/* Section titles with a date: "Title (date)" on wide screens; on phones the date drops to its
   own line, lined up under the title text rather than the icon */
.title-date::before {
    content: '(';
}

.title-date::after {
    content: ')';
}

@media (max-width: 600px) {
    .title-with-date {
        display: flex;
        align-items: baseline;
    }

    .title-with-date > i:first-child {
        flex-shrink: 0;
    }

    .title-date {
        display: block;
        margin-top: 0.15rem;
        font-size: 0.7em;
        font-weight: 600;
        color: var(--text-muted);
    }

    .title-date::before,
    .title-date::after {
        content: none;
    }
}

/* Small heading inside a section, e.g. "Talks & Sessions" between the schedule and the talk cards */
.subsection-heading {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    margin: 2.25rem 0 1rem;
    font-size: 1.1rem;
    color: var(--text-main);
}

.subsection-heading > i {
    margin-right: 0;
    color: var(--primary-light);
}

.subsection-hint {
    margin-left: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-dim);
}

/* Phones: the hint drops under the heading text, lined up with it rather than the icon */
@media (max-width: 600px) {
    .subsection-heading {
        grid-template-columns: auto 1fr;
        margin-top: 1.75rem;
    }

    .subsection-hint {
        grid-column: 2;
        margin-left: 0;
    }
}

/* Day schedule (inaugural IdoAI event) */
.schedule-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

.schedule-title {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.schedule-title i {
    color: var(--primary-light);
}

.schedule-table-wrapper {
    overflow-x: auto;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.schedule-table th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-light);
    padding: 0 1rem 0.75rem 0;
    border-bottom: 1px solid var(--glass-border);
}

.schedule-table td {
    padding: 0.8rem 1rem 0.8rem 0;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-muted);
    vertical-align: top;
    line-height: 1.5;
}

.schedule-table tbody tr:last-child td {
    border-bottom: none;
}

.schedule-table td:first-child {
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-main);
}

.schedule-table td:nth-child(2) {
    white-space: nowrap;
}

.schedule-table td strong {
    color: var(--text-main);
}

/* Event cell: talk title on the first line, speaker (linked to their profile when there is one) below */
.schedule-event {
    display: block;
    font-weight: 500;
    color: var(--text-main);
}

.schedule-speaker {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 0.3rem;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-muted);
}

.schedule-speaker > i {
    color: var(--primary-light);
}

.schedule-speaker a {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--primary-light);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast);
}

.schedule-speaker a:hover,
.schedule-speaker a:focus-visible {
    border-bottom-color: currentColor;
}

.schedule-speaker a i {
    font-size: 0.7em;
    opacity: 0.75;
}

@media (max-width: 600px) {
    .schedule-card {
        padding: 1.1rem;
    }

    .schedule-table {
        font-size: 0.85rem;
    }

    /* Stack each row: time + venue on one line, the event underneath */
    .schedule-table thead {
        display: none;
    }

    .schedule-table tr {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.75rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--glass-border);
    }

    .schedule-table tbody tr:last-child {
        border-bottom: none;
    }

    .schedule-table td,
    .schedule-table tbody tr:last-child td {
        padding: 0;
        border-bottom: none;
    }

    .schedule-table td:nth-child(2) {
        color: var(--primary-light);
    }

    .schedule-table td:nth-child(3) {
        grid-column: 1 / -1;
        margin-top: 0.3rem;
    }
}

.event-topic {
    font-weight: 500;
    color: var(--text-main);
    font-size: 1.05rem;
}

.expand-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: transform 0.4s var(--ease-out-expo), color var(--transition-fast);
}

.event-card.expanded .expand-icon {
    transform: rotate(180deg);
    color: var(--primary-light);
}

/* Grid-row trick animates to the content's real height (no max-height clipping or lag) */
.event-details-drawer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.45s var(--ease-out-expo), border-color var(--transition-fast);
    background: var(--bg-card);
    border-top: 1px solid transparent;
}

.event-card.expanded .event-details-drawer {
    grid-template-rows: 1fr;
    border-top-color: var(--glass-border);
}

.drawer-content {
    min-height: 0;
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.45s var(--ease-out-expo), padding 0.45s var(--ease-out-expo);
}

/* Padding can't shrink inside a 0fr row, so collapse it too */
.event-card:not(.expanded) .drawer-content {
    padding-top: 0;
    padding-bottom: 0;
}

.event-card.expanded .drawer-content {
    opacity: 1;
    transform: none;
    transition-delay: 0.08s;
}

.drawer-abstract {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
    text-align: justify;
    hyphens: auto;
}

/* Portrait poster beside the abstract: floats right and the text wraps around it */
.drawer-with-poster {
    display: flow-root; /* contains the float, so the links row below starts under the poster */
    margin-bottom: 1.25rem;
}

.drawer-with-poster .drawer-abstract {
    margin-bottom: 0;
}

.talk-poster-container.talk-poster-side {
    float: right;
    width: min(360px, 40%);
    margin: 0.25rem 0 1rem 1.75rem;
}

@media (max-width: 700px) {
    .talk-poster-container.talk-poster-side {
        float: none;
        width: 100%;
        max-width: 360px;
        margin: 0 auto 1.25rem;
    }
}

/* Portrait poster on its own (Home page cards, no abstract beside it) */
.talk-poster-container.talk-poster-center {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 1.25rem;
}

/* "Full abstract & details" link on Home cards: the one filled button in the row */
a.resource-btn.resource-btn-primary {
    background: var(--primary-gradient);
    border-color: transparent;
    color: #ffffff;
    font-weight: 600;
}

a.resource-btn.resource-btn-primary i {
    transition: transform var(--transition-fast);
}

a.resource-btn.resource-btn-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-1px);
}

a.resource-btn.resource-btn-primary:hover i {
    transform: translateX(3px);
}

/* Home cards without a poster are just one row of links: no need for a "Show less" bar */
.highlights-section .drawer-content:not(:has(.talk-poster-container)) > .drawer-collapse {
    display: none;
}

.drawer-list {
    margin: 0.75rem 0 1rem;
    padding-left: 1.4rem;
    text-align: left;
}

.drawer-list li {
    margin-bottom: 0.4rem;
}

.drawer-list li::marker {
    color: var(--primary-light);
}

.resource-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.resource-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-main);
    transition: all var(--transition-fast);
}

span.resource-btn {
    cursor: default;
}

/* "Show less" button closing an expanded talk card from the bottom */
.drawer-collapse {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

.collapse-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.collapse-btn:hover,
.collapse-btn:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.collapse-btn i {
    font-size: 0.8em;
}

a.resource-btn:hover,
button.resource-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
}

a.resource-btn:hover i,
button.resource-btn:hover i {
    color: #ffffff !important;
}

span.resource-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--glass-border-hover);
    color: var(--text-main);
}

/* Gallery Photos & Cards */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 1.75rem;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 300px;
    cursor: pointer;
    border: 1px solid var(--glass-border);
    background: var(--bg-surface);
    transition: all var(--transition-normal);
    box-shadow: var(--card-shadow);
}

/* The frame stays put on hover; only the photo inside zooms */
.gallery-item:hover {
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), var(--glow-shadow);
}

.gallery-item img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* keeps faces and the slide screen in frame for portrait photos */
    display: block;
    transition: transform 0.5s var(--ease-out-expo), filter 0.3s ease, opacity 0.4s ease;
}

/* Alt text shown in the photo's place only while it loads (or if it fails); the photo fades in over it */
.gallery-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: linear-gradient(100deg, var(--bg-surface) 30%, var(--bg-card) 50%, var(--bg-surface) 70%);
    background-size: 200% 100%;
    animation: searchShimmer 1.6s linear infinite;
}

.gallery-item.is-loading img {
    opacity: 0;
}

.gallery-item:not(.is-loading) .gallery-placeholder {
    visibility: hidden;
    animation: none;
}

/* Failed photo: keep the alt text, without the loading shimmer */
.gallery-item.is-broken .gallery-placeholder {
    animation: none;
}

/* Hover / keyboard focus: the photo zooms inside a fixed frame and a "View fullscreen" pill
   appears in the bottom-right corner (the name/date tag stays bottom-left) */
.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.75rem;
    pointer-events: none;
}

.gallery-overlay-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    white-space: nowrap;
    background: rgba(10, 15, 26, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px) scale(0.92);
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo);
}

.gallery-overlay-btn i {
    color: var(--primary-light);
}

.gallery-item:hover .gallery-overlay-btn,
.gallery-item:focus-visible .gallery-overlay-btn {
    opacity: 1;
    transform: none;
}

/* On hover-capable screens leave room for the pill, so long names wrap instead of running under it */
@media (hover: hover) {
    .gallery-corner-tag {
        max-width: calc(100% - 10.5rem);
    }
}

/* Subtle corner badge for name & date (minimal, small font, unobtrusive) */
.gallery-corner-tag {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    padding: 5px 10px;
    background: rgba(10, 15, 26, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.corner-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.2;
}

.corner-date {
    font-size: 0.7rem;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.corner-date i {
    color: var(--primary-light);
    font-size: 0.65rem;
}

/* Member Card Grid & Card Template */
.members-grid {
    display: grid;
    /* auto-fit + capped track width + centering keeps the cards grouped in the
       middle on wide screens instead of leaving empty columns on the right */
    grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 360px));
    justify-content: center;
    gap: 2rem;
}

.member-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.5rem 1.75rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.member-card:hover {
    transform: translateY(-6px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--card-shadow), var(--glow-shadow);
}

.member-avatar-wrapper {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    margin-bottom: 1.25rem;
    position: relative;
    padding: 3px;
    background: var(--primary-gradient);
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);
}

.member-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
    font-size: 2.2rem;
    border: 2px solid var(--bg-main);
    overflow: hidden;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out-expo);
}

/* Photo zooms gently inside its circle; the ring lifts and glows */
.member-avatar-wrapper {
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease;
}

.member-avatar-wrapper:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 28px rgba(var(--primary-rgb), 0.5);
}

.member-avatar-wrapper:hover img {
    transform: scale(1.12);
}

.member-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
}

.member-responsibility {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    color: var(--primary-light);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.member-affiliation {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Former coordinators: separated from the current team, current role shown under affiliation */
.team-subsection {
    margin-top: 4rem;
}

.team-subheading {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.team-subheading i {
    color: var(--primary-light);
}

/* One-line note under the affiliation (a contribution or current role). It sits just above the
   buttons, so notes in the same row line up even when the cards above them differ in length. */
.member-note {
    margin-top: auto;
    margin-bottom: 1.6rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.member-note i {
    margin-right: 0.3rem;
    color: var(--primary-light);
}

.member-note a {
    color: var(--text-main);
    font-weight: 600;
    text-decoration: none;
}

.member-note a:hover,
.member-note a:focus-visible {
    color: var(--primary-light);
    text-decoration: underline;
}

.member-note + .member-actions {
    margin-top: 0;
}

/* Keep the note visually tied to the details above it rather than floating midway */
.member-affiliation:has(+ .member-note) {
    margin-bottom: 1rem;
}

.member-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
}

/* Footer */
.site-footer {
    background: var(--nav-bg);
    border-top: 1px solid var(--glass-border);
    padding: 4rem 0 0;
    margin-top: 5rem;
    overflow: hidden; /* clips the full-width copyright band */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand p {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.footer-heading {
    font-size: 1.1rem;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
}

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

/* Quick links: an accent underline sweeps in under the label and a small arrow fades in after it */
.footer-links:not(.footer-connect) a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 2px;
}

.footer-links:not(.footer-connect) a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 18px; /* stops under the label, not the arrow */
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.4s var(--ease-out-expo);
}

.footer-links:not(.footer-connect) a::after {
    content: '061';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.7rem;
    width: 12px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.4s var(--ease-out-expo);
}

.footer-links:not(.footer-connect) a:hover,
.footer-links:not(.footer-connect) a:focus-visible {
    color: var(--text-main);
}

.footer-links:not(.footer-connect) a:hover::before,
.footer-links:not(.footer-connect) a:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

.footer-links:not(.footer-connect) a:hover::after,
.footer-links:not(.footer-connect) a:focus-visible::after {
    opacity: 1;
    color: var(--primary-light);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .footer-links:not(.footer-connect) a::before,
    .footer-links:not(.footer-connect) a::after {
        transition: opacity 0.2s ease;
    }
}

/* Connect links: tinted icon tiles that fill with their own accent on hover */
.footer-connect {
    gap: 0.5rem;
}

.footer-connect a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* The tile carries the colour on hover, so the label just brightens */
.footer-connect a:hover {
    color: var(--text-main);
}

.footer-connect a::after {
    content: '\f08e';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.65rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition-fast), transform 0.3s var(--ease-out-expo);
}

.footer-connect a:hover::after,
.footer-connect a:focus-visible::after {
    opacity: 0.7;
    transform: none;
}

.connect-icon {
    --accent: var(--primary-light);
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 0.85rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast), transform 0.35s var(--ease-out-expo);
}

.connect-icon.is-linkedin {
    --accent: #3b8fe0;
}

.connect-icon.is-map {
    --accent: #f05252;
}

[data-theme="light"] .connect-icon.is-linkedin {
    --accent: #0a66c2;
}

[data-theme="light"] .connect-icon.is-map {
    --accent: #dc2626;
}

.footer-connect a:hover .connect-icon,
.footer-connect a:focus-visible .connect-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* Copyright line sits on a full-width deep indigo band, like the strip along the flyer's foot */
.footer-bottom {
    text-align: center;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--band-text);
    background: var(--band-bg);
    box-shadow: 0 0 0 100vmax var(--band-bg);
    clip-path: inset(0 -100vmax);
}

/* Designer credit: its own line under the copyright */
.footer-credit {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.92em;
    opacity: 0.85;
}

.footer-credit a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(var(--primary-rgb), 0.6);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: #ffb37a; /* the band is dark in both themes, so a fixed light accent */
    text-decoration-color: currentColor;
}

/* Talk Poster Block (Home Page Next Seminar Spotlight) */
.talk-poster-container {
    margin: 1.75rem 0;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0.35rem;
    position: relative;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.talk-poster-container:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.talk-poster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0 0.25rem;
}

.poster-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-light);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.poster-expand-btn {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color var(--transition-fast);
}

.poster-expand-btn:hover {
    color: var(--primary-light);
}

.talk-poster-preview {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.talk-poster-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-normal);
}

.talk-poster-preview:hover .talk-poster-img {
    transform: scale(1.01);
}

/* Poster hover: no dimming or blur, just a pill that rises from the bottom */
.poster-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
}

.poster-overlay span {
    background: rgba(15, 20, 32, 0.9);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    transition: opacity 0.3s ease, transform 0.45s var(--ease-out-expo);
}

.poster-overlay span i {
    color: var(--primary-light);
}

.talk-poster-preview:hover .poster-overlay span,
.talk-poster-preview:focus-visible .poster-overlay span {
    opacity: 1;
    transform: none;
}

/* Session photo in the Next Talk card: a 4:3 photo (cropped from the portrait original) with a short
   caption beside it; clicking the photo opens it in full. Phones show the full portrait photo only. */
.session-photo {
    display: grid;
    grid-template-columns: minmax(0, 20rem) 1fr;
    align-items: center;
    gap: 1rem 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
}

.session-photo .talk-poster-img {
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 40%;
}

.session-photo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.5rem 1rem 0.5rem 0;
}

.session-photo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-light);
}

.session-photo-text p {
    color: var(--text-main);
    font-weight: 500;
}

.session-photo-text .nowrap {
    white-space: nowrap;
}

.session-photo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-light);
    text-decoration: none;
}

.session-photo-link i {
    font-size: 0.8em;
    transition: transform var(--transition-fast);
}

.session-photo-link:hover i,
.session-photo-link:focus-visible i {
    transform: translateX(3px);
}

/* Phones: just the photo, uncropped in its own portrait shape (no caption) */
@media (max-width: 600px) {
    .session-photo {
        grid-template-columns: 1fr;
    }

    .session-photo .talk-poster-img {
        aspect-ratio: auto;
        object-fit: contain;
    }

    .session-photo-text {
        display: none;
    }
}

/* Wide (3:1) animated talk flyer: spans the card and is never cropped or letterboxed */
.talk-poster-container.talk-banner {
    margin: 0 0 1.5rem;
    padding: 0.3rem;
}

/* Display-only: no zoom cursor or hover scale */
.talk-banner .talk-poster-preview {
    border-radius: var(--radius-md);
    cursor: default;
}

.talk-banner .talk-poster-preview:hover .talk-poster-img {
    transform: none;
}

.talk-banner .talk-poster-img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 1;
    border-radius: var(--radius-md);
}

@media (max-width: 768px) {
    .talk-poster-container.talk-banner {
        padding: 0.2rem;
        margin-bottom: 1rem;
    }

    .talk-banner .talk-poster-preview,
    .talk-banner .talk-poster-img {
        border-radius: var(--radius-sm);
    }
}

/* Lightbox Modal */
.lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(12, 9, 30, 0.93);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    /* a zoomed photo can spill past the screen edges; clip (not just hidden) so scrollIntoView can't scroll the viewer */
    overflow: hidden;
    overflow: clip;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-modal.active {
    opacity: 1;
    visibility: visible;
    /* Become visible instantly so the close button can take focus; fade-out still uses the base transition */
    transition: opacity 0.3s ease, visibility 0s;
}

/* Close button, photo and caption share the screen: the photo row takes whatever height is left,
   so any photo fits whole (never cropped) on phones, tablets and desktops */
.lightbox-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    align-items: center;
    gap: 0.75rem;
    transform: scale(0.94) translateY(12px);
    transition: transform 0.4s var(--ease-out-expo);
}

.lightbox-modal.active .lightbox-content {
    transform: none;
}

.lightbox-img {
    grid-row: 2;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
    border: 1px solid var(--glass-border);
}

.lightbox-caption {
    grid-row: 3;
    color: #f8fafc;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.lightbox-caption:empty {
    display: none;
}

.lightbox-info {
    padding: 0.85rem 1.5rem;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    text-align: center;
    max-width: 850px;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.lightbox-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.4rem;
    line-height: 1.35;
}

.lightbox-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: #94a3b8;
}

.lightbox-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lightbox-speaker {
    color: #ffb37a;
    font-weight: 600;
}

.lightbox-venue {
    color: #cbd5e1;
}

.lightbox-close {
    grid-row: 1;
    justify-self: end;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}

.lightbox-close:hover {
    background: rgba(239, 68, 68, 0.85);
    transform: scale(1.1);
}

/* Stepping through gallery photos: arrows at the sides, counter top-left, quick fade between photos */
.lightbox-img {
    transition: opacity 0.15s ease, transform 0.25s var(--ease-out-expo);
}

.lightbox-img.is-switching {
    opacity: 0;
}

/* Zoom (js/main.js): the photo scales and pans in place; pinch and drag go to the viewer, not the page */
.lightbox-img {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: zoom-in;
}

/* Dragging / pinching: the photo follows the pointer directly */
.lightbox-img.is-gesturing {
    transition: opacity 0.15s ease;
}

.lightbox-modal.is-zoomed .lightbox-img {
    cursor: grab;
}

.lightbox-modal.is-zoomed .lightbox-img.is-gesturing {
    cursor: grabbing;
}

/* Controls and caption stay above a zoomed photo */
.lightbox-toolbar,
.lightbox-counter,
.lightbox-caption > *,
.lightbox-sidebar {
    position: relative;
    z-index: 2;
}

.lightbox-counter {
    grid-row: 1;
    grid-column: 1; /* shares the close button's row, left side */
    justify-self: start;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e2e8f0;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(15, 23, 42, 0.6);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.lightbox-prev {
    left: 0.5rem;
}

.lightbox-next {
    right: 0.5rem;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    background: rgba(15, 23, 42, 0.85);
    border-color: var(--primary-light);
}

/* Only when there's more than one photo to step through (never for posters) */
.lightbox-modal:not(.has-series) .lightbox-nav,
.lightbox-modal:not(.has-series) .lightbox-counter {
    display: none;
}

/* Viewer toolbar (top-right): slideshow, thumbnails, full screen, close */
.lightbox-toolbar {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lightbox-tool {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lightbox-tool:hover,
.lightbox-tool:focus-visible {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
    transform: scale(1.08);
}

.lightbox-tool[aria-pressed="true"] {
    background: rgba(var(--primary-rgb), 0.35);
    border-color: var(--primary-light);
}

/* Zoom in / out at their limit */
.lightbox-tool[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
}

.lightbox-tool[aria-disabled="true"]:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: none;
}

/* Slideshow and the thumbnail toggle only make sense for a set of photos; posters get no browser full screen */
.lightbox-modal:not(.has-series) .lightbox-play,
.lightbox-modal:not(.has-series) .lightbox-thumbs-toggle,
.lightbox-modal.is-poster .lightbox-fullscreen {
    display: none;
}

/* Thumbnails of every photo in the set (gallery photos only): a sidebar on the right on wide screens,
   a horizontally scrolling strip along the bottom on phones and tablets */
.lightbox-sidebar {
    display: none;
}

.lightbox-modal.has-series .lightbox-sidebar {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.lightbox-modal.has-series.active .lightbox-sidebar {
    transform: none;
}

@media (max-width: 1023.98px) {
    .lightbox-modal.has-series {
        flex-direction: column;
    }

    .lightbox-modal.has-series .lightbox-content {
        min-height: 0;
    }

    .lightbox-modal.has-series .lightbox-sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-width: 1200px; /* lines up with the photo area */
        max-height: 120px;
        margin-top: 0.6rem;
        transform: translateY(16px);
        transition: max-height 0.4s var(--ease-out-expo), margin 0.4s var(--ease-out-expo), opacity 0.3s ease,
            transform 0.4s var(--ease-out-expo), border-color 0.3s ease;
    }

    .lightbox-modal .lightbox-sidebar-head {
        display: none;
    }

    .lightbox-modal .lightbox-thumbs {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 72px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    /* Hidden: folds down, the photo takes the freed space */
    .lightbox-modal.has-series.thumbs-hidden .lightbox-sidebar {
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        border-color: transparent;
        pointer-events: none;
    }
}

/* Phones on their side: smaller thumbnails so the photo keeps its height */
@media (max-width: 1023.98px) and (max-height: 520px) and (orientation: landscape) {
    .lightbox-modal.has-series .lightbox-sidebar {
        margin-top: 0.4rem;
    }

    .lightbox-modal .lightbox-thumbs {
        grid-auto-columns: 56px;
        padding: 0.4rem;
        gap: 0.4rem;
    }
}

/* Very narrow phones: drop the zoom buttons so the toolbar fits (pinch and double-tap still zoom) */
@media (max-width: 359.98px) {
    .lightbox-zoom-in,
    .lightbox-zoom-out {
        display: none;
    }
}

@media (min-width: 1024px) {
    .lightbox-modal.has-series .lightbox-sidebar {
        /* ~225px on a 1024px tablet in landscape, up to 300px on large screens */
        flex: 0 0 clamp(220px, 22vw, 300px);
        width: clamp(220px, 22vw, 300px);
        height: 100%;
        margin-left: 1rem;
        transform: translateX(24px);
        transition: flex-basis 0.4s var(--ease-out-expo), width 0.4s var(--ease-out-expo),
            margin 0.4s var(--ease-out-expo), opacity 0.3s ease, transform 0.4s var(--ease-out-expo),
            border-color 0.3s ease;
    }

    /* Hidden: slides shut, the photo takes the freed space */
    .lightbox-modal.has-series.thumbs-hidden .lightbox-sidebar {
        flex-basis: 0;
        width: 0;
        margin-left: 0;
        opacity: 0;
        border-color: transparent;
        pointer-events: none;
    }
}

.lightbox-sidebar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.9rem 1rem 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.lightbox-sidebar-count {
    font-size: 0.78rem;
    font-weight: 500;
    color: #94a3b8;
}

.lightbox-thumbs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.75rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    align-content: start;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.lightbox-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0.6;
    transition: opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s var(--ease-out-expo);
}

.lightbox-thumb:hover,
.lightbox-thumb:focus-visible {
    opacity: 1;
}

.lightbox-thumb:hover img {
    transform: scale(1.08);
}

.lightbox-thumb.is-active {
    opacity: 1;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
}

/* Slideshow progress bar along the top edge */
.lightbox-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 3;
    background: var(--primary-gradient);
    pointer-events: none;
}

.lightbox-modal.is-playing .lightbox-progress.run {
    animation-name: lightboxProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes lightboxProgress {
    from { width: 0; }
    to { width: 100%; }
}

/* Browser full screen: solid backdrop */
.lightbox-modal.is-fullscreen {
    background: #05070c;
}

/* Touch screens: slightly larger viewer buttons */
@media (pointer: coarse) {
    /* extra .lightbox-modal so this beats the compact sizes set for small screens further down */
    .lightbox-modal .lightbox-tool,
    .lightbox-modal .lightbox-close {
        width: 42px;
        height: 42px;
    }
}

/* Touch-only devices keep :hover "stuck" after a tap, which would leave a photo zoomed with its pill showing
   once the viewer closes, so the gallery hover effects only apply where a real pointer can hover */
@media (hover: none) {
    .gallery-item:hover {
        border-color: var(--glass-border);
        box-shadow: var(--card-shadow);
    }

    .gallery-item:hover img {
        transform: none;
    }

    .gallery-item:hover .gallery-overlay-btn {
        opacity: 0;
        transform: translateY(8px) scale(0.92);
    }
}

/* Short landscape screens (phones on their side): caption moves beside the photo */
@media (max-height: 520px) and (orientation: landscape) {
    .lightbox-content {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 32%);
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.5rem;
    }

    .lightbox-toolbar,
    .lightbox-counter {
        grid-column: 1 / -1;
    }

    .lightbox-img {
        grid-column: 1;
    }

    /* keep the right arrow on the photo, not over the caption column */
    .lightbox-modal .lightbox-next {
        right: calc(max(200px, 32%) + 1.5rem);
    }

    .lightbox-caption {
        grid-row: 2;
        grid-column: 2;
        align-self: center;
        max-height: 100%;
        overflow-y: auto;
    }

    .lightbox-meta {
        flex-direction: column;
        gap: 0.4rem;
    }
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .nav-actions {
        gap: 0.6rem;
    }

    /* Solid panel: a nested backdrop-filter can't blur through the header, so a translucent menu showed page text */
    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        max-height: calc(100vh - var(--header-height));
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        background: var(--nav-solid);
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem 1rem 1.25rem;
        gap: 0.25rem;
        border-bottom: 1px solid var(--glass-border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.45);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.4s var(--ease-out-expo), opacity 0.25s ease, visibility 0.4s;
    }

    .nav-menu.open {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    /* Menu items cascade in */
    .nav-menu li {
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo);
    }

    .nav-menu.open li {
        opacity: 1;
        transform: none;
    }

    .nav-menu.open li:nth-child(2) { transition-delay: 0.04s; }
    .nav-menu.open li:nth-child(3) { transition-delay: 0.08s; }
    .nav-menu.open li:nth-child(4) { transition-delay: 0.12s; }
    .nav-menu.open li:nth-child(5) { transition-delay: 0.16s; }

    .nav-link {
        display: flex;
        width: 100%;
        padding: 13px 16px;
        font-size: 1rem;
        border-radius: var(--radius-md);
    }

    .nav-link i {
        display: inline-flex;
        justify-content: center;
        width: 20px;
        color: var(--text-dim);
        transition: color var(--transition-fast);
    }

    .nav-link:hover i {
        color: var(--text-main);
    }

    .nav-link.active {
        background: color-mix(in srgb, var(--primary) 14%, transparent);
        color: var(--primary-light);
    }

    [data-theme="light"] .nav-link.active {
        color: var(--primary);
    }

    .nav-link.active i {
        color: inherit;
    }

    /* The sliding pill is desktop-only; the mobile menu marks the active row with a dot */
    .nav-indicator {
        display: none;
    }

    .nav-link.active::after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        transform: translateY(-50%);
        background: var(--primary-gradient);
    }

    .nav-cta {
        display: block;
        margin-top: 0.6rem;
        padding-top: 0.9rem;
        border-top: 1px solid var(--glass-border);
    }

    .nav-cta .btn {
        width: 100%;
        padding: 12px;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(10, 7, 26, 0.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
    }

    .nav-backdrop.visible {
        opacity: 1;
        visibility: visible;
    }

    /* Header and panel read as one surface while the menu is open */
    body.menu-open {
        overflow: hidden;
    }

    body.menu-open .site-header {
        background: var(--nav-solid);
    }

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

@media (max-width: 768px) {

    /* Main Layout & Header Padding */
    main.container {
        padding-top: 105px !important;
        padding-bottom: 50px !important;
    }

    /* Page Titles & Headers */
    main>div[style*="text-align: center"] h1,
    h1[style*="font-size: 3rem"] {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }

    main>div[style*="text-align: center"] p,
    p[style*="font-size: 1.15rem"] {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .section-title {
        font-size: 1.35rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    /* About Section Mobile Overrides */
    .about-section {
        margin-bottom: 3rem !important;
    }

    .about-card {
        padding: 1.25rem 1rem;
        border-radius: var(--radius-md);
    }

    .about-grid {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }

    .about-main {
        min-width: 0;
        width: 100%;
    }

    .about-text {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-top: 0.75rem;
    }

    .about-action {
        margin-top: 1.25rem;
    }

    .about-action .btn {
        width: 100%;
        justify-content: center;
    }

    .venue-box {
        flex: 1 1 100%;
        width: 100%;
        padding: 1.25rem 1rem;
    }

    /* Featured / Upcoming Event Spotlight Card */
    .featured-card {
        padding: 1.25rem 1rem;
        border-radius: var(--radius-md);
        margin-bottom: 2.5rem;
    }

    .featured-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .featured-title {
        font-size: 1.25rem;
        line-height: 1.35;
        margin-bottom: 0.75rem;
    }

    .presenter-info {
        gap: 10px;
        margin-bottom: 1rem;
    }

    .presenter-name {
        font-size: 0.95rem;
    }

    .presenter-role {
        font-size: 0.8rem;
    }

    .abstract-box {
        padding: 1rem;
        margin-bottom: 1rem;
        font-size: 0.875rem;
        line-height: 1.6;
        border-radius: var(--radius-sm);
    }

    .abstract-title {
        font-size: 0.85rem;
        margin-bottom: 6px;
    }

    .featured-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        margin-top: 1rem;
    }

    .featured-actions .btn {
        flex: 1 1 100%;
    }

    .countdown-container {
        width: 100%;
        padding: 0.75rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .countdown-timer {
        width: 100%;
        justify-content: space-between;
        gap: 0.35rem;
    }

    .timer-unit {
        min-width: 50px;
    }

    .timer-value {
        font-size: 1.15rem;
    }

    .timer-label {
        font-size: 0.65rem;
    }

    .talk-poster-container {
        margin: 1rem 0;
        padding: 0.25rem;
    }

    .talk-poster-img {
        max-height: 280px;
    }

    .poster-overlay {
        font-size: 0.8rem;
    }

    .poster-overlay span {
        padding: 6px 14px;
    }

    /* Controls Bar & Search/Filter Pills */
    .controls-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        margin-bottom: 1.75rem;
    }

    .search-input-wrapper {
        min-width: 0;
        width: 100%;
    }

    .search-input {
        font-size: 0.85rem;
        padding: 10px 14px 10px 40px;
    }

    .search-input-wrapper > i {
        left: 14px;
    }

    .category-pills {
        width: 100%;
        gap: 6px;
        justify-content: flex-start;
    }

    .pill-btn {
        font-size: 0.785rem;
        padding: 6px 14px;
    }

    /* Event Summary & Accordion Cards */
    .events-grid {
        gap: 0.85rem;
    }

    .event-card {
        border-radius: var(--radius-sm);
    }

    .event-summary {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
        padding: 1rem 1rem 1rem 1.15rem;
        padding-right: 3.25rem;
        position: relative;
    }

    .event-date-badge {
        font-size: 0.8rem;
    }

    .event-speaker {
        font-size: 0.9rem;
    }

    .event-topic {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .expand-icon {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    /* Drawer Content & Abstracts */
    .drawer-content {
        padding: 1rem;
    }

    .drawer-abstract {
        font-size: 0.875rem;
        line-height: 1.65;
        margin-bottom: 1rem;
    }

    /* Resource Links & Buttons */
    .resource-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }

    .resource-btn {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
        font-size: 0.8rem;
        padding: 8px 12px;
        line-height: 1.4;
        word-break: break-word;
        white-space: normal;
        border-radius: var(--radius-sm);
    }

    /* Lightbox Modal: compact caption so the photo keeps most of the screen */
    .lightbox-modal {
        padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
            max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    }

    .lightbox-content {
        gap: 0.6rem;
    }

    .lightbox-img {
        border-radius: var(--radius-sm);
    }

    .lightbox-info {
        padding: 0.65rem 0.9rem;
        border-radius: var(--radius-sm);
    }

    .lightbox-title {
        font-size: 0.98rem;
        margin-bottom: 0.3rem;
    }

    .lightbox-meta {
        gap: 0.35rem 0.9rem;
        font-size: 0.78rem;
    }

    .lightbox-close {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }

    .lightbox-tool {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .lightbox-toolbar {
        gap: 0.4rem;
    }

    .lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }

    .lightbox-prev {
        left: 0.25rem;
    }

    .lightbox-next {
        right: 0.25rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .brand-title {
        font-size: 1.25rem;
    }

    .brand-subtitle {
        font-size: 0.7rem;
    }

    /* Full department name wraps onto two lines on small phones */
    .subtitle-long {
        display: none;
    }

    .subtitle-short {
        display: inline;
    }

    .brand-logo {
        gap: 10px;
    }

    :root {
        --header-height: 66px;
    }

    .nav-container {
        height: 66px;
    }

    .brand-logo img {
        height: 36px;
    }

    .theme-toggle-btn,
    .mobile-menu-btn {
        width: 40px;
        height: 40px;
    }

    main.container {
        padding-top: 90px !important;
    }

    .pill-btn {
        flex: 1 1 calc(50% - 6px);
        text-align: center;
    }

    .category-pills button[data-filter="all"] {
        flex: 1 1 100%;
    }
}
/* ==========================================================================
   Scroll Animations & Floating Controls
   ========================================================================== */

/* Added by JS only, so content stays visible if scripts fail to load.
   Classes are removed after the animation so hover transforms keep working. */
.reveal {
    opacity: 0;
}

.reveal.is-visible {
    animation: fadeUp 0.8s var(--ease-out-expo) var(--reveal-delay, 0s) both;
}

.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 900;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-full);
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px -6px rgba(var(--primary-rgb), 0.65), 0 2px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo), visibility 0.3s,
        box-shadow var(--transition-fast);
}

/* On the dark theme a white ring would glare; a faint one keeps the edge crisp */
:root:not([data-theme="light"]) .back-to-top {
    border-color: rgba(255, 255, 255, 0.18);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.back-to-top:hover {
    box-shadow: 0 12px 30px -6px rgba(var(--primary-rgb), 0.8), 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-3px);
}

.back-to-top i {
    transition: transform 0.3s var(--ease-out-expo);
}

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

@media (max-width: 480px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 42px;
        height: 42px;
    }
}

/* ==========================================================================
   Site-wide Search (button + command-palette dialog, built by js/main.js)
   ========================================================================== */
.search-trigger {
    height: 2.625rem;
    width: 2.625rem;
    padding: 0;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    transition: all var(--transition-fast);
}

.search-trigger i {
    font-size: 1.05rem;
}

.search-trigger:hover {
    border-color: var(--primary);
    box-shadow: var(--glow-shadow);
    transform: translateY(-2px);
}

.search-trigger-label,
.search-trigger-kbd {
    display: none;
}

.search-modal kbd,
.search-trigger-kbd {
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 6px;
    border: 1px solid var(--glass-border);
    border-bottom-width: 2px;
    background: var(--bg-surface);
    color: var(--text-dim);
}

/* Wide screens: pill with label and shortcut hint */
@media (min-width: 1100px) {
    .search-trigger {
        width: auto;
        min-width: 11.25rem;
        padding: 0 10px 0 16px;
        justify-content: flex-start;
    }

    .search-trigger i {
        font-size: 0.9rem;
        color: var(--primary-light);
    }

    .search-trigger-label {
        display: inline;
        color: var(--text-muted);
    }

    .search-trigger-kbd {
        display: inline;
        margin-left: auto;
    }
}

body.search-open {
    overflow: hidden;
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 11vh 1rem 1rem;
    background: rgba(10, 7, 26, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.search-modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
}

.search-panel {
    width: 100%;
    max-width: 640px;
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    background: var(--nav-solid);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--primary) 12%, transparent);
    overflow: hidden;
    transform: translateY(-16px) scale(0.97);
    transition: transform 0.45s var(--ease-out-expo);
}

.search-modal.open .search-panel {
    transform: none;
}

/* Input row */
.search-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.search-field-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-light);
}

.search-field-icon i {
    transition: opacity 0.2s ease, transform 0.3s var(--ease-out-expo);
}

.search-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--primary-light) 25%, transparent);
    border-top-color: var(--primary-light);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-field.is-searching .search-field-icon i {
    opacity: 0;
    transform: scale(0.5);
}

.search-field.is-searching .search-spinner {
    opacity: 1;
    animation: searchSpin 0.7s linear infinite;
}

.search-input-global {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--text-main);
    font: inherit;
    font-size: 1.05rem;
}

.search-input-global::placeholder {
    color: var(--text-dim);
}

.search-input-global:focus-visible {
    outline: none;
}

.search-input-global::-webkit-search-cancel-button {
    display: none;
}

.search-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    transition: color var(--transition-fast);
}

.search-close:hover,
.search-close:focus-visible {
    color: var(--text-main);
}

.search-close i {
    display: none;
    font-size: 1.2rem;
}

/* Gradient sweep under the input while a search runs */
.search-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-progress::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    border-radius: 2px;
    background: var(--primary-gradient);
    transform: translateX(-100%);
}

.search-field.is-searching .search-progress {
    opacity: 1;
}

.search-field.is-searching .search-progress::before {
    animation: searchSweep 0.9s ease-in-out infinite;
}

/* Results */
.search-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
}

.search-status {
    padding: 6px 12px 2px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
}

.search-status:empty {
    display: none;
}

.search-results {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Previous results fade back while the next search runs */
.search-field.is-searching + .search-body .search-results {
    opacity: 0.45;
    filter: saturate(0.6);
}

.search-group {
    padding: 12px 12px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    animation: searchItemIn 0.45s var(--ease-out-expo) backwards;
    animation-delay: calc(min(var(--i), 10) * 35ms);
}

.search-result {
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    animation: searchItemIn 0.45s var(--ease-out-expo) backwards;
    animation-delay: calc(min(var(--i), 10) * 35ms);
}

/* Direct download / open chips for the files under a matching talk */
.search-result-files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 12px 12px 58px;
    margin-top: -4px;
}

.search-file {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 500;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform 0.25s var(--ease-out-expo);
}

.search-file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-file .fa-file-pdf {
    color: #f59e0b;
}

.search-file .fa-file-powerpoint {
    color: #ef4444;
}

.search-file .fa-arrow-up-right-from-square,
.search-file .fa-circle-user {
    color: var(--primary-light);
}

.search-file:hover,
.search-file:focus-visible {
    border-color: var(--primary);
    color: var(--text-main);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .search-result-files {
        padding-left: 12px;
    }
}

.search-result > a {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-main);
    transition: background var(--transition-fast);
}

/* Gradient bar slides in beside the highlighted result */
.search-result > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 3px;
    background: var(--primary-gradient);
    transform: scaleY(0);
    transition: transform 0.25s var(--ease-out-expo);
}

.search-result.active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.search-result.active > a::before {
    transform: scaleY(1);
}

.search-result-icon {
    --accent: var(--primary-light);
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    transition: transform 0.3s var(--ease-out-expo);
}

.search-result.active .search-result-icon {
    transform: scale(1.08);
}

.type-upcoming .search-result-icon { --accent: #f59e0b; }
.type-person .search-result-icon { --accent: #10b981; }
.type-photo .search-result-icon { --accent: #2dd4bf; }
.type-page .search-result-icon { --accent: #a8a2ff; }

[data-theme="light"] .type-upcoming .search-result-icon { --accent: #d97706; }
[data-theme="light"] .type-person .search-result-icon { --accent: #059669; }
[data-theme="light"] .type-photo .search-result-icon { --accent: #0d9488; }
[data-theme="light"] .type-page .search-result-icon { --accent: #3b30b5; }

.search-result-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-result-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
}

.search-result-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.search-result-meta .dot {
    opacity: 0.5;
    margin: 0 2px;
}

.search-result-snippet {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    opacity: 0.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result-go {
    align-self: center;
    color: var(--primary-light);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--transition-fast), transform 0.3s var(--ease-out-expo);
}

.search-result.active .search-result-go {
    opacity: 1;
    transform: none;
}

.search-results mark {
    background: color-mix(in srgb, var(--primary) 28%, transparent);
    color: inherit;
    border-radius: 3px;
    padding: 0 2px;
}

/* Skeleton rows while the site index loads */
.search-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}

.sk {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--glass-border) 25%,
            color-mix(in srgb, var(--primary-light) 18%, transparent) 50%, var(--glass-border) 75%);
    background-size: 200% 100%;
    animation: searchShimmer 1.2s linear infinite;
}

.sk-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
}

.sk-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-line {
    height: 10px;
}

.sk-line.short {
    width: 55%;
}

/* Idle state: suggestions and shortcuts */
.search-idle {
    padding: 4px 6px 10px;
}

.search-idle-title {
    margin: 10px 6px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 4px;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
    background: var(--bg-card);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast), transform 0.3s var(--ease-out-expo);
    animation: searchItemIn 0.45s var(--ease-out-expo) backwards;
    animation-delay: calc(var(--i) * 35ms);
}

.search-chip i {
    color: var(--primary-light);
    font-size: 0.8rem;
}

.search-chip:hover {
    border-color: var(--primary);
    color: var(--text-main);
    transform: translateY(-2px);
}

/* Recent searches */
.search-history {
    padding: 2px 6px 4px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 4px;
    transition: opacity 0.3s ease;
}

.search-idle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 6px 6px;
}

.search-idle-head .search-idle-title {
    margin: 0;
}

.search-history-clear {
    background: none;
    border: none;
    padding: 3px 8px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.search-history-clear:hover,
.search-history-clear:focus-visible {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.search-history-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-history-item {
    display: flex;
    align-items: center;
    max-height: 48px;
    overflow: hidden;
    border-radius: var(--radius-md);
    animation: searchItemIn 0.4s var(--ease-out-expo) backwards;
    animation-delay: calc(var(--i) * 35ms);
    transition: background var(--transition-fast), opacity 0.2s ease, max-height 0.25s ease;
}

.search-history-item.active {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.search-history-run {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.92rem;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
}

.search-history-run i {
    width: 16px;
    color: var(--text-dim);
    transition: color var(--transition-fast), transform 0.4s var(--ease-out-expo);
}

.search-history-item.active .search-history-run i {
    color: var(--primary-light);
    transform: rotate(-30deg);
}

.search-history-run span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-history-remove {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    margin-right: 6px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--text-dim);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.search-history-remove:hover,
.search-history-remove:focus-visible {
    color: var(--text-main);
}

/* Removing one entry: it fades and the list closes the gap */
.search-history-item.removing {
    opacity: 0;
    max-height: 0;
}

/* Clear all: the section fades out */
.search-history.clearing {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* No results */
.search-empty {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--text-muted);
    animation: searchItemIn 0.4s var(--ease-out-expo) backwards;
}

.search-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 0.75rem;
    border-radius: 50%;
    font-size: 1.6rem;
    color: var(--primary-light);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    animation: searchWobble 1s ease-in-out 0.15s;
}

.search-empty p {
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.search-footer {
    display: flex;
    gap: 1.25rem;
    padding: 10px 18px;
    border-top: 1px solid var(--glass-border);
    font-size: 0.75rem;
    color: var(--text-dim);
}

.search-footer kbd {
    margin-right: 3px;
}

/* Highlight for the element a search result jumps to */
.search-hit {
    animation: searchHit 1.8s ease-out;
}

@keyframes searchSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes searchSweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@keyframes searchItemIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes searchShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes searchWobble {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(10deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(3deg); }
}

@keyframes searchHit {
    0% { box-shadow: 0 0 0 0 transparent; }
    15% { box-shadow: 0 0 0 3px var(--primary-light), 0 0 36px color-mix(in srgb, var(--primary) 45%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (max-width: 600px) {
    .search-modal {
        padding: 0.75rem;
    }

    .search-panel {
        max-height: calc(100vh - 1.5rem);
        max-height: calc(100dvh - 1.5rem);
    }

    .search-footer,
    .search-close kbd {
        display: none;
    }

    .search-close i {
        display: inline;
    }
}

@media (max-width: 480px) {
    .search-trigger {
        width: 40px;
        height: 40px;
    }

    .nav-actions {
        gap: 0.45rem;
    }
}

/* ==========================================================================
   Page Transitions (cross-document View Transitions)
   Browsers without support simply switch pages instantly.
   ========================================================================== */
@view-transition {
    navigation: auto;
}

/* Header stays put while the page underneath changes */
.site-header {
    view-transition-name: site-header;
}

::view-transition-group(site-header) {
    animation-duration: 0.3s;
}

/* Active tab pill slides smoothly to the newly selected link */
::view-transition-group(nav-indicator) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    /* The moving pill is drawn above the header; blending keeps the tab labels it passes readable */
    mix-blend-mode: screen;
}

:root[data-theme="light"]::view-transition-group(nav-indicator) {
    mix-blend-mode: multiply;
}

/* Tabs differ in width: stretch one pill instead of cross-fading two */
::view-transition-old(nav-indicator) {
    display: none;
}

::view-transition-new(nav-indicator) {
    animation: none;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

::view-transition-old(root) {
    animation: pageOut 0.22s ease-in both;
}

::view-transition-new(root) {
    animation: pageIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageOut {
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* ==========================================================================
   Responsive Fine-Tuning (small phones → tablets → ultra-wide)
   ========================================================================== */

/* Headings break into balanced lines (no lone last word) and never overflow narrow screens */
h1,
h2,
h3 {
    text-wrap: balance;
    overflow-wrap: break-word;
}

.about-text {
    max-width: 70ch;
}

/* Touch screens: tap targets of ~40px */
@media (pointer: coarse), (max-width: 900px) {
    .btn-sm {
        min-height: 40px;
        padding: 8px 16px;
    }

    .pill-btn {
        min-height: 38px;
    }

    .resource-btn {
        min-height: 40px;
    }

    .speaker-profile-badge {
        padding: 8px 12px;
    }

    /* Bigger hit area for speaker links without changing the layout */
    .speaker-profile-link {
        padding: 8px 0;
        margin: -8px 0;
    }
}

/* Tablets and phones: two-column footer instead of one long stack */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: 7.5rem;
        padding-bottom: 3rem;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .hero-buttons {
        margin-bottom: 0.5rem;
    }
}

/* Tablets: talk link chips sit side by side; they stack full-width only on phones */
@media (min-width: 601px) and (max-width: 768px) {
    .resource-links {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .resource-btn {
        width: auto;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding-top: 6.5rem;
    }

    .hero-description {
        font-size: 1rem;
    }
}

/* Small phones (≤360px): tighter header so logo + three buttons always fit */
@media (max-width: 360px) {
    .container {
        padding: 0 0.85rem;
    }

    .brand-logo {
        gap: 8px;
    }

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

    .brand-title {
        font-size: 1.15rem;
    }

    .search-trigger,
    .theme-toggle-btn,
    .mobile-menu-btn {
        width: 36px;
        height: 36px;
    }

    .nav-actions {
        gap: 0.35rem;
    }
}

/* Phones: footer stacks so the Connect labels don't wrap in a narrow column */
@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 350px) {
    .brand-subtitle {
        display: none;
    }
}

/* Contact page: talk-proposal card with the embedded Google Form */
.form-card {
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
}

.form-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.form-card-title {
    font-size: 1.5rem;
    color: var(--text-main);
    margin-bottom: 6px;
}

.form-card-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.form-card-btn {
    white-space: nowrap;
}

.form-embed {
    width: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--glass-border);
    margin-top: 1rem;
}

.form-embed iframe {
    display: block;
    width: 100%;
    height: 620px;
    border: none;
}

/* Phones: thin card padding so the form gets the full width, a full-width button,
   and a frame sized to the screen so it scrolls on its own without trapping the page */
@media (max-width: 600px) {
    .form-card {
        padding: 1.25rem 0.75rem 0.75rem;
        border-radius: var(--radius-md);
    }

    .form-card-head {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        margin-bottom: 0.75rem;
        padding: 0 0.25rem;
    }

    .form-card-title {
        font-size: 1.2rem;
    }

    .form-card-btn {
        justify-content: center;
        white-space: normal;
    }

    .form-embed {
        margin-top: 0.5rem;
        border-radius: var(--radius-sm);
    }

    .form-embed iframe {
        height: 80vh;
        height: 80svh;
        min-height: 480px;
    }
}

/* Large and ultra-wide screens: wider content (type grows gently via the fluid root size near the top of this file) */
@media (min-width: 1680px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 2200px) {
    .container {
        max-width: 1480px;
    }
}

@media (min-width: 3200px) {
    .container {
        max-width: 1720px;
    }
}

/* ==========================================================================
   404 Page
   ========================================================================== */
.not-found {
    padding-top: 140px;
    padding-bottom: 40px;
    min-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.not-found-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.page-header.not-found-header > :nth-child(3) {
    animation-delay: 0.2s;
}

.page-header.not-found-header > :nth-child(4) {
    animation-delay: 0.3s;
}

.page-header.not-found-header > :nth-child(5) {
    animation-delay: 0.4s;
}

/* Big "4 0 4": the zero is a glowing ring holding a brain icon, with a dot orbiting it */
.not-found-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.06em;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(6rem, 4rem + 10vw, 11rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    user-select: none;
}

.not-found-orb {
    position: relative;
    width: 0.72em;
    height: 0.72em;
    margin: 0 0.04em;
    padding: 0.075em;
    border-radius: 50%;
    background: var(--primary-gradient);
    box-shadow: 0 0 40px var(--accent-glow), 0 12px 30px rgba(var(--primary-rgb), 0.3);
    animation: notFoundFloat 4s ease-in-out infinite;
}

.not-found-orb i {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    color: var(--primary-light);
    font-size: 0.26em;
}

.not-found-orb::after {
    content: '';
    position: absolute;
    inset: -0.12em;
    border-radius: 50%;
    border: 1px dashed var(--glass-border-hover);
    animation: notFoundOrbit 14s linear infinite;
}

.not-found-orb::before {
    content: '';
    position: absolute;
    top: -0.12em;
    left: 50%;
    width: 0.07em;
    height: 0.07em;
    margin: -0.035em 0 0 -0.035em;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    transform-origin: 50% calc(0.36em + 0.12em + 0.035em);
    animation: notFoundOrbit 6s linear infinite;
    z-index: 1;
}

@keyframes notFoundFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-0.06em);
    }
}

@keyframes notFoundOrbit {
    to {
        transform: rotate(360deg);
    }
}

.not-found-title {
    font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.not-found-text {
    font-size: 1.1rem;
    max-width: 36rem;
    margin: 0 auto 1.5rem;
}

/* The address that wasn't found, in a small chip */
.not-found-path {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-bottom: 2rem;
    padding: 6px 16px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--text-dim);
}

.not-found-path[hidden] {
    display: none;
}

.not-found-path i {
    color: var(--primary-light);
    flex-shrink: 0;
}

.not-found-path code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.not-found-actions {
    margin-bottom: 0;
}

/* Popular pages: cards in the style of the home page's inaugural callout */
.not-found-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.25rem;
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    animation: fadeUp 0.9s var(--ease-out-expo) 0.5s both;
}

.not-found-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-main);
    transition: all var(--transition-normal);
}

.not-found-link:hover,
.not-found-link:focus-visible {
    color: var(--text-main);
    border-color: var(--glass-border-hover);
    box-shadow: var(--card-shadow), var(--glow-shadow);
    transform: translateY(-3px);
}

.not-found-link-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-gradient);
    color: #ffffff;
    font-size: 1.05rem;
}

.not-found-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.not-found-link-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}

.not-found-link-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.not-found-link-arrow {
    flex-shrink: 0;
    color: var(--primary-light);
    transition: transform var(--transition-fast);
}

.not-found-link:hover .not-found-link-arrow,
.not-found-link:focus-visible .not-found-link-arrow {
    transform: translateX(4px);
}

@media (max-width: 600px) {
    .not-found {
        padding-top: 120px;
    }

    .not-found-text {
        font-size: 1rem;
    }
}

/* No endlessly repainting animations on low-end devices */
html.lite .not-found-orb,
html.lite .not-found-orb::before,
html.lite .not-found-orb::after {
    animation: none;
}

/* ==========================================================================
   Performance & Older Browsers
   ========================================================================== */

/* Lighter build for low-end devices (html.lite is set by js/main.js):
   blur is the most expensive effect on weak GPUs, so swap it for solid backgrounds */
html.lite .site-header,
html.lite .search-modal,
html.lite .lightbox-modal,
html.lite .nav-backdrop,
html.lite .gallery-corner-tag {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.lite .site-header {
    background: var(--nav-solid);
}

html.lite .search-modal {
    background: rgba(10, 7, 26, 0.82);
}

html.lite .lightbox-modal {
    background: rgba(12, 9, 30, 0.97);
}

html.lite .nav-backdrop {
    background: rgba(10, 7, 26, 0.65);
}

html.lite .gallery-item:hover img,
html.lite .gallery-item:focus-visible img {
    transform: none;
}

html.lite .gallery-placeholder {
    animation: none;
}

/* Browsers without backdrop blur would show page text through the translucent header */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
        background: var(--nav-solid);
    }
}

/* Browsers without color-mix() (before 2023) still get visible highlights and active states */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .search-results mark,
    mark.find-hit {
        background: rgba(var(--primary-rgb), 0.3);
    }

    .search-result.active,
    .search-history-item.active {
        background: rgba(var(--primary-rgb), 0.14);
    }

    .search-result-icon,
    .connect-icon {
        background: rgba(var(--primary-rgb), 0.14);
        border-color: rgba(var(--primary-rgb), 0.3);
    }

    .search-empty-icon {
        background: rgba(var(--primary-rgb), 0.12);
    }

    @media (max-width: 768px) {
        .nav-link.active {
            background: rgba(var(--primary-rgb), 0.14);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
    }
}

/* ==========================================================================
   Mobile Bottom Navigation (phones, <=768px)
   App-style tab bar: Home, Events, Search, Gallery, Contact.
   It replaces the header's menu and search buttons there; the header keeps the logo and theme button.
   ========================================================================== */
.bottom-nav {
    display: none;
}

:root {
    --bottom-nav-h: 4rem;
    --bnav-pill: rgba(var(--primary-rgb), 0.2);
}

[data-theme="light"] {
    --bnav-pill: rgba(59, 48, 181, 0.1);
}

@media (max-width: 768px) {
    /* Header: no menu button, drop-down panel or search button on phones (search lives in the bar) */
    .mobile-menu-btn,
    .nav-menu,
    .nav-backdrop,
    .nav-actions .search-trigger {
        display: none !important;
    }

    /* Room at the bottom of every page so the bar never covers the footer */
    body {
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    html {
        scroll-padding-bottom: calc(var(--bottom-nav-h) + 1rem);
    }

    .back-to-top {
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 1rem);
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: stretch;
        height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
        padding: 0 max(0.25rem, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(0.25rem, env(safe-area-inset-left, 0px));
        background: var(--nav-bg);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border-top: 1px solid var(--glass-border);
        box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, 0.45);
        transition: transform 0.4s var(--ease-out-expo);
        /* Stays put while the page underneath changes */
        view-transition-name: bottom-nav;
    }

    /* Tucked away while scrolling down to read; back on scrolling up (js/main.js) */
    .bottom-nav.is-hidden {
        transform: translateY(calc(100% + 1.5rem));
    }

    .bottom-nav-item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        color: var(--text-muted);
        text-decoration: none;
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.25s ease;
    }

    .bottom-nav-icon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 1.875rem;
        font-size: 1.1rem;
        transition: transform 0.2s ease;
    }

    .bottom-nav-icon i {
        position: relative;
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* The pill behind the icon: full on the current tab, a quick flash when another tab is pressed */
    .bottom-nav-pill {
        position: absolute;
        inset: 0;
        border-radius: var(--radius-full);
        background: var(--bnav-pill);
        opacity: 0;
        transform: scaleX(0.5);
        transition: opacity 0.2s ease, transform 0.3s var(--ease-out-expo);
    }

    .bottom-nav-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        line-height: 1;
    }

    .bottom-nav-item.is-active {
        color: var(--brand-text);
    }

    .bottom-nav-item.is-active .bottom-nav-label {
        font-weight: 700;
    }

    .bottom-nav-item.is-active .bottom-nav-pill {
        opacity: 1;
        transform: none;
        animation: bottomNavPillIn 0.4s var(--ease-out-expo) backwards;
    }

    /* Tab that was current on the page just left: its pill and colour fade out where they are */
    .bottom-nav-item.was-active {
        animation: bottomNavColorOut 0.3s ease both;
    }

    .bottom-nav-item.was-active .bottom-nav-pill {
        animation: bottomNavPillOut 0.3s ease both;
    }

    /* Current tab's icon gives a small pop when the page opens */
    .bottom-nav-item.is-active .bottom-nav-icon i {
        animation: bottomNavPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
    }

    .bottom-nav-item:active .bottom-nav-icon {
        transform: scale(0.88);
    }

    .bottom-nav-item:not(.is-active):active .bottom-nav-pill {
        opacity: 0.6;
        transform: scaleX(0.85);
    }

    .bottom-nav-item:focus-visible {
        outline: none;
    }

    .bottom-nav-item:focus-visible .bottom-nav-icon {
        outline: 2px solid var(--primary-light);
        outline-offset: 2px;
        border-radius: var(--radius-full);
    }

    @media (hover: hover) {
        .bottom-nav-item:not(.is-active):hover {
            color: var(--text-main);
        }
    }

    /* Search tab: while the search panel is open the bar sits above it, the pill moves to Search
       and the current page's tab steps back */
    body.search-open .bottom-nav {
        z-index: 1150;
        transform: none;
    }

    .bottom-nav-search.is-open {
        color: var(--brand-text);
    }

    .bottom-nav-search.is-open .bottom-nav-label {
        font-weight: 700;
    }

    .bottom-nav-search.is-open .bottom-nav-pill {
        opacity: 1;
        transform: none;
    }

    .bottom-nav-search.is-open .bottom-nav-icon i {
        animation: bottomNavPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    body.search-open .bottom-nav-item.is-active {
        color: var(--text-muted);
    }

    body.search-open .bottom-nav-item.is-active .bottom-nav-label {
        font-weight: 500;
    }

    body.search-open .bottom-nav-item.is-active .bottom-nav-pill {
        opacity: 0;
        transform: scaleX(0.5);
    }

    /* Search panel stops above the bar */
    .search-modal {
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 0.75rem);
    }

    .search-panel {
        max-height: calc(100vh - var(--bottom-nav-h) - 1.5rem);
        max-height: calc(100dvh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px) - 1.5rem);
    }

    /* Page change (WhatsApp-style): the bar and its pill stay put instead of sliding or cross-fading.
       The new page's bar replaces the old one at once; its pill grows out from the tapped icon
       while the previous tab's pill fades in place (.was-active, set by js/main.js) */
    ::view-transition-old(bottom-nav) {
        display: none;
    }

    ::view-transition-new(bottom-nav) {
        animation: none;
    }
}

@keyframes bottomNavPillIn {
    from {
        opacity: 0;
        transform: scaleX(0.4);
    }
}

@keyframes bottomNavPillOut {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: scaleX(0.6);
    }
}

@keyframes bottomNavColorOut {
    from {
        color: var(--brand-text);
    }
}

@keyframes bottomNavPop {
    0% {
        transform: scale(0.7);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Low-end devices: solid bar (no blur) and no pop */
html.lite .bottom-nav {
    background: var(--nav-solid);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.lite .bottom-nav-item.is-active .bottom-nav-icon i,
html.lite .bottom-nav-item.is-active .bottom-nav-pill,
html.lite .bottom-nav-item.was-active,
html.lite .bottom-nav-item.was-active .bottom-nav-pill {
    animation: none;
}

/* ==========================================================================
   Compact Footer on Phones (<=768px)
   The bottom bar already links every page, so the Quick Links column is dropped;
   what's left (brand, Connect links, copyright) is centred and tightened.
   ========================================================================== */
@media (max-width: 768px) {
    .site-footer {
        margin-top: 3rem;
        padding: 2rem 0 0;
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .footer-col-quick,
    .footer-col-connect .footer-heading {
        display: none;
    }

    .footer-brand .brand-logo {
        justify-content: center;
    }

    .footer-brand p {
        margin: 0.6rem auto 0;
        max-width: 22rem;
        font-size: 0.85rem;
        line-height: 1.55;
    }

    /* Connect links become a centred row of tappable chips */
    .footer-connect {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }

    .footer-connect a {
        gap: 8px;
        padding: 5px 14px 5px 5px;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-full);
        background: var(--bg-card);
        font-size: 0.8rem;
        color: var(--text-main);
        transition: border-color var(--transition-fast), background var(--transition-fast), transform 0.2s ease;
    }

    .footer-connect a:active {
        transform: scale(0.96);
    }

    /* No external-link arrow fading in on touch screens */
    .footer-connect a::after {
        display: none;
    }

    .footer-connect .connect-icon {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        font-size: 0.75rem;
    }

    .footer-bottom {
        padding-top: 1rem;
        font-size: 0.75rem;
        line-height: 1.5;
    }
}