/* =============================================================================
   sport_blog — "The Starting Line"
   Athletic editorial template. Warm paper canvas, ink near-black, sunset-orange
   accent. Saira Condensed display + Sora body. Prefix: sp-
   ============================================================================= */

:root{
    --sp-paper:     #f6f4ef;
    --sp-paper-2:   #eeeae0;
    --sp-card:      #ffffff;
    --sp-ink:       #15130f;
    --sp-ink-soft:  #3b362d;
    --sp-muted:     #756f63;
    --sp-line:      rgba(21,19,15,.12);
    --sp-line-2:    rgba(21,19,15,.22);
    --sp-accent:    #ff6a00;
    --sp-accent-deep:#dc5400;
    --sp-accent-soft:rgba(255,106,0,.12);
    --sp-foot:      #131210;

    --sp-r:    16px;
    --sp-r-lg: 26px;
    --sp-shadow:   0 1px 2px rgba(21,19,15,.04), 0 18px 40px -24px rgba(21,19,15,.32);
    --sp-shadow-h: 0 2px 4px rgba(21,19,15,.06), 0 30px 56px -26px rgba(255,106,0,.42);

    --sp-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
    --sp-body:    'Sora', system-ui, -apple-system, Segoe UI, sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

.sp-body{
    margin:0;
    background:var(--sp-paper);
    color:var(--sp-ink);
    font-family:var(--sp-body);
    font-size:17px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(255,106,0,.06), transparent 38%),
        radial-gradient(circle at 0% 12%, rgba(21,19,15,.04), transparent 30%);
}

.sp-body a{ color:inherit; text-decoration:none; }

/* finish-line top stripe ---------------------------------------------------- */
.sp-finish{
    position:fixed; inset:0 0 auto 0; height:4px; z-index:1030;
    background:repeating-linear-gradient(90deg,
        var(--sp-accent) 0 22px, var(--sp-ink) 22px 26px);
}

/* ---------- Header --------------------------------------------------------- */
.sp-head{
    position:sticky; top:0; z-index:1020;
    background:rgba(246,244,239,.92);
    backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--sp-line);
}
.sp-head__inner{
    display:flex; align-items:center; flex-wrap:wrap;
    gap:1rem 1.6rem; padding:.95rem 0;
}
.sp-brand{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--sp-display);
    font-weight:800; font-size:1.65rem; letter-spacing:.01em;
    text-transform:uppercase;
}
.sp-brand__img{ height:36px; width:auto; }
.sp-brand__text{ display:flex; align-items:center; gap:.5rem; }
.sp-brand__mark{
    width:14px; height:14px; display:inline-block; transform:skewX(-12deg);
    background:var(--sp-accent);
    box-shadow:5px 0 0 -1px var(--sp-ink);
}

.sp-burger{
    margin-left:auto; display:none;
    width:46px; height:42px; padding:0;
    background:var(--sp-ink); border:0; border-radius:11px;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    cursor:pointer;
}
.sp-burger span{ width:20px; height:2px; background:var(--sp-paper); border-radius:2px; }

