:root{--st-ink:#111;--st-muted:#6d6d6d;--st-line:#e7e7e7;--st-dark:#111;--st-accent:#087f72}
*{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--st-ink);font-family:Arial,Helvetica,sans-serif}
.stp{max-width:1180px;margin:0 auto;padding:0 22px 28px}
.stp a{color:inherit;text-decoration:none}
.stp-header{height:64px;display:grid;grid-template-columns:220px 1fr 120px;align-items:center;border-bottom:1px solid #f0f0f0}
.stp-logo{font-size:25px;font-weight:800;letter-spacing:-.7px}.stp-logo span{font-weight:400}
.stp-nav{display:flex;justify-content:center;gap:30px;font-size:15px;font-weight:600}.stp-nav a{padding:24px 0 18px}.stp-nav a.active{border-bottom:2px solid #111}
.stp-utils{display:flex;justify-content:flex-end;gap:18px;font-size:19px}
.stp-hero{height:270px;border-radius:6px;overflow:hidden;position:relative;margin-top:12px;background:#222}.stp-hero img{width:100%;height:100%;object-fit:cover;display:block}.stp-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.18) 52%,rgba(0,0,0,0))}
.stp-hero-copy{position:absolute;z-index:2;left:34px;top:34px;color:#fff;width:450px}.stp-hero-copy .eyebrow{font-family:Georgia,serif;font-size:27px;font-weight:700;line-height:.95}.stp-hero-copy h1{font-family:Georgia,serif;font-size:52px;line-height:.87;margin:0 0 13px;letter-spacing:-2px}.stp-hero-copy p{font-size:13px;line-height:1.45;margin:0 0 17px}
.stp-hero-actions{display:flex;gap:9px}.stp-btn{height:38px;padding:0 15px;border:1px solid rgba(255,255,255,.7);border-radius:5px;color:#fff;display:inline-flex;align-items:center;font-size:14px;font-weight:700;background:rgba(0,0,0,.35)}.stp-btn.light{background:#fff;color:#111;border-color:#fff}
.stp-row{display:grid;gap:12px;margin-top:12px}.stp-row.two{grid-template-columns:1fr 1fr}.stp-row.three{grid-template-columns:31% 25% 44%}
.stp-panel{border:1px solid var(--st-line);border-radius:5px;padding:10px;background:#fff;min-width:0}
.stp-panel-head{display:flex;align-items:center;justify-content:space-between;height:25px;margin-bottom:8px}.stp-title{margin:0;font-size:15px;line-height:1;font-weight:800;text-transform:uppercase;letter-spacing:.1px}.stp-more{font-size:11px;font-weight:600;color:#444;white-space:nowrap}.stp-more:after{content:"  →"}
.stp-events{display:grid;grid-template-columns:58% 42%;gap:9px;height:290px}.stp-event-main{position:relative;border-radius:5px;overflow:hidden}.stp-event-main img{width:100%;height:100%;object-fit:cover}.stp-overlay{position:absolute;inset:0;background:linear-gradient(transparent 36%,rgba(0,0,0,.82))}
.stp-event-copy{position:absolute;left:14px;right:14px;bottom:14px;color:#fff}.stp-event-copy h3{font-family:Georgia,serif;font-size:19px;line-height:1.05;margin:4px 0 7px}
.stp-small-list{display:grid;grid-template-rows:repeat(3,1fr);gap:8px}.stp-small-item{display:grid;grid-template-columns:92px 1fr;gap:9px;align-items:center}.stp-small-item img{width:92px;height:82px;object-fit:cover;border-radius:4px}.stp-small-item h4{font-size:13px;line-height:1.2;margin:0 0 4px}.stp-small-item p{font-size:9px;color:var(--st-muted);line-height:1.35;margin:0}
.stp-news{display:grid;grid-template-columns:61% 39%;gap:10px;height:290px}.stp-news-main{position:relative;overflow:hidden;border-radius:5px}.stp-news-main img{width:100%;height:100%;object-fit:cover}.stp-news-main-copy{position:absolute;left:14px;bottom:14px;color:#fff;z-index:2;width:80%}.stp-news-main-copy h3{font-family:Georgia,serif;font-size:19px;line-height:1.05;margin:4px 0 6px}
.stp-news-side{display:grid;grid-template-rows:repeat(4,1fr);gap:7px}.stp-news-line{display:grid;grid-template-columns:65px 1fr;gap:8px;align-items:center}.stp-news-line img{width:65px;height:52px;object-fit:cover;border-radius:3px}.stp-news-line h4{font-size:13px;line-height:1.25;margin:0 0 2px}.stp-news-line p{font-size:8px;color:var(--st-muted);margin:0}
.stp-editor{height:340px}.stp-editor-main{height:176px;position:relative;border-radius:4px;overflow:hidden;margin-bottom:8px}.stp-editor-main img{width:100%;height:100%;object-fit:cover}.stp-editor-main h3{position:absolute;left:11px;right:10px;bottom:10px;color:#fff;font-family:Georgia,serif;font-size:16px;margin:0;line-height:1.05}.stp-editor-list{display:grid;gap:6px}.stp-editor-item{display:grid;grid-template-columns:58px 1fr;gap:7px;align-items:center}.stp-editor-item img{width:58px;height:38px;object-fit:cover;border-radius:3px}.stp-editor-item h4{font-size:13px;line-height:1.15;margin:0}.stp-editor-item p{font-size:8px;color:var(--st-muted);margin:2px 0 0}
.stp-top{height:340px;display:grid;grid-template-rows:25px 1fr}.stp-top-list{display:grid;grid-template-rows:repeat(5,1fr);overflow:hidden;border-radius:5px;background:#071314;color:#fff}.stp-top-item{display:grid;grid-template-columns:42px 1fr 90px;align-items:center;border-bottom:1px solid rgba(255,255,255,.12);min-height:0}.stp-top-item:last-child{border-bottom:0}.stp-rank{font-family:Georgia,serif;font-size:27px;text-align:center;color:#f4f4f4}.stp-top-item h4{font-size:13px;margin:0 0 2px}.stp-top-item p{font-size:10px;margin:0;color:#c4c4c4}.stp-top-item img{width:90px;height:100%;object-fit:cover}
.stp-promoted{height:340px;display:grid;grid-template-rows:25px 1fr}.stp-promoted-body{display:grid;grid-template-rows:1fr 103px;gap:12px;min-height:0}.stp-promoted-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:0}.stp-business-card{position:relative;overflow:hidden;border-radius:5px;background:#111;color:#fff;min-height:0}.stp-business-card img{width:100%;height:100%;object-fit:cover}.stp-business-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(0,0,0,.88))}.stp-business-card .tag{position:absolute;z-index:2;left:7px;top:7px;background:#e83131;color:#fff;font-size:7px;font-weight:800;padding:3px 5px;border-radius:2px}.stp-business-card .copy{position:absolute;z-index:2;left:8px;right:8px;bottom:8px}.stp-business-card h4{font-size:10px;margin:0 0 3px}.stp-business-card p{font-size:8px;margin:0}
.stp-ad-mini{display:grid;grid-template-columns:70% 30%;border-radius:4px;overflow:hidden;background:#251b17;color:#fff}.stp-ad-mini .left{padding:16px 20px;background:linear-gradient(90deg,#201b18,#2e2724)}.stp-ad-mini .left h3{font-family:Georgia,serif;font-size:23px;line-height:.95;margin:0 0 6px}.stp-ad-mini .right{background:#7f221c;padding:17px;color:#fff}
.stp-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.stp-history{height:auto}.stp-guides{height:220px}.stp-history-img{height:145px;border-radius:4px;overflow:hidden}.stp-history-img img{display:block;width:100%;height:145px;object-fit:cover}.stp-history-teaser{margin:7px 0 0;font-size:10px;line-height:1.35;color:var(--st-muted)}.stp-history-teaser a{color:inherit;text-decoration:none}.stp-history-teaser a:hover{text-decoration:underline}.stp-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stp-guide-card img{width:100%;height:112px;object-fit:cover;border-radius:4px}.stp-guide-card h4{font-size:13px;line-height:1.15;margin:6px 0 2px}.stp-guide-card p{font-size:8px;color:var(--st-muted);margin:0}
.stp-ads{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.stp-ad{height:115px;border-radius:4px;overflow:hidden}.stp-ad img{width:100%;height:100%;object-fit:cover}
.stp-footer{margin-top:14px;border-top:1px solid var(--st-line);padding-top:16px;display:grid;grid-template-columns:2fr repeat(4,1fr) 1.5fr;gap:22px;font-size:13px;color:#333}.stp-footer strong{font-size:11px;color:#111}.stp-footer h4{font-size:18px;margin:0 0 8px}.stp-footer p,.stp-footer a{display:block;margin:0 0 4px}.stp-copy{text-align:right;align-self:end}
@media(max-width:850px){.stp{padding:0 12px 20px}.stp-header{grid-template-columns:1fr auto}.stp-nav{display:none}.stp-row.two,.stp-row.three,.stp-bottom,.stp-ads{grid-template-columns:1fr}.stp-hero{height:300px}.stp-hero-copy{left:20px;top:28px;width:290px}.stp-promoted,.stp-editor,.stp-top{height:auto}.stp-top-list{min-height:330px}.stp-promoted-body{grid-template-rows:250px 105px}.stp-footer{grid-template-columns:1fr 1fr 1fr}}

/* v0.2.1 exact requested heading colours */
.stp-event-main h1,
.stp-event-main h2,
.stp-event-main h3,
.stp-event-main h4,
.stp-event-main h5,
.stp-event-main h6 {
    color: #fff;
}

.stp-top-item h1,
.stp-top-item h2,
.stp-top-item h3,
.stp-top-item h4,
.stp-top-item h5,
.stp-top-item h6 {
    color: #fff;
}


/* v0.2.2 exact requested fixes */
.stp-news-main h1,
.stp-news-main h2,
.stp-news-main h3,
.stp-news-main h4,
.stp-news-main h5,
.stp-news-main h6 {
    color: #fff;
}

.stp-ad-mini {
    position: relative;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.76), rgba(0,0,0,.28)),
        url("images/elucas-banner.jpg");
    background-size: cover;
    background-position: center;
}

.stp-ad-mini-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.stp-ad-mini-link:hover {
    color: inherit;
}

.stp-ad-link {
    display: block;
    width: 100%;
    height: 100%;
}


/* =========================================================
   v0.2.3 MOBILE / RESPONSIVE ONLY
   Desktop rules above remain unchanged.
   ========================================================= */

@media (max-width: 850px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .stp {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 14px 24px !important;
        overflow: hidden;
    }

    /* Header */
    .stp-header {
        height: 72px !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 12px !important;
    }

    .stp-logo {
        font-size: 26px !important;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .stp-nav {
        display: none !important;
    }

    .stp-utils {
        gap: 14px !important;
        font-size: 18px !important;
    }

    /* Hero */
    .stp-hero {
        width: 100% !important;
        height: 360px !important;
        margin-top: 12px !important;
        border-radius: 6px !important;
    }

    .stp-hero img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: 58% center !important;
    }

    .stp-hero:after {
        background: linear-gradient(
            90deg,
            rgba(0,0,0,.74) 0%,
            rgba(0,0,0,.52) 58%,
            rgba(0,0,0,.18) 100%
        ) !important;
    }

    .stp-hero-copy {
        left: 22px !important;
        right: 20px !important;
        top: 36px !important;
        width: auto !important;
        max-width: 390px !important;
    }

    .stp-hero-copy .eyebrow {
        font-family: Georgia, serif !important;
        font-size: 29px !important;
        line-height: 1 !important;
        color: #fff !important;
    }

    .stp-hero-copy h1 {
        font-family: Georgia, serif !important;
        font-size: 54px !important;
        line-height: .9 !important;
        letter-spacing: -2px !important;
        margin: 0 0 18px !important;
        color: #fff !important;
    }

    .stp-hero-copy p {
        max-width: 360px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        color: #fff !important;
        margin-bottom: 18px !important;
    }

    .stp-hero-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .stp-btn {
        min-height: 42px !important;
        height: auto !important;
        padding: 9px 13px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
    }

    /* Universal mobile section typography */
    .stp-panel {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
        overflow: hidden !important;
    }

    .stp-panel-head {
        width: 100% !important;
        height: auto !important;
        min-height: 28px !important;
        margin-bottom: 10px !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .stp-title,
    .stp-panel .stp-title,
    .stp-panel h2.stp-title {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 15px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
        color: #111 !important;
        margin: 0 !important;
    }

    .stp-more {
        flex: 0 0 auto !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
    }

    /* All desktop rows become one clean column */
    .stp-row,
    .stp-row.two,
    .stp-row.three,
    .stp-bottom,
    .stp-ads {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .stp-row {
        margin-top: 12px !important;
    }

    /* Events */
    .stp-events {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        height: auto !important;
    }

    .stp-event-main {
        width: 100% !important;
        height: 310px !important;
    }

    .stp-event-copy h3 {
        font-family: Georgia, serif !important;
        font-size: 24px !important;
        line-height: 1.02 !important;
        color: #fff !important;
    }

    .stp-small-list {
        display: grid !important;
        grid-template-rows: none !important;
        gap: 8px !important;
    }

    .stp-small-item {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .stp-small-item img {
        width: 96px !important;
        height: 76px !important;
    }

    .stp-small-item h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #111 !important;
        overflow-wrap: anywhere;
    }

    .stp-small-item p {
        font-size: 10px !important;
    }

    /* News */
    .stp-news {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        height: auto !important;
    }

    .stp-news-main {
        width: 100% !important;
        height: 290px !important;
    }

    .stp-news-main-copy h3 {
        font-family: Georgia, serif !important;
        font-size: 24px !important;
        line-height: 1.02 !important;
        color: #fff !important;
    }

    .stp-news-side {
        display: grid !important;
        grid-template-rows: none !important;
        gap: 8px !important;
    }

    .stp-news-line {
        display: grid !important;
        grid-template-columns: 82px minmax(0, 1fr) !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .stp-news-line img {
        width: 82px !important;
        height: 62px !important;
    }

    .stp-news-line h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #111 !important;
        overflow-wrap: anywhere;
    }

    .stp-news-line p {
        font-size: 10px !important;
    }

    /* Editor's Picks */
    .stp-editor {
        height: auto !important;
    }

    .stp-editor-main {
        height: 245px !important;
    }

    .stp-editor-main h3 {
        font-family: Georgia, serif !important;
        font-size: 22px !important;
        line-height: 1.05 !important;
        color: #fff !important;
    }

    .stp-editor-item {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 9px !important;
        min-width: 0 !important;
    }

    .stp-editor-item img {
        width: 76px !important;
        height: 52px !important;
    }

    .stp-editor-item h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        color: #111 !important;
        overflow-wrap: anywhere;
    }

    /* Top Streatham */
    .stp-top {
        height: auto !important;
        display: block !important;
    }

    .stp-top-list {
        display: grid !important;
        grid-template-rows: repeat(5, 78px) !important;
        width: 100% !important;
        min-height: 390px !important;
    }

    .stp-top-item {
        grid-template-columns: 54px minmax(0, 1fr) 104px !important;
        min-width: 0 !important;
    }

    .stp-rank {
        font-size: 28px !important;
    }

    .stp-top-item h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        color: #fff !important;
        overflow-wrap: anywhere;
    }

    .stp-top-item p {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 10px !important;
    }

    .stp-top-item img {
        width: 104px !important;
        height: 78px !important;
    }

    /* Promoted */
    .stp-promoted {
        height: auto !important;
        display: block !important;
    }

    .stp-promoted-body {
        display: grid !important;
        grid-template-rows: auto auto !important;
        gap: 10px !important;
    }

    .stp-promoted-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        height: auto !important;
    }

    .stp-business-card {
        min-height: 190px !important;
    }

    .stp-business-card h4 {
        font-size: 12px !important;
    }

    .stp-business-card p {
        font-size: 10px !important;
    }

    .stp-ad-mini-link {
        display: block !important;
        width: 100% !important;
    }

    .stp-ad-mini {
        min-height: 118px !important;
        width: 100% !important;
    }

    /* History & guides */
    .stp-history,
    .stp-guides {
        height: auto !important;
    }

    .stp-history-img {
        width: 100% !important;
        height: 230px !important;
    }

    .stp-guide-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .stp-guide-card {
        min-width: 0 !important;
    }

    .stp-guide-card img {
        width: 100% !important;
        height: 120px !important;
    }

    .stp-guide-card h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 12px !important;
        line-height: 1.18 !important;
        color: #111 !important;
        overflow-wrap: anywhere;
    }

    .stp-guide-card p {
        font-size: 9px !important;
    }

    /* Ads */
    .stp-ads {
        margin-top: 12px !important;
    }

    .stp-ad {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 1.2 !important;
    }

    .stp-ad img {
        object-fit: cover !important;
    }

    /* Footer */
    .stp-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px 20px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .stp-footer strong {
        font-size: 18px !important;
    }

    .stp-footer h4 {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.1 !important;
        color: #111 !important;
    }

    .stp-copy {
        text-align: left !important;
        align-self: start !important;
    }
}


@media (max-width: 560px) {

    .stp {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .stp-header {
        height: 68px !important;
    }

    .stp-logo {
        font-size: 24px !important;
    }

    .stp-utils {
        gap: 11px !important;
        font-size: 17px !important;
    }

    .stp-hero {
        height: 350px !important;
    }

    .stp-hero-copy {
        left: 18px !important;
        right: 18px !important;
        top: 30px !important;
    }

    .stp-hero-copy .eyebrow {
        font-size: 26px !important;
    }

    .stp-hero-copy h1 {
        font-size: 48px !important;
        margin-bottom: 16px !important;
    }

    .stp-hero-copy p {
        font-size: 14px !important;
        line-height: 1.42 !important;
    }

    .stp-btn {
        font-size: 12px !important;
        min-height: 40px !important;
        padding: 8px 11px !important;
    }

    .stp-panel {
        padding: 10px !important;
    }

    .stp-title,
    .stp-panel .stp-title,
    .stp-panel h2.stp-title {
        font-size: 14px !important;
    }

    .stp-more {
        font-size: 10px !important;
    }

    .stp-event-main {
        height: 280px !important;
    }

    .stp-news-main {
        height: 265px !important;
    }

    .stp-editor-main {
        height: 220px !important;
    }

    .stp-event-copy h3,
    .stp-news-main-copy h3 {
        font-size: 21px !important;
    }

    .stp-small-item {
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    .stp-small-item img {
        width: 88px !important;
        height: 70px !important;
    }

    .stp-news-line {
        grid-template-columns: 76px minmax(0, 1fr) !important;
    }

    .stp-news-line img {
        width: 76px !important;
        height: 58px !important;
    }

    .stp-top-list {
        grid-template-rows: repeat(5, 74px) !important;
        min-height: 370px !important;
    }

    .stp-top-item {
        grid-template-columns: 48px minmax(0, 1fr) 88px !important;
    }

    .stp-top-item img {
        width: 88px !important;
        height: 74px !important;
    }

    .stp-rank {
        font-size: 24px !important;
    }

    .stp-promoted-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .stp-business-card {
        min-height: 170px !important;
    }

    .stp-guide-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .stp-guide-card {
        display: grid !important;
        grid-template-columns: 128px minmax(0, 1fr) !important;
        column-gap: 10px !important;
        align-items: start !important;
    }

    .stp-guide-card img {
        grid-row: 1 / span 2 !important;
        width: 128px !important;
        height: 92px !important;
    }

    .stp-guide-card h4 {
        margin-top: 2px !important;
        font-size: 13px !important;
    }

    .stp-history-img {
        height: 205px !important;
    }

    .stp-ad {
        aspect-ratio: 3.2 / 1 !important;
    }

    .stp-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        font-size: 12px !important;
    }

    .stp-footer h4 {
        font-size: 15px !important;
    }

    .stp-copy {
        grid-column: 1 / -1 !important;
    }
}


@media (max-width: 390px) {

    .stp-hero {
        height: 365px !important;
    }

    .stp-hero-copy h1 {
        font-size: 43px !important;
    }

    .stp-hero-copy p {
        font-size: 13px !important;
    }

    .stp-hero-actions {
        gap: 6px !important;
    }

    .stp-btn {
        font-size: 11px !important;
        padding: 8px 9px !important;
    }

    .stp-panel-head {
        gap: 8px !important;
    }

    .stp-title,
    .stp-panel .stp-title,
    .stp-panel h2.stp-title {
        font-size: 13px !important;
    }

    .stp-more {
        font-size: 9px !important;
    }

    .stp-promoted-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .stp-footer {
        grid-template-columns: 1fr 1fr !important;
    }
}


/* =========================================================
   v0.2.4 IMAGE RESPONSIVENESS PASS
   Focus: less aggressive cropping on mobile,
   especially the two bottom banners.
   ========================================================= */

@media (max-width: 850px) {

    /* Use aspect-ratios instead of rigid heights where helpful */
    .stp-hero {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }

    .stp-hero img {
        object-fit: cover !important;
        object-position: center center !important;
    }

    .stp-event-main {
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
    }

    .stp-event-main img,
    .stp-news-main img,
    .stp-editor-main img,
    .stp-history-img img,
    .stp-guide-card img,
    .stp-business-card img,
    .stp-small-item img,
    .stp-news-line img,
    .stp-editor-item img {
        object-position: center center !important;
    }

    .stp-news-main {
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }

    .stp-editor-main {
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
    }

    .stp-history-img {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }

    /* Bottom banners: show full width image, no heavy side cropping */
    .stp-ad {
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        background: transparent !important;
    }

    .stp-ad a,
    .stp-ad-link {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }

    .stp-ad img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 4px !important;
        background: #111 !important;
    }

    /* Mini ad banner: reduce background crop a bit */
    .stp-ad-mini {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 560px) {

    .stp-hero {
        aspect-ratio: 10 / 11 !important;
    }

    .stp-event-main {
        aspect-ratio: 4 / 5.3 !important;
    }

    .stp-news-main {
        aspect-ratio: 4 / 3.3 !important;
    }

    .stp-editor-main {
        aspect-ratio: 4 / 3 !important;
    }

    .stp-history-img {
        aspect-ratio: 16 / 9.4 !important;
    }

    /* Keep banner images fully readable on narrow phones */
    .stp-ad {
        margin: 0 !important;
    }

    .stp-ad img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
}

@media (max-width: 390px) {

    .stp-hero {
        aspect-ratio: 10 / 12 !important;
    }

    .stp-ad img {
        border-radius: 4px !important;
    }
}


/* =========================================================
   v0.2.5 INNER PAGE SYSTEM + PORTAL SIDEBAR
   ========================================================= */

.stp-inner {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.stp-content-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 24px !important;
    align-items: start !important;
    margin-top: 18px !important;
    margin-bottom: 28px !important;
}

.stp-main-column,
.stp-side-column {
    min-width: 0 !important;
}

.stp-main-column {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    padding: 26px 30px 34px;
}

.stp-side-column {
    width: 100%;
}

.stp-side {
    display: grid;
    gap: 12px;
    position: sticky;
    top: 16px;
}

.stp-page-title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: clamp(38px, 5vw, 62px) !important;
    line-height: .98 !important;
    letter-spacing: -2px !important;
    color: #111 !important;
    margin: 2px 0 22px !important;
}

.stp-article-kicker {
    margin: 0 0 8px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.stp-article-meta {
    gap: 14px !important;
    margin: -10px 0 20px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    color: #777 !important;
}

.stp-article-featured {
    margin: 0 0 26px !important;
}

.stp-article-featured img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    border-radius: 4px;
}

.stp-article-content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.72;
    color: #262626;
}

.stp-article-content > * {
    max-width: none !important;
}

.stp-article-content p {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.stp-article-content h2,
.stp-article-content h3,
.stp-article-content h4,
.stp-article-content h5,
.stp-article-content h6 {
    color: #111 !important;
}

.stp-article-content h2 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 34px !important;
    line-height: 1.08 !important;
    letter-spacing: -1px !important;
    margin: 42px 0 15px !important;
}

.stp-article-content h3 {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 25px !important;
    line-height: 1.12 !important;
    margin: 30px 0 12px !important;
}

.stp-article-content h4 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 24px 0 8px !important;
}

.stp-article-content blockquote {
    margin: 26px 0 !important;
    padding: 8px 0 8px 22px !important;
    border-left: 4px solid #111 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 21px !important;
    line-height: 1.45 !important;
}

.stp-article-content ul,
.stp-article-content ol {
    padding-left: 24px;
}

.stp-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Dedicated history hero */
.stp-history-hero {
    position: relative;
    height: 360px;
    overflow: hidden;
    border-radius: 6px;
    margin-top: 12px;
    background: #222;
}

.stp-history-hero > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: sepia(.18) contrast(1.03);
}

.stp-history-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.32) 68%, rgba(0,0,0,.12));
}

.stp-history-hero-copy {
    position: absolute;
    left: 34px;
    bottom: 32px;
    width: min(650px, calc(100% - 68px));
    color: #fff;
}

.stp-history-hero-copy span {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 9px;
}

.stp-history-hero-copy h1 {
    margin: 0 0 10px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 52px;
    line-height: .98;
    letter-spacing: -2px;
    color: #fff !important;
}

.stp-history-hero-copy p {
    max-width: 570px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

/* Sidebar / mini-home */
.stp-side a {
    color: inherit;
    text-decoration: none;
}

.stp-side-ad {
    display: block;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 5px;
    background: #fff;
}

.stp-side-ad .stp-side-label {
    display: block;
    padding: 7px 9px 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    line-height: 1;
    letter-spacing: .08em;
    color: #777;
}

.stp-side-ad img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.stp-side-box {
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    background: #fff;
    padding: 10px;
}

.stp-side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 8px;
}

.stp-side-head h3 {
    margin: 0 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: #111 !important;
}

.stp-side-head > a {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.stp-side-story {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 7px 0;
    border-bottom: 1px solid #ededed;
}

.stp-side-story:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
}

.stp-side-story img {
    width: 76px;
    height: 58px;
    object-fit: cover;
    border-radius: 3px;
}

.stp-side-story-main {
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: 0;
}

.stp-side-story-main img {
    width: 100%;
    height: 128px;
}

.stp-side-story span {
    min-width: 0;
}

.stp-side-story strong {
    display: block;
    font-size: 11px;
    line-height: 1.22;
    color: #111;
}

.stp-side-story small {
    display: block;
    margin-top: 4px;
    font-size: 8px;
    line-height: 1.2;
    color: #777;
}

.stp-side-rank {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    min-height: 56px;
    padding: 7px 8px;
    margin-bottom: 4px;
    background: #171717;
    color: #fff !important;
    border-radius: 3px;
}

.stp-side-rank:last-child {
    margin-bottom: 0;
}

.stp-side-rank b {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1;
    font-weight: 400;
    opacity: .9;
}

.stp-side-rank strong {
    display: block;
    font-size: 11px;
    line-height: 1.15;
}

.stp-side-rank small {
    display: block;
    margin-top: 3px;
    font-size: 8px;
    opacity: .7;
}

.stp-side-feature {
    display: block;
    position: relative;
    height: 170px;
    overflow: hidden;
    border-radius: 4px;
    color: #fff !important;
}

.stp-side-feature:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,.06) 70%);
}

.stp-side-feature > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stp-side-feature-copy {
    position: absolute;
    z-index: 2;
    left: 11px;
    right: 11px;
    bottom: 10px;
}

.stp-side-feature-copy small,
.stp-side-feature-copy strong,
.stp-side-feature-copy em {
    display: block;
}

.stp-side-feature-copy small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
}

