.berri-landing {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(21rem, .72fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: center;
    max-width: 1260px;
    min-height: calc(100vh - 82px);
    margin: auto;
    padding: clamp(4rem, 8vw, 8rem) 30px;
    overflow: hidden;
}

.berri-landing::before,
.berri-landing::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 9% 1.5rem;
}

.berri-landing::before {
    background: linear-gradient(117deg, #111521 0 62%, #ed224b 62% 69%, #376dff 69%);
    border: 3px solid #fff5dc;
    box-shadow: 15px 15px 0 #000;
    clip-path: polygon(0 0, 96% 0, 100% 12%, 100% 100%, 4% 100%, 0 88%);
}

.berri-landing::after { background: repeating-linear-gradient(115deg, transparent 0 25px, #ffffff0a 26px 28px); }

.berri-landing__signal {
    position: absolute;
    right: 2.7rem;
    top: calc(9% - .8rem);
    z-index: 2;
    padding: .42rem .85rem;
    background: var(--berri-gold);
    color: #080a10;
    font: 900 .75rem Arial, sans-serif;
    letter-spacing: .14em;
    transform: skewX(-10deg);
}

.berri-landing__copy { position: relative; z-index: 3; padding-left: clamp(1rem, 4vw, 4rem); }
.berri-landing h1 { max-width: 800px; margin: .35rem 0 1.5rem; font-size: clamp(3.8rem, 7.4vw, 7.8rem); line-height: .78; letter-spacing: -.045em; text-shadow: 8px 8px 0 #000; }
.berri-landing h1 em { color: var(--berri-red); -webkit-text-stroke: 1px #fff; }
.berri-landing__copy > p:not(.eyebrow) { max-width: 42rem; color: #d3d8e6; font-size: clamp(1rem, 2vw, 1.25rem); }
.berri-landing__actions { display: flex; align-items: center; gap: 1.5rem; margin: 2rem 0; }
.berri-landing__actions .button { padding: .9rem 1.5rem; }
.berri-landing__actions > a:not(.button) { color: var(--berri-gold); font-weight: 900; text-transform: uppercase; }
.berri-landing form { display: flex; max-width: 39rem; border: 3px solid #080a10; background: #fff5dc; box-shadow: 7px 7px 0 var(--berri-gold); transform: skewX(-3deg); }
.berri-landing input { min-width: 0; flex: 1; border: 0; background: transparent; color: #080a10; padding: 1rem; }
.berri-landing form button { border: 0; background: var(--berri-red); color: #fff; padding: .8rem 1.2rem; font-weight: 900; text-transform: uppercase; }
.berri-landing__covers { position: relative; z-index: 2; min-height: 34rem; }

.berri-landing__covers > a {
    position: absolute;
    inset: 50% auto auto 50%;
    display: block;
    width: min(58%, 17rem);
    aspect-ratio: 7/10;
    border: 5px solid #080a10;
    background: #191f2e;
    box-shadow: 12px 12px 0 var(--berri-gold);
    overflow: hidden;
    transform: translate(-50%, -50%) translateX(calc((var(--cover-index) - 1) * 45%)) rotate(calc((var(--cover-index) - 1) * 8deg));
    transition: transform .18s ease;
    z-index: calc(3 - var(--cover-index));
}

.berri-landing__covers > a:hover { z-index: 6; transform: translate(-50%, -54%) translateX(calc((var(--cover-index) - 1) * 45%)) rotate(0); }
.berri-landing__covers img { width: 100%; height: 100%; object-fit: cover; }
.berri-landing__covers b { position: absolute; z-index: 2; top: .4rem; left: .4rem; padding: .25rem .5rem; background: var(--berri-red); color: #fff; font: italic 900 1.2rem Impact, sans-serif; }
.berri-landing__covers a > span,
.berri-landing__empty { display: grid; height: 100%; place-items: center; padding: 1rem; color: var(--berri-muted); text-align: center; font: italic 900 1.4rem Impact, sans-serif; text-transform: uppercase; }
.berri-landing__empty { min-height: 34rem; }
.theme-berri .berri-landing__seo {
    width: min(1180px, calc(100% - 48px));
    margin: clamp(2rem, 5vw, 5rem) auto 5rem;
}

.berri-landing__seo header {
    position: static;
    top: auto;
    z-index: auto;
    height: auto;
    padding: 0;
    gap: 0;
    background: transparent;
    border-bottom: 0;
    backdrop-filter: none;
}

.berri-landing__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
    gap: clamp(2rem, 6vw, 6rem);
    align-items: end;
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 2px solid #343c50;
    border-bottom: 0;
    background: linear-gradient(120deg, #141927, #0e111a);
}

.berri-landing__intro h2,
.berri-landing__genres h2,
.berri-landing__faq h2 { margin: .4rem 0 0; font-size: clamp(2.25rem, 4.5vw, 4.75rem); line-height: 1.04; }
.berri-landing__intro > p { margin: 0; color: #d3d8e6; font-size: 1.08rem; line-height: 1.75; }
.berri-landing__topics { display: grid; grid-template-columns: repeat(4, 1fr); }
.berri-landing__topics article { display: flex; flex-direction: column; min-height: 18rem; padding: 2rem; border: 2px solid #343c50; background: #111521; }
.berri-landing__topics article + article { border-left: 0; }
.berri-landing__topics span { color: var(--berri-red); font: italic 900 1.2rem Impact, sans-serif; }
.berri-landing__topics h3 { margin: .75rem 0; font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.berri-landing__topics p { margin: 0 0 1.5rem; color: var(--berri-muted); line-height: 1.65; }
.berri-landing__topics a { margin-top: auto; color: var(--berri-gold); font-weight: 900; text-transform: uppercase; }
.berri-landing__genres { margin-top: 2rem; padding: clamp(2rem, 4vw, 3.5rem); border: 2px solid #343c50; background: #111521; box-shadow: 10px 10px 0 #000; }
.berri-landing__genres > header { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.berri-landing__genres > header > a { color: var(--berri-gold); font-weight: 900; text-transform: uppercase; }
.berri-landing__genres nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.berri-landing__genres nav a { display: flex; flex-direction: column; min-height: 7.5rem; justify-content: space-between; padding: 1.25rem; border: 1px solid #465068; background: #191f2e; transition: border-color .18s ease, transform .18s ease; }
.berri-landing__genres nav a:hover { border-color: var(--berri-red); transform: translateY(-3px); }
.berri-landing__genres strong { font-size: 1.2rem; text-transform: uppercase; }
.berri-landing__genres span { color: var(--berri-muted); }
.berri-landing__faq { display: grid; grid-template-columns: minmax(15rem, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 5rem); margin-top: 4rem; }
.berri-landing__faq > header { display: block; }
.berri-landing__faq > div { display: grid; gap: 1rem; }
.berri-landing__faq article { padding: 1.5rem 1.75rem; border-left: 5px solid var(--berri-red); background: #111521; }
.berri-landing__faq h3 { margin: 0 0 .5rem; font-size: 1.25rem; text-transform: uppercase; }
.berri-landing__faq article p { margin: 0; color: var(--berri-muted); line-height: 1.65; }
.berri-landing__notice { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #343c50; color: var(--berri-muted); }
.berri-landing__notice p { max-width: 52rem; margin: 0; }
.berri-landing__notice nav { display: flex; gap: 1rem; }
.berri-landing__notice a { color: #fff; font-weight: 800; }

@media (max-width: 1050px) {
    .berri-landing__topics { grid-template-columns: repeat(2, 1fr); }
    .berri-landing__topics article:nth-child(3) { border-left: 2px solid #343c50; border-top: 0; }
    .berri-landing__topics article:nth-child(4) { border-top: 0; }
    .berri-landing__genres nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .berri-landing { grid-template-columns: 1fr; padding-top: 5rem; }
    .berri-landing::before,
    .berri-landing::after { inset: 2rem 24px; }
    .berri-landing__copy { max-width: calc(100% - 1.5rem); padding: 1rem; }
    .berri-landing__covers { min-height: 27rem; }
    .berri-landing__covers > a { width: min(45%, 15rem); }
    .berri-landing__signal { top: 1.3rem; }
    .berri-landing__intro,
    .berri-landing__faq { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .berri-landing { padding-inline: 24px; }
    .berri-landing__signal { right: 1.4rem; font-size: .68rem; letter-spacing: .09em; }
    .berri-landing h1 { font-size: clamp(3.2rem, 14vw, 5rem); line-height: .92; text-shadow: 4px 4px 0 #000; }
    .berri-landing h1 em { display: block; line-height: .92; }
    .berri-landing h1 em span { display: block; }
    .berri-landing__intro h2,
    .berri-landing__genres h2,
    .berri-landing__faq h2 { font-size: 2.1rem; line-height: 1.1; }
    .berri-landing__actions { align-items: flex-start; flex-direction: column; }
    .berri-landing form { transform: none; }
    .berri-landing__covers > a { width: 52%; border-width: 3px; }
    .berri-landing__topics,
    .berri-landing__genres nav { grid-template-columns: 1fr; }
    .berri-landing__topics article + article { border-left: 2px solid #343c50; border-top: 0; }
    .berri-landing__genres > header,
    .berri-landing__notice { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .berri-landing__covers > a,
    .berri-landing__genres nav a { transition: none; }
}