/*
 * Prototype home18 (/html/home18.html): "The Wall assembles". The thirty real covers start
 * scattered in depth around the headline and fly into one wall as the pinned stage scrolls; the
 * wall can be filtered by magazine (other covers drop back into depth); then the camera dives into
 * one cover, which becomes the ground of the next chapter. Every later section reuses that depth:
 * a stack per magazine, roles that step forward, faces on columns of different depth, and a final
 * wall that recedes into the floor.
 * Without JS or with reduced motion the stage is a plain page: headline, wall, filter, chapter.
 */
.proto-home18 {
    --s-ground: #d6d2ca;
    --s-paper: #e5e2dc;
    --s-deep-stone: #c6c1b7;
    --s-ink: #1b1c18;
    --s-soft: #45463f;
    --s-deep: #13321f;
    --s-deep-2: #1a3f28;
    --s-green: #469a58;
    --s-yellow: #ffb500;
    --s-on-deep: #edeae3;
    --s-font: "Bricolage Grotesque", "Lato", system-ui, sans-serif;
    --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;
    background: var(--s-ground);
}
.proto-home18 .main { padding: 0; }
.proto-home18 .header { background: var(--s-deep); }
.proto-home18 .header::before { display: none; }
.h18 :where(*) { color: inherit; }
.h18 { color: var(--s-ink); font-family: var(--s-font); font-optical-sizing: auto; }
.h18 ul, .h18 dl, .h18 dd, .h18 figure { margin: 0; padding: 0; list-style: none; }
.h18 img { display: block; }
.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--yellow { background: var(--s-yellow); color: var(--s-ink); }
.h18-btn--yellow:hover { background: var(--s-on-deep); color: var(--s-ink); }
.h18-btn--ghost { background: var(--s-ink); color: var(--s-ground); }
.h18-link {
    display: inline-flex; align-items: center; min-height: 44px; font: 700 17px/1.2 var(--s-font);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
    text-decoration-color: var(--s-green); transition: color 200ms ease, text-underline-offset 200ms ease;
}
.h18-link:hover { color: var(--s-green); text-underline-offset: 4px; }
.h18 a:focus-visible, .h18 button:focus-visible { outline: 3px solid var(--s-yellow); outline-offset: 3px; }

