/* Town Takeover - Enhanced Design System */
/* ======================================= */

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

:root {
    /* Color Palette - Warm, earthy with vintage postcard vibes */
    --color-cream: #faf7f2;
    --color-cream-dark: #f0ebe3;
    --color-brown-dark: #3d2c1f;
    --color-brown: #5c4033;
    --color-brown-light: #8b7355;
    --color-terracotta: #c4704f;
    --color-terracotta-light: #d4896b;
    --color-amber: #d4a574;
    --color-sage: #7d8471;
    --color-sage-light: #a8b09c;
    --color-slate: #4a5568;
    --color-white: #ffffff;
    --color-black: #1a1a1a;
    
    /* Semantic Colors */
    --bg-primary: var(--color-cream);
    --bg-secondary: var(--color-cream-dark);
    --bg-dark: var(--color-brown-dark);
    --text-primary: var(--color-brown-dark);
    --text-secondary: var(--color-brown-light);
    --text-light: var(--color-cream);
    --accent-primary: var(--color-terracotta);
    --accent-secondary: var(--color-amber);
    
    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Geometric sans for Futura-style UI text. Futura itself is a licensed
       typeface with no free web-hostable version, so Jost — a geometric sans
       drawn after Futura — leads, with real Futura used if a viewer has it. */
    --font-geometric: 'Jost', Futura, 'Century Gothic', 'Avenir Next', sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(61, 44, 31, 0.08);
    --shadow-md: 0 4px 12px rgba(61, 44, 31, 0.1);
    --shadow-lg: 0 8px 30px rgba(61, 44, 31, 0.12);
    --shadow-xl: 0 20px 50px rgba(61, 44, 31, 0.15);
    
    /* Borders */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    /* Anchors the year-swap stand-in menus (.year-navs) over the real one. */
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

/* Inline content links — terracotta with an underline that grows on hover */
.text-link {
    color: var(--color-terracotta);
    font-weight: 600;
    position: relative;
    padding-bottom: 1px;
    background-image: linear-gradient(var(--color-terracotta), var(--color-terracotta));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    transition: background-size var(--transition-base), color var(--transition-fast);
}

.text-link:hover {
    color: var(--color-brown-dark);
    background-size: 100% 1.5px;
}

ul {
    list-style: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: var(--space-md);
}

.lead {
    font-size: 1.25rem;
    line-height: 1.8;
}

strong {
    font-weight: 600;
    color: var(--text-primary);
}

em {
    font-style: italic;
    color: var(--accent-primary);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.8125rem 1.625rem; /* 13×26px — consistent ~2:1 pill baseline */
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
    /* Liquid-glass base: inner top highlight + soft depth, color comes from variants */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        0 2px 8px rgba(61, 44, 31, 0.18);
}

/* Glossy top-half sheen — the "liquid glass" highlight on every pill */
.btn::after {
    content: '';
    position: absolute;
    inset: 0 0 50% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0));
    pointer-events: none;
    opacity: 0.9;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: var(--transition-slow);
    z-index: 1;
}

.btn:hover::before {
    left: 100%;
}

/* Tactile press feedback */
.btn:active {
    transform: translateY(0) scale(0.97);
}

.btn-primary {
    background-color: var(--color-brown-dark);
    color: var(--text-light);
}

.btn-primary:hover {
    background-color: var(--color-brown);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-brown-dark);
    border: 2px solid var(--color-brown-dark);
    font-weight: 500;
}

.btn-secondary:hover {
    background-color: var(--color-brown-dark);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-white {
    background-color: var(--color-white);
    color: var(--color-brown-dark);
    border: 2px solid var(--color-white);
}

.btn-white:hover {
    background-color: var(--color-cream);
    border-color: var(--color-cream);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-ghost {
    /* Liquid glass: translucent fill + frosted blur + glossy top sheen */
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 55%,
        rgba(255, 255, 255, 0.12) 100%
    );
    color: var(--text-light);
    border-color: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    /* Inner highlight (top edge) + soft outer drop for depth */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-ghost:hover {
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.14) 55%,
        rgba(255, 255, 255, 0.18) 100%
    );
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        0 10px 26px rgba(0, 0, 0, 0.24);
}

.btn-large {
    padding: 0.9375rem 2.125rem; /* 15×34px — proportional step up */
    font-size: 1rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-md) 0;
    background: transparent;
    transition: var(--transition-base);
}

.navbar.scrolled {
    background: rgba(250, 247, 242, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
}

.navbar .logo-text,
.navbar .nav-menu a {
    color: var(--text-light);
}

.navbar.scrolled .logo-text,
.navbar.scrolled .nav-menu a {
    color: var(--color-black);
}

.navbar.always-dark .logo-text,
.navbar.always-dark .nav-menu a {
    color: var(--color-black);
}

.navbar.always-dark .menu-toggle span {
    background-color: var(--color-brown-dark);
}

.navbar.scrolled .menu-toggle span {
    background-color: var(--color-brown-dark);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-light);
    transition: var(--transition-base);
}

.nav-menu {
    display: flex;
    gap: var(--space-xl);
}

.nav-menu a {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--color-black);
    position: relative;
    padding: var(--space-sm) 0;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: var(--transition-base);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

.nav-highlight {
    background: var(--accent-primary);
    color: #ffffff !important;
    padding: var(--space-sm) var(--space-md) !important;
    border-radius: var(--radius-full);
}

.navbar.scrolled .nav-highlight {
    background: rgba(61, 44, 31, 0.08);
    color: var(--color-black) !important;
}

.nav-highlight::after {
    display: none !important;
}

.nav-highlight:hover {
    background: var(--color-terracotta-light);
    transform: translateY(-1px);
}

