/* Метраж: общий вид публичных страниц на metrazh.cloud — сайт, подборка по умолчанию, документация API,
   страницы установки и ошибок. Один источник: build_site.sh кладёт файл на сайт как /style.css,
   функции встраивают его в свои страницы (src/webpage.py). Шрифты системные: пункт 11 политики
   обещает, что сайт не подключает внешние шрифты. Без иконок и теней: тонкий шрифт, воздух, линии. */
:root{
  color-scheme:light;
  --bg:#ffffff; --soft:#f6f6f5; --ink:#141414; --text:#3d3d3d; --muted:#8b8b8b;
  --line:#e7e7e5; --line-2:#cfcfcc;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.7 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-decoration-thickness:1px;
  text-underline-offset:3px;transition:text-decoration-color .15s}
a:hover{text-decoration-color:var(--ink)}
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:300;letter-spacing:-.02em;margin:0}
h1{font-size:64px;line-height:1.05}
h2{font-size:40px;line-height:1.12}
h3{font-size:22px;line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 16px}
ul,ol{margin:0 0 16px;padding-left:20px}
li{margin-bottom:6px}
code{font:.88em var(--mono);color:var(--ink);background:var(--soft);border-radius:3px;padding:1px 5px}
pre{font:13.5px/1.6 var(--mono);color:var(--ink);background:var(--soft);border-radius:4px;
  padding:16px 18px;overflow-x:auto;margin:0 0 20px}
pre code{background:none;padding:0}
.muted{color:var(--muted)}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}

/* шапка и подвал */
header .wrap{display:flex;align-items:center;gap:32px;height:96px}
.logo{display:inline-flex;align-items:center;gap:14px;color:var(--ink);text-decoration:none}
.logo img,.logo svg{display:block;height:15px;width:109px}
.logo .pub{color:var(--muted);font-size:14px;line-height:1}
header nav{margin-left:auto;display:flex;gap:32px;font-size:15px}
header nav a{color:var(--muted);text-decoration:none}
header nav a:hover{color:var(--ink)}
footer{margin-top:160px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 32px;padding-top:32px;padding-bottom:56px}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .sp{margin-left:auto}

/* ссылки-кнопки */
.btn{display:inline-block;padding:13px 26px;border:1px solid var(--ink);border-radius:2px;color:var(--ink);
  background:none;font:400 15px/1 var(--font);letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:background .15s,color .15s}
