/* #region Hero */
/* A wider measure for this one title, the way Odoardo Research™ and the bookshop already set theirs.
   The house default is eight characters a line, which is right for a two-word headline and wrong for
   „Myśl, która zostaje": at eight it breaks after the comma and again after „która", so a heading meant to
   land in two lines arrives in three. Eleven holds „Myśl, która" whole, and the copy needs no rewriting. */
.hero-cinematic--journal .h-title {
    max-width: 11ch;
}
/* #endregion */

/* #region Filters */
/* The band runs the full width of the screen, like the site header it stands under: capped at the
   container's 1400px, its ground and rule stopped short on a wide screen with the page showing either
   side. The chips inside keep their own measure. */
.container.j-filters-bar {
    max-width: none;
}

.j-filters-bar {
    position: sticky;
    top: var(--site-header-h);
    scroll-margin-top: var(--site-header-h);
    z-index: 100;
    padding: 2.6vh 0;
    display: flex;
    justify-content: center;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(245, 245, 245, 0.08);
    transition: border-color 0.4s ease;
}

/* One row, always. The categories are a single control and reading them meant reading two ragged
   lines of loose capitals; with the bookshop and the research shelf gone from the row there is room
   for the names themselves. Where the viewport is too narrow the row scrolls sideways rather than
   breaking — a filter bar that reflows moves the chip somebody was aiming at. */
.j-filters {
    display: flex;
    flex-wrap: nowrap;
    justify-content: safe center;
    gap: .5rem;
    margin-top: 0;
    width: 100%;
    /* The row takes the container's whole width, never a fixed cap: the seven names measure wider than
       1100px, so a capped row clips the last and longest chip while leaving 300px of container unused
       beside it. It still scrolls where the viewport really is too narrow; that is the case the
       overflow is for. */
    max-width: 100%;
    /* A gutter at every width: where the row scrolls, its first and last chips otherwise touch the
       screen edges. Bounded, so on a laptop it does not eat the width the chips need. */
    padding-inline: clamp(16px, 5vw, 1.5rem);
    scroll-padding-inline: clamp(16px, 5vw, 1.5rem);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s 0.8s var(--ease-house) forwards;
}

    .j-filters::-webkit-scrollbar {
        display: none;
    }

/* The band keeps the wide screen's row of chips in the container's measure. */
.j-filters-bar > .j-filters {
    max-width: 1400px;
}

/* A phone held sideways: the header and this band together took a third of the screen. */
@media (max-height: 500px) {
    .j-filters-bar {
        position: relative;
        top: auto;
    }
}

/* A mouse has no swipe and the scrollbar is hidden, so a row wider than the screen hid its last chip
   for good. Where the pointer is a mouse the row wraps; a finger keeps the scroll. */
@media (hover: hover) and (pointer: fine) {
    .j-filters {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
}

/* Product names are long and the widest of them carries a ™. Each filter is its own bordered field
   and never shrinks: as flexible items the longest name gave up its width first and the ™ dropped
   to a line of its own under the word it belongs to. */
.j-filter {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 44px;
    padding-inline: 1.1rem;
    border: 1px solid transparent;
    font-family: var(--font);
    /* A step up from .62rem: these are the page's one control, and set at the size of a caption they
       read as a legend under the header rather than as something to press. */
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    white-space: nowrap;
    color: rgba(245, 245, 245, 0.4);
    text-decoration: none;
    transition: color .3s var(--ease-house), border-color .3s var(--ease-house), background-color .3s var(--ease-house);
}

    .j-filter:hover,
    .j-filter:focus-visible {
        border-color: var(--gold-border);
        color: var(--white);
    }

    .j-filter.active {
        border-color: var(--gold);
        background: rgba(var(--gold-rgb),.07);
        color: var(--gold);
    }
/* #endregion */

/* #region Hub Intro */
.j-hub-intro {
    padding: clamp(6rem, 10vw, 9rem) 0 clamp(3rem, 5vw, 5rem);
    border-bottom: 1px solid var(--line);
}

/* .container carries no padding of its own, so these sections need the shared width treatment
   or their copy touches the screen edge on phones. */
.j-hub-intro > .container,
.journal-showcase > .container {
    width: min(90vw, var(--section-content-max));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.j-hub-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(3rem, 6vw, 7vw);
    align-items: start;
}

.j-hub-left h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.6rem, 5.2vw, 4.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--white);
}