.navbar.scrolled .nav-highlight:hover {
    background: rgba(61, 44, 31, 0.14);
}

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-light);
    border-radius: 2px;
    transition: var(--transition-base);
    transform-origin: center;
}

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 100vh;
}

.hero-bg-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

@keyframes heroZoom {
    from { transform: scale(1.05); }
    to { transform: scale(1.15); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(61, 44, 31, 0.3) 0%,
        rgba(61, 44, 31, 0.5) 50%,
        rgba(61, 44, 31, 0.7) 100%
    );
}

.hero-bottom-shape {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    pointer-events: none;
    z-index: 1;
}

.hero-bottom-shape svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-bottom-shape path {
    fill: rgba(250, 247, 242, 0.9);
}

.hero-marquee {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--space-3xl);
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

.hero-marquee-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: heroMarquee 22s linear infinite;
}

.hero-marquee-track span {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 800;
    letter-spacing: 1px;
    padding: 0 var(--space-2xl);
    color: var(--text-light);
    opacity: 0.32;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

@keyframes heroMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.hero-content {
    text-align: center;
    max-width: 900px;
    padding: var(--space-4xl) var(--space-lg);
    color: var(--text-light);
}

.hero-badge {
    /* Letterspaced editorial kicker — no pill, cream on dark/image background */
    display: inline-block;
    color: rgba(250, 247, 242, 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: var(--space-xl);
    animation: fadeInDown 0.8s ease forwards;
}

.hero-title {
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: var(--text-light);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-bottom: var(--space-2xl);
    opacity: 0.9;
    animation: fadeInUp 0.8s ease 0.4s both;
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.6s both;
}

/* Inline button row (e.g. About section CTAs) */
.btn-row {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: center;
}

.scroll-indicator {
    position: absolute;
    bottom: var(--space-2xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-light);
    opacity: 0.7;
    animation: bounce 2s ease infinite;
}

.scroll-indicator span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-tag {
    /* Letterspaced editorial kicker — no pill, muted on light backgrounds */
    display: inline-block;
    color: var(--color-brown-light);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

/* About Section */
.about-section {
    padding: var(--space-4xl) 0;
    background-color: var(--bg-primary);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.about-text p {
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.about-text .lead {
    color: var(--text-primary);
    font-size: 1.375rem;
    margin-bottom: var(--space-xl);
}


.about-image {
    position: relative;
}

.image-frame {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.image-frame img {
    width: 100%;
    height: auto;
    transition: var(--transition-slow);
}

.image-frame:hover img {
    transform: scale(1.05);
}

.image-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100%;
    height: 100%;
    border: 3px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    z-index: -1;
}

.image-frame-alt .image-decoration {
    top: 20px;
    right: -20px;
    left: auto;
}

/* Destination Section */
.destination-section {
    position: relative;
    padding: var(--space-4xl) 0;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.destination-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.destination-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.destination-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(61, 44, 31, 0.9) 0%,
        rgba(61, 44, 31, 0.7) 50%,
        rgba(61, 44, 31, 0.4) 100%
    );
}

.destination-content {
    max-width: 100%;
    color: var(--text-light);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-4xl);
    align-items: center;
}

.destination-text {
    max-width: 650px;
}

.destination-countdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(var(--space-4xl) * -0.5);
}

.destination-badge {
    /* Letterspaced editorial kicker — no pill, cream on dark/image background */
    display: inline-block;
    color: rgba(250, 247, 242, 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: var(--space-lg);
}

.destination-content h2 {
    color: var(--text-light);
    margin-bottom: var(--space-lg);
}

.destination-content p {
    opacity: 0.9;
    font-size: 1.125rem;
}

.destination-content .btn {
    margin-top: var(--space-lg);
}

.destination-stats {
    display: flex;
    gap: var(--space-2xl);
    margin: var(--space-2xl) 0;
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-secondary);
}

.destination-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
}

.countdown-item {
    text-align: center;
}

.countdown-number {
    font-family: var(--font-display);
    font-size: clamp(5rem, 10vw, 8rem);
    font-weight: 800;
    line-height: 1;
    color: var(--text-light);
    display: block;
    margin-bottom: var(--space-md);
}

.countdown-label {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    opacity: 0.8;
}

.stat-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* CTA Section */
.cta-section {
    padding: var(--space-4xl) 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../images/cover.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
 }

.cta-content h2 {
    color: var(--text-light);
    margin-bottom: var(--space-md);
}

.cta-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.25rem;
    margin-bottom: var(--space-xl);
}

.cta-section .btn-primary {
    background: var(--color-cream);
    color: var(--color-brown-dark);
}

.cta-section .btn-primary:hover {
    background: var(--color-white);
}

/* Page Hero */
.page-hero {
    padding: calc(var(--space-4xl) + 80px) 0 var(--space-3xl);
    background: linear-gradient(135deg, var(--color-brown-dark) 0%, var(--color-brown) 100%);
    text-align: center;
}

.page-hero-tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.85); /* soft cream */
    margin-bottom: var(--space-md);
}

.page-hero h1 {
    color: var(--text-light);
}

.page-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* About Intro */
.about-intro {
    padding: var(--space-4xl) 0;
}

.about-intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.about-intro-text {
    order: 1;
}

.about-intro-image {
    order: 2;
}

.intro-lead {
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: var(--space-xl);
}

.about-intro-text p {
    color: var(--text-secondary);
    font-size: 1.125rem;
}

/* Values Section */
.values-section {
    padding: var(--space-4xl) 0;
    background: var(--bg-secondary);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.value-card {
    background: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
}

.value-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
}

.value-card h3 {
    margin-bottom: var(--space-md);
}

