/* Общее для всех страниц сайта: шрифты, переменные, сброс.
   Единственный источник истины - раньше это было продублировано на каждой
   странице и уже начало расходиться, а policy.html вовсе тянул шрифты с
   серверов Google.

   Пути к шрифтам абсолютные: страницы бывают вложенными, а файл один.
   Всё, что дальше общего, остаётся внутри своей страницы. */

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrainsmono-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jetbrainsmono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrainsmono-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrainsmono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Onest';font-style:normal;font-weight:200 500;font-display:swap;src:url(/assets/fonts/onest-200-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Onest';font-style:normal;font-weight:200 500;font-display:swap;src:url(/assets/fonts/onest-200-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#0B0C0E; --soft:#6E727A; --paper:#FAFAFB; --line:#ECEDEF;
  --c1:#3F7CAC; /* сайты   · λ ~480 нм */
  --c2:#3AA17E; /* по      · λ ~520 нм */
  --c3:#F3A712; /* медиа   · λ ~590 нм */
  --c4:#E4572E; /* креатив · λ ~610 нм */
  --c5:#7B4B94; /* музыка  · λ ~410 нм */
  --sans:"Onest",sans-serif; --mono:"JetBrains Mono",monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);

  /* «Тёмная комната»: тёмные секции-паузы на светлых страницах.
     Яркие b-варианты спектра - только на тёмном фоне, штатные --c1..--c5
     глохнут на --night (особенно синий и фиолетовый). */
  --night:#111318; --night-2:#181B21; --night-ink:#F2F3F5;
  --night-soft:#9BA1AB; --night-line:rgba(242,243,245,.14);
  --c1b:#6FA8D8; --c2b:#56C29A; --c3b:#F6B83D; --c4b:#F0764F; --c5b:#A97BC4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}

/* Спектральный знак. Раньше этот градиент был записан дословно и в index.html,
   и в roliki.html: правка в одном месте молча не доезжала до другого. */
