/* blok5 — Eight magazines, one wall (demo15 .h18-mags): titles on the left, a 3D stack of covers per title. */
/* Page variables of demo15 (non-colour) live on the block root; colours/fonts come from colors.css / fonts.css. */
.h18-mags {
    --s-edge: clamp(16px, 3vw, 48px);
    --s-ease: cubic-bezier(.2, .7, .2, 1);
    --fs-hero: clamp(50px, 8.2vw, 140px);
    --fs-h2: clamp(40px, 5.4vw, 92px);
    --fs-h3: clamp(26px, 2.5vw, 42px);
    --fs-text: clamp(18px, 1.25vw, 21px);
    --fs-small: 15px;
    color: var(--s-ink); font-family: var(--s-font); font-optical-sizing: auto;
}
.h18-mags :where(*) { color: inherit; }
.h18-mags ul, .h18-mags dl, .h18-mags dd, .h18-mags figure { margin: 0; padding: 0; list-style: none; }
.h18-mags img { display: block; }
.h18-mags a:focus-visible, .h18-mags button:focus-visible { outline: 3px solid var(--s-yellow); outline-offset: 3px; }

.h18-wrap { width: 100%; max-width: 1760px; margin: 0 auto; padding: 0 var(--s-edge); }
.h18-title { margin: 0; font: 800 var(--fs-h2)/0.94 var(--s-font); letter-spacing: -0.045em; text-wrap: balance; }
.h18-text { margin: 0; max-width: 44ch; font: 400 var(--fs-text)/1.5 var(--s-font); }
.h18-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px;
    border: 0; border-radius: 999px; background: var(--s-deep); color: var(--s-on-deep); cursor: pointer;
    font: 700 17px/1 var(--s-font); letter-spacing: -0.01em;
    transition: background 220ms ease, color 220ms ease, transform 160ms var(--s-ease);
}
.h18-btn:hover { background: var(--s-green); color: #fff; }
.h18-btn:active { transform: scale(0.96); }
.h18-btn--ghost { background: var(--s-ink); color: var(--s-ground); }

.h18-mags { padding: clamp(110px, 12vw, 210px) 0; background: var(--s-ground); overflow: hidden; }
.h18-mags__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(32px, 5vw, 96px); align-items: center; }
.h18-mags__text { display: grid; justify-items: start; gap: 28px; }
.h18-mags__list { display: grid; gap: 2px; margin: 8px 0 8px -12px !important; }
.h18-mag {
    display: flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 4px 12px; border: 0; border-radius: 999px;
    background: none; cursor: pointer; text-align: left; color: var(--s-soft);
    transition: color 200ms ease, transform 400ms var(--s-ease);
}
.h18-mag__name { font: 700 var(--fs-h3)/1.08 var(--s-font); letter-spacing: -0.03em; }
.h18-mag__count { font: 500 var(--fs-small)/1 var(--s-font); font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(-8px); transition: opacity 300ms ease, transform 400ms var(--s-ease); }
.h18-mag:hover { color: var(--s-ink); transform: translateX(8px); }
.h18-mag[aria-pressed="true"] { color: var(--s-ink); }
.h18-mag[aria-pressed="true"] .h18-mag__name { color: var(--s-deep); }
.h18-mag[aria-pressed="true"] .h18-mag__count, .h18-mag:hover .h18-mag__count { opacity: 1; transform: none; }
.h18-deck { position: relative; aspect-ratio: 1 / 0.92; perspective: 1500px; }
.h18-deck__c {
    position: absolute; left: 0; top: 7%; width: 60%; aspect-ratio: 4 / 5; background: var(--s-deep-stone);
    transform-origin: 50% 50%;
    transition: transform 1000ms var(--s-ease), opacity 600ms ease; transition-delay: var(--d, 0ms);
}
.h18-deck__c img { width: 100%; height: 100%; object-fit: cover; }
/* Without JS the deck shows the first title's covers in a flat fan. */
.h18-deck__c:not([data-mag="lucid"]) { opacity: 0; pointer-events: none; }

/* ── entrances (the script puts .h18-js on the block root) ── */
.h18-mags.h18-js [data-rv] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 800ms ease, transform 1000ms var(--s-ease); transition-delay: var(--rv, 0ms); }
.h18-mags.h18-js [data-rv].is-in { opacity: 1; transform: none; }

@media (max-width: 899px) {
    .h18-mags__grid { grid-template-columns: minmax(0, 1fr); }
    .h18-deck { max-width: 560px; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .h18-mags.h18-js [data-rv] { opacity: 1; transform: none; transition: none; }
    .h18-deck__c { transition: none; }
}