/* ==========================================================================
Fonts - Self-hosted Web Fonts (privacy-friendly, no external requests)
========================================================================== */
/* Outfit - Display font (variable, all weights in one file) */
@font-face{ 
font-family: Outfit; 
font-style: normal; 
font-weight: 100 900; 
font-display: swap; 
src: url('/static/fonts/outfit-latin.woff2') format('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
} 
/* Lato - Body font */
@font-face{ 
font-family: Lato; 
font-style: normal; 
font-weight: 400; 
font-display: swap; 
src: url('/static/fonts/lato-400.woff2') format('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
} 
@font-face{ 
font-family: Lato; 
font-style: italic; 
font-weight: 400; 
font-display: swap; 
src: url('/static/fonts/lato-400-italic.woff2') format('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
} 
@font-face{ 
font-family: Lato; 
font-style: normal; 
font-weight: 700; 
font-display: swap; 
src: url('/static/fonts/lato-700.woff2') format('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
} 
/* Anonymous Pro - Monospace font */
@font-face{ 
font-family: 'Anonymous Pro'; 
font-style: normal; 
font-weight: 400; 
font-display: swap; 
src: url('/static/fonts/anonymous-pro-400.woff2') format('woff2'); 
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 
} 
/* ==========================================================================
Variables - CSS Custom Properties / Design Tokens
========================================================================== */
:root{ 
/* Base palette - light neutrals */
--bg-deep: #f0f0f0; 
--bg-main: #fafafa; 
--bg-elevated: #fff; 
--bg-card: #f5f5f5; 
--fg-primary: #111; 
--fg-secondary: #555; 
/* Increased contrast for secondary/muted text on light surfaces (WCAG AA) */
--fg-muted: #767676; 
/* Neutral badge color */
--color-badge: #e5e5e5; 
--color-badge-text: #666; 
/* Semantic colors - status indicators */
--color-success: rgb(22 104 104); 
--color-success-10: rgb(22 104 104 / 10%); 
--color-success-15: rgb(22 104 104 / 15%); 
--color-success-20: rgb(22 104 104 / 20%); 
--color-success-30: rgb(22 104 104 / 30%); 
--color-success-50: rgb(22 104 104 / 50%); 
--color-danger: rgb(153 38 67); 
--color-danger-10: rgb(153 38 67 / 10%); 
--color-danger-20: rgb(153 38 67 / 20%); 
--color-danger-30: rgb(153 38 67 / 30%); 
--color-danger-50: rgb(153 38 67 / 50%); 
--color-warning: rgb(121 88 0); 
--color-warning-20: rgb(121 88 0 / 20%); 
--color-warning-30: rgb(121 88 0 / 30%); 
--color-info: rgb(25 93 139); 
--color-info-10: rgb(25 93 139 / 10%); 
--color-info-20: rgb(25 93 139 / 20%); 
--color-info-50: rgb(25 93 139 / 50%); 
/* Typography - Font families */
--font-display: 'Outfit', 'Helvetica Neue', sans-serif; 
--font-body: 'Lato', 'Helvetica Neue', sans-serif; 
--font-mono: 'Anonymous Pro', 'Fira Code', monospace; 
/* Typography - Font weights */
--font-weight-regular: 400; 
--font-weight-semibold: 600; 
--font-weight-bold: 800; 
/* Typography - Size scale (1.2 ratio) */
--text-2xs: 0.6875rem; /* 11px - compact inline buttons */
--text-xs: 0.75rem; /* 12px - captions, badges */
--text-sm: 0.85rem; /* 13.6px - labels, small UI */
--text-base: 1rem; /* 16px - body text */
--text-md: 1.2rem; /* 19.2px - h3, emphasis */
--text-lg: 1.5rem; /* 24px - h2 */
--text-xl: clamp(1.8rem, 5vw, 2.5rem); /* h1 */
--text-display: clamp(2.5rem, 8vw, 4rem); /* month headers */
/* Spacing */
--space-2xs: 0.125rem; /* 2px - ultra-compact buttons, inline actions */
--space-xs: 0.25rem; 
--space-sm: 0.5rem; 
--space-md: 1rem; 
--space-lg: 1.5rem; 
--space-xl: 2rem; 
--space-2xl: 3rem; 
--space-3xl: 4rem; 
/* Page margins */
--page-gutter: 36px; 
--header-vertical-trim: 8px; /* Compensate for logo SVG whitespace */
/* Layout */
--site-max-width: 1400px; 
--content-max-width: 700px; 
--header-height: 90px; 
--poster-gap: 12px; 
--poster-max-height: 360px; 
--fade-height: 180px; 
/* Borders */
--border-color: #e0e0e0; 
--border-width: 1px; 
--border-width-accent: 2px; 
/* Overlay colors (for elements on light backgrounds) */
--overlay-light-5: rgb(0 0 0 / 5%); 
--overlay-light-8: rgb(0 0 0 / 8%); 
--overlay-light-10: rgb(0 0 0 / 10%); 
--overlay-light-15: rgb(0 0 0 / 15%); 
--overlay-light-20: rgb(0 0 0 / 20%); 
--overlay-light-30: rgb(0 0 0 / 30%); 
--overlay-dark-50: rgb(0 0 0 / 50%); 
--overlay-dark-80: rgb(0 0 0 / 80%); 
--overlay-dark-85: rgb(0 0 0 / 85%); 
/* Shadow colors */
--shadow-color: rgb(0 0 0 / 15%); 
--shadow-color-strong: rgb(0 0 0 / 25%); 
/* Poster placeholder text */
--placeholder-text: rgb(0 0 0 / 5%); 
/* Focus ring */
--focus-ring: rgb(0 0 0 / 10%); 
/* Effects */
--glow-primary: 0 0 20px rgb(255 51 102 / 30%); 
--glow-secondary: 0 0 20px rgb(0 255 170 / 30%); 
/* Sticky header fade gradient - light version */
--sticky-fade-gradient: linear-gradient(to bottom,
rgb(240 240 240) 0%,
rgb(240 240 240) 65%,
rgb(240 240 240 / 73.8%) 74%,
rgb(240 240 240 / 54.1%) 81%,
rgb(240 240 240 / 38.2%) 86%,
rgb(240 240 240 / 27.8%) 90%,
rgb(240 240 240 / 19.4%) 93%,
rgb(240 240 240 / 12.6%) 95%,
rgb(240 240 240 / 7.5%) 97%,
rgb(240 240 240 / 4.2%) 98%,
rgb(240 240 240 / 2.1%) 99%,
transparent 100%
); 
/* Shared non-gallery page background */
--page-background:
radial-gradient(100% 100% at 55% 50%, rgb(113 113 130 / 50%) 0%, transparent 50%),
radial-gradient(100% 100% at 82% 18%, rgb(222 221 221) 0%, transparent 30%); 
--page-background-attachment: fixed, fixed; 
--page-background-blend-mode: multiply, normal; 
/* Radius */
--radius-sm: 2px; 
--radius-base: 6px; /* Standard rounding for interactive elements */
--radius-lg: 8px; 
/* Icon sizes */
--icon-xs: 12px; 
--icon-sm: 14px; 
--icon-base: 16px; 
--icon-md: 18px; 
--icon-lg: 20px; 
--icon-xl: 24px; 
} 
/* ==========================================================================
Base - Reset, Layout, Typography
========================================================================== */
/* Enable cross-document view transitions for smoother navigation */
@view-transition{ 
navigation: auto; 
} 
/* Fixed elements persist without animation */
::view-transition-group(header),
::view-transition-group(footer),
::view-transition-group(bottom-fade),
::view-transition-group(lightbox),
::view-transition-group(cursor),
::view-transition-group(cursor-trail){ 
animation: none; 
} 
/* Content crossfades smoothly */
::view-transition-old(content){ 
animation: fade-out 150ms ease-out; 
} 
::view-transition-new(content){ 
animation: fade-in 150ms ease-in; 
} 
@keyframes fade-out{ 
from{ 
opacity: 1; 
} 
to{ 
opacity: 0; 
} 
} 
@keyframes fade-in{ 
from{ 
opacity: 0; 
} 
to{ 
opacity: 1; 
} 
} 
/* Reset */
*, *::before, *::after{ 
box-sizing: border-box; 
margin: 0; 
padding: 0; 
} 
.hidden{ 
display: none !important; 
} 
.visually-hidden{ 
position: absolute; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip: rect(0, 0, 0, 0); 
clip-path: inset(50%); 
white-space: nowrap; 
border: 0; 
} 
/* Skip to content link (a11y) - visually hidden until focused */
.skip-link{ 
position: absolute; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip: rect(0, 0, 0, 0); 
clip-path: inset(50%); 
white-space: nowrap; 
border: 0; 
z-index: 10000; 
/* Styles when visible */
background: var(--bg-elevated); 
color: var(--fg-primary); 
text-decoration: none; 
font-size: 0.875rem; 
} 
.skip-link:focus{ 
position: fixed; 
top: 0.5rem; 
left: 0.5rem; 
width: auto; 
height: auto; 
padding: 0.75rem 1rem; 
margin: 0; 
overflow: visible; 
clip: auto; 
clip-path: none; 
white-space: normal; 
border-radius: 4px; 
outline: 2px solid var(--fg-primary); 
outline-offset: 2px; 
} 
html{ 
font-size: 16px; 
scroll-behavior: smooth; 
} 
body{ 
font-family: var(--font-body); 
font-weight: var(--font-weight-regular); 
/* Radial wash + gradient base for inner pages */
background: var(--page-background); 
background-attachment: var(--page-background-attachment); 
background-blend-mode: var(--page-background-blend-mode); 
color: var(--fg-primary); 
line-height: 1.6; 
min-height: 100vh; 
display: flex; 
flex-direction: column; 
position: relative; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
} 
/* Noise texture layered over the gradient background and below content */
body::before{ 
content: ''; 
position: fixed; 
inset: 0; 
z-index: 0; 
pointer-events: none; 
background-image: url('/static/noise-figma.svg'); 
background-position: center; 
background-repeat: no-repeat; 
background-size: cover; 
} 
/* Layout */
.site-wrapper{ 
position: relative; 
flex: 1; 
max-width: var(--site-max-width); 
width: 100%; 
margin: 0 auto; 
padding: 0; 
display: flex; 
flex-direction: column; 
} 
/* Top page overlay on body (same visual language as bottom fade) */
body::after{ 
content: ''; 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
height: calc(var(--header-height) + 180px); 
pointer-events: none; 
z-index: 10; 
background: linear-gradient(
to bottom,
var(--bg-main) 0,
var(--bg-main) calc(var(--header-height) - var(--header-vertical-trim)),
rgb(250 250 250 / 88%) calc(var(--header-height) + 22px),
rgb(250 250 250 / 56%) calc(var(--header-height) + 92px),
rgb(250 250 250 / 24%) calc(var(--header-height) + 150px),
transparent
); 
opacity: 0; 
} 
body.page-scroll-fade::after{ 
opacity: var(--top-fade-opacity, 0); 
transition: opacity var(--top-fade-transition, 0s) ease-out; 
} 
/* Keep page headings above overlays while body content stays below */
.page-header{ 
position: relative; 
z-index: 15; 
} 
main{ 
flex: 1; 
padding: 0; 
view-transition-name: content; 
} 
/* Typography */
h1, h2, h3{ 
font-family: var(--font-display); 
font-weight: var(--font-weight-semibold); 
text-transform: uppercase; 
letter-spacing: 0.02em; 
line-height: 1.1; 
} 
h1{ 
font-size: var(--text-xl); 
margin-bottom: var(--space-lg); 
position: relative; 
display: inline-block; 
} 
/* Decorative underline for main headings */
h1::after{ 
content: ''; 
position: absolute; 
bottom: -8px; 
left: 0; 
width: 60%; 
height: 2px; 
background: var(--fg-muted); 
} 
h2{ 
font-size: var(--text-md); 
margin-bottom: var(--space-sm); 
} 
h2 a{ 
color: inherit; 
text-decoration: none; 
transition: color 0.2s ease; 
} 
h2 a:hover{ 
color: var(--fg-primary); 
} 
p{ 
color: var(--fg-secondary); 
margin-bottom: var(--space-md); 
} 
a{ 
color: var(--fg-secondary); 
text-decoration: none; 
transition: color 0.15s ease; 
} 
a:hover{ 
color: var(--fg-primary); 
} 
code{ 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
background: var(--bg-elevated); 
padding: 0.1em 0.4em; 
border-radius: var(--radius-sm); 
color: var(--fg-muted); 
} 
/* Bottom fade overlay - fixed to viewport */
.page-bottom-fade{ 
position: fixed; 
bottom: 0; 
left: 0; 
right: 0; 
height: var(--fade-height); 
background: linear-gradient(to bottom, transparent, var(--bg-main)); 
pointer-events: none; 
z-index: 10; 
view-transition-name: bottom-fade; 
} 
/* Site Footer */
.site-footer{ 
display: flex; 
width: calc(var(--site-max-width) - (var(--page-gutter) * 2)); 
max-width: calc(100% - (var(--page-gutter) * 2)); 
min-height: 453px; 
margin: var(--space-3xl) auto 0; 
padding: 0; 
flex-direction: column; 
align-items: flex-start; 
gap: 0; 
border-top: 1px solid rgb(17 17 17 / 20%); 
position: relative; 
z-index: 15; 
view-transition-name: footer; 
} 
.site-footer__content{ 
display: flex; 
width: 100%; 
margin: 77px 0 0; 
flex-direction: column; 
align-items: flex-start; 
gap: 26px; 
} 
.site-footer__logo{ 
display: block; 
width: auto; 
height: 41px; 
} 
.site-footer__description{ 
width: min(100%, 730px); 
margin: 0; 
font-family: var(--font-body); 
font-size: 1.35rem; 
line-height: 1.33; 
color: rgb(10 10 10 / 60%); 
} 
.site-footer__bottom{ 
width: 100%; 
margin: 20px 0 0; 
} 
.site-footer__meta{ 
margin: 0; 
font-family: var(--font-mono); 
font-size: 1.35rem; 
line-height: 1.22; 
color: rgb(10 10 10 / 60%); 
} 
.site-footer__meta-prefix{ 
font-weight: var(--font-weight-bold); 
} 
.site-footer__meta a{ 
font-family: var(--font-body); 
font-weight: var(--font-weight-bold); 
letter-spacing: 0.01em; 
text-transform: lowercase; 
color: inherit; 
text-decoration: none; 
transition: color 0.15s ease; 
} 
.site-footer__meta a:hover{ 
color: #0a0a0a; 
} 
/* Responsive */
@media (width <= 980px){ 
.site-footer__logo{ 
height: 32px; 
} 
} 
@media (width <= 768px){ 
:root{ 
--space-lg: 1rem; 
--space-xl: 1.5rem; 
--page-gutter: 12px; 
--poster-gap: 4px; 
/* Header: 4px top pad + 48px logo + 2px bottom pad = 54px */
--header-height: 54px; 
} 
/* Don't add padding here - let page components handle their own gutters
so they align with the header which is outside .site-wrapper */
.site-footer{ 
width: calc(var(--site-max-width) - (var(--page-gutter) * 2)); 
max-width: calc(100% - (var(--page-gutter) * 2)); 
min-height: auto; 
padding: 0; 
} 
.site-footer__content{ 
width: 100%; 
margin-top: 36px; 
gap: 18px; 
} 
.site-footer__description{ 
width: 100%; 
font-size: 1.05rem; 
} 
.site-footer__bottom{ 
width: 100%; 
margin-top: 20px; 
} 
.site-footer__meta{ 
font-size: 1.05rem; 
} 
h1{ 
font-size: var(--text-lg); 
} 
} 
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce){ 
*, *::before, *::after{ 
animation-duration: 0.01ms !important; 
animation-iteration-count: 1 !important; 
transition-duration: 0.01ms !important; 
} 
/* Disable view transition animations */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*){ 
animation: none !important; 
} 
} 
/* ==========================================================================
Header - Site Header, Navigation
========================================================================== */
.site-header{ 
position: sticky; 
top: 0; 
z-index: 100; 
display: flex; 
flex-direction: column; 
background: transparent; 
view-transition-name: header; 
} 
.header-row{ 
display: flex; 
align-items: center; 
justify-content: space-between; 
width: calc(var(--site-max-width) - (var(--page-gutter) * 2)); 
max-width: calc(100% - (var(--page-gutter) * 2)); 
margin: 0 auto; 
padding: calc(var(--page-gutter) - var(--header-vertical-trim)) 0 calc((var(--page-gutter) - var(--header-vertical-trim)) / 2); 
} 
/* Site logo */
.site-logo{ 
display: flex; 
align-items: center; 
gap: 13px; 
text-decoration: none; 
color: var(--fg-primary); 
transition: opacity 0.15s ease; 
} 
.site-logo:hover{ 
opacity: 0.8; 
} 
.site-logo.muted{ 
opacity: 0.5; 
} 
.site-logo.muted:hover{ 
opacity: 0.7; 
} 
.logo-icon{ 
height: 48px; 
width: 48px; 
} 
.logo-type{ 
height: 41px; 
width: auto; 
} 
.logo-badge{ 
display: inline-flex; 
align-items: center; 
justify-content: center; 
width: 22px; 
height: 22px; 
border-radius: 50%; 
border: 1px solid rgb(17 17 17 / 25%); 
font-family: var(--font-body); 
font-size: 12px; 
font-weight: var(--font-weight-bold); 
letter-spacing: 0.02em; 
line-height: 1; 
color: var(--fg-primary); 
} 
.logo-text{ 
font-family: var(--font-mono); 
font-size: var(--text-lg); 
font-weight: var(--font-weight-regular); 
margin-left: var(--space-sm); 
} 
/* Navigation links */
.header-nav{ 
display: flex; 
align-items: center; 
gap: 25px; 
} 
.header-nav-link{ 
display: flex; 
align-items: center; 
justify-content: center; 
gap: 10px; 
height: 55px; 
width: 156px; 
border-radius: 50px; 
padding: 15px; 
background: rgb(255 255 255 / 80%); 
font-family: var(--font-body); 
font-size: 16px; 
font-weight: var(--font-weight-regular); 
letter-spacing: 0.05em; 
line-height: 1; 
text-transform: uppercase; 
color: #717182; 
text-decoration: none; 
transition: color 0.15s ease, background-color 0.15s ease; 
} 
.header-nav-link:hover{ 
background: var(--bg-elevated); 
color: var(--fg-primary); 
} 
.header-nav-link.active{ 
background: var(--bg-elevated); 
color: var(--fg-primary); 
font-weight: var(--font-weight-bold); 
box-shadow: 0 2px 2px var(--shadow-color); 
} 
@media (width <= 980px){ 
.header-row{ 
width: 100%; 
max-width: calc(100% - (var(--page-gutter) * 2)); 
gap: var(--space-md); 
} 
.header-nav{ 
gap: var(--space-xs); 
} 
.header-nav-link{ 
width: auto; 
min-height: 44px; 
height: auto; 
padding: 10px 14px; 
font-size: 13px; 
} 
.header-nav-link:first-child,
.header-nav-link:nth-child(2),
.header-nav-link:nth-child(3){ 
width: auto; 
} 
.site-logo{ 
flex-shrink: 0; 
} 
.logo-type{ 
height: 32px; 
} 
.logo-badge{ 
width: 18px; 
height: 18px; 
font-size: 10px; 
} 
} 
/* ==========================================================================
Components - Badges, Source Lists, Reusable Elements
========================================================================== */
/* Source Count Badge */
.source-count{ 
display: inline-block; 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
font-weight: var(--font-weight-regular); 
padding: var(--space-xs) var(--space-sm); 
background: var(--bg-elevated); 
color: var(--fg-muted); 
border-radius: var(--radius-base); 
margin-left: var(--space-sm); 
vertical-align: middle; 
border: var(--border-width) solid var(--border-color); 
} 
/* Event Sources List */
.sources-list{ 
list-style: none; 
display: flex; 
flex-direction: column; 
gap: var(--space-xs); 
} 
.sources-list li{ 
display: flex; 
align-items: center; 
gap: 0; 
color: var(--fg-secondary); 
} 
/* Platform icons (inline SVGs) */
.platform-icon{ 
display: inline-block; 
width: 1.75em; 
height: 1em; 
vertical-align: -0.125em; 
fill: currentcolor; 
color: var(--fg-muted); 
margin-right: var(--space-xs); 
} 
.platform-icon i{ 
font-size: 1.1em; 
} 
.source-icon{ 
width: 1.25em; 
height: 1.25em; 
color: var(--fg-muted); 
} 
.sources-list a{ 
color: var(--fg-secondary); 
} 
.sources-list a:hover{ 
color: var(--fg-primary); 
text-shadow: none; 
} 
/* Platform groups - icon on first item, rest indented */
.platform-group{ 
margin-bottom: var(--space-md); 
} 
.platform-group li{ 
padding-left: 1.75em; 
} 
.platform-group li.first{ 
padding-left: 0; 
} 
/* ==========================================================================
Buttons - Unified Button System
========================================================================== */
/* Base button - shared properties */
.btn{ 
display: inline-flex; 
align-items: center; 
justify-content: center; 
gap: var(--space-xs); 
padding: var(--space-sm) var(--space-md); 
border-radius: var(--radius-base); 
font-family: var(--font-body); 
font-size: var(--text-sm); 
text-decoration: none; 
cursor: pointer; 
transition: all 0.15s ease; 
} 
/* Primary - solid filled button */
.btn--primary{ 
background: var(--fg-primary); 
border: var(--border-width) solid var(--fg-primary); 
color: var(--bg-main); 
} 
.btn--primary:hover{ 
background: var(--fg-secondary); 
border-color: var(--fg-secondary); 
} 
.btn--primary:disabled{ 
background: var(--fg-muted); 
border-color: var(--fg-muted); 
cursor: not-allowed; 
} 
.btn--primary:disabled:hover{ 
background: var(--fg-muted); 
border-color: var(--fg-muted); 
} 
/* Secondary - outlined button */
.btn--secondary{ 
background: transparent; 
border: var(--border-width) solid var(--border-color); 
color: var(--fg-secondary); 
} 
.btn--secondary:hover{ 
border-color: var(--fg-muted); 
color: var(--fg-primary); 
} 
/* Ghost - text only, no border */
.btn--ghost{ 
background: transparent; 
border: var(--border-width) solid transparent; 
color: var(--fg-muted); 
} 
.btn--ghost:hover{ 
color: var(--fg-primary); 
} 
/* Size modifiers */
.btn--wide{ 
min-width: 120px; 
} 
.btn--full{ 
width: 100%; 
} 
/* Loading state */
.btn .btn-loading{ 
display: none; 
} 
.btn.is-loading .btn-text{ 
display: none; 
} 
.btn.is-loading .btn-loading{ 
display: flex; 
align-items: center; 
justify-content: center; 
} 
.spinner{ 
width: 18px; 
height: 18px; 
animation: btn-spin 1s linear infinite; 
} 
.spinner circle{ 
stroke-dasharray: 45; 
stroke-dashoffset: 35; 
stroke-linecap: round; 
} 
@keyframes btn-spin{ 
to{ 
transform: rotate(360deg); 
} 
} 
/* ==========================================================================
Page Title - Static header for content pages
========================================================================== */
.page-title{ 
display: flex; 
align-items: baseline; 
gap: 0.3em; 
} 
.page-title-text{ 
font-family: var(--font-body); 
line-height: 1; 
letter-spacing: 0; 
color: var(--fg-primary); 
} 
/* ==========================================================================
Section Label - Small muted headings for content sections
========================================================================== */
/* Base section label - shared properties */
.section-label{ 
font-size: var(--text-xs); 
font-weight: var(--font-weight-regular); 
letter-spacing: 0.08em; 
color: var(--fg-muted); 
} 
/* Default variant - body font, lowercase (for content sections) */
.section-label--content{ 
font-family: var(--font-body); 
text-transform: lowercase; 
} 
/* Mono variant - monospace font (for form labels) */
.section-label--mono{ 
font-family: var(--font-mono); 
} 
/* ==========================================================================
Forms - Form Inputs and Buttons
========================================================================== */
form{ 
max-width: 500px; 
} 
.form-group{ 
margin-bottom: var(--space-lg); 
} 
.form-group label{ 
display: block; 
font-family: var(--font-display); 
font-size: var(--text-xs); 
text-transform: uppercase; 
letter-spacing: 0.1em; 
color: var(--fg-muted); 
margin-bottom: var(--space-sm); 
} 
.form-group input,
.form-group select,
.form-group textarea{ 
width: 100%; 
padding: var(--space-md); 
background: var(--bg-card); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
color: var(--fg-primary); 
font-family: var(--font-body); 
font-size: var(--text-base); 
transition: border-color 0.2s ease, box-shadow 0.2s ease; 
} 
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ 
outline: none; 
border-color: var(--fg-muted); 
box-shadow: 0 0 0 2px var(--focus-ring); 
} 
.form-group input::placeholder{ 
color: var(--fg-muted); 
} 
.form-group select{ 
cursor: pointer; 
appearance: none; 
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); 
background-repeat: no-repeat; 
background-position: right var(--space-md) center; 
padding-right: var(--space-2xl); 
} 
/* Submit buttons without explicit .btn class get primary styling */
button[type="submit"]:not(.btn){ 
display: inline-flex; 
align-items: center; 
justify-content: center; 
gap: var(--space-xs); 
padding: var(--space-sm) var(--space-md); 
background: var(--fg-primary); 
border: var(--border-width) solid var(--fg-primary); 
border-radius: var(--radius-base); 
font-family: var(--font-body); 
font-size: var(--text-sm); 
color: var(--bg-main); 
cursor: pointer; 
transition: all 0.15s ease; 
} 
button[type="submit"]:not(.btn):hover{ 
background: var(--fg-secondary); 
border-color: var(--fg-secondary); 
} 
button[type="submit"]:not(.btn):active{ 
background: var(--fg-muted); 
border-color: var(--fg-muted); 
} 
/* Success message */
.success-message{ 
padding: var(--space-lg); 
background: var(--bg-elevated); 
color: var(--fg-primary); 
font-weight: var(--font-weight-bold); 
margin-bottom: var(--space-xl); 
border-left: var(--border-width-accent) solid var(--fg-primary); 
} 
/* ==========================================================================
Modal - Overlay and Dialog Styles
========================================================================== */
.modal-overlay{ 
position: fixed; 
inset: 0; 
z-index: 100; 
display: flex; 
align-items: center; 
justify-content: center; 
padding: var(--page-gutter); 
background: var(--overlay-dark-80); 
backdrop-filter: blur(4px); 
opacity: 1; 
transition: opacity 0.2s ease; 
} 
.modal-overlay[hidden]{ 
display: none; 
} 
.modal{ 
width: 100%; 
max-width: 500px; 
max-height: calc(100vh - 2 * var(--page-gutter)); 
overflow-y: auto; 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-lg); 
box-shadow: 0 8px 32px var(--shadow-color-strong); 
} 
.modal-header{ 
display: flex; 
align-items: center; 
justify-content: space-between; 
padding: var(--space-lg); 
border-bottom: var(--border-width) solid var(--border-color); 
} 
.modal-header h2{ 
margin: 0; 
font-family: var(--font-display); 
font-size: var(--text-md); 
font-weight: var(--font-weight-semibold); 
color: var(--fg-primary); 
} 
.modal-close{ 
display: flex; 
align-items: center; 
justify-content: center; 
width: 32px; 
height: 32px; 
padding: 0; 
background: transparent; 
border: none; 
border-radius: var(--radius-sm); 
color: var(--fg-muted); 
cursor: pointer; 
transition: all 0.15s ease; 
} 
.modal-close:hover{ 
color: var(--fg-primary); 
background: var(--overlay-light-5); 
} 
.modal-close svg{ 
width: var(--icon-md); 
height: var(--icon-md); 
} 
/* Modal Form */
.modal-form{ 
padding: var(--space-lg); 
max-width: none; 
} 
.modal-form .form-group{ 
margin-bottom: var(--space-md); 
} 
.modal-form .form-group:last-of-type{ 
margin-bottom: var(--space-lg); 
} 
/* Remove bottom margin when form-group is followed by form-actions */
.modal-form .form-group:has(+ .form-actions){ 
margin-bottom: 0; 
} 
/* Form row for inline fields */
.form-row{ 
display: grid; 
grid-template-columns: 1fr 1fr 1fr; 
gap: var(--space-md); 
} 
@media (width <= 500px){ 
.form-row{ 
grid-template-columns: 1fr; 
} 
} 
/* Checkbox grid for event types */
.checkbox-grid{ 
display: grid; 
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
gap: var(--space-xs); 
} 
.checkbox-label{ 
display: flex; 
align-items: center; 
gap: var(--space-sm); 
padding: var(--space-xs) var(--space-sm); 
border-radius: var(--radius-sm); 
cursor: pointer; 
transition: background 0.1s ease; 
} 
.checkbox-label:hover{ 
background: var(--overlay-light-5); 
} 
.checkbox-label input[type="checkbox"]{ 
width: 16px; 
height: 16px; 
margin: 0; 
accent-color: var(--fg-primary); 
cursor: pointer; 
} 
.checkbox-label span{ 
font-family: var(--font-body); 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
} 
.checkbox-label:has(input:checked) span{ 
color: var(--fg-primary); 
} 
/* Form actions */
.form-actions{ 
display: flex; 
justify-content: flex-end; 
gap: var(--space-sm); 
padding-top: var(--space-lg); 
} 
.modal--compact .form-actions{ 
border-top: var(--border-width) solid var(--border-color); 
} 
/* Textarea styling override */
.modal-form textarea{ 
resize: vertical; 
min-height: 88px; 
max-height: 220px; 
overflow-y: hidden; 
} 
/* ==========================================================================
Modal Compact Variant - For simple forms (e.g., Submit Source)
========================================================================== */
.modal--compact{ 
position: relative; 
max-width: 400px; 
padding: var(--space-xl); 
text-align: center; 
} 
.modal--compact .modal-close{ 
position: absolute; 
top: var(--space-md); 
right: var(--space-md); 
} 
.modal--compact .modal-title{ 
margin: 0 0 var(--space-lg); 
padding-right: var(--space-xl); /* Space for close button */
font-family: var(--font-display); 
font-size: var(--text-md); 
font-weight: var(--font-weight-semibold); 
color: var(--fg-primary); 
} 
.modal--compact .modal-form{ 
padding: 0; 
} 
.modal--compact .form-group{ 
margin-bottom: var(--space-md); 
text-align: left; 
} 
.modal--compact .form-group:last-of-type{ 
margin-bottom: var(--space-lg); 
} 
/* Hide labels, use placeholders only */
.modal--compact .form-group label{ 
display: none; 
} 
.modal--compact .btn.btn--primary{ 
width: 100%; 
} 
/* Error message - hidden by default, shown via JS */
.modal--compact .form-error{ 
display: none; 
margin-top: var(--space-md); 
padding: var(--space-sm) var(--space-md); 
background: var(--bg-card); 
border: var(--border-width) solid var(--fg-muted); 
border-radius: var(--radius-base); 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
text-align: center; 
} 
.modal--compact .form-error:not([hidden]){ 
display: block; 
} 
/* ==========================================================================
Modal Success State
========================================================================== */
.modal-content{ 
position: relative; 
} 
.modal-form,
.modal-success{ 
transition: opacity 0.15s ease; 
} 
.modal-success{ 
display: none; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
padding: var(--space-xl) 0; 
} 
.modal-success.is-visible{ 
display: flex; 
} 
.modal-form.is-hidden{ 
display: none; 
} 
/* Animated checkmark */
.success-checkmark{ 
width: 48px; 
height: 48px; 
margin-bottom: var(--space-lg); 
color: var(--fg-primary); 
} 
.success-checkmark circle{ 
fill: none; 
stroke: currentcolor; 
stroke-width: 2; 
stroke-dasharray: 166; 
stroke-dashoffset: 166; 
animation: checkmark-circle 0.4s ease-out forwards; 
} 
.success-checkmark path{ 
fill: none; 
stroke: currentcolor; 
stroke-width: 2; 
stroke-linecap: round; 
stroke-linejoin: round; 
stroke-dasharray: 48; 
stroke-dashoffset: 48; 
animation: checkmark-check 0.3s ease-out 0.3s forwards; 
} 
@keyframes checkmark-circle{ 
to{ 
stroke-dashoffset: 0; 
} 
} 
@keyframes checkmark-check{ 
to{ 
stroke-dashoffset: 0; 
} 
} 
.success-title{ 
margin: 0 0 var(--space-xs); 
font-family: var(--font-display); 
font-size: var(--text-md); 
font-weight: var(--font-weight-semibold); 
color: var(--fg-primary); 
} 
.success-subtitle{ 
margin: 0; 
font-size: var(--text-sm); 
color: var(--fg-muted); 
} 
/* ==========================================================================
Modal Event Variant - For Add Event form
========================================================================== */
.modal--event{ 
max-width: 440px; 
} 
.modal--event .modal-header{ 
padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md); 
border-bottom: none; 
background: transparent; 
} 
.modal--event .modal-close{ 
margin-left: auto; 
} 
.modal--event .modal-header h2{ 
font-size: var(--text-sm); 
font-weight: var(--font-weight-regular); 
letter-spacing: 0.05em; 
text-transform: uppercase; 
color: var(--fg-muted); 
} 
.modal--event .modal-form{ 
padding: 0 var(--space-md) var(--space-md); 
} 
/* Edit modal metadata strip */
.edit-event-meta{ 
display: grid; 
grid-template-columns: 1fr auto; 
align-items: end; 
gap: var(--space-md); 
margin-bottom: var(--space-sm); 
} 
.edit-event-meta-item{ 
display: flex; 
min-width: 0; 
flex-direction: column; 
align-items: flex-start; 
gap: 2px; 
} 
.edit-event-meta-item:last-child{ 
align-items: flex-end; 
text-align: right; 
} 
.edit-event-meta-value{ 
overflow: hidden; 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
text-overflow: ellipsis; 
white-space: nowrap; 
color: var(--fg-secondary); 
} 
/* Form Sections */
.form-section{ 
margin-bottom: var(--space-sm); 
} 
.form-section:last-of-type{ 
margin-bottom: 0; 
} 
/* Form section label uses .section-label from components.css */
.form-section-label{ 
margin-bottom: var(--space-xs); 
padding-left: 2px; 
} 
.form-section-label .required{ 
color: var(--fg-secondary); 
margin-left: 2px; 
} 
.form-section .form-group{ 
margin-bottom: var(--space-sm); 
} 
.form-section .form-group:last-child{ 
margin-bottom: 0; 
} 
/* Details section */
.form-section--details{ 
padding-top: 0; 
} 
.modal--event .form-actions{ 
padding-top: var(--space-md); 
} 
.modal--event .form-actions--primary{ 
margin-top: var(--space-md); 
} 
.modal--event .form-actions--primary .btn-toggle-active{ 
margin-right: auto; 
} 
.moderation-actions{ 
justify-content: flex-start; 
padding-top: var(--space-xs); 
margin-top: var(--space-xs); 
} 
.moderation-callout{ 
margin: 0; 
padding: var(--space-sm) var(--space-md); 
background: var(--bg-card); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
} 
.moderation-callout-text{ 
margin: 0; 
font-size: var(--text-xs); 
color: var(--fg-secondary); 
} 
.moderation-flag-item{ 
margin-top: var(--space-xs); 
padding: var(--space-sm) var(--space-md); 
background: var(--bg-card); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
} 
.flag-review-heading{ 
margin: 0; 
font-family: var(--font-body); 
font-size: var(--text-sm); 
font-weight: var(--font-weight-semibold); 
color: var(--fg-primary); 
} 
.flag-review-meta{ 
margin: var(--space-2xs) 0 0; 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
color: var(--fg-secondary); 
} 
.flag-review-details{ 
margin: var(--space-xs) 0 0; 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
} 
.flag-review-proposed{ 
margin: var(--space-xs) 0 0; 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
color: var(--fg-primary); 
} 
.flag-review-actions{ 
padding-top: var(--space-xs); 
} 
.moderation-empty{ 
margin: 0; 
font-size: var(--text-xs); 
color: var(--fg-secondary); 
} 
.flagged-field input,
.flagged-field textarea,
.flagged-field .time-picker-trigger,
.flagged-field .type-pill,
.flagged-field .file-upload{ 
border-color: var(--fg-primary); 
background: rgb(255 255 255 / 3%); 
} 
.flagged-field .type-pill{ 
color: var(--fg-primary); 
} 
.moderation-field-hint{ 
display: flex; 
flex-direction: column; 
gap: var(--space-2xs); 
margin: var(--space-xs) 0 0; 
padding: var(--space-xs) var(--space-sm); 
background: rgb(255 255 255 / 6%); 
border: var(--border-width) solid var(--fg-secondary); 
border-left-width: 3px; 
border-left-color: var(--fg-primary); 
border-radius: var(--radius-sm); 
} 
.moderation-field-hint-label{ 
font-family: var(--font-mono); 
font-size: 10px; 
letter-spacing: 0.08em; 
text-transform: uppercase; 
color: var(--fg-secondary); 
} 
.moderation-field-hint-value{ 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
color: var(--fg-primary); 
} 
/* Type Pills */
.type-pills{ 
display: flex; 
flex-wrap: wrap; 
gap: var(--space-xs); 
} 
.type-pill{ 
padding: var(--space-xs) var(--space-sm); 
background: transparent; 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
font-family: var(--font-body); 
font-size: var(--text-xs); 
color: var(--fg-muted); 
cursor: pointer; 
transition: all 0.15s ease; 
} 
.type-pill:hover{ 
border-color: var(--fg-muted); 
color: var(--fg-secondary); 
} 
.type-pill.active{ 
background: var(--fg-primary); 
border-color: var(--fg-primary); 
color: var(--bg-main); 
} 
/* Date/Time Row */
.form-row--datetime{ 
display: flex; 
gap: var(--space-sm); 
align-items: flex-end; 
} 
.form-row--datetime .form-group{ 
margin-bottom: 0; 
} 
.form-row--datetime .form-group:first-child{ 
flex: 1; 
} 
.form-group--time{ 
display: flex; 
align-items: center; 
gap: var(--space-xs); 
} 
.form-row--datetime input[type="date"]{ 
width: 160px; 
padding: var(--space-sm) var(--space-md); 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
} 
/* Muted color when empty */
.form-row--datetime input[type="date"]:required:invalid{ 
color: var(--fg-muted); 
} 
/* Style the calendar icon */
.form-row--datetime input[type="date"]::-webkit-calendar-picker-indicator{ 
filter: invert(0.5); 
} 
/* Custom Time Picker */
.time-picker{ 
position: relative; 
} 
.time-picker-trigger{ 
display: flex; 
align-items: center; 
justify-content: center; 
width: 70px; 
padding: var(--space-sm) var(--space-sm); 
background: var(--bg-card); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
color: var(--fg-muted); 
cursor: pointer; 
transition: all 0.15s ease; 
} 
.time-picker-trigger:hover{ 
border-color: var(--fg-muted); 
} 
.time-picker-trigger.has-value{ 
color: var(--fg-primary); 
} 
.time-picker-dropdown{ 
position: absolute; 
top: 100%; 
left: 50%; 
transform: translateX(-50%); 
z-index: 10; 
width: 80px; 
max-height: 200px; 
margin-top: var(--space-xs); 
padding: var(--space-xs); 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
box-shadow: 0 8px 24px var(--shadow-color-strong); 
overflow-y: auto; 
scrollbar-width: thin; 
scrollbar-color: var(--border-color) transparent; 
} 
.time-picker-dropdown[hidden]{ 
display: none; 
} 
.time-option{ 
display: block; 
width: 100%; 
padding: var(--space-xs) var(--space-sm); 
background: transparent; 
border: none; 
border-radius: var(--radius-sm); 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
text-align: center; 
cursor: pointer; 
transition: all 0.1s ease; 
} 
.time-option:hover{ 
background: var(--overlay-light-5); 
color: var(--fg-primary); 
} 
.time-option.selected{ 
background: var(--fg-primary); 
color: var(--bg-main); 
} 
/* File Upload */
.file-upload{ 
position: relative; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
min-height: 80px; 
padding: var(--space-md); 
background: var(--bg-card); 
border: var(--border-width) dashed var(--border-color); 
border-radius: var(--radius-base); 
cursor: pointer; 
transition: all 0.15s ease; 
} 
.file-upload:hover{ 
border-color: var(--fg-muted); 
} 
.file-upload.drag-over{ 
border-color: var(--fg-primary); 
background: var(--overlay-light-5); 
} 
.file-upload.has-file{ 
padding: 0; 
border-style: solid; 
} 
.file-upload-target{ 
display: flex; 
width: 100%; 
min-height: 80px; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
text-decoration: none; 
} 
.file-upload-content{ 
display: flex; 
flex-direction: column; 
align-items: center; 
gap: var(--space-xs); 
text-align: center; 
} 
.file-upload.has-file .file-upload-content{ 
display: none; 
} 
.file-upload-icon{ 
width: var(--icon-lg); 
height: var(--icon-lg); 
color: var(--fg-muted); 
} 
.file-upload-text{ 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
} 
.file-upload-hint{ 
font-size: var(--text-xs); 
color: var(--fg-muted); 
} 
.file-upload-preview{ 
display: block; 
width: 100%; 
max-height: 200px; 
object-fit: contain; 
border-radius: var(--radius-base); 
} 
.file-upload-preview[hidden]{ 
display: none; 
} 
.file-upload-clear{ 
position: absolute; 
top: var(--space-sm); 
right: var(--space-sm); 
width: var(--icon-lg); 
height: var(--icon-lg); 
padding: 0; 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: 50%; 
color: var(--fg-muted); 
font-size: var(--text-md); 
line-height: 1; 
cursor: pointer; 
transition: all 0.15s ease; 
} 
.file-upload-clear:hover{ 
background: var(--fg-primary); 
border-color: var(--fg-primary); 
color: var(--bg-main); 
} 
/* Validation error state */
.form-group.has-error input,
.form-group.has-error .time-picker-trigger,
.time-picker.has-error .time-picker-trigger,
.file-upload.has-error{ 
border-color: var(--fg-primary); 
} 
.form-group.has-error .type-pills .type-pill{ 
border-color: var(--fg-muted); 
} 
.form-group .field-error{ 
display: none; 
margin-top: var(--space-xs); 
font-size: var(--text-xs); 
color: var(--fg-secondary); 
} 
.form-group.has-error .field-error{ 
display: block; 
} 
.time-separator{ 
color: var(--fg-muted); 
font-size: var(--text-sm); 
} 
@media (width <= 500px){ 
.edit-event-meta{ 
grid-template-columns: 1fr; 
gap: var(--space-xs); 
} 
.edit-event-meta-item:last-child{ 
align-items: flex-start; 
text-align: left; 
} 
.form-row--datetime{ 
flex-direction: column; 
align-items: stretch; 
} 
.form-group--time{ 
justify-content: center; 
} 
.modal--event .form-actions{ 
flex-direction: column; 
align-items: stretch; 
} 
.modal--event .form-actions--primary .btn-toggle-active{ 
margin-right: 0; 
} 
} 
/* Form Error (Event Modal) */
.modal--event .form-error{ 
margin-top: var(--space-md); 
padding: var(--space-sm) var(--space-md); 
background: var(--bg-card); 
border: var(--border-width) solid var(--fg-muted); 
border-radius: var(--radius-base); 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
text-align: center; 
} 
.modal--event .form-error[hidden]{ 
display: none; 
} 
/* Modal Animations */
.modal-overlay.is-opening{ 
animation: fade-in 0.2s ease; 
} 
.modal-overlay.is-opening .modal{ 
animation: slide-up 0.2s ease; 
} 
.modal-overlay.is-closing{ 
animation: fade-out 0.2s ease forwards; 
} 
.modal-overlay.is-closing .modal{ 
animation: slide-down 0.2s ease forwards; 
} 
@keyframes fade-in{ 
from{ 
opacity: 0; 
} 
to{ 
opacity: 1; 
} 
} 
@keyframes fade-out{ 
from{ 
opacity: 1; 
} 
to{ 
opacity: 0; 
} 
} 
@keyframes slide-up{ 
from{ 
opacity: 0; 
transform: translateY(20px); 
} 
to{ 
opacity: 1; 
transform: translateY(0); 
} 
} 
@keyframes slide-down{ 
from{ 
opacity: 1; 
transform: translateY(0); 
} 
to{ 
opacity: 0; 
transform: translateY(20px); 
} 
} 
/* ==========================================================================
Filter Panel - Floating Filter Menu
========================================================================== */
.filter-panel{ 
position: fixed; 
bottom: var(--page-gutter); 
right: var(--page-gutter); 
z-index: 50; 
display: flex; 
align-items: center; 
gap: var(--space-sm); 
} 
.filter-menu-trigger,
.add-event-trigger{ 
display: flex; 
align-items: center; 
justify-content: center; 
width: 40px; 
height: 40px; 
padding: 0; 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
color: var(--fg-muted); 
cursor: pointer; 
transition: all 0.15s ease; 
} 
.filter-menu-trigger:hover,
.add-event-trigger:hover{ 
color: var(--fg-primary); 
border-color: var(--fg-muted); 
} 
.add-icon{ 
width: var(--icon-md); 
height: var(--icon-md); 
flex-shrink: 0; 
} 
.filter-menu-trigger span{ 
display: none; 
} 
.filter-panel.menu-open .filter-menu-trigger{ 
color: var(--fg-primary); 
border-color: var(--fg-muted); 
} 
.filter-icon{ 
width: var(--icon-md); 
height: var(--icon-md); 
flex-shrink: 0; 
} 
/* Filter menu dropdown */
.filter-menu{ 
position: absolute; 
bottom: calc(100% + var(--space-sm)); 
right: 0; 
min-width: 240px; 
max-height: calc(100vh - 120px); 
overflow-y: auto; 
padding: var(--space-md); 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
box-shadow: 0 4px 24px var(--shadow-color); 
} 
/* Minimal scrollbar */
.filter-menu::-webkit-scrollbar{ 
width: 4px; 
} 
.filter-menu::-webkit-scrollbar-track{ 
background: transparent; 
} 
.filter-menu::-webkit-scrollbar-thumb{ 
background: var(--border-color); 
border-radius: 2px; 
} 
.filter-menu::-webkit-scrollbar-thumb:hover{ 
background: var(--fg-muted); 
} 
.filter-menu[hidden]{ 
display: none; 
} 
.filter-menu-section{ 
margin-bottom: var(--space-md); 
} 
.filter-menu-section:last-child{ 
margin-bottom: 0; 
} 
/* Filter menu header uses .section-label from components.css */
.filter-menu-header{ 
letter-spacing: 0.05em; /* Tighter than default section-label */
margin-bottom: var(--space-sm); 
} 
.filter-menu-options{ 
display: flex; 
flex-direction: column; 
gap: 2px; 
} 
.filter-option{ 
display: block; 
padding: var(--space-xs) var(--space-sm); 
background: transparent; 
border: none; 
border-radius: var(--radius-sm); 
color: var(--fg-secondary); 
font-family: var(--font-body); 
font-size: var(--text-sm); 
text-decoration: none; 
text-align: left; 
cursor: pointer; 
transition: all 0.1s ease; 
} 
.filter-option:hover{ 
background: var(--overlay-light-5); 
color: var(--fg-primary); 
} 
.filter-option.active{ 
background: var(--overlay-light-8); 
color: var(--fg-primary); 
} 
.filter-option.active::before{ 
content: '\00b7'; 
margin-right: var(--space-xs); 
color: var(--fg-primary); 
} 
/* Active filter chips */
.active-filters{ 
display: flex; 
align-items: center; 
gap: var(--space-xs); 
flex-wrap: wrap; 
} 
.active-filters:empty{ 
display: none; 
} 
.filter-chip{ 
display: inline-flex; 
align-items: center; 
gap: 4px; 
padding: var(--space-xs) var(--space-sm); 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
color: var(--fg-secondary); 
font-family: var(--font-body); 
font-size: var(--text-xs); 
cursor: pointer; 
transition: all 0.1s ease; 
} 
.filter-chip:hover{ 
border-color: var(--fg-muted); 
color: var(--fg-primary); 
} 
.chip-x{ 
width: 10px; 
height: 10px; 
flex-shrink: 0; 
opacity: 0.5; 
} 
.filter-chip:hover .chip-x{ 
opacity: 1; 
} 
/* Responsive */
@media (width <= 768px){ 
.filter-panel{ 
bottom: var(--page-gutter); 
right: var(--page-gutter); 
} 
.filter-menu{ 
min-width: calc(100vw - 2 * var(--page-gutter)); 
right: 0; 
} 
.active-filters{ 
max-width: calc(100vw - 80px); 
} 
} 
/* ==========================================================================
Poster Wall - Event Grid Layout
========================================================================== */
/* Flex-Grow Aspect Ratio Layout (9elements technique) */
.poster-wall{ 
display: flex; 
flex-wrap: wrap; 
gap: var(--poster-gap); 
padding: 0 var(--page-gutter) var(--fade-height); 
list-style: none; 
margin: 0; 
} 
.poster{ 
--ratio: 0.8; /* Default 4:5 portrait (Instagram default) */
position: relative; 
overflow: hidden; 
display: block; 
flex-basis: 0; 
flex-grow: var(--ratio); 
aspect-ratio: clamp(0.6, var(--ratio), 1.2); 
min-width: 17%; /* ~5 items per row on desktop */
max-width: 20%; /* Prevent single posters from expanding to fill row */
max-height: var(--poster-max-height); 
border-radius: var(--radius-base); 
box-shadow: 0 0 0 1px var(--overlay-light-5); /* Optical spacing */
} 
.poster-link{ 
position: relative; 
display: block; 
width: 100%; 
height: 100%; 
} 
/* Month separator - large typographic treatment, sticky like calendar page */
.month-separator-item{ 
flex-basis: 100%; 
list-style: none; 
} 
.month-separator{ 
padding: 36px 0 12px; 
display: flex; 
align-items: baseline; 
gap: 0.3em; 
position: sticky; 
top: calc(var(--header-height) - var(--header-vertical-trim)); 
z-index: 95; 
isolation: isolate; 
} 
.month-separator .month-name{ 
font-family: var(--font-body); 
font-size: var(--text-lg); 
font-weight: var(--font-weight-bold); 
letter-spacing: 0; 
color: var(--fg-primary); 
line-height: 1; 
} 
.month-separator .month-year{ 
font-family: var(--font-body); 
font-size: var(--text-lg); 
font-weight: var(--font-weight-regular); 
letter-spacing: 0; 
color: var(--fg-muted); 
line-height: 1; 
} 
.poster img{ 
width: 100%; 
height: 100%; 
object-fit: cover; 
transition: transform 0.3s ease, filter 0.2s ease; 
filter: grayscale(10%) contrast(1.05); 
} 
.poster:hover img{ 
transform: scale(1.05); 
filter: grayscale(0%) contrast(1); 
} 
/* Hover overlay */
.poster-overlay{ 
position: absolute; 
inset: 0; 
background: linear-gradient(to top, var(--overlay-dark-85) 0%, transparent 60%); 
opacity: 0; 
transition: opacity 0.2s ease; 
display: flex; 
flex-direction: column; 
justify-content: flex-end; 
padding: 12px; 
pointer-events: none; 
} 
.poster:hover .poster-overlay{ 
opacity: 1; 
} 
/* Favorite button */
.favorite-btn{ 
position: absolute; 
top: 8px; 
right: 8px; 
padding: 6px; 
background: var(--overlay-dark-50); 
border: none; 
border-radius: 50%; 
cursor: pointer; 
opacity: 0; 
transition: opacity 150ms, transform 100ms; 
z-index: 10; 
} 
.poster:hover .favorite-btn,
.poster[data-favorited="true"] .favorite-btn{ 
opacity: 1; 
} 
.favorite-btn:active{ 
transform: scale(0.9); 
} 
.favorite-btn .heart-icon{ 
width: var(--icon-md); 
height: var(--icon-md); 
color: var(--fg-primary); 
display: block; 
} 
/* Toggle between outline and filled heart */
.favorite-btn .heart-icon:last-child{ 
display: none; 
} 
.poster[data-favorited="true"] .favorite-btn .heart-icon:first-child{ 
display: none; 
} 
.poster[data-favorited="true"] .favorite-btn .heart-icon:last-child{ 
display: block; 
} 
/* Filter: hide non-favorites when active */
.poster-wall.filter-favorites .poster:not([data-favorited="true"]){ 
display: none; 
} 
.poster-title{ 
font-size: var(--text-base); 
color: var(--fg-primary); 
margin: var(--space-xs) 0; 
display: -webkit-box; 
-webkit-line-clamp: 2; 
line-clamp: 2; 
-webkit-box-orient: vertical; 
overflow: hidden; 
overflow-wrap: break-word; 
hyphens: auto; 
} 
.poster-overlay time{ 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
color: var(--fg-primary); 
} 
/* Multi-date display */
.event-dates{ 
display: flex; 
flex-wrap: wrap; 
align-items: center; 
gap: var(--space-xs); 
} 
.event-dates .date-sep{ 
color: var(--fg-muted); 
font-size: var(--text-xs); 
} 
.event-dates .event-time{ 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
color: var(--fg-secondary); 
margin-left: var(--space-xs); 
} 
.poster-overlay .venue{ 
font-size: var(--text-xs); 
color: var(--fg-secondary); 
margin-top: var(--space-xs); 
} 
/* Placeholder posters for events without images */
.poster--placeholder{ 
background: var(--bg-elevated); 
overflow: hidden; 
position: relative; 
} 
.poster-placeholder-content{ 
position: absolute; 
inset: 0; 
display: flex; 
flex-direction: column; 
justify-content: flex-end; 
align-items: flex-start; 
text-align: left; 
padding: 16px; 
transition: opacity 0.2s ease; 
} 
/* Giant background title - crops dramatically for visual interest */
.poster-placeholder-content::before{ 
content: attr(data-title); 
position: absolute; 
bottom: -0.1em; 
left: 0; 
font-family: var(--font-display); 
font-size: clamp(4rem, 18vw, 7rem); 
font-weight: var(--font-weight-bold); 
text-transform: capitalize; 
line-height: 0.85; 
color: var(--placeholder-text); 
white-space: nowrap; 
pointer-events: none; 
animation: placeholder-drift 20s ease-in-out infinite alternate; 
transition: opacity 0.2s ease; 
} 
.poster--placeholder:hover .poster-placeholder-content::before{ 
opacity: 0; 
} 
@keyframes placeholder-drift{ 
0%{ 
transform: translateX(0%); 
} 
100%{ 
transform: translateX(-30%); 
} 
} 
.poster-placeholder-content .event-types{ 
position: relative; 
z-index: 1; 
margin-bottom: var(--space-xs); 
} 
.poster-placeholder-content .poster-title{ 
position: relative; 
z-index: 1; 
font-size: clamp(0.85rem, 1.8vw, 1.05rem); 
font-weight: var(--font-weight-semibold); 
color: var(--fg-primary); 
text-transform: uppercase; 
letter-spacing: 0.02em; 
line-height: 1.2; 
display: -webkit-box; 
-webkit-line-clamp: 3; 
line-clamp: 3; 
-webkit-box-orient: vertical; 
overflow: hidden; 
overflow-wrap: break-word; 
hyphens: auto; 
} 
/* Fade placeholder content on hover to make overlay more readable */
.poster--placeholder:hover .poster-placeholder-content{ 
opacity: 0; 
} 
/* Hide overlay on touch devices */
@media (hover: none){ 
.poster-overlay{ 
display: none; 
} 
.favorite-btn{ 
opacity: 1; 
} 
} 
/* Cancelled Events */
.poster.cancelled{ 
opacity: 0.5; 
} 
.poster.cancelled img{ 
filter: grayscale(60%) contrast(0.9); 
} 
.poster.cancelled:hover img{ 
filter: grayscale(40%) contrast(0.95); 
} 
.cancelled-badge{ 
position: absolute; 
top: 12px; 
left: 12px; 
z-index: 10; 
background: var(--bg-elevated); 
color: var(--fg-muted); 
font-family: var(--font-display); 
font-size: var(--text-xs); 
font-weight: var(--font-weight-semibold); 
text-transform: capitalize; 
letter-spacing: 0.1em; 
padding: var(--space-xs) var(--space-sm); 
border-radius: var(--radius-base); 
border: var(--border-width) solid var(--border-color); 
} 
.poster.cancelled .poster-overlay .poster-title{ 
text-decoration: line-through; 
color: var(--fg-muted); 
} 
.poster--placeholder.cancelled .poster-placeholder-content .poster-title{ 
text-decoration: line-through; 
color: var(--fg-muted); 
} 
/* Responsive */
@media (width <= 768px){ 
.poster-wall{ 
padding: var(--poster-gap) var(--page-gutter) var(--fade-height); 
} 
.poster{ 
min-width: 30%; /* Forces 3 items per row on mobile */
max-width: 33%; /* Prevent single posters from expanding */
} 
.month-separator{ 
padding: 24px 0 8px; 
} 
} 
/* ==========================================================================
Event Detail - Detail Page, Actions, Carousel
========================================================================== */
/* Event type badge - minimal style */
.event-type{ 
display: inline-block; 
font-family: var(--font-display); 
font-size: var(--text-sm); 
font-weight: var(--font-weight-semibold); 
text-transform: uppercase; 
letter-spacing: 0.05em; 
color: var(--fg-muted); 
} 
.event-type + .event-type::before{ 
content: ', '; 
} 
/* Source count badge */
.source-count-badge{ 
display: inline-block; 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
padding: var(--space-xs) var(--space-sm); 
background: var(--bg-elevated); 
color: var(--fg-secondary); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
} 
/* Event card title */
.event-card h2{ 
margin-top: var(--space-sm); 
font-size: var(--text-md); 
line-height: 1.2; 
} 
/* Event metadata */
.event-meta{ 
display: flex; 
flex-wrap: wrap; 
gap: var(--space-sm) var(--space-md); 
margin-top: var(--space-sm); 
font-size: var(--text-sm); 
color: var(--fg-muted); 
} 
.event-meta time{ 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
} 
.event-meta .venue{ 
color: var(--fg-secondary); 
} 
.event-meta .venue::before{ 
content: '@ '; 
color: var(--fg-muted); 
} 
/* Event description preview */
.event-description{ 
margin-top: var(--space-md); 
font-size: var(--text-base); 
color: var(--fg-secondary); 
line-height: 1.5; 
/* Clamp to 3 lines */
display: -webkit-box; 
-webkit-line-clamp: 3; 
line-clamp: 3; 
-webkit-box-orient: vertical; 
overflow: hidden; 
} 
/* Show past toggle */
.show-past-toggle{ 
margin-top: var(--space-2xl); 
text-align: center; 
} 
.show-past-toggle a{ 
font-family: var(--font-display); 
font-size: var(--text-xs); 
text-transform: uppercase; 
letter-spacing: 0.1em; 
color: var(--fg-muted); 
padding: var(--space-sm) var(--space-lg); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
transition: all 0.2s ease; 
} 
.show-past-toggle a:hover{ 
border-color: var(--fg-muted); 
color: var(--fg-primary); 
} 
/* Detail Page Layout */
.detail-page{ 
padding: var(--page-gutter) 0 0; 
min-height: calc(100vh - 80px); 
display: flex; 
flex-direction: column; 
} 
/* Navigation container with arrows */
.detail-nav-container{ 
display: flex; 
align-items: flex-start; 
justify-content: center; 
gap: var(--space-lg); 
flex: 1; 
width: 100%; 
max-width: 1200px; 
margin: 0 auto; 
padding: 0 var(--space-md); 
} 
/* Navigation arrows - positioned at middle of 4:5 poster (560px max-height) */
.detail-nav-arrow{ 
display: flex; 
align-items: center; 
justify-content: center; 
width: 48px; 
height: 48px; 
margin-top: calc(80px + 280px); 
color: var(--fg-muted); 
text-decoration: none; 
cursor: pointer; 
transition: color 150ms, transform 150ms; 
flex-shrink: 0; 
align-self: flex-start; 
} 
.detail-nav-arrow svg{ 
width: 32px; 
height: 32px; 
} 
a.detail-nav-arrow:hover{ 
color: var(--fg-primary); 
transform: scale(1.15); 
} 
.detail-nav-arrow.disabled{ 
opacity: 0.15; 
cursor: default; 
} 
/* Content box */
.detail-content-box{ 
flex: 1; 
max-width: var(--content-max-width); 
min-width: 0; 
} 
.detail-page .page-header{ 
margin-bottom: var(--space-md); 
} 
.detail-page .page-title-text{ 
font-size: var(--text-xl); 
font-weight: var(--font-weight-semibold); 
line-height: 1.2; 
text-transform: uppercase; 
overflow-wrap: break-word; 
hyphens: auto; 
margin-bottom: 0; 
} 
.detail-page .page-title-text::after{ 
display: none; 
} 
.event-detail{ 
max-width: var(--content-max-width); 
} 
.event-detail > .event-types{ 
margin-bottom: var(--space-lg); 
} 
/* Media gallery */
.event-media{ 
margin: var(--space-xl) 0 var(--space-2xl); 
display: grid; 
gap: var(--space-md); 
} 
/* Event carousel */
.event-carousel{ 
position: relative; 
margin: var(--space-lg) 0 var(--space-2xl); 
display: flex; 
flex-direction: column; 
align-items: center; 
} 
.event-media img{ 
width: 100%; 
max-width: 100%; 
height: auto; 
border: var(--border-width) solid var(--border-color); 
filter: grayscale(10%); 
transition: filter 0.3s ease; 
} 
.event-media img:hover{ 
filter: grayscale(0%); 
} 
/* Event info - horizontal inline layout */
.event-detail .event-info{ 
display: flex; 
flex-flow: row wrap; 
align-items: baseline; 
gap: var(--space-xs); 
margin: var(--space-xl) 0; 
color: var(--fg-secondary); 
font-size: var(--text-base); 
} 
.event-info-item{ 
display: inline; 
} 
.event-info-label{ 
font-family: var(--font-body); 
font-size: var(--text-xs); 
font-weight: var(--font-weight-regular); 
text-transform: lowercase; 
letter-spacing: 0.08em; 
color: var(--fg-muted); 
margin-right: var(--space-xs); 
} 
.event-info-value{ 
color: var(--fg-secondary); 
} 
.event-info-separator{ 
color: var(--fg-muted); 
margin: 0 var(--space-sm); 
} 
/* Fallback for old dl/dt/dd structure */
.event-info dt{ 
font-family: var(--font-body); 
font-size: var(--text-xs); 
font-weight: var(--font-weight-regular); 
text-transform: lowercase; 
letter-spacing: 0.08em; 
color: var(--fg-muted); 
line-height: 1.6; 
} 
.event-info dd{ 
color: var(--fg-secondary); 
line-height: 1.6; 
} 
.event-info dd small{ 
display: block; 
color: var(--fg-muted); 
font-size: var(--text-sm); 
margin-top: var(--space-xs); 
} 
/* Event Actions Bar */
.event-actions-bar{ 
display: flex; 
gap: var(--space-sm); 
margin: var(--space-lg) 0; 
} 
.action-icon{ 
width: var(--icon-md); 
height: var(--icon-md); 
flex-shrink: 0; 
} 
/* Favorite button state */
.favorite-btn-detail .heart-icon{ 
width: var(--icon-md); 
height: var(--icon-md); 
} 
.favorite-btn-detail .heart-icon:last-of-type{ 
display: none; 
} 
.favorite-btn-detail.active .heart-icon:first-of-type{ 
display: none; 
} 
.favorite-btn-detail.active .heart-icon:last-of-type{ 
display: block; 
} 
.favorite-btn-detail.active{ 
border-color: var(--fg-muted); 
color: var(--fg-primary); 
} 
/* Calendar dropdown */
.calendar-dropdown{ 
position: relative; 
} 
.calendar-dropdown summary{ 
list-style: none; 
} 
.calendar-dropdown summary::-webkit-details-marker{ 
display: none; 
} 
.calendar-dropdown[open] > summary{ 
border-color: var(--fg-muted); 
color: var(--fg-primary); 
} 
.calendar-form{ 
position: absolute; 
top: calc(100% + var(--space-xs)); 
left: 0; 
z-index: 20; 
min-width: 200px; 
padding: var(--space-md); 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
box-shadow: 0 8px 24px var(--shadow-color-strong); 
} 
.calendar-form-label{ 
font-family: var(--font-display); 
font-size: var(--text-xs); 
text-transform: uppercase; 
letter-spacing: 0.05em; 
color: var(--fg-muted); 
margin-bottom: var(--space-sm); 
} 
.calendar-form .date-option{ 
display: flex; 
align-items: center; 
gap: var(--space-sm); 
padding: var(--space-xs) 0; 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
cursor: pointer; 
} 
.calendar-form .date-option:hover{ 
color: var(--fg-primary); 
} 
.calendar-form .date-option input[type="checkbox"]{ 
accent-color: var(--fg-secondary); 
} 
.calendar-form .btn{ 
width: 100%; 
justify-content: center; 
margin-top: var(--space-md); 
} 
/* Share dropdown */
.share-dropdown{ 
position: relative; 
} 
.share-dropdown summary{ 
list-style: none; 
} 
.share-dropdown summary::-webkit-details-marker{ 
display: none; 
} 
.share-dropdown[open] > summary{ 
border-color: var(--fg-muted); 
color: var(--fg-primary); 
} 
.share-menu{ 
position: absolute; 
top: calc(100% + var(--space-xs)); 
left: 0; 
z-index: 20; 
min-width: 140px; 
padding: var(--space-xs) 0; 
background: var(--bg-elevated); 
border: var(--border-width) solid var(--border-color); 
border-radius: var(--radius-base); 
box-shadow: 0 8px 24px var(--shadow-color-strong); 
} 
.share-option{ 
display: block; 
width: 100%; 
padding: var(--space-sm) var(--space-md); 
font-family: var(--font-body); 
font-size: var(--text-sm); 
color: var(--fg-secondary); 
text-align: left; 
text-decoration: none; 
background: none; 
border: none; 
cursor: pointer; 
transition: background 150ms, color 150ms; 
} 
.share-option:hover{ 
background: var(--bg-card); 
color: var(--fg-primary); 
} 
/* Description section */
.event-description-full{ 
margin: var(--space-2xl) 0 var(--space-xl); 
} 
.event-sources{ 
margin: var(--space-2xl) 0 var(--space-xl); 
} 
/* Section labels use .section-label from components.css */
.event-description-full h2,
.event-sources h2{ 
opacity: 0.7; 
margin-bottom: var(--space-md); 
} 
.original-posts-list{ 
list-style: none; 
margin: 0; 
padding: 0; 
} 
.event-description-full p{ 
color: var(--fg-secondary); 
line-height: 1.7; 
} 
/* Original post quote */
.original-post{ 
margin-top: var(--space-lg); 
} 
.original-post blockquote{ 
margin: 0; 
padding: var(--space-lg); 
background: var(--bg-card); 
border: var(--border-width) solid var(--border-color); 
border-left: var(--border-width-accent) solid var(--fg-muted); 
white-space: pre-wrap; 
font-size: var(--text-base); 
line-height: 1.6; 
color: var(--fg-secondary); 
font-style: italic; 
} 
.original-post .post-date{ 
margin-top: var(--space-md); 
font-size: var(--text-sm); 
color: var(--fg-muted); 
font-family: var(--font-mono); 
} 
/* Back link */
.back-link{ 
display: inline-block; 
margin-top: var(--space-2xl); 
font-family: var(--font-display); 
font-size: var(--text-xs); 
text-transform: uppercase; 
letter-spacing: 0.1em; 
} 
/* Image Carousel */
.carousel{ 
position: relative; 
width: 100%; 
overflow: hidden; 
} 
.carousel-item{ 
display: none; 
width: 100%; 
position: relative; /* For skeleton loading overlay */
} 
.carousel-item.active{ 
display: block; 
} 
.carousel-container{ 
display: flex; 
justify-content: center; 
} 
.carousel-item img{ 
display: block; 
width: auto; 
height: auto; 
max-height: 560px; 
max-width: 100%; 
filter: grayscale(10%); 
border-radius: var(--radius-base); 
box-shadow: 0 0 0 1px var(--overlay-light-10); 
opacity: 0; /* Hidden until loaded (skeleton loading) */
transition: opacity 300ms ease-out, filter 0.3s ease; 
} 
.carousel-item img:hover{ 
filter: grayscale(0%); 
} 
/* Carousel navigation - below the poster */
.carousel-nav{ 
display: flex; 
justify-content: center; 
align-items: center; 
gap: var(--space-md); 
padding: var(--space-md) var(--space-md) 0; 
} 
/* Carousel arrow buttons */
.carousel-arrow{ 
display: flex; 
align-items: center; 
justify-content: center; 
width: 32px; 
height: 32px; 
padding: 0; 
background: transparent; 
border: none; 
color: var(--fg-secondary); 
cursor: pointer; 
transition: color 150ms, transform 150ms; 
} 
.carousel-arrow svg{ 
width: var(--icon-md); 
height: var(--icon-md); 
} 
.carousel-arrow:hover{ 
color: var(--fg-primary); 
} 
.carousel-arrow:disabled{ 
opacity: 0.3; 
cursor: not-allowed; 
} 
/* Carousel dots - filled/unfilled style */
.carousel-dots{ 
display: flex; 
gap: var(--space-sm); 
align-items: center; 
} 
.carousel-dot{ 
width: 10px; 
height: 10px; 
padding: 0; 
background: transparent; 
border: 2px solid var(--fg-secondary); 
border-radius: 50%; 
cursor: pointer; 
transition: all 150ms; 
} 
.carousel-dot:hover{ 
border-color: var(--fg-primary); 
} 
.carousel-dot.active{ 
background: var(--fg-secondary); 
} 
/* Page slide transitions for swipe navigation */
.detail-page,
.site-header{ 
will-change: transform; 
} 
.detail-page.dragging,
.site-header.dragging{ 
transition: none; 
} 
.detail-page.animating,
.site-header.animating{ 
transition: transform 250ms ease-out; 
} 
/* Incoming page during swipe */
.swipe-incoming{ 
position: fixed; 
inset: 0; 
z-index: 100; 
background: var(--page-background); 
background-attachment: var(--page-background-attachment); 
background-blend-mode: var(--page-background-blend-mode); 
will-change: transform; 
overflow: hidden auto; 
} 
.swipe-incoming.dragging{ 
transition: none; 
} 
.swipe-incoming.animating{ 
transition: transform 250ms ease-out; 
} 
/* Reset nested detail-page styles in overlay */
.swipe-incoming .detail-page{ 
transition: none; 
} 
/* Skeleton loading for carousel images */
.carousel-item .skeleton{ 
position: absolute; 
inset: 0; 
display: flex; 
align-items: center; 
justify-content: center; 
background: var(--bg-elevated); 
border-radius: var(--radius-base); 
} 
.carousel-item .skeleton::after{ 
content: ''; 
width: 48px; 
height: 48px; 
border: 2px solid var(--border-color); 
border-top-color: var(--fg-muted); 
border-radius: 50%; 
animation: skeleton-spin 800ms linear infinite; 
} 
@keyframes skeleton-spin{ 
to{ transform: rotate(360deg); } 
} 
.carousel-item img.loaded{ 
opacity: 1; 
} 
.carousel-item img.loaded + .skeleton{ 
display: none; 
} 
/* Responsive */
@media (width <= 768px){ 
.detail-page{ 
padding: var(--page-gutter) 0 0; 
} 
.detail-nav-container{ 
padding: 0; 
} 
.detail-nav-arrow{ 
display: none; 
} 
.detail-content-box{ 
width: 100%; 
} 
.event-detail .event-info{ 
gap: var(--space-xs); 
} 
} 
/* ==========================================================================
Calendar - Event Stream View (Schwankhalle-inspired)
========================================================================== */
.calendar-page{ 
padding: 0 var(--page-gutter) var(--fade-height); 
} 
.calendar-empty{ 
color: var(--fg-muted); 
font-size: var(--text-lg); 
text-align: center; 
padding: var(--space-3xl) 0; 
} 
/* Event Stream Container */
.event-stream{ 
display: flex; 
flex-direction: column; 
list-style: none; 
margin: 0; 
padding: 0; 
} 
/* Event Row */
.event-row{ 
border-bottom: var(--border-width) solid var(--border-color); 
} 
.event-row:last-of-type{ 
border-bottom: none; 
} 
.event-link{ 
display: flex; 
align-items: baseline; 
gap: var(--space-xl); 
padding: var(--space-md) 0; 
text-decoration: none; 
transition: background 0.15s ease; 
} 
.event-row:hover .event-link{ 
background: var(--bg-elevated); 
} 
/* Date Block */
.event-date{ 
flex-shrink: 0; 
width: 100px; 
display: flex; 
flex-direction: column; 
gap: var(--space-xs); 
} 
.date-day{ 
font-family: var(--font-mono); 
font-size: var(--text-base); 
color: var(--fg-primary); 
white-space: nowrap; 
} 
.date-time{ 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
color: var(--fg-muted); 
} 
/* Event Info */
.event-info{ 
flex: 1; 
display: flex; 
flex-direction: column; 
gap: var(--space-sm); 
min-width: 0; 
} 
.event-title{ 
font-family: var(--font-display); 
font-size: var(--text-lg); 
font-weight: var(--font-weight-semibold); 
color: var(--fg-secondary); 
transition: color 0.15s ease; 
line-height: 1.3; 
margin: 0; 
text-transform: none; 
} 
.event-row:hover .event-title{ 
color: var(--fg-primary); 
} 
.event-venue{ 
font-size: var(--text-sm); 
color: var(--fg-muted); 
} 
/* Event Tags */
.event-tags{ 
display: flex; 
flex-wrap: wrap; 
gap: var(--space-xs); 
margin-top: var(--space-sm); 
} 
.event-tag{ 
font-family: var(--font-mono); 
font-size: var(--text-xs); 
color: var(--fg-muted); 
background: var(--bg-elevated); 
padding: 2px var(--space-sm); 
border-radius: var(--radius-sm); 
} 
/* Cancelled Events */
.event-row.cancelled{ 
opacity: 0.5; 
} 
.event-row.cancelled .event-title{ 
text-decoration: line-through; 
} 
/* Past Events */
.event-row.past{ 
opacity: 0.7; 
} 
/* Calendar Actions */
.calendar-actions{ 
display: flex; 
justify-content: flex-start; 
margin-top: var(--space-2xl); 
padding-bottom: var(--space-3xl); 
} 
/* ==========================================================================
Responsive
========================================================================== */
@media (width <= 600px){ 
.calendar-page .month-separator-item{ 
padding: var(--space-lg) 0 var(--space-sm); 
} 
.event-link{ 
flex-direction: column; 
gap: var(--space-sm); 
padding: var(--space-md) 0; 
} 
.event-date{ 
width: auto; 
flex-direction: row; 
align-items: baseline; 
gap: var(--space-md); 
} 
.event-title{ 
font-size: var(--text-base); 
} 
} 
/* ==========================================================================
Pages - Info, Empty States
========================================================================== */
/* Info Page */
.info-page{ 
padding: var(--page-gutter) var(--page-gutter) 0; 
} 
.info-page .page-header{ 
margin-bottom: var(--space-xl); 
} 
.info-page .page-title-text{ 
font-size: var(--text-lg); 
font-weight: var(--font-weight-bold); 
text-transform: uppercase; 
} 
.info-content{ 
max-width: var(--content-max-width); 
} 
.info-lead{ 
font-size: var(--text-base); 
color: var(--fg-muted); 
margin-bottom: var(--space-xl); 
} 
.info-section{ 
margin-bottom: var(--space-xl); 
} 
.info-section h2{ 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
font-weight: var(--font-weight-regular); 
text-transform: uppercase; 
letter-spacing: 0.05em; 
color: var(--fg-muted); 
margin-bottom: var(--space-md); 
padding-bottom: var(--space-md); 
border-bottom: var(--border-width) solid var(--border-color); 
} 
.info-section p{ 
color: var(--fg-secondary); 
line-height: 1.7; 
} 
.info-section ul{ 
padding-left: var(--space-lg); 
margin-bottom: var(--space-md); 
} 
.info-section li{ 
color: var(--fg-secondary); 
line-height: 1.7; 
margin-bottom: var(--space-xs); 
} 
.info-section h3{ 
font-family: var(--font-display); 
font-size: var(--text-base); 
font-weight: var(--font-weight-semibold); 
text-transform: uppercase; 
letter-spacing: 0.02em; 
color: var(--fg-primary); 
margin-top: var(--space-lg); 
margin-bottom: var(--space-sm); 
} 
.source-submit{ 
margin-top: var(--space-lg); 
} 
/* Empty States */
.empty-state{ 
text-align: center; 
padding: var(--space-3xl); 
color: var(--fg-muted); 
} 
.empty-state p{ 
font-size: var(--text-md); 
} 
/* My Submissions Page */
.my-submissions-page{ 
max-width: 800px; 
margin: 0 auto; 
padding: 32px 16px; 
} 
.my-submissions-page h1{ 
margin-bottom: 32px; 
} 
.submissions-section{ 
margin-bottom: 40px; 
} 
.submissions-section h2{ 
font-size: 1.25rem; 
margin-bottom: 16px; 
color: var(--fg-primary); 
} 
.submissions-list{ 
display: flex; 
flex-direction: column; 
gap: 12px; 
} 
.submission-card{ 
display: flex; 
align-items: center; 
gap: 16px; 
padding: 16px; 
background: var(--bg-elevated); 
border: 1px solid var(--border-color); 
border-radius: 8px; 
} 
.submission-info{ 
flex: 1; 
display: flex; 
flex-direction: column; 
gap: 4px; 
} 
.submission-title{ 
font-weight: 600; 
color: var(--fg-primary); 
} 
.submission-date,
.submission-platform,
.submission-details{ 
font-size: 0.875rem; 
color: var(--fg-secondary); 
} 
.empty-message{ 
color: var(--fg-muted); 
font-style: italic; 
} 
.link-email-form{ 
display: flex; 
gap: 12px; 
margin-top: 12px; 
} 
.link-email-form input{ 
flex: 1; 
padding: 10px 12px; 
background: var(--bg-card); 
border: 1px solid var(--border-color); 
border-radius: 4px; 
color: var(--fg-primary); 
} 
.success-message{ 
color: var(--color-success); 
margin-top: 12px; 
} 
/* Status badges */
.status-badge{ 
padding: 4px 12px; 
border-radius: 4px; 
font-size: 0.75rem; 
font-weight: 600; 
text-transform: uppercase; 
letter-spacing: 0.05em; 
} 
.status-badge.status-pending_review,
.status-badge.status-pending{ 
background: var(--color-warning-20); 
color: var(--color-warning); 
} 
.status-badge.status-published,
.status-badge.status-approved,
.status-badge.status-resolved{ 
background: var(--color-success-20); 
color: var(--color-success); 
} 
.status-badge.status-rejected,
.status-badge.status-dismissed{ 
background: var(--color-danger-20); 
color: var(--color-danger); 
} 
.badge-info{ 
background: var(--color-info-20); 
color: var(--color-info); 
} 
/* Responsive - page padding uses var(--page-gutter) which adjusts automatically */
/* ==========================================================================
Lightbox - Fullscreen Image Viewer
========================================================================== */
.lightbox{ 
position: fixed; 
inset: 0; 
z-index: 200; 
display: flex; 
align-items: center; 
justify-content: center; 
background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deep) 15%, var(--bg-main) 100%); 
opacity: 0; 
visibility: hidden; 
transition: opacity 0.2s ease, visibility 0.2s ease; 
view-transition-name: lightbox; 
} 
.lightbox.active{ 
opacity: 1; 
visibility: visible; 
} 
.lightbox-content{ 
position: relative; 
display: flex; 
flex-direction: column; 
align-items: center; 
justify-content: center; 
width: 100%; 
height: 100%; 
padding: var(--space-lg); 
} 
.lightbox-image{ 
max-width: 100%; 
max-height: calc(100vh - 120px); 
object-fit: contain; 
border-radius: var(--radius-base); 
opacity: 0; 
transform: scale(0.95); 
transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s; 
} 
.lightbox.active .lightbox-image{ 
opacity: 1; 
transform: scale(1); 
} 
/* Close button */
.lightbox-close{ 
position: absolute; 
top: var(--space-lg); 
right: var(--space-lg); 
display: flex; 
align-items: center; 
justify-content: center; 
width: 44px; 
height: 44px; 
padding: 0; 
background: var(--overlay-light-10); 
border: none; 
border-radius: 50%; 
color: var(--fg-primary); 
cursor: pointer; 
transition: all 0.15s ease; 
z-index: 10; 
} 
.lightbox-close:hover{ 
background: var(--overlay-light-20); 
transform: scale(1.1); 
} 
.lightbox-close svg{ 
width: var(--icon-md); 
height: var(--icon-md); 
} 
/* Navigation arrows */
.lightbox-nav{ 
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
display: flex; 
align-items: center; 
justify-content: center; 
width: 48px; 
height: 48px; 
padding: 0; 
background: var(--overlay-light-10); 
border: none; 
border-radius: 50%; 
color: var(--fg-primary); 
cursor: pointer; 
transition: all 0.15s ease; 
z-index: 10; 
} 
.lightbox-nav:hover{ 
background: var(--overlay-light-20); 
transform: translateY(-50%) scale(1.1); 
} 
.lightbox-nav:disabled{ 
opacity: 0.3; 
cursor: not-allowed; 
} 
.lightbox-nav:disabled:hover{ 
background: var(--overlay-light-10); 
transform: translateY(-50%); 
} 
.lightbox-nav svg{ 
width: var(--icon-lg); 
height: var(--icon-lg); 
} 
.lightbox-prev{ 
left: var(--space-lg); 
} 
.lightbox-next{ 
right: var(--space-lg); 
} 
/* Bottom bar with info and actions */
.lightbox-bar{ 
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
display: flex; 
align-items: center; 
justify-content: center; 
gap: var(--space-md); 
padding: var(--space-lg); 
} 
.lightbox-counter{ 
font-family: var(--font-mono); 
font-size: var(--text-sm); 
color: var(--fg-muted); 
} 
.lightbox-link{ 
display: inline-flex; 
align-items: center; 
gap: var(--space-xs); 
padding: var(--space-sm) var(--space-md); 
background: var(--overlay-light-10); 
border: var(--border-width) solid var(--overlay-light-20); 
border-radius: var(--radius-base); 
color: var(--fg-primary); 
font-family: var(--font-display); 
font-size: var(--text-sm); 
text-decoration: none; 
transition: all 0.15s ease; 
} 
.lightbox-link:hover{ 
background: var(--overlay-light-15); 
border-color: var(--overlay-light-30); 
} 
.lightbox-link svg{ 
width: var(--icon-sm); 
height: var(--icon-sm); 
} 
/* Hide on mobile when no navigation needed */
@media (width <= 768px){ 
.lightbox-nav{ 
width: 40px; 
height: 40px; 
} 
.lightbox-nav svg{ 
width: var(--icon-md); 
height: var(--icon-md); 
} 
.lightbox-prev{ 
left: var(--space-sm); 
} 
.lightbox-next{ 
right: var(--space-sm); 
} 
.lightbox-close{ 
top: var(--space-md); 
right: var(--space-md); 
width: 40px; 
height: 40px; 
} 
.lightbox-image{ 
max-height: calc(100vh - 100px); 
} 
.lightbox-content{ 
padding: var(--space-md); 
} 
} 
/* Touch-friendly close area hint */
.lightbox-backdrop{ 
position: absolute; 
inset: 0; 
z-index: -1; 
}