:root{
  --spectrum:conic-gradient(from 0deg,#0047FF,#00D1FF,#00E5C0,#7CFF3D,#FFD60A,#FF9500,#FF2D6F,#7C4DFF,#0047FF);
  --text:#33363C;   /* основной текст документов - светлее чернил заголовка */
  --wash:#F5F6F8;   /* подложка под кадром, пока он не загрузился */
  /* Небо над живой линией героя: основная масса - серебристо-холодная,
     цвета направлений идут вкраплениями. Позиции стоп продублированы в
     сценарии холста на главной (createLinearGradient) - менять только парой.
     Градиент горизонтальный намеренно: цвет не зависит от высоты, поэтому
     стык CSS-части и заливки холста не может дать шва. */
  --sky1:rgba(63,124,172,.12);   /* c1 · голубой край */
  --sky2:rgba(126,138,152,.085); /* серебро */
  --sky3:rgba(58,161,126,.075);  /* c2 · зелёное вкрапление */
  --sky4:rgba(126,138,152,.08);  /* серебро */
  --sky5:rgba(243,167,18,.075);  /* c3 · янтарное вкрапление */
  --sky6:rgba(126,138,152,.085); /* серебро */
  --sky7:rgba(123,75,148,.11);   /* c5 · фиолетовый край */
  --sky-g:linear-gradient(90deg,var(--sky1),var(--sky2) 18%,var(--sky3) 38%,var(--sky4) 55%,var(--sky5) 72%,var(--sky6) 86%,var(--sky7));
}

/* ======================================================================
   ОБЩИЙ СЛОЙ СТРАНИЦ (заведён 21.08.2026)

   До этого 757 строк стилей главной жили внутри самого index.html, а здесь
   лежали только шрифты и цвета. Пока страница была одна, это сходило с рук;
   с тремя страницами такой порядок разъезжается в первую же неделю - ровно
   это уже случилось на принципново.рф, где один шаблон молча тянул чужой
   шрифт с серверов Google.

   Здесь живёт то, что обязано выглядеть одинаково везде: шкала кеглей,
   шапка, кнопки, строка работы с превью, тёмная секция, подвал.
   Всё, что дальше общего, остаётся внутри своей страницы.
   ====================================================================== */

/* ---------- шкала кеглей ----------
   Замер 21.08: все заголовки секций на главной были 57px весом 350 - десять
   штук подряд, одинаково громких. Перепад между уровнями нулевой, поэтому
   страница читалась одним нерасчленённым потоком: глазу не за что зацепиться
   и нечего выбрать. У разобранных студийных сайтов перепад между витринным
   заголовком и заголовком секции трёхкратный (95px против 28px у trionn).

   Логика перевёрнута: раньше чем крупнее, тем легче (250-350 у самого
   большого) - и всё расплывалось в дымку. Теперь кегль падает, а вес растёт.
   Огромное тонкое, среднее обычное, мелкое плотное. */
:root{
  --fs-hero:clamp(3rem,2rem + 5.5vw,7rem);      /* первый экран, вес 250 */
  --fs-page:clamp(2.4rem,1.8rem + 2.2vw,3.25rem); /* заголовок страницы, один на страницу */
  --fs-sec:clamp(1.75rem,1.4rem + 1.1vw,2.5rem);  /* заголовок секции */
  --fs-sub:clamp(1.25rem,1.1rem + .45vw,1.5rem);  /* название работы, вопрос */
  --fs-body:clamp(1rem,.97rem + .12vw,1.09rem);   /* текст */
  --fs-meta:.75rem;                                /* служебная подпись, моно */
}

/* Отбивка держит иерархию не хуже кегля: перед заголовком воздуха вдвое
   больше, чем после него. Тогда заголовок прилипает к своему содержимому,
   а не висит посередине между двумя блоками, одинаково далеко от обоих. */
.h-page{margin:0 0 1.4rem;font-size:var(--fs-page);font-weight:350;
  letter-spacing:-.03em;line-height:1.06;color:var(--ink);text-wrap:balance}
.h-sec{margin:0 0 1.1rem;font-size:var(--fs-sec);font-weight:450;
  letter-spacing:-.025em;line-height:1.14;color:var(--ink);text-wrap:balance}
.h-sub{margin:0 0 .5rem;font-size:var(--fs-sub);font-weight:500;
  letter-spacing:-.015em;line-height:1.2;color:var(--ink)}

/* Ярлык секции вместо большого заголовка - там, где смысл несёт содержимое,
   а не название блока. Приём cinetica.studio: мелкая навигационная метка
   в скобках, а вес разговора остаётся у самого содержимого. */
.label{font:500 var(--fs-meta)/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);display:inline-flex;
  align-items:center;gap:.5rem}
.label::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;opacity:.55}

/* Ширина колонки: 60-70 знаков в строке. Без потолка текст на широком экране
   растягивается на всю ширину и перестаёт читаться - глаз теряет начало
   следующей строки. */
.measure{max-width:64ch}

/* ---------- шапка ----------
   Одна и та же на всех страницах. До этого на raboty.html вместо навигации
   стояла одинокая стрелка «назад»: пришедший из поиска прямо на работы не
   видел, что на сайте есть ещё что-то. */
.top{position:fixed;left:0;right:0;top:0;display:flex;align-items:center;gap:1.8rem;
  padding:1.7rem 2rem;font:500 .72rem/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--soft);z-index:5;
  background:color-mix(in oklab,var(--paper) 78%,transparent);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4)}
.top b{color:var(--ink);font-weight:500}
.top nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.top nav a{color:inherit;text-decoration:none;
  transition:color .16s var(--ease),text-shadow .16s var(--ease)}
/* Преломление: у ссылки на просвет появляются цветные кромки, как у стекла.
   Приём с первого экрана, здесь он же держит связь страниц. */
.top nav a:hover{color:var(--ink);
  text-shadow:-1px 0 0 color-mix(in oklab,var(--c1) 55%,transparent),
               1px 0 0 color-mix(in oklab,var(--c4) 55%,transparent)}
.top nav a[aria-current="page"]{color:var(--ink)}
.top .spacer{margin-left:auto}

/* ---------- кнопки ---------- */
.btn-lead{font:500 .95rem/1 var(--sans);letter-spacing:.01em;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink);border-radius:2px;
  padding:1.05rem 2.1rem;cursor:pointer;position:relative;overflow:hidden;
  text-decoration:none;display:inline-block;transition:box-shadow .5s var(--ease)}
