/* === Color Reference ===
   #e2e8f0 #f5f0eb #352f2b #4a5568 #dfe6e9
   #8395a7 #6b5b4e #faf8f5 #1a202c #2d3436
   #7c9a82 #c4956a
=== */

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    color: #352f2b;
    background-color: #1a202c;
    overflow-x: hidden;
}

/* === Leather Texture Background === */
.leather-texture {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-color: #1a202c;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(45, 52, 54, 0.4) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(45, 52, 54, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(26, 32, 44, 0.8) 0%, transparent 100%);
}

.leather-texture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-radial-gradient(circle at 2px 2px, transparent 0, rgba(53, 47, 43, 0.03) 1px, transparent 2px),
        repeating-radial-gradient(circle at 4px 4px, transparent 0, rgba(45, 52, 54, 0.02) 2px, transparent 4px);
    background-size: 8px 8px, 12px 12px;
}

/* === Progress Bar === */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, #6b5b4e, #8395a7);
    z-index: 1000;
    transition: width 0.1s linear;
}

/* === Propositions === */
.proposition {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    position: relative;
    padding: 2rem;
}

/* === Proposition Cards === */
.proposition-card {
    position: relative;
    max-width: 680px;
    width: 100%;
    background-color: #faf8f5;
    border: 1px solid #dfe6e9;
    border-radius: 2px;
    padding: clamp(2.5rem, 5vw, 4rem);
    box-shadow:
        0 1px 3px rgba(53, 47, 43, 0.08),
        0 8px 24px rgba(26, 32, 44, 0.12);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.proposition-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Ink bleed border effect */
.proposition-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid rgba(107, 91, 78, 0.15);
    border-radius: 2px;
    filter: url(#roughen);
    pointer-events: none;
}

/* === Typography === */
.proposition-number {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 0.85rem;
    color: #8395a7;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.proposition-title {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: #352f2b;
    margin-bottom: 1.5rem;
}

.proposition-body {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    line-height: 1.75;
    color: #4a5568;
    max-width: 55ch;
}

/* === Foxing Spots === */
.foxing-spot {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 91, 78, 0.08) 0%, rgba(107, 91, 78, 0.03) 50%, transparent 70%);
    pointer-events: none;
}

.spot-1 { width: 80px; height: 80px; top: 15%; right: 8%; }
.spot-2 { width: 45px; height: 45px; bottom: 20%; left: 5%; }
.spot-3 { width: 60px; height: 60px; top: 10%; left: 12%; }
.spot-4 { width: 90px; height: 90px; bottom: 15%; right: 10%; }
.spot-5 { width: 55px; height: 55px; top: 25%; right: 15%; }
.spot-6 { width: 35px; height: 35px; bottom: 30%; left: 10%; }

/* === Ink Bleed === */
.ink-bleed {
    position: absolute;
    bottom: 0;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(107, 91, 78, 0.2) 20%,
        rgba(107, 91, 78, 0.35) 50%,
        rgba(107, 91, 78, 0.2) 80%,
        transparent 100%
    );
    filter: blur(0.5px);
}

/* === Leaf Veins (SVG-like with CSS) === */
.leaf-vein {
    position: absolute;
    width: 200px;
    height: 300px;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 300'%3E%3Cpath d='M100 0 L100 300 M100 50 L60 90 M100 80 L140 120 M100 120 L50 170 M100 160 L150 200 M100 200 L70 250 M100 240 L130 280 M60 90 L40 110 M140 120 L160 145 M50 170 L30 200 M150 200 L170 225' stroke='%23352f2b' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.vein-1 { top: 10%; left: 5%; transform: rotate(-15deg); }
.vein-2 { bottom: 5%; right: 3%; transform: rotate(10deg); }
.vein-3 { top: 15%; right: 8%; transform: rotate(5deg); }
.vein-4 { bottom: 10%; left: 4%; transform: rotate(-8deg); }

/* === QED Card === */
.qed-card {
    border-color: rgba(107, 91, 78, 0.3);
}

.qed-mark {
    position: absolute;
    bottom: 1.5rem;
    right: 2rem;
    font-size: 2rem;
    color: #6b5b4e;
    opacity: 0.6;
}

/* === Responsive === */
@media (max-width: 768px) {
    .proposition-card {
        padding: 2rem 1.5rem;
    }

    .leaf-vein {
        display: none;
    }
}