.value-card p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Team Section */
.team-section {
    padding: var(--space-4xl) 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.team-card {
    text-align: center;
    padding: var(--space-xl);
    background: var(--color-cream-dark);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.team-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
}

.avatar-placeholder {
    font-size: 2.5rem;
}

.team-card h3 {
    font-family: var(--font-body);
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.team-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* Footer */
.footer {
    position: relative;
    color: var(--text-light);
    padding: var(--space-xl) 0;
    font-size: 0.9rem;
    /* Layered "high-end" depth: warm corner glows over a deepened brown gradient */
    background:
        radial-gradient(120% 80% at 15% 0%, rgba(212, 165, 116, 0.14), transparent 55%),
        radial-gradient(100% 90% at 90% 110%, rgba(196, 112, 79, 0.16), transparent 60%),
        linear-gradient(180deg, var(--color-brown) 0%, #3d2c1f 100%);
}

/* Fine printed-grain texture overlay for a tactile, premium feel */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Soft inner top highlight so the footer reads as its own layer */
.footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.footer-container {
    position: relative; /* keep content above texture/highlight layers */
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-md);
}

.footer-nav {
    display: flex;
    gap: var(--space-xl);
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition-fast);
    font-weight: 400;
    position: relative;
    padding-bottom: 3px;
}

.footer-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-terracotta);
    transition: width var(--transition-base);
}

.footer-nav a:hover {
    color: var(--text-light);
    text-decoration: none;
}

.footer-nav a:hover::after {
    width: 100%;
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    transition: var(--transition-fast);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.social-link:hover {
    background: var(--color-terracotta);
    transform: translateY(-2px);
}

.footer-legal {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-md);
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    transition: var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--text-light);
    text-decoration: none;
}