.btn:hover{background:var(--ink);color:#fff}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-s{padding:8px 14px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}

/* главная */
.hero{padding:128px 0 0}
.hero h1{max-width:18ch}
.lede{font:300 21px/1.6 var(--display);color:var(--text);max-width:38em;margin:32px 0 0}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 28px}
.show{margin:120px 0 0}
.show .frame{background:var(--soft);padding:48px;border-radius:4px;container-type:inline-size}
.show img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:3px}
/* Все снимки одной высоты: широкие (1512×789) во всю ширину, узкие — той же высоты с подписью сбоку */
.show.side .frame{display:flex;align-items:center;gap:64px}
.show.side.flip .frame{flex-direction:row-reverse}
.show.side img{flex:none;width:auto;height:calc(100cqw * 789 / 1512)}
.show.side figcaption{display:block;margin:0;font-size:16px;line-height:1.7;color:var(--text);max-width:30em}
.show.side figcaption b{display:block;font:300 28px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.show figcaption{display:flex;gap:32px;align-items:baseline;margin-top:24px;font-size:15px;color:var(--muted)}
.show figcaption b{font-weight:400;color:var(--ink);min-width:220px}
.section{padding:160px 0 0}
.section > .wrap > h2,.section-title{max-width:16ch;margin-bottom:56px}
.list{border-top:1px solid var(--line)}
.list .row{display:grid;grid-template-columns:5fr 7fr;gap:48px;padding:32px 0;border-bottom:1px solid var(--line)}
.list .row h3{font-size:24px}
.list .row p{margin:0;color:var(--text);max-width:36em}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.cols h3{margin-bottom:20px}
.contact{margin:24px 0 0;padding:0;list-style:none}
.contact li{display:flex;gap:24px;padding:14px 0;border-top:1px solid var(--line);margin:0}
.contact li:last-child{border-bottom:1px solid var(--line)}
.contact span{color:var(--muted);min-width:160px}

/* документы: политика, условия, 404 */
.doc{max-width:760px;margin:0 auto;padding:96px 32px 0}
.doc h1{font-size:44px;margin-bottom:16px}
.doc .meta{color:var(--muted);font-size:15px;margin-bottom:56px}
.doc h2{font-size:24px;margin:56px 0 16px;padding-top:32px;border-top:1px solid var(--line)}
.doc h3{font-size:18px;margin:32px 0 10px;font-weight:400}
.doc p,.doc li{font-size:16px}
.box{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:28px 0}
.box p:last-child{margin-bottom:0}
dl{margin:0;display:grid;grid-template-columns:160px 1fr;gap:12px 24px}
dt{color:var(--muted)}
dd{margin:0;color:var(--ink)}
.tbl{overflow-x:auto;margin:20px 0}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{text-align:left;font-weight:400;color:var(--muted);padding:12px 16px 12px 0;border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.draft{border:1px dashed var(--line-2);padding:12px 16px;margin:16px 0}

/* документация API */
.api h2{font-size:28px}
.api td.method{font:13px var(--mono);color:var(--ink);white-space:nowrap}

/* страницы установки и ошибок */
.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.card{width:100%;max-width:480px}
.card .logo{display:inline-block;margin-bottom:64px}
.card h1{font-size:34px;line-height:1.15;margin:0 0 16px}
.card .muted{font-size:14px}
.field{margin:24px 0}
.field span{display:block;font-size:13px;color:var(--muted);margin-bottom:8px}
.field .row{display:flex;gap:10px}
.field code{flex:1;min-width:0;padding:11px 12px;font-size:13px;word-break:break-all;user-select:all;border-radius:2px}

/* подборка по умолчанию: без знака Метража, это страница агентства для его клиента */
.sel{max-width:1040px;margin:0 auto;padding:96px 32px 80px}
.sel-head{margin-bottom:64px}
.sel-head h1{font-size:44px;line-height:1.1;margin:0 0 14px}
.sel-head p{margin:0;color:var(--muted)}
.obj{display:grid;grid-template-columns:380px 1fr;gap:48px;padding:48px 0;border-top:1px solid var(--line)}
.obj:last-of-type{border-bottom:1px solid var(--line)}
.obj > img,.obj .noimg{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--soft);display:block;border-radius:2px}
.obj .body{min-width:0}
.obj .name{font:300 26px/1.25 var(--display);color:var(--ink);letter-spacing:-.01em;margin-bottom:6px}
.obj .loc{color:var(--muted);margin-bottom:24px}
.obj .rate{font:300 30px/1.2 var(--display);color:var(--ink);margin-bottom:28px}
.obj .rate span{font-size:15px;color:var(--muted)}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.specs .s{font-size:15px;min-width:0}
.specs .s span{display:block;color:var(--muted);font-size:13px}
.specs .s b{font-weight:400;color:var(--ink)}
.sel-note{color:var(--muted);font-size:14px;margin-top:40px}
.sel-msg{max-width:520px;margin:0 auto;padding:160px 32px;text-align:center}
.sel-msg h1{font-size:36px;margin-bottom:16px}

@media(max-width:900px){
  h1{font-size:48px}h2{font-size:32px}
  .list .row,.cols{grid-template-columns:1fr;gap:12px}
  .cols{gap:56px}
  .show .frame{padding:20px}
  .show figcaption{flex-direction:column;gap:4px}
  .show.side .frame,.show.side.flip .frame{flex-direction:column;align-items:flex-start;gap:20px}
  .show.side img{width:100%;height:auto}
  .obj{grid-template-columns:1fr;gap:24px}
}
@media(max-width:640px){
  h1{font-size:38px}h2{font-size:28px}
  .wrap{padding:0 20px}
  header .wrap{height:auto;padding-top:28px;flex-wrap:wrap;gap:16px 20px}
  header nav{gap:20px;font-size:14px}
  header nav .hide-s{display:none}
  .hero{padding:72px 0 0}.lede{font-size:18px;margin-top:24px}
  .show{margin-top:72px}.show .frame{padding:10px}
  .section{padding-top:96px}
  .section > .wrap > h2,.section-title{margin-bottom:32px}
  footer{margin-top:96px}
  dl{grid-template-columns:1fr;gap:2px}
  dd{margin-bottom:12px}
  .doc{padding:56px 20px 0}.doc h1{font-size:34px}
  .sel{padding:56px 20px}.sel-head h1{font-size:32px}
  .specs{grid-template-columns:1fr}
}