/* ==========================================
   JOURNAL / BLOG — Zine punk Jinx
   ========================================== */

/* ---- JOURNAL HERO ---- */
.journal-hero {
    padding: 200px 0 var(--spacing-4xl);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--color-line)
}

.journal-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--jinx-pink-rgb), .06) 0%, transparent 65%);
    pointer-events: none
}

.journal-hero__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--spacing-xl)
}

.journal-hero__left {
    flex: 1
}

.journal-hero__tag {
    display: block;
    margin-bottom: var(--spacing-2xl)
}

.journal-title {
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: .85;
    margin: 0;
    color: var(--color-white)
}

.journal-title__line {
    display: block
}

.journal-title .text-italic {
    color: var(--color-accent-light)
}

.journal-hero__right {
    text-align: right;
    flex-shrink: 0;
    padding-bottom: .5rem
}

.journal-hero__count {
    font-family: var(--font-display), sans-serif;
    font-size: clamp(3rem, 8vw, 7rem);
    font-weight: 800;
    color: rgba(255, 255, 255, .06);
    line-height: 1;
    display: block
}

.journal-hero__count-label {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .35);
    display: block
}

/* ---- JOURNAL GRID SECTION ---- */
.journal-grid-section {
    padding: var(--spacing-3xl) 0 var(--spacing-5xl)
}

.journal-grid__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-line);
    margin-bottom: 4px
}

.journal-grid__label {
    font-family: var(--font-body), sans-serif;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--jinx-pink);
    display: flex;
    align-items: center;
    gap: 8px
}

.journal-grid__label::before {
    content: '';
    display: block;
    width: 16px;
    height: 1px;
    background: var(--jinx-pink);
    box-shadow: 0 0 6px var(--jinx-pink)
}

.journal-grid__count {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .3)
}

/* ---- JOURNAL TILES ---- */
.journal-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px
}

.journal-tile {
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
    aspect-ratio: 3/2
}

.journal-tile--lead {
    grid-column: span 2;
    aspect-ratio: 16/7
}

.journal-tile__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--color-white);
    position: relative
}

.journal-tile__num {
    position: absolute;
    top: var(--spacing-lg);
    left: var(--spacing-xl);
    font-family: var(--font-display), sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
    z-index: 2;
    pointer-events: none;
    transition: color .4s ease
}

.journal-tile:hover .journal-tile__num {
    color: rgba(223, 0, 112, .2)
}

.journal-tile__img {
    position: absolute;
    inset: 0;
    z-index: 0
}

.journal-tile__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.72);
    transition: transform 1.4s var(--ease-out-expo), filter .6s ease
}

.journal-tile:hover .journal-tile__img img {
    transform: scale(1.06);
    filter: brightness(1)
}

.journal-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--spacing-xl);
    background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .28) 48%, transparent 100%)
}

.journal-tile--no-img .journal-tile__overlay {
    background: radial-gradient(ellipse 80% 60% at 30% 80%, rgba(223, 0, 112, .1) 0%, transparent 60%), #0a0a0a
}

.journal-tile__info {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.journal-tile__cat {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--jinx-pink);
    transform: translateY(8px);
    opacity: 0;
    transition: transform .4s var(--ease-out-expo), opacity .3s ease
}

.journal-tile:hover .journal-tile__cat {
    transform: translateY(0);
    opacity: 1
}

.journal-tile__title {
    font-family: var(--font-display), sans-serif;
    font-size: clamp(1rem, 2vw, 1.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.02em;
    line-height: 1;
    margin: 0;
    color: var(--color-white);
    transition: transform .4s var(--ease-out-expo)
}

.journal-tile--lead .journal-tile__title {
    font-size: clamp(1.4rem, 2.8vw, 2.6rem)
}

.journal-tile:hover .journal-tile__title {
    transform: translateX(8px)
}

.journal-tile__date {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .38)
}

/* .reading-progress → components/reading-progress.css */

/* ============================================================
   JOURNAL SINGLE — "jart": ficha editorial tipo zine
   Masthead tipografico, cover independiente, rail sticky con
   indice + anillo de progreso + compartir, related en cards.
   ============================================================ */

/* ---- MASTHEAD ---- */
.jart-head {
    position: relative;
    padding: 190px 0 var(--spacing-3xl);
    border-bottom: 1px solid var(--color-line);
    overflow: hidden
}

.jart-head::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--jinx-pink-rgb), .07) 0%, transparent 70%);
    pointer-events: none
}

