/*
 * Prototype home10 (/html/home10.html): "The Issue". The home page is read like an issue of DEPO.
 * On wide screens a pinned stage turns vertical scroll into sideways page turns through spreads:
 * cover, contents, six feature spreads (the values), credits (roles), magazines, back cover.
 * Photo and type move at different speeds inside each spread; a bar shows how far into the issue
 * you are and opens the contents. Phones, reduced motion and no-JS get the spreads stacked.
 */
.proto-home10 {
    --p10-paper: #eef1ee;
    --p10-tone: #e1e7e2;
    --p10-ink: #0f1b14;
    --p10-soft: #46544a;
    --p10-field: #10301f;
    --p10-field-2: #173f2a;
    --p10-on-field: #eef1ee;
    --p10-on-field-soft: #bccbbf;
    --p10-green: #469a58;
    --p10-yellow: #ffb500;
    --p10-serif: "Fraunces", Georgia, "Times New Roman", serif;
    --p10-sans: "Hanken Grotesk", "Lato", system-ui, sans-serif;
    --p10-edge: clamp(20px, 3.6vw, 64px);
    --p10-ease: cubic-bezier(.2, .7, .2, 1);
    --p10-bar: 60px;
    background: var(--p10-paper);
}
.proto-home10 .main { padding: 0; }
.proto-home10 .header { background: var(--p10-field); }
.proto-home10 .header::before { display: none; }
.h10 :where(*) { color: inherit; }
.h10 { color: var(--p10-ink); font-family: var(--p10-sans); }
.h10 a:focus-visible, .h10 button:focus-visible { outline: 3px solid var(--p10-green); outline-offset: 3px; }
.h10-page--field a:focus-visible, .h10-bar > button:focus-visible { outline-color: var(--p10-yellow); }

/* ── type: masthead, display, medium, body, small ─────────────────────────────────────── */
.h10-display {
    margin: 0; font-family: var(--p10-serif); font-weight: 380; font-size: clamp(42px, 11vw, 64px);
    font-variation-settings: "opsz" 144; line-height: 0.96; letter-spacing: -0.022em; text-wrap: balance;
}
.h10-lead, .h10-standfirst { margin: 22px 0 0; max-width: 46ch; font: 400 18px/1.55 var(--p10-sans); }
.h10-credit { margin: 0; max-width: 34ch; font: 400 15px/1.5 var(--p10-sans); }
.h10-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 32px; }

.h10-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px;
    border-radius: 999px; background: var(--p10-yellow); color: var(--p10-ink);
    font: 700 16px/1 var(--p10-sans); transition: background 220ms ease, color 220ms ease, transform 160ms ease;
}
.h10-btn:hover { background: var(--p10-field); color: var(--p10-on-field); }
.h10-page--field .h10-btn:hover { background: var(--p10-on-field); color: var(--p10-field); }
.h10-btn:active { transform: scale(0.96); }
.h10-link {
    display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--p10-sans);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
    text-decoration-color: var(--p10-green); transition: color 200ms ease, text-underline-offset 200ms ease;
}
.h10-link:hover { color: var(--p10-green); text-underline-offset: 10px; }
.h10-page--field .h10-link { text-decoration-color: var(--p10-yellow); }
.h10-page--field .h10-link:hover { color: var(--p10-yellow); }

/* ── pages and photographs (stacked by default) ───────────────────────────────────────── */
.h10-spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.h10-page { position: relative; min-width: 0; padding: 56px var(--p10-edge) 64px; }
.h10-page--bleed { padding: 0; }
.h10-page--field { background: var(--p10-field); color: var(--p10-on-field); }
.h10-page--tone { background: var(--p10-tone); }
.h10-photo { position: relative; margin: 0; overflow: hidden; background: var(--p10-tone); }
.h10-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.h10-page--bleed > .h10-photo--main { width: 100%; aspect-ratio: 4 / 5; max-height: 92svh; }
.h10-photo--second { width: min(46%, 260px); aspect-ratio: 2 / 3; }
.h10-folio { display: none; }
.h10-hint { display: none; }