.stp-side-feature-copy strong {
    margin-top: 3px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.05;
}

.stp-side-feature-copy em {
    margin-top: 5px;
    font-size: 9px;
    font-style: normal;
}

.stp-side-directory {
    display: block;
    padding: 16px 14px 15px;
    background: #efefef;
    border-radius: 5px;
    border: 1px solid #dedede;
}

.stp-side-directory span,
.stp-side-directory strong,
.stp-side-directory em {
    display: block;
}

.stp-side-directory span {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
}

.stp-side-directory strong {
    margin-top: 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.05;
}

.stp-side-directory em {
    margin-top: 8px;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
}

/* Responsive sidebar behaviour */
@media (max-width: 900px) {
    .stp-content-shell {
        grid-template-columns: minmax(0, 1fr) 260px !important;
        gap: 16px !important;
    }

    .stp-main-column {
        padding: 22px 22px 28px;
    }
}

@media (max-width: 760px) {
    .stp-content-shell {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .stp-side {
        position: static;
        grid-template-columns: minmax(0, 1fr);
    }

    .stp-main-column {
        padding: 20px 16px 26px;
    }

    .stp-history-hero {
        height: 320px;
    }

    .stp-history-hero-copy {
        left: 20px;
        right: 20px;
        bottom: 22px;
        width: auto;
    }

    .stp-history-hero-copy h1 {
        font-size: 42px;
    }

    .stp-article-content {
        font-size: 16px;
        line-height: 1.68;
    }

    .stp-article-content h2 {
        font-size: 29px !important;
    }

    .stp-article-content h3 {
        font-size: 23px !important;
    }
}

@media (max-width: 520px) {
    .stp-side-story-main img {
        height: 150px;
    }

    .stp-history-hero {
        height: 300px;
    }

    .stp-history-hero-copy h1 {
        font-size: 37px;
    }

    .stp-page-title {
        font-size: 40px !important;
        letter-spacing: -1.5px !important;
    }
}


/* =========================================================
   v0.2.6 HISTORY ARTICLE COMPONENTS
   ========================================================= */

.sth-history {
    width: 100%;
}

.sth-history .sth-lead {
    margin: 0 0 28px !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.48;
    color: #222;
}

.sth-history .sth-photo {
    margin: 28px 0 38px;
}

.sth-history .sth-photo img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
}

