/* ------------------------------------------------------------------
   vrndoska — тема «plank-run».
   Каркас не повторяет другие сайты сети: вместо героя с фотографией —
   «раскладка досок» из CSS-полос, материалы идут строками-профилями с
   колонкой сечения, характеристики — таблицей на всю ширину.
   Палитра: тёплый песок #faf7f2, кора #3c332b, охра #a9702f, хвоя #4a6152.
------------------------------------------------------------------- */

:root{
  --bg:#faf7f2; --panel:#ffffff; --bark:#3c332b; --ink:#2b2621;
  --dim:#6f6559; --line:#e4dcd0; --ochre:#a9702f; --pine:#4a6152;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:400 16px/1.72 'Manrope', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--pine)}
a:hover{color:var(--ochre)}

/* ── шапка ─────────────────────────────────────────────────────── */
.top{background:var(--panel); border-bottom:1px solid var(--line)}
.top .wrap{max-width:var(--wrap); margin:0 auto; padding:14px 20px;
           display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.brand{font:700 21px/1 'Literata', Georgia, serif; color:var(--bark); text-decoration:none}
.brand em{font-style:normal; color:var(--ochre)}
.top nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap; font-size:15px}
.top nav a{color:var(--dim); text-decoration:none}
.top nav a:hover{color:var(--bark)}

/* ── «раскладка досок» вместо героя ────────────────────────────── */
.run{background:var(--bark); color:#f3ece2; position:relative; overflow:hidden}
.run::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(90deg,
    #4a4036 0 78px, #443b31 78px 82px, #3f362d 82px 160px, #453c32 160px 164px);
}
.run .wrap{max-width:var(--wrap); margin:0 auto; padding:40px 20px 36px; position:relative}
.run .crumbs{font:400 13px/1.5 'Bitter', Georgia, serif; color:#b7a893; margin-bottom:12px}
.run .crumbs a{color:#b7a893}
.run h1{font:700 clamp(25px,3.4vw,36px)/1.24 'Literata', Georgia, serif}
.run .sub{margin-top:12px; color:#cdbfa9; max-width:68ch}
.facts{margin-top:20px; display:flex; flex-wrap:wrap; gap:8px}
.fact{font:400 13px/1 'Bitter', Georgia, serif; background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.14); padding:8px 12px; border-radius:2px; color:#e6dccd}
.fact b{color:#e3a75a; font-weight:600}

/* ── контент ───────────────────────────────────────────────────── */
main{max-width:var(--wrap); margin:0 auto; padding:32px 20px 52px}
article{max-width:78ch}
article h2{font:600 clamp(20px,2.3vw,26px)/1.3 'Literata', Georgia, serif; margin:32px 0 12px}
article h3{font:600 18px/1.4 'Manrope', sans-serif; margin:22px 0 10px}
article p{margin-bottom:15px}
article ul, article ol{margin:0 0 18px 22px}
article li{margin-bottom:7px}
.lead{font-size:18px; color:var(--dim)}

article table{width:100%; border-collapse:collapse; margin:0 0 22px; font-size:15px}
article th, article td{border-bottom:1px solid var(--line); padding:10px 12px; text-align:left}
article th{background:#f2ece3; font:600 14px/1.4 'Bitter', Georgia, serif}
article td:first-child{font-weight:500}

/* ── строки-профили материалов ─────────────────────────────────── */
.planks{margin:22px 0; border-top:1px solid var(--line)}
.plank{display:grid; grid-template-columns:96px 1fr auto; gap:16px; align-items:center;
       padding:14px 0; border-bottom:1px solid var(--line)}
.plank .cut{height:38px; border-radius:2px;
            background:repeating-linear-gradient(90deg,#c69354 0 8px,#b8863f 8px 12px)}
.plank .cut.hollow{background:repeating-linear-gradient(90deg,#c69354 0 6px,#8f6a34 6px 9px,#c69354 9px 15px)}
.plank img{width:96px; height:64px; object-fit:cover; border-radius:2px}
.plank b{display:block; font-size:16px}
.plank span{font-size:14px; color:var(--dim)}
.plank .size{font:400 13px/1 'Bitter', Georgia, serif; color:var(--ochre); white-space:nowrap}

.note{background:#f2ece3; border-left:3px solid var(--ochre); padding:14px 18px; margin:0 0 20px}

/* ── подвал ────────────────────────────────────────────────────── */
footer{background:var(--bark); color:#b7a893; margin-top:26px}
footer .wrap{max-width:var(--wrap); margin:0 auto; padding:28px 20px;
             display:flex; flex-wrap:wrap; gap:14px 36px; font-size:14px}
footer a{color:#e3d6c2}
footer .author{margin-left:auto}

@media (max-width:760px){
  .plank{grid-template-columns:64px 1fr; }
  .plank .size{grid-column:2; }
}