.hp-ticker{background:#fff;border-bottom:1px solid var(--hp-line)}
.hp-ticker-inner{height:56px;display:flex;align-items:center;gap:18px;overflow:hidden}
.hp-ticker-label{background:var(--hp-blue);color:#fff;padding:10px 16px;border-radius:3px;font-size:12px;font-weight:800}
.hp-hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:4px}
.hp-card{background:#fff;border:1px solid var(--hp-line);overflow:hidden}
.hp-card-media{display:block;overflow:hidden;background:#dfe3e8}
.hp-card-media img{width:100%;height:100%;object-fit:cover}
.hp-card-hero{position:relative;height:500px;border-radius:8px 0 0 8px;border:0}
.hp-card-hero .hp-card-media{height:100%}
.hp-card-hero:after,.hp-card-side:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.88));pointer-events:none}
.hp-card-hero .hp-card-body,.hp-card-side .hp-card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding:28px}
.hp-card-hero .hp-card-title{font-size:42px;line-height:1.04;letter-spacing:-1.7px;margin:14px 0 12px;max-width:720px}
.hp-card-hero .hp-card-excerpt{display:none}
.hp-card-side{position:relative;height:248px;border:0}
.hp-card-side:first-child{border-radius:0 8px 0 0}.hp-card-side:last-child{border-radius:0 0 8px 0}
.hp-card-side .hp-card-media{height:100%}
.hp-card-side .hp-card-body{padding:20px}
.hp-card-side .hp-card-title{font-size:22px;line-height:1.08;margin:10px 0 8px}
.hp-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:4px;height:500px}
.hp-dashboard{display:grid;grid-template-columns:1.1fr 1.1fr .75fr;gap:12px}
.hp-panel{background:#fff;border:1px solid var(--hp-line);border-radius:6px;padding:18px}
.hp-news-list{display:grid;gap:12px}
.hp-news-row{display:grid;grid-template-columns:105px 1fr;gap:12px;align-items:center}
.hp-news-row img{width:105px;height:72px;object-fit:cover;border-radius:3px}
.hp-news-row h4{font-size:13px;line-height:1.2;margin:0 0 8px}
.hp-home-feature img{width:100%;height:165px;object-fit:cover;border-radius:3px}
.hp-home-feature h3{font-size:21px;line-height:1.18;margin:12px 0 8px}
.hp-home-sidebar{display:grid;gap:12px}
.hp-fighter-spotlight img{width:100%;height:180px;object-fit:cover;border-radius:3px}
.hp-fighter-spotlight h3{font-size:20px;margin:12px 0 2px}
.hp-spotlight-stat{border-top:1px solid var(--hp-line);padding-top:12px;display:flex;justify-content:space-between;align-items:end}
.hp-spotlight-stat strong{font-size:22px;color:var(--hp-blue)}
.hp-button{display:inline-flex;justify-content:center;background:var(--hp-blue);color:#fff;padding:12px 16px;border-radius:3px;font-weight:800}
.hp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hp-card-standard{border-radius:6px}
.hp-card-standard .hp-card-media{aspect-ratio:16/9}
.hp-card-standard .hp-card-body{padding:16px}
.hp-card-standard .hp-card-title{font-size:20px;line-height:1.15;margin:8px 0}

.hp-home-side{grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important}.hp-home-side .hp-card-side{height:100%!important;min-height:0}.hp-home-dashboard>*{min-width:0}.hp-news-row div{min-width:0}.hp-news-row h4{overflow-wrap:anywhere}.hp-feature h3,.hp-spotlight h3{color:var(--hp-text)!important}

/* Beta 3 homepage fixes */
.hp-ticker-inner{overflow:hidden}
.hp-ticker-stories{display:flex;align-items:center;gap:22px;min-width:0;overflow:hidden}
.hp-ticker-story{display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap;font-size:12px;font-weight:700;color:var(--hp-text)}
.hp-ticker-story img{width:44px;height:28px;object-fit:cover;border-radius:2px;flex:0 0 auto}
.hp-ticker-story span{overflow:hidden;text-overflow:ellipsis}
.hp-badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.hp-badges span{display:inline-flex;background:#1f5db7;color:#fff!important;padding:4px 7px;border-radius:3px;font-size:10px;font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:.03em}
.hp-card-hero:after,.hp-card-side:after{background:linear-gradient(180deg,rgba(0,0,0,.05) 22%,rgba(0,0,0,.22) 52%,rgba(0,0,0,.92) 100%)!important}
.hp-card-hero .hp-card-title,.hp-card-hero .hp-card-title a,.hp-card-side .hp-card-title,.hp-card-side .hp-card-title a{color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.hp-card-hero .hp-card-title{font-size:clamp(30px,3vw,42px)!important;line-height:1.04!important;max-width:680px!important;margin:0 0 10px!important}
.hp-card-side .hp-card-title{font-size:clamp(17px,1.65vw,22px)!important;line-height:1.12!important;margin:0 0 8px!important}
.hp-card-hero .hp-meta,.hp-card-side .hp-meta{color:#e8ebef!important}
.hp-home-sidebar{grid-template-rows:auto auto}
.hp-fighter-spotlight .hp-button{width:100%;margin-top:14px}
.hp-follow-card p{font-size:13px;color:var(--hp-muted);line-height:1.45}
.hp-follow-links ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.hp-follow-links{display:flex;gap:18px;align-items:center;color:var(--hp-blue);font-size:22px}
.hp-category-triptych{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hp-category-card{min-width:0}
.hp-category-card img{width:100%;height:190px;object-fit:cover;border-radius:4px}
.hp-category-card>a>h3{font-size:22px;line-height:1.15;margin:14px 0 8px;color:var(--hp-text)}
.hp-newsletter-strip{margin-top:28px;background:#f1ece4;border:1px solid #eee5da;border-radius:7px;padding:20px 28px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.hp-newsletter-brand{display:flex;align-items:center;gap:18px}
.hp-newsletter-brand img{width:58px;height:58px;object-fit:contain}
.hp-newsletter-brand p{font-family:Georgia,serif;font-size:22px;line-height:1.12;margin:0;color:var(--hp-text)}
.hp-newsletter-strip form{display:flex;flex:1;max-width:520px}
.hp-newsletter-strip input{flex:1;min-width:0;border:1px solid var(--hp-line);padding:13px 14px}
.hp-newsletter-strip button{width:150px;border:0;background:var(--hp-blue);color:#fff;font-weight:800}

.hp-spotlight-link{display:block;color:inherit!important}
.hp-fighter-spotlight img{width:100%;height:245px;object-fit:cover;border-radius:4px}
.hp-fighter-spotlight .hp-button{display:flex;width:100%;margin-top:14px}
.hp-follow-icons{display:flex;align-items:center;gap:18px;margin-top:18px}
.hp-follow-icons a{display:inline-flex;width:24px;height:24px;color:var(--hp-blue)!important}
.hp-follow-icons svg{width:24px;height:24px;fill:currentColor}

/* Final homepage newsletter strip */
.hp-newsletter-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);
  align-items:center;
  gap:34px;
  margin-top:28px;
  padding:24px 30px;
  background:#f1ece4;
  border:1px solid #e8dfd3;
  border-radius:8px;
}
.hp-newsletter-brand{
  display:grid;
  grid-template-columns:64px 1fr;
  align-items:center;
  gap:18px;
}
.hp-newsletter-brand img{
  width:64px;
  height:64px;
  object-fit:contain;
}
.hp-newsletter-brand h2{
  margin:0 0 5px;
  font-size:24px;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--hp-text)!important;
}
.hp-newsletter-brand p{
  margin:0;
  color:var(--hp-muted);
  font-size:14px;
  line-height:1.45;
}
.hp-newsletter-form-wrap small{
  display:block;
  margin-top:8px;
  color:var(--hp-muted);
  font-size:10px;
  line-height:1.4;
}
.hp-newsletter-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
}
.hp-newsletter-form input{
  min-width:0;
  height:52px;
  padding:0 16px;
  border:1px solid var(--hp-line);
  border-right:0;
  border-radius:4px 0 0 4px;
  background:#fff;
  color:var(--hp-text);
}
.hp-newsletter-form input:focus{
  outline:2px solid rgba(23,74,139,.18);
  outline-offset:0;
  border-color:var(--hp-blue);
}
.hp-newsletter-form button{
  height:52px;
  padding:0 24px;
  border:0;
  border-radius:0 4px 4px 0;
  background:var(--hp-blue);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}
.hp-newsletter-form button:hover{
  background:var(--hp-blue-dark);
}
.screen-reader-text{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Beta 5.1: fill the homepage editorial columns */
.hp-dashboard > .hp-panel{
  min-height:100%;
}
.hp-news-list{
  align-content:start;
}
.hp-korean-stories{
  display:grid;
  gap:14px;
}
.hp-korean-lead img{
  width:100%;
  height:165px;
  object-fit:cover;
  border-radius:3px;
}
.hp-korean-lead h3{
  margin:12px 0 7px;
  font-size:21px;
  line-height:1.18;
  color:var(--hp-text)!important;
}
.hp-korean-row{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  align-items:center;
  gap:11px;
  color:var(--hp-text)!important;
}
.hp-korean-row img{
  width:82px;
  height:54px;
  object-fit:cover;
  border-radius:3px;
}
.hp-korean-row h4{
  margin:0 0 5px;
  font-size:12px;
  line-height:1.22;
  color:var(--hp-text)!important;
}
.hp-korean-row .hp-meta{
  font-size:10px;
}

/* =========================================================
   HANPUNCH HOMEPAGE
   MAGAZINE REDESIGN — UPDATE 1
   Hero + Latest
   ========================================================= */


/* ---------------------------------------------------------
   HERO / TOP STORIES
   --------------------------------------------------------- */

.hp-main {
    padding-top: 28px;
}

.hp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, .92fr);
    gap: 6px;
    margin-bottom: 0;
}


/* LEAD STORY */

.hp-card-hero {
    height: 485px;
    border: 0;
    border-radius: 5px 0 0 5px;
    overflow: hidden;
}

.hp-card-hero .hp-card-media {
    height: 100%;
}

.hp-card-hero .hp-card-media img {
    transition: transform .35s ease;
}

.hp-card-hero:hover .hp-card-media img {
    transform: scale(1.015);
}

.hp-card-hero:after {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 25%,
            rgba(0,0,0,.16) 52%,
            rgba(0,0,0,.90) 100%
        ) !important;
}

.hp-card-hero .hp-card-body {
    padding: 34px 34px 30px;
}

.hp-card-hero .hp-card-title {
    max-width: 760px !important;
    margin: 0 0 12px !important;

    font-size: clamp(34px, 3vw, 48px) !important;
    font-weight: 800;
    line-height: 1.01 !important;
    letter-spacing: -.045em !important;
}


/* SIDE / TOP STORIES */

.hp-hero-side {
    height: 485px;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.hp-card-side {
    height: 100% !important;
    min-height: 0;
    border: 0;
}

.hp-card-side:first-child {
    border-radius: 0 5px 0 0;
}

.hp-card-side:last-child {
    border-radius: 0 0 5px 0;
}

.hp-card-side .hp-card-body {
    padding: 20px 22px;
}

.hp-card-side .hp-card-title {
    margin: 0 0 8px !important;

    font-size: clamp(18px, 1.55vw, 24px) !important;
    font-weight: 800;
    line-height: 1.07 !important;
    letter-spacing: -.025em;
}

.hp-card-side:after {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 20%,
            rgba(0,0,0,.24) 55%,
            rgba(0,0,0,.92) 100%
        ) !important;
}


/* Hero labels */

.hp-card-hero .hp-badges span,
.hp-card-side .hp-badges span {
    background: var(--hp-blue);
    border-radius: 2px;

    padding: 5px 8px;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
}


/* ---------------------------------------------------------
   MAGAZINE SECTION HEADINGS
   --------------------------------------------------------- */

.hp-mag-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
    padding-bottom: 11px;

    border-bottom: 2px solid var(--hp-text);
}

.hp-mag-section-heading h2 {
    margin: 0;

    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.025em;

    color: var(--hp-text);
    text-transform: uppercase;
}

.hp-mag-section-heading a {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .025em;

    color: var(--hp-blue);
    text-transform: uppercase;
}

.hp-mag-section-heading a:hover {
    text-decoration: underline;
}


/* ---------------------------------------------------------
   LATEST
   --------------------------------------------------------- */

.hp-home-latest {
    margin-top: 42px;
    margin-bottom: 48px;
}

.hp-latest-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.hp-latest-card {
    min-width: 0;
}


/* Image */

.hp-latest-image {
    display: block;
    position: relative;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 16 / 10;

    background: #e7e9ec;
}

.hp-latest-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.hp-latest-card:hover .hp-latest-image img {
    transform: scale(1.018);
}


/* Content */

.hp-latest-content {
    padding-top: 13px;
}


/* Category / kicker */

.hp-story-kicker {
    margin-bottom: 7px;

    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .07em;

    color: var(--hp-blue);

    text-transform: uppercase;
}


/* Headline */

.hp-latest-card h3 {
    margin: 0 0 10px;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.025em;

    color: var(--hp-text);
}

.hp-latest-card h3 a {
    color: inherit;
}

.hp-latest-card h3 a:hover {
    color: var(--hp-blue);
}


/* Meta */

.hp-latest-card .hp-meta {
    font-size: 10px;
    line-height: 1.35;

    color: var(--hp-muted);
}


/* ---------------------------------------------------------
   TEMPORARY SECONDARY DASHBOARD
   Korean MMA + Fighter Spotlight
   --------------------------------------------------------- */

.hp-dashboard-secondary {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(260px, .65fr);

    gap: 18px;

    align-items: start;
}

.hp-dashboard-secondary .hp-home-feature {
    min-width: 0;
}


/* Give Korean MMA a little more image presence */

.hp-dashboard-secondary .hp-korean-lead img {
    height: 300px;
}


/* ---------------------------------------------------------
   DESKTOP REFINEMENT
   --------------------------------------------------------- */

@media (min-width: 1200px) {

    .hp-latest-card h3 {
        font-size: 21px;
    }

}

/* =========================================================
   HANPUNCH HOMEPAGE — UPDATE 2
   The Interview + Hanpunch Originals
   ========================================================= */


/* =========================================================
   THE INTERVIEW
   ========================================================= */

.hp-interview-section {
    margin-top: 54px;
    margin-bottom: 58px;
}

.hp-interview-heading {
    margin-bottom: 18px;
}

.hp-interview-feature {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, .95fr);

    min-height: 470px;

    background: #f3f1ed;
    border: 1px solid #e4e0da;
}


