/* ai-artur.ru/blog, стиль «Маркер». Токены, шапка, подвал, кнопки и маркер взяты с главной (artur-site/index.html). */

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/onest-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/onest-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/onest-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/onest-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-arrow.woff2) format('woff2');unicode-range:U+2192}

:root{
  --paper:#FAFAF8; --ink:#101114; --mut:#62646B; --hair:#E2E2DD; --hl:#FFE01A;
  --sans:'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --pad:clamp(20px, 5vw, 80px);
  --gap:clamp(12px, 1.67vw, 24px);
  --nav-h:76px;
  --fs-h2:clamp(48px, 7.6vw, 124px);
  --fs-lead:clamp(21px, 2.1vw, 32px);
  --fs-body:clamp(17px, 1.3vw, 20px);
  --fs-title:clamp(42px, 5.8vw, 96px);
  --fs-text:clamp(19px, 1.4vw, 20px);
  --fs-t2:clamp(29px, 3vw, 46px);
  --fs-t3:clamp(22px, 1.8vw, 27px);
  --fs-quote:clamp(26px, 2.6vw, 40px);
  --fs-row:clamp(24px, 2.55vw, 40px);
  --fs-rel:clamp(21px, 1.95vw, 30px);
  --fs-ask:clamp(62px, 10.6vw, 176px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-pen:cubic-bezier(.55,.05,.3,1);
}

/* base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--paper)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0; background:var(--paper); color:var(--ink); font:400 var(--fs-body)/1.55 var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip}
body::after{content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.03; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/240px 240px}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0; padding:0}
ul,ol{list-style:none}
a{color:inherit; text-decoration:none}
img,svg{display:block}
::selection{background:var(--hl); color:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:4px; border-radius:2px}
[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{width:100%; max-width:1680px; margin-inline:auto; padding-inline:var(--pad)}
.g12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap)}
.meta{font:500 12px/1.3 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mut)}

/* marker: рисует marker.js, без JS плоская подсветка */
.mk{background:none; color:inherit}
html:not(.js) .mk{background:var(--hl); padding:0 .08em; -webkit-box-decoration-break:clone; box-decoration-break:clone}
html:not(.js) .mk[data-mk-when="hover"]{background:none; padding:0}
html:not(.js) a:hover .mk[data-mk-when="hover"],
html:not(.js) a:focus-visible .mk[data-mk-when="hover"]{background:var(--hl)}
[data-mk-host]{position:relative}
.mk-ink{position:absolute; z-index:-1; pointer-events:none; transform-origin:0 50%}
.mk-ink svg{width:100%; height:100%; overflow:visible}
.mk-wrap{display:block; position:relative; z-index:0; isolation:isolate}
.nw{white-space:nowrap}

/* pen */
.pen{position:absolute; overflow:visible; pointer-events:none; color:var(--ink)}
.pen path{fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round}
.js .pen path{stroke-dasharray:1 1; stroke-dashoffset:1}
.pen.is-drawn path{stroke-dashoffset:0; transition:stroke-dashoffset .95s var(--ease-pen)}
.pen.is-drawn path:nth-child(2){transition-duration:.3s; transition-delay:.8s}

/* header */
.hdr{position:fixed; inset:0 0 auto 0; z-index:50; background:rgba(250,250,248,.94); transition:box-shadow .2s var(--ease)}
@supports (backdrop-filter:blur(1px)){.hdr{background:rgba(250,250,248,.82); backdrop-filter:saturate(1.2) blur(10px)}}
.hdr.is-scrolled{box-shadow:0 1px 0 var(--hair)}
.hdr__in{display:grid; grid-template-columns:auto auto minmax(0,1fr) auto auto; grid-template-areas:"logo status . links cta"; align-items:center; column-gap:clamp(16px,2.2vw,32px); height:var(--nav-h); transition:height .24s var(--ease-io)}
.hdr.is-scrolled .hdr__in{height:64px}
.logo{grid-area:logo; font:800 22px/1 var(--sans); letter-spacing:-.02em; white-space:nowrap; padding:6px 0}
.logo span{display:inline-block; margin:0 .07em}
.status{grid-area:status; display:inline-flex; align-items:center; gap:10px; min-width:0; font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mut); white-space:nowrap}
.status__dot{position:relative; width:9px; height:9px; border-radius:50%; background:#16D35A; flex:none}
.status__dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:#16D35A; z-index:-1; animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1); opacity:.7} 80%,100%{transform:scale(2.8); opacity:0}}
.links{grid-area:links}
.links ul{display:flex; align-items:center; gap:clamp(20px,2.4vw,36px)}
.links a{display:inline-block; font:500 15px/1 var(--sans); padding:8px 1px; white-space:nowrap; background:linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%) no-repeat 0 0/0% 100%; transition:background-size .28s var(--ease-pen)}
.links a[aria-current]{background-size:100% 100%}
.pill{grid-area:cta; display:inline-flex; align-items:center; height:40px; padding:0 20px; border:1.5px solid var(--ink); border-radius:999px; font:600 14px/1 var(--sans); white-space:nowrap; transition:background-color .15s var(--ease), color .15s var(--ease)}

