/* ============================================================
   SyncTly — «Технический журнал об инфраструктуре»
   Print-inspired editorial theme · warm cream / charcoal / terracotta
   Class system: semantic kebab-case  (block__element--modifier)
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=Manrope:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* palette — warm cream base, charcoal ink, terracotta accent (~36°) */
  --cream-100:#F6F0E4;
  --cream-50:#FBF8F1;
  --paper:#FFFDF7;
  --ink:#26221B;
  --ink-soft:#5C5548;
  --ink-faint:#8A8271;
  --accent:#C2542A;      /* terracotta */
  --accent-deep:#9C3E1A;
  --accent-tint:#E8C9B4;
  --line:#E5DBC8;
  --line-soft:#EEE6D6;
  --dark:#211D16;
  --dark-2:#2A2419;

  /* fluid type */
  --step--1:clamp(.82rem, .78rem + .2vw, .95rem);
  --step-0:clamp(1rem, .95rem + .28vw, 1.18rem);
  --step-1:clamp(1.18rem, 1.08rem + .5vw, 1.42rem);
  --step-2:clamp(1.42rem, 1.25rem + .8vw, 1.75rem);
  --step-3:clamp(1.75rem, 1.4rem + 1.6vw, 2.4rem);
  --step-4:clamp(2.15rem, 1.55rem + 3vw, 3.6rem);
  --step-5:clamp(2.75rem, 1.85rem + 5vw, 5.4rem);
  --step-6:clamp(3.4rem, 2.2rem + 7.5vw, 7rem);

  /* spacing */
  --s-1:.5rem;
  --s-2:.9rem;
  --s-3:1.4rem;
  --s-4:2.2rem;
  --s-5:3.4rem;
  --s-6:5rem;

  --radius:3px;
  --shadow-sm:0 1px 2px rgba(38,34,27,.06);
  --shadow-md:0 18px 40px -22px rgba(38,34,27,.35);
  --maxw:1180px;
  --gut:clamp(1.25rem, 4vw, 3rem);
  --font-serif:'Fraunces', Georgia, serif;
  --font-sans:'Manrope', system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  min-height:100vh;
  background:var(--cream-100);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;padding:0;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--accent);color:#fff;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- Layout container ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gut);
}
.section{padding-block:clamp(3.5rem, 8vw, 6.5rem);}
.section--dark{background:var(--dark);color:#F1E9DA;}
.section--cream{background:var(--cream-50);}
.section--paper{background:var(--paper);}
.section--accent{background:var(--accent);color:#FBF1E7;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:600;line-height:1.04;letter-spacing:-.015em;color:var(--ink);}
.section--dark h1,.section--dark h2,.section--dark h3{color:#F6EFE1;}
p{max-width:62ch;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{content:"";width:1.4rem;height:2px;background:var(--accent);}
.section--dark .eyebrow,.section--accent .eyebrow{color:#F6D8C2;}
.section--dark .eyebrow::before,.section--accent .eyebrow::before{background:#F6D8C2;}

.lead{font-family:var(--font-serif);font-size:var(--step-2);line-height:1.32;font-weight:400;color:var(--ink-soft);}
.section--dark .lead{color:#CFC4AE;}
.prose p{margin-bottom:1.1em;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--ink);font-weight:700;}

/* ---------- Header / masthead ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(251,248,241,.9);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line);
}
.masthead__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:.85rem;
}
.brand{display:inline-flex;align-items:center;gap:.6rem;}
.brand__mark{width:30px;height:30px;flex:none;}
.brand__name{font-family:var(--font-serif);font-weight:700;font-size:1.4rem;letter-spacing:-.03em;color:var(--ink);}
.brand__name em{font-style:italic;color:var(--accent);}
.brand__tag{
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border-left:1px solid var(--line);
  padding-left:.65rem;
  line-height:1.15;
}
.masthead__tag{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.nav{display:flex;align-items:center;gap:1.6rem;}
.nav__link{
  position:relative;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink-soft);
  padding-block:.35rem;
  transition:color .2s ease;
}
.nav__link::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:100%;height:1.5px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav__link:hover{color:var(--ink);}
.nav__link:hover::after{transform:scaleX(1);}
.nav__link--active{color:var(--accent);}
.nav__link--active::after{transform:scaleX(1);}

.masthead__tools{display:flex;align-items:center;gap:.7rem;}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  padding:.72rem 1.25rem;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  transition:transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(194,84,42,.7);}
.btn--ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
.btn--ghost:hover{background:var(--ink);color:var(--cream-50);}
.btn--light{border-color:rgba(255,255,255,.55);color:#F6EFE1;background:transparent;}
.btn--light:hover{background:#F6EFE1;color:var(--dark);}
.btn--block{width:100%;}

.masthead__toggle{
  display:none;
  width:42px;height:42px;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  align-items:center;justify-content:center;
  position:relative;
}
.masthead__toggle span,
.masthead__toggle span::before,
.masthead__toggle span::after{
  content:"";
  position:absolute;
  display:block;
  width:19px;height:2px;background:var(--ink);
  transition:transform .3s ease, opacity .2s ease;
}
.masthead__toggle span::before{top:-6px;transform:rotate(45deg);}
.masthead__toggle span::after{top:6px;transform:rotate(-45deg);}

/* ---------- Article card ---------- */
.card{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.3rem;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-tint);}
.card__media{aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--cream-50);}
.card__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02);transition:transform .6s ease;}
.card:hover .card__media img{transform:scale(1.05);}
.card__media--wide{aspect-ratio:21/10;}
.card__media--sq{aspect-ratio:1/1;}
.card__meta{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;
}
.card__meta .dot{width:4px;height:4px;background:var(--ink-faint);border-radius:50%;}
.card__title{font-size:var(--step-2);line-height:1.1;}
.card__title a{background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;transition:background-size .3s ease;}
.card__title a:hover{background-size:100% 2px;}
.card__excerpt{color:var(--ink-soft);font-size:.98rem;}
.card__author{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin-top:.35rem;}

/* featured card (spans wide) */
.card--feature{grid-template-columns:1.15fr 1fr;padding:0;}
.card--feature .card__media{border-radius:0;min-height:100%;}
.card--feature .card__body{padding:1.6rem;display:flex;flex-direction:column;gap:.75rem;justify-content:center;}
.card--feature .card__title{font-size:var(--step-3);}
.card--feature .card__media img{filter:saturate(.75) contrast(1.05);}

/* ---------- Feature / card grid ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;}
.card-grid--4{grid-template-columns:repeat(4,1fr);}
.card-grid--2{grid-template-columns:repeat(2,1fr);}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:left;}
.stat__num{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:var(--step-4);
  line-height:.95;
  color:var(--accent);
  display:flex;align-items:baseline;gap:.25rem;
}
.section--dark .stat__num{color:#F6D8C2;}
.stat__unit{font-size:.5em;font-family:var(--font-mono);font-weight:700;letter-spacing:.05em;}
.stat__label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem;}
.section--dark .stat__label{color:#C9BEA9;}

/* ---------- CTA band ---------- */
.cta{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2.5rem;
  align-items:center;
}
.cta__title{font-size:var(--step-4);}
.cta__text{color:rgba(251,241,231,.86);margin-top:1rem;max-width:44ch;}
.cta__form{display:flex;flex-direction:column;gap:.7rem;}
.field{
  display:flex;
  gap:.5rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius);
  padding:.35rem;
}
.field input{
  flex:1;
  background:transparent;
  border:none;
  padding:.65rem .8rem;
  color:#fff;
  font-size:.95rem;
  min-width:0;
}
.field input::placeholder{color:rgba(255,255,255,.6);}
.field input:focus{outline:none;}
.cta__note{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;color:rgba(251,241,231,.7);}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-list__item{border-bottom:1px solid var(--line);}
.faq-list__q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1.5rem;
  text-align:left;
  padding:1.35rem 0;
  font-family:var(--font-serif);
  font-size:var(--step-1);
  font-weight:600;
  color:var(--ink);
}
.faq-list__q .ico{
  flex:none;
  width:34px;height:34px;
  border:1.5px solid var(--line);
  border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-mono);
  font-size:1.1rem;
  color:var(--accent);
  transition:transform .3s ease, background .3s ease;
}
.faq-list__item.is-open .faq-list__q .ico{background:var(--accent);color:#fff;transform:rotate(45deg);}
.faq-list__a{
  max-height:0;overflow:hidden;
  transition:max-height .4s ease, opacity .3s ease;
  opacity:0;
}
.faq-list__item.is-open .faq-list__a{max-height:400px;opacity:1;}
.faq-list__a p{padding-bottom:1.4rem;color:var(--ink-soft);}

/* ---------- Section header helper ---------- */
.section-head{max-width:44rem;margin-bottom:var(--s-5);}
.section-head__title{font-size:var(--step-4);margin-top:.8rem;}
.section-head .lead{margin-top:1rem;}
.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none;}
.section-head--row .section-head{margin-bottom:0;}

