/* =====================================================================
   ПУБЛИЧНЫЙ САЙТ v2.0 — отдельная дизайн-система для гостя (ТЗ §7-8).
   Токены в собственном неймспейсе --pub-*, чтобы никогда не столкнуться
   с --bg/--surface/--accent основного (member) приложения. Подключается
   и к серверному лендингу (lib/landing.js), и к #publicShell внутри SPA
   (public/index.html) — гость видит один и тот же язык везде.
   ===================================================================== */
:root{
  --pub-paper:#F7F3EE;
  --pub-card:#FFFFFF;
  --pub-card-2:#F0EAE2;
  --pub-line:#E3D9CE;
  --pub-ink:#17120F;
  --pub-ink-2:#5E524A;
  --pub-wine:#8E1F32;
  --pub-wine-ink:#8E1F32;
  --pub-gold:#A8823C;
  --pub-chip-bg:rgba(142,31,50,.09);
  --pub-shadow:0 1px 2px rgba(23,18,15,.05);
  --pub-r-card:12px; --pub-r-control:8px; --pub-r-pill:999px;
  --pub-header-h:64px;
  --pub-font-serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --pub-font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --pub-font-mono:'PT Mono','SFMono-Regular',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pub-paper:#14100E; --pub-card:#1D1815; --pub-card-2:#241E19;
    --pub-line:#332B24; --pub-ink:#F2EBE4; --pub-ink-2:#B7A99C;
    --pub-wine-ink:#E07087; --pub-gold:#D3AC62;
    --pub-chip-bg:rgba(224,112,135,.14);
    --pub-shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --pub-paper:#14100E; --pub-card:#1D1815; --pub-card-2:#241E19;
  --pub-line:#332B24; --pub-ink:#F2EBE4; --pub-ink-2:#B7A99C;
  --pub-wine-ink:#E07087; --pub-gold:#D3AC62;
  --pub-chip-bg:rgba(224,112,135,.14);
  --pub-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* Кнопки первичные/акцентные всегда бордо, даже в тёмной теме (текстовый
   акцент --pub-wine-ink светлеет для контраста, заливка кнопки — нет). */
.pub{ --pub-btn-wine:#8E1F32; }

.pub{
  background:var(--pub-paper); color:var(--pub-ink);
  font-family:var(--pub-font-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.pub *{ box-sizing:border-box; }
.pub a{ color:inherit; }
.pub img{ max-width:100%; display:block; }
.pub ::selection{ background:var(--pub-gold); color:#fff; }

.pub h1,.pub h2,.pub h3,.pub .pub-quote-text{ font-family:var(--pub-font-serif); font-weight:600; margin:0; color:var(--pub-ink); }
.pub h1{ font-size:52px; line-height:56px; letter-spacing:-.01em; }
.pub h2{ font-size:34px; line-height:40px; }
.pub h3{ font-size:21px; line-height:28px; }
.pub .pub-lead{ font-size:19px; line-height:30px; color:var(--pub-ink-2); font-weight:400; }
.pub .pub-small{ font-size:14px; line-height:21px; color:var(--pub-ink-2); }
.pub .pub-label{ font-family:var(--pub-font-mono); font-size:12px; line-height:16px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pub-gold); }
@media (max-width:640px){
  .pub h1{ font-size:34px; line-height:38px; }
  .pub h2{ font-size:26px; line-height:32px; }
}

.pub .container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.pub .col{ max-width:720px; }
.pub .pub-left{ text-align:left; }
.pub .pub-center{ text-align:center; }
.pub p{ margin:0 0 16px; max-width:68ch; }
.pub p:last-child{ margin-bottom:0; }

/* ---- шапка ---- */
.pub-header{
  position:sticky; top:0; z-index:100; height:var(--pub-header-h);
  background:var(--pub-paper); border-bottom:1px solid var(--pub-line);
  transition:backdrop-filter .2s;
}
.pub-header.scrolled{ backdrop-filter:blur(12px); background:rgba(247,243,238,.86); }
:root[data-theme="dark"] .pub-header.scrolled{ background:rgba(20,16,14,.86); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pub-header.scrolled{ background:rgba(20,16,14,.86); } }
.pub-header-inner{ display:flex; align-items:center; gap:32px; height:var(--pub-header-h); }
.pub-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.pub-brand img{ width:36px; height:36px; }
.pub-brand .pub-brand-name{ font-family:var(--pub-font-serif); font-weight:600; font-size:15px; line-height:1.2; color:var(--pub-ink); }
.pub-brand .pub-brand-name small{ display:block; font-family:var(--pub-font-mono); font-weight:500; font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--pub-ink-2); }
.pub-nav{ display:flex; align-items:center; gap:28px; }
.pub-nav a{ font-size:15px; font-weight:500; text-decoration:none; color:var(--pub-ink-2); }
.pub-nav a:hover{ color:var(--pub-ink); }
.pub-spacer{ flex:1; }
.pub-header-actions{ display:flex; align-items:center; gap:10px; }
@media (max-width:900px){ .pub-nav{ display:none; } }
/* На узком экране бренд + две кнопки не помещались в 375px и давали
   горизонтальную прокрутку всей страницы (ТЗ §12 её запрещает). */
@media (max-width:560px){
  .pub-header-inner{ gap:12px; }
  .pub-brand .pub-brand-name small{ display:none; }
  .pub-header-actions{ gap:8px; }
  .pub-btn.small{ height:36px; padding:0 12px; font-size:14px; }
}
@media (max-width:430px){ .pub-brand .pub-brand-name{ display:none; } }

/* ---- кнопки ---- */
.pub-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 24px; border-radius:var(--pub-r-control); font-size:16px; font-weight:600;
  text-decoration:none; border:1px solid transparent; white-space:nowrap; font-family:var(--pub-font-sans);
  transition:background .15s,opacity .15s; }
.pub-btn.primary{ background:var(--pub-btn-wine); color:#fff; }
.pub-btn.primary:hover{ opacity:.88; }
.pub-btn.secondary{ background:transparent; border-color:var(--pub-line); color:var(--pub-ink); }
.pub-btn.secondary:hover{ border-color:var(--pub-ink-2); }
.pub-btn.small{ height:40px; padding:0 18px; font-size:15px; }
.pub-btn.on-wine{ background:#fff; color:var(--pub-btn-wine); }
.pub-link-btn{ display:inline-flex; align-items:center; gap:6px; color:var(--pub-wine-ink); font-weight:500;
  text-decoration:none; font-size:16px; }
.pub-link-btn:hover{ text-decoration:underline; }

/* ---- секции ---- */
.pub-section{ padding:96px 0; border-bottom:1px solid var(--pub-line); }
.pub-section:last-of-type{ border-bottom:none; }
.pub-section.tight{ padding:64px 0; }
.pub-section-head{ margin-bottom:40px; max-width:640px; }
.pub-section-head .pub-label{ display:block; margin-bottom:12px; }
.pub-section-head h2{ margin-bottom:12px; }
@media (max-width:900px){ .pub-section{ padding:64px 0; } }
@media (max-width:640px){ .pub-section{ padding:48px 0; } }

/* ---- герой ---- */
.pub-hero{ padding:72px 0 88px; }
.pub-hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; }
.pub-hero h1{ margin:14px 0 16px; }
.pub-hero .pub-lead{ max-width:640px; margin-bottom:24px; }
.pub-hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.pub-hero-trust{ font-size:13px; color:var(--pub-ink-2); }
.pub-hero-photo{ position:relative; aspect-ratio:3/2; border-radius:12px; overflow:hidden;
  background:linear-gradient(135deg,var(--pub-card-2),var(--pub-line)); display:flex; align-items:center; justify-content:center; }
.pub-hero-photo img.crest{ width:38%; opacity:.35; }
.pub-hero-photo img.shot{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .pub-hero-grid{ grid-template-columns:1fr; } .pub-hero-photo{ order:-1; } }

/* ---- полоса цифр ---- */
.pub-stats-bar{ background:var(--pub-card); border:1px solid var(--pub-line); border-radius:var(--pub-r-card);
  display:grid; grid-template-columns:repeat(4,1fr); }
.pub-stats-bar .s{ padding:24px; text-align:center; border-left:1px solid var(--pub-line); }
.pub-stats-bar .s:first-child{ border-left:none; }
.pub-stats-bar .n{ font-family:var(--pub-font-mono); font-weight:600; font-size:30px; color:var(--pub-wine-ink); }
.pub-stats-bar .l{ font-size:13px; color:var(--pub-ink-2); margin-top:4px; }
@media (max-width:640px){ .pub-stats-bar{ grid-template-columns:1fr 1fr; }
  .pub-stats-bar .s:nth-child(2n+1){ border-left:none; } .pub-stats-bar .s:nth-child(n+3){ border-top:1px solid var(--pub-line); } }

/* ---- факт-лист / карточки / что вы получаете-даёте ---- */
.pub-card{ background:var(--pub-card); border:1px solid var(--pub-line); border-radius:var(--pub-r-card); padding:24px; }
.pub-card.clickable{ transition:box-shadow .15s; }
.pub-card.clickable:hover{ box-shadow:var(--pub-shadow); }
.pub-two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width:900px){ .pub-two-col{ grid-template-columns:1fr; gap:32px; } }
.pub-fact-list{ display:flex; flex-direction:column; }
.pub-fact-row{ display:flex; justify-content:space-between; align-items:baseline; height:40px;
  border-bottom:1px solid var(--pub-line); gap:16px; }
.pub-fact-row:last-child{ border-bottom:none; }
.pub-fact-row .k{ font-size:14px; color:var(--pub-ink-2); }
.pub-fact-row .v{ font-size:16px; font-weight:500; text-align:right; }
.pub-give-get{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:640px){ .pub-give-get{ grid-template-columns:1fr; } }
.pub-give-get h3{ margin-bottom:16px; }
.pub-give-get ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.pub-give-get li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:22px; }
.pub-give-get li svg{ flex-shrink:0; margin-top:3px; color:var(--pub-wine-ink); }

/* ---- цитата ---- */
.pub-quote{ background:var(--pub-card-2); padding:64px 0; }
.pub-quote-inner{ display:flex; gap:32px; align-items:center; }
.pub-quote.reverse .pub-quote-inner{ flex-direction:row-reverse; }
.pub-quote-photo{ width:120px; height:120px; border-radius:50%; flex-shrink:0; object-fit:cover; background:var(--pub-line); }
.pub-quote-photo.placeholder{ display:flex; align-items:center; justify-content:center; }
.pub-quote-photo.placeholder img{ width:44%; opacity:.5; }
.pub-quote-text{ font-size:26px; line-height:36px; font-weight:500; margin-bottom:16px; }
.pub-quote-name{ font-size:15px; font-weight:600; }
.pub-quote-role{ font-size:13px; color:var(--pub-ink-2); }
@media (max-width:640px){ .pub-quote-inner{ flex-direction:column; text-align:center; }
  .pub-quote.reverse .pub-quote-inner{ flex-direction:column; } .pub-quote-text{ font-size:21px; line-height:29px; } }

/* ---- шаги ---- */
.pub-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.pub-steps::before{ content:''; position:absolute; top:14px; left:calc(12.5% + 14px); right:calc(12.5% + 14px);
  height:1px; background:var(--pub-line); z-index:0; }
@media (max-width:900px){ .pub-steps{ grid-template-columns:1fr 1fr; } .pub-steps::before{ display:none; } }
@media (max-width:560px){ .pub-steps{ grid-template-columns:1fr; } }
.pub-step{ position:relative; z-index:1; }
.pub-step .num{ width:28px; height:28px; border-radius:50%; border:1px solid var(--pub-line); background:var(--pub-paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--pub-font-mono); font-size:12px;
  color:var(--pub-wine-ink); margin-bottom:16px; }
.pub-step h3{ margin-bottom:6px; font-size:17px; line-height:24px; }
.pub-step p{ font-size:14px; line-height:21px; color:var(--pub-ink-2); }

/* ---- плитка выпуска ---- */
.pub-year-strip{ display:flex; flex-wrap:wrap; gap:8px; }
.pub-year-tile{ display:flex; align-items:baseline; gap:8px; height:44px; padding:0 16px; border-radius:var(--pub-r-control);
  background:var(--pub-card); border:1px solid var(--pub-line); text-decoration:none; color:var(--pub-ink); }
.pub-year-tile:hover{ border-color:var(--pub-ink-2); }
.pub-year-tile .y{ font-family:var(--pub-font-mono); font-weight:600; color:var(--pub-wine-ink); font-size:15px; }
.pub-year-tile .c{ font-size:12px; color:var(--pub-ink-2); }

/* ---- аккордеон (нативный, без JS) ---- */
.pub-faq{ max-width:720px; }
.pub-faq details{ border-bottom:1px solid var(--pub-line); }
.pub-faq details:first-child{ border-top:1px solid var(--pub-line); }
.pub-faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  height:52px; font-size:17px; font-weight:500; }
.pub-faq summary::-webkit-details-marker{ display:none; }
.pub-faq summary .chev{ flex-shrink:0; transition:transform .18s; color:var(--pub-ink-2); }
.pub-faq details[open] summary .chev{ transform:rotate(180deg); }
.pub-faq .a{ font-size:16px; line-height:26px; color:var(--pub-ink-2); max-width:640px; padding-bottom:20px; }

