/*
 * Prototype home13 (/html/home13.html) "The Stack". Real magazine covers handled as physical
 * objects in 3D. The hero pins a pile of covers that lifts off the table, stands up and deals
 * one cover after another toward the viewer while the magazine name changes beside it. Deep green
 * fields alternate with pale paper. The live thing is a deck of all covers, filtered by title and
 * flipped by drag, swipe, arrow keys or buttons. Header and footer come from the site styles.
 */
.proto-home13 {
    --k-deep: #0d2618;
    --k-deep-2: #12321f;
    --k-green: #469a58;
    --k-paper: #eef1ea;
    --k-paper-2: #e2e7dd;
    --k-ink: #121612;
    --k-mist: #edf2eb;
    --k-soft: #b8c8bb;
    --k-yellow: #ffb500;
    --k-font: "Archivo", "Lato", system-ui, sans-serif;
    --k-edge: clamp(16px, 3vw, 48px);
    --k-ease: cubic-bezier(.2, .7, .2, 1);
    /* type: five sizes */
    --k-xl: clamp(42px, 5.6vw, 104px);
    --k-l: clamp(38px, 4.6vw, 80px);
    --k-m: clamp(22px, 2.1vw, 34px);
    --k-s: clamp(17px, 1.25vw, 20px);
    --k-xs: 15px;
    background: var(--k-paper);
}
.proto-home13 .main { padding: 0; }
.proto-home13 .header { background: var(--k-deep); }
.proto-home13 .header::before { display: none; }
.h13 :where(*) { color: inherit; }
.h13 { color: var(--k-ink); font-family: var(--k-font); font-size: var(--k-s); }
.h13-wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--k-edge); }
.h13 img { max-width: 100%; }

