/* Critical CSS - Above-the-fold styles for immediate rendering */ /* Inlined in for fastest LCP */ /* Font preload - using font-display: block to prevent layout shift */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&display=block'); :root { --color-ivory: #FAF7F2; --color-paper: #FFFCF7; --color-terracotta: #C65D3B; --color-terracotta-deep: #A84E30; --color-ink: #1A1A1A; --color-graphite: #3D3D3D; --color-stone: #595959; --color-dust: #767676; --color-line: #E5E0D8; --font-display: 'Instrument Serif', Georgia, serif; --font-body: 'Geist', -apple-system, sans-serif; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); font-weight: 400; line-height: 1.6; color: var(--color-ink); background: var(--color-ivory); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Paper texture */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.015; pointer-events: none; z-index: -1; } main { max-width: 640px; margin: 0 auto; padding: var(--space-lg) var(--space-md); padding-left: max(var(--space-md), env(safe-area-inset-left)); padding-right: max(var(--space-md), env(safe-area-inset-right)); padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); } h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; color: var(--color-ink); } /* Loading state - reserve space to prevent CLS */ .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: var(--space-md); } .loading-spinner { width: 36px; height: 36px; border: 2px solid var(--color-line); border-top-color: var(--color-terracotta); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-state p { color: var(--color-stone); font-size: 0.9375rem; } /* Card base - prevents layout shift */ .card, .event-card { background: var(--color-paper); border: 1px solid var(--color-line); min-height: 200px; /* Reserve minimum space */ } /* Event image - reserve space with aspect ratio */ .event-image { width: 100%; height: 280px; object-fit: contain; display: block; background: var(--color-line); /* Placeholder color */ } /* Landing page critical styles */ .landing { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--space-xl) var(--space-md); } .landing h1 { font-size: clamp(4rem, 15vw, 9rem); font-style: italic; letter-spacing: -0.03em; margin-bottom: var(--space-lg); line-height: 0.9; } /* Button critical styles */ .btn { font-family: var(--font-body); font-weight: 500; font-size: 0.9375rem; padding: 1rem 2rem; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; position: relative; } .btn-primary { background: var(--color-terracotta); color: white; } /* Skip to content link */ .skip-link { position: absolute; top: -100%; left: var(--space-md); background: var(--color-terracotta); color: white; padding: 0.75rem 1.25rem; font-weight: 500; text-decoration: none; z-index: 1000; } .skip-link:focus { top: var(--space-md); } /* Form elements - prevent layout shift */ input[type="text"], input[type="email"], input[type="tel"], textarea { width: 100%; padding: 0.875rem 1rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-ink); background: var(--color-ivory); border: 1.5px solid var(--color-line); min-height: 48px; }