/* ---------- Footer ---------- */
.footer{background:var(--dark);color:#D8CDB8;padding-block:clamp(3rem,7vw,5rem);}
.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.5rem;}
.footer__brand .brand__name{color:#F6EFE1;}
.footer__brand .brand__tag{color:#8f8672;border-color:#3a3325;}
.footer__desc{color:#a89c84;font-size:.95rem;margin-top:1.2rem;max-width:34ch;}
.footer__col h4{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:#8f8672;font-weight:700;margin-bottom:1.1rem;
}
.footer__col a{display:block;color:#CFC4AE;font-size:.92rem;padding:.35rem 0;transition:color .2s ease, transform .2s ease;}
.footer__col a:hover{color:#F6EFE1;transform:translateX(3px);}
.footer__social{display:flex;gap:.6rem;margin-top:1.4rem;}
.footer__social a{
  width:38px;height:38px;border:1px solid #3a3325;border-radius:var(--radius);
  display:grid;place-items:center;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.05em;
  color:#a89c84;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.footer__social a:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.footer__bottom{
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:1.6rem;
  border-top:1px solid #3a3325;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.05em;color:#8f8672;
}
.footer__bottom .made{color:#a89c84;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .masthead__toggle{display:inline-flex;}
  .masthead__tag{display:none;}
  .masthead__row{flex-wrap:wrap;padding-block:.7rem;}
  .nav{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--cream-50);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    padding:0 var(--gut);
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease;
  }
  .masthead.is-open .nav{max-height:420px;}
  .nav__link{padding:.9rem 0;border-top:1px solid var(--line-soft);font-size:1.05rem;}
  .nav__link::after{display:none;}
  .nav__link--active{color:var(--accent);}

  .card--feature{grid-template-columns:1fr;}
  .card--feature .card__body{padding:1.3rem;}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid--4{grid-template-columns:repeat(2,1fr);}
  .cta{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.6rem;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1/-1;}
}
@media (max-width:560px){
  .card-grid,.card-grid--2,.card-grid--4{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1/-1;}
  .stats{grid-template-columns:1fr 1fr;}
  .section-head--row{flex-direction:column;align-items:flex-start;}
}

/* ---------- Motion ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.is-in{opacity:1;transform:none;}
.reveal--d1{transition-delay:.08s;}
.reveal--d2{transition-delay:.16s;}
.reveal--d3{transition-delay:.24s;}
.reveal--d4{transition-delay:.32s;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}
*{box-sizing:border-box}
img,svg,video{max-width:100%;height:auto}
html{-webkit-text-size-adjust:100%}