.sp-nav-wrap{ margin-left:auto; }
.sp-nav{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.sp-nav__link{
    font-family:var(--sp-display);
    font-weight:600; font-size:1.02rem; letter-spacing:.06em;
    text-transform:uppercase;
    padding:.5rem .85rem; border-radius:999px;
    color:var(--sp-ink-soft);
    transition:color .18s ease, background .18s ease;
}
.sp-nav__link:hover{ color:var(--sp-ink); background:var(--sp-accent-soft); }
.sp-nav__link--home{ color:var(--sp-ink); }

/* ---------- Layout shell --------------------------------------------------- */
.sp-main{ padding:2.6rem 0 4rem; }
.sp-wrap{ max-width:1180px; }

/* ---------- Front page (hero + rank) --------------------------------------- */
.sp-front{
    display:grid;
    grid-template-columns:minmax(0,1.62fr) minmax(280px,.95fr);
    gap:2rem;
    align-items:start;
    margin-bottom:3rem;
}

.sp-hero{
    position:relative; overflow:hidden;
    border-radius:var(--sp-r-lg);
    background:var(--sp-ink);
    min-height:480px;
    display:flex; flex-direction:column; justify-content:flex-end;
    box-shadow:var(--sp-shadow);
    isolation:isolate;
}
.sp-hero__media{ position:absolute; inset:0; z-index:-1; display:block; }
.sp-hero__media img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .9s cubic-bezier(.16,.7,.3,1);
}
.sp-hero:hover .sp-hero__media img{ transform:scale(1.045); }
.sp-hero__scrim{
    position:absolute; inset:0;
    background:linear-gradient(180deg,
        rgba(15,12,8,.05) 0%, rgba(15,12,8,.18) 42%,
        rgba(15,12,8,.72) 78%, rgba(15,12,8,.92) 100%);
}
.sp-hero--noimg{ background:linear-gradient(135deg,#1d1a14,#322a1c); }
.sp-hero--noimg .sp-hero__media{ display:none; }

.sp-hero__flag{
    position:absolute; top:0; left:2rem; z-index:2;
    font-family:var(--sp-display); font-weight:800;
    font-size:.82rem; letter-spacing:.22em; text-transform:uppercase;
    color:var(--sp-ink);
    background:var(--sp-accent);
    padding:.5rem .95rem .42rem;
    clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,0 70%);
    padding-left:1.3rem;
}
.sp-hero__body{ position:relative; z-index:2; padding:2.4rem 2.4rem 2.5rem; color:#fff; }
.sp-hero__title{
    font-family:var(--sp-display);
    font-weight:800; line-height:.98; letter-spacing:-.005em;
    text-transform:uppercase;
    font-size:clamp(2.1rem,4.6vw,3.8rem);
    margin:.85rem 0 .7rem;
}
.sp-hero__title a:hover{ color:var(--sp-accent); }
.sp-hero__dek{
    margin:0; max-width:46ch;
    color:rgba(255,255,255,.82); font-size:1.04rem; line-height:1.6;
}
.sp-hero__foot{
    display:flex; align-items:center; gap:1.4rem;
    margin-top:1.4rem; flex-wrap:wrap;
}
.sp-hero__foot .sp-meta{ color:rgba(255,255,255,.7); }
.sp-go{
    font-family:var(--sp-display); font-weight:700;
    font-size:1.02rem; letter-spacing:.12em; text-transform:uppercase;
    color:#fff; display:inline-flex; align-items:center; gap:.5rem;
    padding-bottom:3px; border-bottom:2px solid var(--sp-accent);
    transition:gap .2s ease, color .2s ease;
}
.sp-go:hover{ color:var(--sp-accent); gap:.85rem; }

/* ---------- Top stories rank rail ------------------------------------------ */
.sp-rank{
    background:var(--sp-card);
    border:1px solid var(--sp-line);
    border-radius:var(--sp-r);
    padding:1.4rem 1.5rem 1rem;
    box-shadow:var(--sp-shadow);
}
.sp-rank__head{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--sp-display); font-weight:800;
    font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase;
    padding-bottom:1rem; margin-bottom:.4rem;
    border-bottom:2px solid var(--sp-ink);
}
.sp-rank__list{ list-style:none; margin:0; padding:0; }
.sp-rank__item{
    display:flex; gap:1rem; align-items:flex-start;
    padding:1.05rem 0;
    border-bottom:1px solid var(--sp-line);
}
.sp-rank__item:last-child{ border-bottom:0; }
.sp-rank__no{
    font-family:var(--sp-display); font-weight:800;
    font-size:2.5rem; line-height:1; min-width:1.7ch;
    color:transparent;
    -webkit-text-stroke:1.5px var(--sp-line-2);
    transition:color .2s ease, -webkit-text-stroke-color .2s ease;
}
.sp-rank__item:hover .sp-rank__no{
    color:var(--sp-accent);
    -webkit-text-stroke-color:var(--sp-accent);
}
.sp-rank__body{ display:flex; flex-direction:column; gap:.4rem; }
.sp-rank__title{
    font-family:var(--sp-display); font-weight:700;
    font-size:1.22rem; line-height:1.08;
    text-transform:uppercase; color:var(--sp-ink);
}
.sp-rank__title:hover{ color:var(--sp-accent-deep); }

/* ---------- Tags & meta ---------------------------------------------------- */
.sp-tag{
    display:inline-block; align-self:flex-start;
    font-family:var(--sp-display); font-weight:700;
    font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
    color:var(--sp-ink); background:var(--sp-accent);
    padding:.34rem .7rem .28rem; border-radius:999px;
    transition:transform .18s ease, filter .18s ease;
}
.sp-tag:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.sp-tag--ghost{
    color:var(--sp-accent-deep); background:transparent;
    border:1.5px solid var(--sp-accent);
    padding:.26rem .6rem .2rem;
}
.sp-tag--ghost:hover{ color:#fff; background:var(--sp-accent); }

.sp-meta{
    font-family:var(--sp-display); font-weight:600;
    font-size:.92rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--sp-muted);
}

.sp-slash{
    width:.7rem; height:1.15rem; display:inline-block;
    background:var(--sp-accent); transform:skewX(-16deg);
}

/* ---------- Lap divider ---------------------------------------------------- */
.sp-lap{
    display:flex; align-items:center; gap:1rem;
    margin:1rem 0 1.8rem;
}
.sp-lap::after{ content:""; flex:1; height:2px; background:var(--sp-ink); }
.sp-lap__chip{
    display:inline-flex; align-items:center; gap:.6rem;
    font-family:var(--sp-display); font-weight:800;
    font-size:1.35rem; letter-spacing:.1em; text-transform:uppercase;
}

/* ---------- Article grid --------------------------------------------------- */
.sp-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.8rem;
}
.sp-card{
    background:var(--sp-card);
    border:1px solid var(--sp-line);
    border-radius:var(--sp-r);
    overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.sp-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--sp-shadow-h);
    border-color:transparent;
}
.sp-card__media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--sp-paper-2); }
.sp-card__media img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .55s cubic-bezier(.16,.7,.3,1);
}
.sp-card:hover .sp-card__media img{ transform:scale(1.06); }
.sp-card--noimg .sp-card__media{ display:none; }
.sp-card__body{ padding:1.3rem 1.35rem 1.25rem; display:flex; flex-direction:column; gap:.65rem; flex:1; }
.sp-card__title{
    font-family:var(--sp-display); font-weight:700;
    font-size:1.5rem; line-height:1.05;
    text-transform:uppercase; margin:0;
}
.sp-card__title a:hover{ color:var(--sp-accent-deep); }
.sp-card__dek{
    margin:0; color:var(--sp-ink-soft); font-size:.96rem; line-height:1.6;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sp-card__foot{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:auto; padding-top:.6rem;
    border-top:1px solid var(--sp-line);
}
.sp-card__arrow{ color:var(--sp-accent); font-size:1.2rem; transition:transform .2s ease; }
.sp-card:hover .sp-card__arrow{ transform:translateX(5px); }

/* ---------- Section head (category / static) ------------------------------- */
.sp-sectionhead{ margin:0 0 2.2rem; }
.sp-sectionhead__kicker{
    display:inline-flex; align-items:center; gap:.55rem;
    font-family:var(--sp-display); font-weight:700;
    font-size:.95rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--sp-muted);
}
.sp-sectionhead__title{
    font-family:var(--sp-display); font-weight:800;
    font-size:clamp(2.3rem,5vw,3.8rem); line-height:1;
    text-transform:uppercase; margin:.5rem 0 0;
}