.j-hub-right {
    border-left: 1px solid var(--hairline-mid);
    padding-left: clamp(2rem, 3vw, 3rem);
    padding-top: 0.4rem;
}

    /* Playfair: this line is what the category is about, said once — editorial emphasis, which is
       the display face's job in this house. The paragraph under it stays in the body face. */
    .j-hub-right .j-hub-lead {
        margin-bottom: 1.6rem;
        color: var(--white-soft);
        font-family: var(--font-display);
        font-size: clamp(1.15rem, 1.5vw, 1.5rem);
        font-weight: 300;
        line-height: 1.55;
    }

    .j-hub-right .j-hub-body {
        margin-bottom: 2.2rem;
        color: rgba(245, 245, 245, 0.55);
        font-size: 1rem;
        line-height: 1.8;
    }

.j-hub-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.9rem;
    border: 1px solid var(--hairline-strong);
    color: var(--white);
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--motion-quick) var(--ease-house), color var(--motion-quick) var(--ease-house);
}

    /* Gold arrives on the line and the letters; it never fills the button. */
    .j-hub-cta:hover,
    .j-hub-cta:focus-visible {
        border-color: var(--gold);
        color: var(--gold);
    }

.j-hub-cta-arrow {
    transition: transform var(--motion-quick) var(--ease-house);
}

.j-hub-cta:hover .j-hub-cta-arrow {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .j-hub-grid {
        grid-template-columns: 1fr;
    }

    .j-hub-right {
        border-left: none;
        padding-left: 0;
        padding-top: clamp(2rem, 5vw, 3rem);
        border-top: 1px solid var(--hairline-mid);
    }
}
/* #endregion */

/* #region Showcase */
.journal-showcase {
    padding: 5vh 0 14vh;
    position: relative;
    z-index: 5;
}

.journal-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 4vw, 5rem);
    row-gap: clamp(2.5rem, 4vw, 5rem);
    align-items: start;
    margin: 10vh auto 0;
    width: 100%;
}

.j-card:nth-child(even) {
    margin-top: clamp(4rem, 7vw, 7rem);
}

.j-card {
    display: block;
    text-decoration: none;
    position: relative;
    opacity: 0;
    transform: translateY(56px) scale(0.98);
    transition: opacity 1.3s var(--ease-house), transform 1.3s var(--ease-house);
}

    .j-card:nth-child(2n) {
        transition-delay: 0.08s;
    }

    .j-card::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 4;
        border: 1px solid transparent;
        transition: border-color var(--motion) var(--ease-house);
        pointer-events: none;
    }

    .j-card:hover::before {
        border-color: rgba(var(--gold-rgb),0.45);
    }

    .j-card.visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

.j-image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background-color: var(--black);
}

    .j-image-wrapper::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        display: block;
        background: linear-gradient(to bottom, rgba(5, 5, 5, 0.05) 0%, rgba(5, 5, 5, 0) 32%, rgba(5, 5, 5, 0.4) 68%, rgba(5, 5, 5, 0.85) 100%);
        transition: opacity var(--motion) var(--ease-house);
    }

/* Full, like the thumbnail's — see .pj-card in product-sections.css. The scrim gets stronger under a
   hand, not weaker: the title turns gold at the same moment, and gold on a lit photograph is the one
   colour that disappears. */
.j-card:hover .j-image-wrapper::after {
    opacity: 1;
}

.j-image-wrapper .parallax-container {
    width: 100%;
    height: 130%;
    position: absolute;
    top: -15%;
    left: 0;
    will-change: transform;
}

.j-img-inner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-mute) var(--photo-at-rest);
    transition: transform 1.8s var(--ease-house), filter var(--motion-slow) var(--ease-house);
}

/* The same gesture the four thumbnails on a product page make: colour comes back and the light goes
   down. Brightening is the natural thing to do to a photograph and the wrong thing to do under gold
   type, which is why the thumbnail does not. Two cards showing the same article must not answer a hand
   differently. */
.j-card:hover .j-img-inner {
    transform: scale(1.025);
    filter: var(--photo-under-type);
}

.j-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 3;
    padding: 6px 12px;
    font-family: var(--font);
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(245, 245, 245, .5);
    border: 1px solid var(--hairline-strong);
    background: rgba(5, 5, 5, 0.45);
    backdrop-filter: blur(4px);
    transition: background var(--motion) var(--ease-house), border-color var(--motion) var(--ease-house), color var(--motion) var(--ease-house);
}