.btn-lead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3),var(--c5));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.btn-lead:hover{box-shadow:0 10px 26px color-mix(in oklab,var(--c1) 18%,transparent)}
.btn-lead:hover::after{transform:scaleX(1)}
.btn-lead.solid{background:var(--ink);color:var(--paper);border-radius:3rem;
  border-color:var(--ink);font-size:1.05rem;padding:1.15rem 2.6rem}
.btn-lead.solid::after{height:3px}
.btn-lead.solid:hover{box-shadow:0 14px 34px color-mix(in oklab,var(--c1) 30%,transparent)}
.btn-lead>i{position:relative;z-index:1;font-style:normal}

/* Ссылка вглубь со счётчиком: «Все работы [25]». Число обещает глубину,
   почти не занимая места - приём ref.digital. Пустая ссылка «смотреть ещё»
   такого обещания не даёт: непонятно, ещё три там или тридцать. */
.deeper{display:inline-flex;align-items:baseline;gap:.6rem;text-decoration:none;
  color:var(--ink);font:500 1rem/1 var(--sans);
  border-bottom:1px solid color-mix(in oklab,var(--ink) 25%,transparent);
  padding-bottom:.35rem;transition:gap .35s var(--ease),border-color .35s var(--ease)}
.deeper:hover{gap:1rem;border-color:var(--ink)}
.deeper .num{font:500 var(--fs-meta)/1 var(--mono);color:var(--soft);
  letter-spacing:.1em}

/* ---------- строка работы с превью ----------
   Каркас переехал сюда с главной: теперь он нужен и на странице работ.
   Плотность поднята - 25 строк занимали 3,1 экрана при высоте строки около
   90px. У silentpartnersstudio.com сотня работ укладывается в два экрана
   строками по 45-50px, и каждая несёт три поля вместо одного. */
.row{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:1.2rem;
  align-items:baseline;isolation:isolate;position:relative;
  padding:.85rem 0 .8rem;border-top:1px solid var(--line);
  text-decoration:none;color:inherit}
/* minmax(0,1fr), не голый 1fr: у grid-колонки без явного минимума он равен
   min-content, и длинное название не давало средней колонке сжаться - строка
   вылезала за экран, а следом за ней и вся страница. */
.row .n{font:400 var(--fs-meta)/1.9 var(--mono);color:var(--soft);opacity:.55;
  transition:opacity .4s var(--ease)}
.row .name{display:inline-block;font-size:var(--fs-sub);font-weight:500;
  letter-spacing:-.02em;line-height:1.16;transition:translate .5s var(--ease),opacity .45s var(--ease)}
.row:hover .name{translate:.2em 0}
/* Описание в покое - одна строка. Замер после первой сборки: с описанием в
   три строки строка выросла до 113px, и весь указатель занял два экрана -
   ровно та беда, от которой уходили. Полный текст раскрывается при наведении,
   вместе со снимком: читателю, который остановился на строке, он и нужен. */
.row .what{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--soft);font-size:.95rem;font-weight:400;
  margin-top:.15rem;max-width:56ch;transition:opacity .12s var(--ease)}
.row:hover .what{-webkit-line-clamp:3}
.row .tag{font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--soft);white-space:nowrap;opacity:.6;transition:opacity .4s var(--ease)}
.row:hover .n,.row:hover .tag{opacity:1}
/* Соседние строки отступают - наведённая читается выделенной из ряда. */
.index-list:has(.row:hover) .row:not(:hover) .name{opacity:.45}
.index-list:has(.row:hover) .row:not(:hover) .what{opacity:.35}
.row::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.row:hover::before{transform:scaleY(1)}
.row::after{content:"";position:absolute;inset:-1px 0 0;z-index:-1;
  opacity:0;transition:opacity .5s var(--ease)}