/* ---------- Single post ---------------------------------------------------- */
.sp-article{ padding-bottom:1rem; }
.sp-post{
    position:relative; overflow:hidden; isolation:isolate;
    background:var(--sp-ink);
    border-radius:0 0 var(--sp-r-lg) var(--sp-r-lg);
    min-height:clamp(360px,56vh,600px);
    display:flex; flex-direction:column; justify-content:flex-end;
    margin-bottom:2.4rem;
}
.sp-post__media{ position:absolute; inset:0; z-index:0; }
.sp-post__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sp-post__scrim{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(180deg,rgba(15,12,8,.18) 0%,rgba(15,12,8,.5) 52%,rgba(15,12,8,.9) 100%);
}
.sp-post__head{
    position:relative; z-index:2;
    color:#fff; padding-top:3rem; padding-bottom:2.4rem;
}
.sp-post--noimg{
    background:var(--sp-paper); border-radius:0;
    min-height:0; display:block;
}
.sp-post--noimg .sp-post__head{ color:var(--sp-ink); padding-top:2rem; padding-bottom:.5rem; }
.sp-post--noimg .sp-post__media,
.sp-post--noimg .sp-post__scrim{ display:none; }
.sp-post__title{
    font-family:var(--sp-display); font-weight:800;
    font-size:clamp(2.2rem,5.4vw,4.2rem); line-height:.98;
    text-transform:uppercase; margin:.9rem 0 1.1rem; max-width:18ch;
}
.sp-post__stats{
    display:flex; flex-wrap:wrap; gap:.6rem 2.2rem;
    padding-top:1rem; border-top:2px solid rgba(255,255,255,.32);
}
.sp-post--noimg .sp-post__stats{ border-top-color:var(--sp-line-2); }
.sp-stat{
    display:flex; flex-direction:column; gap:.15rem;
    font-family:var(--sp-display); font-weight:600;
    font-size:1.02rem; letter-spacing:.05em; text-transform:uppercase;
}
.sp-stat__k{
    font-size:.74rem; letter-spacing:.2em; color:var(--sp-accent);
    font-weight:700;
}
.sp-post--noimg .sp-stat__k{ color:var(--sp-accent-deep); }

