/* Homepage-only cinematic ribbon. Keep every description in normal flow:
 * the longest item determines row height instead of clipping any copy. */
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial {
    --poster-height: clamp(390px, 32vw, 440px);
    --poster-ink: #111a2b;
    --poster-padding: 24px;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__controls {
    flex: none;
    gap: 12px;
    margin: 24px 0 0;
    padding: 0;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__controls button {
    width: 44px;
    height: 44px;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial [data-portfolio-grid] {
    grid-auto-columns: calc((100% - 40px) / 3);
    gap: 20px;
    align-items: stretch;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial :is(
    .kg-portfolio-showcase__video-card,
    .kg-portfolio-showcase__editorial-card,
    .kg-portfolio-showcase__audio-card
) {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: var(--poster-height);
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: var(--poster-ink);
    box-shadow: none;
    color: #fff;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__video-card { display: flex; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    min-height: var(--poster-height);
    aspect-ratio: auto;
    border-radius: inherit;
    isolation: isolate;
    text-decoration: none;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__posters .kg-portfolio-showcase__media { aspect-ratio: auto; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media img,
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__editorial-card > img {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    object-fit: cover;
    transition: transform .4s cubic-bezier(.2, .65, .3, 1);
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media::after,
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__editorial-card::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, #111a2b40 0%, #111a2b05 28%, #111a2b94 58%, #111a2bee 82%, #111a2bf7 100%);
    pointer-events: none;
    content: "";
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__poster-caption {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 180px var(--poster-padding) 28px;
    color: #fff;
    background: linear-gradient(180deg, #111a2b00 0, #111a2bd9 180px, #111a2bf2 100%);
    pointer-events: none;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial :is(h3, .kg-portfolio-showcase__title) {
    min-height: 0;
    margin: 0;
    color: #fff !important;
    font: 700 23px/1.2 Roboto, Arial, sans-serif;
    font-size: 23px !important;
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial :is(.kg-portfolio-showcase__poster-caption, .kg-portfolio-showcase__editorial-card, .kg-portfolio-showcase__audio-card) p {
    display: block;
    margin: 12px 0 0;
    overflow: visible;
    color: #fffffff0 !important;
    font: 400 15px/1.5 Roboto, Arial, sans-serif;
    font-size: 15px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__tag {
    position: absolute;
    z-index: 2;
    inset: 24px auto auto 24px;
    max-width: calc(100% - 110px);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font: 500 12px/1.45 Roboto, Arial, sans-serif;
    letter-spacing: .015em;
    text-shadow: 0 1px 8px #111a2bb3;
    overflow-wrap: anywhere;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__video-play {
    z-index: 3;
    top: 18px;
    left: auto;
    right: 18px;
    bottom: auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0;
    border: 1px solid #ffffffb3;
    border-radius: 50%;
    background: #111a2b40;
    color: #fff;
    transform: none;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__video-play svg { display: block; width: 16px; height: 16px; margin-left: 2px; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media:is(:hover, :focus-visible) img { transform: scale(1.035); }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media:is(:hover, :focus-visible) .kg-portfolio-showcase__video-play { background: var(--portfolio-red); border-color: var(--portfolio-red); }

/* Books and guides retain their real cover, author/description, reader and
 * working audio button; only the visual surface changes. */
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__editorial-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__editorial-card > div {
    position: relative;
    z-index: 2;
    flex: none;
    min-height: 0;
    padding: 180px var(--poster-padding) 28px;
    background: linear-gradient(180deg, #111a2b00 0, #111a2bd9 180px, #111a2bf2 100%);
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__voice {
    margin-top: 18px !important;
    padding-top: 14px;
    border-top-color: #ffffff4d;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__voice button {
    border-color: #ffffffb3;
    background: #ffffff1a;
    color: #fff;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__editorial-card:focus-within > img { transform: scale(1.035); }

/* Audio-only work has the same ribbon silhouette and its existing waveform. */
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__audio-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 180px var(--poster-padding) 28px;
    background: radial-gradient(ellipse at 10% 0, #62689666, transparent 70%), linear-gradient(160deg, #3b4173, #182039);
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__audio-card > button {
    position: absolute;
    top: 18px;
    right: 18px;
    border-color: #ffffffb3;
    background: #ffffff12;
    color: #fff;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__wave {
    position: absolute;
    top: 84px;
    left: 24px;
    width: calc(100% - 48px);
    margin: 0;
    color: #ffffff80;
    font-size: 31px;
    line-height: 2;
    letter-spacing: 4px;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial [data-portfolio-audio][aria-pressed="true"],
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial [data-portfolio-audio]:is(:hover, :focus-visible) {
    border-color: var(--portfolio-red);
    background: var(--portfolio-red);
    color: #fff;
}
/* Audio has its own compact player surface, not an empty video poster. */
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player {
    min-height: 250px;
    padding: 28px;
    justify-content: flex-start;
    gap: 22px;
    border: 1px solid #4145791c;
    background: #fff;
    color: #414579;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player:is(:hover, :focus-within) {
    border-color: #c34b2e66;
    box-shadow: inset 0 -3px #c34b2e;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player h3 { color: #414579 !important; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player p { color: #686b88 !important; margin-top: 9px; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__copy { flex: 1; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__timeline { position: relative; height: 48px; flex: none; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__wave { position: relative; height: 100%; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__wave svg { display: block; width: 100%; height: 100%; fill: #d7d8e3; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial svg.kg-audio-player__played { position: absolute; inset: 0; fill: #c34b2e; clip-path: inset(0 calc(100% - var(--audio-progress, 0%)) 0 0); }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial [data-portfolio-seek] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__timeline:focus-within { outline: 2px solid #c34b2e; outline-offset: 5px; border-radius: 4px; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__transport { display: flex; align-items: center; gap: 14px; min-width: 0; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__transport button {
    position: static;
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c34b2e;
    color: #fff;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__play:is(:hover, :focus-visible) { transform: translateY(-2px); background: #aa3b23; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__play:focus-visible { outline: 2px solid #414579; outline-offset: 4px; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__play svg { width: 20px; height: 20px; fill: currentColor; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__play .kg-audio-player__pause-icon,
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__play[aria-pressed="true"] .kg-audio-player__play-icon { display: none; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__play[aria-pressed="true"] .kg-audio-player__pause-icon { display: block; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__time { white-space: nowrap; color: #414579; font: 500 12px/1.4 Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-audio-player__status { margin-left: auto; color: #777a92; font: 400 12px/1.4 Roboto, Arial, sans-serif; text-align: right; }

/* Move only the visual surface, never the grid item used for scroll geometry. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__video-card { background: transparent; overflow: visible; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media {
        overflow: hidden;
        transform: perspective(1100px) rotateX(var(--poster-rotate-x, 0deg)) rotateY(var(--poster-rotate-y, 0deg)) scale(var(--poster-scale, 1));
        transition: transform .22s ease-out, box-shadow .22s ease;
    }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media:is(:hover, :focus-visible) { --poster-scale: .985; box-shadow: 0 7px 12px #111a2b26; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media::before {
        position: absolute; z-index: 4; inset: 0; pointer-events: none; content: ""; opacity: 0;
        background: radial-gradient(circle at var(--poster-light-x, 50%) var(--poster-light-y, 30%), #ffffff22, transparent 65%);
        transition: opacity .22s ease;
    }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media:hover::before { opacity: 1; }
}
@media (max-width: 1050px) {
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial [data-portfolio-grid] { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 700px) {
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial { --poster-height: 390px; --poster-padding: 20px; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial [data-portfolio-grid] { grid-auto-columns: 100%; gap: 14px; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__heading { align-items: flex-end; gap: 14px; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial :is(h3, .kg-portfolio-showcase__title) { font-size: 21px !important; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__tag { left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial :is(.kg-audio-player, .kg-audio-player__play) { transition: none; transform: none; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial :is(.kg-portfolio-showcase__media img, .kg-portfolio-showcase__editorial-card > img, .kg-portfolio-showcase__video-play) { transition: none; }
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__media:is(:hover, :focus-visible) img,
    .homepage-portfolio-showcase #portfolio.kg-portfolio-showcase--editorial .kg-portfolio-showcase__editorial-card:focus-within > img { transform: none; }
}