/*
Theme Name: DIY Garage
Theme URI: https://diy-garage.ru
Author: DIY Garage
Description: Кастомная тема для медиа-сайта DIY Garage — баннер с цитатой, masonry-раскладка статей в стиле "бирок", рубрики и теги.
Version: 1.0
Text Domain: diy-garage
*/

:root{
  --paper:#FAF9F5;
  --paper-dark:#F2EFE6;
  --ink:#23262B;
  --ink-soft:#4a4d52;
  --patina:#4C7A6E;
  --patina-dark:#35564D;
  --brass:#C89B3C;
  --rust:#B5462F;
  --line:#DAD4C4;
  --radius:3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  margin:0;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
img,svg{display:block; max-width:100%;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  color:var(--paper);
  border-bottom:3px solid var(--brass);
}
.header-inner{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; gap:20px; flex-wrap:wrap;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-size:22px; font-weight:700; letter-spacing:0.02em;
  text-transform:uppercase; font-family:'Onest',sans-serif;
}
.main-nav{display:flex; gap:24px; flex-wrap:wrap;}
.main-nav a{
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:0.04em;
  text-transform:uppercase; color:#c8c4ba; transition:color .15s; padding:6px 0;
  border-bottom:2px solid transparent;
}
.main-nav a:hover{color:#fff;}
.main-nav a.active{color:#fff; border-bottom-color:var(--patina);}

/* ---------- ruler divider ---------- */
.ruler{
  height:26px; background:var(--brass); position:relative; overflow:hidden;
  border-top:1px solid rgba(0,0,0,.15); border-bottom:1px solid rgba(0,0,0,.15);
}
.ruler svg{width:100%;height:100%;display:block;}

/* ---------- banner + quote ---------- */
.banner{max-width:1180px; margin:0 auto; padding:40px 24px 0;}
.banner-media{
  height:520px; border-radius:var(--radius); position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 30% 22%, rgba(200,155,60,.35), transparent 55%),
    linear-gradient(160deg,#2c4f47,#1d3530 60%, #17241f);
  display:flex; align-items:center; justify-content:center;
}
.banner-media svg{width:230px; height:230px; opacity:.92;}
.banner-media img{width:100%; height:100%; object-fit:cover;}
@media (max-width:700px){
  .banner-media{height:200px;}
  .banner-media svg{width:130px; height:130px;}
}
.banner-text{text-align:center; padding:34px 20px 6px;}
.banner-quote{
  max-width:700px; margin:0 auto; font-size:24px; font-style:italic;
  color:var(--ink-soft); line-height:1.5;
}

/* ---------- about strip ---------- */
.about-strip{max-width:1140px; margin:0 auto; padding:8px 24px 44px;}
.about-text{font-size:18px; line-height:1.65; color:var(--ink); max-width:760px; margin:0;}

/* ---------- article hub: rubric navigation moved out of header ---------- */
.hub{max-width:1140px; margin:0 auto; padding:34px 24px 6px;}
.hub-label{
  font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--ink-soft);
  letter-spacing:0.08em; display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.hub-label::before{content:""; width:22px; height:2px; background:var(--rust); display:inline-block;}
.hub-grid{display:flex; flex-wrap:wrap; gap:10px;}
.hub-card{
  display:flex; align-items:center; gap:10px;
  background:var(--paper-dark); border:1px solid var(--line);
  padding:10px 16px 10px 12px; border-radius:6px; cursor:pointer;
  transform:none;
  transition:transform .15s ease, background .15s, border-color .15s;
}
.hub-card .swatch{width:10px; height:10px; border-radius:50%; flex:none;}
.hub-card span:last-child{font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.02em;}
.hub-card:hover{transform:rotate(var(--r,0deg)) translateY(-2px); border-color:var(--patina);}
.hub-card-current{background:var(--ink); border-color:var(--ink);}
.hub-card-current span:last-child{color:var(--paper);}

/* ---------- filter zone wrapper (used on category/tag archive headings) ---------- */
.filter-zone{ max-width:1140px; margin:0 auto; padding:8px 24px 4px; }

/* ---------- article grid: pinterest-style masonry of hang-tag cards ---------- */
.grid{
  max-width:1140px; margin:0 auto; padding:18px 24px 60px;
  columns:2 420px; column-gap:32px;
}
@media (max-width:700px){ .grid{columns:1;} }

.tag-card{
  background:var(--paper-dark); border:1px solid var(--line);
  border-radius:8px; position:relative; padding:0 0 18px;
  display:inline-block; width:100%; margin:0 0 30px;
  break-inside:avoid;
  transform:none;
  transition:transform .2s ease, box-shadow .2s ease;
  overflow:hidden;
}
.tag-card:hover{transform:rotate(var(--r,0deg)) translateX(var(--x,0px)) translateY(-4px); box-shadow:0 10px 18px -10px rgba(35,38,43,.35); z-index:2;}
@media (max-width:700px){
  .tag-card:hover{transform:none; box-shadow:none;}
}
.tag-card .thumb{
  display:flex; align-items:center; justify-content:center; position:relative;
  border-bottom:1px dashed var(--line); overflow:hidden;
}
.tag-card .thumb img{width:100%; height:100%; object-fit:cover;}
.tag-card .thumb .stamp{
  position:absolute; bottom:8px; right:10px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px;
  color:rgba(35,38,43,.55); letter-spacing:.04em;
}
.tag-card .body-pad{padding:20px 20px 0 24px;}
.tag-card .cat-list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.tag-card .cat-list .cat{margin-bottom:0;}
.tag-card .cat{
  font-family:'JetBrains Mono',monospace; font-size:11px;
  color:var(--paper); background:var(--patina-dark);
  display:inline-block; padding:3px 8px; border-radius:2px; margin-bottom:12px;
}
.tag-card h3{
  font-family:'Inter'; font-weight:700; font-size:20px;
  text-transform:none; letter-spacing:0; line-height:1.3; margin-bottom:10px;
}
.tag-card p{font-size:15px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px;}
.tag-card .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.tag-card .tags span{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--patina-dark);}
.tag-card .tags span::before{content:"#";}
.tag-card .footer-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:#8a8d84;
  border-top:1px dashed var(--line); padding-top:12px; margin:0 20px 0 24px;
}
.tag-card.hidden{display:none;}

.empty-state{
  column-span:all; text-align:center; padding:60px 20px;
  font-family:'JetBrains Mono',monospace; color:var(--ink-soft);
  border:1px dashed var(--line); border-radius:6px;
}
.empty-state b{color:var(--rust); display:block; font-size:14px; margin-bottom:6px;}

/* ---------- single article page ---------- */
.single-wrap{max-width:760px; margin:0 auto; padding:48px 24px 80px;}
.single-wrap .cat-list{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.single-wrap .cat-list .cat{margin-bottom:0;}
.single-wrap .cat{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--paper);
  background:var(--patina-dark); display:inline-block; padding:3px 9px; border-radius:2px; margin-bottom:14px;
}
.single-wrap h1{font-size:clamp(28px,4vw,42px); line-height:1.2; margin-bottom:16px;}
.single-wrap .single-meta{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft);
  display:flex; gap:14px; margin-bottom:28px; border-bottom:1px dashed var(--line); padding-bottom:16px;
}
.single-wrap .featured{width:100%; border-radius:var(--radius); margin-bottom:28px;}
.single-wrap .entry-content{font-size:16px; line-height:1.75;}
.single-wrap .entry-content p{margin:0 0 20px;}
.single-wrap .entry-content img{border-radius:var(--radius); margin:20px 0;}
.single-wrap .entry-content h2{
  font-size:28px; line-height:1.25; margin:40px 0 18px; color:var(--ink);
}
.single-wrap .entry-content h3{
  font-size:21px; line-height:1.3; margin:30px 0 14px; color:var(--ink);
}
.single-wrap .entry-content blockquote{
  margin:28px 0; padding:18px 22px;
  background:var(--paper-dark); border-left:4px solid var(--brass);
  border-radius:0 6px 6px 0;
  font-family:'Inter'; font-style:italic; font-size:16px; line-height:1.65; color:var(--ink);
}
.single-wrap .entry-content blockquote p{margin:0 0 8px;}
.single-wrap .entry-content blockquote p:last-child{margin-bottom:0;}
.single-wrap .entry-content blockquote strong{
  font-family:'JetBrains Mono',monospace; font-style:normal; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--patina-dark); display:block; margin-bottom:6px;
}
.single-wrap .entry-tags{margin-top:36px; display:flex; flex-wrap:wrap; gap:8px;}
.single-wrap .entry-tags a{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--patina-dark);
  background:var(--paper-dark); border:1px solid var(--line); padding:5px 10px; border-radius:2px;
}