.sth-history figcaption {
    margin-top: 7px;
    font-size: 11px;
    line-height: 1.35;
    color: #777;
}

.sth-section {
    padding-top: 8px;
    margin-top: 34px;
    border-top: 1px solid #e7e7e7;
}

.sth-section:first-of-type {
    margin-top: 20px;
}

.sth-kicker {
    display: block;
    margin: 20px 0 7px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .09em;
    color: #777;
}

.sth-section > h2,
.sth-sources > h2 {
    margin-top: 0 !important;
}

.sth-fact,
.sth-pride {
    margin: 24px 0;
    padding: 18px 20px;
    border: 1px solid #dadada;
    border-radius: 4px;
    background: #f5f5f3;
}

.sth-fact > strong {
    display: block;
    margin-bottom: 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.2;
}

.sth-fact p {
    margin-bottom: 0 !important;
}

.sth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 26px;
    align-items: start;
}

.sth-quote {
    margin-top: 5px;
    padding: 20px;
    background: #171717;
    color: #fff;
    border-radius: 4px;
}

.sth-quote span {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 42px;
    line-height: 1;
}

.sth-quote p {
    margin: 10px 0 0 !important;
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
}

.sth-person-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
}

.sth-person-strip > div {
    min-height: 95px;
    padding: 13px;
    border: 1px solid #dfdfdf;
    background: #fafafa;
}

