/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

/* ========================================
   Natural Rock Climbing Topo Aesthetic
   ======================================== */

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

/* ========================================
   Password Gate
   ======================================== */

.password-gate {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-gate.hidden {
    display: none;
}

.password-box {
    text-align: center;
    max-width: 320px;
    width: 90%;
}

.password-box h2 {
    font-size: 2.4em;
    margin-bottom: 12px;
}

.password-box p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #9a9088;
    font-size: 0.9em;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.password-box input {
    width: 100%;
    padding: 12px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    background: #2a2520;
    border: 1px solid #3a3530;
    border-radius: 3px;
    color: #e8e0d4;
    outline: none;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.1em;
}

.password-box input:focus {
    border-color: #5a4f42;
}

.password-box button {
    width: 100%;
    padding: 12px;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.95em;
    background: #3a3530;
    border: 1px solid #4a4540;
    border-radius: 3px;
    color: #e8e0d4;
    cursor: pointer;
    transition: background 0.2s ease;
}

.password-box button:hover {
    background: #4a4540;
}

.password-error {
    color: #a05a4a !important;
    font-size: 0.85em !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    visibility: hidden;
}

.password-error.visible {
    visibility: visible;
}

/* SVG noise filter for texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: #1a1a1a;
    min-height: 100vh;
    overflow-x: hidden;
    color: #e8e0d4;
}

.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 20px 16px;
}

/* ========================================
   Header — Climbing guidebook title page
   ======================================== */

.header {
    text-align: center;
    color: #e8e0d4;
    padding: 32px 24px 28px;
    margin-bottom: 24px;
    border-bottom: 1px solid #3a3530;
}

.header h1 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 8px;
    color: #f0ebe3;
    letter-spacing: 0.01em;
}

.subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.9em;
    font-weight: 300;
    color: #9a9088;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reunion-date {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1em;
    font-weight: 400;
    margin-top: 8px;
    padding: 8px 20px;
    display: inline-block;
    color: #c4b9a8;
    border: 1.5px solid #5a4f42;
    border-radius: 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant: small-caps;
}

/* ========================================
   Route Container — The rock face
   ======================================== */

.route-container {
    position: relative;
    background: #2a2520;
    border-radius: 4px;
    padding: 24px 16px;
    min-height: 80vh;
    overflow: hidden;

    /* Layered stone strata — irregular spacing for geological feel */
    background-image:
        /* Primary strata — wide spacing */
        repeating-linear-gradient(
            178deg,
            transparent,
            transparent 95px,
            rgba(58, 50, 40, 0.35) 95px,
            rgba(58, 50, 40, 0.35) 96px,
            transparent 96px,
            transparent 220px,
            rgba(48, 42, 34, 0.25) 220px,
            rgba(48, 42, 34, 0.25) 221px,
            transparent 221px,
            transparent 340px
        ),
        /* Secondary thinner strata — offset */
        repeating-linear-gradient(
            181deg,
            transparent,
            transparent 160px,
            rgba(65, 55, 42, 0.15) 160px,
            rgba(65, 55, 42, 0.15) 160.5px,
            transparent 160.5px,
            transparent 410px
        ),
        /* Main vertical crack — slightly angled */
        linear-gradient(
            89deg,
            transparent 30%,
            rgba(18, 15, 12, 0.25) 30%,
            rgba(18, 15, 12, 0.35) 30.3%,
            rgba(18, 15, 12, 0.15) 30.6%,
            transparent 31%
        ),
        /* Hairline crack */
        linear-gradient(
            91deg,
            transparent 72%,
            rgba(18, 15, 12, 0.12) 72%,
            rgba(18, 15, 12, 0.12) 72.2%,
            transparent 72.2%
        ),
        /* Diagonal fracture */
        linear-gradient(
            155deg,
            transparent 45%,
            rgba(18, 15, 12, 0.08) 45%,
            rgba(18, 15, 12, 0.08) 45.15%,
            transparent 45.15%
        ),
        /* Base stone — warm undulation */
        linear-gradient(
            180deg,
            #2e2822 0%,
            #2b2621 15%,
            #28231e 35%,
            #2a2520 55%,
            #27221d 75%,
            #231e19 100%
        );
}

/* Grain overlay on the rock face */
.route-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    /* Grain texture + edge vignette combined */
    background:
        /* Vignette — dark edges, lighter center */
        radial-gradient(
            ellipse 80% 70% at 50% 50%,
            transparent 40%,
            rgba(15, 12, 10, 0.4) 100%
        ),
        /* Top fade */
        linear-gradient(
            180deg,
            rgba(15, 12, 10, 0.5) 0%,
            transparent 8%
        ),
        /* Bottom fade */
        linear-gradient(
            0deg,
            rgba(15, 12, 10, 0.5) 0%,
            transparent 6%
        );
}

/* Separate grain layer */
.route-container .route::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 512px 512px;
    pointer-events: none;
    z-index: 0;
}

/* Chalk line route — dashed, hand-drawn feel */
.route-container::after {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 28px;
    width: 2px;
    background: repeating-linear-gradient(
        180deg,
        rgba(210, 200, 180, 0.18),
        rgba(210, 200, 180, 0.18) 10px,
        transparent 10px,
        transparent 15px,
        rgba(195, 185, 165, 0.12) 15px,
        rgba(195, 185, 165, 0.12) 22px,
        transparent 22px,
        transparent 30px,
        rgba(210, 200, 180, 0.08) 30px,
        rgba(210, 200, 180, 0.08) 33px,
        transparent 33px,
        transparent 42px
    );
    pointer-events: none;
    z-index: 3;
}

