/* Шаблон «Тетрадь 2.0» — лист в клетку, маркер, пометки ручкой на полях */
:root{
  --paper:#F3F0E7; --ink:#15140F; --ink-soft:#4A4740; --pen:#2B4C7E; --mark:#CDE86B; --white:#FFFEFA;
  --grid:rgba(43,76,126,.055); --grid-strong:rgba(43,76,126,.11);
  --serif:'Literata',Georgia,'Times New Roman',serif;
  --hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.6,.05,.2,1); --spring:cubic-bezier(.2,1.25,.35,1);
}
*{box-sizing:border-box}
body{margin:0; color:var(--ink); background-color:var(--paper);
  background-image:linear-gradient(var(--grid-strong) 1px,transparent 1px),linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;
  font:400 19px/1.62 var(--serif); -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--pen); outline-offset:3px; border-radius:2px}
.sec-end{display:block; height:0}

/* шапка сайта и прогресс */
.progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:9; pointer-events:none}
.progress i{display:block; height:100%; width:0; background:var(--mark)}
.topbar{position:sticky; top:0; z-index:8; display:flex; gap:24px; align-items:center; padding:12px clamp(16px,4vw,48px);
  background:var(--ink); color:var(--paper); font:600 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.topbar .logo{text-decoration:none; font-size:13px}
.topbar .logo::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mark); margin-right:10px; vertical-align:1px; animation:blink 2.4s infinite}
@keyframes blink{50%{opacity:.25}}
.topbar .crumb{flex:1; opacity:.6}
.topbar .slot{opacity:.8}

/* лист: колонка текста + поля справа, слева — место под номера разделов и карандаш */
.page{max-width:1100px; margin:0 auto; padding:72px 32px 120px 96px}
.post{max-width:680px; position:relative}

.kicker{display:flex; flex-wrap:wrap; gap:6px 18px; font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 26px}
.kicker .rubric{color:var(--pen); text-decoration:none}
.post-title{position:relative; font-weight:800; font-size:clamp(38px,6vw,70px); line-height:1.04; letter-spacing:-.025em; margin:0 0 34px; font-variation-settings:"opsz" 72; text-wrap:balance}
.post-title .w{display:inline-block}
.post-title{width:calc(100% + 200px)}
.squig{position:absolute; left:0; bottom:-16px; width:38%; height:18px; overflow:visible}
.squig path{fill:none; stroke:var(--pen); stroke-width:2.4; stroke-linecap:round}
.lede{font-size:23px; line-height:1.5; margin:0 0 18px}
.byline{font:400 13px/1.4 var(--mono); color:var(--ink-soft); margin:0 0 8px}
.byline b{color:var(--ink); font-weight:600}

/* маркер: неровный край, проводится как рукой — быстро в начале, медленно в конце */
mark{color:inherit; padding:0 .1em; margin:0 -.04em; border-radius:.2em .5em .3em .6em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:linear-gradient(97deg,rgba(205,232,107,.2) 0,var(--mark) 1.5%,rgba(205,232,107,.92) 60%,var(--mark) 98%,rgba(205,232,107,.3) 100%) 0 78%/0% 70% no-repeat;
  transition:background-size 1.1s cubic-bezier(.25,.8,.3,1) .45s}
.is-in mark{background-size:100% 70%}
.post-title mark{background-size:0% 44%; background-position:0 90%; transition-delay:calc(var(--words,8) * 55ms + .35s)}
.post-title.is-in mark{background-size:100% 44%}

/* метка источника у цифры: «штампуется» после абзаца */
.src{display:inline-block; margin-left:5px; padding:3px 7px 2px; vertical-align:4px; cursor:help;
  font:600 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--pen); border:1px solid currentColor; border-radius:999px; background:var(--white)}
.js [data-r] .src{opacity:0; transform:scale(1.8) rotate(-10deg)}
.js .is-in .src{opacity:1; transform:none; transition:transform .4s cubic-bezier(.3,1.7,.5,1) .8s, opacity .15s ease .8s}