.row:hover::after{opacity:1}
.row.s1::before{background:var(--c1)} .row.s2::before{background:var(--c2)}
.row.s3::before{background:var(--c3)} .row.s4::before{background:var(--c4)}
.row.s5::before{background:var(--c5)}
.row.s1::after{background:linear-gradient(90deg,color-mix(in oklab,var(--c1) 15%,transparent),transparent 72%)}
.row.s2::after{background:linear-gradient(90deg,color-mix(in oklab,var(--c2) 15%,transparent),transparent 72%)}
.row.s3::after{background:linear-gradient(90deg,color-mix(in oklab,var(--c3) 17%,transparent),transparent 72%)}
.row.s4::after{background:linear-gradient(90deg,color-mix(in oklab,var(--c4) 15%,transparent),transparent 72%)}
.row.s5::after{background:linear-gradient(90deg,color-mix(in oklab,var(--c5) 15%,transparent),transparent 72%)}
.row.s1:hover .tag{color:var(--c1)} .row.s2:hover .tag{color:var(--c2)}
.row.s3:hover .tag{color:var(--c3)} .row.s4:hover .tag{color:var(--c4)}
.row.s5:hover .tag{color:var(--c5)}

/* Превью работы идёт за курсором. */
.peek{position:fixed;left:0;top:0;z-index:20;pointer-events:none;width:min(30rem,38vw);
  aspect-ratio:16/10;border-radius:2px;overflow:hidden;background:#fff;
  box-shadow:0 0 1px rgba(11,12,14,.4),0 2px 8px rgba(11,12,14,.06),
             0 18px 44px color-mix(in oklab,var(--c1) 22%,transparent);
  opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity .4s var(--ease),transform .5s var(--ease),
             aspect-ratio .4s var(--ease),width .4s var(--ease)}
/* Паспарту: тонкая внутренняя рамка, как у фото в раме. */
.peek::after{content:"";position:absolute;inset:7px;z-index:2;pointer-events:none;
  border:1px solid rgba(255,255,255,.4)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img,.peek video{width:100%;height:100%;object-fit:cover;object-position:top center;
  display:block;position:absolute;inset:0;opacity:0;transition:opacity .35s var(--ease)}
.peek.kind-site img{opacity:1}
.peek.kind-video video{opacity:1;object-fit:contain;object-position:center;background:#0b0c0e}
.peek.tall{width:min(17rem,22vw);aspect-ratio:9/16}
.peek .cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .9rem;
  font:500 .68rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:linear-gradient(0deg,rgba(11,12,14,.72),transparent)}
/* 🔴 На сенсорных экранах наведения нет, и превью не показывалось вовсе -
   замер 21.08: ниже первого экрана телефон не получал НИ ОДНОЙ картинки на
   20 экранов прокрутки. Поэтому там строки не остаются голыми: страница
   работ подменяет их сеткой карточек (.cards ниже), где снимок виден всегда.
   Проектировать витрину только под мышь - типовая ошибка, названная всеми
   тремя разборами. */
@media (hover:none),(max-width:820px){.peek{display:none}}

/* ---------- карточка работы (сенсорные экраны и витрина избранного) ---------- */
.cards{display:grid;gap:clamp(1rem,2vw,1.6rem)}
.card{position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:2px;overflow:hidden;background:var(--wash);
  box-shadow:0 0 1px rgba(11,12,14,.35),0 2px 10px rgba(11,12,14,.05);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:top center;aspect-ratio:16/10;
  transition:transform .7s var(--ease)}
.card:hover .shot{transform:translateY(-3px);
  box-shadow:0 0 1px rgba(11,12,14,.4),0 18px 40px rgba(11,12,14,.16)}
.card .frame{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover img{transform:scale(1.03)}
/* Подпись всегда видна, а не только при наведении: имя работы - это то,
   ради чего карточку разглядывают.

   🔴 Подпись ЛЕЖИТ ПОД КАДРОМ, а не поверх него. Первая сборка клала её на
   снимок с затемнением - и оказалось, что у нас особый случай: мы снимаем
   сайты, а у них внутри кадра свой крупный заголовок. «Зелёные крыши» и
   «Тёмная студия» получили две надписи одна на другой, а на светлом кадре
   питомника белый текст пропал совсем. Затемнять сильнее означало гасить
   саму работу, которую показываем. Поэтому подпись вынесена вниз: кадр
   остаётся кадром, подпись подписью. */
.card{background:transparent;box-shadow:none;border-radius:0}
/* Имя .frame, а не .shot: класс .shot на главной уже занят кадрами ленты
   первого экрана, и у него задана жёсткая ширина min(22rem,64vw) - кадр
   внутри карточки молча получал её вместо ширины карточки. */
.card .frame{display:block;position:relative;overflow:hidden;border-radius:2px;
  background:var(--wash);
  box-shadow:0 0 1px rgba(11,12,14,.35),0 2px 10px rgba(11,12,14,.05)}
.card:hover{box-shadow:none}
.card .cap{display:block;padding:.9rem .1rem 0}
.card .cap b{display:block;font:500 var(--fs-sub)/1.25 var(--sans);letter-spacing:-.015em;
  color:var(--ink);overflow-wrap:anywhere}
.card .cap span{display:block;margin-top:.25rem;font-size:.95rem;color:var(--soft)}
.card .cap em{display:block;margin-top:.5rem;font:500 .66rem/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;font-style:normal;color:var(--soft)}

/* ---------- тёмная секция ----------
   Тёмное берём вставками, не половиной сайта: за прайсом и вопросами оно
   вредит - там сравнивают цифры и быстро читают. Уместно вокруг работ и
   перед формой.

   Шов между светлым и тёмным - отдельная забота. Резкая граница читается
   как «здесь начинается другой сайт», поэтому переход тянем на 140px, а сама
   тёмная секция продолжает тот же цвет, а не начинается новым прямоугольником.
   Текст и картинки в сам переход не кладём. */
.dark{position:relative;background:var(--night);color:var(--night-ink);
  --ink:var(--night-ink);--soft:var(--night-soft);--line:var(--night-line)}
.dark::before{content:"";position:absolute;left:0;right:0;top:-140px;height:140px;
  background:linear-gradient(180deg,transparent,var(--night));pointer-events:none}
/* Мягкое свечение фирменного цвета вместо плоской заливки: 12% - на грани
   различимости, ровно как задумано. Радуга, блики и отдельный градиент на
   каждой карточке запрещены - это первый признак дешёвой страницы. */
.dark::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70rem 40rem at 12% -10%,color-mix(in oklab,var(--c1b) 12%,transparent),transparent 70%),
    radial-gradient(60rem 38rem at 88% 108%,color-mix(in oklab,var(--c5b) 10%,transparent),transparent 72%)}