.copyright {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

/* Homepage-specific header text colors */
body.homepage .navbar .logo-text {
    color: #3d2c1f !important;
}

body.homepage .navbar .nav-menu a {
    color: #3d2c1f !important;
}

body.homepage .navbar .nav-highlight {
    color: #ffffff !important;
}

/* Mobile navigation - keep text white on mobile */
@media (max-width: 768px) {
    body.homepage .navbar .nav-menu a {
        color: var(--text-light) !important;
    }

    /* Ensure white text when mobile menu is open, regardless of scroll state */
    .nav-menu.active a {
        color: var(--text-light) !important;
    }
}

/* Homepage-specific title colors */
.homepage-titles .logo-text,
.homepage-titles .destination-content h2,
.homepage-titles .about-section h2,
.homepage-titles .cta-section h2 {
    color: #3d2c1f !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Compact mobile footer */
    .footer {
        padding: var(--space-lg) 0 var(--space-md);
        border-top: 3px solid var(--color-terracotta); /* accent divider */
    }

    .footer-content {
        flex-direction: column;
        gap: var(--space-sm); /* #4: pull social icons closer to nav */
        text-align: center;
        padding-bottom: var(--space-md);
    }

    /* nav links wrap into a centered flow instead of one-per-row */
    .footer-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 1.1rem; /* #5: tighter vertical gap between wrapped rows */
        width: 100%;
    }

    /* Keep all 5 links on a single row on mobile */
    .footer-nav a {
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .footer-legal {
        gap: 0.5rem 1.25rem;
        margin-bottom: var(--space-sm);
        flex-wrap: wrap;
    }

    /* inline legal links with dot dividers */
    .footer-legal a {
        position: relative;
    }

    .footer-legal a:not(:last-child)::after {
        content: "\00b7";
        position: absolute;
        right: -0.78rem;
        color: rgba(255, 255, 255, 0.3);
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}

[data-animate="fade-right"] {
    transform: translateX(-30px);
}

[data-animate="fade-right"].animated {
    transform: translateX(0);
}

[data-animate="fade-left"] {
    transform: translateX(30px);
}

[data-animate="fade-left"].animated {
    transform: translateX(0);
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .about-content,
    .about-intro-content {
        gap: var(--space-2xl);
    }
    
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
    
    .footer-social {
        grid-column: span 2;
    }
    
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: rgba(61, 44, 31, 0.75); /* --color-brown-dark #3d2c1f at 75% opacity */
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-xl);
        transition: var(--transition-base);
        z-index: 999;
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu a,
    .navbar.always-dark .nav-menu a {
        color: var(--text-light);
        font-size: 1.125rem;
    }

    /* Force white text when mobile menu is open, override all other states */
    .navbar .nav-menu.active a,
    .navbar.scrolled .nav-menu.active a,
    .navbar.always-dark .nav-menu.active a {
        color: var(--text-light) !important;
    }

    .navbar.always-dark .logo-text {
        color: var(--color-black);
    }
    
    .navbar.always-dark .menu-toggle span {
        background-color: var(--color-brown-dark);
    }
    
    .hero-bg-img {
        object-fit: cover;
        object-position: center;
        transform: none;
        animation: none;
    }
    
    .about-content,
    .about-intro-content {
        grid-template-columns: 1fr;
    }

    .about-features {
        flex-wrap: wrap;
    }

    .about-image,
    .about-intro-image {
        order: -1;
    }
    
    .destination-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .destination-countdown-wrapper {
        order: -1;
    }

    .countdown-number {
        font-size: clamp(8rem, 25vw, 12rem);
    }

    .destination-stats {
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    .stat {
        flex: 1 1 calc(50% - var(--space-lg));
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .footer-top {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-nav {
        justify-content: center;
    }
    
    .footer-social {
        grid-column: auto;
    }
    
    .social-links {
        justify-content: center;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .team-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-nav {
        gap: 0.5rem 1.1rem;
    }

    .destination-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .stat {
        flex: none;
    }
}

/* ============================================= */
/* NEW PAGE STYLES - Location, Lodging, Oktoberfest */
/* ============================================= */

/* Page Hero Variants */
.page-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.location-hero { background: linear-gradient(135deg, var(--color-sage) 0%, var(--color-brown-dark) 100%); }
.lodging-hero { background: linear-gradient(135deg, var(--color-terracotta) 0%, var(--color-brown) 100%); }
.oktoberfest-hero { background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-brown-dark) 100%); background-position: center bottom; }

.oktoberfest-hero {
    padding: 0;
    min-height: 70vh;
}

.oktoberfest-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.oktoberfest-hero > * {
    position: relative;
    z-index: 2;
}

.page-hero .hero-content { z-index: 2; }
.page-hero .hero-subtitle { font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: var(--space-md); }
.page-hero .hero-title { color: var(--text-light); }
.page-hero .highlight { color: var(--color-amber); }

/* Page Hero Content - text overlay */
.page-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

.page-hero-content h1 {
    color: var(--text-light);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    margin-bottom: var(--space-sm);
}

.page-hero-tag {
    /* Letterspaced editorial kicker — no pill, no container */
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.85); /* soft cream */
    margin-bottom: var(--space-md);
}

/* Marquee Banner */
.marquee-banner {
    overflow: hidden;
    padding: var(--space-lg) 0;
    background: var(--color-cream-dark);
    margin-bottom: var(--space-3xl);
    /* Break out of the max-width container to span the full viewport width */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
.marquee-banner.dark { background: var(--color-brown-dark); color: var(--text-light); }
.marquee-content { display: flex; animation: marquee 20s linear infinite; white-space: nowrap; }
.marquee-content span { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; padding: 0 var(--space-xl); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Location Intro */
.location-intro, .lodging-intro { padding: var(--space-4xl) 0; }
.intro-content { max-width: 800px; margin: 0 auto; text-align: center; }
.large-text { font-size: 1.25rem; line-height: 1.8; margin-bottom: var(--space-xl); }

/* Lodging Intro with Image */
.lodging-intro .intro-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); text-align: left; max-width: 100%; align-items: center; }
.intro-image .image-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.intro-image img { width: 100%; height: 400px; object-fit: cover; }
.intro-text h2 { margin-bottom: var(--space-lg); }

/* Info Cards Grid */
.info-cards-section { padding: var(--space-4xl) 0; background: var(--bg-secondary); }
.info-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-xl); }
.info-card { background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: var(--transition-base); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.info-card-icon { width: 48px; height: 48px; margin-bottom: var(--space-md); color: var(--accent-primary); }
.info-card-icon svg { width: 100%; height: 100%; }
.info-card h3 { font-size: 1.125rem; margin-bottom: var(--space-sm); }
.info-card .highlight-text { color: var(--accent-primary); font-weight: 700; font-size: 1.25rem; margin-bottom: var(--space-xs); }

/* Highlights Section */
.highlights-section { padding: var(--space-4xl) 0; }
.section-title { text-align: center; margin-bottom: var(--space-sm); }
.section-subtitle { text-align: center; color: var(--text-secondary); margin-bottom: var(--space-xl); }
.highlights-grid { display: flex; flex-direction: column; gap: var(--space-3xl); margin-top: var(--space-3xl); }
.highlight-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: center; }
.highlight-card.reverse { direction: rtl; }
.highlight-card.reverse > * { direction: ltr; }
.highlight-image { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
img.highlight-image { display: block; transition: transform var(--transition-slow); }
.highlight-image:hover img.highlight-image { transform: scale(1.06); }
.highlight-number { position: absolute; top: var(--space-md); left: var(--space-md); font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--text-light); opacity: 0.8; text-shadow: 0 2px 10px rgba(0,0,0,0.3); z-index: 1; }
.image-placeholder { width: 100%; height: 300px; background: linear-gradient(135deg, var(--color-sage-light), var(--color-sage)); border-radius: var(--radius-lg); }
.highlight-content h3 { font-size: 1.5rem; margin-bottom: var(--space-md); color: var(--accent-primary); }
.highlight-detail { color: var(--text-secondary); font-style: italic; }

/* Lodging Options */
.lodging-options { padding: var(--space-4xl) 0; background: var(--bg-secondary); }
.lodging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-xl); }
.lodging-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-base); display: flex; flex-direction: column; }
.lodging-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-xl); }
.lodging-card-header { background: linear-gradient(135deg, var(--color-brown-dark), var(--color-brown)); color: var(--text-light); padding: var(--space-xl); text-align: center; }
.bedroom-count { font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1; }
.bedroom-label { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.8; }
.lodging-card-body { padding: var(--space-xl); flex: 1; }
.lodging-card-body h3 { margin-bottom: var(--space-md); color: var(--accent-primary); }
.lodging-features { margin-top: var(--space-md); }
.lodging-features li { padding: var(--space-xs) 0; padding-left: var(--space-lg); position: relative; color: var(--text-secondary); }
.lodging-features li::before { content: '✓'; position: absolute; left: 0; color: var(--color-sage); font-weight: 700; }
.lodging-card-footer { padding: var(--space-lg); border-top: 1px solid var(--color-cream-dark); }
.btn-outline { background: transparent; border: 2px solid var(--color-brown-dark); color: var(--color-brown-dark); width: 100%; }
.btn-outline:hover { background: var(--color-brown-dark); color: var(--text-light); }
.hotel-card .lodging-card-header { background: linear-gradient(135deg, var(--color-terracotta), var(--color-amber)); }