/* ---------- shelf of finds: scrollable carousel with a picture per item ---------- */
.shelf{max-width:1140px; margin:10px auto 0; padding:0 24px;}
.shelf-carousel{display:flex; align-items:center; gap:10px;}
.shelf-row{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 10px; flex:1; min-width:0;
}
.shelf-item{
  flex:0 0 200px; scroll-snap-align:start;
  background:var(--paper-dark); border:1px solid var(--line); border-radius:8px;
  padding:16px 16px 14px; display:flex; flex-direction:column; gap:8px;
  transition:border-color .15s, transform .15s;
}
.shelf-item:hover{border-color:var(--brass); transform:translateY(-2px);}
.shelf-thumb{
  width:100%; height:100px; border-radius:6px;
  background:var(--paper); display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line);
}
.shelf-thumb svg{width:44px; height:44px;}
.shelf-name{font-family:'Inter'; font-weight:600; font-size:14px; color:var(--ink); line-height:1.3;}
.shelf-note{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--patina-dark); line-height:1.4;}
.shelf-arrow{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--paper-dark); border:1px solid var(--line);
  font-size:18px; line-height:1; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s;
}
.shelf-arrow:hover{background:var(--brass); border-color:var(--brass); color:var(--ink);}
@media (max-width:700px){
  .shelf-arrow{display:none;}
}