/* абзацы: чернила подсыхают — появляются синими и темнеют до чёрного */
.post p{margin:0 0 1.1em}
.js .intro > p[data-r], .js .sec > p[data-r], .js .has-note > p[data-r]{opacity:0; transform:translateY(12px); color:var(--pen)}
.js .intro > p.is-in, .js .sec > p.is-in, .js .has-note > p.is-in{opacity:1; transform:none; color:var(--ink);
  transition:opacity .8s ease, transform .8s var(--ease), color 1.8s ease .3s}
.js .post-head > [data-r]:not(.post-title):not(figure){opacity:0; transform:translateY(10px); transition:opacity .7s ease .5s, transform .7s var(--ease) .5s}
.js .post-head > .is-in{opacity:1!important; transform:none!important}

/* заголовок статьи: слова встают на строку, потом маркер и подчёркивание */
.js .post-title .w{opacity:0; transform:translateY(.45em) rotate(2deg); filter:blur(3px)}
.js .post-title.is-in .w{opacity:1; transform:none; filter:none; transition:opacity .5s ease calc(var(--i)*55ms), transform .7s var(--ease) calc(var(--i)*55ms), filter .5s ease calc(var(--i)*55ms)}
.squig path{stroke-dasharray:1; stroke-dashoffset:1}
.post-title.is-in .squig path{stroke-dashoffset:0; transition:stroke-dashoffset .9s var(--ease) calc(var(--words,8) * 55ms + 1.1s)}

/* разделы: номер в кружке на левом поле, сумма — рукой на правом */
h2{position:relative; font-weight:800; font-size:34px; line-height:1.14; letter-spacing:-.015em; margin:80px 0 18px; font-variation-settings:"opsz" 48}
h3{font-weight:600; font-size:23px; margin:40px 0 12px}
.sn{position:absolute; left:-74px; top:-6px; width:48px; height:48px; display:grid; place-items:center; font:700 27px/1 var(--hand); color:var(--pen)}
.sn svg{position:absolute; inset:0; overflow:visible}
.sn path{fill:none; stroke:var(--pen); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1}
.h2v{position:absolute; left:calc(100% + 48px); top:0; white-space:nowrap; font:700 30px/1 var(--hand); color:var(--pen); transform:rotate(-3deg)}
.h2v::after{content:""; position:absolute; left:-4px; right:-6px; bottom:-6px; height:2px; background:var(--pen); transform:scaleX(0); transform-origin:left; border-radius:2px}
.js h2 .sn b, .js h2 .h2v{opacity:0}
h2.is-in .sn b, h2.is-in .h2v{opacity:1; transition:opacity .4s ease .5s}
h2.is-in .sn path{stroke-dashoffset:0; transition:stroke-dashoffset .8s var(--ease) .1s}
h2.is-in .h2v::after{transform:scaleX(1); transition:transform .5s var(--ease) .9s}
.js .sec > h2[data-r], .js .sec > h3[data-r]{opacity:0; transform:translateY(10px)}
.js .sec > h2.is-in, .js .sec > h3.is-in{opacity:1; transform:none; transition:opacity .6s ease, transform .6s var(--ease)}

