/* ============================================================
   Лида Полежаева — портфолио
   Направление: «Спецификация».
   Хром нейтральный и точный, цвет приходит из самих работ.

   Три голоса:
     Inter            — структура и текст
     Instrument Serif — ТОЛЬКО курсив, голос автора
     JetBrains Mono   — размеры, лейблы, аннотации
   ============================================================ */

:root{
  --graphite:#16181D;
  --slate:#5A6068;
  --mist:#C9CDD3;
  --sheet:#F2F3F5;
  --card:#FFFFFF;
  --line:rgba(22,24,29,.12);
  --line-soft:rgba(22,24,29,.07);
  /* #2F6BFF на светлом фоне даёт 4,1:1 - мелкий текст не проходит WCAG AA.
     Затемнён до 5,4:1. Белый на нём - 6,0:1. */
  --live:#2559D8;
  --live-soft:rgba(37,89,216,.10);

  --r:10px;
  --r-lg:18px;
  --maxw:1200px;
  --rail:96px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--sheet);
  color:var(--graphite);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{ overflow:hidden; }
::selection{ background:var(--live); color:#fff; }

h1,h2,h3,h4{
  margin:0;
  font-family:'Inter', system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.05;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
p{ margin:0; }

/* --- голос автора: курсив и только курсив --- */
.v{
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.005em;
}
h1 .v, h2 .v{ font-size:1.06em; line-height:0.98; }

/* запрет переноса: «e-commerce» рвался по дефису */
.nw{ white-space:nowrap; }

/* --- технический голос --- */
.m{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:11.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--slate);
}

:focus-visible{ outline:2px solid var(--live); outline-offset:3px; border-radius:3px; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--graphite); color:var(--sheet); padding:12px 20px;
  font-size:14px; font-weight:600;
}
.skip-link:focus{ left:0; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:36px; padding-right:36px; }
@media (max-width:700px){ .wrap{ padding-left:20px; padding-right:20px; } }

.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   ШАПКА
   ============================================================ */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(242,243,245,0); border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
header.solid{ background:rgba(242,243,245,.88); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px; }
.logo{ font-weight:800; font-size:16px; letter-spacing:-0.02em; }
.logo i{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:var(--live); }

nav.mainnav{ display:flex; align-items:center; gap:30px; margin-left:auto; }
nav.mainnav a{ font-size:14px; font-weight:500; color:var(--slate); }
nav.mainnav a:hover{ color:var(--graphite); }

/* переключатель разметки — подпись страницы */
.spec-toggle{
  display:inline-flex; align-items:center; gap:9px;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px 7px 12px; cursor:pointer; color:var(--slate);
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
  transition:border-color .25s ease, color .25s ease;
}
.spec-toggle:hover{ border-color:var(--live); color:var(--live); }
.spec-toggle .dot{ width:7px; height:7px; border-radius:50%; background:var(--mist); transition:background .25s ease; }
.spec-toggle[aria-pressed="true"]{ border-color:var(--live); color:var(--live); background:var(--live-soft); }
.spec-toggle[aria-pressed="true"] .dot{ background:var(--live); }

