@font-face{font-family:Instrument Sans;src:url('fonts/InstrumentSans.ttf') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fonts/Inter.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
:root{--pf-blue:#1700e6;--pf-ink:#0b0b0b;--pf-muted:#737373;--pf-line:#e5e5e5;--pf-paper:#fbfbfb;--pf-soft:#f5f5f5;--motion-fast:180ms;--motion-medium:280ms;--motion-slow:420ms;--ease-out:cubic-bezier(.22,1,.36,1);--muted-opacity:.45}
*{box-sizing:border-box}body{margin:0;color:var(--pf-ink);background:var(--pf-paper);font:400 15px/1.25 'Instrument Sans',Inter,Arial,sans-serif}a{color:inherit;text-underline-offset:3px}a:hover{color:var(--pf-blue)}a:focus-visible,summary:focus-visible{outline:2px solid var(--pf-blue);outline-offset:5px}img{max-width:100%;height:auto;display:block}h1,h2,h3,p{margin:0;font:inherit}h1,h2,h3{font-weight:400}.skip{position:fixed;top:-100px;left:15px;padding:10px;background:white;z-index:10}.skip:focus{top:10px}.muted{color:var(--pf-muted)}
.index-page{min-height:100vh;padding:27px}.index-header{display:grid;grid-template-columns:24% 14.8% 14.8% 14.8% 1fr;column-gap:35.7px;row-gap:0}.index-header h2{font-size:15px;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;margin-bottom:30px}.index-header .identity{text-decoration:none}.identity-note{margin-top:30px;color:var(--pf-muted)}.identity-note span{color:var(--pf-ink)}.identity-caption{margin-top:42px;color:var(--pf-muted);max-width:280px}.index-nav{display:flex;justify-content:flex-end;align-items:start;gap:10px;flex-wrap:wrap;font-size:15px}.index-nav a{text-transform:uppercase;text-decoration:none}.index-nav a[aria-current=page]{text-decoration:underline}.practice-list{color:var(--pf-muted)}
.project-index{margin:clamp(100px,10vw,190px) 0 0 24%;width:49%;border-collapse:collapse;text-align:left;font-size:15px}.project-index th{font-weight:400;text-transform:uppercase;padding:0 12px 29px 0}.project-index th:first-child{text-transform:none}.project-index td{padding:0 12px 9px 0;vertical-align:top}.project-index td:first-child,.project-index td:last-child{color:var(--pf-muted)}.project-index th:nth-child(1){width:7%}.project-index th:nth-child(2){width:23%}.project-index th:nth-child(3){width:28%}.project-index th:nth-child(4){width:27%}.project-index a{text-decoration:none}.project-index a:hover{text-decoration:underline}.project-index .unavailable td:not(:first-child):not(:last-child){color:#aaa;text-decoration:line-through}.index-note{margin:30px 0 0 24%;color:var(--pf-muted);font-size:12px}.index-note a{color:var(--pf-ink)}
.case-page{background:#fff;padding:27px;min-height:100vh}.case-top{display:flex;justify-content:space-between}.case-top h1{text-decoration:underline}.case-status{color:var(--pf-muted);margin-top:30px}.case-layout{display:grid;grid-template-columns:30% 1fr;gap:2.2%;margin-top:60px;align-items:start}.case-data{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:30px 18px;max-width:420px}.case-data dt{margin-bottom:10px;text-transform:uppercase}.case-data dd{margin:0;color:var(--pf-muted)}dl{margin:0}.case-role{margin-top:38px;max-width:270px}.case-author{margin-top:23px;color:var(--pf-muted)}.case-context{margin-top:70px;max-width:556px}.case-context h2{margin-bottom:10px;text-transform:uppercase}.case-sidebar{display:flex;flex-direction:column;align-self:stretch}.case-visit{margin-top:auto;padding-top:45px;text-align:right;color:var(--pf-blue)}.case-cover{width:100%;aspect-ratio:1267/719;object-fit:cover}.case-bottom{display:flex;justify-content:space-between;gap:25px;margin-top:55px;padding-bottom:25px}.case-more{margin:110px 0 0 32.2%}.case-more figure{margin:0 0 50px}.case-more figcaption{margin-top:12px;color:var(--pf-muted);font-size:13px}.case-more .mobile-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;background:var(--pf-soft);padding:35px}.mobile-pair img{width:100%;max-width:280px;min-width:0;margin:auto}.case-credits{max-width:650px;color:var(--pf-muted);font-size:13px;line-height:1.5;margin:35px 0}.case-assets{display:flex;gap:20px;flex-wrap:wrap;margin-top:25px}
.shell,.site-header,.site-footer,.case-links{width:calc(100% - 54px);margin:auto}.site-header{display:flex;gap:25px;padding:27px 0;align-items:start}.site-header .identity{margin-right:auto;text-decoration:none}.site-header small{display:none}.site-header>a:not(.identity){text-transform:uppercase;text-decoration:none}.site-header a[aria-current=page]{text-decoration:underline}.page-heading{padding:100px 0 55px}.page-heading h1{font-size:15px;text-transform:uppercase;margin-bottom:25px}.page-heading p{max-width:550px}.about-layout,.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;max-width:1150px;margin:0 auto 100px}.about-statement{font-size:26px;line-height:1.3;margin-bottom:25px}.body-copy,.about-details p{font-size:15px;line-height:1.6;margin-bottom:20px}.about-details section{margin-bottom:40px}.about-details h2,.contact-layout h2{margin-bottom:25px;text-transform:uppercase}.services,.brief-list{padding:0;margin:0;list-style:none}.services li{display:flex;justify-content:space-between;gap:20px;margin:15px 0}.services small{font-size:13px;color:var(--pf-muted)}.proof-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.about-image{margin:35px 0}.about-image figcaption{font-size:12px;color:var(--pf-muted);margin-top:12px}.brief-list li{margin-bottom:25px}.brief-list strong{display:block;font-weight:400;margin-bottom:8px}.brief-list p,.pending,.draft-note{color:var(--pf-muted);line-height:1.5}.contact-channel{margin:35px 0 15px}.contact-channel p{margin-bottom:12px}.contact-channel a{overflow-wrap:anywhere}.draft-note{font-size:12px}.site-footer{display:flex;justify-content:space-between;gap:25px;padding:30px 0;font-size:13px}.site-footer span{color:var(--pf-muted)}.arrow{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;margin-left:7px;vertical-align:middle}.map-table{border-collapse:collapse;width:100%;margin-bottom:50px}.map-table th,.map-table td{font-weight:400;text-align:left;padding:15px;vertical-align:top}.map-table code{display:block;font:12px/1.5 'Instrument Sans',Inter,sans-serif;color:var(--pf-muted)}.map-note{margin-bottom:60px;max-width:700px}.error-content{padding:100px 0}.error-content h1{font-size:36px;margin-bottom:30px}.catalogue-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:120px 10% 80px 24%}.catalogue-grid figure{margin:0}.catalogue-grid figure:nth-child(2){padding-top:100px}.catalogue-grid figcaption{margin-top:15px;line-height:1.5}.catalogue-grid img{width:100%}
@media(min-width:1700px){.index-nav{flex-wrap:nowrap}.project-index{margin-top:190px}}
@media(max-width:1200px){.index-header{grid-template-columns:24% 19% 19% 19%;row-gap:29.8px}.index-nav{grid-column:1/-1;justify-content:flex-start;gap:25px}.project-index{width:70%;margin-top:90px}.case-data{gap:25px 12px;font-size:13px}.case-context{margin-top:45px}}
@media(max-width:760px){body{font-size:14px}.index-page,.case-page{padding:20px}.index-header{grid-template-columns:1fr 1fr;gap:25.5px 17px}.index-header .index-identity{grid-column:1/-1}.identity-note{margin-top:18px}.identity-caption{margin-top:20px}.index-header h2{font-size:13px;margin-bottom:16px}.index-nav{font-size:13px;gap:18px}.project-index{margin:60px 0 0;width:100%;font-size:12px}.project-index th{font-size:10px;padding-right:8px;padding-bottom:20px}.project-index td{padding-right:8px;padding-bottom:16px}.project-index th:nth-child(4),.project-index td:nth-child(4){display:none}.index-note{margin:20px 0 40px;font-size:12px;line-height:1.5}.case-layout{grid-template-columns:1fr;gap:35px;margin-top:45px}.case-data{font-size:13px;max-width:440px}.case-context{margin-top:35px}.case-role{margin-top:30px}.case-visit{text-align:left;padding-top:30px}.case-more{margin:60px 0 0}.case-bottom{flex-wrap:wrap;font-size:13px}.case-more .mobile-pair{gap:20px;padding:20px}.shell,.site-header,.site-footer{width:calc(100% - 40px)}.site-header{flex-wrap:wrap;gap:18px;font-size:13px}.site-header .identity{flex-basis:100%}.page-heading{padding:55px 0 35px}.about-layout,.contact-layout{grid-template-columns:1fr;gap:35px;margin-bottom:55px}.about-statement{font-size:23px}.site-footer{flex-wrap:wrap;font-size:12px}.map-table th{display:none}.map-table tr,.map-table td{display:block;padding:8px 0}.map-table tr{margin-bottom:20px}.catalogue-grid{grid-template-columns:1fr;margin:60px 0;gap:45px}.catalogue-grid figure:nth-child(2){padding-top:0}.map-note{font-size:14px;line-height:1.5}}

/* Navigation, readable project states and localized layouts. */
.index-header>*,.case-layout>*,.case-data>*,.about-layout>*{min-width:0}
.index-nav a,.site-header>a,.case-top-nav a,.case-bottom a{padding:8px 0;white-space:nowrap}
.index-nav{align-items:baseline;column-gap:14px;row-gap:2px;margin-top:-8px}
.language-link{margin-left:8px;text-decoration:underline!important;text-underline-offset:4px}
.case-top-nav{display:flex;align-items:baseline;gap:28px;margin-top:-8px}
.home-link{text-decoration:none}
.case-top-nav .home-link{text-decoration:underline;text-underline-offset:4px}
.case-context p{line-height:1.5;max-width:62ch}
.case-data{grid-template-columns:1fr 1.2fr 1fr;line-height:1.4}
.case-more img{height:auto}
.case-cover{height:auto;aspect-ratio:auto;object-fit:contain}
.project-index{width:62%;max-width:1120px}
.project-index td{padding-bottom:15px;line-height:1.4}
.project-index .unavailable td:not(:first-child):not(:last-child){color:var(--pf-muted);text-decoration:line-through}

.project-index a{display:inline-block;text-decoration:underline;text-decoration-color:var(--pf-line);text-underline-offset:5px}
.project-index tbody tr:not(.unavailable):hover{background:#efefed}
.index-note{line-height:1.5;max-width:62ch}
.site-header{align-items:baseline;flex-wrap:wrap;row-gap:4px}
.site-header .identity{white-space:nowrap}
.about-layout,.contact-layout{margin-left:24%;max-width:none;gap:7%;grid-template-columns:1.1fr 1fr}
.page-heading{padding-top:75px;margin-left:24%}
.services li{align-items:baseline;gap:24px}.services small{text-align:right}
.error-content p{margin-top:25px}
html[lang=ru] body{line-height:1.4}
html[lang=ru] .index-header h2{font-size:14px}
html[lang=ru] .case-data{font-size:14px}
@media(max-width:1600px){.index-header{grid-template-columns:24% 19% 19% 19%;row-gap:25.5px}.index-nav{grid-column:1/-1;justify-content:flex-end}.project-index{margin-top:100px;width:76%}.case-data{grid-template-columns:1fr 1fr;gap:22px 16px}.case-context{margin-top:38px}.case-role{margin-top:30px}.case-visit{margin-top:30px;padding-top:0}}
@media(max-width:1000px){.about-layout,.contact-layout{margin-left:0;gap:6%}.page-heading{margin-left:0}.case-layout{grid-template-columns:35% 1fr}.case-more{margin-left:37.2%}.project-index{margin-left:0;width:100%;max-width:none}.index-note{margin-left:0}}
@media(max-width:760px){.index-header{grid-template-columns:1fr 1fr;gap:23.8px 18.7px}.index-nav{justify-content:flex-start;gap:4px 20px;margin-top:0}.index-nav a,.site-header>a:not(.identity),.case-top-nav a,.case-bottom a{min-height:44px;display:inline-flex;align-items:center}.index-header h2{margin-bottom:12px}.index-header .index-identity{grid-column:1/-1}.index-nav{grid-row:2}.identity-caption{max-width:32ch}.project-index{margin-top:50px;font-size:13px}.project-index th{font-size:11px}.project-index th:first-child,.project-index td:first-child{display:none}.project-index th:nth-child(2){width:35%}.project-index th:nth-child(3){width:45%}.project-index th:last-child{width:20%}.project-index td{padding-bottom:20px}.index-note{font-size:13px}.case-top{align-items:baseline;flex-wrap:wrap;gap:12px}.case-top-nav{gap:18px;font-size:12px;flex-wrap:wrap;margin-top:0}.case-top-nav span{display:none}.case-status{margin-top:20px}.case-layout{grid-template-columns:1fr;margin-top:32px}.case-data{grid-template-columns:1fr 1fr 1fr;gap:24px 12px}.case-data,html[lang=ru] .case-data{font-size:12px}.case-more{margin-left:0}.case-context p{font-size:14px}.case-cover{width:100%}.case-bottom{gap:4px 24px}.site-header{gap:0 20px}.site-header .identity{padding-bottom:12px}.page-heading{padding:45px 0 30px}.about-layout,.contact-layout{grid-template-columns:1fr;margin-left:0;gap:35px}.services small{max-width:60%}.language-link{margin-left:0}.catalogue-grid{margin-top:50px}}
@media(prefers-reduced-motion:no-preference){.motion-enabled a{transition:color 160ms ease-out,text-decoration-color 160ms ease-out}.motion-enabled .project-index tbody tr{transition:background-color 160ms ease-out}}
@media(max-width:760px){.index-header{position:relative}.index-identity h1{padding-right:45px}.index-nav{font-size:12px;gap:4px 14px}.index-nav .language-link{position:absolute;top:-8px;right:0}.project-index{table-layout:fixed}.project-index td{overflow-wrap:break-word}.case-layout>.case-cover{grid-row:1}.case-data,html[lang=ru] .case-data{font-size:13px}}
@media(max-width:360px){.index-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:0}.index-nav .language-link{display:inline-flex}}

/* Motion stays optional; content is visible even without animation support. */
.catalogue-grid figure>a{display:block;overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .motion-enabled .project-index,.motion-enabled .page-heading{animation:page-arrive 480ms cubic-bezier(.16,1,.3,1) both}
  .motion-enabled .case-cover,.motion-enabled .catalogue-grid figure>a{animation:cover-arrive 700ms cubic-bezier(.16,1,.3,1) both}
  .motion-enabled .catalogue-grid figure:nth-child(2)>a{animation-delay:80ms}
  .motion-enabled .catalogue-grid img{transition:transform 450ms cubic-bezier(.16,1,.3,1)}
  .motion-enabled .project-index a{transition:color 160ms ease-out,transform 240ms cubic-bezier(.16,1,.3,1)}
  .motion-enabled .catalogue-grid a:focus-visible img{transform:scale(1.015)}
  @media(hover:hover){
    .motion-enabled .catalogue-grid figure>a:hover img{transform:scale(1.015)}
    .motion-enabled .project-index a:hover{transform:translateX(3px)}
  }
}
@keyframes page-arrive{from{opacity:.65;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes cover-arrive{from{opacity:.7;clip-path:inset(1.2%)}to{opacity:1;clip-path:inset(0)}}

/* Project collection: a compact, navigable database view. */
.project-database{margin:clamp(100px,10vw,190px) 0 0 24%;width:62%;max-width:1120px}
.project-database .project-index{width:100%;margin:0;border-top:1px solid var(--pf-ink);border-bottom:1px solid var(--pf-line)}
.database-bar{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid var(--pf-line);padding:0 0 15px;color:var(--pf-muted);font-size:13px}
.database-label{color:var(--pf-ink);margin-right:8px;text-transform:uppercase;font-size:11px;letter-spacing:.02em}
.database-controls{display:flex;align-items:baseline;gap:8px}.database-controls button{border:0;border-bottom:1px solid transparent;padding:0;background:transparent;color:var(--pf-muted);font:inherit;cursor:pointer}.database-controls button:hover,.database-controls button[aria-pressed=true]{color:var(--pf-ink);border-bottom-color:currentColor}.database-controls button:focus-visible{outline:2px solid var(--pf-blue);outline-offset:4px}
.project-database .project-index th{padding:13px 12px 12px 0;border-bottom:1px solid var(--pf-line);font-size:11px;color:var(--pf-muted)}
.project-database .project-index td{padding:14px 12px 14px 0;border-bottom:1px solid var(--pf-line)}
.project-database .project-index tr:last-child td{border-bottom:0}.project-database .project-index th:nth-child(1){width:8%}.project-database .project-index th:nth-child(2){width:26%}.project-database .project-index th:nth-child(3){width:31%}.project-database .project-index th:nth-child(4){width:21%}.project-database .project-index th:nth-child(5){width:14%}
.record-status{display:inline-flex;align-items:center;gap:6px;color:var(--pf-muted);font-size:12px}.record-status::before{content:"";width:5px;height:5px;border:1px solid currentColor;border-radius:50%}.record-status.is-live{color:var(--pf-ink)}.record-status.is-live::before{background:var(--pf-ink)}.record-status.is-concept{color:var(--pf-blue)}.record-status.is-concept::before{background:var(--pf-blue);border-color:var(--pf-blue)}
.project-database .unavailable td:nth-child(4){text-decoration:none}
.project-database .index-note{margin:15px 0 0}.project-index tr[hidden]{display:none}
@media(max-width:1000px){.project-database{margin-left:0;width:100%;max-width:none}.project-database .project-index{margin-left:0}}
@media(max-width:760px){.project-database{margin-top:50px}.database-bar{align-items:flex-start;flex-direction:column;gap:9px}.database-controls{flex-wrap:wrap;gap:8px 14px}.database-count{display:none}.project-database .project-index{table-layout:fixed;font-size:13px}.project-database .project-index th:nth-child(1),.project-database .project-index td:nth-child(1),.project-database .project-index th:nth-child(4),.project-database .project-index td:nth-child(4){display:none}.project-database .project-index th:nth-child(2){width:38%}.project-database .project-index th:nth-child(3){width:44%}.project-database .project-index th:nth-child(5){width:18%}.project-database .project-index td{padding:13px 7px 13px 0}}

/* Shared navigation keeps the same order and geometry on every portfolio page. */
html{scrollbar-gutter:stable}
.site-header.stable-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0;margin-top:0;padding:27px 0}
.stable-header .identity{margin:0;padding:0;white-space:nowrap}
.primary-nav{display:grid;grid-template-columns:repeat(3,auto) 44px;gap:48px;align-items:center;position:relative}
.primary-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;font-size:14px;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.primary-nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.primary-nav .language-link{position:static;margin:0;justify-content:flex-end;padding-right:0}
.index-page>.stable-header,.case-page>.stable-header{width:100%;padding:0;margin-bottom:40px}
.index-header .identity-note{margin-top:0}
/* Геометрия ниже не зависит от класса motion-enabled: без скриптов и при
   выключенных анимациях раскладка должна совпадать. */
.practice-item{display:block}
.case-page>.case-top{margin-top:0}
@media(max-width:760px){
  .site-header.stable-header{grid-template-columns:1fr;gap:12px;position:relative;padding:20px 0}
  .index-page>.stable-header,.case-page>.stable-header{padding:0;margin-bottom:32px}
  .stable-header .identity{display:flex;align-items:center;height:44px;padding:0 52px 0 0;font-size:14px}
  .primary-nav{grid-template-columns:repeat(3,max-content);justify-content:start;gap:0 24px;width:100%}
  .primary-nav a{min-width:0;min-height:44px;padding:0;font-size:11px}
  .primary-nav .language-link{position:absolute;right:0;top:20px;width:44px;height:44px}
  .index-page>.stable-header .language-link,.case-page>.stable-header .language-link{top:0}
}

/* Optional microinteractions. They are enabled by motion.js and never affect layout. */

.motion-enabled .primary-nav a{transition:color var(--motion-fast) ease}
.motion-enabled .practice-item{transition:opacity var(--motion-medium) var(--ease-out),transform var(--motion-medium) var(--ease-out)}
.motion-enabled .practice-list:has(.practice-item:hover) .practice-item:not(:hover){opacity:var(--muted-opacity)}
.motion-enabled .practice-item:hover{transform:translateX(4px)}
.motion-enabled .project-index tbody:has(tr.preview-active) tr:not(.preview-active){opacity:.55}
.motion-enabled .project-index tbody tr{transition:opacity var(--motion-fast) ease,background-color var(--motion-fast) ease}
.motion-enabled .project-index tr.preview-active a{transform:translateX(3px)}
.project-preview{position:fixed;left:0;top:0;z-index:20;width:min(260px,calc(100vw - 32px));pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(-999px,-999px,0) scale(.97);will-change:transform,opacity;transition:opacity var(--motion-medium) var(--ease-out),visibility 0s linear var(--motion-medium)}
.project-preview.is-visible{opacity:1;visibility:visible;transition:opacity var(--motion-medium) var(--ease-out)}
.project-preview-page{padding:10px;background:var(--pf-paper);border:1px solid var(--pf-line);box-shadow:0 8px 30px rgba(0,0,0,.06)}
.project-preview-label{margin:0 0 9px;font-size:10px;line-height:1.25;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-preview-image{width:100%;aspect-ratio:4/3;max-height:min(52vh,360px);object-fit:cover;background:var(--pf-soft)}
.language-leaving #main{opacity:0;transform:translateY(-2px);transition:opacity 120ms ease,transform 120ms ease}
@media(max-width:760px){.project-preview{display:none}.motion-enabled .practice-item:hover{transform:none}.motion-enabled .project-index tbody:has(tr.preview-active) tr:not(.preview-active){opacity:1}}
@media(prefers-reduced-motion:reduce){.motion-enabled *{scroll-behavior:auto!important}.project-preview{display:none!important}.motion-enabled .practice-item:hover,.motion-enabled .project-index tr.preview-active a{transform:none}}

/* [M1] Проявка с расфокусом. Переопределяет page-arrive и cover-arrive выше.
   Приём взят с bestdesignsonx.com: движение плюс уход блюра в ноль читается
   как проявка, а не как сдвиг. Амплитуда уменьшена под типографику 15px. */
@keyframes page-arrive{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes cover-arrive{from{opacity:0;clip-path:inset(1.2%);filter:blur(8px)}to{opacity:1;clip-path:inset(0);filter:blur(0)}}
/* [/M1] */

/* [M2] Каскад появления. Задержка приходит из motion.js через --reveal-delay,
   как на bestdesignsonx.com. Заодно даёт главной странице появление, которого
   у неё не было: page-arrive висел только на .page-heading и мёртвом .project-index. */
@media(prefers-reduced-motion:no-preference){
  .motion-enabled .index-header section,
  .motion-enabled .case-data>div,
  .motion-enabled .case-more figure{animation:page-arrive 480ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0s) both}
  .motion-enabled .catalogue-grid figure>a{animation:cover-arrive 700ms cubic-bezier(.16,1,.3,1) var(--reveal-delay,0s) both}
  .motion-enabled .catalogue-grid figure:nth-child(2)>a{animation-delay:var(--reveal-delay,0s)}
}
/* [/M2] */

/* [M3] Деградация вместо отключения при prefers-reduced-motion.
   Было: motion.js не вешал .motion-enabled под reduce, поэтому блок выше был
   недостижим, а сплошное animation-duration:1ms!important всё равно задавило бы
   любую замену. Теперь класс вешается всегда, а под reduce движение и блюр
   заменяются чистым проявлением 250ms - как на bestdesignsonx.com. */
@keyframes arrive-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .motion-enabled .page-heading,
  .motion-enabled .index-header section,
  .motion-enabled .case-data>div,
  .motion-enabled .case-more figure,
  .motion-enabled .catalogue-grid figure>a,
  .motion-enabled .case-cover{animation:arrive-fade 250ms ease-out var(--reveal-delay,0s) both}
  .motion-enabled a{transition:color 160ms ease-out}
  .motion-enabled .catalogue-grid figure>a:hover img{transform:none}
}
/* [/M3] */

/* [M6] Скелетон обложек (приём skeleton с bestdesignsonx.com). Пульсирующая
   точка статуса была здесь же, но откачена по просьбе владельца. */
@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.5}}
.motion-enabled .catalogue-grid figure>a{position:relative}
.motion-enabled .catalogue-grid figure>a::before{content:"";position:absolute;inset:0;z-index:0;background:var(--pf-soft)}
.motion-enabled .catalogue-grid figure>a.is-loaded::before{display:none}
.motion-enabled .catalogue-grid figure>a img{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
  .motion-enabled .catalogue-grid figure>a:not(.is-loaded)::before{animation:skeleton-pulse 1.5s ease-in-out infinite}
}
/* [/M6] */

/* На телефоне работа идёт сразу после короткого представления, а списки практики
   опускаются под неё. Порядок задаётся только раскладкой: разметка и десктоп
   не меняются. display:contents распускает шапку главной, чтобы её блоки стали
   элементами сетки страницы и получили собственный порядок. */
@media(max-width:760px){
  .index-page{display:grid;grid-template-columns:1fr 1fr;column-gap:18.7px;row-gap:23.8px;align-content:start}
  .index-page>.stable-header{order:0;grid-column:1/-1}
  .index-page>.index-header{display:contents}
  .index-page .index-identity{order:1;grid-column:1/-1}
  .index-page>main{order:2;grid-column:1/-1}
  .index-page .index-header>section:not(.index-identity){order:3}
  .index-page .identity-caption{margin-top:20px}
}

/* «Обо мне»: левая колонка вдвое короче правой, из-за чего внизу оставалось
   641 px пустоты. Колонка прижимается к началу и следует за прокруткой, пока
   читается правая. Порядок чтения и разметка не меняются, на узких экранах
   колонки по-прежнему идут друг за другом. */
@media(min-width:761px){
  .about-layout>div:first-child{position:sticky;top:27px;align-self:start}
}

/* Три уровня вместо одного: вводная фраза крупнее основного текста, основной
   текст без изменений, служебные подписи мельче — они уже заданы выше. */
.index-page .identity-caption{font-size:19px;line-height:1.35;color:var(--pf-ink);max-width:24ch}
@media(max-width:760px){
  .index-page .identity-caption{font-size:22px;line-height:1.3;max-width:26ch}
}