/* пометки на полях: стрелка дорисовывается, слова пишутся по одному */
.has-note{position:relative}
.note{position:absolute; left:calc(100% + 48px); top:0; width:236px; font:500 25px/1.08 var(--hand); color:var(--pen); transform:rotate(var(--nr,-2.5deg))}
.note svg{display:block; width:74px; height:48px; margin:0 0 4px -10px; overflow:visible}
.note path{fill:none; stroke:var(--pen); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.note .w{display:inline-block}
.js .note path{stroke-dasharray:1; stroke-dashoffset:1}
.js .note .w{clip-path:inset(0 100% 0 0)}
.note.is-in path{stroke-dashoffset:0; transition:stroke-dashoffset .7s var(--ease) .2s}
.note.is-in path + path{transition-duration:.25s; transition-delay:.85s}
.note.is-in .w{clip-path:inset(0 -4px 0 0); transition:clip-path .22s linear calc(1s + var(--i)*110ms)}

/* фото вклеено скотчем: падает, скотч «приклеивается», на наведении фото выпрямляется */
.post figure{margin:44px 0 52px; background:#fff; padding:12px 12px 16px; position:relative;
  box-shadow:0 1px 0 rgba(21,20,15,.06),0 18px 36px -18px rgba(21,20,15,.45); transform:rotate(var(--r,-1deg))}
.post figure::before,.post figure::after{content:""; position:absolute; top:-14px; width:104px; height:30px; z-index:1;
  background:rgba(205,232,107,.66); mix-blend-mode:multiply; transform-origin:0 50%;
  clip-path:polygon(3% 8%,10% 0,20% 9%,31% 1%,44% 8%,57% 0,70% 9%,83% 2%,94% 9%,100% 3%,97% 92%,88% 100%,75% 93%,62% 100%,49% 92%,36% 100%,23% 93%,11% 100%,0 94%)}
.post figure::before{left:8%; transform:rotate(-5deg)}
.post figure::after{right:8%; transform:rotate(4deg)}
.frame{overflow:hidden}
.frame img{display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; filter:saturate(.8) contrast(1.02); transition:transform 1.2s var(--ease), filter .6s ease}
.post figure figcaption{font:500 23px/1.15 var(--hand); color:var(--pen); margin:12px 4px 0}
.post figure figcaption .w{display:inline-block}
.js .post figure{opacity:0; transform:translateY(34px) rotate(calc(var(--r,-1deg) * 5))}
.js .post figure.is-in{opacity:1; transform:rotate(var(--r,-1deg)); transition:opacity .6s ease, transform 1.1s var(--spring), box-shadow .4s ease}
.js .post figure::before,.js .post figure::after{scale:0 1; transition:scale .35s var(--ease) .75s}
.js .post figure::after{transition-delay:.95s}
.js .post figure.is-in::before,.js .post figure.is-in::after{scale:1 1}
.js .post figure figcaption .w{opacity:0}
.js .post figure.is-in figcaption .w{opacity:1; transition:opacity .25s ease calc(1.1s + var(--i)*70ms)}
.js .post figure.is-in:hover{transform:rotate(0) translateY(-6px); box-shadow:0 1px 0 rgba(21,20,15,.06),0 30px 44px -20px rgba(21,20,15,.5); transition:transform .45s var(--ease), box-shadow .45s ease}
.post figure:hover img{transform:scale(1.03); filter:none}
.post-head figure{margin-top:48px}

/* «Коротко»: линия ручкой прочерчивается сверху вниз */
.tldr{position:relative; padding:4px 0 4px 26px; margin:4px 0 40px}
.tldr::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pen); transform-origin:top}
.tldr .lbl{font:600 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pen); margin:0 0 12px}
.tldr ul{margin:0; padding:0; list-style:none}
.tldr li{font-size:19px; margin:0 0 8px; padding-left:18px; position:relative}
.tldr li::before{content:"—"; position:absolute; left:0; color:var(--pen)}
.js .tldr::before{transform:scaleY(0)}
.js .tldr li{opacity:0; transform:translateX(-8px)}
.tldr.is-in::before{transform:none; transition:transform .8s var(--ease)}
.tldr.is-in li{opacity:1; transform:none; transition:opacity .5s ease calc(.3s + var(--i)*.18s), transform .5s var(--ease) calc(.3s + var(--i)*.18s)}

/* цитата — стикер */
.quote{margin:52px 0 60px 6%; max-width:540px; background:var(--mark); padding:28px 30px 30px; position:relative;
  font:700 31px/1.12 var(--hand); color:var(--ink); transform:rotate(1.6deg); box-shadow:0 22px 30px -22px rgba(21,20,15,.55)}
