/* martialaw.quest - High Contrast Duotone Brand */
/* Colors: #0A0A0A, #1A0A0A, #E8272C, #E8E0D6 */
/* Fonts: Anton, Spectral, Space Mono */

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

html {
    scroll-behavior: auto;
}

body {
    font-family: 'Spectral', serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.75;
    color: #E8E0D6;
    background: #0A0A0A;
    overflow-x: hidden;
}

/* Sections */
.section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Section Number Watermarks */
.section-number {
    position: absolute;
    top: 40px;
    right: 60px;
    font-family: 'Anton', sans-serif;
    font-size: 200px;
    opacity: 0.08;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

/* Dark Sections (Law) */
.section-dark {
    background: #0A0A0A;
    color: #E8E0D6;
}

.section-dark .section-number {
    color: #E8272C;
}

.section-dark .section-heading {
    color: #E8272C;
}

.section-dark .pull-quote p {
    color: #E8272C;
}

/* Crimson Sections (Martial) */
.section-crimson {
    background: #E8272C;
    color: #0A0A0A;
}

.section-crimson .section-number {
    color: #0A0A0A;
}

.section-crimson .section-heading {
    color: #0A0A0A;
}

.section-crimson .section-body p {
    color: #1A0A0A;
}

.section-crimson .pull-quote p {
    color: #0A0A0A;
    border-left-color: #0A0A0A;
}

/* Legal Column (narrow, centered) */
.legal-column {
    max-width: 560px;
    margin: 0 auto;
    padding: 80px 24px;
}

/* Martial Column (wider) */
.martial-column {
    max-width: 760px;
    margin: 0 auto;
    padding: 80px 24px;
}

/* Headings */
.section-heading {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 72px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 40px;
}

/* Body Text */
.section-body p {
    margin-bottom: 20px;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.section-dark .section-body p {
    color: #E8E0D6;
    opacity: 0.85;
}

/* Pull Quotes */
.pull-quote {
    margin: 40px 0;
    padding: 0;
}

.pull-quote p {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    padding-left: 24px;
    border-left: 3px solid #E8272C;
}

/* Opening Section */
#opening {
    justify-content: center;
    align-items: center;
}

.opening-content {
    text-align: center;
}

.opening-title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 120px;
    color: #E8272C;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.title-underline {
    width: 200px;
    height: 3px;
    background: #E8272C;
    margin: 24px auto;
    transform: scaleX(0);
    transition: transform 400ms ease-out;
}

.title-underline.visible {
    transform: scaleX(1);
}

.opening-subtitle {
    font-family: 'Spectral', serif;
    font-weight: 400;
    font-size: 20px;
    color: #E8E0D6;
    opacity: 0.6;
    letter-spacing: 0.04em;
    margin-top: 8px;
}

/* Mono Text */
.mono-text {
    font-family: 'Space Mono', monospace;
}

/* Closing Section */
.closing-section {
    justify-content: center;
    align-items: center;
}

.closing-content {
    text-align: center;
}

.closing-heading {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 72px;
    color: #0A0A0A;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 0.95;
    margin-bottom: 24px;
}

.closing-line {
    width: 80px;
    height: 3px;
    background: #0A0A0A;
    margin: 0 auto 24px;
}

.closing-text {
    font-size: 14px;
    color: #0A0A0A;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

/* Fade Reveal */
.fade-reveal {
    opacity: 0;
    transition: opacity 400ms ease-in;
}

.fade-reveal.visible {
    opacity: 1;
}

/* Hover pulse for pull quotes */
.pull-quote:hover p {
    text-shadow: 0 0 40px rgba(232, 39, 44, 0.15);
}

/* Responsive */
@media (max-width: 768px) {
    .opening-title {
        font-size: 64px;
    }

    .section-heading {
        font-size: 48px;
    }

    .section-number {
        font-size: 120px;
        right: 20px;
        top: 20px;
    }

    .pull-quote p {
        font-size: 24px;
    }

    .legal-column,
    .martial-column {
        padding: 60px 20px;
    }

    .closing-heading {
        font-size: 48px;
    }
}