:root{
    --cream:#f0e6d0;
    --cream-dim:rgba(240,230,208,0.78);
    --cream-muted:rgba(240,230,208,0.5);
    --ember:#d4732a;
    --ember-bright:#e8924a;
    --ember-glow:#f5b060;
    --wood-dark:#0e0804;
    --wood-mid:#1c1208;
    --wood-warm:#2a1a0c;
    --border:rgba(212,115,42,0.18);
    --border-h:rgba(212,115,42,0.45);
}

.sports-page{
    position:relative;
    min-height:100vh;
    padding:11rem 0 7rem;
    overflow:hidden;
    color:var(--cream);
    font-family:'Bree Serif',serif;
    background:
            radial-gradient(ellipse 60% 45% at 18% 8%,rgba(212,115,42,.09),transparent 55%),
            radial-gradient(ellipse 50% 40% at 85% 18%,rgba(232,146,74,.06),transparent 55%),
            radial-gradient(ellipse 60% 50% at 50% 100%,rgba(180,80,10,.1),transparent 65%),
            linear-gradient(180deg,#100a05 0%,var(--wood-dark) 22%,var(--wood-dark) 78%,#0b0502 100%);
}

.sports-page::before{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
            linear-gradient(to right, rgba(6,3,1,.7) 0%, rgba(6,3,1,.25) 14%, transparent 28%),
            linear-gradient(to left,  rgba(6,3,1,.7) 0%, rgba(6,3,1,.25) 14%, transparent 28%);
}

.sports-hero,
.sports-filters,
.sports-collage,
.sports-empty,
.pg-divider{
    position:relative;z-index:1;
    width:min(1450px,calc(100% - 2rem));
    margin-left:auto;margin-right:auto;
}

.sports-hero{
    text-align:center;
    margin-bottom:1rem;
    display:flex;flex-direction:column;align-items:center;
}

.hero-kicker{
    display:flex;gap:0;justify-content:center;
    font-family:sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.42em;
    color:var(--ember-glow);text-transform:uppercase;margin-bottom:1.6rem;
    min-height:1em;
}
.hero-kicker .ch{
    display:inline-block;opacity:0;transform:translateY(8px);
    animation:spCharUp .4s cubic-bezier(.16,1,.3,1) forwards;
}

.sports-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(3.5rem,11vw,9rem);line-height:.92;letter-spacing:.02em;
    margin:0;color:var(--cream);
}
.sports-title .row{display:block;overflow:hidden}
.sports-title .row span{
    display:block;opacity:0;transform:translateY(110%) skewY(2deg);
}
.sports-title .row:nth-child(1) span{animation:spRevealRow 1s .15s cubic-bezier(.16,1,.3,1) forwards}
.sports-title .row:nth-child(2) span{animation:spRevealRow 1s .3s cubic-bezier(.16,1,.3,1) forwards}
.sports-title .faded{
    color:rgba(240,230,208,.48);
    animation:spRevealRow 1s .3s cubic-bezier(.16,1,.3,1) forwards, spFlicker 4s 1.3s ease-in-out infinite;
}

.sports-subtitle{
    position:relative;z-index:2;
    max-width:640px;margin:1.8rem auto 0;
    font-family:'Playfair Display',serif;font-style:italic;
    font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.85;
    color:var(--cream-dim);
    opacity:0;animation:spFadeUp .9s .55s cubic-bezier(.16,1,.3,1) forwards;
}

.pg-divider{
    display:flex;align-items:center;gap:1.2rem;
    max-width:900px;padding:3rem 2rem;
}
.pg-divider-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(212,115,42,.25),transparent)}
.pg-divider-ornament{
    font-family:'Playfair Display',serif;
    color:rgba(212,115,42,.5);font-size:.9rem;letter-spacing:.3em;flex-shrink:0;
    display:inline-block;
    animation:spOrnamentPulse 4s ease-in-out infinite;
}
@keyframes spOrnamentPulse{
    0%,100%{transform:scale(1) rotate(0deg);opacity:.5}
    50%{transform:scale(1.25) rotate(180deg);opacity:.9}
}