.quote p{margin:0}
.quote::after{content:""; position:absolute; right:0; bottom:0; width:34px; height:34px; background:linear-gradient(135deg,rgba(0,0,0,.14) 50%,var(--paper) 50%); transition:width .3s ease, height .3s ease}
.quote:hover::after{width:48px; height:48px}
.quote cite{display:block; margin-top:14px; font:600 11px/1.3 var(--mono); font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.js .quote{opacity:0; transform:translateY(-30px) rotate(-6deg) scale(1.04)}
.js .quote.is-in{opacity:1; transform:rotate(1.6deg); transition:opacity .5s ease, transform .9s cubic-bezier(.2,1.3,.4,1)}

/* врезка */
.box{position:relative; border:1.5px dashed var(--ink); padding:30px 28px 22px; margin:44px 0}
.box .lbl{position:absolute; top:-20px; left:20px; margin:0; padding:0 8px; background:var(--paper); font:700 27px/1 var(--hand); color:var(--pen); transform:rotate(-2deg)}
.box p:last-child{margin:0}
.js .box{opacity:0; transform:translateY(12px)}
.js .box.is-in{opacity:1; transform:none; transition:opacity .7s ease, transform .7s var(--ease)}

/* таблица — расчёт на полях, итог обводится ручкой */
.tbl{overflow-x:auto; margin:28px 0 36px}
.tbl table{width:100%; border-collapse:collapse; font:400 15px/1.4 var(--mono)}
.tbl th{font:600 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); text-align:left; padding:0 12px 10px 0; border-bottom:1.5px solid var(--ink)}
.tbl td{padding:10px 12px 10px 0; border-bottom:1px dashed rgba(21,20,15,.28)}
.tbl td.n{text-align:right; white-space:nowrap}
.tbl th:not(:first-child){text-align:right}
.tbl tr.total td{border-bottom:0; padding-top:20px; font-weight:600; font-size:17px}
.tbl tr.total strong{font-weight:600}
.circ{position:relative; display:inline-block; padding:2px 8px}
.circ svg{position:absolute; inset:-10px -14px; width:calc(100% + 28px); height:calc(100% + 20px); overflow:visible}
.circ path{fill:none; stroke:var(--pen); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1}
.js .tbl tbody tr{opacity:0; transform:translateX(-10px)}
.tbl.is-in tbody tr{opacity:1; transform:none; transition:opacity .4s ease calc(var(--i)*.14s), transform .5s var(--ease) calc(var(--i)*.14s)}
.tbl.is-in .circ path{stroke-dashoffset:0; transition:stroke-dashoffset 1s var(--ease) .9s}

/* списки */
.post ul, .post ol{margin:0 0 1.2em; padding:0; list-style:none}
.post ul:not([class]) li{position:relative; padding-left:26px; margin-bottom:8px}
.post ul:not([class]) li::before{content:"—"; position:absolute; left:0; color:var(--pen)}
.steps{counter-reset:s}
.steps li{position:relative; padding:0 0 0 56px; margin:0 0 20px; min-height:40px}
.steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:-4px; width:38px; height:38px;
  border:2px solid var(--pen); border-radius:50% 46% 52% 48%; display:grid; place-items:center; font:700 24px/1 var(--hand); color:var(--pen)}
.js .steps li::before{scale:0; rotate:-90deg}
.js .steps li{opacity:0}
.steps.is-in li{opacity:1; transition:opacity .5s ease calc(var(--i)*.22s)}
.steps.is-in li::before{scale:1; rotate:0deg; transition:scale .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i)*.22s), rotate .45s var(--ease) calc(var(--i)*.22s)}
.strikes li{padding:14px 0 16px; border-bottom:1px dashed rgba(21,20,15,.25)}
del{text-decoration:none; position:relative; font-weight:600}
del::after{content:""; position:absolute; left:-3px; right:-3px; top:54%; height:2.5px; background:var(--pen); border-radius:2px; transform:scaleX(0) rotate(-1.5deg); transform-origin:left}
.is-in del::after{transform:scaleX(1) rotate(-1.5deg); transition:transform .5s var(--ease) calc(.3s + var(--i,0)*.4s)}
.checklist li{position:relative; padding:4px 0 12px 48px}
.checklist .box-i{position:absolute; left:0; top:6px; width:26px; height:26px; border:1.8px solid var(--ink); border-radius:3px}
.checklist svg{position:absolute; left:2px; top:-6px; width:34px; height:34px; overflow:visible}
.checklist path{fill:none; stroke:var(--pen); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1}
.checklist.is-in path{stroke-dashoffset:0; transition:stroke-dashoffset .45s var(--ease) calc(.2s + var(--i)*.28s)}
.checklist li:not(.done) .box-i::after{content:"?"; position:absolute; left:6px; top:-8px; font:700 30px/1 var(--hand); color:var(--pen)}

