/*
 * Prototype home17 (/html/home17.html): "Studio light". The page is a dark photo studio and one
 * key light does all the work. In the hero it follows the pointer (or drifts on its own) and
 * reveals the colour portrait over its dim version; the console sets it warm or cool, soft or hard.
 * Below, the same light sweeps the statement word by word, holds still while the faces walk
 * through it, opens one craft at a time, lights a magazine's covers and switches on each value.
 * Header and footer come from the site styles; the header sits on the studio ground.
 */
.proto-home17 {
    --k-ground: #0c110f;
    --k-wall: #131a16;
    --k-raise: #18211c;
    --k-ink: #f1ebe0;
    --k-soft: #b4afa3;
    --k-warm: #ffcf94;
    --k-green: #469a58;
    --k-yellow: #ffb500;
    --k-dark: #0c110f;
    --k-serif: "Instrument Serif", Georgia, serif;
    --k-sans: "Lato", system-ui, sans-serif;
    --k-edge: clamp(16px, 3.4vw, 56px);
    --k-opsz: "opsz" 12;
    --k-ease: cubic-bezier(.2, .7, .15, 1);
    background: var(--k-ground);
}
.proto-home17 .main { padding: 0; }
.proto-home17 .header { background: var(--k-ground); }
.proto-home17 .header::before { display: none; }
.h17 :where(*) { color: inherit; }
.h17 { color: var(--k-ink); font-family: var(--k-sans); overflow-x: clip; font-variation-settings: var(--k-opsz); }
.h17-wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--k-edge); }
.h17-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.h17 ul { list-style: none; margin: 0; padding: 0; }

/* ── type and actions ─────────────────────────────────────────────────────────────────── */
.h17-title {
    margin: 0; font: 500 clamp(40px, 5vw, 88px)/1 var(--k-serif); font-variation-settings: var(--k-opsz);
    letter-spacing: -0.02em; text-wrap: balance;
}
.h17-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 20px 48px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.h17-head p, .h17-mags__side > p { margin: 0; max-width: 38ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }
.h17-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.h17-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-dark);
    font: 700 16px/1 var(--k-sans); text-decoration: none;
    transition: background 220ms ease, transform 180ms var(--k-ease);
}
.h17-btn:hover { background: #ffc83d; transform: translateY(-2px); }
.h17-btn:active { transform: scale(0.97); }
.h17-link {
    display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--k-sans);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
    text-decoration-color: rgb(255 207 148 / 0.6); transition: color 200ms ease, text-decoration-color 200ms ease;
}
.h17-link:hover { color: var(--k-warm); text-decoration-color: var(--k-warm); }
.h17 a:focus-visible, .h17 button:focus-visible, .h17-seg input:focus-visible + span { outline: 2px solid var(--k-warm); outline-offset: 3px; }

/* ── the key light rig ────────────────────────────────────────────────────────────────── */
/* A dim base picture, then two masked colour layers. Each layer moves to the light with a
   transform while its picture moves back by the same amount, so the picture stays in register. */
