/* Mobile design refinement / 2026-09-21. Scoped overrides, no image filters. */
@media (max-width: 1100px) {
  /* A 44px minimum touch target needs a scrollable row at 320px. */
  .design-rail, .has-design-switch .design-rail {
    position: sticky; top: 0; right: auto; left: auto; bottom: auto;
    transform: none; width: 100%; height: 54px; padding: 3px 8px;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    box-shadow: none; background: var(--paper); gap: 0;
  }
  .design-rail__caption { display: none; }
  .design-rail__numbers {
    display: flex; flex-direction: row; justify-content: flex-start; gap: 4px;
    width: max-content; max-width: 100%; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: thin; padding: 1px;
  }
  .design-rail button { flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .design-rail__progress { top: auto; right: auto; bottom: 0; left: 0;
    width: var(--scroll-progress,0%); height: 3px; }
  html[data-design="6"] body { display: block; }
  html[data-design="6"] .ws-shell-sidebar { display: block; position: relative;
    top: auto; width: 100%; height: auto; min-height: 0; overflow: visible;
    padding: 0; border-right: 0; border-bottom: 1px solid var(--ws-line); }
  html[data-design="6"] .ws-shell-sidebar > .ws-shell-sidebar__label,
  html[data-design="6"] .ws-shell-sidebar > .ws-shell-sidebar__nav,
  html[data-design="6"] .ws-shell-sidebar__bottom { display: none; }
  html[data-design="6"] .ws-shell-sidebar__mobile { display: block; }
  html[data-design="6"] .ws-shell-sidebar__mobile summary { min-height: 48px; padding: 13px 20px; }
  html[data-design="6"] .ws-shell-sidebar__mobile nav a { min-height: 44px; display: flex; align-items: center; }
  html[data-design="6"] #main > .shell, html[data-design="6"] #main .shell { --shell: calc(100% - 36px); }
  html[data-design="6"] .d6-workspace { grid-template-columns: minmax(0,1fr); }
  html[data-design="6"] .d6-inspector { grid-column: 1; }
  html[data-design="6"] .d6-worklist { order: -1; border-top: 0; border-bottom: 1px solid var(--ws-line); }
  html[data-design="6"] [data-workspace-stage-image] { scroll-margin-top: 112px; }
  html[data-design="6"] .d6-case-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  html[data-design="7"] .film-chapter-bar { position: sticky; top: 54px; z-index: 45;
    min-height: 48px; padding: 4px 16px; flex-wrap: nowrap; }
  html[data-design="7"] .film-chapter-bar nav.film-chapter-bar__desktop { display: none; }
  html[data-design="7"] .film-chapter-bar__mobile { display: block; margin-left: auto; position: relative; }
  html[data-design="7"] .film-chapter-bar__mobile summary { cursor: pointer; min-width: 76px;
    min-height: 44px; display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 6px 10px; border: 1px solid #776854; list-style: none; }
  html[data-design="7"] .film-chapter-bar__mobile summary::-webkit-details-marker { display: none; }
  html[data-design="7"] .film-chapter-bar__mobile nav { position: absolute; right: 0; top: calc(100% + 5px);
    z-index: 70; width: min(260px, calc(100vw - 32px)); max-height: calc(100dvh - 112px);
    overflow-y: auto; display: grid; gap: 0; padding: 8px;
    background: #26221e; border: 1px solid #776854; box-shadow: 0 10px 24px #0008; }
  html[data-design="7"] .film-chapter-bar__mobile nav a { display: flex; min-height: 44px;
    align-items: center; padding: 8px 12px; font-size: 12px; }
  html[data-design="7"] .film-chapter-bar__mobile summary:focus-visible { outline: 3px solid #e5c48d; outline-offset: 2px; }
  html[data-design="7"] .film-chapter-bar__counter { font-size: clamp(10px, 2.7vw, 12px);
    white-space: normal; overflow-wrap: anywhere; }
  html[data-design="7"] .d7-opening-top, html[data-design="7"] .d7-frame-label,
  html[data-design="6"] .d6-overline, html[data-design="6"] .d6-status { font-size: 11px; line-height: 1.5; }
}
@media (min-width: 1101px) {
  .film-chapter-bar__mobile { display: none !important; }
  .film-chapter-bar__desktop { display: flex; }
}
@media (max-width: 580px) {
  html.js[data-design="6"] .d6-catalog-columns { grid-template-columns: minmax(0,1fr); }
  html.js[data-design="6"] .d6-catalog-preview { grid-column: 1; grid-row: 1; min-width: 0; }
  html.js[data-design="6"] .d6-catalog-list { grid-column: 1; grid-row: 2; min-width: 0; }
  html[data-design="6"] [data-catalog-preview-title] { scroll-margin-top: 122px; }
  html[data-design="6"] [data-catalog-view] { min-height: 44px; font-size: 11px; padding: 10px 8px; }
  .lightbox-toolbar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 5px; }
  .lightbox-toolbar > div { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .lightbox-original { display: inline-flex; min-height: 44px; align-items: center;
    padding: 8px; font-size: 11px; }
  .lightbox-stage { height: auto; min-height: 0; max-height: calc(100dvh - 130px); }
  .lightbox-stage img.is-fit { max-height: calc(100dvh - 150px); }
}
@media (max-width: 350px) {
  html[data-design="6"] .d6-status { font-size: 11px; }
  html[data-design="7"] .d7-opening-top, html[data-design="7"] .d7-frame-label { font-size: 11px; }
}

/* Mobile content width / 2026-09-21.
   One usable text column: 16–24px gutters, max 720px on compact layouts.
   Keep primary actions full-width only on narrow phones; never stretch navigation. */
@media (max-width: 820px) {
  html[data-design] {
    --mobile-gutter: clamp(16px, 4vw, 24px);
    --shell: min(720px, calc(100% - var(--mobile-gutter) - var(--mobile-gutter)));
  }
  html[data-design] .shell,
  html[data-design] .concept-header__inner,
  html[data-design] .concept-footer__inner {
    width: var(--shell);
    max-width: 100%;
    margin-inline: auto;
  }
  /* Workspace's internal shell sets its own custom property in the desktop CSS. */
  html[data-design="6"] #main > .shell,
  html[data-design="6"] #main .shell {
    --shell: min(720px, calc(100% - var(--mobile-gutter) - var(--mobile-gutter)));
  }
  html[data-design="6"] .workspace-header .concept-header__inner {
    width: var(--shell);
  }
  html[data-design] :is(
    .hero-copy, .section-heading, .section-heading__aside, .catalog-head,
    .project-card, .project-card__info, .case-header__body, .case-header__body > div,
    .case-body__main, .case-copy, .about-copy, .contact-intro,
    .contact-form-panel, .contact-fields, .form-field, .service-row,
    .d6-stage, .d6-stage-copy, .d6-inspector, .d6-preview-description,
    .d7-opening-title, .d7-scene-info, .d7-shot-meta, .d7-final
  ) {
    min-width: 0;
    max-width: 100%;
  }
  html[data-design] :is(
    .hero-lede, .catalog-head > p, .page-hero > p, .case-header__body p,
    .prose, .prose p, .service-row p, .about-copy p, .contact-intro > p,
    .direction-card p, .project-card__info p, .d6-stage-copy p,
    .d6-inspector > p, .d6-preview-description p, .d7-opening-title p,
    .d7-scenes-heading p, .d7-scene-info p, .d7-final p
  ) {
    font-size: clamp(14px, 3.6vw, 16px);
    line-height: 1.65;
    max-width: 65ch;
    overflow-wrap: break-word;
  }
  html[data-design] :is(
    .hero h1, .section-heading h2, .directions h2, .closing h2,
    .page-hero h1, .contact-intro h1, .catalog-head h1,
    .case-header h1, .case-copy h2, .project-card h3,
    .service-row h2, .d6-stage-copy h1, .d6-inspector h2,
    .d6-preview-description h2, .d7-opening-title h1,
    .d7-scenes-heading h2, .d7-scene-info h3, .d7-final h2,
    .site-footer h2, .concept-footer h2
  ) {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  html[data-design] :is(.filter-row, .contact-fields, .case-actions, .hero-actions) {
    max-width: 100%;
    min-width: 0;
  }
  html[data-design] :is(.form-field input, .form-field textarea, .form-field select,
    .filter-row input, .filter-row select) {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    font-size: 16px; /* Do not trigger iOS auto-zoom on focus. */
  }
  html[data-design] .film-chapter-bar { padding-inline: var(--mobile-gutter); }
  html[data-design="6"] .ws-shell-sidebar__mobile summary {
    padding-inline: var(--mobile-gutter);
  }
  html[data-design] .concept-footer__links {
    column-gap: 16px;
    row-gap: 8px;
  }
}

/* At 621–740px theme-specific two-column grids still pinch Russian text. */
@media (max-width: 740px) {
  html:is([data-design="2"], [data-design="3"], [data-design="4"], [data-design="5"])
    :is(.direction-cards, .services-list, .featured-grid, .catalog-grid, .gallery-grid) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  html:is([data-design="2"], [data-design="3"], [data-design="4"], [data-design="5"])
    :is(.service-row, .project-card, .gallery-item) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  html[data-design] :is(.hero h1, .page-hero h1, .contact-intro h1, .case-header h1,
    .catalog-head h1, .d6-stage-copy h1, .d7-opening-title h1) {
    font-size: clamp(34px, 9.4vw, 54px);
    line-height: 1.12;
    letter-spacing: -.055em;
  }
  html[data-design] :is(.section-heading h2, .directions h2, .closing h2,
    .site-footer h2, .concept-footer h2, .d7-scenes-heading h2,
    .d7-scene-info h3, .d7-final h2) {
    font-size: clamp(30px, 8.5vw, 48px);
    line-height: 1.15;
    letter-spacing: -.05em;
  }
  html[data-design] .section-heading__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: none;
  }
  html[data-design] .section-heading__aside p { max-width: 65ch; }
  html[data-design] .stats-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  html[data-design] .stats-inner > div:last-of-type { grid-column: 1 / -1; }
  html[data-design] .stats-inner > div > span { font-size: 12px; line-height: 1.45; }
  html[data-design] .filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  html[data-design] .field-inline { width: 100%; min-width: 0; }
  html[data-design] .filter-submit { width: 100%; min-height: 48px; font-size: 14px; }
  html[data-design] .filter-pill span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
  }
  html[data-design] :is(.project-card__info, .case-actions, .d7-shot-meta) {
    flex-wrap: wrap;
    gap: 12px;
  }
  html[data-design] .pagination { gap: 8px; font-size: 12px; }
  html[data-design] .pagination > div { min-width: 0; }
  html[data-design] .pagination a,
  html[data-design] :is(.text-link, .inline-arrow, .about-links a, .service-end a) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    white-space: normal;
  }
  html[data-design] .switch-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  html[data-design] .switch-controls button {
    min-width: 0;
    min-height: 48px;
    padding: 10px 8px;
    font-size: 13px;
    white-space: normal;
  }
}

@media (max-width: 480px) {
  html[data-design] .hero-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }
  html[data-design] :is(.pill-button, .filter-submit, .submit-button,
    .concept-footer__cta, .d6-home-cta > a, .d6-preview-description a,
    .d7-final a) {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    gap: 12px;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
  }
  html[data-design] :is(.case-actions, .d7-final > div) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  html[data-design] .hero-actions > .text-link { align-self: flex-start; }
  html[data-design] .type-filter {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }
  html[data-design] .type-filter .filter-pill { min-width: 0; }
  html[data-design] .type-filter > .filter-pill:first-of-type { grid-column: 1 / -1; }
  html[data-design] .type-filter .filter-pill span { width: 100%; }
  html[data-design="6"] .d6-catalog-toolbar > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  html[data-design="6"] .d6-catalog-toolbar [data-catalog-view] {
    min-width: 0;
    width: 100%;
    min-height: 48px;
    padding: 9px 7px;
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }
  html[data-design="6"] .d6-inspector-actions a { min-width: 0; max-width: 100%; }
  html[data-design="7"] .d7-catalog-tools > div { display:flex;flex-wrap:wrap;gap:8px;max-width:100%; }
  html[data-design="7"] .d7-catalog-tools button { min-height:44px;min-width:0;white-space:normal; }
}