.climber {
    position: absolute;
    font-size: 1.8em;
    z-index: 100;
    transition: bottom 0.5s ease, left 0.5s ease;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6));
}

.route {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    padding: 10px 0;
    z-index: 2;
}

/* ========================================
   Pitch Cards — Etched into the rock
   ======================================== */

.pitch {
    position: relative;
    background: rgba(38, 34, 28, 0.4);
    border-radius: 3px;
    padding: 16px 18px 16px 48px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Embossed / carved-into-rock effect */
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    border-left: 1px solid rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    border-right: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Climbing hold — rough, asymmetric, imperfect */
.pitch::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 15px;
    background: #4a4035;
    border-radius: 42% 55% 40% 58%;
    left: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(-15deg);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.05),
        inset -1px -2px 3px rgba(0, 0, 0, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.25);
}

/* Unlocked — warm amber chalk highlight */
.pitch.unlocked {
    background: rgba(65, 55, 40, 0.55);
    border-top-color: rgba(0, 0, 0, 0.15);
    border-bottom-color: rgba(180, 155, 110, 0.06);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(160, 135, 90, 0.08);
}

.pitch.unlocked::before {
    background: #8a7255;
    border-color: rgba(100, 75, 40, 0.4);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.12),
        inset -1px -2px 3px rgba(0, 0, 0, 0.3),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

.pitch.unlocked:hover {
    background: rgba(75, 62, 45, 0.65);
    transform: translateX(3px);
}

/* Completed — subtle dusty olive, quieter than unlocked */
.pitch.completed {
    background: rgba(48, 52, 40, 0.35);
    border-top-color: rgba(0, 0, 0, 0.12);
    border-bottom-color: rgba(120, 135, 95, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pitch.completed::before {
    background: #5e6b4e;
    border-color: rgba(60, 70, 45, 0.3);
    box-shadow:
        inset 1px 1px 2px rgba(255, 255, 255, 0.06),
        inset -1px -2px 3px rgba(0, 0, 0, 0.3);
}

/* Locked — sunk into the rock, barely there */
.pitch.locked {
    opacity: 0.25;
    cursor: not-allowed;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.25);
}

.pitch.locked::before {
    background: #33302b;
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Hold shape variation — each hold looks different */
.pitch:nth-child(3n+1)::before {
    border-radius: 50% 40% 55% 45%;
    transform: translateY(-50%) rotate(-8deg);
    width: 17px;
    height: 14px;
}

.pitch:nth-child(3n+2)::before {
    border-radius: 35% 55% 48% 42%;
    transform: translateY(-50%) rotate(5deg);
    width: 20px;
    height: 14px;
}

.pitch:nth-child(5n)::before {
    border-radius: 45% 38% 52% 48%;
    transform: translateY(-50%) rotate(-20deg);
    width: 16px;
    height: 17px;
}

.pitch:nth-child(7n)::before {
    border-radius: 55% 42% 38% 50%;
    transform: translateY(-50%) rotate(12deg);
    width: 19px;
    height: 13px;
}

.pitch-info {
    flex: 1;
}

.pitch-number {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.3em;
    font-weight: 700;
    color: #e0d8cc;
    letter-spacing: -0.01em;
}

.pitch.locked .pitch-number {
    color: #7a7268;
}

.pitch-date {
    font-family: 'Inter', sans-serif;
    color: #8a8078;
    font-size: 0.78em;
    font-weight: 300;
    margin-top: 2px;
    letter-spacing: 0.02em;
}

.pitch-status {
    font-size: 1.3em;
    filter: grayscale(0.2);
    opacity: 0.8;
}

.pitch.locked .pitch-status {
    font-size: 1em;
    opacity: 0.4;
}

/* ========================================
   Modal — Field notes journal
   ======================================== */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 9, 8, 0.85);
    animation: fadeIn 0.25s ease;
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: #f5f0e8;
    border-radius: 4px;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.25s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* Paper texture */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.02'/%3E%3C/svg%3E");
    background-color: #f5f0e8;
    background-repeat: repeat;
    background-size: 256px 256px;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 1.6em;
    background: none;
    border: none;
    cursor: pointer;
    color: #8a7e70;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transition: color 0.2s ease;
    z-index: 10;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}

.close-btn:hover {
    color: #4a3f32;
}

.modal-header {
    background: transparent;
    color: #2c2418;
    padding: 28px 24px 12px;
    text-align: center;
    border-bottom: 1px solid #d8d0c2;
}

.modal-header h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 4px;
    color: #2c2418;
}

.modal-header p {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: #8a7e70;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modal-body {
    padding: 24px;
}

/* Photo — polaroid / field photo feel */
.modal-body img {
    width: calc(100% - 16px);
    margin: 0 8px 20px;
    border-radius: 2px;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.08);
    border: 6px solid #faf8f4;
    outline: 1px solid #e0d8cc;
}

.modal-body p {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1em;
    line-height: 1.75;
    color: #3a3228;
    text-align: center;
    font-style: italic;
    padding: 0 8px 8px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 600px) {
    .header h1 {
        font-size: 1.6em;
    }

    .header {
        padding: 24px 16px 20px;
    }

    .pitch-number {
        font-size: 1.15em;
    }

    .pitch {
        padding: 14px 14px 14px 44px;
        min-height: 64px;
    }

    .modal-content {
        width: 94%;
    }

    .modal-body {
        padding: 20px 16px;
    }

    .modal-body img {
        width: calc(100% - 8px);
        margin: 0 4px 16px;
    }
}