/* cover */
.h10-cover__art { container-type: inline-size; }
.h10-cover__art::after {
    content: ""; position: absolute; inset: auto 0 0; height: 42%; pointer-events: none;
    background: linear-gradient(transparent, rgb(6 18 11 / 0.62));
}
.h10-cover__mast {
    position: absolute; z-index: 1; top: 2.5cqw; left: 0; right: 0; text-align: center;
    font-family: var(--p10-serif); font-weight: 760; font-variation-settings: "opsz" 144;
    font-size: 33cqw; line-height: 0.8; letter-spacing: 0.005em; color: var(--p10-field);
}
.h10-cover__lines { position: absolute; z-index: 1; left: 6cqw; right: 6cqw; bottom: 6cqw; display: grid; gap: 2cqw; color: var(--p10-on-field); }
.h10-cover__line { font-family: var(--p10-serif); font-weight: 400; font-variation-settings: "opsz" 144; font-size: 10cqw; line-height: 0.95; letter-spacing: -0.012em; max-width: 9em; }
.h10-cover__star { font: 500 15px/1.3 var(--p10-sans); }
.h10-display--hero { font-size: clamp(54px, 15vw, 72px); }

/* contents */
.h10-contents > .h10-page--bleed { display: none; }
.h10-toc { margin: 36px 0 0; padding: 0; list-style: none; }
.h10-toc__item {
    display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 8px; align-items: baseline;
    padding: 12px 0; transition: color 200ms ease;
}
.h10-toc__item-page { grid-row: span 2; font: 500 15px/1 var(--p10-sans); color: var(--p10-on-field-soft); font-variant-numeric: tabular-nums; }
.h10-toc__item-title {
    font-family: var(--p10-serif); font-weight: 420; font-variation-settings: "opsz" 48; font-size: 27px; line-height: 1.1; letter-spacing: -0.015em;
    transition: transform 400ms var(--p10-ease), color 200ms ease;
}
.h10-toc__item-dek { font: 400 15px/1.4 var(--p10-sans); color: var(--p10-on-field-soft); }
.h10-toc__item:hover .h10-toc__item-title, .h10-toc__item:focus-visible .h10-toc__item-title { color: var(--p10-yellow); transform: translateX(10px); }
.h10-contents__art, .h10-credits__art { opacity: 0; transition: opacity 600ms ease; }
.h10-contents__art.is-on, .h10-credits__art.is-on { opacity: 1; }

/* features */
.h10-feature__type { position: relative; }
.h10-feature__foot { display: flex; align-items: flex-end; gap: 20px; margin-top: 36px; }
.h10-feature__credit { display: grid; gap: 10px; justify-items: start; }
.h10-feature--b .h10-feature__credit { margin-top: 28px; }
.h10-page--field .h10-credit { color: var(--p10-on-field-soft); margin-top: 28px; }
.h10-page--field .h10-feature__type .h10-link { margin-top: 10px; }
.h10-page--duo { padding: 0; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; align-items: end; background: var(--p10-paper); }
.h10-page--duo .h10-photo--main { aspect-ratio: 2 / 3; }
.h10-page--duo .h10-photo--second { width: 100%; margin-bottom: 0; }
.h10-feature--b .h10-page--text > .h10-photo--second { margin: 0 0 36px auto; }
.h10-feature--b .h10-page--text { order: 2; }
.h10-feature--b .h10-page--bleed { order: 1; }

/* credits */
.h10-credits .h10-page--tone { display: grid; place-items: center; padding: 40px var(--p10-edge); }
.h10-credits__art { grid-area: 1 / 1; width: min(72%, 340px); aspect-ratio: 2 / 3; }
.h10-credits .h10-page--tone { order: 2; }
.h10-roles { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.h10-role__name { margin: 0; font-family: var(--p10-serif); font-weight: 420; font-variation-settings: "opsz" 48; font-size: 27px; line-height: 1.1; letter-spacing: -0.015em; }
.h10-role__name a { display: inline-block; transition: color 200ms ease, transform 400ms var(--p10-ease); }
.h10-role__name a:hover, .h10-role.is-on .h10-role__name a { color: var(--p10-green); transform: translateX(8px); }
.h10-role p { margin: 4px 0 0; max-width: 52ch; font: 400 16px/1.45 var(--p10-sans); }

/* magazines */
.h10-mags { padding: 56px var(--p10-edge) 64px; background: var(--p10-paper); }
.h10-mags__head { display: grid; gap: 0; }
.h10-mags__row { margin: 36px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
.h10-mag a { display: grid; gap: 6px; }
.h10-mag__cover { display: block; overflow: hidden; background: var(--p10-tone); }
.h10-mag__cover img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--p10-ease); }
.h10-mag a:hover img { transform: scale(1.05); }
.h10-mag__name { margin-top: 6px; font-family: var(--p10-serif); font-weight: 420; font-variation-settings: "opsz" 48; font-size: 27px; line-height: 1.05; letter-spacing: -0.015em; transition: color 200ms ease; }
.h10-mag a:hover .h10-mag__name { color: var(--p10-green); }
.h10-mag__count { font: 400 15px/1.3 var(--p10-sans); color: var(--p10-soft); }

