/* Оформление юридических страниц portret7.ru: offerta.html, privacy.html, consent.html.
   Один файл на три страницы, лежит в корне бакета рядом с ними.
   Токены и шрифты те же, что в лендинге, но набор здесь книжный: одна колонка,
   длинный текст, крупный кегль. Картинок нет, поэтому страницы лёгкие и
   собирать их скриптом не нужно: правим и заливаем как есть. */

@font-face { font-family:'Lora'; src:url('fonts/Lora-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Lora'; src:url('fonts/Lora-Italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Golos Text'; src:url('fonts/GolosText-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root{
  --ink:#1f2733;
  --accent:#ab9068;
  --accent-text:#7a6444;   /* латунь для текста на бумаге: контраст ≥4.5:1 */
  --paper:#cfc8b8;
  --page:#f6f2ea;
  --text:#2b2723;
  --body:#413b33;          /* основной текст документа, ~9:1 к бумаге */
  --meta:#5f584c;          /* даты, подписи под таблицами, ~6:1 */
  --line:#ddd5c4;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:'Lora',Georgia,serif;
  background:var(--page);
  color:var(--body);
  font-size:17px;
  line-height:1.72;
}

/* ---------- ШАПКА ---------- */
.topbar{background:var(--ink);color:var(--paper);}
.topbar .inner{
  max-width:700px;margin:0 auto;padding:20px 24px;
  display:flex;gap:18px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
}
.topbar a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;}
.topbar a:hover{border-bottom-color:var(--accent);}
.topbar .home{font-size:19px;letter-spacing:.02em;}
.topbar nav{
  font-family:'Golos Text',system-ui,sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.05em;display:flex;gap:16px;flex-wrap:wrap;
}
.topbar nav a{color:var(--paper);}
.topbar nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);}

/* ---------- ПОЛОСА НАБОРА ---------- */
.doc{max-width:700px;margin:0 auto;padding:56px 24px 24px;}
.doc h1{
  font-family:'Lora',Georgia,serif;font-weight:400;
  font-size:clamp(30px,5vw,42px);line-height:1.2;letter-spacing:-.01em;
  color:var(--text);text-wrap:balance;
}
.doc .rev{
  font-family:'Golos Text',system-ui,sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.04em;color:var(--meta);margin-top:14px;
}
.doc .lead{font-size:19px;margin-top:28px;color:var(--text);text-wrap:pretty;}
.doc h2{
  font-weight:700;font-size:clamp(21px,3vw,25px);line-height:1.3;
  color:var(--text);margin:58px 0 16px;text-wrap:balance;
}
.doc h3{font-weight:700;font-size:18px;color:var(--text);margin:32px 0 10px;}
.doc p{margin:14px 0;text-wrap:pretty;}
.doc ul,.doc ol{margin:14px 0 14px 26px;}
.doc li{margin:9px 0;padding-left:4px;}
.doc li::marker{color:var(--accent-text);}
.doc a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;}
.doc a:hover{color:var(--text);}
.doc strong{color:var(--text);}
.doc hr{border:0;height:1px;background:var(--line);margin:52px 0;}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;}

/* линейка после h1: отбивает заголовок от текста без лишнего отступа */
.doc .rule{width:64px;height:1px;background:var(--accent);margin:34px 0 0;}

/* ---------- РЕКВИЗИТЫ И ВРЕЗКИ ---------- */
.card{
  background:#fffdf8;border:1px solid var(--line);
  padding:26px 28px;margin:26px 0;
}
.card p{margin:6px 0;}
.card .who{font-size:19px;color:var(--text);margin-bottom:12px;}

/* Две ступени выделения, и они различаются формой, а не толщиной полоски сбоку:
   .note отбита латунной линейкой сверху (боковая полоса читается как ярлык),
   .warn взята в рамку и на светлую бумагу. */
.note{border-top:1px solid var(--accent);padding:20px 0 2px;margin:32px 0;}
.note p:first-of-type{margin-top:0;}
.note p:last-child{margin-bottom:0;}
.note .head{
  font-family:'Golos Text',system-ui,sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:10px;
}
/* самое важное ограничение (возврат цифрового) прячется хуже всего, если
   выделить его как остальные врезки, поэтому у него отдельный вес */
.warn{
  background:#fffdf8;border:1px solid var(--accent);
  padding:24px 28px;margin:32px 0;
}
.warn p:first-child{margin-top:0;}
.warn p:last-child{margin-bottom:0;}

/* ---------- ТАБЛИЦЫ ---------- */
.tablewrap{overflow-x:auto;margin:24px 0;}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px;}
th,td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line);}
th{
  font-family:'Golos Text',system-ui,sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-text);border-bottom-color:var(--accent);
}
td:first-child{color:var(--text);padding-right:24px;}

/* ---------- ПОДВАЛ ---------- */
footer{background:var(--ink);color:rgba(207,200,184,.78);margin-top:72px;}
footer .inner{max-width:700px;margin:0 auto;padding:44px 24px 52px;font-size:14px;line-height:1.8;}
footer a{color:var(--paper);}
footer .links{
  font-family:'Golos Text',system-ui,sans-serif;font-weight:500;
  font-size:13px;letter-spacing:.04em;margin-bottom:18px;
}
footer .links a{margin-right:18px;display:inline-block;}

@media (max-width:600px){
  body{font-size:16px;}
  .doc{padding-top:40px;}
  .doc h2{margin-top:44px;}
  /* три колонки русского текста в горизонтальном скролле на телефоне нечитаемы,
     поэтому строка разворачивается в карточку, а шапка колонки уходит в подпись
     над значением (берётся из data-label, они проставлены в разметке) */
  .tablewrap{overflow-x:visible;}
  table{min-width:0;display:block;}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  tbody,tr,td{display:block;}
  tr{border-bottom:1px solid var(--accent);padding:16px 0;}
  tr:last-child{border-bottom:0;}
  td{border:0;padding:0 0 10px;}
  td:last-child{padding-bottom:0;}
  td:first-child{font-weight:700;padding-right:0;}
  td:not(:first-child)::before{
    content:attr(data-label);display:block;
    font-family:'Golos Text',system-ui,sans-serif;font-weight:500;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-text);margin-bottom:2px;
  }
}

@media print{
  .topbar,footer{background:none;color:#000;}
  .topbar nav,footer .links{display:none;}
  body{background:#fff;color:#000;font-size:11pt;}
  .doc{max-width:none;padding:0;}
  .doc h2{page-break-after:avoid;}
  .card,.warn,.note,table{page-break-inside:avoid;}
  .doc a{color:#000;}
}