/* ---- сетки карточек: проекты / направления ---- */
.pub-grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pub-proj-photo{ aspect-ratio:16/9; border-radius:var(--pub-r-card) var(--pub-r-card) 0 0; overflow:hidden;
  background:var(--pub-card-2); display:flex; align-items:center; justify-content:center; }
.pub-proj-photo img{ width:30%; opacity:.4; }
.pub-proj-card{ border:1px solid var(--pub-line); border-radius:var(--pub-r-card); overflow:hidden; background:var(--pub-card); }
.pub-proj-body{ padding:20px; }
.pub-proj-body h3{ margin-bottom:6px; }
.pub-proj-body p{ font-size:14px; color:var(--pub-ink-2); margin-bottom:12px; }
.pub-chip{ display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--pub-r-pill);
  background:var(--pub-chip-bg); color:var(--pub-wine-ink); font-size:12px; font-weight:500; }

/* ---- финальный CTA (единственная крупная заливка бордо) ---- */
.pub-cta-band{ background:var(--pub-btn-wine); color:#fff; text-align:center; padding:56px 0; }
.pub-cta-band h2{ color:#fff; margin-bottom:10px; }
.pub-cta-band p{ color:rgba(255,255,255,.85); margin:0 auto 24px; }

/* ---- футер ---- */
.pub-footer{ background:var(--pub-paper); padding:64px 0 32px; }
.pub-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.pub-footer-col .pub-label{ display:block; margin-bottom:14px; }
.pub-footer-col{ display:flex; flex-direction:column; gap:10px; }
.pub-footer-col a{ font-size:14px; color:var(--pub-ink-2); text-decoration:none; }
.pub-footer-col a:hover{ color:var(--pub-ink); }
.pub-footer-bottom{ border-top:1px solid var(--pub-line); padding-top:20px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:13px; color:var(--pub-ink-2); }
@media (max-width:768px){ .pub-footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .pub-footer-grid{ grid-template-columns:1fr; } }

/* ---- фотоблоки: одиночное фото с подписью и сетка кадров ---- */
.pub-figure{ margin:0; }
.pub-figure img{ width:100%; height:auto; border-radius:var(--pub-r-card); }
.pub-figure figcaption{ font-size:13px; line-height:19px; color:var(--pub-ink-2); margin-top:10px; max-width:68ch; }
.pub-photo-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.pub-photo-grid figure{ margin:0; }
.pub-photo-grid img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--pub-r-card); }
.pub-photo-grid figcaption{ font-size:13px; line-height:19px; color:var(--pub-ink-2); margin-top:8px; }
@media (max-width:900px){ .pub-photo-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .pub-photo-grid{ grid-template-columns:1fr; } }

/* ---- заглушка фото (герб + подпись, честно вместо стока) ---- */
.pub-placeholder{ background:var(--pub-card-2); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:8px; color:var(--pub-ink-2); }
.pub-placeholder img{ width:64px; opacity:.35; }
.pub-placeholder span{ font-size:12px; }

.pub-scale-in{ animation:pubFade .4s ease both; }
@keyframes pubFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .pub-scale-in{ animation:none; } }

/* Тумблер темы (общий компонент member-приложения, .icon-btn) в публичной
   шапке — подстроен под токены гостевого дизайна, чтобы не выбивался. */
.pub .icon-btn{ color:var(--pub-ink-2); }
.pub .icon-btn:hover{ background:var(--pub-card-2); color:var(--pub-ink); }