/* список блога */
.bl-head{padding-top:calc(var(--nav-h) + clamp(40px, 7vw, 120px))}
.bl-head__top{border-top:1.5px solid var(--ink); padding-top:clamp(18px,2vw,28px); align-items:start}
.bl-head__label{grid-column:1/3; padding-top:.5em}
.bl-head__title{grid-column:3/13; font:800 var(--fs-h2)/.92 var(--sans); letter-spacing:-.05em; text-wrap:balance}
.bl-head__body{margin-top:clamp(40px,5.5vw,84px)}
.bl-head__sub{grid-column:3/11; font:500 var(--fs-lead)/1.38 var(--sans); letter-spacing:-.018em; max-width:28em; text-wrap:pretty}

.bl-sec{padding-block:clamp(64px,8vw,128px) clamp(110px,12vw,190px)}
.bl__count{margin-bottom:14px}
.bl{border-top:1.5px solid var(--ink)}
.bl__item{border-bottom:1px solid var(--hair); transition:border-color .15s var(--ease)}
.bl__link{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:baseline; padding:clamp(22px,2.4vw,36px) 0 clamp(24px,2.6vw,40px)}
.bl__link:focus-visible{outline-offset:6px}
.bl__date{grid-column:1/3; grid-row:1; white-space:nowrap; transition:color .15s var(--ease)}
.bl__title{grid-column:3/12; grid-row:1; font:700 var(--fs-row)/1.12 var(--sans); letter-spacing:-.03em; text-wrap:balance}
.bl__desc{grid-column:3/11; grid-row:2; margin-top:clamp(10px,1vw,14px); font:400 var(--fs-body)/1.5 var(--sans); color:var(--mut); max-width:40em; text-wrap:pretty}
.bl__link::after{content:"→"; grid-column:12/13; grid-row:1; justify-self:end; font:500 20px/1 var(--mono); transition:transform .25s var(--ease)}

/* статья */
.art{padding-top:calc(var(--nav-h) + clamp(40px, 6.5vw, 110px))}
.art__head{border-top:1.5px solid var(--ink); padding-top:clamp(18px,2vw,28px); align-items:start}
.art__back{grid-column:1/3; justify-self:start; padding-top:.5em; transition:color .15s var(--ease)}
.art__title{grid-column:3/13; font:800 var(--fs-title)/.98 var(--sans); letter-spacing:-.045em; margin-left:-.04em; text-wrap:balance}
.art__intro{margin-top:clamp(36px,4.6vw,72px); align-items:baseline}
.art__meta{grid-column:1/3; display:flex; flex-direction:column; gap:10px}
.art__lead{grid-column:3/11; font:500 var(--fs-lead)/1.38 var(--sans); letter-spacing:-.018em; max-width:28em; text-wrap:pretty}
.art__main{margin-top:clamp(48px,5.6vw,88px)}
.art__body{grid-column:3/11; max-width:35em; font-size:var(--fs-text); line-height:1.62; overflow-wrap:break-word}
.art__body > *{text-wrap:pretty}
.art__body > * + *{margin-top:1.15em}
.art__body > h2{margin-top:2.05em; font:800 var(--fs-t2)/1.04 var(--sans); letter-spacing:-.04em; text-wrap:balance}
.art__body > h3{margin-top:1.7em; font:700 var(--fs-t3)/1.18 var(--sans); letter-spacing:-.025em; text-wrap:balance}
.art__body > :is(h2,h3) + *{margin-top:.8em}
.art__body a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.18em}

