.pathway-belief-ritual{
    --path-color:#8d6ad9;
    --path-glow:rgba(141,106,217,.45);
    --path-bg:#120d1d;
}

.pathway-confidence-conviction{
    --path-color:#ff784f;
    --path-glow:rgba(255,120,79,.45);
    --path-bg:#1d0f0a;
}

.pathway-creation-expression{
    --path-color:#ff4fa3;
    --path-glow:rgba(255,79,163,.45);
    --path-bg:#1d0915;
}

.pathway-curiosity-compassion{
    --path-color:#5be7c4;
    --path-glow:rgba(91,231,196,.45);
    --path-bg:#081816;
}

.pathway-freedom-pleasure{
    --path-color:#ffb347;
    --path-glow:rgba(255,179,71,.45);
    --path-bg:#1c1308;
}

.pathway-logic-philosophy{
    --path-color:#61b8ff;
    --path-glow:rgba(97,184,255,.45);
    --path-bg:#09131d;
}

.pathway-love-romance{
    --path-color:#ff5c8d;
    --path-glow:rgba(255,92,141,.45);
    --path-bg:#1d0a11;
}

.pathway-order-justice{
    --path-color:#f0f0f0;
    --path-glow:rgba(240,240,240,.35);
    --path-bg:#101010;
}

.pathway-science-nature{
    --path-color:#7dff7d;
    --path-glow:rgba(125,255,125,.4);
    --path-bg:#091509;
}

.pathway-technology-communication{
    --path-color:#00fff7;
    --path-glow:rgba(0,255,247,.45);
    --path-bg:#051818;
}

.pathway-war-survival{
    --path-color:#ff3d3d;
    --path-glow:rgba(255,61,61,.45);
    --path-bg:#180707;
}

.pathway-wisdom-knowledge{
    --path-color:#d8c27a;
    --path-glow:rgba(216,194,122,.4);
    --path-bg:#171308;
}

body{
    margin:0;
    background:#050505;
    color:#f2f2f2;
 text-align: center;
    font-family:"VCRMONO", monospace;

    font-size:var(--font-sm);

    line-height:1.7;

    overflow-x:hidden;

    letter-spacing:.02em;
}

/* =========================
   TYPOGRAPHY SCALE
========================= */

:root{

    --font-xs:.8rem;
    --font-sm:.95rem;
    --font-md:1.5rem;
    --font-lg:2rem;
    --font-xl:3rem;
    --font-xxl:clamp(3rem, 8vw, 6rem);

}

/* =========================
   HERO TITLE
========================= */

.pathway-hero h1{

    font-family:"MadHacker", monospace;
    line-height:.9;
    margin:0;
    color:var(--path-color);

    text-shadow:
        0 0 15px var(--path-glow),
        0 0 35px var(--path-glow);

    letter-spacing:.04em;
}

.short-intro{
    text-align:center;
    max-width:900px;
    margin:2rem auto 0 auto;
    padding:2rem;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    box-shadow:
        0 0 30px rgba(0,0,0,.35),
        inset 0 0 18px rgba(255,255,255,.03);
    backdrop-filter:blur(10px);
    position:relative;
    overflow:hidden;
}

.short-intro::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );
    transform:translateX(-100%);
    animation:introScan 7s linear infinite;
    pointer-events:none;
}

@keyframes introScan{
    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }
}

.intro-quote{
    font-family:"Phrygia", serif;
    font-size:clamp(1.45rem, 2.8vw, 2.25rem);
    line-height:1.65;
    color:#fff;
    text-shadow:
        0 0 15px rgba(255,255,255,.08),
        0 0 25px var(--path-glow);
    margin-bottom:1.5rem;
    opacity:.96;
}

.intro-quote::before,
.intro-quote::after{
    color:var(--path-color);
    opacity:.75;
}

.intro-quote::before{
    content:"“";
}

.intro-quote::after{
    content:"”";
}


.door-hero-grid{

    display:grid;

    grid-template-columns:
        1fr 1.3fr 1fr;

    gap:1rem;

    align-items:center;

    margin-bottom:2rem;
}

