/* =============================================================================
   HERO SYSTEM 2.0 — distinct editorial opening modes
   Loaded only on singular posts. Existing layout-1 through layout-5 values,
   featured-image sources, global defaults, and per-post overrides remain intact.
   ============================================================================= */

.geekly-post-hero--cut,
.geekly-post-hero--feature-split,
.geekly-post-hero--editorial-index,
.geekly-post-hero--poster-stack,
.geekly-post-hero--cover-story {
    isolation: isolate;
    overflow: clip;
}

.geekly-post-hero--cut .geekly-post-hero__eyebrow::before,
.geekly-post-hero--feature-split .geekly-post-hero__eyebrow::before,
.geekly-post-hero--editorial-index .geekly-post-hero__eyebrow::before,
.geekly-post-hero--poster-stack .geekly-post-hero__eyebrow::before,
.geekly-post-hero--cover-story .geekly-post-hero__eyebrow::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 9px 1px 0;
    border-radius: 50%;
    background: var(--clr-brand);
    box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.15);
}

/* Cinematic Cut: fast, lower-third image-led opening. */
.geekly-post-hero--cut {
    min-height: clamp(580px, 51vw, 760px);
    background: radial-gradient(circle at 78% 18%, rgba(105, 225, 219, 0.18), transparent 24%), #0d0c10;
}
.geekly-post-hero--cut .geekly-post-hero__bg-img {
    transform: scale(1.018);
    filter: saturate(1.02) contrast(1.04) brightness(0.9);
}
.geekly-post-hero--cut .geekly-post-hero__overlay {
    background:
        linear-gradient(90deg, rgba(7, 7, 10, 0.84) 0%, rgba(7, 7, 10, 0.60) 30%, rgba(7, 7, 10, 0.12) 62%, rgba(7, 7, 10, 0.03) 100%),
        linear-gradient(0deg, rgba(7, 7, 10, 0.98) 0%, rgba(7, 7, 10, 0.82) 19%, rgba(7, 7, 10, 0.28) 54%, rgba(7, 7, 10, 0.06) 100%);
}
.geekly-post-hero--cut .geekly-post-hero__accent-bar {
    width: min(38vw, 530px);
    height: 5px;
    background: linear-gradient(90deg, var(--clr-brand), #ff6670 58%, transparent);
    box-shadow: 0 6px 24px rgba(230, 57, 70, 0.28);
}
.geekly-post-hero--cut .geekly-post-hero__content {
    width: min(100% - clamp(56px, 16vw, 256px), 850px);
    max-width: none;
    margin: 0 0 clamp(48px, 5.4vw, 84px) clamp(28px, 8vw, 138px);
    padding: 0;
}
.geekly-post-hero--cut .geekly-post-hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 20px;
}
.geekly-post-hero--cut .geekly-post-hero__eyebrow::before {
    margin: 0 2px 0 0;
}
.geekly-post-hero--cut .geekly-post-hero__format {
    padding: 6px 10px 5px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 3px;
    background: rgba(6, 6, 9, 0.36);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.geekly-post-hero--cut .geekly-post-hero__eyebrow-sep {
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
}
.geekly-post-hero--cut .geekly-post-hero__cat {
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.geekly-post-hero--cut .geekly-post-hero__cat:hover {
    border-color: #fff;
    background: transparent;
}
.geekly-post-hero--cut .geekly-post-hero__title {
    max-width: 10.5ch;
    margin-bottom: 0;
    font-size: clamp(4rem, 6.1vw, 6.4rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.046em;
    text-wrap: balance;
    text-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
}
.geekly-post-hero--cut .geekly-post-hero__subtitle {
    max-width: 58ch;
    margin: 24px 0 0;
    color: #f5f7fa;
    font-size: clamp(0.9375rem, 1.35vw, 1.1875rem);
    line-height: 1.55;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.geekly-post-hero--cut .geekly-post-hero__title-rule {
    width: clamp(58px, 7vw, 104px);
    height: 2px;
    margin: 25px 0 18px;
    background: var(--clr-brand);
    box-shadow: 0 3px 12px rgba(230, 57, 70, 0.35);
}
.geekly-post-hero--cut .geekly-post-hero__meta {
    gap: 10px;
}
.geekly-post-hero--cut .geekly-post-hero__tags {
    gap: 7px;
    margin-top: 17px;
}
.geekly-post-hero--cut .geekly-post-hero__scroll-hint {
    right: clamp(22px, 4vw, 62px);
    left: auto;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
}
.geekly-post-hero--cut .geekly-post-hero__scroll-label {
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.geekly-post-hero--cut .geekly-post-hero__scroll-hint svg {
    width: 28px;
    height: 28px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

/* Feature Split: a considered copy-and-art editorial composition. */
.geekly-post-hero--feature-split {
    min-height: clamp(540px, 47vw, 675px) !important;
    background: #111016 !important;
    border-bottom: 1px solid var(--clr-border);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text {
    position: relative;
    z-index: 2;
    flex: 0 0 45.5%;
    width: 45.5%;
    justify-content: center;
    padding: clamp(50px, 6vw, 105px) clamp(32px, 6.1vw, 110px);
    border-right: 0;
    background:
        radial-gradient(circle at 8% 7%, rgba(230, 57, 70, 0.13), transparent 27%),
        linear-gradient(137deg, #18161d, #0d0c10 83%);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35%;
    height: 5px;
    background: var(--clr-brand);
}
.geekly-post-hero--feature-split .geekly-post-hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 21px;
}
.geekly-post-hero--feature-split .geekly-post-hero__eyebrow::before {
    margin: 0 2px 0 0;
}
.geekly-post-hero--feature-split .geekly-post-hero__format {
    padding: 6px 10px 5px;
    border: 1px solid #55525c;
    border-radius: 3px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--feature-split .geekly-post-hero__eyebrow-sep {
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
}
.geekly-post-hero--feature-split .geekly-post-hero__cat {
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.geekly-post-hero--feature-split .geekly-post-hero__cat:hover {
    border-color: #fff;
    background: transparent;
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__title {
    max-width: 10.25ch;
    margin-bottom: 0;
    font-size: clamp(3.5rem, 5.5vw, 6rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.048em;
    text-wrap: balance;
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__subtitle {
    max-width: 48ch;
    margin: 24px 0 0;
    color: #d8dde3;
    font-size: clamp(0.9375rem, 1.25vw, 1.125rem);
    line-height: 1.57;
}
.geekly-post-hero--feature-split .geekly-post-hero__title-rule {
    width: 83px;
    height: 2px;
    margin: 27px 0 18px;
    background: var(--clr-brand);
}
.geekly-post-hero--feature-split .geekly-post-hero__tags {
    gap: 7px;
    margin-top: 17px;
}
.geekly-post-hero--feature-split .geekly-post-hero__split-image {
    --geekly-feature-frame: clamp(17px, 2.3vw, 34px);
    flex: 0 0 54.5%;
    width: 54.5%;
    min-height: 100%;
    padding: var(--geekly-feature-frame);
    background: linear-gradient(145deg, #2b2831, #111015 72%);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-image::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: var(--geekly-feature-frame);
    border: 1px solid rgba(255, 255, 255, 0.34);
    pointer-events: none;
}
.geekly-post-hero--feature-split .geekly-post-hero__split-img {
    inset: var(--geekly-feature-frame);
    width: calc(100% - (var(--geekly-feature-frame) * 2));
    height: calc(100% - (var(--geekly-feature-frame) * 2));
    filter: saturate(0.92) contrast(1.06);
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.32);
}
/* Editorial Index: typography-first authority without requiring art. */
.geekly-post-hero--editorial-index {
    min-height: clamp(555px, 53vw, 720px) !important;
    display: grid;
    align-items: end;
    padding: clamp(72px, 9vw, 128px) clamp(32px, 12vw, 210px) clamp(70px, 8vw, 120px);
    background:
        radial-gradient(circle at 103% 112%, rgba(230, 57, 70, 0.17) 0 14%, transparent 14.1%),
        radial-gradient(circle at 103% 112%, transparent 0 19%, rgba(230, 57, 70, 0.08) 19.1% 19.55%, transparent 19.65%),
        radial-gradient(circle at 74% 9%, rgba(41, 72, 88, 0.17), transparent 27%),
        linear-gradient(135deg, #101014, #191419 53%, #10151a) !important;
}
.geekly-post-hero--editorial-index::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(rgba(255, 255, 255, 0.16) 0.55px, transparent 0.55px);
    background-size: 4px 4px;
    mix-blend-mode: overlay;
}
.geekly-post-hero--editorial-index::after {
    content: '';
    position: absolute;
    top: clamp(50px, 7vw, 106px);
    bottom: clamp(52px, 7vw, 104px);
    left: clamp(25px, 8vw, 145px);
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(230, 57, 70, 0.85) 11%, rgba(255,255,255,0.19) 74%, transparent);
}
.geekly-post-hero--editorial-index .geekly-post-hero__minimal-inner {
    z-index: 1;
    width: min(100% - 30px, 1000px);
    margin: 0 0 0 clamp(24px, 4vw, 72px);
    padding: 0;
    position: relative;
}
.geekly-post-hero--editorial-index .geekly-post-hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 22px;
}
.geekly-post-hero--editorial-index .geekly-post-hero__eyebrow::before {
    margin: 0 2px 0 0;
}
.geekly-post-hero--editorial-index .geekly-post-hero__format {
    padding: 6px 10px 5px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 3px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--editorial-index .geekly-post-hero__eyebrow-sep {
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
}
.geekly-post-hero--editorial-index .geekly-post-hero__cat {
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.geekly-post-hero--editorial-index .geekly-post-hero__cat:hover {
    border-color: #fff;
    background: transparent;
}
.geekly-post-hero--editorial-index .geekly-post-hero__title {
    max-width: 10.2ch;
    margin: 0;
    font-size: clamp(4.35rem, 8vw, 8.1rem);
    font-weight: 900;
    line-height: 0.79;
    letter-spacing: -0.055em;
    text-wrap: balance;
}
.geekly-post-hero--editorial-index.geekly-post-hero--long-title .geekly-post-hero__title {
    max-width: 12.5ch;
    font-size: clamp(3.4rem, 6.2vw, 6.8rem);
    line-height: 0.82;
}
.geekly-post-hero--editorial-index .geekly-post-hero__subtitle {
    max-width: 56ch;
    margin: 27px 0 0;
    color: #d6dce3;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.58;
}
.geekly-post-hero--editorial-index .geekly-post-hero__minimal-divider {
    width: min(20vw, 170px);
    height: 5px;
    margin: 29px 0 25px;
    background: var(--clr-brand);
    box-shadow: 0 5px 18px rgba(230, 57, 70, 0.24);
}
.geekly-post-hero--editorial-index .geekly-post-hero__tags {
    gap: 7px;
    margin-top: 17px;
}
.geekly-post-hero--editorial-index .geekly-post-hero__index-label {
    position: absolute;
    z-index: 1;
    left: clamp(35px, 4vw, 78px);
    top: clamp(56px, 8vw, 114px);
    color: #aeb7c1;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.geekly-post-hero--editorial-index .geekly-post-hero__index-handoff {
    position: absolute;
    z-index: 1;
    right: clamp(35px, 7vw, 116px);
    bottom: clamp(56px, 8vw, 118px);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a2abb5;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.geekly-post-hero--editorial-index .geekly-post-hero__index-handoff::after {
    content: '→';
    color: var(--clr-brand);
    font-size: 1.0625rem;
}
/* Poster Stack: collectible featured art for rankings, lists, and play-led formats. */
.geekly-post-hero--poster-stack {
    min-height: clamp(600px, 57vw, 790px) !important;
    padding: clamp(52px, 7vw, 108px) clamp(34px, 8vw, 142px) clamp(76px, 9vw, 140px);
    display: grid !important;
    grid-template-columns: minmax(310px, 0.8fr) minmax(390px, 1.15fr);
    gap: clamp(54px, 8vw, 142px);
    align-items: center;
    background:
        radial-gradient(circle at 9% 83%, rgba(115, 82, 164, 0.24), transparent 25%),
        radial-gradient(circle at 79% 18%, rgba(230, 57, 70, 0.08), transparent 22%),
        linear-gradient(145deg, #111015, #09090c 74%) !important;
}
.geekly-post-hero--poster-stack::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, black, transparent 68%);
    pointer-events: none;
}
.geekly-post-hero--poster-stack .geekly-post-hero__accent-bar { display: none; }
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-image {
    z-index: 1;
    width: min(100%, 520px);
    max-height: none;
    aspect-ratio: 4 / 5;
    margin-left: clamp(0px, 3vw, 54px);
    overflow: visible;
    box-shadow: 16px 19px 0 var(--clr-brand), 32px 37px 0 rgba(115, 82, 164, 0.55), 0 32px 80px rgba(0, 0, 0, 0.45);
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-image::after {
    content: '';
    position: absolute;
    inset: 18px;
    z-index: 1;
    height: auto;
    border: 1px solid rgba(255,255,255,.35);
    background: none;
    pointer-events: none;
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-img {
    height: 100%;
    object-fit: cover;
    filter: saturate(0.98) contrast(1.06);
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-text {
    z-index: 1;
    max-width: 710px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}
.geekly-post-hero--poster-stack .geekly-post-hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 21px;
}
.geekly-post-hero--poster-stack .geekly-post-hero__eyebrow::before {
    margin: 0 2px 0 0;
}
.geekly-post-hero--poster-stack .geekly-post-hero__format {
    padding: 6px 10px 5px;
    border: 1px solid rgba(255,255,255,.38);
    border-radius: 3px;
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--poster-stack .geekly-post-hero__eyebrow-sep {
    color: rgba(255, 255, 255, 0.52);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
}
.geekly-post-hero--poster-stack .geekly-post-hero__cat {
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.42);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.geekly-post-hero--poster-stack .geekly-post-hero__cat:hover {
    border-color: #fff;
    background: transparent;
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-text .geekly-post-hero__title {
    max-width: 10.2ch;
    margin: 0;
    font-size: clamp(3.8rem, 6.2vw, 6.55rem);
    font-weight: 900;
    line-height: 0.81;
    letter-spacing: -0.05em;
    text-wrap: balance;
}
.geekly-post-hero--poster-stack .geekly-post-hero__subtitle {
    max-width: 53ch;
    margin: 25px 0 0;
    color: #d9dfe6;
    font-size: clamp(0.9375rem, 1.35vw, 1.1875rem);
    line-height: 1.57;
}
.geekly-post-hero--poster-stack .geekly-post-hero__title-rule {
    width: 96px;
    height: 3px;
    margin: 27px 0 19px;
    background: var(--clr-brand);
    box-shadow: 0 4px 15px rgba(230,57,70,.27);
}
.geekly-post-hero--poster-stack .geekly-post-hero__vote-row {
    gap: 8px;
    margin: 16px 0 0;
}
.geekly-post-hero--poster-stack .geekly-post-hero__tags {
    gap: 7px;
    margin-top: 14px;
}
.geekly-post-hero--poster-stack:not(.geekly-post-hero--has-image) {
    grid-template-columns: 1fr;
}

/* Cover Story: a rare, full-bleed flagship release with a protected reading lane. */
.geekly-post-hero--cover-story {
    min-height: max(720px, 88vh) !important;
    background: #0a0a0e;
}
.geekly-post-hero--cover-story .geekly-post-hero__immersive-overlay {
    background:
        linear-gradient(90deg, rgba(6, 6, 9, 0.92) 0%, rgba(6, 6, 9, 0.59) 37%, rgba(6, 6, 9, 0.1) 76%),
        linear-gradient(0deg, rgba(6, 6, 9, 0.94), rgba(6, 6, 9, 0.06) 66%);
}
.geekly-post-hero--cover-story .geekly-post-hero__bg-img {
    transform: scale(1.022);
    object-position: center 32%;
    filter: saturate(0.9) contrast(1.11) brightness(0.94);
}
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast {
    position: absolute;
    z-index: 3;
    top: clamp(28px, 3.5vw, 54px);
    left: clamp(24px, 5vw, 92px);
    right: clamp(24px, 5vw, 92px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255,255,255,.38);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast::before {
    content: '';
    position: absolute;
    right: 45%;
    bottom: -1px;
    width: min(18vw, 180px);
    height: 1px;
    background: rgba(230, 57, 70, 0.75);
}
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast b { color: var(--clr-brand); }
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast span:last-child { color: #b9c1ca; text-align: right; }
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content {
    align-items: flex-start;
    justify-content: flex-end;
    max-width: min(72vw, 1050px);
    padding: clamp(124px, 14vw, 200px) clamp(28px, 8vw, 138px) clamp(64px, 7vw, 110px);
}
.geekly-post-hero--cover-story .geekly-post-hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.geekly-post-hero--cover-story .geekly-post-hero__eyebrow::before { margin: 0 2px 0 0; }
.geekly-post-hero--cover-story .geekly-post-hero__format {
    padding: 6px 10px 5px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 3px;
    background: rgba(7,7,10,.28);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.geekly-post-hero--cover-story .geekly-post-hero__eyebrow-sep {
    color: rgba(255,255,255,.52);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
}
.geekly-post-hero--cover-story .geekly-post-hero__cat {
    padding: 0 0 1px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.45);
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 0.6875rem;
    line-height: 1.1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.geekly-post-hero--cover-story .geekly-post-hero__cat:hover {
    border-color: #fff;
    background: transparent;
}
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__title {
    max-width: 10.2ch;
    font-size: clamp(4.4rem, 8.7vw, 9rem);
    font-weight: 900;
    line-height: 0.79;
    letter-spacing: -0.056em;
    text-align: left;
    text-wrap: balance;
    text-shadow: 0 6px 34px rgba(0,0,0,.52);
}
.geekly-post-hero--cover-story.geekly-post-hero--long-title .geekly-post-hero__immersive-content .geekly-post-hero__title {
    max-width: 12.5ch;
    font-size: clamp(3.5rem, 6.5vw, 7rem);
    line-height: 0.82;
}
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__subtitle {
    max-width: 57ch;
    margin: 27px 0 0;
    color: #e0e5ea;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.57;
    text-shadow: 0 2px 15px rgba(0,0,0,.48);
}
.geekly-post-hero--cover-story .geekly-post-hero__title-rule {
    width: clamp(72px, 8vw, 120px);
    height: 3px;
    margin: 28px 0 19px;
    background: var(--clr-brand);
    box-shadow: 0 4px 16px rgba(230,57,70,.35);
}
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__meta,
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__tags,
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__vote-row {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}
.geekly-post-hero--cover-story .geekly-post-hero__tags { gap: 7px; margin-top: 17px; }
.geekly-post-hero--cover-story .geekly-post-hero__scroll-hint {
    right: clamp(26px, 5vw, 92px);
    left: auto;
    bottom: clamp(28px, 4vw, 62px);
}

@media (prefers-reduced-motion: no-preference) {
    .geekly-post-hero--cut .geekly-post-hero__bg-img,
    .geekly-post-hero--cover-story .geekly-post-hero__bg-img {
        animation: geekly-hero-settle 1000ms cubic-bezier(.2,.8,.2,1) both;
    }
}
@keyframes geekly-hero-settle {
    from { opacity: 0.72; transform: scale(1.09); }
    to { opacity: 1; transform: scale(1.035); }
}

@media (max-width: 767px) {
    .geekly-post-hero--cut { min-height: clamp(570px, 165vw, 680px); }
    .geekly-post-hero--cut .geekly-post-hero__content { width: auto; max-width: none; margin: 0 22px 36px; padding: 0; }
    .geekly-post-hero--cut .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 16px; }
    .geekly-post-hero--cut .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--cut .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--cut .geekly-post-hero__title { max-width: 10.4ch; font-size: clamp(3.15rem, 14vw, 4.35rem); }
    .geekly-post-hero--cut .geekly-post-hero__subtitle { margin-top: 17px; font-size: 0.9375rem; }
    .geekly-post-hero--cut .geekly-post-hero__title-rule { margin: 20px 0 15px; }
    .geekly-post-hero--cut .geekly-post-hero__tags { margin-top: 14px; }
    .geekly-post-hero--cut .geekly-post-hero__overlay { background: linear-gradient(0deg, rgba(7,7,10,.99) 0%, rgba(7,7,10,.72) 41%, rgba(7,7,10,.11) 100%); }
    .geekly-post-hero--cut .geekly-post-hero__scroll-hint { display: none; }

    .geekly-post-hero--feature-split { display: flex !important; flex-direction: column-reverse; min-height: 0 !important; }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text { flex: none; width: 100%; padding: 33px 23px 43px; }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text::after { width: 34%; height: 4px; }
    .geekly-post-hero--feature-split .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 16px; }
    .geekly-post-hero--feature-split .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image { --geekly-feature-frame: 15px; flex: none; width: 100%; min-height: 278px; padding: var(--geekly-feature-frame); }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__title { max-width: 10ch; font-size: clamp(3.1rem, 13.7vw, 4.25rem); }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.9375rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__title-rule { margin: 20px 0 15px; }
    .geekly-post-hero--feature-split .geekly-post-hero__tags { margin-top: 14px; }

    .geekly-post-hero--editorial-index { min-height: 600px !important; display: block; padding: 98px 24px 54px 50px; }
    .geekly-post-hero--editorial-index::after { top: 32px; bottom: 30px; left: 24px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__index-label,
    .geekly-post-hero--editorial-index .geekly-post-hero__index-handoff { display: none; }
    .geekly-post-hero--editorial-index .geekly-post-hero__minimal-inner { width: auto; margin: 0 0 0 25px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 17px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--editorial-index .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--editorial-index .geekly-post-hero__title { max-width: 9.7ch; font-size: clamp(3.5rem, 15vw, 5rem); }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title .geekly-post-hero__title { max-width: 11.5ch; font-size: clamp(3.2rem, 12.7vw, 4.25rem); }
    .geekly-post-hero--editorial-index .geekly-post-hero__subtitle { margin-top: 20px; font-size: 0.9375rem; }
    .geekly-post-hero--editorial-index .geekly-post-hero__minimal-divider { width: 67px; height: 4px; margin: 22px 0 17px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__tags { margin-top: 14px; }

    .geekly-post-hero--poster-stack { display: flex !important; flex-direction: column; align-items: stretch; min-height: 0 !important; gap: 46px; padding: 34px 24px 65px; }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-image { width: calc(100% - 20px); height: auto; margin: 0 20px 0 0; box-shadow: 12px 14px 0 var(--clr-brand), 24px 26px 0 rgba(115, 82, 164, 0.52); }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-image::after { inset: 13px; }
    .geekly-post-hero--poster-stack .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 16px; }
    .geekly-post-hero--poster-stack .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--poster-stack .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-text .geekly-post-hero__title { max-width: 10ch; font-size: clamp(3.1rem, 13.8vw, 4.45rem); }
    .geekly-post-hero--poster-stack .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.9375rem; }
    .geekly-post-hero--poster-stack .geekly-post-hero__title-rule { margin: 20px 0 15px; }
    .geekly-post-hero--poster-stack .geekly-post-hero__tags { margin-top: 14px; }

    .geekly-post-hero--cover-story { min-height: 680px !important; }
    .geekly-post-hero--cover-story .geekly-post-hero__bg-img { object-position: 58% 30%; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-overlay { background: linear-gradient(0deg, rgba(6,6,9,.97), rgba(6,6,9,.65) 42%, rgba(6,6,9,.08) 100%); }
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast { top: 26px; left: 20px; right: 20px; display: flex; justify-content: space-between; font-size: 0.625rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast::before,
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast span:last-child { display: none; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content { max-width: none; padding: 126px 24px 48px; }
    .geekly-post-hero--cover-story .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 17px; }
    .geekly-post-hero--cover-story .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__title { max-width: 9.7ch; font-size: clamp(3.35rem, 14.3vw, 5rem); }
    .geekly-post-hero--cover-story.geekly-post-hero--long-title .geekly-post-hero__immersive-content .geekly-post-hero__title { max-width: 11.5ch; font-size: clamp(3.1rem, 12.7vw, 4.3rem); }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__subtitle { margin-top: 20px; font-size: 0.9375rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__title-rule { margin: 22px 0 17px; }
    .geekly-post-hero--cover-story .geekly-post-hero__tags { margin-top: 14px; }
    .geekly-post-hero--cover-story .geekly-post-hero__scroll-hint { display: none; }
}

/* =============================================================================
   EDITORIAL STAGE — approved layout-one refinement
   Layout-1 retains its existing stored value and shared reader behaviour.
   ============================================================================= */

.geekly-post-hero--cut {
    min-height: clamp(620px, 52vw, 780px);
    background:
        radial-gradient(circle at 66% 86%, rgba(105, 21, 32, 0.16), transparent 25%),
        radial-gradient(circle at 88% 15%, rgba(40, 79, 99, 0.12), transparent 25%),
        #0d0c10;
}

.geekly-post-hero--cut .geekly-post-hero__bg {
    left: auto;
    width: 48%;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}

.geekly-post-hero--cut .geekly-post-hero__bg-img {
    object-position: 59% 46%;
    transform: scale(1.04);
    filter: saturate(0.89) contrast(1.08) brightness(0.93);
}

.geekly-post-hero--cut .geekly-post-hero__overlay {
    background:
        linear-gradient(90deg, #0b0b0f 0%, rgba(11, 11, 15, 0.55) 24%, rgba(11, 11, 15, 0.08) 63%),
        linear-gradient(0deg, rgba(9, 9, 12, 0.64), transparent 48%);
}

.geekly-post-hero--cut::before {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #0b0b0f 0%, #0b0b0f 41%, rgba(11, 11, 15, 0.94) 61%, rgba(11, 11, 15, 0.12) 86%),
        radial-gradient(circle at 66% 84%, rgba(105, 21, 32, 0.16), transparent 25%);
}

.geekly-post-hero--cut .geekly-post-hero__accent-bar {
    width: min(46%, 680px);
    height: 5px;
}

.geekly-post-hero--cut .geekly-post-hero__content {
    z-index: 2;
    width: min(75%, 1100px);
    margin: 0 0 clamp(60px, 6vw, 96px) clamp(32px, 8vw, 122px);
    padding: 0;
}

.geekly-post-hero--cut .geekly-post-hero__eyebrow {
    margin-bottom: 26px;
}

.geekly-post-hero--cut .geekly-post-hero__title {
    max-width: 16.5ch;
    font-size: clamp(3.35rem, 5.05vw, 5.85rem);
    line-height: 0.88;
    letter-spacing: -0.046em;
    text-wrap: pretty;
}

.geekly-post-hero--cut.geekly-post-hero--long-title .geekly-post-hero__title {
    max-width: 20ch;
    font-size: clamp(2.95rem, 4.25vw, 5.05rem);
    line-height: 0.9;
    letter-spacing: -0.042em;
    text-wrap: balance;
}

.geekly-post-hero--cut .geekly-post-hero__subtitle {
    max-width: 63ch;
    margin: 28px 0 0;
    color: #dce2e8;
    line-height: 1.63;
}

.geekly-post-hero--cut .geekly-post-hero__title-rule {
    width: clamp(78px, 8vw, 122px);
    height: 3px;
    margin: 29px 0 19px;
}

.geekly-post-hero--cut .geekly-post-hero__meta,
.geekly-post-hero--cut .geekly-post-hero__vote-row,
.geekly-post-hero--cut .geekly-post-hero__tags {
    position: relative;
    z-index: 1;
}

.geekly-post-hero--cut .geekly-post-hero__tags {
    margin-top: 16px;
}

@media (max-width: 1100px) {
    .geekly-post-hero--cut .geekly-post-hero__content {
        width: min(82%, 900px);
        margin-left: clamp(30px, 6vw, 78px);
    }

    .geekly-post-hero--cut .geekly-post-hero__bg {
        width: 51%;
    }

    .geekly-post-hero--cut .geekly-post-hero__title {
        max-width: 17.5ch;
        font-size: clamp(3rem, 5.25vw, 4.9rem);
    }

    .geekly-post-hero--cut.geekly-post-hero--long-title .geekly-post-hero__title {
        max-width: 19ch;
        font-size: clamp(2.7rem, 4.7vw, 4.35rem);
    }
}

@media (max-width: 767px) {
    .geekly-post-hero--cut {
        min-height: clamp(780px, 208vw, 900px);
        align-items: flex-end;
    }

    .geekly-post-hero--cut .geekly-post-hero__bg {
        top: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 58%;
        clip-path: none;
        /* The image overlaps the copy field, then dissolves into the stage.
           This prevents a hard edge when the art-band height changes. */
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.92) 61%, rgba(0, 0, 0, 0.42) 80%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 48%, rgba(0, 0, 0, 0.92) 61%, rgba(0, 0, 0, 0.42) 80%, transparent 100%);
    }

    .geekly-post-hero--cut .geekly-post-hero__bg-img {
        object-position: 52% 36%;
        transform: none;
    }

    .geekly-post-hero--cut .geekly-post-hero__overlay {
        background: linear-gradient(to bottom, rgba(11, 11, 15, 0) 0%, rgba(11, 11, 15, 0.08) 38%, rgba(11, 11, 15, 0.76) 75%, #0b0b0f 100%);
    }

    .geekly-post-hero--cut::before {
        background: linear-gradient(to bottom, rgba(11, 11, 15, 0.04) 0%, rgba(11, 11, 15, 0.18) 35%, rgba(11, 11, 15, 0.78) 63%, #0b0b0f 82%);
    }

    .geekly-post-hero--cut .geekly-post-hero__accent-bar {
        width: 58%;
    }

    .geekly-post-hero--cut .geekly-post-hero__content {
        width: auto;
        margin: 0 23px 42px;
        padding: 0;
    }

    .geekly-post-hero--cut .geekly-post-hero__eyebrow {
        margin-bottom: 18px;
    }

    .geekly-post-hero--cut .geekly-post-hero__title,
    .geekly-post-hero--cut.geekly-post-hero--long-title .geekly-post-hero__title {
        max-width: 15.2ch;
        font-size: clamp(2.72rem, 11.7vw, 4.05rem);
        line-height: 0.96;
        letter-spacing: -0.043em;
        text-wrap: wrap;
    }

    .geekly-post-hero--cut .geekly-post-hero__subtitle {
        margin-top: 20px;
        font-size: 0.9375rem;
        line-height: 1.6;
    }

    .geekly-post-hero--cut .geekly-post-hero__title-rule {
        width: 66px;
        margin: 22px 0 16px;
    }

    .geekly-post-hero--cut .geekly-post-hero__tags {
        margin-top: 14px;
    }
}

/* =============================================================================
   EDITORIAL STAGE — RESPONSIVE SYSTEM
   The final cascade replaces the former one-step tablet split with three
   deliberate reading states: Compact (0–639), Bridge (640–1099), Wide (1100+).
   ============================================================================= */

.geekly-post-hero--cut {
    --es-art-share: 48%;
    --es-copy-start: clamp(32px, 8vw, 122px);
    --es-copy-width: min(61%, 48rem);
    --es-title-measure: 22ch;
    --es-title-size: clamp(3.25rem, 4.45vw, 5.4rem);
    --es-stage-height: clamp(540px, 54vw, 740px);

    min-height: var(--es-stage-height);
}

.geekly-post-hero--cut .geekly-post-hero__bg {
    width: var(--es-art-share);
}

.geekly-post-hero--cut .geekly-post-hero__content {
    width: var(--es-copy-width);
    margin-left: var(--es-copy-start);
    margin-bottom: clamp(48px, 5.4vw, 78px);
}

.geekly-post-hero--cut .geekly-post-hero__title {
    max-width: var(--es-title-measure);
    font-size: var(--es-title-size);
    line-height: 0.92;
    text-wrap: balance;
}

.geekly-post-hero--cut.geekly-post-hero--long-title {
    --es-title-measure: 24ch;
    --es-title-size: clamp(2.8rem, 3.8vw, 4.65rem);
}

.geekly-post-hero--cut.geekly-post-hero--long-title .geekly-post-hero__title {
    max-width: var(--es-title-measure);
    font-size: var(--es-title-size);
    line-height: 0.94;
}

/* Bridge Stage: the dedicated tablet and small-laptop composition. */
@media (min-width: 640px) and (max-width: 1099px) {
    .geekly-post-hero--cut {
        --es-art-share: 44%;
        --es-copy-start: clamp(34px, 6vw, 68px);
        --es-copy-width: min(63%, 35rem);
        --es-title-measure: 23ch;
        --es-title-size: clamp(2.5rem, 4.35vw, 3.5rem);
        --es-stage-height: clamp(500px, 62vw, 640px);
    }

    .geekly-post-hero--cut.geekly-post-hero--long-title {
        --es-title-measure: 25ch;
        --es-title-size: clamp(2.35rem, 3.75vw, 3.15rem);
    }

    .geekly-post-hero--cut::before {
        background:
            linear-gradient(90deg, #0b0b0f 0%, #0b0b0f 43%, rgba(11, 11, 15, 0.93) 62%, rgba(11, 11, 15, 0.12) 87%),
            radial-gradient(circle at 63% 84%, rgba(105, 21, 32, 0.14), transparent 27%);
    }

    .geekly-post-hero--cut .geekly-post-hero__accent-bar {
        width: min(48%, 500px);
    }

    .geekly-post-hero--cut .geekly-post-hero__eyebrow {
        margin-bottom: 20px;
    }

    .geekly-post-hero--cut .geekly-post-hero__subtitle {
        max-width: 56ch;
        margin-top: 21px;
        line-height: 1.58;
    }

    .geekly-post-hero--cut .geekly-post-hero__title-rule {
        width: clamp(66px, 7vw, 92px);
        margin: 22px 0 16px;
    }
}

/* Compact Stage: image band and natural-height copy remain a protected unit. */
@media (max-width: 639px) {
    .geekly-post-hero--cut {
        --es-stage-height: clamp(770px, 208vw, 900px);
        min-height: var(--es-stage-height);
    }

    .geekly-post-hero--cut .geekly-post-hero__bg {
        width: 100%;
        height: 58%;
    }

    .geekly-post-hero--cut .geekly-post-hero__content {
        width: auto;
        margin: 0 23px 42px;
    }

    .geekly-post-hero--cut .geekly-post-hero__title,
    .geekly-post-hero--cut.geekly-post-hero--long-title .geekly-post-hero__title {
        max-width: 15.2ch;
        font-size: clamp(2.72rem, 11.7vw, 4.05rem);
        line-height: 0.96;
        text-wrap: wrap;
    }
}

/* The original compact rules also match 640–767px. Re-establish the bridge
   art object explicitly so it cannot inherit the mobile band, mask, or margins. */
@media (min-width: 640px) and (max-width: 767px) {
    .geekly-post-hero--cut .geekly-post-hero__bg {
        inset: 0 0 0 auto;
        width: var(--es-art-share);
        height: auto;
        clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
        -webkit-mask-image: none;
        mask-image: none;
    }

    .geekly-post-hero--cut .geekly-post-hero__bg-img {
        object-position: 59% 46%;
        transform: scale(1.04);
    }

    .geekly-post-hero--cut .geekly-post-hero__overlay {
        background:
            linear-gradient(90deg, #0b0b0f 0%, rgba(11, 11, 15, 0.55) 24%, rgba(11, 11, 15, 0.08) 63%),
            linear-gradient(0deg, rgba(9, 9, 12, 0.64), transparent 48%);
    }

    .geekly-post-hero--cut .geekly-post-hero__content {
        margin-top: 0;
        margin-right: 0;
    }
}

/* =============================================================================
   FEATURE SPLIT RESPONSIVE SYSTEM
   Copy leads at bridge widths, while the framed featured artwork keeps its
   editorial presence at every size.
   ============================================================================= */
.geekly-post-hero--feature-split {
    --fs-copy-share: 51%;
    --fs-art-share: 49%;
    --fs-frame: clamp(16px, 2.25vw, 34px);
    --fs-copy-pad-y: clamp(54px, 6.2vw, 98px);
    --fs-copy-pad-x: clamp(38px, 6.6vw, 112px);
    --fs-title-measure: 20ch;
    --fs-title-size: clamp(3rem, 4.55vw, 5.45rem);
    --fs-stage-height: clamp(590px, 49vw, 710px);

    min-height: var(--fs-stage-height) !important;
    background: #111016 !important;
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text {
    flex: 0 0 var(--fs-copy-share);
    width: var(--fs-copy-share);
    justify-content: center;
    padding: var(--fs-copy-pad-y) var(--fs-copy-pad-x);
    background:
        radial-gradient(circle at 5% 8%, rgba(230, 57, 70, 0.13), transparent 27%),
        linear-gradient(137deg, #19171e, #0d0c10 84%);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text::after {
    width: clamp(72px, 8vw, 122px);
    height: 3px;
}
.geekly-post-hero--feature-split .geekly-post-hero__eyebrow { margin-bottom: 24px; }
.geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__title {
    max-width: var(--fs-title-measure);
    margin: 0;
    font-size: var(--fs-title-size);
    line-height: 0.9;
    letter-spacing: -0.047em;
    text-wrap: balance;
}
.geekly-post-hero--feature-split.geekly-post-hero--long-title {
    --fs-title-measure: 22.5ch;
    --fs-title-size: clamp(2.75rem, 3.95vw, 4.85rem);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__subtitle {
    max-width: 59ch;
    margin-top: 25px;
    color: #d8dfe6;
    line-height: 1.62;
}
.geekly-post-hero--feature-split .geekly-post-hero__title-rule {
    width: clamp(72px, 8vw, 116px);
    height: 3px;
    margin: 27px 0 18px;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.28);
}
.geekly-post-hero--feature-split .geekly-post-hero__tags { margin-top: 16px; }
.geekly-post-hero--feature-split .geekly-post-hero__split-image {
    flex: 0 0 var(--fs-art-share);
    width: var(--fs-art-share);
    min-height: 100%;
    padding: var(--fs-frame);
    background: linear-gradient(145deg, #2b2831, #101014 74%);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-image::after {
    inset: var(--fs-frame);
    border-color: rgba(255, 255, 255, 0.38);
}
.geekly-post-hero--feature-split .geekly-post-hero__split-img {
    inset: var(--fs-frame);
    width: calc(100% - (var(--fs-frame) * 2));
    height: calc(100% - (var(--fs-frame) * 2));
    object-position: center;
    filter: saturate(0.92) contrast(1.07);
    box-shadow: 0 23px 56px rgba(0, 0, 0, 0.36);
}
.geekly-post-hero--feature-split:not(.geekly-post-hero--has-image) .geekly-post-hero__split-image { display: none; }
.geekly-post-hero--feature-split:not(.geekly-post-hero--has-image) .geekly-post-hero__split-text {
    flex-basis: 100%;
    width: 100%;
    min-height: var(--fs-stage-height);
}

/* Bridge Stage: the copy receives the visual lead throughout the tablet range. */
@media (min-width: 640px) and (max-width: 1099px) {
    .geekly-post-hero--feature-split {
        --fs-copy-share: 56%;
        --fs-art-share: 44%;
        --fs-frame: clamp(14px, 1.9vw, 22px);
        --fs-copy-pad-y: clamp(44px, 5.7vw, 68px);
        --fs-copy-pad-x: clamp(30px, 5.3vw, 62px);
        --fs-title-measure: 23ch;
        --fs-title-size: clamp(2.5rem, 4.5vw, 3.85rem);
        --fs-stage-height: clamp(525px, 62vw, 625px);
    }
    .geekly-post-hero--feature-split.geekly-post-hero--long-title {
        --fs-title-measure: 25ch;
        --fs-title-size: clamp(2.28rem, 3.65vw, 3.2rem);
    }
    .geekly-post-hero--feature-split .geekly-post-hero__eyebrow { margin-bottom: 19px; }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__subtitle { margin-top: 20px; font-size: 0.9375rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__title-rule { width: clamp(62px, 7vw, 88px); margin: 21px 0 16px; }
}

/* Narrow Bridge Stage: hold the mobile reading sequence a little longer before
   the side-by-side tablet composition has enough room for both story and art. */
@media (min-width: 640px) and (max-width: 767px) {
    .geekly-post-hero--feature-split {
        --fs-frame: clamp(14px, 2.1vw, 16px);
        --fs-copy-pad-y: clamp(36px, 6.2vw, 48px);
        --fs-copy-pad-x: clamp(24px, 5.5vw, 38px);
        --fs-title-measure: 18.5ch;
        --fs-title-size: clamp(2.85rem, 7.2vw, 3.55rem);
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image {
        flex: none;
        order: -1;
        width: 100%;
        min-height: 0;
        height: clamp(270px, 52vw, 350px);
        padding: var(--fs-frame);
        background: #15141a;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image::after { inset: var(--fs-frame); }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image::before {
        content: '';
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 30%;
        background: linear-gradient(0deg, #111016, transparent);
        pointer-events: none;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text {
        flex: none;
        width: 100%;
        padding: var(--fs-copy-pad-y) var(--fs-copy-pad-x) 46px;
        background: linear-gradient(137deg, #17151c, #0d0c10 82%);
    }
    .geekly-post-hero--feature-split .geekly-post-hero__eyebrow { margin-bottom: 17px; }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__title {
        max-width: var(--fs-title-measure);
        font-size: var(--fs-title-size);
        line-height: 0.94;
        letter-spacing: -0.045em;
    }
    .geekly-post-hero--feature-split.geekly-post-hero--long-title .geekly-post-hero__split-text .geekly-post-hero__title {
        max-width: 23ch;
        font-size: clamp(2.5rem, 6vw, 3.15rem);
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__subtitle { margin-top: 19px; font-size: 0.975rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__title-rule { width: 70px; margin: 21px 0 16px; }
    .geekly-post-hero--feature-split .geekly-post-hero__tags { margin-top: 14px; }
}

/* Compact Stage: a framed art band dissolves into copy with natural content height. */
@media (max-width: 639px) {
    .geekly-post-hero--feature-split {
        display: flex !important;
        flex-direction: column;
        min-height: 0 !important;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image {
        --fs-frame: 13px;
        flex: none;
        width: 100%;
        min-height: 0;
        height: clamp(228px, 63vw, 286px);
        padding: var(--fs-frame);
        background: #15141a;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image::after { inset: var(--fs-frame); }
    .geekly-post-hero--feature-split .geekly-post-hero__split-image::before {
        content: '';
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 32%;
        background: linear-gradient(0deg, #111016, transparent);
        pointer-events: none;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text {
        flex: none;
        width: 100%;
        padding: 31px 23px 42px;
        background: linear-gradient(137deg, #17151c, #0d0c10 82%);
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text::after { width: 66px; height: 3px; }
    .geekly-post-hero--feature-split .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 16px; }
    .geekly-post-hero--feature-split .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__title,
    .geekly-post-hero--feature-split.geekly-post-hero--long-title .geekly-post-hero__split-text .geekly-post-hero__title {
        max-width: 17.5ch;
        font-size: clamp(2.55rem, 10.2vw, 3.6rem);
        line-height: 0.95;
        letter-spacing: -0.043em;
        text-wrap: balance;
    }
    .geekly-post-hero--feature-split .geekly-post-hero__split-text .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.9rem; line-height: 1.6; }
    .geekly-post-hero--feature-split .geekly-post-hero__title-rule { width: 65px; margin: 20px 0 15px; }
    .geekly-post-hero--feature-split .geekly-post-hero__tags { margin-top: 13px; }
}

/* =============================================================================
   Editorial Index responsive system
   Typography-first wide, bridge, compact, and no-image editorial stages.
   ============================================================================= */
.geekly-post-hero--editorial-index {
    --ei-stage-height: clamp(560px, 49vw, 690px);
    --ei-pad-y: clamp(54px, 6.2vw, 92px);
    --ei-pad-x: clamp(28px, 5.2vw, 84px);
    --ei-rail: clamp(94px, 10.5vw, 154px);
    --ei-copy-gap: clamp(36px, 5.4vw, 88px);
    --ei-title-measure: 21.5ch;
    --ei-title-size: clamp(3.8rem, 7.25vw, 7.3rem);
    position: relative;
    display: block !important;
    min-height: var(--ei-stage-height) !important;
    padding: var(--ei-pad-y) var(--ei-pad-x) !important;
    overflow: hidden;
    background:
        radial-gradient(74% 110% at 104% 2%, rgba(230, 57, 70, 0.13), transparent 52%),
        radial-gradient(48% 76% at 3% 100%, rgba(139, 92, 246, 0.1), transparent 68%),
        linear-gradient(142deg, #121116 0%, #0d0c10 58%, #16141b 100%) !important;
}
.geekly-post-hero--editorial-index::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 78%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.7), transparent 78%);
    pointer-events: none;
}
.geekly-post-hero--editorial-index::after {
    top: var(--ei-pad-y);
    right: auto;
    bottom: var(--ei-pad-y);
    left: calc(var(--ei-pad-x) + var(--ei-rail));
    width: 1px;
    height: auto;
    border: 0;
    background: linear-gradient(180deg, rgba(230, 57, 70, 0.64), rgba(230, 57, 70, 0.08));
}
.geekly-post-hero--editorial-index .geekly-post-hero__index-label {
    position: absolute;
    z-index: 2;
    top: var(--ei-pad-y);
    left: var(--ei-pad-x);
    display: block;
    color: #d9dfe5;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.geekly-post-hero--editorial-index .geekly-post-hero__minimal-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: auto;
    max-width: 1110px;
    min-height: calc(var(--ei-stage-height) - (var(--ei-pad-y) * 2));
    margin: 0 0 0 calc(var(--ei-rail) + var(--ei-copy-gap));
    padding: 0;
}
.geekly-post-hero--editorial-index .geekly-post-hero__eyebrow {
    gap: 10px;
    margin-bottom: clamp(26px, 3.8vw, 48px);
}
.geekly-post-hero--editorial-index .geekly-post-hero__eyebrow::before {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 5px rgba(230, 57, 70, 0.11);
}
.geekly-post-hero--editorial-index .geekly-post-hero__title {
    max-width: var(--ei-title-measure);
    font-size: var(--ei-title-size);
    line-height: 0.84;
    letter-spacing: -0.052em;
    text-wrap: balance;
}
.geekly-post-hero--editorial-index.geekly-post-hero--long-title {
    --ei-title-measure: 22.5ch;
    --ei-title-size: clamp(3.35rem, 6.25vw, 6.2rem);
}
.geekly-post-hero--editorial-index .geekly-post-hero__subtitle {
    max-width: 57ch;
    margin-top: clamp(22px, 2.7vw, 34px);
    color: #c8cfd7;
    font-size: clamp(0.9375rem, 1.23vw, 1.06rem);
    line-height: 1.65;
}
.geekly-post-hero--editorial-index .geekly-post-hero__minimal-divider {
    width: clamp(72px, 8vw, 112px);
    height: 3px;
    margin: 27px 0 18px;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.28);
}
.geekly-post-hero--editorial-index .geekly-post-hero__meta { color: #cbd2da; }
.geekly-post-hero--editorial-index .geekly-post-hero__tags { margin-top: 16px; }
.geekly-post-hero--editorial-index .geekly-post-hero__index-handoff {
    position: absolute;
    z-index: 2;
    bottom: var(--ei-pad-y);
    left: var(--ei-pad-x);
    display: block;
    color: #7d858e;
    font-family: var(--font-display);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.geekly-post-hero--editorial-index .geekly-post-hero__index-handoff::after { display: none; }

/* Bridge Index: retain the editorial line while releasing the title into the tablet canvas. */
@media (min-width: 640px) and (max-width: 1099px) {
    .geekly-post-hero--editorial-index {
        --ei-stage-height: clamp(510px, 67vw, 610px);
        --ei-pad-y: clamp(42px, 5.8vw, 64px);
        --ei-pad-x: clamp(28px, 6vw, 62px);
        --ei-rail: 0px;
        --ei-copy-gap: 0px;
        --ei-title-measure: 20.5ch;
        --ei-title-size: clamp(3.1rem, 6.9vw, 5.35rem);
    }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title {
        --ei-title-measure: 23ch;
        --ei-title-size: clamp(2.85rem, 5.7vw, 4.7rem);
    }
    .geekly-post-hero--editorial-index::after {
        top: calc(var(--ei-pad-y) + 25px);
        right: var(--ei-pad-x);
        bottom: auto;
        left: var(--ei-pad-x);
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, rgba(230, 57, 70, 0.7), rgba(230, 57, 70, 0.08));
    }
    .geekly-post-hero--editorial-index .geekly-post-hero__index-label {
        top: var(--ei-pad-y);
        left: var(--ei-pad-x);
        writing-mode: initial;
        transform: none;
    }
    .geekly-post-hero--editorial-index .geekly-post-hero__minimal-inner {
        min-height: calc(var(--ei-stage-height) - (var(--ei-pad-y) * 2) - 42px);
        margin: 42px 0 0;
    }
    .geekly-post-hero--editorial-index .geekly-post-hero__eyebrow { margin-bottom: 25px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__subtitle { margin-top: 20px; font-size: 0.9375rem; }
    .geekly-post-hero--editorial-index .geekly-post-hero__minimal-divider { width: 78px; margin: 22px 0 16px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__index-handoff { display: none; }
}

/* Compact Index: a short brand marker, natural content height, and full copy field. */
@media (max-width: 639px) {
    .geekly-post-hero--editorial-index {
        --ei-pad-y: 28px;
        --ei-pad-x: 23px;
        --ei-stage-height: auto;
        --ei-rail: 0px;
        --ei-copy-gap: 0px;
        --ei-title-measure: 14.5ch;
        --ei-title-size: clamp(2.6rem, 10.8vw, 3.5rem);
        min-height: 0 !important;
        padding: var(--ei-pad-y) var(--ei-pad-x) 38px !important;
    }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title {
        --ei-title-measure: 15.5ch;
        --ei-title-size: clamp(2.4rem, 10.1vw, 3.22rem);
    }
    .geekly-post-hero--editorial-index::before {
        background-size: 34px 34px;
        -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.56), transparent 70%);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.56), transparent 70%);
    }
    .geekly-post-hero--editorial-index::after {
        top: 49px;
        right: var(--ei-pad-x);
        bottom: auto;
        left: var(--ei-pad-x);
        width: auto;
        height: 1px;
    }
    .geekly-post-hero--editorial-index .geekly-post-hero__index-label {
        position: static;
        display: block;
        writing-mode: initial;
        transform: none;
        font-size: 0.625rem;
    }
    .geekly-post-hero--editorial-index .geekly-post-hero__minimal-inner {
        min-height: 0;
        margin: 48px 0 0;
    }
    .geekly-post-hero--editorial-index .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 17px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--editorial-index .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--editorial-index .geekly-post-hero__subtitle { margin-top: 20px; font-size: 0.9rem; line-height: 1.58; }
    .geekly-post-hero--editorial-index .geekly-post-hero__minimal-divider { width: 66px; margin: 21px 0 16px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__tags { margin-top: 14px; }
    .geekly-post-hero--editorial-index .geekly-post-hero__index-handoff { display: none; }
}

/* Editorial Index wide long-title refinement: broaden the reading field and calm the display scale. */
@media (min-width: 1100px) {
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title {
        --ei-title-measure: 34ch;
        --ei-title-size: clamp(3rem, 4.55vw, 4.8rem);
    }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title .geekly-post-hero__title {
        max-width: min(100%, var(--ei-title-measure));
        line-height: 0.91;
        letter-spacing: -0.045em;
        text-wrap: pretty;
    }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title .geekly-post-hero__subtitle {
        max-width: 64ch;
        margin-top: 26px;
    }
}

/* Editorial Index bridge refinement: use the tablet canvas without collapsing into a title tower. */
@media (min-width: 640px) and (max-width: 1099px) {
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title {
        --ei-title-measure: 34ch;
        --ei-title-size: clamp(2.55rem, 4.65vw, 4.25rem);
    }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title .geekly-post-hero__title {
        max-width: min(100%, var(--ei-title-measure));
        line-height: 0.92;
        letter-spacing: -0.043em;
        text-wrap: pretty;
    }
    .geekly-post-hero--editorial-index.geekly-post-hero--long-title .geekly-post-hero__subtitle {
        max-width: 62ch;
        margin-top: 23px;
    }
}

/* Poster Stack responsive system: collectible art gets its own stage while long titles keep a usable reading field. */
.geekly-post-hero--poster-stack {
    --ps-pad-y: clamp(66px, 7.5vw, 118px);
    --ps-pad-x: clamp(38px, 7.5vw, 128px);
    --ps-art-width: min(100%, 390px);
    --ps-title-measure: 21ch;
    --ps-title-size: clamp(3.8rem, 5.15vw, 5.3rem);
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(58px, 7.5vw, 132px);
    min-height: max(650px, 72vh) !important;
    padding: var(--ps-pad-y) var(--ps-pad-x) !important;
    overflow: hidden;
    background:
        radial-gradient(65% 88% at 94% 3%, rgba(230, 57, 70, 0.13), transparent 61%),
        radial-gradient(48% 72% at 6% 100%, rgba(115, 82, 164, 0.15), transparent 70%),
        linear-gradient(142deg, #121116 0%, #0d0c10 60%, #17131a 100%) !important;
}
.geekly-post-hero--poster-stack::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 80%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 80%);
    pointer-events: none;
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-image {
    position: relative;
    z-index: 1;
    width: var(--ps-art-width);
    height: auto;
    aspect-ratio: 4 / 5;
    margin: 0;
    justify-self: center;
    overflow: visible;
    box-shadow: 20px 20px 0 var(--clr-brand), 38px 36px 0 rgba(115, 82, 164, 0.58);
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-image::after {
    inset: 20px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 40%);
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-text {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 780px;
    margin: 0;
    padding: 0;
}
.geekly-post-hero--poster-stack .geekly-post-hero__stacked-text .geekly-post-hero__title {
    max-width: var(--ps-title-measure);
    margin: 0;
    font-size: var(--ps-title-size);
    line-height: 0.88;
    letter-spacing: -0.048em;
    text-wrap: pretty;
}
.geekly-post-hero--poster-stack.geekly-post-hero--long-title {
    --ps-title-measure: 29ch;
    --ps-title-size: clamp(3.35rem, 4.55vw, 4.8rem);
}
.geekly-post-hero--poster-stack .geekly-post-hero__subtitle {
    max-width: 64ch;
    margin-top: clamp(22px, 2.7vw, 31px);
    color: #d0d7df;
    line-height: 1.64;
}
.geekly-post-hero--poster-stack .geekly-post-hero__title-rule { margin: 25px 0 18px; }
.geekly-post-hero--poster-stack .geekly-post-hero__tags { margin-top: 16px; }
.geekly-post-hero--poster-stack:not(.geekly-post-hero--has-image) {
    display: block !important;
    min-height: 500px !important;
}
.geekly-post-hero--poster-stack:not(.geekly-post-hero--has-image) .geekly-post-hero__stacked-text {
    max-width: 860px;
    margin: 0 auto;
    padding-left: clamp(26px, 5vw, 62px);
    border-left: 1px solid rgba(230, 57, 70, 0.62);
}

/* Spread Stage: tablet and small laptop art above full-width copy, never a cramped desktop grid. */
@media (min-width: 640px) and (max-width: 1179px) {
    .geekly-post-hero--poster-stack {
        --ps-pad-y: clamp(48px, 7vw, 72px);
        --ps-pad-x: clamp(28px, 6vw, 66px);
        --ps-art-width: min(62%, 520px);
        --ps-title-measure: 29ch;
        --ps-title-size: clamp(3rem, 5.8vw, 4.8rem);
        display: block !important;
        min-height: 0 !important;
        padding: var(--ps-pad-y) var(--ps-pad-x) 72px !important;
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-image {
        aspect-ratio: 16 / 8;
        margin: 0 0 clamp(56px, 8vw, 76px);
        justify-self: start;
        box-shadow: 17px 17px 0 var(--clr-brand), 33px 31px 0 rgba(115, 82, 164, 0.56);
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-img { object-position: center 44%; }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-image::after { inset: 15px; }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-text { max-width: none; }
    .geekly-post-hero--poster-stack.geekly-post-hero--long-title {
        --ps-title-measure: 34ch;
        --ps-title-size: clamp(2.7rem, 5.05vw, 4.35rem);
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-text .geekly-post-hero__title {
        max-width: min(100%, var(--ps-title-measure));
        line-height: 0.91;
        letter-spacing: -0.043em;
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__subtitle { max-width: 68ch; }
}

/* Narrow Spread: use the whole canvas for a single landscape art band before
   the content area is wide enough to support a second column. */
@media (min-width: 640px) and (max-width: 839px) {
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image {
        --ps-pad-y: clamp(40px, 6.2vw, 52px);
        --ps-pad-x: clamp(24px, 5.4vw, 42px);
        --ps-title-measure: 23ch;
        --ps-title-size: clamp(2.7rem, 6.8vw, 3.7rem);
        display: block !important;
        padding: var(--ps-pad-y) var(--ps-pad-x) 54px !important;
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-image {
        width: 100%;
        max-width: none;
        aspect-ratio: 16 / 8.5;
        margin: 0 0 clamp(36px, 5.5vw, 46px);
        box-shadow: 15px 15px 0 var(--clr-brand), 29px 27px 0 rgba(115, 82, 164, 0.54);
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-image::after { inset: 14px; }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-text { max-width: none; }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-text .geekly-post-hero__title {
        max-width: min(100%, var(--ps-title-measure));
        line-height: 0.91;
        letter-spacing: -0.043em;
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image.geekly-post-hero--long-title {
        --ps-title-measure: 29ch;
        --ps-title-size: clamp(2.55rem, 5.6vw, 3.35rem);
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__subtitle { margin-top: 20px; }
}

/* Wide Spread: let the collectible art and opening copy share the canvas as
   soon as each has enough room, preventing a broad empty field beside the art. */
@media (min-width: 840px) and (max-width: 1179px) {
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image {
        --ps-pad-y: clamp(52px, 6.2vw, 70px);
        --ps-pad-x: clamp(38px, 5.7vw, 66px);
        --ps-title-measure: 19ch;
        --ps-title-size: clamp(3rem, 5.1vw, 4.35rem);
        display: grid !important;
        grid-template-columns: minmax(270px, 0.82fr) minmax(0, 1.18fr);
        align-items: center;
        gap: clamp(36px, 5vw, 66px);
        min-height: 0 !important;
        padding: var(--ps-pad-y) var(--ps-pad-x) !important;
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-image {
        width: min(100%, 440px);
        aspect-ratio: 4 / 5;
        margin: 0;
        justify-self: center;
        box-shadow: 18px 18px 0 var(--clr-brand), 34px 32px 0 rgba(115, 82, 164, 0.56);
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-image::after { inset: 17px; }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-text { max-width: none; }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__stacked-text .geekly-post-hero__title {
        max-width: min(100%, var(--ps-title-measure));
        line-height: 0.89;
        letter-spacing: -0.045em;
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image.geekly-post-hero--long-title {
        --ps-title-measure: 25ch;
        --ps-title-size: clamp(2.7rem, 4.25vw, 3.8rem);
    }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__subtitle { max-width: 53ch; margin-top: 21px; }
    .geekly-post-hero--poster-stack.geekly-post-hero--has-image .geekly-post-hero__title-rule { margin: 22px 0 16px; }
}

/* Pocket Stage: art-first mobile stack with a natural-height reader field. */
@media (max-width: 639px) {
    .geekly-post-hero--poster-stack {
        --ps-title-measure: 13.5ch;
        --ps-title-size: clamp(2.85rem, 12.4vw, 4rem);
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        min-height: 0 !important;
        padding: 34px 24px 60px !important;
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-image {
        width: calc(100% - 20px);
        max-width: 420px;
        aspect-ratio: 5 / 4;
        margin: 0 20px 48px 0;
        align-self: flex-start;
        box-shadow: 12px 14px 0 var(--clr-brand), 24px 26px 0 rgba(115, 82, 164, 0.52);
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-image::after { inset: 13px; }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-img { object-position: center 44%; }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-text { max-width: none; }
    .geekly-post-hero--poster-stack.geekly-post-hero--long-title {
        --ps-title-measure: 16.5ch;
        --ps-title-size: clamp(2.65rem, 11.1vw, 3.5rem);
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__stacked-text .geekly-post-hero__title {
        max-width: min(100%, var(--ps-title-measure));
        line-height: 0.91;
        letter-spacing: -0.04em;
    }
    .geekly-post-hero--poster-stack .geekly-post-hero__subtitle { margin-top: 19px; font-size: 0.9375rem; }
    .geekly-post-hero--poster-stack .geekly-post-hero__title-rule { width: 70px; margin: 20px 0 15px; }
    .geekly-post-hero--poster-stack:not(.geekly-post-hero--has-image) {
        min-height: 0 !important;
        padding: 58px 24px !important;
    }
    .geekly-post-hero--poster-stack:not(.geekly-post-hero--has-image) .geekly-post-hero__stacked-text {
        margin: 0;
        padding-left: 24px;
    }
}

/* Cover Story responsive system: flagship art with a protected caption field at every viewport. */
.geekly-post-hero--cover-story {
    --cs-pad-y: clamp(66px, 7.2vw, 116px);
    --cs-pad-x: clamp(48px, 8.2vw, 142px);
    --cs-title-measure: 22ch;
    --cs-title-size: clamp(4.45rem, 6.2vw, 6.3rem);
    position: relative;
    display: flex !important;
    align-items: flex-end;
    min-height: clamp(690px, 58vw, 860px) !important;
    padding: var(--cs-pad-y) var(--cs-pad-x) !important;
    overflow: hidden;
    isolation: isolate;
    background: #0c0b0f;
}
.geekly-post-hero--cover-story .geekly-post-hero__bg { z-index: -2; }
.geekly-post-hero--cover-story .geekly-post-hero__bg-img {
    object-position: center 42%;
    filter: saturate(0.88) contrast(1.04);
}
.geekly-post-hero--cover-story .geekly-post-hero__immersive-overlay {
    background:
        linear-gradient(180deg, rgba(8, 8, 11, 0.54) 0%, rgba(8, 8, 11, 0.18) 20%, transparent 42%),
        linear-gradient(90deg, rgba(8, 8, 11, 0.95) 0%, rgba(8, 8, 11, 0.78) 33%, rgba(8, 8, 11, 0.16) 70%, rgba(8, 8, 11, 0.22) 100%),
        linear-gradient(0deg, rgba(8, 8, 11, 0.94), rgba(8, 8, 11, 0) 54%) !important;
}
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast {
    z-index: 2;
    inset: 28px var(--cs-pad-x) auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 18px;
    padding: 0 0 13px;
    border-bottom: 1px solid rgba(230, 237, 243, 0.28);
    font-size: clamp(0.6875rem, 0.625rem + 0.22vw, 0.8125rem);
    letter-spacing: 0.16em;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.76);
}
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast::before { display: none; }
.geekly-post-hero--cover-story .geekly-post-hero__cover-mast span:last-child { display: block; }
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content {
    position: relative;
    z-index: 2;
    width: min(100%, 790px);
    max-width: none;
    margin: 0;
    padding: 0;
}
.geekly-post-hero--cover-story .geekly-post-hero__eyebrow { margin-bottom: 22px; }
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__title {
    max-width: var(--cs-title-measure);
    margin: 0;
    font-size: var(--cs-title-size);
    line-height: 0.86;
    letter-spacing: -0.052em;
    text-wrap: pretty;
}
.geekly-post-hero--cover-story.geekly-post-hero--long-title {
    --cs-title-measure: 31ch;
    --cs-title-size: clamp(3.75rem, 5.15vw, 5.5rem);
}
/* Override the legacy long-title declaration with the responsive stage variables above. */
.geekly-post-hero--cover-story.geekly-post-hero--long-title .geekly-post-hero__immersive-content .geekly-post-hero__title {
    max-width: min(100%, var(--cs-title-measure));
    font-size: var(--cs-title-size);
    line-height: 0.86;
    letter-spacing: -0.052em;
    text-wrap: pretty;
}
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__subtitle {
    max-width: 64ch;
    margin-top: 25px;
    color: #d5dce3;
    line-height: 1.6;
}
.geekly-post-hero--cover-story .geekly-post-hero__title-rule { margin: 28px 0 19px; }
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__meta,
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__tags,
.geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__vote-row { position: relative; z-index: 2; }
.geekly-post-hero--cover-story:not(.geekly-post-hero--has-image) {
    background:
        radial-gradient(72% 92% at 95% 5%, rgba(230, 57, 70, 0.2), transparent 67%),
        linear-gradient(135deg, #1a171e, #0e0d11) !important;
}
.geekly-post-hero--cover-story:not(.geekly-post-hero--has-image) .geekly-post-hero__immersive-content {
    max-width: 880px;
    padding-left: clamp(28px, 5vw, 66px);
    border-left: 1px solid rgba(230, 57, 70, 0.72);
}

/* Premiere Stage: tablet and small laptop art opens the story, then a raised caption deck uses the full available reading width. */
@media (min-width: 640px) and (max-width: 1179px) {
    .geekly-post-hero--cover-story {
        --cs-pad-x: clamp(30px, 6vw, 64px);
        --cs-title-measure: 30ch;
        --cs-title-size: clamp(3rem, 5.85vw, 4.9rem);
        display: block !important;
        min-height: 0 !important;
        padding: 0 0 70px !important;
        overflow: visible;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__bg {
        position: relative;
        inset: auto;
        z-index: 0;
        height: min(48vw, 430px);
        overflow: hidden;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__bg-img { object-position: center 38%; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-overlay {
        background: linear-gradient(0deg, rgba(8, 8, 11, 0.58), rgba(8, 8, 11, 0.04) 60%) !important;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast {
        z-index: 3;
        inset: 23px var(--cs-pad-x) auto;
        font-size: 0.625rem;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content {
        z-index: 3;
        width: auto;
        max-width: none;
        margin: -58px var(--cs-pad-x) 0;
        padding: 44px clamp(31px, 5.2vw, 52px) 46px;
        background: linear-gradient(135deg, #1a181f, #100f14);
        border-top: 3px solid var(--clr-brand);
        box-shadow: 0 24px 56px rgba(0, 0, 0, 0.42);
    }
    .geekly-post-hero--cover-story.geekly-post-hero--long-title {
        --cs-title-measure: 36ch;
        --cs-title-size: clamp(2.8rem, 5.05vw, 4.45rem);
    }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__title {
        max-width: min(100%, var(--cs-title-measure));
        line-height: 0.9;
        letter-spacing: -0.045em;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__subtitle { max-width: 68ch; }
    .geekly-post-hero--cover-story:not(.geekly-post-hero--has-image) { padding: 76px var(--cs-pad-x) !important; }
    .geekly-post-hero--cover-story:not(.geekly-post-hero--has-image) .geekly-post-hero__immersive-content {
        margin: 0;
        padding: 0 0 0 clamp(28px, 5vw, 58px);
        border-top: 0;
        border-left: 1px solid rgba(230, 57, 70, 0.72);
        box-shadow: none;
        background: transparent;
    }
}

/* Pocket Stage: art-first cover band followed by a protected natural-height reader deck. */
@media (max-width: 639px) {
    .geekly-post-hero--cover-story {
        --cs-title-measure: 13.5ch;
        --cs-title-size: clamp(2.9rem, 12.5vw, 4rem);
        display: block !important;
        min-height: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__bg {
        position: relative;
        inset: auto;
        z-index: 0;
        height: 276px;
        overflow: hidden;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__bg-img { object-position: center 37%; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-overlay {
        background: linear-gradient(0deg, rgba(8, 8, 11, 0.54), rgba(8, 8, 11, 0) 64%) !important;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast {
        z-index: 3;
        inset: 18px 20px auto;
        display: flex;
        justify-content: space-between;
        padding-bottom: 9px;
        font-size: 0.5rem;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast b,
    .geekly-post-hero--cover-story .geekly-post-hero__cover-mast span:last-child { display: none; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content {
        z-index: 3;
        width: auto;
        max-width: none;
        margin: -24px 0 0;
        padding: 35px 24px 52px;
        background: #121116;
    }
    .geekly-post-hero--cover-story.geekly-post-hero--long-title {
        --cs-title-measure: 16.5ch;
        --cs-title-size: clamp(2.65rem, 11.15vw, 3.5rem);
    }
    .geekly-post-hero--cover-story .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 17px; }
    .geekly-post-hero--cover-story .geekly-post-hero__format { padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__cat { font-size: 0.625rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__title {
        max-width: min(100%, var(--cs-title-measure));
        line-height: 0.91;
        letter-spacing: -0.04em;
    }
    .geekly-post-hero--cover-story .geekly-post-hero__immersive-content .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.9375rem; }
    .geekly-post-hero--cover-story .geekly-post-hero__title-rule { width: 70px; margin: 22px 0 15px; }
    .geekly-post-hero--cover-story .geekly-post-hero__scroll-hint { display: none; }
    .geekly-post-hero--cover-story:not(.geekly-post-hero--has-image) { padding: 58px 24px !important; }
    .geekly-post-hero--cover-story:not(.geekly-post-hero--has-image) .geekly-post-hero__immersive-content {
        margin: 0;
        padding: 0 0 0 24px;
        border-left: 1px solid rgba(230, 57, 70, 0.72);
        background: transparent;
    }
}

/* ── Layout 6: Classic Lead ─────────────────────────────────────────────── */
.geekly-post-hero--classic-lead {
    --cl-pad-x: clamp(24px, 7vw, 118px);
    /* Reset the base Cinematic hero flex row so title, metadata, and art stack. */
    display: block;
    min-height: 0;
    /* Match the article reading canvas so the hero hands off without a hard surface change. */
    background: var(--clr-bg-deep, #111014);
    color: var(--clr-text-primary, #E6EDF3);
    padding: clamp(46px, 6.4vw, 104px) var(--cl-pad-x) 0;
}
.geekly-post-hero--classic-lead .geekly-post-hero__classic-header {
    max-width: 1440px;
    margin: 0 auto;
    padding-bottom: clamp(28px, 3.3vw, 46px);
    border-bottom: 1px solid var(--clr-border, #2E2C35);
}
.geekly-post-hero--classic-lead .geekly-post-hero__classic-copy { min-width: 0; }
.geekly-post-hero--classic-lead .geekly-post-hero__eyebrow { margin-bottom: clamp(16px, 2vw, 25px); }
.geekly-post-hero--classic-lead .geekly-post-hero__eyebrow::before {
    content: '';
    width: 22px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--clr-brand, #E63946);
}
/* One shared editorial-context treatment keeps formats and categories consistent. */
.geekly-post-hero--classic-lead .geekly-post-hero__format,
.geekly-post-hero--classic-lead .geekly-post-hero__cat {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px 4px;
    border: 1px solid color-mix(in srgb, var(--clr-border, #2E2C35) 92%, #fff 8%);
    border-radius: 5px;
    background: color-mix(in srgb, var(--clr-bg-raised, #1A191F) 90%, transparent);
    color: var(--clr-text-secondary, #C9D1D9);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--classic-lead .geekly-post-hero__format { color: #b8e8ec; }
.geekly-post-hero--classic-lead .geekly-post-hero__cat:hover,
.geekly-post-hero--classic-lead .geekly-post-hero__cat:focus-visible {
    border-color: color-mix(in srgb, var(--clr-brand, #E63946) 62%, var(--clr-border, #2E2C35));
    color: var(--clr-text-primary, #E6EDF3);
    outline: none;
}
.geekly-post-hero--classic-lead .geekly-post-hero__eyebrow-sep { display: none; }
.geekly-post-hero--classic-lead .geekly-post-hero__title {
    max-width: min(100%, 16.8ch);
    margin: 0;
    color: var(--clr-text-primary, #E6EDF3);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(3.25rem, 5.25vw, 5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.028em;
    text-transform: uppercase;
}
.geekly-post-hero--classic-lead.geekly-post-hero--long-title .geekly-post-hero__title {
    max-width: min(100%, 19.5ch);
    font-size: clamp(3rem, 4.45vw, 4.45rem);
    line-height: 0.94;
}
/* On generous canvases, let the editorial headline occupy the available width. */
@media (min-width: 1100px) {
    .geekly-post-hero--classic-lead .geekly-post-hero__title { max-width: min(100%, 26ch); }
    .geekly-post-hero--classic-lead.geekly-post-hero--long-title .geekly-post-hero__title { max-width: min(100%, 30ch); }
}
/* Extended guides and roundups should use the full reading canvas on large desktop screens. */
@media (min-width: 1280px) {
    .geekly-post-hero--classic-lead .geekly-post-hero__title { max-width: min(100%, 31ch); }
    .geekly-post-hero--classic-lead.geekly-post-hero--long-title .geekly-post-hero__title { max-width: min(100%, 37ch); }
}
@media (min-width: 1600px) {
    .geekly-post-hero--classic-lead.geekly-post-hero--long-title .geekly-post-hero__title { max-width: min(100%, 42ch); }
}
.geekly-post-hero--classic-lead .geekly-post-hero__subtitle {
    max-width: 60ch;
    margin: clamp(18px, 2vw, 26px) 0 0;
    color: var(--clr-text-secondary, #C9D1D9);
    font-size: clamp(0.98rem, 1.24vw, 1.18rem);
    line-height: 1.55;
}
.geekly-post-hero--classic-lead .geekly-post-hero__classic-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 1440px;
    min-height: 64px;
    margin: 0 auto;
    border-bottom: 1px solid var(--clr-border, #2E2C35);
    color: var(--clr-text-muted, #8B949E);
    font-size: 0.8125rem;
}
.geekly-post-hero--classic-lead .geekly-post-hero__classic-byline { display: flex; align-items: center; gap: 9px; }
.geekly-post-hero--classic-lead .geekly-post-hero__author-name { color: var(--clr-text-primary, #E6EDF3); font-weight: 700; }
.geekly-post-hero--classic-lead .geekly-post-hero__classic-media {
    position: relative;
    max-width: 1440px;
    height: clamp(290px, 42vw, 650px);
    margin: clamp(18px, 2.5vw, 34px) auto 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--clr-border, #2E2C35) 88%, #fff 12%);
    border-radius: clamp(12px, 1.45vw, 20px);
    background: var(--clr-bg-raised, #1A191F);
    box-shadow: 0 20px 46px rgba(0, 0, 0, 0.18);
}
.geekly-post-hero--classic-lead .geekly-post-hero__classic-img,
.geekly-post-hero--classic-lead .geekly-post-hero__classic-img img { width: 100%; height: 100%; object-fit: cover; }
.geekly-post-hero--classic-lead:not(.geekly-post-hero--has-image) { padding-bottom: clamp(44px, 6vw, 88px); }
@media (max-width: 900px) {
    .geekly-post-hero--classic-lead { --cl-pad-x: clamp(22px, 5vw, 54px); }
    .geekly-post-hero--classic-lead .geekly-post-hero__title { font-size: clamp(3rem, 7vw, 4.3rem); }
    .geekly-post-hero--classic-lead.geekly-post-hero--long-title .geekly-post-hero__title { font-size: clamp(2.65rem, 6.05vw, 3.75rem); }
}
@media (max-width: 640px) {
    .geekly-post-hero--classic-lead { --cl-pad-x: 16px; padding-top: 30px; }
    .geekly-post-hero--classic-lead .geekly-post-hero__classic-header { padding-bottom: 24px; }
    .geekly-post-hero--classic-lead .geekly-post-hero__eyebrow { gap: 8px; margin-bottom: 15px; }
    .geekly-post-hero--classic-lead .geekly-post-hero__format,
    .geekly-post-hero--classic-lead .geekly-post-hero__cat { min-height: 24px; padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--classic-lead .geekly-post-hero__title,
    .geekly-post-hero--classic-lead.geekly-post-hero--long-title .geekly-post-hero__title { max-width: 100%; font-size: clamp(2.85rem, 12.7vw, 4rem); line-height: 0.92; }
    .geekly-post-hero--classic-lead .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.96rem; }
    .geekly-post-hero--classic-lead .geekly-post-hero__classic-meta { min-height: 0; padding: 16px 0; }
    .geekly-post-hero--classic-lead .geekly-post-hero__classic-media { height: 305px; margin-top: 14px; border-radius: 12px; }
}


/* ── Layout 7: Classic Banner ───────────────────────────────────────────── */
/* A unified editorial banner on tablet and desktop, with the approved image-first mobile stack. */
.geekly-post-hero--classic-banner {
    --cb-pad-x: clamp(24px, 7vw, 118px);
    display: block;
    min-height: 0;
    background: var(--clr-bg-deep, #111014);
    color: var(--clr-text-primary, #E6EDF3);
    padding: clamp(34px, 5.6vw, 84px) var(--cb-pad-x) 0;
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-frame {
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--clr-border, #2E2C35) 88%, #fff 12%);
    border-radius: clamp(12px, 1.45vw, 20px);
    background: var(--clr-bg-base, #0D0C10);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.22);
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-media {
    position: relative;
    height: clamp(360px, 38vw, 600px);
    margin: 0;
    overflow: hidden;
    background: var(--clr-bg-raised, #1A191F);
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-img,
.geekly-post-hero--classic-banner .geekly-post-hero__banner-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-deck {
    display: grid;
    grid-template-columns: minmax(168px, 0.28fr) minmax(0, 0.72fr);
    gap: clamp(28px, 4vw, 62px);
    width: 100%;
    margin: 0;
    padding: clamp(34px, 4vw, 58px) clamp(28px, 5vw, 74px) 40px;
    border-top: 3px solid var(--clr-brand, #E63946);
    background: var(--clr-bg-base, #0D0C10);
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-rail {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    min-width: 0;
    padding: 3px clamp(20px, 2.7vw, 42px) 0 0;
    border-right: 1px solid var(--clr-border, #2E2C35);
}
.geekly-post-hero--classic-banner:not(.geekly-post-hero--has-image) .geekly-post-hero__banner-deck {
    grid-template-columns: 1fr;
}
.geekly-post-hero--classic-banner:not(.geekly-post-hero--has-image) .geekly-post-hero__banner-rail {
    display: contents;
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.geekly-post-hero--classic-banner .geekly-post-hero__format,
.geekly-post-hero--classic-banner .geekly-post-hero__cat {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px 4px;
    border: 1px solid color-mix(in srgb, var(--clr-border, #2E2C35) 92%, #fff 8%);
    border-radius: 5px;
    background: color-mix(in srgb, var(--clr-bg-raised, #1A191F) 90%, transparent);
    color: var(--clr-text-secondary, #C9D1D9);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--classic-banner .geekly-post-hero__format { color: #b8e8ec; }
.geekly-post-hero--classic-banner .geekly-post-hero__cat:hover,
.geekly-post-hero--classic-banner .geekly-post-hero__cat:focus-visible {
    border-color: color-mix(in srgb, var(--clr-brand, #E63946) 62%, var(--clr-border, #2E2C35));
    color: var(--clr-text-primary, #E6EDF3);
    outline: none;
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-copy { min-width: 0; }
.geekly-post-hero--classic-banner .geekly-post-hero__title {
    max-width: min(100%, 27ch);
    margin: 0;
    color: var(--clr-text-primary, #E6EDF3);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(3.5rem, 5.1vw, 5.3rem);
    font-weight: 800;
    line-height: 0.91;
    letter-spacing: -0.032em;
    text-transform: uppercase;
    text-wrap: balance;
}
.geekly-post-hero--classic-banner.geekly-post-hero--long-title .geekly-post-hero__title {
    max-width: min(100%, 31ch);
    font-size: clamp(3.2rem, 4.6vw, 5rem);
    line-height: 0.93;
}
.geekly-post-hero--classic-banner .geekly-post-hero__subtitle {
    max-width: 64ch;
    margin: clamp(18px, 2vw, 26px) 0 0;
    color: var(--clr-text-secondary, #C9D1D9);
    font-size: clamp(0.98rem, 1.24vw, 1.18rem);
    line-height: 1.58;
}
.geekly-post-hero--classic-banner .geekly-post-hero__banner-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--clr-text-muted, #8B949E);
    font-size: 0.8125rem;
}
.geekly-post-hero--classic-banner .geekly-post-hero__author-name { color: var(--clr-text-primary, #E6EDF3); font-weight: 700; }
@media (min-width: 1100px) {
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-frame { border-radius: clamp(16px, 1.45vw, 22px); }
}
@media (max-width: 1024px) {
    .geekly-post-hero--classic-banner { --cb-pad-x: clamp(22px, 5vw, 54px); }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-frame { max-width: 960px; border-radius: 16px; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-media { height: clamp(320px, 42vw, 430px); }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-deck {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: clamp(30px, 5vw, 46px) clamp(24px, 5vw, 46px) 34px;
    }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-rail { display: contents; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-context { order: 1; margin-bottom: 20px; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-copy { order: 2; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-meta {
        order: 3;
        margin-top: 24px;
        padding-top: 17px;
        border-top: 1px solid var(--clr-border, #2E2C35);
    }
    .geekly-post-hero--classic-banner .geekly-post-hero__title { max-width: min(100%, 29ch); font-size: clamp(3.2rem, 6.5vw, 4.35rem); }
    .geekly-post-hero--classic-banner.geekly-post-hero--long-title .geekly-post-hero__title { max-width: min(100%, 31ch); font-size: clamp(2.8rem, 5.7vw, 3.9rem); }
}
@media (max-width: 640px) {
    .geekly-post-hero--classic-banner { --cb-pad-x: 0px; padding-top: 24px; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-frame { border: 0; border-radius: 0; box-shadow: none; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-media { height: clamp(238px, 69vw, 310px); }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-deck,
    .geekly-post-hero--classic-banner:not(.geekly-post-hero--has-image) .geekly-post-hero__banner-deck { width: 100%; margin: 0; padding: 25px 16px 28px; border-top-width: 2px; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-context { gap: 8px; margin-bottom: 15px; }
    .geekly-post-hero--classic-banner .geekly-post-hero__format,
    .geekly-post-hero--classic-banner .geekly-post-hero__cat { min-height: 24px; padding: 5px 8px 4px; font-size: 0.625rem; }
    .geekly-post-hero--classic-banner .geekly-post-hero__title,
    .geekly-post-hero--classic-banner.geekly-post-hero--long-title .geekly-post-hero__title { max-width: 100%; font-size: clamp(2.85rem, 12.7vw, 4rem); line-height: 0.92; }
    .geekly-post-hero--classic-banner .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.96rem; }
    .geekly-post-hero--classic-banner .geekly-post-hero__banner-meta { margin-top: 21px; padding-top: 16px; }
    .geekly-post-hero--classic-banner .geekly-post-hero__meta-sep { display: none; }
}

/* ── Layout 8: Classic Masthead ─────────────────────────────────────────── */
/* Formal typography-first opening that resolves into one framed featured image. */
.geekly-post-hero--classic-masthead {
    --cm-pad-x: clamp(24px, 5.4vw, 88px);
    display: block !important;
    position: relative;
    min-height: 0 !important;
    overflow: hidden;
    padding: clamp(42px, 5.5vw, 80px) var(--cm-pad-x) clamp(68px, 7vw, 112px);
    background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--clr-brand, #E63946) 8%, transparent), transparent 68%), var(--clr-bg-base, #0D0C10);
}
.geekly-post-hero--classic-masthead::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.025) 9.05% 9.13%, transparent 9.18% 90.82%, rgba(255,255,255,.025) 90.87% 90.95%, transparent 91%);
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-copy {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto clamp(26px, 3vw, 44px);
    text-align: center;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: clamp(16px, 1.7vw, 22px);
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker::before,
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker::after {
    content: '';
    width: clamp(32px, 7vw, 98px);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--clr-brand, #E63946));
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker::after { transform: scaleX(-1); }
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-labels { display: inline-flex; align-items: center; gap: 8px; }
.geekly-post-hero--classic-masthead .geekly-post-hero__format,
.geekly-post-hero--classic-masthead .geekly-post-hero__cat {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 5px 8px 4px;
    border: 1px solid color-mix(in srgb, var(--clr-border, #2E2C35) 84%, #fff 16%);
    border-radius: 3px;
    background: color-mix(in srgb, var(--clr-bg-raised, #1A191F) 82%, transparent);
    color: var(--clr-text-secondary, #C9D1D9);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__format {
    border-color: color-mix(in srgb, var(--clr-brand, #E63946) 62%, var(--clr-border, #2E2C35));
    color: #ff9ca5;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__cat:hover,
.geekly-post-hero--classic-masthead .geekly-post-hero__cat:focus-visible {
    border-color: var(--clr-brand, #E63946);
    color: var(--clr-text-primary, #E6EDF3);
    outline: none;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__title {
    max-width: 1080px;
    margin: 0 auto;
    color: var(--clr-text-primary, #E6EDF3);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: clamp(3.125rem, 5.6vw, 5.875rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.025em;
    text-transform: uppercase;
    text-wrap: balance;
}
.geekly-post-hero--classic-masthead.geekly-post-hero--long-title .geekly-post-hero__title {
    max-width: 19.5ch;
    font-size: clamp(3rem, 5.05vw, 5.1rem);
    line-height: 0.92;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__subtitle {
    max-width: 620px;
    margin: clamp(18px, 2vw, 28px) auto 0;
    color: var(--clr-text-secondary, #C9D1D9);
    font-size: clamp(0.98rem, 1.22vw, 1.125rem);
    line-height: 1.65;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
    color: var(--clr-text-muted, #8B949E);
    font-size: 0.78rem;
}
.geekly-post-hero--classic-masthead .geekly-post-hero__author-name { color: var(--clr-text-primary, #E6EDF3); font-weight: 700; }
.geekly-post-hero--classic-masthead .geekly-post-hero__meta-sep { color: var(--clr-brand, #E63946); }
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-rule {
    position: relative;
    z-index: 1;
    width: min(100%, 1260px);
    height: 3px;
    margin: clamp(28px, 3.3vw, 44px) auto 0;
    background: linear-gradient(90deg, transparent, var(--clr-brand, #E63946) 11%, var(--clr-brand, #E63946) 89%, transparent);
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-media {
    position: relative;
    z-index: 1;
    width: min(100%, 1320px);
    height: min(54vw, 660px);
    min-height: 360px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--clr-border, #2E2C35) 82%, #fff 18%);
    border-radius: clamp(12px, 1.15vw, 16px);
    background: var(--clr-bg-raised, #1A191F);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
}
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-img,
.geekly-post-hero--classic-masthead .geekly-post-hero__masthead-img img { width: 100%; height: 100%; object-fit: cover; }
.geekly-post-hero--classic-masthead:not(.geekly-post-hero--has-image) { padding-bottom: clamp(54px, 7vw, 104px); }
@media (max-width: 980px) {
    .geekly-post-hero--classic-masthead { --cm-pad-x: 42px; padding-top: 66px; padding-bottom: 76px; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-copy { max-width: 820px; margin-bottom: 34px; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__title { max-width: 780px; font-size: clamp(3rem, 7vw, 3.875rem); }
    .geekly-post-hero--classic-masthead.geekly-post-hero--long-title .geekly-post-hero__title { max-width: 19.5ch; font-size: clamp(2.85rem, 6.3vw, 3.65rem); }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-media { width: min(100%, 820px); height: clamp(360px, 48vw, 430px); min-height: 0; border-radius: 13px; }
}
@media (max-width: 640px) {
    .geekly-post-hero--classic-masthead { --cm-pad-x: 20px; padding: 28px 0 46px; }
    .geekly-post-hero--classic-masthead::before { display: none; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-copy { margin: 0 var(--cm-pad-x) 28px; text-align: left; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker { justify-content: flex-start; margin-bottom: 16px; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker::before,
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-kicker::after { display: none; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-labels { gap: 6px; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__format,
    .geekly-post-hero--classic-masthead .geekly-post-hero__cat { min-height: 24px; padding: 5px 7px 4px; font-size: 0.6rem; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__title,
    .geekly-post-hero--classic-masthead.geekly-post-hero--long-title .geekly-post-hero__title { max-width: 100%; font-size: clamp(2.85rem, 12.7vw, 4rem); line-height: 0.92; text-wrap: pretty; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__subtitle { margin-top: 18px; font-size: 0.96rem; line-height: 1.55; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-meta { justify-content: flex-start; margin-top: 18px; font-size: 0.72rem; }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-rule { width: 100%; height: 3px; margin: 0; background: var(--clr-brand, #E63946); }
    .geekly-post-hero--classic-masthead .geekly-post-hero__masthead-media { width: 100%; height: clamp(238px, 69vw, 310px); min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
}