/* Lodging Tips */
.lodging-tips { padding: var(--space-3xl) 0; }
.tips-card { display: flex; gap: var(--space-xl); background: var(--color-white); padding: var(--space-xl); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border-left: 4px solid var(--accent-primary); }
.tips-icon { flex-shrink: 0; width: 48px; height: 48px; color: var(--accent-primary); }
.tips-icon svg { width: 100%; height: 100%; }
.tips-content h3 { margin-bottom: var(--space-md); }
.tips-content ul { list-style: disc; padding-left: var(--space-lg); }
.tips-content li { margin-bottom: var(--space-sm); }

/* FAQ Section */
.faq-section { padding: var(--space-4xl) 0; background: var(--bg-secondary); }
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item { background: var(--color-white); margin-bottom: var(--space-md); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--space-xl); background: none; border: none; cursor: pointer; text-align: left; transition: var(--transition-base); }
.faq-question:hover { background: var(--color-cream-dark); }
.faq-question h3 { font-size: 1.125rem; margin: 0; }
.faq-icon { width: 24px; height: 24px; color: var(--accent-primary); transition: var(--transition-base); flex-shrink: 0; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer { max-height: 2000px; }
.faq-content { padding: 0 var(--space-xl) var(--space-xl); }
.faq-content ul, .info-list { list-style: disc; padding-left: var(--space-lg); margin: var(--space-md) 0; }
.faq-content li { margin-bottom: var(--space-sm); }

/* Transport & Neighborhood Cards */
.transport-card, .reservation-info { background: var(--color-cream-dark); padding: var(--space-lg); border-radius: var(--radius-md); margin: var(--space-lg) 0; transition: var(--transition-base); }
.transport-card:hover, .reservation-info:hover, .neighborhood-card:hover, .flow-option:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.transport-card h4, .reservation-info h4 { color: var(--accent-primary); margin-bottom: var(--space-md); }
.neighborhood-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md); margin: var(--space-lg) 0; }
.neighborhood-card { background: var(--color-cream-dark); padding: var(--space-lg); border-radius: var(--radius-md); transition: var(--transition-base); }
.neighborhood-card h4 { font-size: 1rem; margin-bottom: var(--space-sm); color: var(--color-brown-dark); }
.tip-box { background: linear-gradient(135deg, var(--color-amber), var(--color-terracotta-light)); color: var(--color-brown-dark); padding: var(--space-md); border-radius: var(--radius-md); margin-top: var(--space-lg); }

/* Flow Options */
.flow-options { display: grid; gap: var(--space-lg); }
.flow-option { background: var(--color-cream-dark); padding: var(--space-lg); border-radius: var(--radius-md); transition: var(--transition-base); }
.flow-badge { display: inline-block; color: var(--color-brown-light); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 4px; margin-bottom: var(--space-md); }
.flow-badge.alt { background: var(--color-sage); }
.flow-option .tip { font-style: italic; color: var(--text-secondary); margin-top: var(--space-md); }

/* Wear Section */
.wear-section { margin: var(--space-xl) 0; padding: var(--space-lg); background: var(--color-cream-dark); border-radius: var(--radius-md); }
.wear-section h4 { color: var(--accent-primary); margin-bottom: var(--space-md); }
.shop-list { margin-top: var(--space-md); }

/* CTA Sections */
.lodging-cta {
    padding: var(--space-4xl) 0;
    background: var(--color-brown-dark);
    color: var(--text-light);
    text-align: center;
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('../images/cover.jpg');
    background-size: cover;
    background-position: center top;
}
.cta-content h2 { color: var(--text-light); margin-bottom: var(--space-md); }
.cta-content p { opacity: 0.9; margin-bottom: var(--space-xl); }
.cta-buttons { display: flex; gap: var(--space-md); justify-content: center; flex-wrap: wrap; }
.location-cta .btn-primary, .lodging-cta .btn-primary, .oktoberfest-cta .btn-primary { background: var(--color-cream); color: var(--color-brown-dark); }
.location-cta .btn-primary:hover, .lodging-cta .btn-primary:hover, .oktoberfest-cta .btn-primary:hover { background: var(--color-white); }
.location-cta .btn-secondary, .lodging-cta .btn-secondary, .oktoberfest-cta .btn-secondary { border-color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.95); }
.location-cta .btn-secondary:hover, .lodging-cta .btn-secondary:hover, .oktoberfest-cta .btn-secondary:hover { background: rgba(255, 255, 255, 0.15); color: var(--text-light); border-color: rgba(255, 255, 255, 0.95); }

/* Liquid-glass secondary button over the Oktoberfest "home base" CTA image */
.ok-cta .btn-secondary {
    color: var(--text-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 55%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.18);
}
.ok-cta .btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.16) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px rgba(0, 0, 0, 0.24);
}

/* Mobile Responsive for New Pages */
@media (max-width: 768px) {
    .page-hero {
        min-height: 60vh;
        background-attachment: scroll;
        padding: var(--space-4xl) 0 var(--space-2xl);
    }
    .page-hero-content {
        padding: var(--space-xl) var(--space-md);
    }
    .page-hero-content h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        line-height: 1.15;
    }
    .page-hero-tag {
        font-size: 0.75rem;
    }
    .hero {
        height: 100vh;
    }
    .hero-bg-img {
        object-fit: cover;
        object-position: center;
    }
    .hero-marquee-track span {
        font-size: clamp(1.5rem, 5vw, 2.25rem);
    }
    .lodging-intro .intro-content { grid-template-columns: 1fr; }
    .highlight-card, .highlight-card.reverse { grid-template-columns: 1fr; direction: ltr; }
    .tips-card { flex-direction: column; }
    .marquee-content span { font-size: 1rem; }
    .oktoberfest-hero {
        min-height: 60vh;
    }
}