/* Image */

.hp-interview-image {
    display: block;
    min-width: 0;
    overflow: hidden;
    background: #111;
}

.hp-interview-image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 470px;

    object-fit: cover;

    transition: transform .35s ease;
}

.hp-interview-feature:hover .hp-interview-image img {
    transform: scale(1.012);
}


/* Content */

.hp-interview-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 48px 52px;
}

.hp-interview-eyebrow {
    display: block;

    margin-bottom: 18px;

    color: var(--hp-blue);

    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.hp-interview-content h2 {
    margin: 0 0 18px;

    max-width: 570px;

    font-size: clamp(34px, 3.4vw, 52px);
    font-weight: 900;
    line-height: .99;
    letter-spacing: -.045em;

    color: var(--hp-text);
}

.hp-interview-content h2 a {
    color: inherit;
}

.hp-interview-content h2 a:hover {
    color: var(--hp-blue);
}

.hp-interview-content p {
    max-width: 540px;

    margin: 0 0 16px;

    color: #50545a;

    font-size: 14px;
    line-height: 1.55;
}

.hp-interview-meta {
    margin-bottom: 24px;

    color: var(--hp-muted);

    font-size: 10px;
    font-weight: 600;
    letter-spacing: .025em;

    text-transform: uppercase;
}

.hp-editorial-link {
    display: inline-flex;
    align-self: flex-start;

    color: var(--hp-blue);

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .035em;

    text-transform: uppercase;
}

.hp-editorial-link:hover {
    text-decoration: underline;
}


/* =========================================================
   HANPUNCH ORIGINALS
   ========================================================= */

.hp-originals-section {
    margin-top: 58px;
    margin-bottom: 64px;
}


/* Section Header */

.hp-originals-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 20px;
    padding-bottom: 14px;

    border-bottom: 2px solid var(--hp-text);
}