/* ---------- Reading column ------------------------------------------------- */
.sp-read{ max-width:760px; margin:0 auto; }
.sp-prose{ font-size:1.075rem; line-height:1.82; color:var(--sp-ink-soft); }
.sp-prose > *:first-child{ margin-top:0; }
.sp-prose h2,.sp-prose h3,.sp-prose h4{
    font-family:var(--sp-display); font-weight:800;
    color:var(--sp-ink); text-transform:uppercase; line-height:1.08;
    margin:2.4rem 0 .9rem;
}
.sp-prose h2{ font-size:1.95rem; padding-left:1rem; border-left:5px solid var(--sp-accent); }
.sp-prose h3{ font-size:1.5rem; }
.sp-prose h4{ font-size:1.22rem; }
.sp-prose p{ margin:0 0 1.3rem; }
.sp-prose a{ color:var(--sp-accent-deep); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.sp-prose a:hover{ color:var(--sp-ink); }
.sp-prose img{ max-width:100%; height:auto; border-radius:var(--sp-r); margin:1.6rem 0; display:block; }
.sp-prose ul,.sp-prose ol{ margin:0 0 1.4rem; padding-left:1.3rem; }
.sp-prose li{ margin:.45rem 0; }
.sp-prose li::marker{ color:var(--sp-accent); }
.sp-prose blockquote{
    margin:1.8rem 0; padding:1rem 1.5rem;
    background:var(--sp-accent-soft); border-left:5px solid var(--sp-accent);
    border-radius:0 var(--sp-r) var(--sp-r) 0;
    font-size:1.18rem; color:var(--sp-ink); font-style:italic;
}
.sp-prose code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
    background:var(--sp-paper-2); padding:.15em .4em; border-radius:6px;
}
.sp-prose pre{
    background:var(--sp-ink); color:#f4f1e9; padding:1.2rem 1.4rem;
    border-radius:var(--sp-r); overflow:auto; margin:1.6rem 0;
}
.sp-prose pre code{ background:none; padding:0; }
.sp-prose table{ width:100%; border-collapse:collapse; margin:1.6rem 0; }
.sp-prose th,.sp-prose td{ border:1px solid var(--sp-line); padding:.6rem .8rem; text-align:left; }
.sp-prose th{ background:var(--sp-paper-2); font-family:var(--sp-display); text-transform:uppercase; letter-spacing:.05em; }

.sp-author{
    margin-top:2.6rem; padding:1.5rem 1.6rem;
    background:var(--sp-card); border:1px solid var(--sp-line);
    border-radius:var(--sp-r); border-top:4px solid var(--sp-accent);
}
.sp-author__label{
    font-family:var(--sp-display); font-weight:700;
    font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
    color:var(--sp-muted);
}
.sp-author p{ margin:.5rem 0 0; color:var(--sp-ink-soft); }

/* ---------- Contact form --------------------------------------------------- */
.sp-form{ max-width:620px; }
.sp-form .form-label{
    font-family:var(--sp-display); font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; font-size:.95rem;
    color:var(--sp-ink); margin-bottom:.4rem;
}
.sp-form .form-control{
    background:var(--sp-card); border:1.5px solid var(--sp-line-2);
    border-radius:12px; padding:.7rem .9rem; font-family:var(--sp-body);
    color:var(--sp-ink);
}
.sp-form .form-control:focus{
    border-color:var(--sp-accent);
    box-shadow:0 0 0 .22rem var(--sp-accent-soft);
}
.sp-form .form-check-label{ color:var(--sp-ink-soft); }
.sp-btn{
    font-family:var(--sp-display); font-weight:800;
    letter-spacing:.12em; text-transform:uppercase;
    background:var(--sp-accent); border:0; color:var(--sp-ink);
    padding:.8rem 2rem; border-radius:999px;
    transition:transform .18s ease, background .18s ease, color .18s ease;
}
.sp-btn:hover{ background:var(--sp-ink); color:var(--sp-paper); transform:translateY(-2px); }