/* источники */
.sources{margin-top:88px; font:400 13px/1.55 var(--mono); color:var(--ink-soft)}
.sources h2{font:600 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; margin:0 0 14px; color:var(--ink)}
.sources ol{counter-reset:src}
.sources li{position:relative; padding-left:28px; margin-bottom:6px}
.sources li::before{counter-increment:src; content:counter(src) "."; position:absolute; left:0}

/* финал: подпись редактора и призыв */
.post-foot{margin-top:72px}
.sign{display:flex; align-items:flex-end; gap:16px; margin:0 0 56px; color:var(--pen)}
.sign span{font:500 25px/1 var(--hand)}
.sign small{display:block; font:400 12px/1.3 var(--mono); color:var(--ink-soft); margin-top:6px}
.sign svg{width:150px; height:52px; overflow:visible}
.sign path{fill:none; stroke:var(--pen); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1}
.js .sign span{opacity:0}
.sign.is-in span{opacity:1; transition:opacity .5s ease}
.sign.is-in path{stroke-dashoffset:0; transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.3,1) .3s}
.cta{background:var(--paper); border:1.5px solid var(--ink); padding:40px 40px 36px; position:relative; box-shadow:10px 10px 0 var(--ink)}
.cta h3{font-weight:800; font-size:32px; line-height:1.12; margin:0 0 12px; letter-spacing:-.01em}
.cta p{margin:0 0 26px; max-width:520px}
.cta .hand{position:absolute; right:32px; top:-24px; font:700 26px/1 var(--hand); color:var(--pen); transform:rotate(-4deg); background:var(--paper); padding:0 8px}
.btn{display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:var(--paper); text-decoration:none;
  font:600 14px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:18px 24px; transition:transform .25s var(--ease), background .25s}
.btn:hover{background:var(--pen); transform:translateY(-2px)}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.js .cta{opacity:0; transform:translate(10px,10px); box-shadow:0 0 0 var(--ink)}
.js .cta.is-in{opacity:1; transform:none; box-shadow:10px 10px 0 var(--ink); transition:opacity .5s ease, transform .6s var(--ease), box-shadow .6s var(--ease)}

/* карандаш на левом поле: ведёт линию по прочитанному */
.pencil{position:absolute; left:-104px; top:0; bottom:0; width:16px; pointer-events:none}
.pencil .line{position:absolute; left:7px; top:0; width:1.5px; height:var(--tip,0px); background:repeating-linear-gradient(var(--pen) 0 7px,transparent 7px 11px)}
.pencil svg{position:absolute; left:0; top:var(--tip,0px); width:16px; height:58px; margin-top:-56px; transition:transform .3s ease}
.pencil.moving svg{transform:rotate(4deg)}

@media (max-width:1180px){
  .post-title{width:auto}
  .page{padding:48px 20px 96px; max-width:760px}
  .note{position:static; width:auto; transform:none!important; margin:-6px 0 26px; padding:0 0 0 18px; border-left:2px solid var(--pen); font-size:23px}
  .note svg{display:none}
  .h2v{position:static; display:inline-block; margin:10px 0 0; font-size:26px}
  .h2v::after{bottom:-4px}
  .sn{position:relative; left:auto; top:auto; width:40px; height:40px; margin:0 0 8px; font-size:23px}
  .pencil{display:none}
}
@media (max-width:640px){
  body{font-size:18px}
  .post-title{font-size:clamp(32px,9vw,42px)}
  .lede{font-size:20px}
  h2{font-size:27px; margin-top:64px}
  .quote{margin-left:0; font-size:27px}
  .cta{padding:28px 22px; box-shadow:6px 6px 0 var(--ink)}
  .js .cta.is-in{box-shadow:6px 6px 0 var(--ink)}
  .cta .hand{right:14px}
  .topbar .crumb{display:none}
  .post figure{padding:8px 8px 12px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important; animation:none!important}}