.hp-originals-header h2 {
    margin: 0;

    color: var(--hp-text);

    font-size: 23px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;

    text-transform: uppercase;
}

.hp-originals-header p {
    margin: 7px 0 0;

    color: var(--hp-muted);

    font-size: 12px;
    line-height: 1.4;
}


/* Main Layout */

.hp-originals-grid {
    display: grid;

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

    gap: 20px;

    align-items: stretch;
}


/* Lead Original */

.hp-originals-lead {
    min-width: 0;
}

.hp-originals-lead-image {
    position: relative;

    display: block;
    overflow: hidden;

    height: 100%;
    min-height: 410px;

    background: #111;
}

.hp-originals-lead-image > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.hp-originals-lead-image:hover > img {
    transform: scale(1.018);
}

.hp-originals-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 15%,
            rgba(0,0,0,.15) 46%,
            rgba(0,0,0,.90) 100%
        );
}

.hp-originals-lead-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 28px 30px 27px;

    color: #fff;
}

.hp-originals-badge {
    display: inline-flex;

    margin-bottom: 12px;
    padding: 5px 8px;

    background: var(--hp-blue);

    color: #fff;

    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .07em;

    text-transform: uppercase;
}

.hp-originals-lead-content h3 {
    max-width: 620px;

    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(27px, 2.7vw, 39px);
    font-weight: 900;
    line-height: 1.03;
    letter-spacing: -.04em;
}