.sports-watermark{
    position:absolute;
    top:6%;left:50%;
    transform:translate(-50%,-50%);
    font-family:'Bebas Neue',sans-serif;
    font-size:clamp(9rem,22vw,24rem);
    line-height:1;letter-spacing:.04em;
    color:rgba(212,115,42,.04);
    text-shadow:0 0 80px rgba(212,115,42,.06);
    z-index:0;pointer-events:none;user-select:none;
    white-space:nowrap;
}

.sports-year-filters{
    display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
    margin-bottom:1.6rem;
    opacity:0;transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.sports-year-filters.in{opacity:1;transform:none}
.year-pill{
    font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.08em;
    font-size:.95rem;text-transform:none;
    padding:.55rem 1.5rem;
}

.sports-next-season{
    position:relative;overflow:hidden;
    width:min(900px,calc(100% - 2rem));
    margin:0 auto 2.5rem;
    padding:2.2rem;border-radius:6px;
    text-align:center;
    display:flex;flex-direction:column;align-items:center;
    border:1px dashed rgba(212,115,42,.3);
    background:
            repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(240,220,180,.012) 28px,rgba(240,220,180,.012) 29px),
            linear-gradient(135deg,rgba(30,18,8,.65),rgba(22,12,4,.85));
    opacity:0;transform:translateY(24px);
    transition:
            opacity .65s cubic-bezier(.16,1,.3,1),
            transform .45s cubic-bezier(.16,1,.3,1),
            border-color .3s ease;
}
.sports-next-season.in{opacity:1;transform:none}
.sports-next-season:hover{border-color:rgba(212,115,42,.45)}

.sports-next-badge{
    display:inline-block;margin-bottom:1rem;
    padding:.35rem .9rem;border-radius:999px;
    font-family:sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.24em;
    text-transform:uppercase;color:var(--ember-glow);
    border:1px solid rgba(212,115,42,.28);
    background:rgba(212,115,42,.08);
}

.sports-next-icon{
    width:3rem;height:3rem;margin-bottom:.6rem;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
    background:rgba(212,115,42,.08);border:1px solid rgba(212,115,42,.22);
    color:var(--ember-bright);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}
.sports-next-icon svg{width:18px;height:18px}
.sports-next-season:hover .sports-next-icon{
    transform:rotate(-12deg) scale(1.08);
    box-shadow:0 0 18px rgba(212,115,42,.25);
}

.sports-next-season h2{
    margin:.2rem 0 .8rem;
    font-family:'Bebas Neue',sans-serif;font-weight:400;
    font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.05;
    color:var(--cream);
}
.sports-next-season > p{
    margin:0;max-width:560px;
    font-family:sans-serif;font-size:.9rem;line-height:1.85;
    color:var(--cream-dim);
}

.sports-next-link{
    display:inline-flex;align-items:center;gap:.6rem;
    margin-top:1.4rem;
    font-family:sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ember-bright);text-decoration:none;
}
.sports-next-link svg{width:15px;height:15px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.sports-next-link:hover svg{transform:translateX(4px)}

.sports-filters{
    display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
    margin-bottom:2.5rem;
    opacity:0;transform:translateY(14px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.sports-filters.in{opacity:1;transform:none}

.filter-pill{
    padding:.6rem 1.3rem;border-radius:999px;
    border:1px solid rgba(212,115,42,.22);
    background:rgba(26,15,6,.6);color:var(--cream-dim);
    font-family:sans-serif;font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
    cursor:pointer;
    transition:border-color .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease,transform .2s ease;
}
.filter-pill:hover{
    border-color:var(--ember-bright);color:var(--ember-bright);
    transform:translateY(-2px);
}
.filter-pill.is-active{
    border-color:var(--ember-bright);
    background:rgba(212,115,42,.14);
    color:var(--ember-bright);
    box-shadow:0 0 18px rgba(212,115,42,.18);
}

.sports-collage{
    column-count:4;
    column-gap:1rem;
}
.sports-loading{
    column-span:all;
    text-align:center;
    font-family:'Playfair Display',serif;font-style:italic;
    color:var(--cream-muted);font-size:1rem;
    padding:3rem 0;
}
.sports-empty{
    text-align:center;
    font-family:'Playfair Display',serif;font-style:italic;
    color:var(--cream-muted);font-size:1rem;
    padding:2rem 0;
}

.collage-item{
    position:relative;
    display:block;
    width:100%;
    margin:0 0 1rem;
    break-inside:avoid;
    border-radius:6px;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--wood-dark);
    cursor:pointer;
    opacity:0;transform:translateY(14px);
    transition:
            opacity .5s ease,
            transform .4s ease,
            border-color .25s ease;
}
.collage-item.in{opacity:1;transform:none}
.collage-item.is-hidden{display:none}

.collage-item:hover{
    border-color:rgba(212,115,42,.4);
}

.collage-item img{
    display:block;width:100%;height:auto;
}

.collage-item::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:55%;
    background:linear-gradient(to top,rgba(8,4,1,.85),transparent);
    pointer-events:none;
}
.collage-tag{
    position:absolute;left:.85rem;bottom:.75rem;z-index:2;
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.35rem .75rem;border-radius:999px;
    font-family:sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ember-glow);
    background:rgba(10,6,2,.55);border:1px solid rgba(212,115,42,.25);
    backdrop-filter:blur(2px);
    opacity:0;transform:translateY(6px);
    transition:opacity .3s ease,transform .3s ease;
}
.collage-item:hover .collage-tag{opacity:1;transform:none}