.burger{ display:none; width:42px; height:42px; padding:0; background:none; border:none; cursor:pointer; position:relative; }
.burger i{ position:absolute; left:10px; width:22px; height:2px; background:var(--graphite); transition:transform .3s ease, opacity .2s ease; }
.burger i:nth-child(1){ top:15px; } .burger i:nth-child(2){ top:21px; } .burger i:nth-child(3){ top:27px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:199; background:var(--sheet);
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:0 26px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.mobile-nav.open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav a{ font-size:30px; font-weight:800; letter-spacing:-0.03em; padding:15px 0; border-bottom:1px solid var(--line-soft); }
.mobile-nav a:last-child{ border-bottom:none; color:var(--live); }

@media (max-width:880px){
  nav.mainnav a, .header-inner .spec-toggle{ display:none; }
  .burger{ display:block; }
}

/* ============================================================
   РЕЛЬСА СЕКЦИЙ
   ============================================================ */
.railed{ display:grid; grid-template-columns:var(--rail) 1fr; gap:0; }
/* Дорожка 1fr по умолчанию не сжимается меньше содержимого: широкая таблица
   внутри распирала сетку и всю страницу. min-width:0 снимает это. */
.railed > *{ min-width:0; }
.rail{ padding-top:6px; }
.rail .m{ display:block; }
.rail .tick{ width:1px; height:44px; background:var(--line); margin:12px 0 0 3px; }
@media (max-width:880px){
  .railed{ grid-template-columns:1fr; }
  .rail{ margin-bottom:22px; }
  .rail .tick{ display:none; }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================ */
.hero{ padding-top:132px; padding-bottom:88px; }
.hero h1{ font-size:clamp(40px,7vw,88px); max-width:15ch; }
.hero-sub{ margin-top:30px; max-width:58ch; font-size:18px; color:var(--slate); }
.hero-sub p{ margin:0; }
.hero-sub p + p{ margin-top:10px; }
.hero-cta{ display:flex; gap:12px; margin-top:38px; flex-wrap:wrap; }

.btn{
  font-size:14.5px; font-weight:600; padding:14px 26px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px; border:1px solid var(--graphite);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--graphite); color:#fff; }
.btn-primary:hover{ background:var(--live); border-color:var(--live); }
.btn-ghost{ background:transparent; }
.btn-ghost:hover{ background:var(--graphite); color:#fff; }

.hero-strip{
  margin-top:84px; padding-top:30px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.hero-strip .stat b{ display:block; font-size:16px; font-weight:700; margin-bottom:7px; letter-spacing:-0.01em; }
.hero-strip .stat span{ display:block; font-size:13.5px; color:var(--slate); max-width:24ch; }

@media (max-width:820px){
  .hero{ padding-top:106px; padding-bottom:60px; }
  .hero-strip{ grid-template-columns:repeat(2,1fr); row-gap:26px; margin-top:56px; }
}
@media (max-width:480px){ .hero-strip{ grid-template-columns:1fr; } }

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.sec{ padding-top:88px; padding-bottom:88px; border-top:1px solid var(--line); }
.sec h2{ font-size:clamp(28px,3.6vw,44px); max-width:17ch; }
.sec-lead{ margin-top:20px; max-width:56ch; font-size:17px; color:var(--slate); }
@media (max-width:700px){ .sec{ padding-top:62px; padding-bottom:62px; } }

.about-text p{ font-size:17px; color:var(--slate); max-width:54ch; }
.about-text p + p{ margin-top:18px; }

.offer{ margin-top:56px; padding-top:32px; border-top:1px solid var(--line-soft); }
.offer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:24px; }
.offer-item h3{ font-size:17px; font-weight:700; margin-bottom:10px; }
.offer-item p{ font-size:14.5px; color:var(--slate); }
@media (max-width:900px){ .offer-grid{ grid-template-columns:repeat(2,1fr); gap:26px; } }
@media (max-width:560px){ .offer-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ПЛИТКА КЕЙСОВ
   ============================================================ */
.bento{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px;
  grid-auto-flow:dense; gap:14px; margin-top:38px;
}
.bc{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--card); border:1px solid var(--line-soft);
}
.bc-featured{ grid-column:span 2; grid-row:span 2; }
.bc-wide{ grid-column:span 2; }
.bc-tall{ grid-column:span 2; grid-row:span 2; }
.bc img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease;
}
.bc-ph{ position:absolute; inset:0; }
.bc::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,11,14,.82) 0%, rgba(10,11,14,.22) 46%, rgba(10,11,14,0) 70%);
}
.bc:hover img{ transform:scale(1.05); }

.bc-dir{
  position:absolute; top:14px; left:14px; z-index:2;
  font-size:11.5px; font-weight:600; color:var(--graphite);
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  padding:7px 13px; border-radius:999px;
}
/* Тип живёт внизу, рядом с названием: сверху он сталкивался
   с плашкой направления на узких карточках. */
.bc-kind{
  display:block; margin-bottom:7px;
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.bc-text{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; }
.bc-text h4{ font-size:20px; color:#fff; }
.bc-featured .bc-text h4, .bc-tall .bc-text h4{ font-size:25px; }
.bc-text p{ font-size:13px; margin-top:6px; color:rgba(255,255,255,.84); max-width:32ch; }

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:230px; }
  .bc, .bc-featured, .bc-wide, .bc-tall{ grid-column:span 1; grid-row:span 1; }
}
@media (max-width:520px){ .bento{ grid-template-columns:1fr; grid-auto-rows:250px; } }

/* ============================================================
   КЕЙС — живёт в попапе
   ============================================================ */
.bc{ cursor:pointer; }
.cases-store[hidden]{ display:none; }

.case-modal{ position:fixed; inset:0; z-index:220; display:none; }
.case-modal.open{ display:block; }
.case-modal-backdrop{ position:absolute; inset:0; background:rgba(12,13,16,.55); backdrop-filter:blur(4px); }
.case-modal-panel{
  position:relative; margin:40px auto; max-width:1040px; width:calc(100% - 48px);
  max-height:calc(100vh - 80px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--sheet); border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(12,13,16,.28);
  animation:panel-in .32s cubic-bezier(.2,.7,.2,1);
}
@keyframes panel-in{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .case-modal-panel{ animation:none; } }

