/* Projects (Р107, дирижёр): витрина иконок, полосы проектов во всю ширину тихими тонами,
   шапка проекта и цифры в одну строку, галерея крупная, без подписи и кнопок. Без наездов. */

.stack { position: relative; }

/* ── витрина иконок ────────────────────────────────────────────────── */
.app-wall {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 48px;
    margin: 24px 0 72px;
}
.wall-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 140px;
    color: var(--ink-2);
    text-decoration: none;
    transform: rotate(var(--tilt, 0deg));
    transition: transform 260ms var(--ease-out, ease-out);
}
.wall-item img {
    width: 128px;
    height: 128px;
    border-radius: 22.37%;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--ink) 45%, transparent);
}
.wall-item span { font: 400 14px/1.3 var(--font-ui, 'Inter Tight', system-ui, sans-serif); text-align: center; }
@media (hover: hover) and (pointer: fine) {
    .wall-item:hover { transform: rotate(0deg) translateY(-6px); color: var(--ink); }
}
.wall-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* ── проект: полоса во всю ширину своим тоном ──────────────────────── */
.app.band {
    width: 100vw;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 64px max(52px, calc((100vw - 1320px) / 2)) 72px;
    background: var(--band);
    box-sizing: border-box;
    border: 0;
}
.app.band.b1 { --band: var(--paper); }
.app.band.b2 { --band: color-mix(in srgb, var(--paper) 98.5%, var(--ink)); }
.app.band.b3 { --band: color-mix(in srgb, var(--paper) 97%, var(--ink)); }
.app.band.b4 { --band: color-mix(in srgb, var(--paper) 95.5%, var(--ink)); }
.app.band.b5 { --band: color-mix(in srgb, var(--paper) 94%, var(--ink)); }

/* шапка проекта слева, цифры справа одной плашкой */
.app-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 620px);
    gap: 32px 48px;
    align-items: center;
}
.app.band .app-head { max-width: none; display: flex; align-items: center; gap: 24px; margin: 0; }
.app.band .app-icon { width: 104px; height: 104px; flex: 0 0 auto; }
.app.band .app-meta > * { margin: 0; }
.app.band .app-name {
    font: 400 36px/40px 'LoRes 12', var(--font-ui, 'Inter Tight', system-ui, sans-serif);
    letter-spacing: -3px;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision;
}
.app.band .app-sub { margin-top: 8px !important; font-size: 16px; line-height: 1.3; }
.app.band .app-dev { margin-top: 2px; font-size: 14px; }
.app.band .get { margin-top: 14px; }

.app.band .shelf {
    max-width: none;
    margin: 0;
    padding: 16px 8px;
    background: color-mix(in srgb, var(--paper) 93%, var(--ink));
}

/* галерея: крупно, без подписи и кнопок, тихие пиксельные стрелки у края */
.app.band .gallery { position: relative; margin-top: 40px; }
.app.band .gal-bar { display: none; }
.app.band .gal-track img { height: clamp(320px, 52svh, 540px); width: auto; }
.gal-chev {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 56px;
    margin-top: -28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    color: var(--ink);
    cursor: pointer;
}
.gal-chev svg { width: 15px; height: 21px; }                 /* 5×7 клеток по 3px */
.gal-l { left: 0; }
.gal-r { right: 0; }
.gal-chev[hidden] { display: none; }
.gal-chev:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
    .gal-chev:hover { background: var(--paper); }
}

.app.band .app-desc { margin-top: 24px; max-width: 62ch; }

@media (max-width: 1023px) {
    .app-top { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .app-wall { gap: 24px 20px; margin-bottom: 48px; }
    .wall-item { width: 96px; }
    .wall-item img { width: 88px; height: 88px; }
    .app.band { padding: 40px 20px 48px; }
    .app.band .app-icon { width: 80px; height: 80px; }
    .app.band .app-name { font-size: 24px; line-height: 28px; letter-spacing: -2px; }
    .app.band .gal-track img { height: clamp(260px, 46svh, 380px); }
    .gal-chev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wall-item { transform: none; transition: none; }
}

/* ── Р110: заголовок по центру крупно с плотной разрядкой и воздухом; цифры без подложки;
   иконка проекта во всю высоту блока «название · жанр · студия · Get» ──────────────────── */
body[data-page="projects"] .page-head { text-align: center; margin: 72px 0 56px; }
body[data-page="projects"] .page-title {
    font-size: 84px;              /* 4× сетки LoRes 21 Serif */
    line-height: 88px;
    letter-spacing: -4px;         /* минус один пиксель шрифта */
    font-weight: 400;
    font-synthesis: none;
}
.app-wall { margin: 0 0 160px; }

.app.band .shelf { background: none; padding: 0; }
.app.band .app-head { align-items: stretch; gap: 28px; }
.app.band .app-icon { width: auto; height: auto; aspect-ratio: 1 / 1; min-width: 150px; max-width: 200px; align-self: stretch; object-fit: cover; }
.app.band .app-meta { display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 767px) {
    body[data-page="projects"] .page-head { margin: 40px 0 32px; }
    body[data-page="projects"] .page-title { font-size: 42px; line-height: 48px; letter-spacing: -2px; }
    .app-wall { margin-bottom: 80px; }
    .app.band .app-icon { min-width: 104px; max-width: 120px; }
}
.app.band .app-meta .get { align-self: flex-start; }

/* Р155 (аудит Р107): без вертикальных линий между цифрами; «more» отдельной строкой — на телефоне
   его 44-пиксельная зона нажатия больше не залезает под описание */
.app .cell + .cell { border-left: 0; }
.app .more { display: flex; align-items: center; min-height: 44px; margin: 4px 0 0; }
.app .more + .app-impact, .app .app-impact { margin-top: 8px !important; }

/* аудит №12: на телефоне иконка проекта строго квадрат, не тянется по высоте шапки */
@media (max-width: 767px) {
    .app.band .app-icon { align-self: start; width: 120px; height: 120px; min-width: 0; }
}
/* аудит №11: «more» — зона нажатия 44 и по ширине */
.app .more { min-width: 44px; }