.jart-head__strip {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-line);
    margin-bottom: var(--spacing-3xl)
}

.jart-head__back {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .6);
    transition: color .3s ease
}

.jart-head__back:hover {
    color: var(--color-white)
}

.jart-head__num {
    margin-left: auto;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--color-accent-light)
}

.jart-title {
    font-size: clamp(2.8rem, 6.5vw, 6.4rem);
    line-height: .92;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--color-white);
    margin: 0 0 var(--spacing-3xl);
    max-width: 1100px
}

.jart-title__accent {
    font-family: var(--font-serif), serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: var(--color-accent-light);
    text-shadow: 0 0 10px rgba(var(--jinx-pink-rgb), .35)
}

/* Neón jinx: la palabra acento y el cierre parpadean brevemente cada ciclo,
   como un rótulo de tubo defectuoso. Solo si el usuario admite movimiento. */
@media (prefers-reduced-motion: no-preference) {
    .jart-title__accent {
        animation: jart-neon 7s 2.5s infinite steps(1)
    }

    .jart-end__mark {
        animation: jart-neon 6s 1.5s infinite steps(1)
    }
}

@keyframes jart-neon {
    0%, 88%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px rgba(var(--jinx-pink-rgb), .35)
    }
    89%, 93% {
        opacity: .55;
        text-shadow: none
    }
    90%, 92%, 96% {
        opacity: 1;
        text-shadow:
            0 0 14px rgba(var(--jinx-pink-rgb), .9),
            0 0 28px rgba(var(--jinx-pink-rgb), .5)
    }
}

/* Split por palabras (blog.js): cada palabra sube desde detras de
   una mascara de overflow; el padding evita cortar descendentes */
.jart-title .jart-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .12em;
    margin-bottom: -.12em
}

.jart-title .jart-w-in {
    display: inline-block;
    will-change: transform
}

.jart-head__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--spacing-4xl);
    align-items: end;
    /* Por encima del cover que sube a solaparse, por si llegan a cruzarse */
    position: relative;
    z-index: 2
}

.jart-lede {
    font-family: var(--font-serif), serif;
    font-style: italic;
    font-size: clamp(1.3rem, 1.9vw, 1.8rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, .75);
    margin: 0;
    max-width: 32em
}

.jart-head__meta {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    border-left: 1px solid var(--color-line);
    padding-left: var(--spacing-xl)
}

.jart-head__meta-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md)
}

.jart-head__meta dt {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .4)
}

.jart-head__meta dd {
    margin: 0;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .85);
    text-align: right
}

/* ---- COVER ----
   Sube para solaparse con la base del masthead (oculta su borde inferior).
   El scrim superior funde el borde de la imagen con la zona oscura de
   arriba; el texto del foot va por encima (z-index) por si se cruzan. */
.jart-cover {
    position: relative;
    z-index: 1;
    margin: calc(-1 * clamp(40px, 8vw, 120px)) 0 0
}

.jart-cover::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: clamp(60px, 12vw, 150px);
    background: linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%);
    z-index: 2;
    pointer-events: none
}

.jart-cover__frame {
    height: min(78vh, 800px);
    overflow: hidden
}

.jart-cover__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

/* ---- LAYOUT: RAIL STICKY + CUERPO ---- */
.jart-layout {
    padding: var(--spacing-4xl) 0 var(--spacing-5xl)
}

/* Sin align-items: la columna del rail se estira a la altura del
   cuerpo, que es lo que da recorrido al position: sticky interior */
.jart-layout__grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 6.5rem)
}

.jart-rail__inner {
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl)
}

/* Anillo de progreso de lectura */
.jart-progress {
    position: relative;
    width: 64px;
    height: 64px
}

.jart-progress svg {
    width: 100%;
    height: 100%;
    display: block
}

#jart-progress-ring {
    transition: stroke-dashoffset .15s linear
}

.jart-progress__pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .65)
}

/* Indice del articulo (lo construye blog.js con los H2 del cuerpo) */
.jart-toc {
    border-top: 1px solid var(--color-line);
    padding-top: var(--spacing-lg);
    display: none
}

.jart-toc.has-items {
    display: block
}

.jart-toc__label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .4);
    margin-bottom: var(--spacing-md)
}

.jart-toc__link {
    display: block;
    padding: 5px 0 5px 14px;
    border-left: 1px solid var(--color-line);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    transition: color .3s ease, border-color .3s ease
}

.jart-toc__n {
    display: inline-block;
    margin-right: 8px;
    font-size: 10px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .3);
    transition: color .3s ease
}

