/* ==========================================================================
   VINTAGE MARQUEE EMBEDDED ENGINE STYLE SHEET
   ========================================================================== */

/* FIXED: Smoothly scrolls the window viewport when internal navigation links are clicked */
html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* FIXED: Using clean, built-in Mac/PC geometric san-serif weights */
    font-family: 'Century Gothic', system-ui, -apple-system, sans-serif;
    background-color: #fcfaf2; 
    color: #1e1e1e;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 6%;
    background-color: #fcfaf2;
    border-bottom: 2px solid #1e1e1e;
}

.logo {
    /* FIXED: Directly targets pre-loaded system stencil fonts to avoid browser blocks */
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1e1e1e;
}

nav a {
    text-decoration: none;
    color: #4a4a4a;
    margin-left: 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

nav .btn {
    background-color: #1e1e1e;
    color: #fcfaf2;
    padding: 0.6rem 1.4rem;
    font-weight: 700;
    border: 2px solid #1e1e1e;
}

.split-viewport {
    display: flex;
    min-height: 82vh; 
    border-bottom: 2px solid #1e1e1e;
}

.split-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 8%;
}

.host-side {
    background-color: #181c1a; 
    color: #fcfaf2;
    border-right: 2px solid #1e1e1e;
}

.advertiser-side {
    background-color: #e5a93c; 
    color: #181c1a;
}

.side-content {
    max-width: 480px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.split-side h2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}
.host-side h2 { color: #e5a93c; }
.advertiser-side h2 { color: #181c1a; }

.vintage-divider {
    width: 40px;
    height: 2px;
    background-color: currentColor;
    margin: 0 auto 1.5rem auto;
}

.split-side h3 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 3.2rem;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #ffffff;
    /* FIXED: Prevent word splitting and push onto adjacent line profiles if viewport is restricted */
    white-space: nowrap; 
}
.advertiser-side h3 { color: #181c1a; }

.split-side p {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.host-side p { color: #cbd5e1; }
.advertiser-side p { color: #2d302e; }

.btn-alignment-wrapper {
    margin-top: auto; 
    padding-top: 1rem;
    width: 100%;
}

.action-btn {
    display: inline-block;
    text-decoration: none;
    font-family: 'Impact', 'Arial Black', sans-serif;
    padding: 1.1rem 2.6rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all 0.2s ease;
    border-radius: 0;
    border: none;
    width: auto;
    
    /* FIXED: Unified both block buttons to share a consistent high-end ivory text color */
    color: #fcfaf2 !important; 
    background-color: #181c1a;
}

.action-btn:hover {
    background-color: #fcfaf2;
    color: #181c1a !important;
    transform: translateY(-2px);
}

.digital-section {
    padding: 8rem 6%;
    background-color: #181c1a;
    color: #fcfaf2;
    border-bottom: 2px solid #1e1e1e;
}

.container { max-width: 900px; margin: 0 auto; }
.section-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; color: #e5a93c; display: block; margin-bottom: 1rem; }

.digital-section h2 {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.digital-section p { color: #cbd5e1; font-size: 1.15rem; line-height: 1.6; }

.contact-section { padding: 8rem 6%; text-align: center; background-color: #fcfaf2; }
.contact-section h2 { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 3rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
.contact-section p { color: #4a4a4a; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.05em; margin-bottom: 2.5rem; }

.email-link {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 2rem;
    color: #e5a93c;
    text-decoration: none;
    letter-spacing: 0.02em;
    border: 3px solid #181c1a;
    background-color: #181c1a;
    padding: 1rem 2rem;
    display: inline-block;
    max-width: 100%;
    word-break: break-all; 
    overflow-wrap: break-word;
}

.email-link:hover { background-color: transparent; color: #181c1a; }
footer { text-align: center; padding: 3.5rem 2rem; background-color: #fcfaf2; color: #7a7a7a; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-top: 1px solid #e2e8f0; }

.subpage-hero { padding: 8rem 6% 5rem 6%; border-bottom: 2px solid #1e1e1e; background-color: #faf6f0; }
.subpage-hero h1 { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 3.5rem; letter-spacing: 0.04em; text-transform: uppercase; color: #1e1e1e; margin-bottom: 1.5rem; max-width: 850px; line-height: 1.1; }
.subpage-hero p { font-size: 1.25rem; color: #4a4a4a; max-width: 680px; }
.category-tag { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.1em; color: #e5a93c; display: block; margin-bottom: 1rem; }
.details-section { padding: 7rem 6%; background-color: #ffffff; }
.detail-block { max-width: 750px; margin-bottom: 4rem; }
.detail-block h3 { font-family: 'Impact', 'Arial Black', sans-serif; font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.02em; color: #1e1e1e; margin-bottom: 0.85rem; }
.detail-block p { color: #4a4a4a; font-size: 1.08rem; line-height: 1.6; }

@media (max-width: 968px) {
    .split-viewport { flex-direction: column !important; min-height: auto !important; }
    .host-side { border-right: none !important; }
    .split-side { padding: 6rem 10% !important; width: 100% !important; }
    .split-side h3 { font-size: 2.6rem !important; white-space: normal; }
    .action-btn { display: block !important; width: 100% !important; }
    .email-link { font-size: 1.4rem !important; padding: 1rem !important; }
}

@media (max-width: 768px) {
    nav a { display: none !important; }
    nav a.btn { display: inline-block !important; }
    header { padding: 1.5rem 6% !important; }
    .subpage-hero h1 { font-size: 2.4rem !important; }
    .subpage-hero, .details-section, .digital-section, .contact-section { padding: 5rem 6% !important; }
}