.dark>*{position:relative;z-index:1}
/* Текст на тёмном не бывает весом 350: тонкое начертание на чёрном теряет
   штрихи и читается серым по серому даже при формально достаточном контрасте. */
.dark .h-sec,.dark .h-page{font-weight:500;color:var(--night-ink)}
.dark p,.dark li{font-weight:400}
.dark .btn-lead{background:transparent;color:var(--night-ink);border-color:rgba(242,243,245,.5)}
.dark .btn-lead.solid{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.dark .deeper{color:var(--night-ink);border-color:rgba(242,243,245,.35)}
.dark .deeper:hover{border-color:var(--night-ink)}

/* ---------- подвал ----------
   Тёмный финальный аккорд: прокрутка ощутимо заканчивается, а не обрывается.
   Раньше подпись в подвале была 68,8px - крупнее любого заголовка страницы,
   то есть самым громким на сайте оказывался служебный текст. */
.foot{padding:clamp(56px,7vw,84px) 2rem clamp(28px,4vw,40px);
  font:400 .95rem/1.6 var(--sans)}
.foot .brand{font-size:var(--fs-page);font-weight:300;letter-spacing:-.03em;
  line-height:1;margin:0 0 1.6rem}
.foot .cols{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;
  align-items:flex-start;max-width:78rem;margin-inline:auto}
.foot a{color:inherit}
.foot .meta{font:400 var(--fs-meta)/1.8 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft)}
/* Логотипы заказчиков - строкой здесь, а не отдельным экраном: 245px высоты
   ради девяти названий, которые уже встречались в списке работ. */
.foot .clients{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;
  font:400 .8rem/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);max-width:44rem}

@media (prefers-reduced-motion:reduce){
  .card,.card img,.row .name,.peek{transition:none}
}