/* ── the stage: static by default ───────────────────────────────────────────────────────── */
.h18-seq { --cols: 10; --rows: 3; --gap: 8px; --tools-h: 128px; position: relative; }
.h18-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro intro" "space space" "tools tools" "full about";
}
.h18-intro { grid-area: intro; padding: clamp(56px, 8vw, 120px) var(--s-edge) 48px; text-align: center; display: grid; justify-items: center; }
.h18-hero { margin: 0; max-width: 11ch; font: 800 var(--fs-hero)/0.9 var(--s-font); letter-spacing: -0.05em; text-wrap: balance; }
.h18-lead { margin: 28px 0 0; max-width: 40ch; font: 400 var(--fs-text)/1.5 var(--s-font); }
.h18-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 34px; }
.h18-space { grid-area: space; display: grid; place-items: center; padding: 0 var(--s-edge); }
.h18-wall { position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gap); width: 100%; max-width: 1600px; }
.h18-c { position: relative; aspect-ratio: 4 / 5; background: var(--s-deep-stone); }
.h18-c a { display: block; width: 100%; height: 100%; }
.h18-c img { width: 100%; height: 100%; object-fit: cover; }
.h18-c.is-out { opacity: 0.2; transition: opacity 500ms ease; }
.h18-tools { grid-area: tools; display: grid; justify-items: center; gap: 14px; padding: 28px var(--s-edge) 56px; text-align: center; }
.h18-tools p { margin: 0; font: 500 var(--fs-small)/1.4 var(--s-font); }
.h18-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.h18-chip {
    min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
    background: var(--s-paper); color: var(--s-ink); font: 700 var(--fs-small)/1 var(--s-font);
    transition: background 200ms ease, color 200ms ease, transform 160ms var(--s-ease);
}
.h18-chip:hover { background: #fff; }
.h18-chip:active { transform: scale(0.95); }
.h18-chip[aria-pressed="true"] { background: var(--s-deep); color: var(--s-on-deep); }
.h18-full { grid-area: full; position: relative; min-height: 70vh; overflow: hidden; background: var(--s-deep); }
.h18-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h18-about {
    grid-area: about; display: flex; flex-direction: column; justify-content: center; gap: 20px;
    padding: clamp(40px, 5vw, 80px) clamp(24px, 4vw, 72px); background: var(--s-deep); color: var(--s-on-deep);
}
.h18-about .h18-title { font-size: clamp(40px, 4.4vw, 76px); margin-bottom: 8px; }
.h18-about p { margin: 0; max-width: 40ch; font: 400 var(--fs-text)/1.5 var(--s-font); }
.h18-about .h18-link { text-decoration-color: var(--s-yellow); }
.h18-about .h18-link:hover { color: var(--s-yellow); }
.h18-about__links { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 4px !important; }
.h18-about__credit { font-size: var(--fs-small) !important; color: #c4cfc5; margin-top: 12px !important; }

/* ── the stage: pinned 3D scene ─────────────────────────────────────────────────────────── */
.h18-motion .h18-seq { height: 640svh; }
.h18-motion .h18-stage {
    display: block; position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden;
    --stage-h: calc(100svh - var(--header-h));
}
.h18-motion .h18-intro {
    position: absolute; inset: 0 0 var(--tools-h); z-index: 3; padding: 0 var(--s-edge);
    align-content: center; pointer-events: none;
}
.h18-motion .h18-intro a { pointer-events: auto; }
.h18-motion .h18-space { position: absolute; inset: 0 0 var(--tools-h); z-index: 1; padding: 0; perspective: 1100px; }
.h18-motion .h18-wall {
    width: min(calc(100vw - 2 * var(--s-edge)), calc((var(--stage-h) - var(--tools-h) - 32px) * var(--cols) / var(--rows) * 0.8));
    max-width: none; transform-style: preserve-3d;
}
.h18-motion .h18-c { backface-visibility: hidden; opacity: 0; }
.h18-motion .is-ready .h18-c { opacity: 1; }
.h18-motion .h18-c.is-out { transition: none; }
.h18-motion .h18-tools {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: var(--tools-h);
    align-content: start; padding: 4px var(--s-edge) 0; opacity: 0; visibility: hidden;
}
.h18-motion .h18-full { position: absolute; inset: 0; z-index: 5; min-height: 0; opacity: 0; visibility: hidden; }
.h18-motion .h18-about {
    position: absolute; top: 0; right: 0; bottom: 0; z-index: 6; width: min(640px, 46%);
    transform: translate3d(101%, 0, 0);
}

/* ── magazines: one stack per title ─────────────────────────────────────────────────────── */
.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; }

/* ── roles ──────────────────────────────────────────────────────────────────────────────── */
.h18-roles { padding: clamp(110px, 12vw, 200px) 0; background: var(--s-deep); color: var(--s-on-deep); }
.h18-roles__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(48px, 5vw, 80px); }
.h18-roles__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 16px); perspective: 1400px; }
.h18-role {
    display: grid; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
    transform: translate3d(0, 0, -90px); opacity: 0.5; transform-origin: 50% 100%;
    transition: transform 700ms var(--s-ease), opacity 400ms ease;
}
.h18-role__img { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--s-deep-2); }
.h18-role__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--s-ease); }
.h18-role__name { font: 700 clamp(20px, 1.8vw, 30px)/1.05 var(--s-font); letter-spacing: -0.03em; }
.h18-role:hover { opacity: 0.85; }
.h18-role:hover .h18-role__img img { transform: scale(1.04); }
.h18-role.is-on { transform: none; opacity: 1; }
.h18-role.is-on .h18-role__name { color: var(--s-yellow); }
.h18-role__body {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; gap: 16px clamp(24px, 4vw, 64px); align-items: start;
    margin-top: clamp(40px, 4vw, 64px);
}
.h18-role__body[hidden] { display: none; }
.h18-role__body.is-on { animation: h18-rise 600ms var(--s-ease) both; }
.h18-role__body h3 { margin: 0; font: 700 var(--fs-h3)/1.05 var(--s-font); letter-spacing: -0.03em; }
.h18-role__body ul { display: grid; gap: 10px; }
.h18-role__body li { max-width: 52ch; font: 400 var(--fs-text)/1.45 var(--s-font); }
.h18-role__body .h18-link { text-decoration-color: var(--s-yellow); white-space: nowrap; }
.h18-role__body .h18-link:hover { color: var(--s-yellow); }
@keyframes h18-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── faces ──────────────────────────────────────────────────────────────────────────────── */
.h18-people { padding: clamp(110px, 12vw, 200px) 0 clamp(140px, 14vw, 240px); background: var(--s-ground); overflow: hidden; }
.h18-people__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 96px); }
.h18-people__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 24px); align-items: start; }
.h18-people__col { display: grid; gap: clamp(20px, 2vw, 36px); }
.h18-people__col:nth-child(2) { padding-top: clamp(60px, 9vw, 160px) !important; }
.h18-people__col:nth-child(4) { padding-top: clamp(30px, 5vw, 90px) !important; }
.h18-person { display: grid; gap: 12px; }
.h18-person__img { display: block; overflow: hidden; aspect-ratio: 2 / 3; background: var(--s-deep-stone); }
.h18-person__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--s-ease); }
.h18-person:hover .h18-person__img img { transform: scale(1.05); }
.h18-person__name { font: 700 var(--fs-small)/1.2 var(--s-font); transition: color 200ms ease; }
.h18-person:hover .h18-person__name { color: var(--s-deep); }