/* ---------- workshop logbook: vertical timeline, deliberately unlike the tag-cards elsewhere ---------- */
.logbook{max-width:760px; margin:40px auto 70px; padding:0 24px;}
.logbook-timeline{position:relative; padding-left:22px;}
.logbook-timeline::before{
  content:""; position:absolute; left:4px; top:6px; bottom:6px; width:1px;
  background:var(--line);
}
.log-row{position:relative; padding-bottom:26px;}
.log-row:last-child{padding-bottom:0;}
.log-dot{
  position:absolute; left:-22px; top:4px; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2px solid var(--rust);
}
.log-date{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--rust);
  letter-spacing:.03em; display:block; margin-bottom:5px;
}
.log-body p{
  font-family:'Inter'; font-style:italic; font-size:15.5px; line-height:1.6;
  color:var(--ink-soft); margin:0;
}

/* ---------- «читайте также»: блок перелинковки внизу статьи ---------- */
.related-wrap{max-width:1140px; margin:20px auto 0; padding:0 24px 70px;}
.related-row{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 10px;
}
.related-card{
  flex:0 0 260px; scroll-snap-align:start;
  background:var(--paper-dark); border:1px solid var(--line); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.related-card:hover{transform:translateY(-3px); box-shadow:0 10px 18px -10px rgba(35,38,43,.35);}
.related-thumb{
  height:150px; display:flex; align-items:center; justify-content:center;
  border-bottom:1px dashed var(--line); overflow:hidden; position:relative;
}
.related-thumb img{width:100%; height:100%; object-fit:cover;}
.related-thumb .stamp{font-family:'JetBrains Mono',monospace; font-size:11px; color:rgba(35,38,43,.55);}
.related-body{padding:14px 16px 18px;}
.related-body .cat{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--paper);
  background:var(--patina-dark); display:inline-block; padding:3px 8px; border-radius:2px; margin-bottom:10px;
}
.related-body h4{
  font-family:'Inter'; font-weight:700; font-size:15px; line-height:1.35; margin:0; color:var(--ink);
}
@media (max-width:700px){
  .related-card{flex-basis:220px;}
}

/* ---------- footer ---------- */
footer{ background:var(--ink); color:var(--paper); padding:44px 24px 30px; margin-top:20px;}
.footer-inner{max-width:1180px;margin:0 auto;}
.footer-inner h3{font-size:13px; color:var(--brass); margin-bottom:16px; letter-spacing:0.08em;}
.sitemap{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
@media (max-width:760px){ .sitemap{grid-template-columns:repeat(2,1fr);} }
.sitemap-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.sitemap-col a{font-size:13.5px; color:#cfd0c9;}
.sitemap-col a:hover{color:#fff;}
.footer-bottom{
  margin-top:36px; padding-top:18px; border-top:1px solid #3a3d42;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:#767a72;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}