/* Mobile visual polish / 2026-09-21.
   Correct the *inner* layout, type and controls, not just the outer shell. */
@media (max-width: 620px) {
  /* On Night Lab and Gallery, two/three rows of navigation crowded out the
     first viewport. Keep every link available in one independently scrollable row. */
  html:is([data-design="3"], [data-design="5"]) .concept-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    gap: 3px;
    padding-block: 9px 4px;
  }
  html:is([data-design="3"], [data-design="5"]) .concept-header__brand {
    min-width: 0;
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  html:is([data-design="3"], [data-design="5"]) .concept-header__nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    font-size: 11px;
    line-height: 1.3;
  }
  html:is([data-design="3"], [data-design="5"]) .concept-header__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* The Workspace toolbar repeated its /PORTFOLIO OS label and broke the
     brand over two lines; Cinema had unnecessary desktop-height chrome. */
  html[data-design="6"] .workspace-header .concept-header__brand::after { content: none; }
  html[data-design="6"] .workspace-header .concept-header__inner,
  html[data-design="7"] .cinema-header .concept-header__inner {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-height: 48px;
    padding-block: 8px;
    gap: 0;
  }
  html[data-design="6"] .workspace-header .concept-header__brand,
  html[data-design="7"] .cinema-header .concept-header__brand {
    font-size: clamp(13px, 3.6vw, 16px);
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  html[data-design="6"] .workspace-header .concept-header__brand small,
  html[data-design="7"] .cinema-header .concept-header__brand small {
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  /* Automatic Russian hyphenation turned 'веб-системы' into 'веб-си-стемы'.
     Retain natural hyphen breaks; only very long unbroken words may wrap. */
  html[data-design] #main :is(h1, h2, h3),
  html[data-design] :is(.site-footer, .concept-footer) h2 {
    hyphens: manual;
    word-break: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  html[data-design] :is(.hero h1, .page-hero h1, .contact-intro h1, .case-header h1,
    .d6-stage-copy h1, .d7-opening-title h1) {
    font-size: clamp(30px, 8.5vw, 43px);
    line-height: 1.14;
    letter-spacing: -.045em;
  }
  html[data-design="4"] :is(.hero h1, .page-hero h1, .contact-intro h1, .case-header h1) {
    font-size: clamp(28px, 7.9vw, 38px);
    letter-spacing: -.025em;
  }
  html[data-design] :is(.section-heading h2, .directions h2, .closing h2,
    .d7-scenes-heading h2, .d7-scene-info h3, .d7-final h2) {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.17;
    letter-spacing: -.04em;
  }
  /* Preserve Cinema's large title-card identity without splitting words. */
  html[data-design="7"] .catalog-head h1 { font-size: clamp(43px, 11vw, 58px); }

  html[data-design] :is(.hero-lede, .catalog-head > p, .page-hero > p,
    .contact-intro > p, .direction-card > p, .project-card__info p,
    .service-row p, .section-heading__aside p, .case-header__body p,
    .case-copy .prose, .d6-stage-copy p, .d6-inspector > p,
    .d7-opening-title p, .d7-scene-info p) {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: normal;
  }
  html[data-design] :is(.section-kicker, .eyebrow, .tiny-label,
    .meta-line, .field-inline, .form-field label, .results-bar) {
    font-size: 11px;
    line-height: 1.5;
  }
  html[data-design] .form-field label,
  html[data-design] .field-inline { font-size: 12px; }
  html[data-design] .filter-pill span { font-size: 13px; }

  /* Consistent three-way filters on ordinary phones; two-column fallback at
     320px below prevents clipped CRM labels. */
  html[data-design] .type-filter {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  html[data-design] .type-filter > .filter-pill:first-of-type { grid-column: auto; }
  html[data-design] .type-filter .filter-pill span {
    min-width: 0;
    padding-inline: 5px;
    overflow-wrap: anywhere;
  }
  html[data-design] .filter-row { gap: 12px; }
  html[data-design] .filters { min-width: 0; }
  html[data-design] .filter-submit { min-height: 48px; }
  html[data-design] .section { padding-block: clamp(56px, 8vw, 70px); }
  html[data-design] .section-heading { margin-bottom: 26px; }
  html[data-design] .direction-card { min-height: 0; }
}
@media (max-width: 350px) {
  html[data-design] .type-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design] .type-filter > .filter-pill:first-of-type { grid-column: 1 / -1; }
}