/* back cover */
.h10-back__text { overflow: hidden; padding-bottom: 0; }
.h10-back__logo { display: block; width: 64px; height: auto; margin-bottom: 28px; }
.h10-back .h10-lead { color: var(--p10-on-field); }
.h10-back__mast {
    margin: 48px 0 0; white-space: nowrap; font-family: var(--p10-serif); font-weight: 760; font-variation-settings: "opsz" 144;
    font-size: 36vw; line-height: 0.74; letter-spacing: -0.05em; color: var(--p10-green); transform: translateY(6%);
}
.h10-back > .h10-page--bleed .h10-photo--main { aspect-ratio: 4 / 5; }

/* ── the issue bar and its contents panel ─────────────────────────────────────────────── */
.h10-bar { display: none; }
.h10-js .h10-bar {
    position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; height: var(--p10-bar);
    display: flex; align-items: center; gap: 4px; padding: 0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom);
    background: var(--p10-field); color: var(--p10-on-field);
    transform: translateY(105%); transition: transform 400ms var(--p10-ease);
}
.h10-js .h10-bar.is-shown { transform: none; }
.h10-bar__progress { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--p10-field-2); }
.h10-bar__progress span { position: absolute; inset: 0; background: var(--p10-yellow); transform-origin: 0 50%; transform: scaleX(0); }
.h10-bar__btn {
    flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: none; color: inherit; cursor: pointer;
    transition: background 200ms ease, transform 150ms ease;
}
.h10-bar__btn:hover { background: var(--p10-field-2); }
.h10-bar__btn:active { transform: scale(0.9); }
.h10-bar__btn:disabled { opacity: 0.35; cursor: default; background: none; }
.h10-bar__now { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 12px; font: 400 15px/1.2 var(--p10-sans); overflow: hidden; white-space: nowrap; }
.h10-bar__now [data-now-page] { flex: none; font-weight: 700; color: var(--p10-yellow); }
.h10-bar__now [data-now-title] { overflow: hidden; text-overflow: ellipsis; color: var(--p10-on-field-soft); }
.h10-bar__toc {
    flex: none; min-height: 44px; margin-left: 4px; padding: 0 20px; border-radius: 999px; background: var(--p10-on-field); color: var(--p10-field); cursor: pointer;
    font: 700 15px/1 var(--p10-sans); transition: background 200ms ease, transform 150ms ease;
}
.h10-bar__toc:hover, .h10-bar__toc[aria-expanded="true"] { background: var(--p10-yellow); }
.h10-bar__toc:active { transform: scale(0.95); }
.h10-panel {
    position: absolute; right: 8px; bottom: calc(100% + 8px); width: min(440px, calc(100vw - 16px)); max-height: min(70vh, 640px); overflow-y: auto;
    padding: 10px; border-radius: 14px; background: var(--p10-paper); color: var(--p10-ink);
    box-shadow: 0 24px 60px rgb(4 14 8 / 0.35); transform-origin: 90% 100%;
    animation: h10-pop 380ms var(--p10-ease);
}
.h10-panel[hidden] { display: none; }
@keyframes h10-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.h10-panel__list { margin: 0; padding: 0; list-style: none; }
.h10-pitem {
    display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); column-gap: 6px; align-items: baseline; padding: 10px 12px; border-radius: 8px;
    transition: background 200ms ease;
}
.h10-pitem:hover, .h10-pitem.is-current { background: var(--p10-tone); }
.h10-pitem-page { grid-row: span 2; font: 500 15px/1 var(--p10-sans); color: var(--p10-soft); font-variant-numeric: tabular-nums; }
.h10-pitem-title { font-family: var(--p10-serif); font-weight: 450; font-variation-settings: "opsz" 48; font-size: 22px; line-height: 1.15; }
.h10-pitem-dek { font: 400 15px/1.35 var(--p10-sans); color: var(--p10-soft); }
.h10-pitem.is-current .h10-pitem-title { color: var(--p10-green); }