.door-hero-grid img{

    width:100%;

    border-radius:22px;

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 30px var(--path-glow);

    object-fit:cover;

    min-height:240px;

    max-height:420px;

    transition:
        transform .35s ease,
        opacity .35s ease;
}

.door-hero-grid img:nth-child(1),
.door-hero-grid img:nth-child(3){

    opacity:.45;

    transform:scale(.92);
}

.door-hero-grid img:nth-child(2){

    transform:scale(1.02);

    opacity:1;
}

.door-hero-grid img:hover{

    transform:scale(1.04);

    opacity:1;
}

.intro-description{
    font-family:"VCRMONO", monospace;
    font-size:clamp(.95rem, 1.4vw, 1.15rem);
    line-height:1.9;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--path-color);
    opacity:.86;
    max-width:720px;
    margin:0 auto;
}

.intro-description::before{
    content:"[ PATHWAY ANALYSIS ]";
    display:block;
    font-family:"Pixellari", monospace;
    font-size:.85rem;
    letter-spacing:.18em;
    color:rgba(255,255,255,.55);
    margin-bottom:.9rem;
}
/* =========================
   PILLS
========================= */

.pathway-pill{

    font-family:"Pixellari", monospace;

    font-size:var(--font-sm);

    line-height:1;

    border:1px solid var(--path-color);

    color:var(--path-color);

    padding:.7rem 1rem;

    border-radius:999px;

    background:rgba(255,255,255,.03);

    text-transform:uppercase;

    letter-spacing:.12em;
}


/* =========================
   BOX HEADERS
========================= */

.pathway-box h2{

    font-family:"NeonRave", sans-serif;

    font-size:var(--font-lg);

    line-height:1.2;

    margin-top:0;

    margin-bottom:1rem;

    color:var(--path-color);

    text-transform:uppercase;

    letter-spacing:.12em;

    text-shadow:
        0 0 10px var(--path-glow);
}


/* =========================
   BODY TEXT
========================= */

.pathway-box p{

    font-family:"VCRMONO", monospace;

    font-size:var(--font-md);

    line-height:1.8;

    opacity:.92;
}

.pathway-description-panel{
    margin:2rem auto 0 auto;
    padding:2rem;
    max-width:1100px;
    border-radius:26px;
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    border:1px solid rgba(255,255,255,.13);
    box-shadow:
        0 0 32px rgba(0,0,0,.45),
        0 0 28px var(--path-glow),
        inset 0 0 18px rgba(255,255,255,.03);
    position:relative;
    overflow:hidden;
}

.pathway-description-panel h2{
    margin:0 0 1rem 0;
    font-family:"NeonRave", sans-serif;
    color:var(--path-color);
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:clamp(1.4rem, 2vw, 2rem);
    text-shadow:0 0 15px var(--path-glow);
}

.pathway-description-panel p{
    margin:0;
    font-family:"VCRMONO", monospace;
    font-size:clamp(1rem, 1.35vw, 1.2rem);
    line-height:1.9;
    color:rgba(255,255,255,.9);
}

/* =========================
   LOCK BUTTON
========================= */

.lock-btn{

    font-family:"PixelDigivolve", monospace;

    font-size:var(--font-md);

    line-height:1;

    letter-spacing:.14em;
}


/* =========================
   BACK LINK
========================= */

.back-link{

    font-family:"8thCargo", monospace;

    font-size:var(--font-md);
}

/* =========================
   PAGE BACKGROUND
========================= */

.pathway-page{
    min-height:100vh;
    padding: 3rem 3rem;

    background:
        radial-gradient(circle at top,
            var(--path-glow),
            transparent 45%
        ),
        linear-gradient(
            180deg,
            var(--path-bg),
            #040404 70%
        );

    position:relative;
}


/* subtle scan lines */

.pathway-page::before{
    content:"";
    position:fixed;
    inset:0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 1px,
            transparent 1px,
            transparent 3px
        );

    opacity:.08;
    pointer-events:none;
}


/* =========================
   CONTAINER
========================= */

.pathway-container{
    width:min(1400px, 95%);
    margin:0em auto;
}


/* =========================
   HERO
========================= */