/* ── values ─────────────────────────────────────────────────────────────────────────────── */
.h18-values { padding: clamp(110px, 12vw, 200px) 0; background: var(--s-paper); }
.h18-values__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px clamp(32px, 6vw, 120px); align-items: start; }
.h18-values__side { position: sticky; top: calc(var(--header-h) + 48px); display: grid; gap: 40px; }
.h18-values__cover { width: min(100%, 420px); aspect-ratio: 4 / 5; overflow: hidden; }
.h18-values__cover img { width: 100%; height: 100%; object-fit: cover; }
.h18-values__list { display: grid; gap: clamp(44px, 4.5vw, 72px); }
.h18-value dt { font: 700 var(--fs-h3)/1.05 var(--s-font); letter-spacing: -0.03em; color: var(--s-deep); }
.h18-value dd { margin-top: 14px; max-width: 54ch; font: 400 var(--fs-text)/1.5 var(--s-font); }

/* ── join: the wall goes back into the floor ────────────────────────────────────────────── */
.h18-join { position: relative; padding: clamp(110px, 12vw, 200px) 0 0; background: var(--s-deep); color: var(--s-on-deep); overflow: hidden; }
.h18-join__inner { display: grid; justify-items: start; gap: 26px; position: relative; z-index: 1; }
.h18-join__title { margin: 0; font: 800 var(--fs-hero)/0.9 var(--s-font); letter-spacing: -0.05em; }
.h18-floor { height: clamp(300px, 40vw, 600px); margin-top: clamp(24px, 3vw, 48px); perspective: 900px; perspective-origin: 50% 0; overflow: hidden; }
.h18-floor__plane {
    display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; width: 130%; margin-left: -15%;
    transform-origin: 50% 0; transform: rotateX(58deg); animation: h18-floor 120s linear infinite;
}
.h18-floor__plane img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@keyframes h18-floor { from { transform: rotateX(58deg) translate3d(0, 0, 0); } to { transform: rotateX(58deg) translate3d(0, calc(-33.333% - 3.333px), 0); } }

/* ── entrances ──────────────────────────────────────────────────────────────────────────── */
.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-js [data-rv].is-in { opacity: 1; transform: none; }

/* ── responsive ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .h18-seq { --cols: 6; --rows: 5; --gap: 6px; }
    .h18-people__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h18-people__col:nth-child(2), .h18-people__col:nth-child(4) { padding-top: 0 !important; }
    .h18-people__col:nth-child(2n) { margin-top: 60px; }
    .h18-role__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
    .h18-stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "space" "tools" "full" "about"; }
    .h18-full { min-height: 0; aspect-ratio: 4 / 5; }
    .h18-motion .h18-full { aspect-ratio: auto; }
    .h18-motion .h18-about { top: auto; left: 0; width: auto; max-height: 84%; overflow: hidden; transform: translate3d(0, 101%, 0); padding: 32px var(--s-edge) 28px; gap: 14px; }
    .h18-motion .h18-about .h18-title { font-size: 40px; margin-bottom: 0; }
    .h18-motion .h18-about p { font-size: 16px; }
    .h18-motion .h18-about__links { gap: 0 20px; }
    .h18-motion .h18-about__credit { margin-top: 0 !important; }
    .h18-mags__grid, .h18-roles__head, .h18-people__head, .h18-values__grid { grid-template-columns: minmax(0, 1fr); }
    .h18-values__side { position: static; }
    .h18-values__cover { display: none; }
    .h18-deck { max-width: 560px; width: 100%; }
    .h18-roles__row {
        display: flex; gap: 10px; margin: 0 calc(-1 * var(--s-edge)); padding: 0 var(--s-edge) 8px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--s-edge); scrollbar-width: none; perspective: none;
    }
    .h18-role { flex: none; width: 42%; scroll-snap-align: start; transform: none; opacity: 0.55; }
    .h18-role.is-on { transform: none; }
}
@media (max-width: 575px) {
    .h18-seq { --cols: 5; --rows: 6; --gap: 5px; --tools-h: 120px; }
    .h18-motion .h18-intro { inset: 0 0 var(--tools-h); }
    .h18-lead { margin-top: 20px; font-size: 17px; }
    .h18-actions { margin-top: 24px; }
    .h18-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + 2 * var(--s-edge)); margin: 0 calc(-1 * var(--s-edge)); padding: 0 var(--s-edge); scrollbar-width: none; }
    .h18-chip { flex: none; }
    .h18-tools p { max-width: 30ch; }
    .h18-role { width: 58%; }
    .h18-role__name { font-size: 24px; }
    .h18-person__name { font-size: 14px; }
    .h18-floor__plane { width: 260%; margin-left: -80%; }
}
@media (prefers-reduced-motion: reduce) {
    .h18-js [data-rv] { opacity: 1; transform: none; transition: none; }
    .h18-deck__c, .h18-role, .h18-role__img img, .h18-person__img img { transition: none; }
    .h18-role__body.is-on { animation: none; }
    .h18-floor__plane { animation: none; }
}