/* ── entrances ────────────────────────────────────────────────────────────────────────── */
.h10-reveal [data-reveal] {
    opacity: 0; transform: translateY(26px);
    transition: opacity 800ms ease var(--d, 0ms), transform 1100ms var(--p10-ease) var(--d, 0ms);
}
.h10-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ── tablet (stacked) ─────────────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
    .h10-page--bleed > .h10-photo--main { aspect-ratio: 1 / 1; }
    .h10-mags__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .h10-display { font-size: clamp(56px, 9vw, 96px); }
    .h10-display--hero { font-size: clamp(64px, 11vw, 112px); }
    .h10-page { padding: 80px var(--p10-edge) 88px; }
    .h10-page--bleed, .h10-page--duo { padding: 0; }
    .h10-credits__art { width: min(50%, 340px); }
}

/* ── the sideways issue (wide screens, set by JS) ─────────────────────────────────────── */
.h10-h { position: relative; }
.h10-h .h10-stage {
    position: sticky; top: var(--header-h, 70px); height: calc(100svh - var(--header-h, 70px)); overflow: hidden;
    display: flex; flex-direction: column; background: var(--p10-paper);
}
.h10-h .h10-track { flex: 1; min-height: 0; display: flex; will-change: transform; }
.h10-h .h10-spread {
    flex: none; width: var(--h10-vw, 100vw); height: 100%; overflow: clip;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr);
}
.h10-h .h10-page { padding: clamp(28px, 6vh, 72px) clamp(32px, 4.4vw, 84px); min-height: 0; display: flex; flex-direction: column; justify-content: space-between; }
.h10-h .h10-page--bleed, .h10-h .h10-page--duo { padding: 0; }
.h10-h .h10-page--bleed > .h10-photo--main { position: absolute; inset: 0; aspect-ratio: auto; max-height: none; height: 100%; }
.h10-h [data-photo] img { transform: scale(1.18); will-change: transform; }
.h10-h .h10-display { font-size: min(6vw, 12.5vh); }
.h10-h .h10-display--hero { font-size: min(8.4vw, 16vh); }
.h10-h .h10-lead, .h10-h .h10-standfirst { font-size: clamp(17px, 1.25vw, 20px); max-width: 52ch; }
.h10-h .h10-folio {
    display: block; position: absolute; z-index: 2; bottom: clamp(14px, 2.6vh, 26px); font: 500 15px/1 var(--p10-sans);
    color: var(--p10-soft); font-variant-numeric: tabular-nums;
}
.h10-h .h10-folio--l { left: clamp(32px, 4.4vw, 84px); }
.h10-h .h10-folio--r { right: clamp(32px, 4.4vw, 84px); }
.h10-h .h10-page--bleed .h10-folio, .h10-h .h10-page--duo .h10-folio, .h10-h .h10-page--field .h10-folio { color: var(--p10-on-field); }
.h10-h .h10-page--duo .h10-folio { color: var(--p10-soft); }
.h10-h .h10-bar { position: relative; transform: none; flex: none; padding: 0 clamp(16px, 2vw, 28px); gap: 8px; }
.h10-h .h10-panel { right: clamp(16px, 2vw, 28px); }

/* cover spread */
.h10-h .h10-cover__text { justify-content: center; }
.h10-h .h10-hint {
    display: flex; align-items: center; gap: 14px; position: absolute; left: clamp(32px, 4.4vw, 84px); bottom: clamp(18px, 3vh, 30px);
    margin: 0; font: 500 15px/1 var(--p10-sans); color: var(--p10-soft);
}
.h10-h .h10-hint::after { content: ""; width: 56px; height: 2px; background: var(--p10-green); animation: h10-nudge 2.4s var(--p10-ease) infinite; transform-origin: 0 50%; }
@keyframes h10-nudge { 0% { transform: scaleX(0.2); } 55% { transform: scaleX(1); } 100% { transform: scaleX(0.2); } }
.h10-h .h10-cover .h10-lead { max-width: 40ch; }

/* contents spread */
.h10-h .h10-contents > .h10-page--bleed { display: block; }
.h10-h .h10-contents__art { position: absolute; inset: 0; }
.h10-h .h10-contents .h10-page--field { justify-content: center; }
.h10-h .h10-toc { margin-top: clamp(16px, 3.4vh, 40px); }
.h10-h .h10-toc__item { padding: clamp(5px, 0.95vh, 11px) 0; grid-template-columns: 3.2rem auto minmax(0, 1fr); column-gap: 18px; }
.h10-h .h10-toc__item-page { grid-row: auto; }
.h10-h .h10-toc__item-title { font-size: clamp(22px, 1.9vw, 30px); }
.h10-h .h10-toc__item-dek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h10-h .h10-contents .h10-lead { color: var(--p10-on-field); }