.jart-toc__link:hover {
    color: var(--color-white)
}

.jart-toc__link:hover .jart-toc__n,
.jart-toc__link.is-active .jart-toc__n {
    color: var(--color-accent-light)
}

.jart-toc__link.is-active {
    color: var(--color-accent-light);
    border-left-color: var(--color-accent-light)
}

/* Compartir */
.jart-share {
    border-top: 1px solid var(--color-line);
    padding-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs)
}

.jart-share__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: rgba(255, 255, 255, .4);
    margin-bottom: var(--spacing-xs)
}

.jart-share__link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .55);
    text-decoration: none;
    transition: color .3s ease;
    width: fit-content
}

.jart-share__link:hover {
    color: var(--color-accent-light)
}

.jart-share__link.is-copied {
    color: var(--jinx-cyan)
}

/* Cuerpo: el ancho lo gobierna la columna del grid, asi que las
   imagenes ocupan la columna completa (sin breakouts de 100vw) */
.jart-body {
    min-width: 0
}

.jart-body .entry-content {
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* Ancho completo: tipografía más grande y aireada para que el texto
       largo siga siendo cómodo de leer sin medida estrecha */
    font-size: clamp(1.05rem, .5rem + .75vw, 1.3rem);
    line-height: 1.95
}

.jart-body .entry-content > p {
    margin-bottom: 1.55em
}

/* Anclas: que el destino del índice quede bajo el header fijo */
.jart-body .entry-content h2,
.jart-body .entry-content h3 {
    scroll-margin-top: 120px
}

.jart-body .entry-content figure,
.jart-body .entry-content .wp-block-image,
.jart-body .entry-content .wp-block-gallery {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%
}

.jart-body .entry-content figcaption {
    max-width: 100%;
    padding: 0
}

/* ---- MARQUEE DIVISOR ---- */
.jart-marquee .marquee-item {
    color: rgba(255, 255, 255, .45)
}

.jart-marquee .marquee-sep {
    color: var(--color-accent-light)
}

/* ---- CIERRE DE ARTICULO ---- */
.jart-end {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-4xl)
}

.jart-end__line {
    flex: 1;
    height: 1px;
    background: var(--color-line)
}

.jart-end__mark {
    font-size: var(--font-size-sm);
    letter-spacing: .5em;
    padding-left: .5em;
    color: var(--color-accent-light);
    user-select: none
}

/* ---- RELATED: cards editoriales ---- */
.jart-related {
    padding: var(--spacing-4xl) 0 var(--spacing-5xl)
}

.jart-related__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-2xl)
}

.jart-related__all {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .55);
    transition: color .3s ease
}

.jart-related__all:hover {
    color: var(--color-accent-light)
}

.jart-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl)
}

.jart-rcard {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-white);
    min-width: 0
}

/* El fondo con glow rosa hace de placeholder cuando no hay imagen */
.jart-rcard__media {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: var(--spacing-lg);
    background:
        radial-gradient(ellipse 80% 60% at 70% 20%, rgba(var(--jinx-pink-rgb), .12) 0%, transparent 70%),
        #101010
}

.jart-rcard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.78);
    transition: transform 1.1s var(--ease-out-expo), filter .5s ease
}

.jart-rcard:hover .jart-rcard__media img {
    transform: scale(1.06);
    filter: brightness(1)
}

.jart-rcard__num {
    position: absolute;
    bottom: 8px;
    left: 14px;
    font-family: var(--font-display), sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .35);
    transition: color .4s ease, -webkit-text-stroke-color .4s ease;
    pointer-events: none
}

.jart-rcard:hover .jart-rcard__num {
    color: var(--color-accent-light);
    -webkit-text-stroke-color: var(--color-accent-light)
}

.jart-rcard__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm)
}

.jart-rcard__cat {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--color-accent-light)
}

.jart-rcard__date {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .4)
}

.jart-rcard__title {
    font-family: var(--font-display), sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.05;
    margin: 0 0 var(--spacing-md);
    color: var(--color-white);
    transition: color .3s ease
}

.jart-rcard:hover .jart-rcard__title {
    color: var(--color-accent-light)
}

.jart-rcard__cta {
    margin-top: auto;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .5);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .3s ease
}

.jart-rcard__cta::after {
    content: '\2192';
    transition: transform .35s var(--ease-out-expo)
}

.jart-rcard:hover .jart-rcard__cta {
    color: var(--color-accent-light)
}