.list{display:flex; flex-direction:column; gap:.6em}
.list > li{padding-left:30px}
.list > li::before{content:""; display:inline-block; width:6px; height:6px; margin:0 18px 0 -24px; border-radius:50%; background:var(--ink); vertical-align:.2em}
.list--num{counter-reset:n}
.list--num > li{counter-increment:n; padding-left:48px}
.list--num > li::before{content:counter(n, decimal-leading-zero); width:48px; height:auto; margin:0 0 0 -48px; border-radius:0; background:none; font:500 14px/1 var(--mono); letter-spacing:.06em; color:var(--mut); vertical-align:baseline}

.art__body > .q{margin-block:clamp(44px,4.6vw,72px)}
.art__body > .q + *{margin-top:0}
.q > p:first-child{font:500 var(--fs-quote)/1.2 var(--sans); letter-spacing:-.028em; text-indent:-.44em; text-wrap:pretty}
.q__src{margin-top:clamp(16px,1.6vw,24px)}

/* призыв */
.cta{padding-block:clamp(120px,14vw,220px) clamp(100px,11vw,170px)}
.cta__in{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title title" "sub act"; align-items:center; column-gap:var(--gap)}
.cta__title{grid-area:title; font:800 var(--fs-ask)/.88 var(--sans); letter-spacing:-.05em; margin-left:-.05em}
.cta__title .line{display:block}
.cta__sub{grid-area:sub; margin-top:clamp(28px,3.2vw,48px); font:500 var(--fs-lead)/1.25 var(--sans); letter-spacing:-.02em}
.cta__act{grid-area:act; position:relative; margin-top:clamp(28px,3.2vw,48px)}
.arrow-cta{right:calc(100% + 14px); top:calc(50% - .64 * clamp(60px,6vw,100px)); width:clamp(120px,12vw,200px); height:auto}
.arrow-cta path{stroke-width:4.2}
.btn{position:relative; display:inline-flex; align-items:center; gap:14px; height:68px; padding:0 32px 0 34px; border-radius:999px; background:var(--ink); color:var(--paper); font:600 19px/1 var(--sans); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; isolation:isolate; transition:color .25s var(--ease), transform .12s var(--ease)}
.btn::before{content:""; position:absolute; z-index:-1; inset:-4px -30px; background:var(--hl); transform:translateX(-104%) skewX(-18deg); transition:transform .5s var(--ease-pen)}
.btn:active{transform:scale(.98)}
.btn__arr{font-family:var(--mono); font-weight:500; transition:transform .25s var(--ease)}

/* похожие */
.rel{padding-bottom:clamp(100px,11vw,170px)}
.rel__label{margin-bottom:14px}
.rel__list{border-top:1.5px solid var(--ink)}
.rel__item{border-bottom:1px solid var(--hair); transition:border-color .15s var(--ease)}
.rel__link{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--gap); align-items:baseline; padding:clamp(18px,1.9vw,28px) 0}
.rel__link:focus-visible{outline-offset:6px}
.rel__date{grid-column:1/3; white-space:nowrap; transition:color .15s var(--ease)}
.rel__title{grid-column:3/12; font:700 var(--fs-rel)/1.15 var(--sans); letter-spacing:-.025em; text-wrap:balance}
.rel__link::after{content:"→"; grid-column:12/13; justify-self:end; font:500 18px/1 var(--mono); transition:transform .25s var(--ease)}
.rel:has(.rel__list:empty){display:none}

/* footer */
.foot{border-top:1.5px solid var(--ink)}
.foot__in{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px; padding-block:24px 32px}