.hp-originals-watch {
    color: #fff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: .05em;

    text-transform: uppercase;
}


/* Secondary Original Cards */

.hp-originals-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 14px;
}

.hp-original-card {
    min-width: 0;
}

.hp-original-card-image {
    display: block;
    overflow: hidden;

    width: 100%;
    aspect-ratio: 4 / 5;

    background: #e6e8eb;
}

.hp-original-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.hp-original-card:hover .hp-original-card-image img {
    transform: scale(1.02);
}

.hp-original-card-content {
    padding-top: 11px;
}

.hp-original-card-content .hp-story-kicker {
    margin-bottom: 6px;
}

.hp-original-card-content h3 {
    margin: 0 0 8px;

    font-size: 16px;
    font-weight: 800;
    line-height: 1.13;
    letter-spacing: -.02em;

    color: var(--hp-text);
}

.hp-original-card-content h3 a {
    color: inherit;
}

.hp-original-card-content h3 a:hover {
    color: var(--hp-blue);
}

.hp-original-card-content .hp-meta {
    font-size: 9px;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .hp-interview-content {
        padding-left: 58px;
        padding-right: 58px;
    }

    .hp-originals-secondary {
        gap: 16px;
    }

}

/* =========================================================
   HANPUNCH HOMEPAGE — UPDATE 3
   Rankings + Fight of the Month
   ========================================================= */