/* How It Works */
.hiw-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.hiw-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.hiw-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-brown-dark);
    margin-bottom: var(--space-sm);
}

.hiw-subtitle {
    font-family: var(--font-body);
    font-size: clamp(0.875rem, 1.6vw, 1.05rem);
    color: var(--text-secondary);
    line-height: 1.6;
}

.hiw-timeline {
    position: relative;
    padding-left: 56px;
}

.hiw-connector {
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-terracotta), var(--color-amber));
    transform: translateX(-50%);
}

.hiw-item {
    position: relative;
    margin-bottom: var(--space-lg);
}

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

.hiw-dot {
    position: absolute;
    left: -36px;
    top: 22px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-terracotta);
    border: 3px solid var(--color-cream);
    box-shadow: 0 0 0 2px var(--color-terracotta);
    transform: translateX(-50%);
    z-index: 1;
}

.hiw-dot--final {
    background: var(--color-amber);
    box-shadow: 0 0 0 2px var(--color-amber);
}

.hiw-card {
    background: var(--color-white);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.hiw-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.hiw-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-lg) var(--space-xl);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.hiw-trigger-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hiw-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-terracotta);
}

.hiw-label--final {
    color: var(--color-amber);
}

.hiw-card-title {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--color-brown-dark);
}

.hiw-chevron {
    flex-shrink: 0;
    color: var(--color-brown-light);
    transition: transform var(--transition-base);
}

.hiw-trigger[aria-expanded="true"] .hiw-chevron {
    transform: rotate(180deg);
}

.hiw-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.hiw-panel-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: 0 var(--space-xl) var(--space-xl);
}

.hiw-description {
    font-family: var(--font-body);
    font-size: clamp(0.8125rem, 1.5vw, 0.95rem);
    line-height: 1.65;
    color: var(--text-secondary);
    flex: 1;
}

.hiw-panel-img {
    width: 130px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .hiw-section {
        padding: 0 1rem 3rem;
    }

    .hiw-timeline {
        padding-left: 44px;
    }

    .hiw-dot {
        left: -28px;
        width: 16px;
        height: 16px;
    }

    .hiw-connector {
        left: 22px;
    }

    .hiw-trigger {
        padding: var(--space-md) var(--space-lg);
    }

    .hiw-panel-content {
        flex-direction: column-reverse;
        padding: 0 var(--space-lg) var(--space-lg);
    }

    .hiw-panel-img {
        width: 100%;
        height: 160px;
        border-radius: 8px;
    }
}

/* ==========================================================================
   Between-Takeovers Interlude
   The "see you next year" moment that runs while voting is pending.
   ========================================================================== */
.interlude-section {
    padding: var(--space-4xl) 0;
    background: var(--color-brown-dark);
    text-align: center;
}

.interlude-content {
    max-width: 720px;
    margin: 0 auto;
}

.interlude-content .destination-badge {
    margin-bottom: var(--space-md);
}

.interlude-content h2 {
    color: var(--text-light);
    margin-bottom: var(--space-lg);
}

.interlude-content p {
    color: rgba(250, 247, 242, 0.82);
    font-size: 1.0625rem;
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.interlude-content .interlude-lead {
    font-size: 1.25rem;
    color: rgba(250, 247, 242, 0.95);
}

.interlude-content strong {
    color: var(--color-amber);
}

.btn-row-center {
    justify-content: center;
    margin-top: var(--space-xl);
}

.interlude-section .btn-primary {
    background: var(--color-cream);
    color: var(--color-brown-dark);
}

.interlude-section .btn-primary:hover {
    background: var(--color-white);
}

.interlude-section .btn-secondary {
    border-color: rgba(250, 247, 242, 0.5);
    color: var(--color-cream);
}

.interlude-section .btn-secondary:hover {
    background: rgba(250, 247, 242, 0.12);
    border-color: var(--color-cream);
}

/* ==========================================================================
   Status Track
   Four-stage progress rail showing where we are in the yearly cycle.
   Update the .is-done / .is-active classes in the markup as the year moves on.
   ========================================================================== */
.status-section {
    padding: var(--space-4xl) 0;
    background: var(--color-cream-dark);
}

.status-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
    position: relative;
}

/* The connecting rail sits behind the markers. */
.status-track::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--color-brown-light);
    opacity: 0.3;
}

.status-step {
    position: relative;
    text-align: center;
    padding: 0 var(--space-xs);
}

.status-marker {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-cream-dark);
    border: 2px solid var(--color-brown-light);
    margin: 0 auto var(--space-lg);
    position: relative;
    z-index: 1;
    transition: var(--transition-base);
}

.status-step.is-done .status-marker {
    background: var(--color-sage);
    border-color: var(--color-sage);
}

.status-step.is-active .status-marker {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    box-shadow: 0 0 0 6px rgba(196, 112, 79, 0.18);
}

.status-step h3 {
    font-size: 1.0625rem;
    margin-bottom: var(--space-xs);
    color: var(--color-brown-light);
}

.status-step.is-done h3,
.status-step.is-active h3 {
    color: var(--color-brown-dark);
}

.status-step p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.status-step.is-active p {
    color: var(--color-brown);
}

@media (max-width: 768px) {
    /* Stack into a vertical rail so the steps stay readable on phones. */
    .status-track {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: left;
    }

    .status-track::before {
        top: 8px;
        bottom: 8px;
        left: 10px;
        right: auto;
        width: 2px;
        height: auto;
    }

    .status-step {
        text-align: left;
        padding-left: var(--space-2xl);
    }

    .status-marker {
        position: absolute;
        left: 0;
        top: 0;
        margin: 0;
    }
}

/* ==========================================================================
   Coming-Soon Placeholder Cards
   Used on lodging.html while we wait on the destination vote. Remove the
   .is-placeholder class and the banner span once real options go live.
   ========================================================================== */