.sth-person-strip strong,
.sth-person-strip span {
    display: block;
}

.sth-person-strip strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.12;
}

.sth-person-strip span {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.3;
    color: #777;
}

.sth-timeline {
    position: relative;
    margin: 24px 0 6px;
}

.sth-timeline:before {
    content: "";
    position: absolute;
    left: 88px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: #d8d8d8;
}

.sth-time {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 34px;
    padding: 0 0 22px;
}

.sth-time:last-child {
    padding-bottom: 0;
}

.sth-time:before {
    content: "";
    position: absolute;
    left: 84px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #171717;
}

.sth-time time {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.1;
    text-align: right;
    font-weight: 700;
}

.sth-time strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14px;
    line-height: 1.2;
}

.sth-time p {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.45;
    color: #555;
}

.sth-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 22px;
}

.sth-card {
    padding: 17px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    background: #fff;
}

.sth-card h3 {
    margin: 0 0 9px !important;
    font-size: 20px !important;
}

.sth-card p {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.55;
}

.sth-landmarks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.sth-landmarks article {
    min-width: 0;
}

.sth-landmark-img {
    height: 190px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.sth-placeholder {
    display: grid;
    place-items: center;
    padding: 20px;
    background:
        linear-gradient(135deg, #ecebe7, #d8d6cf);
    border: 1px dashed #bcbab3;
    color: #777;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .03em;
}

.sth-landmarks h3 {
    margin: 0 0 5px !important;
    font-size: 20px !important;
}

.sth-landmarks p {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.5;
}

.sth-pride {
    background: #171717;
    color: #fff;
    border-color: #171717;
}

.sth-pride span,
.sth-pride strong {
    display: block;
}

.sth-pride span {
    margin-bottom: 7px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    opacity: .7;
}

.sth-pride strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1.35;
}

.sth-people {
    margin-top: 20px !important;
    padding-left: 0 !important;
    list-style: none !important;
    border-top: 1px solid #e4e4e4;
}

.sth-people li {
    padding: 12px 0;
    border-bottom: 1px solid #e4e4e4;
    font-size: 14px;
    line-height: 1.5;
}

.sth-truth {
    margin-top: 42px;
    padding: 22px 24px 6px;
    border: 0;
    border-left: 4px solid #242424;
    background: #f3f3f3;
}

.sth-truth .sth-kicker {
    margin-top: 0;
}

.sth-ending {
    margin-top: 24px !important;
    padding: 22px 0 0;
    border-top: 2px solid #171717;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    line-height: 1.5;
}

.sth-sources {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 2px solid #171717;
}

.sth-sources p,
.sth-sources li {
    font-size: 12px;
    line-height: 1.5;
}

.sth-sources ul {
    margin-bottom: 0;
}

.sth-sources a {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .sth-history .sth-lead {
        font-size: 19px;
        line-height: 1.5;
    }

    .sth-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sth-person-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sth-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sth-landmarks {
        grid-template-columns: minmax(0, 1fr);
    }

    .sth-timeline:before {
        left: 68px;
    }

    .sth-time {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 28px;
    }

    .sth-time:before {
        left: 64px;
    }

    .sth-time time {
        font-size: 16px;
    }
}

@media (max-width: 430px) {
    .sth-person-strip {
        grid-template-columns: minmax(0, 1fr);
    }

    .sth-timeline:before {
        left: 56px;
    }

    .sth-time {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 24px;
    }

    .sth-time:before {
        left: 52px;
    }

    .sth-time time {
        font-size: 14px;
    }

    .sth-truth {
        padding-left: 17px;
        padding-right: 17px;
    }
}


/* =========================================================
   v0.2.7 TIMELINE MOBILE FIX
   Move the timeline line to the right edge on mobile
   so the text gets much more space.
   ========================================================= */

@media (max-width: 760px) {
    .sth-timeline {
        position: relative;
        margin-top: 22px;
        padding-right: 26px;
    }

    .sth-timeline:before {
        left: auto !important;
        right: 10px !important;
        top: 6px !important;
        bottom: 6px !important;
    }

    .sth-time {
        display: block !important;
        position: relative;
        padding: 0 20px 22px 0 !important;
    }

    .sth-time:last-child {
        padding-bottom: 0 !important;
    }

    .sth-time:before {
        left: auto !important;
        right: 6px !important;
        top: 7px !important;
    }

    .sth-time time {
        display: block !important;
        margin: 0 0 8px !important;
        text-align: left !important;
        font-size: 17px !important;
        line-height: 1.1 !important;
    }

    .sth-time strong {
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 22px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.02em !important;
    }

    .sth-time p {
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.52 !important;
        color: #555 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 430px) {
    .sth-timeline {
        padding-right: 24px;
    }

    .sth-timeline:before {
        right: 9px !important;
    }

    .sth-time {
        padding-right: 18px !important;
    }

    .sth-time:before {
        right: 5px !important;
    }

    .sth-time time {
        font-size: 16px !important;
    }

    .sth-time strong {
        font-size: 20px !important;
    }

    .sth-time p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}


/* =========================================================
   v0.2.8 TIMELINE FIX - DESKTOP + MOBILE
   Full-width text with the vertical timeline rail on the right.
   ========================================================= */

.sth-timeline {
    position: relative !important;
    margin: 24px 0 6px !important;
    padding-right: 34px !important;
}

.sth-timeline:before {
    left: auto !important;
    right: 12px !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 1px !important;
}

.sth-time {
    display: block !important;
    position: relative !important;
    padding: 0 26px 26px 0 !important;
}

.sth-time:last-child {
    padding-bottom: 0 !important;
}

.sth-time:before {
    left: auto !important;
    right: 8px !important;
    top: 7px !important;
}

.sth-time time {
    display: block !important;
    margin: 0 0 7px !important;
    text-align: left !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
}

.sth-time strong {
    display: block !important;
    margin: 0 0 5px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
}

.sth-time p {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

@media (max-width: 760px) {
    .sth-timeline {
        padding-right: 26px !important;
    }

    .sth-timeline:before {
        right: 10px !important;
    }

    .sth-time {
        padding-right: 20px !important;
        padding-bottom: 22px !important;
    }

    .sth-time:before {
        right: 6px !important;
    }

    .sth-time time {
        font-size: 17px !important;
    }

    .sth-time strong {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    .sth-time p {
        font-size: 14px !important;
        line-height: 1.52 !important;
    }
}

@media (max-width: 430px) {
    .sth-timeline {
        padding-right: 24px !important;
    }

    .sth-timeline:before {
        right: 9px !important;
    }

    .sth-time {
        padding-right: 18px !important;
    }

    .sth-time:before {
        right: 5px !important;
    }

    .sth-time time {
        font-size: 16px !important;
    }

    .sth-time strong {
        font-size: 20px !important;
    }

    .sth-time p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
}


/* v0.2.9 EVENTS PAGE */
.ste-events-hero{margin-top:12px;padding:34px 36px 30px;border-radius:6px;background:#171717;color:#fff}
.ste-events-hero>div{max-width:760px}
.ste-kicker,.ste-section-kicker{display:block;margin-bottom:7px;font-family:Arial,Helvetica,sans-serif;font-size:10px;line-height:1;font-weight:800;letter-spacing:.1em}
.ste-events-hero h1{margin:0 0 12px;font-family:Georgia,"Times New Roman",serif;font-size:52px;line-height:.98;letter-spacing:-2px;color:#fff!important}
.ste-events-hero p{max-width:680px;margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.ste-event-filters{display:flex;gap:7px;overflow-x:auto;padding:11px 0 1px;scrollbar-width:none}
.ste-event-filters::-webkit-scrollbar{display:none}
.ste-event-filters a{flex:0 0 auto;padding:8px 11px;border:1px solid #ddd;border-radius:999px;color:#222;text-decoration:none;font-size:11px;font-weight:700;background:#fff}
.ste-event-filters a.is-active{border-color:#171717;background:#171717;color:#fff}
.ste-events-shell{grid-template-columns:minmax(0,1fr) 280px!important}
.ste-events-main{padding:22px 22px 28px!important}
.ste-section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid #e3e3e3}
.ste-section-head h2{margin:0!important;font-family:Georgia,"Times New Roman",serif!important;font-size:30px!important;line-height:1!important;letter-spacing:-1px!important;color:#111!important}
.ste-section-kicker{color:#777}.ste-count{padding-bottom:2px;font-size:10px;color:#777}
.ste-event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 13px}
.ste-event-card{min-width:0}.ste-event-image{display:block;overflow:hidden;aspect-ratio:4/2.65;border-radius:5px;background:#eee}
.ste-event-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.ste-event-card:hover .ste-event-image img{transform:scale(1.025)}
.ste-event-card-body{padding-top:9px}
.ste-event-meta{display:flex;flex-wrap:wrap;gap:4px 9px;margin-bottom:6px;font-family:Arial,Helvetica,sans-serif;font-size:9px;line-height:1.25}
.ste-event-meta time{font-weight:800;color:#b3261e}.ste-event-meta span{color:#777}
.ste-event-card h3,.ste-event-row h3{margin:0!important;font-family:Georgia,"Times New Roman",serif!important;color:#111!important}
.ste-event-card h3{font-size:18px!important;line-height:1.12!important}
.ste-event-card h3 a,.ste-event-row h3 a{color:inherit;text-decoration:none}
.ste-event-card p{margin:7px 0 0!important;font-size:11px!important;line-height:1.45!important;color:#666!important}
.ste-more-events{margin-top:34px}.ste-list-heading{margin-bottom:0}.ste-event-list{border-bottom:1px solid #e4e4e4}
.ste-event-row{display:grid;grid-template-columns:210px minmax(0,1fr);gap:17px;padding:16px 0;border-top:1px solid #e4e4e4}
.ste-row-image{display:block;overflow:hidden;height:136px;border-radius:4px;background:#eee}
.ste-row-image img{display:block;width:100%;height:100%;object-fit:cover}
.ste-row-copy{min-width:0;align-self:center}.ste-event-row h3{font-size:21px!important;line-height:1.08!important}
.ste-event-row p{max-width:620px;margin:7px 0 9px!important;font-size:12px!important;line-height:1.45!important;color:#666!important}
.ste-row-bottom{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#777}
.ste-row-bottom a{color:#111;font-weight:700;text-decoration:none}
@media(max-width:980px){.ste-events-shell{grid-template-columns:minmax(0,1fr)!important}.ste-events-shell .stp-side-column{order:2}}
@media(max-width:760px){
.ste-events-hero{padding:26px 22px 24px}.ste-events-hero h1{font-size:40px;letter-spacing:-1.5px}.ste-events-hero p{font-size:13px}
.ste-events-main{padding:16px 14px 24px!important}.ste-section-head{align-items:start}.ste-section-head h2{font-size:26px!important}
.ste-event-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 10px}.ste-event-card h3{font-size:17px!important}
.ste-event-row{grid-template-columns:150px minmax(0,1fr);gap:12px}.ste-row-image{height:110px}.ste-event-row h3{font-size:18px!important}}
@media(max-width:520px){
.ste-events-hero{padding:23px 18px 21px}.ste-events-hero h1{font-size:34px}.ste-count{display:none}
.ste-event-grid{grid-template-columns:minmax(0,1fr);gap:20px}.ste-event-image{aspect-ratio:16/9}
.ste-event-card h3{font-size:20px!important}.ste-event-card p{font-size:12px!important}
.ste-event-row{grid-template-columns:112px minmax(0,1fr);gap:11px}.ste-row-image{height:88px}.ste-event-row h3{font-size:16px!important}
.ste-event-row p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:11px!important;margin-bottom:6px!important}
.ste-row-bottom{font-size:8px}}


/* v0.3.0 EVENTS GRID CARD SEPARATION */
.ste-event-card{
    border:1px solid #e7e7e7;
    border-radius:5px;
    overflow:hidden;
    background:#fff;
}

.ste-event-card-body{
    padding:10px 11px 11px;
}

.ste-event-card-link{
    display:inline-block;
    margin-top:9px;
    font-family:Arial,Helvetica,sans-serif;
    font-size:9px;
    line-height:1;
    font-weight:700;
    color:#111;
    text-decoration:none;
}

.ste-event-card-link:hover{
    text-decoration:underline;
}

@media(max-width:520px){
    .ste-event-card-body{
        padding:11px 12px 12px;
    }

    .ste-event-card-link{
        font-size:10px;
    }
}


/* v0.3.1 - align grid View event links right */
.ste-event-card-link{
    display:block !important;
    width:100%;
    text-align:right;
}


/* v0.3.2 dynamic Events integration */
.ste-events-main > .wp-block-shortcode{margin:0!important}
.ste-events-main .stec-single-event h1{max-width:none!important}

/* v0.3.3 Event date/time readability */
.ste-event-meta{font-size:10px!important;line-height:1.3!important}
.ste-event-meta time{font-size:11px!important;letter-spacing:.01em}
.ste-event-meta span{font-size:10px!important}
@media(max-width:520px){
  .ste-event-meta{font-size:10px!important}
  .ste-event-meta time{font-size:11px!important}
}


/* v0.3.8 — Events lower list spans the full portal width.
   Home intentionally uses the original v0.3.3 layout rules unchanged. */
.ste-events-list-full-wrap{
    margin-top:12px!important;
    margin-bottom:28px!important;
}
.ste-events-list-full-wrap > .wp-block-shortcode{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}
.ste-events-list-full-wrap .ste-more-events{
    width:100%!important;
    max-width:none!important;
    margin-top:0!important;
    padding:18px 22px 24px!important;
    border:1px solid #e7e7e7;
    border-radius:5px;
    background:#fff;
}
.ste-events-list-full-wrap .ste-event-row{
    grid-template-columns:240px minmax(0,1fr)!important;
}
.ste-events-list-full-wrap .ste-event-row p{
    max-width:none!important;
}

/* Dynamic Home anchors behave exactly like the original article elements. */
.stp-event-main-link,
.stp-small-item-link{
    color:inherit!important;
    text-decoration:none!important;
}
.stp-event-main-link{
    display:block;
}
.stp-small-item-link{
    display:grid;
    grid-template-columns:92px 1fr;
    gap:9px;
    align-items:center;
}
.stp-event-main-link:focus-visible,
.stp-small-item-link:focus-visible{
    outline:2px solid #111;
    outline-offset:2px;
}

@media(max-width:760px){
    .ste-events-list-full-wrap .ste-more-events{
        padding:14px!important;
    }
    .ste-events-list-full-wrap .ste-event-row{
        grid-template-columns:150px minmax(0,1fr)!important;
    }
}
@media(max-width:520px){
    .ste-events-list-full-wrap .ste-event-row{
        grid-template-columns:112px minmax(0,1fr)!important;
    }
}




/* v0.4.3 — dynamic sidebar keeps the original static sidebar geometry */
.stp-side-column{
    min-width:0;
}
.stp-side-column > .wp-block-html,
.stp-side-column > .wp-block-shortcode{
    width:100%;
    max-width:none;
    margin:0!important;
}
.stp-side-column .stp-side{
    width:100%;
    max-width:none;
    min-width:0;
    box-sizing:border-box;
}
.stp-side-column .stp-side-box,
.stp-side-column .stp-side-ad,
.stp-side-column .stp-side-directory{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}
.stp-side-column .stp-side img{
    max-width:100%;
}
.stp-side-column .stp-side-story,
.stp-side-column .stp-side-feature{
    min-width:0;
}
.stp-side-column .stp-side-story span,
.stp-side-column .stp-side-feature-copy{
    min-width:0;
}


/* v0.4.4 — unified right-column lists */
.stp-side-box .stp-side-story{
    display:grid;
    grid-template-columns:72px minmax(0,1fr);
    gap:9px;
    align-items:center;
    padding:7px 0;
}

.stp-side-box .stp-side-story + .stp-side-story{
    border-top:1px solid #ececec;
}

.stp-side-box .stp-side-story img{
    width:72px;
    height:58px;
    object-fit:cover;
    border-radius:3px;
}

.stp-side-box .stp-side-story strong{
    display:block;
    margin:0 0 3px;
    font-size:12px;
    line-height:1.22;
}

.stp-side-box .stp-side-story small{
    display:block;
    font-size:8px;
    line-height:1.25;
    color:var(--st-muted);
}

.stp-side-box .stp-side-story-main,
.stp-side-box .stp-side-feature{
    display:none!important;
}


/* v0.4.5 — clickable dynamic Home content without changing existing geometry */
.stp-home-card-link{
    color:inherit!important;
    text-decoration:none!important;
}
a.stp-news-main{display:block}
a.stp-news-line{display:grid}
a.stp-editor-main{display:block}
a.stp-editor-item{display:grid}
a.stp-guide-card{display:block}
.stp-home-card-link:hover{color:inherit}


/* v0.4.6 — Directory uses the same portal shell as Events / News / Explore / Articles */
.stp-directory-shell{
    grid-template-columns:minmax(0,1fr) 280px!important;
}
.stp-directory-main{
    padding:22px 22px 28px!important;
}
.stp-directory-main > .wp-block-shortcode{
    width:100%;
    margin:0!important;
}
.stp-directory-main > .wp-block-shortcode:empty{
    display:none;
}
@media(max-width:980px){
    .stp-directory-shell{
        grid-template-columns:minmax(0,1fr)!important;
    }
    .stp-directory-shell .stp-side-column{
        order:2;
    }
}
@media(max-width:760px){
    .stp-directory-main{
        padding:16px 14px 24px!important;
    }
}


/* v0.4.7 — managed banner slots */
.stp-ad > #stp-home-banner-1,
.stp-ad > #stp-home-banner-2{
    width:100%;
    height:100%;
}
.stp-ad .stb-banner{
    width:100%;
    height:100%;
}
.stp-promoted-body > .stb-context-home-mini{
    min-height:103px;
    height:103px;
}
.stp-side > .stb-banner{
    width:100%;
}

@media(max-width:850px){.stp-history-teaser{font-size:11px;line-height:1.4}}

/* v0.4.9 — mobile Then & Now panel must not stretch to Explore height */
@media(max-width:850px){
    .stp-bottom{
        align-items:start!important;
        grid-auto-rows:auto!important;
    }

    .stp-history{
        height:auto!important;
        align-self:start!important;
    }

    .stp-history-teaser{
        margin-top:7px!important;
        margin-bottom:0!important;
    }
}

/* v0.5.0 — mobile slide-in navigation */
.stp-menu-toggle,
.stp-mobile-menu,
.stp-menu-backdrop{
    display:none;
}

@media(max-width:850px){
    .stp-header{
        position:relative;
        grid-template-columns:minmax(0,1fr) auto auto!important;
        gap:10px!important;
    }

    .stp-utils{
        justify-content:flex-end!important;
    }

    .stp-menu-toggle{
        display:inline-flex!important;
        width:40px;
        height:40px;
        padding:9px 8px;
        border:0;
        border-radius:4px;
        background:transparent;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        position:relative;
        z-index:100003;
    }

    .stp-menu-toggle span{
        display:block;
        width:22px;
        height:2px;
        border-radius:2px;
        background:#111;
    }

    .stp-mobile-menu{
        display:block;
        position:fixed;
        top:0;
        right:0;
        width:min(82vw,340px);
        height:100dvh;
        padding:86px 24px 28px;
        background:#fff;
        border-left:1px solid #e7e7e7;
        box-shadow:-12px 0 32px rgba(0,0,0,.14);
        transform:translateX(105%);
        transition:transform .24s ease;
        z-index:100002;
        overflow-y:auto;
    }

    .stp-mobile-menu.is-open{
        transform:translateX(0);
    }

    .stp-menu-close{
        position:absolute;
        top:18px;
        right:18px;
        width:40px;
        height:40px;
        border:0;
        background:transparent;
        font:400 34px/1 Arial,Helvetica,sans-serif;
        color:#111;
        cursor:pointer;
    }

    .stp-mobile-nav{
        display:flex;
        flex-direction:column;
    }

    .stp-mobile-nav a{
        display:block;
        padding:15px 0;
        border-bottom:1px solid #ececec;
        font-family:Arial,Helvetica,sans-serif;
        font-size:18px;
        line-height:1.2;
        font-weight:700;
        color:#111!important;
        text-decoration:none!important;
    }

    .stp-mobile-nav a:first-child{
        border-top:1px solid #ececec;
    }

    .stp-menu-backdrop{
        position:fixed;
        inset:0;
        z-index:100001;
        background:rgba(0,0,0,.32);
    }

    .stp-menu-backdrop.is-open{
        display:block!important;
    }

    body.stp-menu-open{
        overflow:hidden!important;
    }
}

/* v0.5.1 — mobile menu: search inside drawer + proper close icon */
@media(max-width:850px){
    /* Search belongs inside the opened mobile menu, not in the header. */
    .stp-header > .stp-utils{
        display:none!important;
    }

    .stp-header{
        grid-template-columns:minmax(0,1fr) auto!important;
    }

    .stp-menu-close{
        display:block!important;
        position:absolute!important;
        top:20px!important;
        right:18px!important;
        width:40px!important;
        height:40px!important;
        padding:0!important;
        border:0!important;
        background:transparent!important;
        cursor:pointer!important;
    }

    .stp-menu-close span{
        position:absolute;
        left:9px;
        top:19px;
        width:23px;
        height:2px;
        border-radius:2px;
        background:#111;
        transform-origin:center;
    }

    .stp-menu-close span:first-child{
        transform:rotate(45deg);
    }

    .stp-menu-close span:last-child{
        transform:rotate(-45deg);
    }

    .stp-mobile-nav .stp-mobile-search{
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:10px!important;
        width:100%!important;
        height:auto!important;
        min-height:48px!important;
        padding:12px 0!important;
        margin:0 0 5px!important;
        border:0!important;
        border-top:1px solid #ececec!important;
        border-bottom:1px solid #ececec!important;
        border-radius:0!important;
        background:transparent!important;
        color:#111!important;
        font-family:Arial,Helvetica,sans-serif!important;
        font-size:18px!important;
        line-height:1.2!important;
        font-weight:700!important;
        text-align:left!important;
    }

    .stp-mobile-nav .stp-mobile-search:hover,
    .stp-mobile-nav .stp-mobile-search:focus{
        background:#f7f7f7!important;
    }

    .stp-mobile-nav .stp-mobile-search svg{
        flex:0 0 22px!important;
        width:22px!important;
        height:22px!important;
        fill:none!important;
        stroke:currentColor!important;
        stroke-width:1.8!important;
        stroke-linecap:round!important;
    }
}

/* v0.5.2 — mobile polish: menu, logo, mini banner and Then & Now */
@media(max-width:850px){

    /* Once the drawer opens, hide the hamburger completely.
       The drawer's own X is the only close control. */
    .stp-menu-toggle[aria-expanded="true"]{
        visibility:hidden!important;
        pointer-events:none!important;
    }

    /* Match the stronger desktop wordmark weight on mobile. */
    .stp-logo{
        font-weight:900!important;
        letter-spacing:-.8px!important;
    }
    .stp-logo span{
        font-weight:400!important;
    }

    /* Small Promoted Businesses banner:
       show the entire artwork proportionally — never crop the sides. */
    .stp-promoted-body > .stb-context-home-mini{
        height:auto!important;
        min-height:0!important;
        aspect-ratio:auto!important;
        overflow:visible!important;
        background:transparent!important;
    }
    .stp-promoted-body > .stb-context-home-mini img,
    .stp-promoted-body > .stb-context-home-mini a img{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        height:auto!important;
        object-fit:contain!important;
        object-position:center center!important;
    }

    /* Let the mini-banner row follow the artwork's real height. */
    .stp-promoted-body{
        grid-template-rows:auto auto!important;
    }

    /* Then & Now: remove the artificial 16:9 wrapper that was taller
       than the actual image and created the large blank gap. */
    .stp-history{
        display:block!important;
        min-height:0!important;
    }
    .stp-history-img{
        width:100%!important;
        height:auto!important;
        min-height:0!important;
        aspect-ratio:auto!important;
        margin:0!important;
        overflow:hidden!important;
    }
    .stp-history-img .stp-ad-link{
        display:block!important;
        width:100%!important;
        height:auto!important;
    }
    .stp-history-img img{
        display:block!important;
        width:100%!important;
        height:auto!important;
        max-width:100%!important;
        object-fit:contain!important;
        margin:0!important;
    }
    .stp-history-teaser{
        display:block!important;
        margin:8px 0 0!important;
        padding:0!important;
    }
}

@media(max-width:560px){
    /* Cancel the older mobile aspect-ratio rule completely. */
    .stp-history-img{
        aspect-ratio:auto!important;
    }
}