/* Google Fonts are loaded via tags in each page's , not
@import here — @import inside a CSS file is a well-documented
render-blocking-chain anti-pattern (the browser can't discover it via
the HTML preload scanner, so font CSS fetch is delayed until this
whole stylesheet is parsed). See the tags for the trimmed
weight list (only the weights actually used in this codebase). */
:root {
--blush: #FAF4F2;
--burgundy: #8B1A2E;
--deep-burgundy: #5C0F1E;
--cream: #F5EDE8;
--dusty-rose: #D4A5A0;
--charcoal: #3A3A3A;
--white: #FFFFFF;
--sage: #E8EDE6;
--light-burgundy: rgba(139,26,46,0.08);
--shadow: 0 4px 30px rgba(139,26,46,0.08);
--shadow-hover: 0 12px 40px rgba(139,26,46,0.15);
--font-brand: 'Dancing Script', cursive;
--font-display: 'Cormorant Garamond', serif;
--font-body: 'Jost', sans-serif;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--radius: 4px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* ── Accessibility base ─────────────────────────────────────────────────── */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; top: -100px; left: 1rem; z-index: 10000;
background: var(--burgundy); color: #fff; padding: 0.85rem 1.5rem;
border-radius: 4px; font-family: var(--font-body); font-size: 0.85rem;
font-weight: 500; text-decoration: none; transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }
/* One consistent, visible focus style everywhere — components that used
to suppress outline:none on inputs/buttons now fall back to this
instead of losing focus indication entirely. Uses :focus-visible so
mouse clicks don't show a ring, only keyboard/AT navigation does. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--burgundy);
outline-offset: 2px;
}
/* Browsers without :focus-visible support (older Safari) still get a ring
on plain :focus rather than nothing. */
@supports not selector(:focus-visible) {
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 2px solid var(--burgundy); outline-offset: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
}
body {
font-family: var(--font-body);
background: var(--blush);
color: var(--charcoal);
font-size: 15px;
line-height: 1.7;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
ul { list-style: none; }
input, textarea, select { font-family: var(--font-body); }
#scroll-progress {
position: fixed; top: 0; left: 0;
height: 2px; width: 0%;
background: var(--burgundy);
z-index: 9999; transition: width 0.1s linear;
}
.brand-name { font-family: var(--font-brand); color: var(--burgundy); letter-spacing: 0.02em; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; color: var(--charcoal); }
h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.eyebrow {
font-family: var(--font-body); font-size: 0.7rem; font-weight: 500;
letter-spacing: 0.3em; text-transform: uppercase; color: var(--burgundy);
display: block; margin-bottom: 0.75rem;
}
.section-title { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 400; margin-bottom: 0.5rem; }
.section-subtitle { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: #7a5a5a; margin-bottom: 3rem; }
.btn-primary {
display: inline-block; background: var(--burgundy); color: var(--blush);
border-radius: var(--radius); padding: 14px 36px; font-size: 0.75rem;
font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
transition: var(--transition); box-shadow: 0 4px 20px rgba(139,26,46,0.2);
}
.btn-primary:hover { background: var(--deep-burgundy); box-shadow: 0 8px 32px rgba(139,26,46,0.35); transform: translateY(-2px); color: var(--blush); }
.btn-outline {
display: inline-block; background: transparent; border: 1px solid var(--burgundy);
color: var(--burgundy); border-radius: var(--radius); padding: 13px 34px;
font-size: 0.75rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; transition: var(--transition);
}
.btn-outline:hover { background: var(--burgundy); color: var(--blush); }
.btn-pill {
display: inline-block; border-radius: 50px; background: var(--light-burgundy);
border: 1px solid rgba(139,26,46,0.2); color: var(--burgundy); padding: 9px 22px;
font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; transition: var(--transition); font-weight: 500;
}
.btn-pill:hover, .btn-pill.active { background: var(--burgundy); color: white; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
section { padding: 6rem 0; }
.section-header { text-align: center; margin-bottom: 4rem; }
.img-placeholder {
background: linear-gradient(135deg, #F5EDE8, #FAF4F2);
border: 2px dashed rgba(139,26,46,0.2); border-radius: 8px;
aspect-ratio: 3/4; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 0.75rem;
color: rgba(139,26,46,0.35); text-align: center; padding: 1.5rem;
}
.img-placeholder svg { width: 36px; height: 36px; }
.img-placeholder span { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; }
.img-placeholder small { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.divider { width: 40px; height: 1px; background: var(--burgundy); margin: 1.5rem auto; opacity: 0.4; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.35s ease, transform 0.35s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.05s; }
.reveal-delay-2 { transition-delay: 0.1s; }
.reveal-delay-3 { transition-delay: 0.15s; }
.reveal-delay-4 { transition-delay: 0.2s; }
/* Fallback: if JS/observer hasn't run within 2s, force reveal so content isn't stuck hidden */
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
.reveal { animation: reveal-fallback 0s 2s forwards; }
.toast {
position: fixed; top: 90px; left: 50%;
background: var(--white); color: var(--charcoal);
padding: 14px 22px; border-radius: 8px; font-size: 0.85rem; z-index: 9000;
border: 1px solid var(--light-burgundy);
transform: translateX(-50%) translateY(-130%); opacity: 0;
transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s ease;
display: flex; align-items: center; gap: 0.7rem;
box-shadow: var(--shadow-hover);
max-width: calc(100vw - 2.5rem);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast .toast-icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--sage); color: #4a9a60; font-size: 0.7rem;
}
@media (max-width: 768px) {
section { padding: 4rem 0; }
.container { padding: 0 1.25rem; }
}