/* Общее для улицы и страниц-досок (/kak-eto-rabotaet/, /kontakty/…, 2026-09-25, SEO фаза 2): переменные, кнопка, заявка, доска.
   Улица подключает этот файл до своего <style>; страницы-доски — только его. Пути относительно корня сайта. */
:root{
  --bg:#0c1226; --amber:#e0a04a; --amber-2:#f0b660; --text:#f2ede4; --head:var(--text); --ink:#1a1410; --btn-text:#1a1410;
  --panel:#141a33; --field:#0c1226;
  --font:"Golos Text","Segoe UI",Roboto,sans-serif; --pixel:"Press Start 2P",monospace;
}
:root[data-mode=day]{
  --bg:#bfe0f7; --amber:#954518; --amber-2:#b0561e; --text:#1a1410; --head:#4a2711; --btn-text:#f2ede4;
  --panel:#fff8eb; --field:#fff;
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font:400 17px/1.55 var(--font)}
a{color:inherit}

.btn{display:inline-block;padding:14px 20px;background:var(--amber);color:var(--btn-text);font:400 12px/1.4 var(--pixel);text-decoration:none;border:0;cursor:var(--hand);box-shadow:4px 4px 0 var(--ink)}
.btn:hover{background:var(--btn-text);color:var(--amber);box-shadow:inset 0 0 0 3px var(--amber),4px 4px 0 var(--ink)}   /* сразу наоборот: без перехода */
.btn:active{transform:translate(4px,4px);box-shadow:inset 0 0 0 3px var(--amber)}
.btn:focus-visible{outline:3px solid var(--text);outline-offset:3px}

/* заявка поверх улицы: «Попробовать бесплатно» (везде) и «Контакты» открывают <dialog>, Esc и клик по фону закрывают */
.order{margin:auto;width:min(460px,calc(100% - 32px));padding:0;border:3px solid #422211;background:var(--panel);color:var(--text);box-shadow:6px 6px 0 rgba(26,20,16,.55);animation:pop .24s steps(3)}
.order::backdrop{background:rgba(8,10,24,.55);backdrop-filter:blur(4px)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}}
.order__in{position:relative;padding:28px 24px 24px}
.order h2{font:400 16px/1.5 var(--pixel);color:var(--head);margin:0 36px 8px 0}
.order p{font-size:15px;margin-bottom:18px;opacity:.85}
.order label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.order input{display:block;width:100%;margin-bottom:16px;padding:12px;font:inherit;font-size:17px;color:var(--text);background:var(--field);border:3px solid #422211;border-radius:0}
.order input:focus{outline:3px solid var(--amber);outline-offset:0}
.order small{font-weight:400;opacity:.7}
.order .btn{width:100%;margin-top:6px;font-size:13px;padding:16px}
.order .need{color:var(--amber-2);font-size:14px;margin:-4px 0 12px}
.order .close{position:absolute;right:10px;top:10px;width:36px;height:36px;padding:0;font:400 14px/1 var(--pixel);color:var(--text);background:none;border:0;cursor:var(--hand)}
.order .close:hover{color:var(--amber)}
.order .close:focus-visible{outline:3px solid var(--amber)}
.bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}   /* honeypot: с display:none роботы его пропускают */

/* ── доска студии: «Работы» и «Как это работает» открываются поверх улицы пробковой доской, камера сперва наезжает на домик.
   Прокрутки у страницы нет — улица остаётся сценой (пользователь, 2026-09-25). Рама кодом, пробка — street/cork.png, вид — data-view */