/* The plate deepens on hover instead of inverting — the same movement the small teaser makes on
   every product page, and for the reason written beside it there (see .pj-card:hover .pj-tag in
   product-sections.css). Filled with gold, this label's own type — half a rem, uppercase, four
   pixels of tracking — sat in near-black on a mid-tone, and at that size the letters dissolve
   however sound the contrast ratio looks on paper: what fails is the stroke, not the arithmetic.
   These are the largest cards in the house, so they are the ones that would lose their category. */
.j-card:hover .j-tag {
    border-color: var(--gold);
    background: rgba(5, 5, 5, 0.75);
    color: var(--gold);
}

.j-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: clamp(2rem, 3.6vw, 3.2rem) clamp(1.6rem, 3vw, 2.6rem) clamp(1.6rem, 2.6vw, 2.1rem);
    transform: translateY(10px);
    transition: transform var(--motion) var(--ease-house);
}

.j-card:hover .j-content {
    transform: translateY(0);
}

.j-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.6rem, 2.4vw, 2.5rem);
    color: var(--white);
    margin: 0 0 1.3rem;
    line-height: 1.28;
    letter-spacing: 0.005em;
    text-shadow: 0 2px 18px rgba(5, 5, 5, 0.55);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    /* A German compound is wider than a narrow card and the clamp's overflow cut it at the edge. */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

    .j-title span {
        transition: color var(--motion) var(--ease-house);
    }

.j-card:hover .j-title span {
    color: var(--gold);
}

.j-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 1rem;
    border-top: 1px solid rgba(245, 245, 245, 0.18);
}

.j-date {
    font-family: var(--font);
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(245, 245, 245, 0.55);
}

.j-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font);
    font-size: 0.52rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: rgba(245, 245, 245, 0.45);
    transition: color var(--motion) var(--ease-house), letter-spacing var(--motion) var(--ease-house);
}

.j-btn-arrow {
    transition: transform var(--motion) var(--ease-house);
}

.j-card:hover .j-btn {
    color: var(--gold);
    letter-spacing: 5px;
}

.j-card:hover .j-btn-arrow {
    transform: translateX(6px);
}
/* #endregion */

/* #region Pagination */
.j-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 6vh auto 0;
    padding-bottom: 0;
}

.j-page-numbers {
    display: flex;
    align-items: center;
    gap: 6px;
}

.j-page-num,
.j-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-family: var(--font);
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    color: rgba(245, 245, 245, 0.4);
    padding: 8px 14px;
    border: 1px solid transparent;
    transition: color var(--motion-quick) var(--ease-house), border-color var(--motion-quick) var(--ease-house);
    cursor: pointer;
}

    .j-page-num:hover,
    .j-page-btn:hover {
        color: var(--gold);
        border-color: rgba(var(--gold-rgb),0.3);
    }

.j-page-num--active {
    color: var(--gold);
    border-color: rgba(var(--gold-rgb),0.5);
}

.j-page-btn--disabled {
    opacity: 0.2;
    pointer-events: none;
    cursor: default;
}

.j-page-ellipsis {
    color: rgba(245, 245, 245, 0.25);
    padding: 0 4px;
}
/* #endregion */

/* #region Loading State */
#journal-showcase {
    transition: opacity 0.25s ease;
}

    #journal-showcase.j-loading {
        opacity: 0.35;
        pointer-events: none;
    }
/* #endregion */

/* #region Responsive */
@media (max-width: 640px) {
    .journal-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 3rem;
    }

    .j-card:nth-child(even) {
        margin-top: 0;
    }

    /* Arrows, both ends and five numbers are some 500px in one row; on a phone the row wraps, and the
       arrows stay on the screen. */
    .j-pagination,
    .j-page-numbers {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    .j-page-num,
    .j-page-btn {
        min-width: 40px;
        padding: 8px 6px;
        letter-spacing: 0;
    }
}

@media (max-width: 700px) {
    .j-filters {
        gap: .5rem;
        max-width: none;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-inline: 5vw;
        scroll-padding-inline: 5vw;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .j-filters::-webkit-scrollbar {
            display: none;
        }

    .j-filter {
        flex: none;
        white-space: nowrap;
    }

    .j-image-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    .j-title {
        font-size: clamp(1.2rem, 5vw, 1.7rem);
    }
}

/* The hub's call names a whole product and is wider than a 320px column on one line. */
@media (max-width: 480px) {
    .j-hub-cta {
        max-width: 100%;
        white-space: normal;
    }
}

/* Touch devices never hover: keep the card footer in its resting place and the button legible. */
@media (hover: none) {
    .j-content {
        transform: none;
    }

    .j-btn {
        color: var(--white-soft);
    }
}
/* #endregion */