.h13-display {
    margin: 0; font: 850 var(--k-xl)/0.9 var(--k-font); font-stretch: 116%;
    letter-spacing: -0.035em; text-wrap: balance;
}
.h13-title {
    margin: 0; font: 800 var(--k-l)/0.95 var(--k-font); font-stretch: 112%;
    letter-spacing: -0.03em; text-wrap: balance;
}
.h13-lead { margin: 0; max-width: 40ch; font: 400 var(--k-s)/1.5 var(--k-font); }
.h13-statement { margin: 0; max-width: 40ch; font: 500 var(--k-m)/1.25 var(--k-font); letter-spacing: -0.012em; }
.h13-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.h13-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px;
    border-radius: 999px; background: var(--k-yellow); color: var(--k-ink);
    font: 700 16px/1 var(--k-font); font-stretch: 108%;
    transition: background 200ms ease, transform 160ms var(--k-ease);
}
.h13-btn:hover { background: #fff; }
.h13-btn:active { transform: scale(0.96); }
.h13-btn--ink { background: var(--k-ink); color: var(--k-paper); }
.h13-btn--ink:hover { background: var(--k-green); color: #fff; }
.h13-link {
    display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--k-font);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
    text-decoration-color: var(--k-green); transition: color 200ms ease, text-underline-offset 200ms ease;
}
.h13-link:hover { color: var(--k-green); text-underline-offset: 9px; }
.h13-link--light { text-decoration-color: var(--k-yellow); }
.h13-link--light:hover { color: var(--k-yellow); }
.h13 a:focus-visible, .h13 button:focus-visible, .h13 [tabindex]:focus-visible { outline: 3px solid var(--k-yellow); outline-offset: 3px; }
.h13-about a:focus-visible, .h13-roles a:focus-visible, .h13-roles button:focus-visible, .h13-join a:focus-visible { outline-color: var(--k-green); }

/* Shared: the cover as an object. The shade darkens covers that lie deeper in a pile. */
.h13-card, .h13-dcard { position: absolute; margin: 0; aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: var(--k-deep-2); backface-visibility: hidden; }
.h13-card img, .h13-dcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h13-card__shade { position: absolute; inset: 0; background: var(--k-deep); opacity: 0; pointer-events: none; }

/* ── hero: the pinned stack ────────────────────────────────────────────────────────────── */
.h13-hero { position: relative; background: var(--k-deep); color: var(--k-mist); }
.h13-hero__stage {
    position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center;
    max-width: 1720px; margin: 0 auto; padding: 0 var(--k-edge); min-height: calc(100svh - var(--header-h));
    --cw: min(29vw, calc((100svh - var(--header-h)) * 0.5));
}
.h13-hero__copy { display: grid; position: relative; z-index: 2; padding: 48px 0; }
.h13-hero__intro, .h13-hero__now { grid-area: 1 / 1; }
.h13-hero__intro { display: grid; gap: 28px; align-content: center; }
.h13-hero__intro .h13-display { font-stretch: 104%; max-width: 14ch; }
.h13-hero__intro .h13-lead { color: var(--k-mist); }
.h13-hero__now { display: none; align-content: center; }
.h13-hero__names { display: grid; margin: 0; }
.h13-hero__name {
    grid-area: 1 / 1; font: 850 min(10vw, calc(44vw / var(--len) / 0.78))/0.92 var(--k-font); font-stretch: 118%; letter-spacing: -0.04em;
    justify-self: start; white-space: nowrap; visibility: hidden;
    opacity: 0; transform: translateY(0.35em); transition: opacity 380ms ease, transform 600ms var(--k-ease), visibility 0s linear 600ms;
}
.h13-hero__name.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.h13-hero__now.is-hidden, .h13-hero__now.is-hidden .h13-hero__name { visibility: hidden; }
.h13-hero__count { margin: 18px 0 0; font: 500 var(--k-s)/1.4 var(--k-font); color: var(--k-soft); font-variant-numeric: tabular-nums; }
.h13-hero__count span { color: var(--k-mist); }

.h13-hero__pile {
    position: relative; height: calc(var(--cw) * 1.7); perspective: 1700px; perspective-origin: 50% 40%;
}
.h13-hero__stack3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.h13-hero__pile .h13-card {
    left: 50%; top: 50%; width: var(--cw); margin: calc(var(--cw) * -0.625) 0 0 calc(var(--cw) * -0.5);
    /* Static fallback without script: a standing deck that recedes up and to the right. */
    transform: translate3d(calc(var(--i) * var(--cw) * 0.06), calc(var(--i) * var(--cw) * -0.04), calc(var(--i) * var(--cw) * -0.22)) rotate(calc(var(--jr) * 2deg));
    z-index: calc(20 - var(--i));
}
.h13-hero__pile .h13-card:nth-child(n + 8) { opacity: 0; }

/* With script the hero becomes a tall scroll track whose stage stays pinned. */
.h13-pin .h13-hero { height: calc(var(--n) * 62svh + 100svh); }
.h13-pin .h13-hero__stage { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 0; overflow: clip; }
.h13-pin .h13-hero__now { display: grid; opacity: 0; }
.h13-pin .h13-hero__stack3d { position: absolute; inset: 0; transform-style: preserve-3d; }
.h13-hero__pile .h13-card { opacity: 1; will-change: transform, opacity; z-index: auto; }
.h13-pin .h13-hero__stack3d { will-change: transform; }

/* ── about ─────────────────────────────────────────────────────────────────────────────── */
.h13-about { padding: clamp(110px, 12vw, 200px) 0 clamp(110px, 12vw, 200px); background: var(--k-paper); }
.h13-about__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.h13-about__head .h13-title { max-width: 13ch; }
.h13-band { position: relative; margin: clamp(56px, 7vw, 110px) 0; height: clamp(300px, 38vw, 640px); overflow: hidden; background: var(--k-paper-2); }
.h13-band img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; object-position: 50% 35%; will-change: transform; }
.h13-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 56px); margin: 0; padding: 0; list-style: none; }
.h13-ways h3 { margin: 0 0 12px; font: 800 var(--k-m)/1.05 var(--k-font); font-stretch: 110%; letter-spacing: -0.02em; }
.h13-ways p { margin: 0 0 8px; max-width: 34ch; font: 400 var(--k-s)/1.5 var(--k-font); }
.h13-values { display: grid; gap: clamp(40px, 5vw, 72px); margin-top: clamp(110px, 12vw, 200px); }
.h13-values__list { margin: 0; display: grid; gap: 4px; }
.h13-value {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px 48px; align-items: center;
    padding: 22px 28px; border-radius: 4px; background: transparent; transition: background 300ms ease;
}
.h13-value:hover { background: var(--k-paper-2); }
.h13-value dt { font: 850 var(--k-l)/1 var(--k-font); font-stretch: 112%; letter-spacing: -0.035em; transition: transform 500ms var(--k-ease); }
.h13-value:hover dt { transform: translateX(14px); }
.h13-value dd { margin: 0; max-width: 52ch; font: 400 var(--k-s)/1.5 var(--k-font); }