.board{position:fixed;inset:0;margin:auto;width:min(1240px,calc(100% - 48px));height:min(840px,calc(100dvh - 48px));max-width:none;max-height:none;padding:0;color:#1a1410;
  background:#c08a52;border:14px solid #5a3418;box-shadow:inset 0 0 0 3px #7a4a24,0 0 0 3px #2a170b,10px 12px 0 rgba(0,0,0,.45);animation:pop .3s steps(3)}
.board::before{content:"";position:absolute;inset:0;background:url(street/cork.png) center/cover;image-rendering:pixelated}
.board::backdrop{background:rgba(8,10,24,.45);backdrop-filter:blur(6px)}
.board__in{position:relative;height:100%;overflow:auto;overscroll-behavior:contain;padding:20px clamp(16px,3vw,40px) 36px}
.board__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:clamp(22px,4vh,40px)}
.board__bar :is(button,a){height:38px;padding:0 14px;font:400 11px/1 var(--pixel);color:#1a1410;background:#f6efe2;border:3px solid #2a170b;box-shadow:3px 3px 0 rgba(0,0,0,.35);cursor:var(--hand)}
.board__bar :is(button,a):hover,.board__bar [aria-current=true],.board__bar [aria-current=page]{background:#e0a04a}
.board__bar :is(button,a):active{transform:translate(3px,3px);box-shadow:none}
.board__bar :is(button,a):focus-visible{outline:3px solid #fff;outline-offset:2px}
.board__bar .x{margin-right:auto}
.board__bar a{display:inline-grid;place-items:center;text-decoration:none}   /* на своих страницах разделы — ссылки */   /* как в шапке улицы: выход слева, разделы справа */
.view{display:none}
.board[data-view=work] .view--work,.board[data-view=how] .view--how,.board[data-view=contacts] .view--contacts{display:block}
.pin{position:absolute;left:50%;top:-9px;translate:-50% 0;width:16px;height:18px;z-index:4;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.35))}
/* стикеры и снимки: бумага, кнопка сверху, чуть криво */
.note{position:relative;padding:20px 18px 18px;background:#ffe27a;box-shadow:3px 5px 0 rgba(0,0,0,.3);rotate:-2deg}
.ttl{font:400 clamp(15px,1.5vw,20px)/1.45 var(--pixel);color:#3a1d0a}   /* заголовок доски: h2 на улице, h1 на своей странице */
.note :is(h2,h3):not(.ttl){font:400 13px/1.5 var(--pixel);color:#3a1d0a;margin-bottom:8px}
.note p{font-size:15px;line-height:1.45}
.note--pink{background:#ffc1d9}
.note--mint{background:#b6f0dc}
.pins{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,40px) clamp(16px,2.4vw,32px);align-items:start}
.pins>li{position:relative}
.photo{position:relative;display:block;padding:8px 8px 0;background:#fffaf0;color:#1a1410;text-decoration:none;box-shadow:3px 5px 0 rgba(0,0,0,.35);transition:transform .12s steps(2),rotate .12s steps(2),box-shadow .12s steps(2)}
.pins>li:nth-child(3n) .photo{rotate:1.6deg}
.pins>li:nth-child(3n+1) .photo{rotate:-1.2deg}
.pins>li:nth-child(4n+2) .photo{rotate:.8deg}
.photo:hover,.photo:focus-visible{rotate:0deg;transform:translateY(-5px) scale(1.04);box-shadow:7px 12px 0 rgba(0,0,0,.28);z-index:3;outline:none}
.photo:focus-visible{box-shadow:0 0 0 3px #fff,7px 12px 0 rgba(0,0,0,.28)}
.photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.photo b{display:flex;justify-content:space-between;gap:8px;font:400 12px/1.4 var(--pixel);padding:11px 2px 2px}
.photo b::after{content:"↗";font-family:var(--font);font-size:16px;line-height:1;color:#b0561e}
.photo span{display:block;font-size:14px;padding:0 2px 11px;opacity:.7}
.slot{height:100%;min-height:180px;display:grid;place-items:center;padding:18px;border:3px dashed rgba(255,248,235,.85);background:rgba(255,248,235,.12)}
.slot .note{rotate:2deg;width:min(100%,240px);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center}   /* пустой стикер, кнопка посередине: «ваш сайт здесь» не обещаем — клиент может не захотеть висеть на доске */
.slot .btn,.go-on .btn{margin-top:14px;padding:13px 16px;font-size:11px;background:#954518;color:#f2ede4}
.slot .btn:hover,.go-on .btn:hover{background:#1a1410;color:#e0a04a;box-shadow:inset 0 0 0 3px #e0a04a,4px 4px 0 #1a1410}
.slot .btn{margin-top:0}   /* ровно посередине стикера */
/* «Как это работает»: три стикера, между кнопками красная нить с провисом */
.view--how>.note{display:inline-block;margin-bottom:clamp(30px,6vh,56px)}
.steps{--gap:clamp(28px,5vw,72px);list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:1040px}
.steps .note{padding:28px 22px 24px;height:100%}
.steps li:nth-child(2) .note{rotate:1.5deg}
.steps li:nth-child(3) .note{rotate:-1deg}
.steps li{position:relative}
.steps li:not(:last-child)::after{content:"";position:absolute;z-index:3;left:50%;top:0;width:calc(100% + var(--gap));height:34px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 1Q50 26 100 1' fill='none' stroke='%23c62828' stroke-width='3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.n{display:block;font:400 30px/1 var(--pixel);color:#3a1d0a;margin-bottom:14px}
/* контакты (2026-09-25): кто хочет позвонить или написать сам, а не оставлять заявку; те же данные пойдут в Яндекс Бизнес */
.view--contacts>.note{display:inline-block;margin-bottom:clamp(30px,6vh,56px)}
.cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,280px));gap:clamp(20px,3vw,36px)}
.cards .note{padding:24px 20px 20px;height:100%}
.cards li:nth-child(2) .note{rotate:1.2deg}
.cards li:nth-child(3) .note{rotate:-1deg}
.cards a{font-size:17px;font-weight:600;color:#3a1d0a;overflow-wrap:anywhere}
.cards a:hover{color:#954518}
.go-on{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:clamp(30px,6vh,56px);padding:16px 20px;background:#fffaf0;box-shadow:3px 5px 0 rgba(0,0,0,.3);rotate:-.8deg}
.go-on p{font:400 13px/1.5 var(--pixel);color:#3a1d0a}
.go-on .btn{margin-top:0}
@media (max-width:1100px){.pins{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .board{width:calc(100% - 16px);height:calc(100dvh - 16px);border-width:8px}
  .board__bar :is(button,a){padding:0 10px;font-size:10px}
  /* кнопки доски не уезжают при прокрутке: планка цвета рамки во всю ширину, прилипает к верху */
  .board__bar{position:sticky;top:-20px;z-index:2;margin:-20px calc(-1 * clamp(16px,3vw,40px)) 22px;padding:10px clamp(16px,3vw,40px) 12px;background:#5a3418;box-shadow:0 3px 0 rgba(0,0,0,.35)}
  .pins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pins>li:last-child{grid-column:1/-1}   /* пустой стикер с кнопкой в полколонки не влезает */
  .photo b{font-size:10px}
  .steps{grid-template-columns:1fr}
  .steps li:not(:last-child)::after{display:none}
}
/* FAQ на доске (страницы): стикеры шире карточек контактов, ответ в 2–4 строки */
.faq{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));max-width:1040px}
.cards li:nth-child(4) .note{rotate:1.6deg}
.cards li:nth-child(5) .note{rotate:-1.4deg}
.cards li:nth-child(6) .note{rotate:.9deg}
.faq a{font-size:inherit;font-weight:600}
/* реквизиты самозанятого мелкой строкой внизу доски (пользователь, 2026-09-25: «без стикера») */
.fine{margin-top:clamp(24px,5vh,48px);font-size:13px;line-height:1.4;color:rgba(26,20,16,.8)}