.lodging-card.is-placeholder {
    position: relative;
    box-shadow: var(--shadow-sm);
}

/* Grey the content back without hiding it, so the shape of the page still reads. */
.lodging-card.is-placeholder .lodging-card-header,
.lodging-card.is-placeholder .lodging-card-body {
    filter: grayscale(1);
    opacity: 0.55;
}

/* Placeholder cards are not interactive, so drop the hover lift. */
.lodging-card.is-placeholder:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

.coming-soon-banner {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    z-index: 2;
    background: var(--color-terracotta);
    color: var(--color-cream);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
}

/* Inert stand-in for the real "Explore Options" link. */
.btn.is-disabled {
    width: 100%;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.btn.is-disabled::after,
.btn.is-disabled::before {
    display: none;
}

/* Single-column intro for the placeholder page (no paired image). */
.intro-content-single {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.intro-content-single h2 {
    margin-bottom: var(--space-lg);
}

/* Print Styles */
@media print {
    .navbar, .scroll-indicator, footer { display: none; }
    .hero { min-height: auto; padding: var(--space-xl); }
}
/* ==========================================================================
   Year Rail - the slider that moves between takeover years
   Markup is injected by js/year-rail.js, so every page only loads the script.
   The rail is docked dead centre under the header rather than sitting in the
   nav row, so it lands on the same pixel on every page no matter how many
   links the nav above it happens to carry.
   ========================================================================== */

.navbar {
    --rail-ink: var(--color-cream);
    --rail-track: rgba(250, 247, 242, 0.32);
    --rail-dim: rgba(250, 247, 242, 0.7);
}

.navbar.scrolled,
.navbar.always-dark {
    --rail-ink: var(--color-brown-dark);
    --rail-track: rgba(61, 44, 31, 0.2);
    --rail-dim: rgba(61, 44, 31, 0.55);
}

/* A second row of the header, not a layer floating over the page. The navbar's
   own background grows to cover it, so the rail is transparent over the hero and
   picks up the cream and the blur on scroll exactly like the nav links above it.
   Spanning the full width is also what keeps the rail centred on the viewport
   rather than on whatever space the nav links happen to leave over. */
.year-rail-dock {
    display: flex;
    justify-content: center;
    margin-top: 0.375rem;
    pointer-events: none;
}

/* No chrome of its own. Over the hero it carries a soft shadow so the years
   stay legible against the photograph, and that shadow is dropped the moment
   the navbar picks up its cream background. */
.year-rail {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xl);
    padding: 0.5rem var(--space-lg) 0.4375rem;
    pointer-events: auto;
}

.navbar:not(.scrolled):not(.always-dark) .year-rail-year {
    text-shadow: 0 1px 8px rgba(61, 44, 31, 0.65);
}

.navbar:not(.scrolled):not(.always-dark) .year-rail-track,
.navbar:not(.scrolled):not(.always-dark) .year-rail-dot {
    box-shadow: 0 1px 4px rgba(61, 44, 31, 0.35);
}

.year-rail-track,
.year-rail-fill {
    position: absolute;
    top: 13px;
    height: 2px;
    border-radius: var(--radius-full);
}

.year-rail-track {
    background: var(--rail-track);
    transition: background var(--transition-base);
}

.year-rail-fill {
    background: var(--accent-primary);
    transition: width var(--transition-spring), left var(--transition-spring);
}

.year-rail-stop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-decoration: none;
    padding-bottom: 2px;
}

/* The dots are notches on the track now. The ball is what tells you the year. */
.year-rail-dot {
    width: 9px;
    height: 9px;
    margin-top: 1.5px;
    border-radius: var(--radius-full);
    background: transparent;
    border: 2px solid var(--rail-track);
    transition: border-color var(--transition-base);
}

.year-rail-year {
    font-family: var(--font-geometric);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--rail-dim);
    transition: color var(--transition-base), font-weight var(--transition-base);
}

.year-rail-stop:hover .year-rail-year {
    color: var(--rail-ink);
}

.year-rail-stop.is-active .year-rail-dot {
    border-color: var(--accent-primary);
}

.year-rail-stop.is-active .year-rail-year {
    color: var(--rail-ink);
    font-weight: 700;
}

.year-rail-stop:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* The ball you drag. Sits on the track, centred on whichever year it is nearest. */
.year-rail-thumb {
    position: absolute;
    top: 14px;
    left: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    transform: translate(-50%, -50%);
    border: none;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    box-shadow: 0 0 0 4px rgba(196, 112, 79, 0.22), var(--shadow-sm);
    cursor: grab;
    touch-action: none;
    transition: left var(--transition-spring), box-shadow var(--transition-base),
                transform var(--transition-base);
}

/* A finger is wider than 18px, so give it something bigger to catch. */
.year-rail-thumb::before {
    content: '';
    position: absolute;
    inset: -11px;
    border-radius: var(--radius-full);
}

.year-rail-thumb:hover {
    box-shadow: 0 0 0 6px rgba(196, 112, 79, 0.28), var(--shadow-sm);
}

.year-rail-thumb:focus-visible {
    outline: 2px solid var(--color-cream);
    outline-offset: 3px;
}

.navbar.scrolled .year-rail-thumb:focus-visible,
.navbar.always-dark .year-rail-thumb:focus-visible {
    outline-color: var(--color-brown-dark);
}

/* Mid-drag the ball tracks the finger exactly, so nothing may lag behind it.
   `is-init` is the same idea at load: the ball is placed, not animated in. */