/* P-25: двери воронки из статьи — кнопка-призрак внизу и всплывающая плашка */
.cta .acts{display:flex; flex-wrap:wrap; gap:12px}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper)}
.lead-pop{position:fixed; right:24px; bottom:24px; z-index:60; width:340px; box-sizing:border-box;
  background:var(--white); color:var(--ink); border:1.5px solid var(--ink); box-shadow:8px 8px 0 var(--ink);
  padding:26px 24px 24px; opacity:0; transform:translateY(16px); transition:opacity .35s ease, transform .45s var(--ease)}
.lead-pop.is-open{opacity:1; transform:none}
.lead-pop[hidden]{display:none!important}
.lead-pop-t{font-weight:800; font-size:23px; line-height:1.15; letter-spacing:-.01em; margin:0 30px 10px 0}
.lead-pop-p{font-size:17px; line-height:1.45; margin:0 0 18px; color:var(--ink-soft)}
.lead-pop .btn{padding:15px 18px; font-size:13px}
.lead-pop-x{position:absolute; top:6px; right:6px; width:40px; height:40px; border:0; background:none;
  color:var(--ink); font:400 28px/1 var(--mono); cursor:pointer}
.lead-pop-x:hover{color:var(--pen)}
@media (max-width:860px){
  .lead-pop{left:0; right:0; bottom:0; width:auto; max-height:33.3vh; overflow:auto; border-width:1.5px 0 0;
    box-shadow:0 -10px 24px rgba(21,20,15,.14); padding:16px 18px 16px}
  .lead-pop-t{font-size:20px; margin-bottom:6px}
  .lead-pop-p{font-size:15px; line-height:1.4; margin-bottom:12px}
  .lead-pop .btn{padding:13px 16px}
}

/* P-21: правая колонка — карточка «Разберём ваш сайт» и «С этим читают» (§5.3) */
.rail{margin-top:64px}
.rail-cta{display:none}
.rail-lbl{font:600 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--pen); margin:0 0 16px}
.rail-next ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.rail-next a{display:block; color:var(--ink); text-decoration:none}
.rail-next img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; box-sizing:border-box;
  background:#fff; padding:6px; box-shadow:0 1px 0 rgba(21,20,15,.06),0 14px 22px -16px rgba(21,20,15,.45);
  transition:transform .3s var(--ease)}
.rail-next span{display:block; margin-top:10px; font-weight:700; font-size:16px; line-height:1.25}
.rail-next a:hover span{color:var(--pen)}
.rail-next a:hover img{transform:rotate(-1deg)}
@media (max-width:640px){
  .rail-next ul{grid-template-columns:1fr; gap:16px}
  .rail-next a{display:grid; grid-template-columns:120px minmax(0,1fr); gap:14px; align-items:start}
  .rail-next span{margin-top:0; font-size:15px}
}
@media (min-width:1181px){
  .page{display:grid; grid-template-columns:680px 260px; column-gap:32px; align-items:stretch}
  .rail{margin-top:0; min-width:0}
  .rail-cta{display:block; position:sticky; top:76px; z-index:5; margin:0 0 40px; padding:22px 20px 20px;
    background:var(--white); border:1.5px solid var(--ink); box-shadow:6px 6px 0 var(--ink)}
  .rail-t{font-weight:800; font-size:22px; line-height:1.15; letter-spacing:-.01em; margin:0 0 10px}
  .rail-p{font-size:16px; line-height:1.45; margin:0 0 16px; color:var(--ink-soft)}
  .rail-cta .btn{width:100%; box-sizing:border-box; justify-content:space-between; padding:14px 16px; font-size:12px}
  .rail-next ul{grid-template-columns:1fr; gap:22px}
  .rail-next span{font-size:15px}
}
@media (min-width:1181px) and (max-width:1399px){
  .post-title{width:auto}
  .note{position:static; width:auto; transform:none!important; margin:-6px 0 26px; padding:0 0 0 18px; border-left:2px solid var(--pen); font-size:23px}
  .note svg{display:none}
  .h2v{position:static; display:inline-block; margin:10px 0 0; font-size:26px}
  .h2v::after{bottom:-4px}
}
@media (min-width:1400px){
  .page{max-width:1400px; column-gap:308px}
}