.h17-rig {
    --kx: 52cqw; --ky: 30cqh; --d-soft: 92cqw; --d-hard: 54cqw;
    position: relative; margin: 0; overflow: hidden; container-type: size; background: #080b0a;
}
.h17-rig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h17-rig__dim { position: absolute; inset: 0; filter: grayscale(0.9) brightness(0.22) contrast(1.1); }
.h17-key {
    --d: var(--d-soft);
    position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
    transform: translate3d(var(--kx), var(--ky), 0); will-change: transform;
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.25) 80%, transparent);
    mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.25) 80%, transparent);
    transition: opacity 700ms ease;
}
.h17-key--hard {
    --d: var(--d-hard); opacity: 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 97%);
    mask-image: radial-gradient(closest-side, #000 84%, transparent 97%);
}
.h17-key__in {
    position: absolute; left: calc(var(--d) / 2); top: calc(var(--d) / 2); width: 100cqw; height: 100cqh;
    transform: translate3d(calc(-1 * var(--kx)), calc(-1 * var(--ky)), 0); will-change: transform;
}
.h17-key--soft img { filter: saturate(1.05) brightness(1.04); }
.h17-key--hard img { filter: contrast(1.2) saturate(1.15) brightness(1.06); }
.h17-key__tint {
    position: absolute; inset: 0; background-color: var(--tint); mix-blend-mode: soft-light; opacity: 0.6;
    transition: background-color 900ms ease;
}
.h17-spill {
    position: absolute; left: 0; top: 0; z-index: -1; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
    pointer-events: none; color: var(--spill); opacity: 0.17;
    background: radial-gradient(closest-side, currentColor, transparent);
    transform: translate3d(var(--sx, 66vw), var(--sy, 36vh), 0); will-change: transform;
    transition: color 900ms ease, opacity 700ms ease;
}
.h17-hero, .h17-join { --tint: #ffab5e; --spill: #ffc488; }
.h17-hero:has(#h17-cool:checked) { --tint: #7fb6ff; --spill: #a9cfff; }
.h17-hero:has(#h17-hard:checked) .h17-key--soft { opacity: 0; }
.h17-hero:has(#h17-hard:checked) .h17-key--hard { opacity: 1; }
.h17-hero:has(#h17-hard:checked) .h17-spill { opacity: 0.08; }
/* The light comes up once the page is ready. */
.h17-js .h17-rig--hero .h17-key { opacity: 0; transition: opacity 1600ms ease 200ms; }
.h17-js .h17-hero.is-ready .h17-rig--hero .h17-key--soft { opacity: 1; }
.h17-js .h17-hero.is-ready:has(#h17-hard:checked) .h17-rig--hero .h17-key--soft { opacity: 0; transition-delay: 0ms; }
.h17-js .h17-hero.is-ready:has(#h17-hard:checked) .h17-rig--hero .h17-key--hard { opacity: 1; transition-delay: 0ms; }

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */
.h17-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 clamp(24px, 4vw, 72px);
    min-height: calc(100svh - var(--header-h, 70px)); padding: 32px var(--k-edge) 48px;
    background: radial-gradient(90% 70% at 72% 38%, #17201b, var(--k-ground) 72%);
}
.h17-hero__shot { grid-column: 2; grid-row: 1; align-self: center; }
.h17-rig--hero { height: min(calc(100svh - var(--header-h, 70px) - 80px), 900px); min-height: 420px; aspect-ratio: 2 / 3; border-radius: 2px; }
.h17-hero__text { grid-column: 1; grid-row: 1; position: relative; z-index: 2; padding-bottom: 4px; }
.h17-hero__title {
    margin: 0 -18vw 0 0; font: 500 clamp(56px, 7.6vw, 140px)/0.94 var(--k-serif); font-variation-settings: var(--k-opsz);
    letter-spacing: -0.03em;
}
.h17-line { display: block; overflow: hidden; padding: 0 0.04em 0.1em 0; margin-bottom: -0.1em; white-space: nowrap; }
.h17-line > span { display: inline-block; }
.h17-js .h17-line > span { transform: translate3d(0, 104%, 0); transition: transform 1300ms var(--k-ease); }
.h17-js .h17-line + .h17-line > span { transition-delay: 140ms; }
.h17-js .h17-hero.is-ready .h17-line > span { transform: none; }
.h17-hero__lead { margin: 32px 0 34px; max-width: 40ch; font: 400 20px/1.55 var(--k-sans); color: #d6d0c4; }

/* The lighting console */
.h17-console { margin: 44px 0 0; padding: 0; border: 0; min-width: 0; }
.h17-console legend { padding: 0; margin-bottom: 12px; font: 400 15px/1.3 var(--k-sans); color: var(--k-soft); }
.h17-console__rows { display: flex; flex-wrap: wrap; gap: 10px; }
.h17-console__row { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.h17-seg { position: relative; cursor: pointer; }
.h17-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.h17-seg span {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px;
    font: 700 15px/1 var(--k-sans); color: var(--k-soft); transition: background 260ms ease, color 260ms ease;
}
.h17-seg span::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.4;
    transition: background 260ms ease, opacity 260ms ease, box-shadow 260ms ease;
}
.h17-seg:hover span { color: var(--k-ink); }
.h17-seg input:checked + span { background: var(--k-ink); color: var(--k-dark); }
.h17-seg input:checked + span::before { opacity: 1; background: var(--tint); box-shadow: 0 0 10px var(--tint); }

/* ── what DEPO is ─────────────────────────────────────────────────────────────────────── */
.h17-about { padding: clamp(120px, 14vw, 240px) 0 clamp(96px, 11vw, 180px); background: var(--k-ground); }
.h17-statement {
    margin: 0; max-width: 30ch; font: 400 clamp(30px, 3.1vw, 46px)/1.18 var(--k-serif); font-variation-settings: var(--k-opsz);
    letter-spacing: -0.015em; text-wrap: pretty;
}
.h17-js .h17-w { opacity: 0.16; transition: opacity 240ms linear; }
.h17-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px clamp(24px, 3vw, 56px); margin-top: clamp(80px, 10vw, 160px) !important; }
.h17-tool { position: relative; padding-top: 28px; }
.h17-tool::before {
    content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px; border-radius: 2px;
    background: var(--k-warm); box-shadow: 0 0 18px rgb(255 207 148 / 0.7); transform-origin: left;
    transition: transform 900ms var(--k-ease), opacity 900ms ease;
}
.h17-tool h3 { margin: 0 0 14px; font: 500 clamp(24px, 2vw, 30px)/1.1 var(--k-serif); letter-spacing: -0.01em; }
.h17-tool p { margin: 0 0 10px; max-width: 34ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }
.h17-js .h17-tool { opacity: 0.25; transform: translate3d(0, 18px, 0); transition: opacity 900ms ease, transform 900ms var(--k-ease); }
.h17-js .h17-tool::before { transform: scaleX(0); opacity: 0; }
.h17-js .h17-tool.is-lit { opacity: 1; transform: none; }
.h17-js .h17-tool.is-lit::before { transform: none; opacity: 1; }
.h17-tool:nth-child(2) { transition-delay: 90ms; }
.h17-tool:nth-child(3) { transition-delay: 180ms; }
.h17-tool:nth-child(4) { transition-delay: 270ms; }

/* ── the faces walk through a fixed light ─────────────────────────────────────────────── */
.h17-people { position: relative; background: #090d0b; }
.h17-people__stage { position: relative; overflow-x: auto; padding: 96px 0; scrollbar-width: none; }
.h17-people__stage::-webkit-scrollbar { display: none; }
.h17-people__beam {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(30% 46% at 50% 44%, rgb(255 200 140 / 0.13), transparent 72%),
        radial-gradient(26% 7% at 50% 90%, rgb(255 200 140 / 0.1), transparent 75%);
}
.h17-people__track { position: relative; display: flex; align-items: center; gap: clamp(28px, 4vw, 72px); width: max-content; padding: 0 var(--k-edge) !important; }
.h17-people__intro { flex: none; width: min(34vw, 520px); padding-right: 2vw; }
.h17-people__intro p { margin: 24px 0 0; max-width: 32ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }
.h17-face { --fw: min(24vw, calc((100svh - var(--header-h, 70px) - 220px) / 1.5)); flex: none; width: max(var(--fw), 220px); }
.h17-face:nth-child(odd) { transform: translateY(5vh); }
.h17-face:nth-child(even) { transform: translateY(-5vh); }
.h17-face__frame { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 2px; background: #050706; }
.h17-face__pan { position: absolute; inset: 0 -9%; will-change: transform; }
.h17-face__pan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h17-face__dim { filter: grayscale(1) brightness(0.28) contrast(1.1); }
.h17-face__lit { transition: transform 900ms var(--k-ease); }
.h17-face__frame:hover .h17-face__lit { transform: scale(1.03); }
.h17-face__name { margin: 16px 0 0; font: 500 clamp(24px, 2vw, 30px)/1.1 var(--k-serif); }
.h17-js-track .h17-people__stage {
    position: sticky; top: var(--header-h, 70px); height: calc(100svh - var(--header-h, 70px));
    overflow: hidden; padding: 0; display: flex; align-items: center;
}
.h17-js-track .h17-people__track { will-change: transform; }
.h17-js-track .h17-face__lit { opacity: 0; }
.h17-js-track .h17-face__name { opacity: 0.2; }

/* ── roles: one craft in the light at a time ──────────────────────────────────────────── */
.h17-roles { padding: clamp(120px, 13vw, 220px) 0 clamp(96px, 11vw, 180px); }
.h17-roles__set { display: grid; gap: 56px; }
.h17-role { position: relative; }
.h17-role__pic { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; background: #050706; }
.h17-role__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h17-role__dim { filter: grayscale(1) brightness(0.3); }
.h17-role__lit { transition: opacity 1100ms ease, transform 1400ms var(--k-ease); }
.h17-role__name { margin: 20px 0 0; font: 500 clamp(32px, 3.1vw, 46px)/1 var(--k-serif); letter-spacing: -0.015em; }
.h17-role__name button { padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.h17-role__body ul { display: grid; gap: 10px; margin: 18px 0 14px; }
.h17-role__body li { position: relative; padding-left: 22px; max-width: 40ch; font: 400 18px/1.5 var(--k-sans); color: #d6d0c4; }
.h17-role__body li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--k-warm); opacity: 0.85; }
.h17-js .h17-role__lit { opacity: 0; }
.h17-js .h17-role.is-lit .h17-role__lit { opacity: 1; }

@media (min-width: 900px) {
    .h17-js .h17-roles__set { display: flex; gap: 10px; height: min(78vh, 780px); min-height: 560px; }
    .h17-js .h17-role { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 2px; transition: flex-grow 900ms var(--k-ease); }
    .h17-js .h17-role.is-open { flex-grow: 4.4; }
    .h17-js .h17-role__pic { position: absolute; inset: 0; aspect-ratio: auto; }
    .h17-js .h17-role__pic::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(5 7 6 / 0.85)); }
    .h17-js .h17-role__lit { transform: scale(1.06); }
    .h17-js .h17-role.is-lit .h17-role__lit { opacity: 0; }
    .h17-js .h17-role.is-open .h17-role__lit { opacity: 1; transform: none; }
    .h17-js .h17-role__name { position: absolute; inset: 0; margin: 0; }
    .h17-js .h17-role__name button { position: absolute; inset: 0; z-index: 1; }
    .h17-js .h17-role__name button span {
        position: absolute; left: 20px; bottom: 26px; writing-mode: vertical-rl; transform: rotate(180deg);
        white-space: nowrap; transition: color 300ms ease;
    }
    .h17-js .h17-role:not(.is-open) .h17-role__name button:hover span { color: var(--k-warm); }
    .h17-js .h17-role__body {
        position: absolute; left: 96px; right: 28px; bottom: 26px; z-index: 2; pointer-events: none;
        opacity: 0; visibility: hidden; transform: translate3d(0, 16px, 0);
        transition: opacity 400ms ease, transform 600ms var(--k-ease), visibility 0s 400ms;
    }
    .h17-js .h17-role.is-open .h17-role__body {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
        transition: opacity 700ms ease 450ms, transform 900ms var(--k-ease) 450ms, visibility 0s;
    }
    .h17-js .h17-role__body ul { margin-top: 0; min-width: 30ch; }
}

/* ── magazines: light one title's covers ──────────────────────────────────────────────── */
.h17-mags { padding: clamp(110px, 12vw, 200px) 0 clamp(96px, 10vw, 170px); background: #090d0b; }
.h17-mags__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px clamp(32px, 5vw, 96px); align-items: start; }
.h17-mags__side { position: sticky; top: calc(var(--header-h, 70px) + 40px); }
.h17-mags__side > p { margin-top: 22px; }
.h17-mags__names { display: grid; margin-top: 36px !important; }
.h17-mag {
    display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 48px; padding: 6px 0;
    background: none; border: 0; cursor: pointer; text-align: left; color: var(--k-soft);
    font: 500 clamp(24px, 2vw, 30px)/1.15 var(--k-serif); transition: color 260ms ease, transform 400ms var(--k-ease);
}
.h17-mag::before {
    content: ""; flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%;
    background: rgb(255 255 255 / 0.18); transition: background 300ms ease, box-shadow 300ms ease;
}
.h17-mag__count { margin-left: auto; font: 400 15px/1 var(--k-sans); color: var(--k-soft); font-variant-numeric: tabular-nums; }
.h17-mag:hover { color: var(--k-ink); transform: translateX(6px); }
.h17-mag.is-on { color: var(--k-ink); }
.h17-mag.is-on::before { background: var(--k-warm); box-shadow: 0 0 12px var(--k-warm); }
.h17-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.h17-wall a { position: relative; display: block; overflow: hidden; border-radius: 2px; background: #050706; }
.h17-wall img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 700ms var(--k-ease); }
.h17-wall a:hover img { transform: scale(1.05); }
.h17-wall__shade { position: absolute; inset: 0; background: rgb(6 9 8 / 0.86); opacity: 0; transition: opacity 600ms ease; }
.h17-wall.is-filtered .h17-wall__item:not(.is-match) .h17-wall__shade { opacity: 1; }
.h17-wall.is-filtered .h17-wall__item.is-match img { transform: scale(1.02); }

/* ── values: set cards that switch on ─────────────────────────────────────────────────── */
.h17-values { padding: clamp(96px, 10vw, 170px) 0 clamp(120px, 13vw, 220px); }
.h17-values__list { display: grid; gap: 20px; }
.h17-value {
    position: relative; overflow: hidden; width: min(100%, 900px); padding: clamp(36px, 5vw, 84px) clamp(28px, 5vw, 84px);
    border-radius: 3px; background: var(--k-wall); isolation: isolate;
}
.h17-value:nth-child(even) { margin-left: auto; }
.h17-value::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 90% at 22% -10%, rgb(255 205 150 / 0.27), transparent 70%);
    transition: opacity 1400ms ease;
}
.h17-value:nth-child(even)::before { background: radial-gradient(70% 90% at 78% -10%, rgb(255 205 150 / 0.27), transparent 70%); }
.h17-value h3 { margin: 0; font: 500 clamp(40px, 5vw, 88px)/1 var(--k-serif); letter-spacing: -0.02em; }
.h17-value p { margin: 24px 0 0; max-width: 54ch; font: 400 18px/1.6 var(--k-sans); color: #d6d0c4; }
.h17-js .h17-value::before { opacity: 0; }
.h17-js .h17-value h3, .h17-js .h17-value p { opacity: 0.2; transition: opacity 1000ms ease; }
.h17-js .h17-value p { transition-delay: 200ms; }
.h17-js .h17-value.is-lit::before { opacity: 1; }
.h17-js .h17-value.is-lit h3, .h17-js .h17-value.is-lit p { opacity: 1; }

/* ── join ─────────────────────────────────────────────────────────────────────────────── */
.h17-join { position: relative; isolation: isolate; overflow: hidden; padding: 0 0 clamp(96px, 10vw, 160px); background: var(--k-ground); }
.h17-rig--join { --kx: 42cqw; --ky: 50cqh; --d-soft: 56cqw; --d-hard: 36cqw; width: 100%; aspect-ratio: 1920 / 640; }
.h17-rig--join img { object-position: 42% 50%; }
.h17-spill--join { opacity: 0.1; }
.h17-join__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-top: clamp(56px, 6vw, 96px); }
.h17-join__title { grid-row: span 2; margin: 0; font: 500 clamp(56px, 7.6vw, 140px)/0.94 var(--k-serif); letter-spacing: -0.03em; }
.h17-join__text p { margin: 0; max-width: 36ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }

/* ── tablet and phone ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .h17-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h17-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
    .h17-hero { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 16px; min-height: 0; }
    .h17-hero__shot { grid-column: 1; grid-row: 1; }
    .h17-rig--hero { width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 5; --d-soft: 120cqw; --d-hard: 74cqw; --ky: 34cqh; }
    .h17-hero__text { grid-column: 1; grid-row: 2; margin-top: -0.95em; font-size: clamp(44px, 11.6vw, 96px); }
    .h17-hero__title { margin: 0; font-size: 1em; }
    .h17-hero__lead { font-size: 18px; margin: 24px 0 28px; }
    .h17-head, .h17-mags__grid, .h17-join__text { grid-template-columns: minmax(0, 1fr); }
    .h17-mags__side { position: static; }
    .h17-mags__names { display: flex; gap: 6px 20px; flex-wrap: wrap; }
    .h17-mags__names li { flex: none; }
    .h17-mag { width: auto; font-size: 24px; }
    .h17-mag__count { display: none; }
    .h17-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    .h17-people__intro { width: 78vw; }
    .h17-face { --fw: min(78vw, calc((100svh - var(--header-h, 70px) - 200px) / 1.5)); }
    .h17-face:nth-child(odd), .h17-face:nth-child(even) { transform: none; }
    .h17-join__title { grid-row: auto; }
    .h17-rig--join { aspect-ratio: 4 / 5; --kx: 42cqw; --d-soft: 150cqw; --d-hard: 90cqw; }
    .h17-value:nth-child(even) { margin-left: 0; }
    .h17-console__row { flex: 1 1 140px; }
    .h17-seg { flex: 1; }
    .h17-seg span { width: 100%; justify-content: center; min-height: 44px; }
}
@media (max-width: 575px) {
    .h17-tools { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .h17-actions .h17-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .h17 *, .h17 *::before, .h17 *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; }
    .h17-js .h17-line > span, .h17-js .h17-tool { transform: none; }
    .h17-js .h17-w { opacity: 1; }
}