@import url("/nav.css?v=4");
/* Mechanik · общие стили статей блога */
:root {
  --bg:#f7f3ea; --bg-elev:#ece4d3; --bg-soft:#e3d9c3; --bg-nav:rgba(247,243,234,0.85);
  --fg:#14140f; --fg-2:#5b5648; --fg-mute:#8a8375; --fg-fade:#a89e8a;
  --rule:#ddd5c2; --rule-soft:#e8e0cd;
  --accent:#c92e2e; --accent-hov:#a82121; --accent-dim:#9a2828; --success:#3f9d58;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'IBM Plex Sans',-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --max:1080px; --content:720px; --gutter:1.5rem; --radius:14px; --radius-lg:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font-body);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:0.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hov)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.crumbs{
  max-width:var(--content);margin:0 auto;padding:1.4rem var(--gutter) 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--fg-mute);display:flex;gap:0.55rem;flex-wrap:wrap;
}
.crumbs a{color:var(--fg-2)}
.crumbs .sep{color:var(--fg-fade)}
.crumbs .here{color:var(--fg)}

article{max-width:var(--content);margin:0 auto;padding:1.6rem var(--gutter) 3rem}

.a-head{margin-bottom:2.2rem}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.8rem;display:inline-flex;align-items:center;gap:0.5rem;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--accent)}
h1{
  font-family:var(--font-display);font-size:44px;font-weight:500;
  letter-spacing:-0.03em;line-height:1.06;color:var(--fg);margin-bottom:1rem;
}
h1 em{font-style:italic;font-weight:400;color:var(--fg-2)}
.a-meta{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--fg-mute);display:flex;gap:1rem;flex-wrap:wrap;
}
.a-lead{font-size:19px;line-height:1.6;color:var(--fg-2);margin-top:1.4rem}

h2{
  font-family:var(--font-display);font-size:29px;font-weight:500;letter-spacing:-0.02em;
  line-height:1.15;color:var(--fg);margin:2.8rem 0 1rem;
}
h2 em{font-style:italic;font-weight:400;color:var(--fg-2)}
h3{
  font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--fg);
  margin:1.8rem 0 0.6rem;
}
p{color:var(--fg-2);margin-bottom:1rem}
p strong{color:var(--fg);font-weight:600}
ul,ol{color:var(--fg-2);margin:0 0 1rem 1.3rem}
li{margin-bottom:0.45rem}
li strong{color:var(--fg)}

.callout{
  background:var(--bg-elev);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:10px;padding:1.1rem 1.3rem;margin:1.4rem 0;font-size:14.5px;color:var(--fg-2);
}
.callout strong{color:var(--fg)}

.cta-calc{
  background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:1.6rem 1.7rem;margin:1.8rem 0;position:relative;overflow:hidden;
}
.cta-calc::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 90% 0%,rgba(201,46,46,0.09) 0%,transparent 55%);
}
.cta-calc .t{
  font-family:var(--font-display);font-size:21px;font-weight:500;letter-spacing:-0.01em;
  color:var(--fg);margin-bottom:0.35rem;position:relative;
}
.cta-calc .d{font-size:14px;color:var(--fg-mute);margin-bottom:1rem;position:relative}
.btn{
  font-family:var(--font-body);font-size:14px;font-weight:500;
  padding:0.7rem 1.4rem;border-radius:999px;display:inline-flex;align-items:center;gap:0.4rem;
  background:var(--accent);color:#fff;transition:all 160ms ease;position:relative;
}
.btn:hover{background:var(--accent-hov);color:#fff;transform:translateY(-1px)}
.btn .arr{transition:transform 160ms ease}
.btn:hover .arr{transform:translateX(3px)}

table{
  width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:14px;
  background:var(--bg-elev);border:1px solid var(--rule);border-radius:10px;overflow:hidden;
}
th{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--fg-mute);text-align:left;padding:0.75rem 1rem;background:var(--bg-soft);
  border-bottom:1px solid var(--rule);
}
td{padding:0.7rem 1rem;border-bottom:1px solid var(--rule-soft);color:var(--fg-2);vertical-align:top}
tr:last-child td{border-bottom:none}
td.price{font-family:var(--font-mono);font-size:13px;color:var(--fg);white-space:nowrap}
td strong{color:var(--fg)}

/* ---------- адаптив таблиц: горизонтальная прокрутка на узких экранах ---------- */
.table-wrap{
  margin:1.2rem 0 1.6rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); border-radius:10px; background:var(--bg-elev);
  background-image:
    linear-gradient(to right, var(--bg-elev), rgba(0,0,0,0)),
    linear-gradient(to left,  var(--bg-elev), rgba(0,0,0,0)),
    linear-gradient(to right, rgba(0,0,0,.18), rgba(0,0,0,0)),
    linear-gradient(to left,  rgba(0,0,0,.18), rgba(0,0,0,0));
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-repeat:no-repeat;
  background-size:32px 100%, 32px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
}
.table-wrap > table{ margin:0; border:0; border-radius:0; background:transparent; min-width:30rem }
.table-wrap.wide > table{ min-width:36rem }
.table-wrap::-webkit-scrollbar{ height:7px }
.table-wrap::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:4px }
.table-wrap::-webkit-scrollbar-track{ background:transparent }
.table-wrap:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ---------- бит-сетка: степ-секвенсор на CSS, переиспользуемый компонент ---------- */
.beatgrid{ margin:26px 0; padding:18px 18px 14px; border:1px solid var(--rule);
  border-radius:12px; background:var(--bg-elev); }