.hp-monthly-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 64px;
    margin-bottom: 64px;
}

.hp-monthly-card {
    min-width: 0;
    padding-top: 15px;
    padding-bottom: 22px;
    border-top: 2px solid var(--hp-text);
    border-bottom: 1px solid var(--hp-line);
    background: #fff;
}

.hp-monthly-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.hp-monthly-heading h2 {
    margin: 0;
    color: var(--hp-text);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.hp-monthly-heading span {
    flex: 0 0 auto;
    color: var(--hp-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* Rankings */

.hp-rankings-subheading {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hp-line);
    color: var(--hp-text);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hp-ranking-list {
    display: grid;
}

.hp-ranking-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 59px;
    border-bottom: 1px solid var(--hp-line);
    color: var(--hp-text);
}

.hp-ranking-row:hover {
    color: var(--hp-blue);
}

.hp-ranking-number {
    color: var(--hp-text);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -.04em;
}

.hp-ranking-fighter {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.hp-ranking-fighter strong {
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-ranking-fighter small {
    color: var(--hp-muted);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
}

.hp-ranking-hpr {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--hp-muted);
}

.hp-ranking-hpr small {
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .06em;
}

.hp-ranking-hpr strong {
    color: var(--hp-blue);
    font-size: 15px;
    font-weight: 900;
}

.hp-rankings-link {
    margin-top: 20px;
}


/* Fight of the Month */

.hp-fight-month-image {
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 8.5;
    background: #e5e7ea;
}

.hp-fight-month-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.hp-fight-month-card:hover .hp-fight-month-image img {
    transform: scale(1.012);
}

.hp-monthly-content {
    padding-top: 15px;
}

.hp-monthly-content h3 {
    max-width: 620px;
    margin: 0 0 10px;
    color: var(--hp-text);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -.035em;
}

.hp-monthly-content h3 a {
    color: inherit;
}

.hp-monthly-content h3 a:hover {
    color: var(--hp-blue);
}

.hp-monthly-content p {
    max-width: 620px;
    margin: 0 0 18px;
    color: var(--hp-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   HANPUNCH HOMEPAGE — EVENTS
   ========================================================= */

.hp-events-section {
    margin-top: 64px;
    margin-bottom: 64px;
}

.hp-events-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 12px;
    border-bottom: 2px solid var(--hp-text);
}

.hp-events-header h2 {
    margin: 0;

    color: var(--hp-text);

    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;

    text-transform: uppercase;
}

.hp-events-header > a {
    color: var(--hp-blue);

    font-size: 10px;
    font-weight: 900;

    text-transform: uppercase;
}

.hp-events-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;

    padding-top: 24px;
}


/* Column heading */

.hp-events-column-heading {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 6px;
}

.hp-events-heading-mark {
    display: block;

    width: 28px;
    height: 3px;

    background: var(--hp-blue);
}

.hp-events-column-heading h3 {
    margin: 0;

    color: var(--hp-text);

    font-size: 15px;
    font-weight: 900;

    text-transform: uppercase;
}


/* Event rows */

.hp-event-list {
    display: grid;
}

.hp-event-row {
    display: grid;
    grid-template-columns:
        56px
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 16px;

    min-height: 88px;

    border-bottom: 1px solid var(--hp-line);

    color: var(--hp-text);
}

.hp-event-row:first-child {
    border-top: 1px solid var(--hp-line);
}

.hp-event-row:hover {
    color: var(--hp-blue);
}


/* Date */

.hp-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 56px;

    border-right: 1px solid var(--hp-line);
}

.hp-event-date strong {
    color: var(--hp-text);

    font-size: 23px;
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.04em;
}

.hp-event-date span {
    margin-top: 5px;

    color: var(--hp-blue);

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .06em;

    text-transform: uppercase;
}


/* Event information */

.hp-event-info {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
}

.hp-event-info small {
    color: var(--hp-blue);

    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;

    text-transform: uppercase;
}

.hp-event-info > strong {
    color: var(--hp-text);

    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}

.hp-event-info > span {
    color: var(--hp-muted);

    font-size: 10px;
}


/* Action */

.hp-event-action {
    color: var(--hp-blue);

    font-size: 9px;
    font-weight: 900;

    white-space: nowrap;

    text-transform: uppercase;
}


/* Empty state */

.hp-events-empty {
    margin: 16px 0 0;

    color: var(--hp-muted);

    font-size: 12px;
}


/* Responsive */

@media (max-width: 850px) {

    .hp-events-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

}

@media (max-width: 560px) {

    .hp-event-row {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        gap: 12px;
    }

    .hp-event-action {
        display: none;
    }

}

/* =========================================================
   MATCH RANKINGS / FIGHT OF THE MONTH HEIGHTS
   ========================================================= */

.hp-monthly-features {
    align-items: stretch;
}

.hp-monthly-card {
    height: 100%;
}

/* Rankings should use the full available height */
.hp-rankings-live {
    display: flex;
    flex-direction: column;
}

/* Let the ranking list occupy the middle space */
.hp-rankings-live .hp-ranking-list {
    flex: 1;
    min-height: 66px;	
}

/* Keep View Full Rankings anchored toward the bottom */
.hp-rankings-live .hp-rankings-link {
    margin-top: auto;
    padding-top: 22px;
}

/* =========================================================
   RANKINGS PANEL — SPACING REFINEMENT
   ========================================================= */

/* Give the panel a little breathing room at the bottom */
.hp-rankings-live {
    padding-bottom: 28px;
}

/* Tighten the individual ranking rows slightly */
.hp-rankings-live .hp-ranking-row {
    min-height: 72px;
}

/* Give the first ranking less excessive separation */
.hp-rankings-live .hp-ranking-list {
    flex: 0 0 auto;
}

/* Push the rankings CTA down while keeping proper bottom padding */
.hp-rankings-live .hp-rankings-link {
    margin-top: auto;
    padding-top: 24px;
    padding-bottom: 0;
}

.hp-rankings-live > .hp-monthly-heading,
.hp-rankings-live > .hp-rankings-subheading,
.hp-rankings-live > .hp-ranking-list,
.hp-rankings-live > .hp-rankings-link {
    margin-left: 18px;
    margin-right: 18px;
}

.hp-fight-month-card {
    padding: 15px 18px 28px;
    box-sizing: border-box;
}

/* Remove the margins previously added */
.hp-fight-month-card > .hp-monthly-heading,
.hp-fight-month-card > .hp-fight-month-image,
.hp-fight-month-card > .hp-monthly-content {
    margin-left: 0;
    margin-right: 0;
}

/* Image stays safely inside the card */
.hp-fight-month-card .hp-fight-month-image {
    width: 100%;
    margin-top: 6px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Text spacing */
.hp-fight-month-card .hp-monthly-content {
    padding-top: 18px;
}

.hp-fight-month-card .hp-editorial-link {
    display: inline-block;
    margin-top: 8px;
}