/* assets/style.css — публичный сайт sergeybaranov.de */

/* ---- Локальные шрифты (файлы кладутся в /assets/fonts, см. INSTALL.md).
       Если файлов нет — работает системный фолбэк, сайт полностью функционален. ---- */
@font-face{font-family:'Spectral'; src:url('fonts/spectral-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Manrope'; src:url('fonts/manrope-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Manrope'; src:url('fonts/manrope-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;}

:root{
  --paper:#f5f7fa; --white:#fff; --ink:#0e1c2e; --ink-soft:#39506b; --muted:#6b8098;
  --cobalt:#1f4e8c; --cobalt-deep:#163a6b; --line:#dbe4ee; --tint:#e9f0f8;
  --shadow:0 24px 60px -28px rgba(14,28,46,.28);
  --r-lg:24px; --r-md:14px; --r-sm:9px; --maxw:1080px;
  --display:'Spectral', Georgia, 'Times New Roman', serif;
  --body:'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --helv:'Helvetica Neue', Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
a{color:var(--cobalt);}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}
.wrap-narrow{max-width:760px;}
.muted{color:var(--muted);}
:focus-visible{outline:2px solid var(--cobalt); outline-offset:3px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;}
  .tsep,.tdot{animation:none !important; transform:none !important; opacity:1 !important;} }

/* фирменные элементы — Helvetica Bold по ТЗ */
.helv{font-family:var(--helv) !important; font-weight:700 !important;}

/* ---------- шапка ---------- */
.topbar{position:sticky; top:0; z-index:50; background:rgba(245,247,250,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
.topbar-in{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px;}
.brand{font-size:1.02rem; color:var(--ink); text-decoration:none; letter-spacing:.01em;}
.topnav{display:flex; align-items:center; gap:16px;}
.topnav a.navlink{font-size:.9rem; font-weight:500; color:var(--ink-soft); text-decoration:none;}
.topnav a.navlink:hover{color:var(--cobalt);}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.93rem;
  padding:12px 22px; border-radius:100px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:all .16s ease; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--cobalt); color:#fff;}
.btn-primary:hover{background:var(--cobalt-deep); box-shadow:0 8px 20px -8px rgba(31,78,140,.5);}
.btn-outline{background:transparent; color:var(--cobalt); border-color:#b9cce3;}
.btn-outline:hover{border-color:var(--cobalt); background:var(--tint);}
.btn-sm{padding:9px 18px; font-size:.86rem;}
.btn-block{width:100%;}

/* ---------- герой ---------- */
.hero{position:relative; padding:56px 0 30px; overflow:hidden;}
.hero-nodes{position:absolute; top:-30px; right:-70px; width:460px; opacity:.5; pointer-events:none;}
.hero-grid{position:relative;}
.hero h1{font-size:2.4rem; line-height:1.08; margin:0 0 22px; letter-spacing:-.015em; color:var(--ink);}

.triline{display:flex; align-items:center; gap:10px; margin:0 0 18px; max-width:520px;}
.triline .tw{font-weight:700; color:var(--cobalt); letter-spacing:.02em;
  font-size:clamp(14px, 4.3vw, 21px); white-space:nowrap; line-height:1;}
.triline .tdot{width:8px; height:8px; border-radius:50%; background:var(--cobalt); flex:none;
  opacity:0; animation:pop .4s ease forwards;}
.triline .tsep{flex:1 1 14px; min-width:10px; height:1.5px; background:#b9cce3;
  transform:scaleX(0); transform-origin:left center; animation:grow .5s ease forwards;}
.triline .d1{animation-delay:.25s;} .triline .s1{animation-delay:.45s;}
.triline .d2{animation-delay:.85s;} .triline .s2{animation-delay:1s;}
.triline .d3{animation-delay:1.4s;}
@keyframes grow{to{transform:scaleX(1);}}
@keyframes pop{to{opacity:1;}}

.hero .bridge{color:var(--ink-soft); font-size:1.06rem; margin:0 0 30px; max-width:34ch; font-weight:500;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px;}
.photo-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--white);
  box-shadow:var(--shadow); border:1px solid var(--line); max-width:440px; margin:0 auto;}
.photo-frame img{width:100%; height:auto;}
.photo-empty{padding:80px 24px; text-align:center; color:var(--muted); font-size:.9rem;}
.photo-frame .caption{position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.9);
  backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:100px;
  font-size:.68rem; color:var(--ink-soft); padding:7px 14px; letter-spacing:.06em; font-family:var(--helv);}

/* ---------- форма ---------- */
.contact{padding:54px 0 70px;}
.contact-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:30px 22px; max-width:620px; margin:0 auto;}
.contact-card h2{font-size:1.5rem; margin:0 0 6px; letter-spacing:-.01em;}
.contact-card .lead{color:var(--muted); font-size:.94rem; margin:0 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:.8rem; font-weight:600; color:var(--ink-soft); margin-bottom:7px;}
.field .req{color:#c0392b;}
.field input,.field select,.field textarea{width:100%; font-family:var(--body); font-size:.96rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 13px;
  transition:border-color .15s ease, background .15s ease;}
.field textarea{min-height:96px; resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cobalt); background:#fff; outline:none;}
.hp{position:absolute; left:-9999px; top:-9999px; height:0; overflow:hidden;}
.form-alt{margin-top:18px; padding-top:18px; border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:.88rem; color:var(--muted);}
.form-success{text-align:center; padding:26px 8px;}
.form-success h3{font-family:var(--display); font-weight:600; margin:0 0 8px; font-size:1.3rem;}
.form-success p{color:var(--muted); margin:0; font-size:.94rem;}

/* ---------- блог ---------- */
.blog-list{padding:48px 0 70px;}
.page-title{font-family:var(--display); font-weight:600; font-size:2rem; letter-spacing:-.01em; margin:0 0 26px;}
.cards-grid{display:grid; grid-template-columns:1fr; gap:20px;}
.post-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .18s ease, box-shadow .18s ease;}
.post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.post-cover{display:block; aspect-ratio:16/9; overflow:hidden; background:var(--tint);}
.post-cover img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.post-card:hover .post-cover img{transform:scale(1.04);}
.post-cover-empty{display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:3rem; color:#b9cce3;}
.post-body{display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px;}
.post-date{font-size:.74rem; color:var(--muted); letter-spacing:.05em;}
.post-title{font-family:var(--display); font-weight:600; font-size:1.15rem; line-height:1.3;}
.post-excerpt{font-size:.88rem; color:var(--ink-soft);}
.post-more{font-size:.84rem; font-weight:700; color:var(--cobalt); margin-top:4px;}

/* ---------- статья / статичные страницы ---------- */
.article,.static-page{padding:44px 0 70px;}
.crumbs{font-size:.85rem; margin:0 0 14px;}
.crumbs a{text-decoration:none; color:var(--muted);}
.crumbs a:hover{color:var(--cobalt);}
.article .post-date{margin:-14px 0 22px;}
.article-cover{margin:0 0 26px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow);}
.article-body{font-size:1.02rem; color:var(--ink);}
.article-body p{margin:0 0 1.1em;}
.article-body h2{font-family:var(--display); font-weight:600; font-size:1.35rem; margin:1.6em 0 .6em;}
.article-body h3{font-family:var(--display); font-weight:600; font-size:1.15rem; margin:1.4em 0 .5em;}
.article-body ul,.article-body ol{margin:0 0 1.1em; padding-left:1.3em;}
.article-body b,.article-body strong{font-weight:700; color:var(--ink);}
.article-body a{color:var(--cobalt);}
.article-body blockquote{margin:1.2em 0; padding:.2em 0 .2em 1em; border-left:3px solid var(--cobalt); color:var(--ink-soft); font-style:italic;}
.article-cta{margin-top:34px; padding-top:26px; border-top:1px solid var(--line); text-align:center;}

/* ---------- футер ---------- */
footer{border-top:1px solid var(--line); background:var(--white); padding:34px 0 44px;}
.foot-grid{display:flex; flex-direction:column; gap:22px;}
.foot-name{font-family:var(--helv); font-weight:700; font-size:1rem;}
.foot-tag{font-size:.82rem; color:var(--muted); margin-top:3px;}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.9rem;}
.foot-links a{color:var(--ink-soft); text-decoration:none; font-weight:500;}
.foot-links a:hover{color:var(--cobalt);}
.socials{display:flex; gap:12px;}
.socials a{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  display:flex; align-items:center; justify-content:center; transition:all .15s ease;}
.socials a:hover{border-color:var(--cobalt); background:var(--tint); transform:translateY(-2px);}
.socials svg{width:18px; height:18px; fill:var(--ink-soft);}
.socials a:hover svg{fill:var(--cobalt);}
.foot-copy{font-size:.78rem; color:var(--muted); margin-top:20px;}

/* ---------- десктоп ---------- */
@media (min-width:840px){
  .hero{padding:76px 0 44px;}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  .hero h1{font-size:3.3rem;}
  .photo-frame{margin:0 0 0 auto;}
  .contact{padding:70px 0 90px;}
  .contact-card{padding:40px 42px;}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .cards-grid{grid-template-columns:repeat(3,1fr);}
  .foot-grid{flex-direction:row; align-items:center; justify-content:space-between;}
  .page-title{font-size:2.4rem;}
}