/* ── magazines: the deck ───────────────────────────────────────────────────────────────── */
.h13-mags { background: var(--k-deep); color: var(--k-mist); padding: clamp(110px, 12vw, 190px) 0 clamp(90px, 10vw, 160px); overflow-x: clip; }
.h13-mags__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.h13-mags__head p { margin: 0; max-width: 42ch; font: 400 var(--k-s)/1.5 var(--k-font); }
.h13-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(40px, 5vw, 72px) 0 0; }
.h13-chip {
    position: relative; display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 20px 8px 10px;
    border-radius: 999px; background: var(--k-deep-2); cursor: pointer; color: var(--k-mist);
    font: 700 16px/1 var(--k-font); font-stretch: 108%;
    transition: background 220ms ease, color 220ms ease, transform 160ms var(--k-ease);
}
.h13-chip:hover { background: #1b4329; }
.h13-chip:active { transform: scale(0.97); }
.h13-chip[aria-pressed="true"] { background: var(--k-mist); color: var(--k-ink); }
.h13-chip__count { font-weight: 500; opacity: 0.7; font-variant-numeric: tabular-nums; }
.h13-chip__stack { position: relative; width: 50px; height: 46px; flex: none; }
.h13-chip__stack img {
    position: absolute; left: 10px; top: 4px; width: 30px; height: 38px; object-fit: cover; border-radius: 2px;
    transform: rotate(calc((var(--k) - 1) * 12deg)) translateX(calc((var(--k) - 1) * 6px));
    transform-origin: 50% 90%; transition: transform 380ms var(--k-ease);
}
.h13-chip__stack img:nth-child(1) { z-index: 1; }
.h13-chip__stack img:nth-child(2) { z-index: 3; }
.h13-chip__stack img:nth-child(3) { z-index: 2; }
.h13-chip:hover .h13-chip__stack img, .h13-chip[aria-pressed="true"] .h13-chip__stack img {
    transform: rotate(calc((var(--k) - 1) * 20deg)) translateX(calc((var(--k) - 1) * 9px));
}

.h13-deck { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 48px; align-items: center; margin-top: clamp(40px, 4vw, 64px); }
.h13-deck__info { display: grid; justify-items: start; gap: 0; }
.h13-deck__name { margin: 0; min-height: 1.9em; font: 850 var(--k-l)/0.95 var(--k-font); font-stretch: 116%; letter-spacing: -0.035em; text-wrap: balance; }
.h13-deck__count { margin: 16px 0 28px; font: 500 var(--k-s)/1 var(--k-font); color: var(--k-soft); font-variant-numeric: tabular-nums; }
.h13-deck__controls { display: flex; gap: 10px; margin-bottom: 20px; }
.h13-round {
    display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
    background: var(--k-mist); color: var(--k-ink); cursor: pointer;
    transition: background 200ms ease, transform 160ms var(--k-ease);
}
.h13-round:hover { background: var(--k-yellow); }
.h13-round:active { transform: scale(0.92); }
.h13-round:disabled { opacity: 0.35; cursor: default; background: var(--k-mist); }

/* Without script the deck is a plain scrolling row of covers. */
.h13-deck__stage { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.h13-deck__stage .h13-dcard { position: relative; flex: none; width: clamp(200px, 22vw, 320px); scroll-snap-align: start; }
.h13-deck__stage:focus-visible { outline-offset: 8px; }

.h13-js .h13-deck__stage {
    position: relative; display: block; overflow: visible; height: calc(var(--dw) * 1.62); padding: 0;
    --dw: min(25vw, 54svh * 0.8, 380px);
    perspective: 1600px; perspective-origin: 60% 35%; transform-style: preserve-3d; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.h13-js .h13-deck__stage.is-dragging { cursor: grabbing; }
.h13-js .h13-deck__stage .h13-dcard {
    position: absolute; left: 58%; top: 52%; width: var(--dw); margin: calc(var(--dw) * -0.625) 0 0 calc(var(--dw) * -0.5);
}
.h13-js .h13-deck__stage.is-shuffling .h13-dcard { transition: transform 700ms var(--k-ease), opacity 450ms ease; }
.h13-js .h13-deck__stage .h13-dcard.is-out { visibility: hidden; }
.h13-js .h13-deck__stage .h13-dcard img { pointer-events: none; }

/* ── roles ─────────────────────────────────────────────────────────────────────────────── */
.h13-roles { background: var(--k-paper); padding: clamp(110px, 12vw, 200px) 0; }
.h13-roles__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 96px); align-items: start; }
.h13-roles__side { display: grid; gap: clamp(32px, 4vw, 56px); }
.h13-roles__tabs { display: none; }
.h13-tab {
    display: block; width: 100%; padding: 6px 0; text-align: left; background: none; cursor: pointer;
    font: 850 var(--k-l)/1 var(--k-font); font-stretch: 116%; letter-spacing: -0.035em; color: rgb(18 22 18 / 0.28);
    transition: color 260ms ease, transform 400ms var(--k-ease);
}
.h13-tab:hover { color: rgb(18 22 18 / 0.6); transform: translateX(10px); }
.h13-tab[aria-selected="true"] { color: var(--k-ink); transform: translateX(0); }
.h13-roles__panels { display: grid; gap: 80px; }
.h13-role { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 48px; align-items: end; }
.h13-role__pic { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--k-paper-2); }
.h13-role__pic img { width: 100%; height: 100%; object-fit: cover; }
.h13-role h3 { margin: 0 0 20px; font: 800 var(--k-m)/1.05 var(--k-font); font-stretch: 112%; letter-spacing: -0.02em; }
.h13-role ul { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 14px; }
.h13-role li { position: relative; padding-left: 26px; font: 400 var(--k-s)/1.45 var(--k-font); max-width: 38ch; }
.h13-role li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 11px; height: 11px; border-radius: 50%; background: var(--k-green); }

