*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
    background: #0a0a0a;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* ══ SCROLL PROGRESS ══ */
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;background:rgba(0,0,0,0.2);pointer-events:none;}
.scroll-progress-fill{height:100%;width:0%;background:#8b5cf6;transition:width .1s linear;}

/* ══ NAV ══ */
nav{
    position:fixed;top:3px;left:0;right:0;z-index:600;height:70px;
    display:flex;align-items:center;
    background:rgba(10,10,10,0.0);backdrop-filter:blur(0px);border-bottom:1px solid transparent;
    transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}
nav.scrolled{background:rgba(10,10,10,0.97);backdrop-filter:blur(20px);border-bottom-color:rgba(139,92,246,0.2);}
.nav-container{width:100%;position:relative;display:flex;align-items:center;padding:0 2rem;}
.nav-left{display:flex;align-items:center;gap:1rem;}
.nav-home{color:#8b5cf6;text-decoration:none;font-size:1rem;transition:all .3s ease;display:flex;align-items:center;min-height:44px;gap:.5rem;}
.nav-home:hover{color:#c4b5fd;}
.nav-separator{color:rgba(255,255,255,.3);}
.nav-collection{color:#c4b5fd;text-decoration:none;font-size:1rem;display:inline-flex;align-items:center;min-height:44px;transition:color .3s ease;}
.nav-collection:hover{color:#ffffff;}
.nav-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;}
.nav-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#8b5cf6;}
.nav-home:focus-visible, .nav-collection:focus-visible{outline:2px solid #fde68a;outline-offset:3px;}

/* ══ CATEGORY HERO ══ */
.cat-hero{position:relative;overflow:hidden;margin-top:80px;min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:6rem 2rem;text-align:center;background:#0a0a0a;}
.cat-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:1;
    background-image:url(/assets/images/victories/Ripple_effect_hero.webp);
}
.cat-hero::before{
    content:'';position:absolute;inset:0;z-index:1;
    /* The dark zone behind the headline (35-58%) is still necessary - #8b5cf6's
       mid-purple has a hard ~4.68:1 ceiling here regardless of overlay strength
       past this point, same constraint as every story page's h1. What changed
       is the shape of the approach: the previous version jumped from .83 to
       1.0 in just 4 percentage points (31-35%), reading as an abrupt band.
       This ramps up starting at 12% instead, so it builds gradually into the
       same peak darkness rather than snapping into it. Same verified safety,
       unchanged (4.68-5.02:1 across all zones). */
    background:linear-gradient(180deg,
        rgba(10,10,10,.35) 0%,
        rgba(10,10,10,.5) 12%,
        rgba(10,10,10,.7) 20%,
        rgba(10,10,10,.83) 26%,
        rgba(10,10,10,.83) 31%,
        rgba(10,10,10,1) 35%,
        rgba(10,10,10,1) 58%,
        rgba(10,10,10,.79) 62%,
        rgba(10,10,10,.79) 74%,
        rgba(10,10,10,.4) 88%,
        rgba(10,10,10,.15) 100%);
    pointer-events:none;
}
.cat-hero-inner{position:relative;z-index:2;max-width:900px;margin:0 auto;}
.cat-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:2rem;min-height:44px;transition:color .2s;}
.cat-back:hover{color:#c4b5fd;}
.cat-eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:#8b5cf6;margin-bottom:1.4rem;}
.cat-eyebrow-line{display:block;width:24px;height:1px;background:#8b5cf6;}
.cat-headline{font-size:clamp(2.4rem,6vw,4rem);font-weight:200;letter-spacing:2px;line-height:1.1;
    background:linear-gradient(90deg, #ffffff, #8b5cf6, #c4b5fd);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.cat-body{font-size:.95rem;color:rgba(255,255,255,.55);max-width:600px;margin:1.75rem auto 0;line-height:1.7;}

/* ══ STORY GRID ══ */
.grid-zone{background:#0a0a0a;padding:4rem 2rem 4rem;}
.grid-inner{max-width:1280px;margin:0 auto;}
.grid-intro{max-width:640px;margin:0 auto 2.2rem;text-align:center;padding-bottom:2rem;border-bottom:1px solid rgba(139,92,246,0.2);}
.grid-intro p{font-size:1.02rem;color:#e2e8f0;line-height:1.7;}
.grid-note{text-align:center;font-size:.85rem;font-style:italic;color:rgba(255,255,255,.4);margin-bottom:1.8rem;}
.stories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1.1rem;}

.story-card{
    display:flex;flex-direction:column;
    background:rgba(139,92,246,0.04);border:1px solid rgba(139,92,246,0.18);
    padding:1.3rem 1.3rem 1.15rem;
    text-decoration:none;color:inherit;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.story-card:hover{transform:translateY(-4px);border-color:rgba(139,92,246,0.55);box-shadow:0 14px 32px rgba(139,92,246,0.14);}
.story-card-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#1a1a1a;margin:-1.3rem -1.3rem 1rem;}
.story-card-num{
    position:absolute;top:.7rem;left:.7rem;z-index:2;
    font-size:.72rem;font-weight:600;color:#ffffff;letter-spacing:.03em;
    background:rgba(10,10,10,.6);backdrop-filter:blur(3px);
    padding:.28rem .55rem;
}
.story-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.story-card:hover .story-card-img img{transform:scale(1.045);}
.story-card-location{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c4b5fd;margin-bottom:.5rem;}
.story-card-title{font-size:1.1rem;font-weight:400;color:#ffffff;line-height:1.25;margin-bottom:.5rem;}
.story-card-hook{
    font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.55;margin-bottom:1rem;flex:1;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.story-card-stat{display:flex;align-items:baseline;gap:.55rem;padding-top:.85rem;border-top:1px solid rgba(139,92,246,0.18);}
.story-card-stat-num{font-size:1.35rem;font-weight:600;color:#8b5cf6;white-space:nowrap;}
.story-card-stat-label{font-size:.72rem;color:rgba(255,255,255,.45);line-height:1.28;}
.story-card-link{margin-top:.8rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd;display:flex;align-items:center;gap:.4rem;}
.story-card-link span{transition:transform .2s;}
.story-card:hover .story-card-link span{transform:translateX(3px);}

/* ══ CLOSING ══ */
.cat-closing{background:rgba(139,92,246,0.04);border-top:1px solid rgba(139,92,246,0.2);padding:4rem 2rem 4.5rem;text-align:center;}
.cat-closing-text{font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.5);margin-bottom:1.6rem;}
.cat-closing-primary{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 2.2rem;min-height:44px;background:transparent;border:2px solid #8b5cf6;color:#8b5cf6;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-radius:25px;transition:all .25s;margin-bottom:1rem;}
.cat-closing-primary:hover{background:#8b5cf6;color:#0a0a0a;}
.cat-closing-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:.75rem;letter-spacing:.08em;color:rgba(255,255,255,.45);text-decoration:none;transition:color .2s;}
.cat-closing-secondary:hover{color:#c4b5fd;}
.cat-closing-primary:focus-visible, .cat-closing-secondary:focus-visible{outline:2px solid #fde68a;outline-offset:3px;}

/* ══ FADE-IN ══ */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ══ BACK TO TOP ══ */
.back-to-top{
    position:fixed;right:1.5rem;bottom:1.5rem;z-index:500;
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#1a1a1a;border:1px solid rgba(139,92,246,0.4);color:#c4b5fd;
    cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4);
    opacity:0;pointer-events:none;transform:translateY(10px);
    transition:opacity .25s ease,transform .25s ease,background .2s ease,border-color .2s ease;
}
.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(0);}
.back-to-top:hover{background:#8b5cf6;border-color:#8b5cf6;color:#0a0a0a;}
.back-to-top:focus-visible{outline:2px solid #fde68a;outline-offset:3px;}

@media(max-width:640px){
    .nav-container{padding:0 1.25rem;}
    .cat-hero{padding:5rem 1.5rem 3rem;}
    .grid-zone{padding:3rem 1.25rem 3.5rem;}
    .back-to-top{right:1rem;bottom:1rem;width:44px;height:44px;}
}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .fade-in{transition:none;opacity:1;transform:none;}
    .back-to-top{transition:opacity .01s linear;}
    .story-card:hover{transform:none;}
}