.pathway-hero{
    border:1px solid rgba(255,255,255,.12);

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(14px);

    border-radius:28px;

    padding:2rem;
    box-shadow:
        0 0 25px var(--path-glow),
        0 20px 60px rgba(0,0,0,.55);

    position:relative;

    overflow:hidden;
}


/* animated glow border */

.pathway-hero::after{
    content:"";
    position:absolute;
    inset:0;

    border-radius:inherit;

    box-shadow:
        inset 0 0 25px var(--path-glow);

    pointer-events:none;
}


.pathway-hero img{
    width:100%;
    max-height:450px;
    object-fit:cover;
    border-radius:20px;
    margin-bottom:2rem;
}

.pathway-hero h1{
    font-size:clamp(3rem, 5vw, 5rem);
    color:var(--path-color);
    text-shadow:
        0 0 15px var(--path-glow),
        0 0 35px var(--path-glow);

    margin:0;
}


.short-intro{
    margin-top:1.25rem;
    font-size:1.15rem;
    line-height:1.7;
    opacity:.9;
    max-width:900px;
}


/* =========================
   TERMINAL TAGS
========================= */

.pathway-meta{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:1rem;

    flex-wrap:wrap;

    margin-top:2rem;
}

.pathway-pill{
    border:1px solid var(--path-color);

    color:var(--path-color);

    padding:.65rem 1rem;

    border-radius:999px;

    background:rgba(255,255,255,.03);

    font-size:.9rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    box-shadow:
        0 0 12px rgba(255,255,255,.05);
}


/* =========================
   GRID
========================= */

.pathway-grid{
    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:1.5rem;

    margin-top:2rem;
}

.notable-figures-box{
    grid-column:1 / -1;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.figure-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:1rem;
    margin-top: 1rem;
}

.figure-card{
    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:1rem;
    text-align:center;
    box-shadow:
        0 0 18px rgba(0,0,0,.35),
        inset 0 0 12px rgba(255,255,255,.03);
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.figure-card:hover{
    transform:translateY(-4px);
    border-color:var(--path-color);
    box-shadow:0 0 24px var(--path-glow);
}

.figure-card img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.14);
    margin-bottom:.8rem;
    filter:grayscale(.15) contrast(1.08);
}

.figure-card span{
    display:block;
    font-family:"Pixellari", monospace;
    color:var(--path-color);
    font-size:1rem;
    letter-spacing:.08em;
    text-transform:uppercase;
}
/* =========================
   BOXES
========================= */

.pathway-box{
    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.12);

    border-radius:22px;

    padding:1.5rem;

    position:relative;

    overflow:hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.pathway-box:hover{
    transform:translateY(-4px);

    border-color:var(--path-color);

    box-shadow:
        0 0 22px var(--path-glow);
}


.pathway-box h2{
    margin-top:0;

    font-size:1.15rem;

    color:var(--path-color);

    text-transform:uppercase;

    letter-spacing:.08em;
}

.pathway-box p{
    line-height:1.7;
    opacity:.9;
}


/* =========================
   LOCK BUTTON
========================= */

.lock-section{
    text-align:center;
    margin-top:3rem;
}

.lock-btn{
    border:none;

    background:
        linear-gradient(
            135deg,
            var(--path-color),
            #111
        );

    color:white;

    padding:1.15rem 2.5rem;

    border-radius:999px;

    font-size:1rem;

    cursor:pointer;

    text-transform:uppercase;

    letter-spacing:.08em;

    box-shadow:
        0 0 35px var(--path-glow);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.lock-btn:hover{
    transform:translateY(-3px);

    box-shadow:
        0 0 50px var(--path-glow);
}


/* =========================
   BACK LINK
========================= */

.back-link{
    display:inline-block;

    margin-top:1.5rem;

    color:var(--path-color);

    text-decoration:none;

    opacity:.8;
}

.back-link:hover{
    opacity:1;
}


/* =========================
   MOBILE
========================= */

@media(max-width:900px){

    .pathway-grid{
        grid-template-columns:1fr;
    }

    .pathway-title{
        font-size:3rem;
    }

}