.bg-title{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-mute); margin-bottom:14px; }
.bg-row{ display:grid; grid-template-columns:96px 1fr; align-items:center; gap:12px; margin-bottom:6px; }
.bg-name{ font-family:var(--font-mono); font-size:11.5px; color:var(--fg-2); text-align:right; }
.bg-steps{ display:grid; grid-template-columns:repeat(16,1fr); gap:3px; }
.bg-steps span{ height:20px; border-radius:3px; background:var(--bg-soft); }
.bg-steps span.beat{ background:var(--rule); }
.bg-steps span.on{ background:var(--fg-2); }
.bg-steps span.on.hit{ background:var(--accent); }
.bg-ruler{ display:grid; grid-template-columns:repeat(16,1fr); gap:3px; margin:8px 0 0 108px; }
.bg-ruler span{ font-family:var(--font-mono); font-size:9.5px; color:var(--fg-fade);
  text-align:center; line-height:1; }
.bg-ruler span.b{ color:var(--fg-mute); }
.beatgrid figcaption{ font-family:var(--font-mono); font-size:10.5px; line-height:1.6;
  color:var(--fg-mute); margin-top:12px; }
@media(max-width:560px){
  .bg-row{ grid-template-columns:62px 1fr; gap:8px; }
  .bg-name{ font-size:10px; }
  .bg-steps{ gap:2px } .bg-steps span{ height:16px; border-radius:2px }
  .bg-ruler{ gap:2px; margin-left:70px } .bg-ruler span{ font-size:8px }
}



details{border-bottom:1px solid var(--rule-soft)}
details:last-of-type{border-bottom:none}
summary{
  list-style:none;cursor:pointer;padding:1rem 0.2rem;font-size:16px;font-weight:600;color:var(--fg);
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent-hov)}
summary .tg{font-size:22px;color:var(--fg-fade);font-weight:300;transition:transform 250ms ease}
details[open] summary .tg{transform:rotate(45deg);color:var(--accent)}
details p{padding:0 0.2rem 1.1rem;font-size:14.5px}

.author{
  display:flex;gap:1.1rem;align-items:center;margin:2.8rem 0 0;
  background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius-lg);
  padding:1.4rem 1.5rem;
}
.author img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0}
.author .n{font-weight:600;color:var(--fg);margin-bottom:0.2rem}
.author p{font-size:13.5px;color:var(--fg-mute);margin:0;line-height:1.55}
.author a{color:var(--fg-2);border-bottom:1px dotted var(--fg-fade)}
.author a:hover{color:var(--accent-hov)}

.disclaimer{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;line-height:1.7;
  color:var(--fg-fade);margin-top:1.6rem;
}

/* карточки списка статей (/blog/) */
.post-list{display:flex;flex-direction:column;gap:0.8rem;margin-top:1rem}
.post-card{
  background:var(--bg-elev);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.3rem 1.5rem;display:block;transition:border-color 200ms ease,transform 200ms ease;
  color:inherit;
}
.post-card:hover{border-color:var(--accent-dim);transform:translateY(-2px);color:inherit}
.post-card .pc-tag{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--accent);margin-bottom:0.4rem;display:block;
}
.post-card .pc-title{
  font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-0.01em;
  color:var(--fg);line-height:1.2;margin-bottom:0.35rem;
}
.post-card .pc-desc{font-size:14px;color:var(--fg-mute);line-height:1.55}
.post-card .pc-meta{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--fg-fade);margin-top:0.6rem;
}


@media(max-width:640px){
  h1{font-size:32px}
  h2{font-size:24px}
  .a-lead{font-size:17px}
}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- v8: конец статьи (что ещё почитать + переходы) + соцстрока футера ---------- */
.readmore{border-top:1px solid #ddd5c2;max-width:var(--content);margin:48px auto 0;padding:26px var(--gutter) 0}
.readmore .rl{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8a8375;margin-bottom:16px}
.readmore ul{list-style:none;margin:0;padding:0}
.readmore li{margin:0 0 11px}
.readmore li a{font-family:'Fraunces',Georgia,serif;font-size:18px;color:#14140f;border-bottom:1px solid #ddd5c2;transition:color .16s ease,border-color .16s ease}
.readmore li a:hover{color:#c92e2e;border-color:#c92e2e}
.cross{display:flex;flex-wrap:wrap;gap:12px;max-width:var(--content);margin:26px auto 0;padding:0 var(--gutter)}
.cross a{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:11px 18px;border:1px solid #c4b9a1;border-radius:10px;color:#5b5648;transition:color .16s ease,border-color .16s ease,background .16s ease}
.cross a:hover{border-color:#c92e2e;color:#c92e2e;background:#f0e9db}
.cross a.calc{border-color:#c92e2e;color:#c92e2e}
.cross a.calc:hover{background:#c92e2e;color:#fff}
@media(max-width:560px){.readmore li a{font-size:16px}.cross a{font-size:11px;padding:10px 14px}}

/* in-article photo (full content width) */
.a-photo{margin:26px 0}
.a-photo img{display:block;width:100%;height:auto;border-radius:14px}
.a-photo.tall img{max-width:min(100%,520px);margin-left:auto;margin-right:auto}
.a-photo figcaption{font-family:var(--serif);font-weight:300;font-size:15px;line-height:1.5;color:var(--fg-mute);opacity:.75;margin-top:10px}