.sports-lightbox{
    position:fixed;inset:0;z-index:600;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
}
.sports-lightbox.is-open{opacity:1;pointer-events:auto}

.sports-lightbox-backdrop{
    position:absolute;inset:0;
    background:rgba(6,3,1,.88);
    backdrop-filter:blur(6px);
}

.sports-lightbox-figure{
    position:relative;z-index:2;
    max-width:min(92vw,1100px);max-height:88vh;
    margin:0;
    display:flex;flex-direction:column;align-items:center;
    transform:scale(.96);
    transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.sports-lightbox.is-open .sports-lightbox-figure{transform:scale(1)}

.sports-lightbox-figure img{
    max-width:100%;max-height:78vh;
    border-radius:6px;
    border:1px solid rgba(212,115,42,.3);
    box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(212,115,42,.08);
    object-fit:contain;
    background:var(--wood-dark);
}
#lightboxCaption{
    margin-top:1rem;
    font-family:sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;
    color:var(--ember-glow);
}

.lightbox-btn{
    position:absolute;z-index:3;
    display:flex;align-items:center;justify-content:center;
    width:2.8rem;height:2.8rem;border-radius:50%;
    border:1px solid rgba(212,115,42,.28);
    background:rgba(14,8,4,.8);color:var(--cream);
    cursor:pointer;
    transition:border-color .25s ease,color .25s ease,background .25s ease,transform .2s ease;
}
.lightbox-btn:hover{
    border-color:var(--ember-bright);color:var(--ember-bright);
    background:rgba(212,115,42,.1);
}
.lightbox-btn:active{transform:scale(.92)}
.lightbox-btn svg{width:18px;height:18px}

.lightbox-close{top:1.4rem;right:1.4rem}
.lightbox-prev{left:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox-next{right:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox-prev:active,.lightbox-next:active{transform:translateY(-50%) scale(.92)}

@keyframes spCharUp{to{opacity:1;transform:translateY(0)}}
@keyframes spRevealRow{to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes spFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spFlicker{
    0%,100%{opacity:.48}10%{opacity:.52}20%{opacity:.44}30%{opacity:.5}
    40%{opacity:.46}50%{opacity:.53}60%{opacity:.45}70%{opacity:.51}80%{opacity:.47}90%{opacity:.5}
}

@media (max-width:1200px){
    .sports-collage{column-count:3}
}
@media (max-width:860px){
    .sports-collage{column-count:2}
    .sports-page{padding:9.5rem 0 5rem}
}
@media (max-width:560px){
    .sports-collage{column-count:1}
    .sports-page{padding:8.8rem 0 4rem}
    .sports-hero{margin-bottom:.5rem}
    .pg-divider{padding:2.2rem 1.2rem}
    .filter-pill{font-size:.68rem;padding:.5rem 1rem}
    .lightbox-prev{left:.5rem}
    .lightbox-next{right:.5rem}
    .lightbox-close{top:.7rem;right:.7rem}
    .lightbox-btn{width:2.4rem;height:2.4rem}
    .lightbox-btn svg{width:15px;height:15px}
}