.h13-tabs .h13-roles__tabs { display: block; }
.h13-tabs .h13-roles__panels { gap: 0; }
.h13-tabs .h13-role { grid-area: 1 / 1; }
.h13-tabs .h13-role[hidden] { display: none; }
.h13-tabs .h13-role h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.h13-tabs .h13-role.is-in .h13-role__pic { animation: h13-deal 800ms var(--k-ease) both; }
.h13-tabs .h13-role.is-in .h13-role__text { animation: h13-rise 700ms var(--k-ease) 120ms both; }
.h13-tabs .h13-roles__panels { perspective: 1400px; }
@keyframes h13-deal {
    from { opacity: 0; transform: translate3d(18%, -4%, -120px) rotateY(-28deg) rotateZ(4deg); }
    to { opacity: 1; transform: none; }
}
@keyframes h13-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ── people ────────────────────────────────────────────────────────────────────────────── */
.h13-people { background: var(--k-deep); color: var(--k-mist); padding: clamp(110px, 12vw, 190px) 0; overflow-x: clip; }
.h13-people__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.h13-people__head p { margin: 0; max-width: 40ch; font: 400 var(--k-s)/1.5 var(--k-font); }
.h13-people__row { display: flex; gap: 12px; width: max-content; margin-left: -6vw; will-change: transform; }
.h13-people__row + .h13-people__row { margin-top: 12px; margin-left: -18vw; }
.h13-face { margin: 0; width: clamp(170px, 17vw, 300px); }
.h13-face img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; background: var(--k-deep-2); transition: transform 600ms var(--k-ease); }
.h13-face:hover img { transform: scale(0.97) rotate(-1.5deg); }
.h13-face figcaption { margin-top: 12px; font: 700 16px/1.2 var(--k-font); font-stretch: 108%; }

