/* Стили страницы raboty/tamaos/index.html.

   Скелет кейса общий и отлажен — берём его целиком (raboty-milery.css),
   меняем только характер.

   У TAMAOS характер задан самим товаром: снорклинг, светлая прозрачная вода,
   оранжевый сигнальный буй дайвера. Поэтому страница светлая и холодная, а роль
   тёмного акцента играет цвет глубины из палитры самого сайта — #04222E.
   Оранжевый #FF5A24 оттуда же: он единственный тёплый цвет во всей системе,
   и на холодном фоне работает как метка «сюда смотреть».

   Бордо базового файла переопределяем, но имена переменных не трогаем —
   иначе пришлось бы переписывать весь импортированный файл. */

@import url('/css/pages/raboty-milery.css?v=20260731b');

:root{
  --paper:#EEF2F3;--paper2:#E4EAEC;--paper3:#D7E0E2;--white:#FBFCFC;
  --ink:#0E1B21;--ink64:#48606A;--ink32:#7D949C;--hair:#D2DCDF;

  /* «Бордо» становится глубиной, «палевое» — сигнальным оранжевым. */
  --bordo:#04222E;--bordo-deep:#011722;--bordo-pale:#FF5A24;--on-bordo:#DCEAEE;

  /* Те же шрифты, что на самом сайте TAMAOS: гротеск с характером в заголовках,
     нейтральный текстовый и моноширинный на цифрах. */
  --display:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}

/* Метки, номера и цифры — моноширинные: это язык характеристик и замеров,
   а кейс во многом про них. */
.lbl,.ctop .tag,.vs-minibar__tag,.kicker,.spec .sh,.shead .meta,
.fact__n,.browser__url,.shot__txt .num,.it .ix{
  font-family:var(--mono);
}

/* Заголовки на Onest тяжелее антиквы из базового файла — курсив в <em> там
   выглядел бы чужеродно, поэтому выделяем цветом и весом, а не наклоном. */
.title em{color:var(--bordo-pale);font-style:normal}
h2 em,.shot__txt h3 em{color:var(--bordo-pale);font-style:normal;font-weight:600}

/* Плашка статуса: проект ещё не запущен, и об этом должно быть сказано
   на самой странице, а не только в разговоре. */
.status{
  margin-top:26px;display:flex;gap:14px;align-items:flex-start;
  background:var(--white);border:1px solid var(--hair);
  border-left:3px solid var(--bordo-pale);
  padding:18px 22px;max-width:760px;
}
.status b{color:var(--ink);display:block;margin-bottom:4px}
.status p{margin:0;color:var(--ink64);font-size:15px;line-height:1.55}

@media(max-width:720px){
  .status{padding:16px 18px;margin-top:20px}
  .status p{font-size:14px}
}

/* ── Мобильная версия: три телефона вместо одного длинного скриншота ──────
   Полностраничный снимок мобильной версии — это полоса 420×2435. В рамке
   браузера, рассчитанной на горизонтальный кадр, она выглядит как обрывок
   обоев: детали нечитаемы, а блок растягивает страницу на два экрана.
   Показываем три коротких кадра телефонного формата — первый экран, каталог
   и доставку. Каждый снят так, чтобы в кадр не попала липкая шапка: при
   съёмке всей страницы она застывает посередине и читается как артефакт. */

.mob{margin-top:64px}
.mob__txt{max-width:640px}
.mob__txt .num{font-family:var(--mono);font-size:12px;color:var(--ink32);letter-spacing:.08em}
.mob__txt .lbl{margin-top:6px}
.mob__txt h3{margin:10px 0 14px;font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.2}
.mob__txt p{margin:0 0 10px;color:var(--ink64)}
.mob__txt p.small{font-size:14px;color:var(--ink32)}

.mob__row{
  margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:34px;align-items:start;max-width:900px;
}
.phone{margin:0}
.phone__scr{
  background:var(--ink);border-radius:26px;padding:8px;
  box-shadow:0 26px 54px -30px rgba(4,34,46,.55);
  transition:transform .25s ease;
}
.phone:hover .phone__scr{transform:translateY(-4px)}
.phone__scr img{
  display:block;width:100%;height:auto;border-radius:19px;
  background:var(--white);cursor:zoom-in;
}
.phone figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink32);text-align:center;
}

@media(max-width:900px){
  .mob__row{grid-template-columns:repeat(3,1fr);gap:16px}
  .phone__scr{border-radius:18px;padding:5px}
  .phone__scr img{border-radius:14px}
  .phone figcaption{font-size:10px;letter-spacing:.04em}
}
@media(max-width:560px){
  .mob__row{grid-template-columns:1fr 1fr;gap:18px;max-width:none}
  .mob__row .phone:last-child{grid-column:1 / -1;max-width:52%;margin:0 auto}
}