.jart-rcard:hover .jart-rcard__cta::after {
    transform: translateX(5px)
}

/* ---- ANTERIOR / SIGUIENTE ---- */
.jart-nav {
    border-top: 1px solid var(--color-line)
}

.jart-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.jart-nav__item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 220px;
    padding: var(--spacing-2xl);
    text-decoration: none;
    transition: background .4s ease
}

.jart-nav__item:hover {
    background: rgba(255, 255, 255, .03)
}

/* Miniatura de fondo que se revela al hover (oscurecida para legibilidad) */
.jart-nav__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    transition: opacity .55s var(--ease-out-expo)
}

.jart-nav__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.32);
    transform: scale(1.06);
    transition: transform 1.3s var(--ease-out-expo)
}

.jart-nav__item:hover .jart-nav__bg {
    opacity: 1
}

.jart-nav__item:hover .jart-nav__bg img {
    transform: scale(1)
}

.jart-nav__item.next {
    align-items: flex-end;
    text-align: right;
    border-left: 1px solid var(--color-line)
}

.jart-nav__item:only-child {
    grid-column: 1 / -1
}

.jart-nav__dir {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .45);
    transition: color .3s ease
}

.jart-nav__item:hover .jart-nav__dir {
    color: var(--color-accent-light)
}

.jart-nav__title {
    position: relative;
    z-index: 1;
    font-family: var(--font-display), sans-serif;
    font-size: clamp(1.2rem, 2.2vw, 1.9rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.05;
    color: var(--color-white);
    max-width: 480px;
    transition: color .3s ease
}

.jart-nav__item:hover .jart-nav__title {
    color: var(--color-accent-light)
}

/* ---- RESPONSIVE JART ---- */
@media (max-width: 900px) {
    .jart-head {
        padding-top: 150px
    }

    .jart-head__foot {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl)
    }

    .jart-head__meta {
        border-left: none;
        border-top: 1px solid var(--color-line);
        padding-left: 0;
        padding-top: var(--spacing-lg);
        max-width: 420px
    }

    .jart-layout__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl)
    }

    /* En movil el rail deja de ser sticky: solo queda compartir en fila */
    .jart-rail__inner {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--spacing-lg)
    }

    .jart-progress,
    .jart-toc,
    .jart-toc.has-items {
        display: none
    }

    .jart-share {
        border-top: none;
        padding-top: 0;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-lg)
    }

    .jart-share__label {
        margin-bottom: 0
    }

    .jart-cover__frame {
        height: 52vh
    }
}

@media (max-width: 768px) {
    .jart-related__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl)
    }

    .jart-rcard__title {
        font-size: clamp(1.1rem, 5vw, 1.4rem)
    }

    .jart-nav__grid {
        grid-template-columns: 1fr
    }

    .jart-nav__item {
        min-height: 0;
        padding: var(--spacing-xl) var(--spacing-lg)
    }

    .jart-nav__item.next {
        border-left: none;
        border-top: 1px solid var(--color-line);
        align-items: flex-start;
        text-align: left
    }
}

/* ---- PAGINATION ---- */
.blog-pagination {
    margin-top: var(--spacing-3xl);
    padding: var(--spacing-3xl) 0;
    border-top: 1px solid var(--color-line)
}

.blog-pagination .nav-links {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center
}

.blog-pagination a, .blog-pagination span {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, .7);
    transition: color .3s ease
}

.blog-pagination a:hover {
    color: var(--color-white)
}

.blog-pagination .current {
    background: var(--jinx-pink);
    color: #fff;
    box-shadow: 0 0 12px rgba(223, 0, 112, .4)
}

.no-posts {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, .65);
    text-align: center;
    padding: var(--spacing-4xl) 0
}

/* ---- RESPONSIVE TILES ---- */
@media (max-width: 1100px) {
    .journal-tiles {
        grid-template-columns: repeat(2, 1fr)
    }

    .journal-tile--lead {
        grid-column: span 2
    }
}

@media (max-width: 900px) {
    .journal-hero__right {
        display: none
    }
}

@media (max-width: 768px) {
    .journal-hero {
        padding: 140px 0 var(--spacing-3xl)
    }

    .journal-title {
        font-size: clamp(3rem, 10vw, 5rem)
    }

    .journal-tiles {
        grid-template-columns: 1fr;
        gap: 3px
    }

    .journal-tile,
    .journal-tile--lead {
        grid-column: span 1;
        aspect-ratio: 3/2
    }

    .journal-tile__cat {
        opacity: 1;
        transform: none
    }









}