/* ── join ──────────────────────────────────────────────────────────────────────────────── */
.h13-join { background: var(--k-paper); padding: clamp(110px, 12vw, 200px) 0 clamp(120px, 12vw, 200px); overflow-x: clip; }
.h13-join__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.h13-join__text { display: grid; gap: 28px; justify-items: start; }
.h13-join__text .h13-display { max-width: 12ch; }
.h13-fan { position: relative; height: clamp(360px, 36vw, 620px); --fw: clamp(170px, 17vw, 300px); --spread: 0; }
.h13-fan img {
    position: absolute; left: 50%; bottom: 6%; width: var(--fw); height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px;
    margin-left: calc(var(--fw) * -0.5); transform-origin: 50% 120%;
    transform: rotate(calc(var(--f) * (2deg + var(--spread) * 8deg))) translateX(calc(var(--f) * var(--spread) * 22px));
    z-index: calc(10 - var(--f) * var(--f));
}
.h13-fan:hover img { transition: transform 500ms var(--k-ease); }

/* ── reveals ───────────────────────────────────────────────────────────────────────────── */
.h13-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 700ms ease, transform 900ms var(--k-ease); transition-delay: var(--d, 0ms); }
.h13-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── responsive ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .h13-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h13-value { grid-template-columns: minmax(0, 1fr); padding: 24px; }
}
@media (max-width: 899px) {
    .h13-hero__stage { grid-template-columns: minmax(0, 1fr); align-items: start; --cw: min(66vw, 330px); padding-top: 8px; }
    .h13-hero__copy { padding: 32px 0 12px; }
    .h13-hero__intro { gap: 20px; }
    .h13-hero__pile { height: calc(var(--cw) * 1.9); }
    .h13-pin .h13-hero { height: calc(var(--n) * 55svh + 100svh); }
    .h13-pin .h13-hero__stage { grid-template-rows: auto minmax(0, 1fr); }
    .h13-pin .h13-hero__pile { height: auto; align-self: stretch; }
    .h13-pin .h13-hero__pile .h13-card { top: 42%; }
    .h13-hero__now { align-content: end; }
    .h13-hero__name { font-size: min(17vw, calc(88vw / var(--len) / 0.78)); }
    .h13-about__head, .h13-mags__head, .h13-people__head { grid-template-columns: minmax(0, 1fr); }
    .h13-deck { grid-template-columns: minmax(0, 1fr); }
    .h13-deck__info { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px; }
    .h13-deck__name { grid-column: 1 / -1; min-height: 2em; }
    .h13-deck__count { margin: 12px 0 0; }
    .h13-deck__controls { grid-column: 2; grid-row: 2 / 4; margin: 0; }
    .h13-js .h13-deck__stage { --dw: min(58vw, 340px); perspective-origin: 60% 40%; }
    .h13-js .h13-deck__stage .h13-dcard { left: 60%; }
    .h13-chip { min-height: 52px; gap: 8px; padding: 4px 14px 4px 4px; font-size: 15px; }
    .h13-chip__stack { width: 42px; height: 42px; }
    .h13-chip__stack img { left: 8px; width: 26px; height: 34px; }
    .h13-roles__grid { grid-template-columns: minmax(0, 1fr); }
    .h13-tabs .h13-roles__tabs { display: none; }
    .h13-tabs .h13-roles__panels { gap: 72px; }
    .h13-tabs .h13-role, .h13-tabs .h13-role[hidden] { display: grid; grid-area: auto; }
    .h13-tabs .h13-role h3 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
    .h13-tabs .h13-role.is-in .h13-role__pic, .h13-tabs .h13-role.is-in .h13-role__text { animation: none; }
    .h13-join__grid { grid-template-columns: minmax(0, 1fr); }
    .h13-fan { height: 360px; --fw: min(40vw, 200px); }
}
@media (max-width: 575px) {
    .h13-role { grid-template-columns: minmax(0, 1fr); }
    .h13-role__pic { aspect-ratio: 4 / 5; }
    .h13-ways { grid-template-columns: minmax(0, 1fr); }
    .h13-value { padding: 20px 0; }
    .h13-value:hover { background: transparent; }
    .h13-face { width: 40vw; }
    .h13-round { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .h13-js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .h13-hero__name, .h13-chip__stack img, .h13-tab, .h13-face img { transition: none; }
    .h13-js .h13-deck__stage.is-shuffling .h13-dcard { transition: none; }
    .h13-tabs .h13-role.is-in .h13-role__pic, .h13-tabs .h13-role.is-in .h13-role__text { animation: none; }
    .h13-people__row { transform: none !important; }
}