/* =========================================================
   Основание - справочник о загородном строительстве
   Design language: drafting room / рабочая документация
   Palette: cool drafting paper, ink-navy, blueprint steel, structural ochre
   Type: Big Shoulders Display (industrial condensed) + Source Serif 4 + IBM Plex Mono
   Signature: dimension-line dividers + faint blueprint grid
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap');

:root{
  --paper:       #EEF1F2;   /* cool drafting paper - page bg */
  --paper-2:     #E5E9EB;   /* panel */
  --paper-3:     #DAE0E3;   /* card edge / wells */
  --card:        #F7F8F8;   /* card face (slightly brighter than paper) */
  --ink:         #15202B;   /* deep blue-ink near-black */
  --ink-soft:    #44535F;   /* muted text */
  --ink-faint:   #76838D;   /* captions / meta */
  --steel:       #2E5A78;   /* blueprint blue - primary accent */
  --steel-deep:  #1C3D53;
  --steel-light: #5E8AA6;
  --ochre:       #BC7A24;   /* structural ochre - warm accent */
  --ochre-deep:  #8C5814;
  --ochre-light: #D9A24E;
  --brick:       #A0503A;   /* terracotta - used sparingly */
  --line:        rgba(21,32,43,.14);
  --line-strong: rgba(21,32,43,.30);
  --grid:        rgba(46,90,120,.07);
  --shadow:      0 1px 0 rgba(21,32,43,.04), 0 18px 44px -30px rgba(21,32,43,.55);

  --font-display:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-body:   'Source Serif 4', Georgia, serif;
  --font-mono:   'IBM Plex Mono', ui-monospace, monospace;

  --measure: 70ch;
  --gutter: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(17px,1.04rem + .15vw,19px);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint blueprint grid - the drafting-paper signature */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.5));
}

img,svg{ max-width:100%; display:block; }

a{ color:var(--steel-deep); text-decoration:none; }
a:hover{ color:var(--ochre-deep); }

::selection{ background:rgba(46,90,120,.18); }
:focus-visible{ outline:2.5px solid var(--steel); outline-offset:3px; border-radius:2px; }

/* ---------- Typographic scale ---------- */
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:.96; color:var(--ink); margin:0; text-transform:uppercase; }
h1{ font-size:clamp(2.9rem,6vw + 1rem,6rem); letter-spacing:.005em; }
h2{ font-size:clamp(2rem,3vw + 1rem,3.4rem); letter-spacing:.008em; }
h3{ font-size:clamp(1.4rem,1.4vw + .9rem,2rem); letter-spacing:.01em; }
h4{ font-family:var(--font-mono); font-weight:600; font-size:.92rem; letter-spacing:.04em; margin:0; color:var(--ink); }

p{ margin:0 0 1.1em; }
strong{ font-weight:600; color:var(--ink); }
em{ color:var(--steel-deep); font-style:italic; }

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:500;
  color:var(--steel);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.7rem;
}
.eyebrow::before{ content:"+"; color:var(--ochre); font-weight:600; }

.lead{
  font-size:clamp(1.18rem,1vw + 1rem,1.45rem);
  line-height:1.6;
  color:var(--ink-soft);
  font-weight:400;
  font-family:var(--font-body);
}

/* ---------- Layout shell ---------- */
.wrap{ width:min(1180px,100% - 2*var(--gutter)); margin-inline:auto; }
.prose{ max-width:var(--measure); }
section{ padding-block:clamp(48px,7vw,104px); }