/* ---------- Pagination (shared markup) ------------------------------------- */
.sp-main .pagination{ gap:.45rem; margin-top:3rem; }
.sp-main .page-link{
    border:1.5px solid var(--sp-line-2); color:var(--sp-ink);
    background:var(--sp-card); border-radius:11px !important;
    font-family:var(--sp-display); font-weight:700; letter-spacing:.05em;
    min-width:46px; text-align:center;
    transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.sp-main .page-link:hover{ background:var(--sp-accent-soft); border-color:var(--sp-accent); color:var(--sp-ink); }
.sp-main .page-item.active .page-link{
    background:var(--sp-accent); border-color:var(--sp-accent); color:var(--sp-ink);
}
.sp-main .page-link:focus{ box-shadow:0 0 0 .2rem var(--sp-accent-soft); }

/* ---------- Editor intro note ---------------------------------------------- */
.sp-note{
    margin-top:3rem; padding:1.6rem 1.8rem;
    background:var(--sp-paper-2); border-radius:var(--sp-r);
    border-left:5px solid var(--sp-accent);
    color:var(--sp-ink-soft);
}
.sp-note__body > *:first-child{ margin-top:0; }
.sp-note__body > *:last-child{ margin-bottom:0; }

/* ---------- Footer (ink-dark anchor) --------------------------------------- */
.sp-foot{ background:var(--sp-foot); color:var(--sp-paper); margin-top:4rem; }
.sp-foot__inner{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:1rem 2rem; padding:2.6rem 0 1.8rem;
}
.sp-foot__brand{
    display:flex; align-items:center; gap:.6rem;
    font-family:var(--sp-display); font-weight:800;
    font-size:1.8rem; letter-spacing:.02em; text-transform:uppercase;
    color:#fff;
}
.sp-foot__mark{
    width:14px; height:14px; display:inline-block; transform:skewX(-12deg);
    background:var(--sp-accent);
}
.sp-foot__nav{ display:flex; gap:.4rem; flex-wrap:wrap; }
.sp-foot__nav a{
    font-family:var(--sp-display); font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; font-size:1rem;
    color:rgba(255,255,255,.74);
    padding:.4rem .85rem; border-radius:999px;
    transition:color .16s ease, background .16s ease;
}
.sp-foot__nav a:hover{ color:#fff; background:rgba(255,255,255,.1); }
.sp-foot__fine{
    padding:1.2rem 0 2rem;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:.9rem; color:rgba(255,255,255,.5);
}

/* ---------- Motion --------------------------------------------------------- */
@keyframes sp-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.sp-hero__body > *{ opacity:0; animation:sp-rise .6s cubic-bezier(.16,.7,.3,1) forwards; }
.sp-hero__body > *:nth-child(1){ animation-delay:.06s; }
.sp-hero__body > *:nth-child(2){ animation-delay:.14s; }
.sp-hero__body > *:nth-child(3){ animation-delay:.22s; }
.sp-hero__body > *:nth-child(4){ animation-delay:.3s; }

@media (prefers-reduced-motion:reduce){
    html{ scroll-behavior:auto; }
    .sp-body *{ animation:none !important; transition:none !important; }
    .sp-hero__body > *{ opacity:1; }
}

/* ---------- Responsive ----------------------------------------------------- *
 * CRITICAL: the category nav uses Bootstrap `.collapse`. At >=992px the
 * collapse wrapper MUST be forced visible or desktop categories vanish.       */
@media (min-width:992px){
    .sp-nav-wrap{
        display:flex !important;
        flex-basis:auto !important;
        flex-grow:0 !important;
        width:auto !important;
    }
}

@media (max-width:991.98px){
    .sp-burger{ display:flex; }
    .sp-nav-wrap{ flex-basis:100%; margin-left:0; }
    .sp-nav-wrap.collapse:not(.show){ display:none; }
    .sp-nav{
        flex-direction:column; align-items:flex-start; gap:0;
        padding-top:.6rem;
    }
    .sp-nav__link{
        width:100%; border-radius:0; padding:.75rem .25rem;
        border-bottom:1px solid var(--sp-line);
    }
    .sp-front{ grid-template-columns:1fr; }
    .sp-hero{ min-height:420px; }
    .sp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:640px){
    .sp-body{ font-size:16px; }
    .sp-grid{ grid-template-columns:1fr; }
    .sp-hero__body{ padding:1.6rem 1.4rem 1.7rem; }
    .sp-hero__flag{ left:1.4rem; }
    .sp-rank,.sp-note{ padding:1.2rem 1.2rem .9rem; }
    .sp-post{ min-height:clamp(300px,62vh,460px); }
    .sp-post__head{ padding-top:2rem; }
    .sp-post__title{ max-width:none; }
    .sp-lap__chip{ font-size:1.1rem; }
    .sp-foot__inner{ flex-direction:column; align-items:flex-start; }
}