@media (hover:hover){
  .links a:hover{background-size:100% 100%}
  .pill:hover{background:var(--hl)}
  .btn:hover{color:var(--ink)}
  .btn:hover::before{transform:translateX(0) skewX(-18deg)}
  .btn:hover .btn__arr{transform:translateX(5px)}
  .art__back:hover{color:var(--ink)}
  .bl__item:hover,.rel__item:hover{border-bottom-color:var(--ink)}
  .bl__link:hover .bl__date,.rel__link:hover .rel__date{color:var(--ink)}
  .bl__link:hover::after,.rel__link:hover::after{transform:translateX(5px)}
}
.bl__link:focus-visible .bl__date,.rel__link:focus-visible .rel__date{color:var(--ink)}

@media (min-width:1100px){
  .art__body > .q{margin-right:-26%}
}

@media (max-width:1099px){
  .bl-head__sub,.art__lead{grid-column:3/13}
  .art__body{grid-column:3/13}
  .art__intro{row-gap:20px}
  .art__meta{grid-column:3/13; grid-row:1; flex-direction:row; flex-wrap:wrap; gap:6px 0}
  .art__meta > * + *::before{content:"·"; margin-inline:10px}
  .art__lead{grid-row:2}
  .bl__link,.rel__link{row-gap:10px}
  .bl__date,.rel__date{grid-column:3/12; grid-row:1}
  .bl__title,.rel__title{grid-column:3/12; grid-row:2}
  .bl__desc{grid-row:3; margin-top:0}
  .bl__link::after,.rel__link::after{grid-row:2}
}

@media (max-width:899px){
  :root{--nav-h:100px}
  .hdr__in{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"logo status cta" "links links links"; grid-template-rows:58px auto; height:auto; column-gap:14px}
  .hdr.is-scrolled .hdr__in{height:auto}
  .links{overflow:hidden; max-height:42px; border-top:1px solid var(--hair); transition:max-height .26s var(--ease-io), border-color .26s var(--ease-io)}
  .hdr.is-compact .links{max-height:0; border-top-color:transparent}
  .links ul{height:42px; justify-content:flex-start; gap:28px}
  .links a{font-size:15px}
  .bl-head__top,.art__head,.art__intro,.bl-head__body,.art__main{grid-template-columns:minmax(0,1fr); row-gap:16px}
  .bl-head__label,.bl-head__title,.bl-head__sub,.art__back,.art__title,.art__meta,.art__lead,.art__body{grid-column:1/-1}
  .bl-head__label,.art__back{padding-top:0}
  .art__body{max-width:36em}
  .bl__link,.rel__link{grid-template-columns:minmax(0,1fr) auto}
  .bl__date,.rel__date{grid-column:1; grid-row:1}
  .bl__link::after,.rel__link::after{grid-column:2; grid-row:1; font-size:17px}
  .bl__title,.rel__title{grid-column:1/-1; grid-row:2}
  .bl__desc{grid-column:1/-1; grid-row:3}
  .cta__in{grid-template-columns:minmax(0,1fr); grid-template-areas:"title" "sub" "act"}
  .cta__act{justify-self:start}
  .arrow-cta{right:auto; left:calc(100% + 14px); transform:scaleX(-1); width:clamp(110px,18vw,150px); top:calc(50% - .64 * clamp(55px,9vw,75px))}
}

@media (max-width:759px){
  .art__title{font-size:clamp(32px, 9.4vw, 46px)}
  .cta__title{font-size:14.6vw}
  .list > li{padding-left:26px}
  .list > li::before{margin-left:-24px}
  .list--num > li{padding-left:42px}
  .list--num > li::before{width:42px; margin-left:-42px; font-size:13px}
  .btn{height:62px; padding:0 26px 0 28px; font-size:17px}
  .foot__in{flex-direction:column; align-items:flex-start}
}

@media (max-width:420px){
  .status{font-size:10px; letter-spacing:.06em; gap:8px}
  .pill{height:38px; padding:0 15px; font-size:13px}
  .arrow-cta{display:none}
}
@media (max-width:350px){
  .status{letter-spacing:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation:none !important}
  .js .pen path{stroke-dashoffset:0}
}