/* ---------- Header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.8rem; }
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand .mark{ width:36px; height:36px; flex:none; color:var(--steel); }
.brand .name{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:.9; letter-spacing:.02em; text-transform:uppercase; }
.brand .name small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin-top:.3rem; }

.nav{ display:flex; align-items:center; gap:.1rem; }
.nav a{
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  color:var(--ink-soft); padding:.5rem .6rem; border-radius:4px;
  letter-spacing:.02em; white-space:nowrap; text-transform:uppercase;
}
.nav a:hover{ color:var(--ink); background:rgba(46,90,120,.08); }
.nav a[aria-current="page"]{ color:var(--steel); }
.nav a[aria-current="page"]::after{ content:""; display:block; height:2px; background:var(--ochre); margin-top:3px; border-radius:2px; }

.nav-toggle{ display:none; }
.burger{ display:none; border:1px solid var(--line-strong); background:transparent; width:44px; height:40px; border-radius:6px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; }

@media (max-width:1000px){
  .burger{ display:inline-flex; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:.5rem var(--gutter) 1rem;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .28s ease, visibility .28s;
  }
  .nav a{ padding:.85rem .2rem; border-bottom:1px solid var(--line); font-size:.9rem; }
  .nav a[aria-current="page"]::after{ display:none; }
  .nav-toggle:checked ~ .nav{ max-height:80vh; visibility:visible; }
}

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero .wrap{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem);
  align-items:center; padding-block:clamp(52px,8vw,116px);
}
.hero h1{ margin-bottom:.34em; }
.hero h1 .accent{ color:var(--ochre); }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 24px 44px rgba(21,32,43,.20)); }
@media (max-width:860px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:440px; margin-inline:auto; }
}

/* ---------- Dimension-line divider (signature) ---------- */
.dimline{ color:var(--steel); opacity:.85; }
.dimline svg{ width:100%; height:30px; }
.dimline .lab{ font-family:var(--font-mono); font-size:11px; fill:var(--steel); letter-spacing:.12em; }

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-mono); font-weight:600; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.5rem; border-radius:3px; cursor:pointer;
  border:1px solid transparent; transition:transform .15s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--steel); color:var(--paper); }
.btn-primary:hover{ background:var(--steel-deep); color:var(--paper); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:1.4rem; }
.cards.cols-3{ grid-template-columns:repeat(3,1fr); }
.cards.cols-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .cards.cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cards.cols-3,.cards.cols-2{ grid-template-columns:1fr; } }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px; padding:1.6rem 1.6rem 1.7rem;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.55rem;
  transition:transform .18s ease, border-color .2s ease;
  position:relative;
}
a.card:hover{ transform:translateY(-4px); border-color:var(--steel); color:var(--ink); }
.card .sheet{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--ochre-deep); text-transform:uppercase; }
.card h3{ font-size:1.5rem; }
.card p{ color:var(--ink-soft); font-size:.97rem; margin:0; }
.card .go{ margin-top:auto; font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); display:inline-flex; gap:.4rem; align-items:center; }

/* ---------- Article / content ---------- */
.section-head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3.4rem); }
.section-head .lead{ margin-top:1rem; }

.article h2{ margin-top:2.6em; margin-bottom:.55em; }
.article h2:first-child{ margin-top:0; }
.article h3{ margin-top:1.9em; margin-bottom:.4em; color:var(--steel-deep); }
.article p, .article ul, .article ol{ max-width:var(--measure); }
.article ul, .article ol{ padding-left:1.3em; }
.article li{ margin-bottom:.5em; }
.article li::marker{ color:var(--ochre); }

.article > .opener::first-letter{
  font-family:var(--font-display); font-weight:700;
  float:left; font-size:4.2rem; line-height:.72;
  padding:.08em .14em 0 0; color:var(--steel);
}

/* figure */
figure{ margin:2.4em 0; }
figure svg, figure img{
  width:100%; border-radius:8px; background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
figure.plain svg, figure.plain img{ background:none; border:none; box-shadow:none; }
figcaption{
  font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint);
  margin-top:.8rem; letter-spacing:.01em; line-height:1.55;
  border-left:2px solid var(--ochre); padding-left:.8rem; max-width:58ch;
}