/* feature A: photo left, type right, second portrait at the foot */
.h10-h .h10-feature__foot { margin-top: 24px; gap: clamp(18px, 2vw, 32px); }
.h10-h .h10-feature__foot .h10-photo--second { flex: none; width: auto; height: clamp(170px, 36vh, 380px); }
.h10-h .h10-feature__credit { padding-bottom: 32px; }

/* feature C: green type page, two portraits */
.h10-h .h10-feature--c .h10-page--field { justify-content: center; }
.h10-h .h10-page--duo { display: block; }
.h10-h .h10-page--duo .h10-photo--main { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; aspect-ratio: auto; }
.h10-h .h10-page--duo .h10-photo--second {
    position: absolute; right: clamp(32px, 4.4vw, 84px); bottom: clamp(56px, 10vh, 110px); width: auto; height: min(48%, 420px);
}

/* feature B: type left with a second portrait up top, photo right */
.h10-h .h10-feature--b .h10-page--text { order: 0; }
.h10-h .h10-feature--b .h10-page--text > .h10-photo--second { width: auto; height: clamp(150px, 30vh, 320px); margin: 0 0 0 auto; flex: none; }
.h10-h .h10-feature--b .h10-feature__credit { margin-top: 24px; padding-bottom: 28px; grid-template-columns: auto auto; align-items: end; column-gap: 32px; }

/* credits spread */
.h10-h .h10-credits .h10-page--tone { order: 0; display: grid; place-items: center; }
.h10-h .h10-credits .h10-page--tone { position: relative; }
.h10-h .h10-credits__art { position: absolute; left: 50%; top: 50%; width: auto; height: min(80%, 660px); translate: -50% -52%; }
.h10-h .h10-credits .h10-page--text { justify-content: center; }
.h10-h .h10-roles { margin-top: clamp(16px, 3vh, 36px); gap: clamp(8px, 1.6vh, 18px); }
.h10-h .h10-role__name { font-size: clamp(22px, 1.9vw, 30px); }

/* magazines spread: a wider spread, the title stands at the left, the covers run past */
.h10-h .h10-mags { width: calc(var(--h10-vw, 100vw) * 2.1); display: flex; align-items: stretch; gap: clamp(40px, 5vw, 96px); padding: clamp(28px, 6vh, 72px) clamp(32px, 4.4vw, 84px) clamp(48px, 8vh, 88px); }
.h10-h .h10-mags__head { flex: none; width: calc(var(--h10-vw, 100vw) * 0.34); display: flex; flex-direction: column; justify-content: flex-end; }
.h10-h .h10-mags__row { flex: 1; display: flex; align-items: flex-end; gap: clamp(18px, 1.8vw, 32px); margin: 0; }
.h10-h .h10-mag { flex: 1 1 0; min-width: 0; }
.h10-h .h10-mag:nth-child(8n+1) { flex-grow: 1.1; } .h10-h .h10-mag:nth-child(8n+2) { flex-grow: 1.35; margin-bottom: 20vh; }
.h10-h .h10-mag:nth-child(8n+3) { flex-grow: 0.95; margin-bottom: 6vh; } .h10-h .h10-mag:nth-child(8n+4) { flex-grow: 1.25; margin-bottom: 27vh; }
.h10-h .h10-mag:nth-child(8n+5) { flex-grow: 1; margin-bottom: 9vh; } .h10-h .h10-mag:nth-child(8n+6) { flex-grow: 1.4; }
.h10-h .h10-mag:nth-child(8n+7) { flex-grow: 0.95; margin-bottom: 22vh; } .h10-h .h10-mag:nth-child(8n+8) { flex-grow: 1.2; margin-bottom: 5vh; }
.h10-h .h10-mag__cover img { max-height: 46vh; }
.h10-h .h10-mags .h10-folio--l { left: clamp(32px, 4.4vw, 84px); }

/* back cover */
.h10-h .h10-back__text { padding-bottom: 0; justify-content: flex-end; }
.h10-h .h10-back__type { margin-bottom: auto; margin-top: auto; }
.h10-h .h10-back__logo { width: clamp(44px, 4vw, 64px); margin-bottom: clamp(14px, 3vh, 28px); }
.h10-h .h10-back__mast { margin: 0; font-size: min(16vw, 30vh); }

/* ── phones ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
    .h10-feature__foot { gap: 16px; }
    .h10-feature--b .h10-page--text > .h10-photo--second { width: 42%; }
    .h10-cover__line { font-size: 11cqw; }
    .h10-lead, .h10-standfirst { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .h10-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    .h10-hint::after, .h10-panel { animation: none !important; }
    .h10-contents__art, .h10-credits__art { transition: none; }
}