/*
 * The IVS family of sites — homepage closer.
 *
 * Scoped under .ivs-network. The --v5-* tokens live in pages/homepage.css and
 * are not global, so every one below carries a fallback.
 *
 * The rail runs edge to edge. It does that by being a full-width <section> with
 * no container inside it, NOT by bleeding out of one with viewport units:
 * 100vw measures the scrollbar too and would push the page ~15px wider than the
 * screen. Only the heading is held to a readable column.
 */

.ivs-network {
    position: relative;
    overflow: hidden;
    padding: clamp(2.4rem, 4.5vw, 3.6rem) 0;
    background: var(--v5-parchment, #f2efe8);
    border-top: 1px solid var(--v5-line, #e4e0d5);
    border-bottom: 1px solid var(--v5-line, #e4e0d5);
    /* Inset rather than a drop shadow, matching the Magazine band: the strip
       should read as paper laid into the page, not a card floating above it. */
    box-shadow: inset 0 14px 26px -14px rgba(32, 31, 29, 0.22),
                inset 0 -14px 26px -14px rgba(32, 31, 29, 0.22);
}

/* ── Heading: the only part held to a column ── */

.ivs-network .ivs-network-head {
    width: min(44rem, calc(100% - 3rem));
    margin: 0 auto clamp(1.8rem, 3.5vw, 2.6rem);
    text-align: center;
}

.ivs-network .ivs-network-eyebrow {
    display: block;
    margin-bottom: 0.85rem;
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--v5-olive-700, #4a5e2f);
}

.ivs-network .ivs-network-title {
    margin: 0 0 0.75rem;
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: clamp(1.85rem, 3vw, 2.7rem);
    line-height: 1.2;
    color: var(--v5-ink, #201f1d);
}

.ivs-network .ivs-network-sub {
    margin: 0;
    font-family: var(--v5-font-body, 'Lora', Georgia, serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--v5-stone, #5b574d);
}

/* ── The rail ── */

/* Faded at both ends so the logos appear to arrive from off-screen rather than
   starting and stopping at a hard edge. */
.ivs-network .ivs-network-rail {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ivs-network .ivs-network-track {
    display: flex;
    align-items: center;
    gap: clamp(2.2rem, 4vw, 3.6rem);
    width: max-content;
    animation: ivsNetworkSlide 56s linear infinite;
    will-change: transform;
}

/* Half the track is a duplicate, so -50% lands exactly on the first copy. */
@keyframes ivsNetworkSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Hold while the reader looks at one. */
.ivs-network .ivs-network-rail:hover .ivs-network-track,
.ivs-network .ivs-network-rail:focus-within .ivs-network-track {
    animation-play-state: paused;
}

.ivs-network .ivs-network-tile {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 184px;
    text-decoration: none;
    color: inherit;
}

.ivs-network .ivs-network-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 76px;
}

/* Sixteen logos in sixteen different palettes read as clutter side by side.
   Greyed at rest and full colour on hover evens them out. */
.ivs-network .ivs-network-mark img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1) opacity(0.55);
    transition: filter 0.45s ease;
}

.ivs-network a.ivs-network-tile:hover .ivs-network-mark img,
.ivs-network a.ivs-network-tile:focus-visible .ivs-network-mark img {
    filter: grayscale(0) opacity(1);
}

/* Stands in until artwork arrives. Lettered rather than a blank box, so the
   row reads as a set of brands and not as broken images. */
.ivs-network .ivs-network-letters {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--v5-line, #e4e0d5);
    border-radius: 50%;
    background: var(--v5-ivory, #faf9f6);
    font-family: var(--v5-font-display, 'Playfair Display', Georgia, serif);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--v5-olive-700, #4a5e2f);
    transition: border-color 0.4s ease, background 0.4s ease, color 0.4s ease;
}

.ivs-network a.ivs-network-tile:hover .ivs-network-letters,
.ivs-network a.ivs-network-tile:focus-visible .ivs-network-letters {
    border-color: var(--v5-amber, #fcb913);
    background: var(--v5-olive-900, #33421f);
    color: var(--v5-ivory, #faf9f6);
}

.ivs-network .ivs-network-domain {
    font-family: var(--v5-font-label, 'Inter', sans-serif);
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    color: var(--v5-mist, #8b877c);
    white-space: nowrap;
    transition: color 0.35s ease;
}

.ivs-network a.ivs-network-tile:hover .ivs-network-domain,
.ivs-network a.ivs-network-tile:focus-visible .ivs-network-domain {
    color: var(--v5-olive-900, #33421f);
}

/* Name for screen readers where the visible mark is only initials. */
.ivs-network .ivs-network-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 575px) {
    .ivs-network .ivs-network-tile { width: 148px; }
    .ivs-network .ivs-network-mark { height: 60px; }
}

/* A row that never stops moving is exactly what reduced motion asks about.
   Held still, it still reads as a complete set. */
@media (prefers-reduced-motion: reduce) {
    .ivs-network .ivs-network-track {
        animation: none !important;
        flex-wrap: wrap;
        justify-content: center;
        width: auto;
        gap: 1.8rem 2.4rem;
        padding: 0 1.5rem;
    }
    .ivs-network .ivs-network-rail {
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* The duplicate pass only exists to make the loop seamless; standing still
       it would just show every logo twice. */
    .ivs-network .ivs-network-track > .ivs-network-clone {
        display: none;
    }
    .ivs-network .ivs-network-mark img,
    .ivs-network .ivs-network-letters,
    .ivs-network .ivs-network-domain {
        transition: none !important;
    }
}