/* two-column figure + text */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; margin:2.6em 0; }
.split.rev .split-art{ order:2; }
.split-art svg{ width:100%; border-radius:8px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.split-text > h3:first-child{ margin-top:0; }
@media (max-width:780px){ .split{ grid-template-columns:1fr; } .split.rev .split-art{ order:0; } }

/* note / callout */
.note{ border-radius:8px; padding:1.3rem 1.5rem; margin:2em 0; border:1px solid var(--line); background:var(--paper-2); max-width:var(--measure); }
.note h4{ margin-bottom:.4rem; display:flex; align-items:center; gap:.6rem; }
.note h4 svg{ width:20px; height:20px; flex:none; }
.note p:last-child{ margin-bottom:0; }
.note.warn{ background:#F3E7E0; border-color:rgba(160,80,58,.38); }
.note.warn h4{ color:var(--brick); }
.note.tip{ background:#E4EBEE; border-color:rgba(46,90,120,.30); }
.note.tip h4{ color:var(--steel-deep); }

/* steps (real sequence) */
.steps{ counter-reset:step; list-style:none; padding:0; max-width:var(--measure); margin:1.5em 0; }
.steps > li{ position:relative; padding:1.1rem 0 1.1rem 3.6rem; border-top:1px solid var(--line); }
.steps > li:last-child{ border-bottom:1px solid var(--line); }
.steps > li::before{
  counter-increment:step; content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:1.05rem;
  font-family:var(--font-mono); font-weight:600; font-size:1.05rem;
  color:var(--ochre-deep); line-height:1;
}
.steps > li strong{ display:block; margin-bottom:.15rem; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:1.15rem; font-weight:600; }

/* spec table */
.specs{ width:100%; border-collapse:collapse; margin:1.8em 0; font-size:.95rem; }
.specs caption{ text-align:left; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ochre-deep); margin-bottom:.8rem; }
.specs th, .specs td{ text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.specs thead th{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--line-strong); }
.specs tbody th{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; text-transform:uppercase; letter-spacing:.01em; color:var(--steel-deep); white-space:nowrap; }
.specs tr:hover td, .specs tr:hover th{ background:rgba(46,90,120,.05); }

/* dark feature band */
.band{ background:var(--steel-deep); color:#DCE6EC; }
.band h2,.band h3{ color:#F2F6F8; }
.band .eyebrow{ color:var(--ochre-light); }
.band .eyebrow::before{ color:var(--ochre-light); }
.band p{ color:#C3D2DB; }
.band a{ color:var(--ochre-light); }
.band .lead{ color:#D5E1E8; }

/* type list (house types) */
.tlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:2rem; }
@media (max-width:780px){ .tlist{ grid-template-columns:1fr; } }
.tcard{ display:grid; grid-template-columns:150px 1fr; gap:1.4rem; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.4rem; box-shadow:var(--shadow); }
.tcard .pic{ background:var(--paper-2); border-radius:6px; padding:.4rem; border:1px solid var(--line); }
.tcard .pic svg{ width:100%; height:auto; }
.tcard h3{ margin:0 0 .3rem; font-size:1.4rem; }
.tcard .meta{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ochre-deep); margin-bottom:.5rem; }
.tcard p{ margin:0; font-size:.94rem; color:var(--ink-soft); }
@media (max-width:500px){ .tcard{ grid-template-columns:1fr; } .tcard .pic{ max-width:170px; } }

/* glossary */
.gloss dt{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; text-transform:uppercase; letter-spacing:.01em; color:var(--steel-deep); margin-top:1.6em; }
.gloss dd{ margin:.3em 0 0; max-width:var(--measure); color:var(--ink-soft); }
.gloss dd + dt{ border-top:1px solid var(--line); padding-top:1.2em; }

/* pull quote */
.pull{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2.3rem); line-height:1.12; letter-spacing:.01em; color:var(--steel); max-width:20ch; margin:1.4em 0; }
.band .pull{ color:#F2F6F8; }

/* footer */
.site-foot{ background:var(--ink); color:#B8C4CC; padding-block:clamp(40px,6vw,72px) 2.2rem; }
.site-foot a{ color:#CBD6DD; }
.site-foot a:hover{ color:var(--ochre-light); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.4rem; }
@media (max-width:700px){ .foot-grid{ grid-template-columns:1fr; gap:1.8rem; } }
.foot-grid h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-light); margin-bottom:1rem; }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid li{ margin-bottom:.55rem; font-size:.94rem; }
.foot-brand .name{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--paper); }
.foot-brand p{ color:#8595A0; font-size:.9rem; max-width:36ch; margin-top:.6rem; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.78rem; color:#7C8A94; font-family:var(--font-mono); }
.foot-bottom .disc{ max-width:64ch; }

/* utilities */
.center{ text-align:center; margin-inline:auto; }
.mt-0{ margin-top:0; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--steel); color:#fff; padding:.7rem 1rem; z-index:100; }
.skip:focus{ left:1rem; top:1rem; }