.year-rail.is-dragging .year-rail-thumb,
.year-rail.is-dragging .year-rail-fill,
.year-rail.is-init .year-rail-thumb,
.year-rail.is-init .year-rail-fill {
    transition: none;
}

.year-rail.is-dragging .year-rail-thumb {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: 0 0 0 7px rgba(196, 112, 79, 0.3), var(--shadow-md);
}

/* ==========================================================================
   Page transition - the slide and the cross-fade are one motion
   The header and the rail hold still while main and the footer fade out, so
   the rail reads as the fixed point you are sliding the years past. The
   `js-nav` class is set by a tiny inline script in each page's <head>, which
   also clears the state on a timer if year-rail.js never runs.
   ========================================================================== */

html.js-nav main,
html.js-nav .footer {
    opacity: 0;
}

html.js-nav.is-ready main,
html.js-nav.is-ready .footer {
    opacity: 1;
    transition: opacity 420ms ease;
}

html.js-nav.is-leaving main,
html.js-nav.is-leaving .footer {
    opacity: 0;
    transition: opacity 340ms ease;
}

/* While the ball is being dragged the fade is driven straight off the drag
   position, so it has to follow the finger with no transition of its own. */
html.js-nav.is-scrubbing main,
html.js-nav.is-scrubbing .footer {
    opacity: var(--page-fade, 1);
    transition: none;
}

/* Year stills - one flattened picture of each takeover, cross-faded as you drag
   the rail so the years in between are visible on the way past instead of the
   screen going empty. They sit above the fading page but below the navbar and
   the rail, which stay put and stay usable for the whole drag. */
.year-shots {
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
}

.year-shot {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-color: var(--bg-primary);
    background-position: top center;
    background-repeat: no-repeat;
    /* Shot at the top of each page at desktop width. Cover keeps them filling
       the viewport at any size, anchored to the top so the hero stays the part
       you actually see. */
    background-size: cover;
}

/* Released: let the stills ease out instead of snapping. */
.year-shots.is-settling .year-shot {
    transition: opacity 320ms ease;
}

/* Year headers - stand-in nav menus for the other years, stacked on top of the
   real one and cross-faded with the stills so the links on screen always belong
   to the year behind them. Only the real nav underneath is clickable. */
/* Anchored to the real menu's own row, not the container's middle: the rail
   docks below the nav row, and centring here would drop the stand-ins onto it. */
.year-navs {
    position: absolute;
    top: 0;
    right: var(--space-lg);
    height: 0;
    pointer-events: none;
}

.year-navs .year-nav {
    /* Stacked in one spot: each sits on the same origin and only opacity
       separates them, so the swap is a cross-fade and not a reflow. */
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    white-space: nowrap;
    opacity: 0;
}

/* The real menu eases too, so the handover back to it matches the stills. */
.year-navs.is-settling .year-nav,
.nav-container:has(.year-navs.is-settling) .nav-menu {
    transition: opacity 320ms ease;
}

/* The archive bar names the year you are actually on, so it would be lying
   about whichever year the stills are showing. Hide it for the drag. */
html.js-nav.is-scrubbing .archive-notice,
html.js-nav.is-leaving .archive-notice {
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

/* Capture mode - stills are shot with ?shot=1 so a page does not bake its own
   rail and archive bar into the picture and show them doubled mid-drag. */
html.is-shot .year-rail-dock,
html.is-shot .archive-notice,
html.is-shot .navbar {
    display: none !important;
}

/* The stand-in headers only make sense next to a visible desktop nav. Below the
   nav breakpoint the real menu is behind the hamburger, so there is nothing to
   swap and a stack of absolute menus would just sit over the logo. */
@media (max-width: 768px) {
    .year-navs {
        display: none;
    }
}

/* Quiet header reminder that this is an archived event page. */
.archive-notice {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    padding: 0.75rem var(--space-lg);
    background: rgba(250, 247, 242, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(61, 44, 31, 0.14);
}

.archive-notice-tag {
    font-family: var(--font-geometric);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cream);
    background: var(--color-brown-dark);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-full);
}

.archive-notice p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-brown-dark);
}

.archive-notice a {
    font-family: var(--font-geometric);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brown-dark);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: var(--transition-fast);
}

.archive-notice a:hover {
    color: #1478a2;
    border-bottom-color: #1478a2;
}

@media (max-width: 768px) {
    .year-rail {
        gap: var(--space-xl);
        padding: 0.4375rem var(--space-md) 0.375rem;
    }

    .year-rail-year {
        font-size: 0.6875rem;
    }

    .year-rail-dot {
        width: 8px;
        height: 8px;
        margin-top: 1px;
    }

    .year-rail-track,
    .year-rail-fill {
        top: 11px;
    }

    .year-rail-thumb {
        top: 12px;
        width: 16px;
        height: 16px;
    }

    /* 16px of ball plus 28px of padding clears the 44px touch target. */
    .year-rail-thumb::before {
        inset: -14px;
    }

    .archive-notice {
        padding: 0.625rem var(--space-md);
        text-align: center;
    }

    .archive-notice p {
        font-size: 0.8125rem;
        width: 100%;
        order: 3;
    }
}

/* Nobody asked to be moved around. Hold everything still. */
@media (prefers-reduced-motion: reduce) {
    html.js-nav main,
    html.js-nav .footer,
    html.js-nav.is-leaving main,
    html.js-nav.is-leaving .footer {
        opacity: 1;
        transition: none;
    }

    /* No scrubbed cross-fade either: the drag is already disabled, and a still
       sitting over the page would only hide it. */
    .year-shots,
    .year-navs {
        display: none;
    }

    .year-rail-fill,
    .year-rail-dot,
    .year-rail-thumb {
        transition: none;
    }

    .year-rail-thumb {
        cursor: default;
    }
}