.case-modal-close{
  position:sticky; top:16px; float:right; margin:16px 16px 0 0; z-index:3;
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--graphite); font-size:17px; cursor:pointer;
}
.case-modal-close:hover{ background:var(--graphite); color:#fff; border-color:var(--graphite); }

.case-full{ padding:44px 48px 48px; }
.case-full-head{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.case-title{ font-size:clamp(26px,3.4vw,42px); max-width:19ch; }

@media (max-width:900px){
  .case-modal-panel{ margin:0; width:100%; max-width:none; min-height:100vh; max-height:100vh; border-radius:0; }
  .case-full{ padding:20px 20px 44px; }
}
.case-tag{ margin-top:16px; max-width:46ch; font-size:21px; color:var(--slate); }
.swatches{ display:flex; gap:6px; margin-top:14px; }
.swatches i{ width:16px; height:16px; border-radius:50%; border:1px solid var(--line); }
.nda{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--live); background:var(--live-soft); padding:6px 12px; border-radius:999px;
}

.meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  margin:40px 0 42px; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.meta .label{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:7px; }
.meta .value{ font-size:15px; font-weight:600; }
.meta .value a{ border-bottom:1px solid var(--mist); }
.meta .value a:hover{ color:var(--live); border-bottom-color:var(--live); }
@media (max-width:720px){ .meta{ grid-template-columns:repeat(2,1fr); } }

.case-body{ display:grid; grid-template-columns:1fr 1fr; gap:52px; margin-bottom:48px; }
.case-body p{ font-size:16px; color:var(--slate); }
.case-body p + p{ margin-top:16px; }
.case-body strong{ color:var(--graphite); font-weight:600; }
@media (max-width:900px){ .case-body{ grid-template-columns:1fr; gap:20px; } }

.case-cta{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.case-cta span{ font-size:14px; color:var(--slate); max-width:34ch; }

/* галереи: работы показываются целиком, без обрезки */
.gallery{ display:grid; gap:14px; align-items:start; }
.g2{ grid-template-columns:1fr 1fr; }
.g3{ grid-template-columns:repeat(3,1fr); }
.g1-2{ grid-template-columns:1.3fr 1fr; }
.gallery figure{ margin:0; overflow:hidden; border-radius:var(--r); background:var(--card); border:1px solid var(--line-soft); }
.gallery img{ width:100%; height:auto; cursor:zoom-in; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery figure:hover img{ transform:scale(1.03); }
.gallery figcaption{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); padding:9px 12px 11px; }
.span-2{ grid-column:span 2; }
@media (max-width:700px){
  .g2,.g3,.g1-2{ grid-template-columns:1fr; }
  .span-2{ grid-column:span 1; }
}

/* видео: плеер грузится только по клику */
.video-embed{ position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:#0B0B0C; }
.video-embed iframe{ width:100%; aspect-ratio:9/16; border:0; display:block; }
.video-play{
  position:absolute; inset:0; width:100%; height:100%; border:none; cursor:pointer;
  background:rgba(10,11,14,.3); display:flex; align-items:center; justify-content:center;
  transition:background .3s ease;
}
.video-play:hover{ background:rgba(10,11,14,.46); }
.video-play::before{ content:''; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.95); }
.video-play::after{
  content:''; position:absolute; margin-left:5px;
  border-style:solid; border-width:12px 0 12px 19px;
  border-color:transparent transparent transparent var(--graphite);
}

/* ============================================================
   ЛАЙТБОКС
   ============================================================ */
.lightbox{ position:fixed; inset:0; z-index:250; display:none; background:rgba(12,13,16,.94); padding:30px; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; }
.lightbox-close{
  position:absolute; top:18px; right:22px; width:42px; height:42px;
  background:rgba(255,255,255,.14); border:none; border-radius:50%; color:#fff; font-size:20px; cursor:pointer;
}
.lightbox-close:hover{ background:rgba(255,255,255,.26); }

/* ============================================================
   КОНТАКТЫ И ПОДВАЛ
   ============================================================ */
.contact{ padding-top:104px; padding-bottom:104px; border-top:1px solid var(--line); }
.contact h2{ font-size:clamp(30px,5vw,60px); max-width:17ch; }
.contact-rows{ margin-top:44px; max-width:520px; }
.contact-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--line-soft); }
.contact-row:last-child{ border-bottom:none; }
.contact-row .k{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); }
.contact-row a{ font-size:18px; font-weight:600; }
.contact-row a:hover{ color:var(--live); }

footer{ border-top:1px solid var(--line); padding:28px 0; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--slate); }
.footer-inner a:hover{ color:var(--live); }

/* ============================================================
   ПОДПИСЬ СТРАНИЦЫ: слой разметки
   Сайт аннотирует сам себя — размеры считаются вживую.
   ============================================================ */
body.spec [data-spec]{ outline:1px dashed var(--live); outline-offset:3px; }
body.spec [data-spec]::before{
  content:attr(data-spec) ' ' attr(data-size);
  position:absolute; top:-3px; left:-3px; transform:translateY(-100%);
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.06em;
  background:var(--live); color:#fff; padding:2px 7px; border-radius:3px 3px 3px 0;
  white-space:nowrap; z-index:120; pointer-events:none;
}
body.spec [data-spec]{ position:relative; }
body.spec .bc[data-spec]::before{ z-index:5; }
@media (max-width:880px){
  body.spec [data-spec]::before{ font-size:8.5px; padding:1px 5px; }
}