/* «Большие вопросы образования»: оформление чтения эссе, акцентов и иллюстраций.
   Цвета берутся из токенов атласа (app.css); на отдельной странице essays/<slug>/ они задаются здесь же запасными значениями.
   Принцип: смысл всегда передан словом; цвет, подложка и значок только помогают его заметить. Без CSS текст читается целиком. */
:root{
  --es-bg:var(--bg,#fff);--es-soft:var(--bg-soft,#F5F7FB);--es-ink:var(--ink,#12151A);--es-ink2:var(--ink-2,#3C4350);--es-muted:var(--muted,#5C6575);
  --es-line:var(--line,#E4E7EE);--es-line2:var(--line-2,#CBD2E0);--es-blue:var(--blue,#2F5BEA);--es-blue-soft:var(--blue-soft,#E6ECFD);
  --es-mark:#FFE9A8;--es-mark-ink:#12151A;--es-warn:#9A4210;--es-warn-soft:#FFEADB;--es-ok-soft:#DCF3E8;--es-lilac:#ECE7FE;--es-sky:#DDEEFB;
  --es-head:var(--head,"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif);--es-text:var(--text,"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif);
  /* словарь для рисунков */
  --fg-ink:#12151A;--fg-ink2:#3C4350;--fg-line:#8794AD;--fg-soft:#F5F7FB;--fg-bg:#FFFFFF;
  --fg-a:#2F5BEA;--fg-a-soft:#E6ECFD;--fg-b:#B4561F;--fg-b-soft:#FFEADB;--fg-c:#1B7F57;--fg-c-soft:#DCF3E8;--fg-d:#6D4BC4;--fg-d-soft:#ECE7FE;
}
/* ---------- страница-оболочка (отдельный адрес эссе) ---------- */
body.es-static{margin:0;background:var(--es-bg);color:var(--es-ink);font:400 18px/1.7 var(--es-text);-webkit-text-size-adjust:100%}
.es-skip{position:absolute;left:-999px;top:0;background:var(--es-blue);color:#fff;padding:8px 12px;z-index:100}.es-skip:focus{left:0}
.es-top{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--es-line);font:600 14px/1.3 var(--es-head)}
.es-top a,.es-foot a{color:var(--es-ink2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.es-top a:hover,.es-foot a:hover{color:var(--es-blue);text-decoration:underline}
.es-foot{padding:24px 20px 48px;text-align:center;border-top:1px solid var(--es-line);margin-top:32px}
/* ---------- статья ---------- */
.essay{max-width:1080px;margin:0 auto;padding:28px 20px 56px;color:var(--es-ink);font-family:var(--es-text)}
.essay *{box-sizing:border-box}
.essay :focus-visible{outline:3px solid var(--es-blue);outline-offset:2px;border-radius:6px}
.es-head{max-width:760px;margin:0 auto 22px}
.es-kicker{margin:0 0 10px;font:700 13px/1.3 var(--es-head);letter-spacing:.04em;text-transform:uppercase;color:var(--es-muted)}
.essay h1{font:800 clamp(27px,5.2vw,40px)/1.18 var(--es-head);letter-spacing:-.015em;margin:0 0 14px;text-wrap:balance}
.es-sub{margin:0 0 16px;font-size:19px;line-height:1.55;color:var(--es-ink2);font-style:italic}
.es-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 10px;font-size:14px;color:var(--es-muted)}
.es-status{font-weight:600;color:var(--es-ink2)}
.es-honest,.es-preview{margin:10px 0 0;padding:10px 14px;border-left:4px solid var(--es-line2);background:var(--es-soft);font-size:14.5px;line-height:1.55;color:var(--es-ink2);border-radius:0 12px 12px 0}
.es-preview{border-left-color:var(--es-warn);background:var(--es-warn-soft);color:var(--es-warn)}
.es-layout{display:grid;grid-template-columns:minmax(0,230px) minmax(0,720px);gap:44px;justify-content:center;align-items:start}
.es-toc{position:sticky;top:84px;font-size:14px;line-height:1.4;max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
.es-toc-h{margin:0 0 8px;font:700 12px/1.2 var(--es-head);letter-spacing:.06em;text-transform:uppercase;color:var(--es-muted)}
.es-toc ol{margin:0;padding:0;list-style:none;counter-reset:s}
.es-toc li{counter-increment:s;margin:0 0 2px}
.es-toc a{display:block;padding:7px 8px 7px 10px;border-left:2px solid var(--es-line);color:var(--es-ink2);text-decoration:none;border-radius:0 8px 8px 0;min-height:44px}
.es-toc a:hover{background:var(--es-soft);color:var(--es-blue);border-left-color:var(--es-blue)}
.es-body{min-width:0;font-size:18px;line-height:1.72}
.es-body p{margin:0 0 1.05em;overflow-wrap:break-word;hyphens:auto}
.es-body h2{font:800 clamp(22px,3.4vw,27px)/1.25 var(--es-head);margin:1.7em 0 .6em;letter-spacing:-.01em;text-wrap:balance;scroll-margin-top:96px}
.es-body h3{font:700 19px/1.3 var(--es-head);margin:1.6em 0 .6em;scroll-margin-top:96px;color:var(--es-ink2)}
.es-body a{color:var(--es-blue);text-underline-offset:3px;overflow-wrap:anywhere}
.es-body strong{font-weight:700;color:var(--es-ink)}
.es-body em{font-style:italic}
/* маркер: мягкая подложка, текст сохраняет цвет и контраст; при печати и в режиме высокой контрастности остаётся подчёркивание */
.es-mark{background:linear-gradient(transparent 12%,var(--es-mark) 12%,var(--es-mark) 92%,transparent 92%);color:var(--es-mark-ink);padding:0 .12em;border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors:active){.es-mark{background:Mark;color:MarkText;forced-color-adjust:none}}
@media print{.es-mark{background:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}}
/* смысловые метки: слово + значок */
.es-tag{display:flex;align-items:center;gap:7px;margin:1.3em 0 .35em!important;font:700 12.5px/1.2 var(--es-head);letter-spacing:.05em;text-transform:uppercase;color:var(--es-ink2)}
.es-ico{width:20px;height:20px;flex:none}
.es-block{margin:1.1em 0 1.2em;padding:2px 0 2px 16px;border-left:3px solid var(--es-line2)}
.es-block>p:last-child{margin-bottom:0}
.es-block .es-tag{margin-top:.2em!important}
.es-k-objection{border-left-color:var(--es-warn)}.es-k-objection .es-tag{color:var(--es-warn)}
.es-k-data{border-left-color:var(--es-blue)}.es-k-data .es-tag{color:var(--es-blue)}
.es-k-limit{border-left-style:dashed}
.es-k-question{border-left-color:var(--es-blue)}
.es-sec>.es-tag{margin-top:2em!important}
/* выносной тезис: после аргументации, дословный; без заливки блока */
.es-pull{margin:1.5em 0 1.8em;padding:4px 0 4px 20px;border-left:4px solid var(--es-blue)}
.es-pull-label{margin:0 0 4px!important;font:700 12px/1.2 var(--es-head);letter-spacing:.06em;text-transform:uppercase;color:var(--es-muted)}
.es-pull blockquote{margin:0}
.es-pull blockquote p{font:600 clamp(19px,3vw,22px)/1.45 var(--es-head);margin:0 0 6px;color:var(--es-ink)}
.es-pull-src{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
/* рисунки */
.es-fig{margin:1.8em 0 2em;padding:0}
.es-fig-svg{border:1px solid var(--es-line);border-radius:18px;background:var(--fg-bg);padding:12px;max-width:560px;margin:0 auto}
.es-fig-svg svg{display:block;width:100%;height:auto;max-width:100%}
.es-fig figcaption{max-width:560px;margin:10px auto 0;font-size:15px;line-height:1.5;color:var(--es-ink2)}
.es-fig-n{font-weight:700;margin-right:6px;color:var(--es-ink)}
.es-fig-credit{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--es-muted)}
.es-fig-desc{max-width:560px;margin:8px auto 0;font-size:15px}
.es-fig-desc summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--es-blue);font-weight:600}
.es-fig-desc p{margin:0 0 .7em}
.es-fig-grounds{font-size:14px;color:var(--es-muted)}
/* словарь рисунков (классы fg-*) */
.fg-bg{fill:var(--fg-bg)}
.fg-box{fill:var(--fg-soft);stroke:var(--fg-line);stroke-width:1.6}
.fg-box-a{fill:var(--fg-a-soft);stroke:var(--fg-a);stroke-width:1.6}
.fg-box-b{fill:var(--fg-b-soft);stroke:var(--fg-b);stroke-width:1.6}
.fg-box-c{fill:var(--fg-c-soft);stroke:var(--fg-c);stroke-width:1.6}
.fg-box-d{fill:var(--fg-d-soft);stroke:var(--fg-d);stroke-width:1.6}
.fg-line{fill:none;stroke:var(--fg-line);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fg-line-a{fill:none;stroke:var(--fg-a);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fg-line-b{fill:none;stroke:var(--fg-b);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fg-line-c{fill:none;stroke:var(--fg-c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fg-dash{stroke-dasharray:6 5}
.fg-arrowhead{fill:var(--fg-ink2);stroke:none}
.fg-dot{fill:var(--fg-ink2)}
.fg-dot-a{fill:var(--fg-a)}.fg-dot-b{fill:var(--fg-b)}.fg-dot-c{fill:var(--fg-c)}
.fg-text{fill:var(--fg-ink);font-family:var(--es-text);font-size:16px}
.fg-text-b{fill:var(--fg-ink);font-family:var(--es-head);font-weight:700;font-size:16px}
.fg-text-s{fill:var(--fg-ink2);font-family:var(--es-text);font-size:15px}
.fg-text-a{fill:var(--fg-a);font-family:var(--es-head);font-weight:700;font-size:16px}
.fg-text-m{text-anchor:middle}
.fg-text-e{text-anchor:end}
/* связи и переходы */
.es-links{margin-top:2.6em;padding-top:1.2em;border-top:1px solid var(--es-line)}
.es-links h2{margin-top:0}
.es-links-g h3{margin:1.1em 0 .2em;font-size:16px}
.es-links-hint{font-size:14px!important;color:var(--es-muted);margin:0 0 .5em!important}
.es-links ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.es-links li{font-size:15px;line-height:1.4}
.es-links li>a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--es-line2);border-radius:999px;text-decoration:none;color:var(--es-ink);background:var(--es-bg)}
.es-links li>a:hover{border-color:var(--es-blue);color:var(--es-blue)}
.es-link-note{display:none}
.es-refs,.es-sec-refs{font-size:15.5px}
.es-ref{font-size:15.5px;line-height:1.55;margin:0 0 .8em!important;padding-left:2.2em;text-indent:-2.2em}
.es-ref-n{display:inline-block;width:2.2em;text-indent:0;font-weight:700;color:var(--es-muted)}
.es-ref:target,.es-body p:target{background:var(--es-blue-soft);border-radius:6px}
.es-next{max-width:720px;margin:44px auto 0;padding:22px 20px;border:1px solid var(--es-line);border-radius:22px;background:var(--es-soft)}
.es-next-lead{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--es-ink2)}
.es-next-go{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--es-bg);border:1px solid var(--es-line2);text-decoration:none;color:var(--es-ink)}
.es-next-go:hover{border-color:var(--es-blue)}
.es-next-k{font:700 12px/1.2 var(--es-head);letter-spacing:.06em;text-transform:uppercase;color:var(--es-muted)}
.es-next-go b{font:800 19px/1.3 var(--es-head)}
.es-next-go span:last-child{font-size:15px;line-height:1.5;color:var(--es-ink2)}
.es-next-row{display:flex;flex-wrap:wrap;gap:6px 22px;margin:12px 0 0;font-size:15px}
.es-next-row a{min-height:44px;display:inline-flex;align-items:center}
/* телефон */
@media (max-width:900px){
  .es-layout{display:block}
  .es-toc{position:static;max-height:none;margin:0 0 20px;padding:0;border:1px solid var(--es-line);border-radius:16px;background:var(--es-soft)}
  .es-toc ol{padding:4px 8px 8px}
  .es-toc-h{padding:12px 14px 0}
}
@media (max-width:520px){
  .essay{padding:18px 16px 44px}
  .es-body{font-size:17px;line-height:1.7}
  .es-block{padding-left:12px}
  .es-pull{padding-left:14px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media print{
  .es-top,.es-foot,.es-toc,.es-next,.es-skip{display:none!important}
  .essay{padding:0;max-width:none}.es-layout{display:block}
  .es-fig,.es-pull,.es-block{break-inside:avoid}
  .es-body a{color:inherit;text-decoration:underline}
  .es-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#444;word-break:break-all}
}
/* ---------- вход в направление: главная и «Разборы» ---------- */
.bq{margin:28px 0 8px}
.bq-lead{max-width:62ch;font-size:16px;line-height:1.6;color:var(--es-ink2);margin:6px 0 14px}
.bq .gl-wrap{margin:0 -4px 6px}
.es-card-k{display:flex;align-items:center;gap:10px;font:600 13px/1.3 var(--es-text);color:var(--es-muted)}
.es-card-n{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--es-blue);display:grid;place-items:center;font:800 16px/1 var(--es-head);color:var(--es-blue)}
.es-card-h{margin:2px 0 0;font:800 20px/1.25 var(--es-head)}
.es-card .tile-lead{min-height:calc(1.55em*5);-webkit-line-clamp:6;font-size:14.5px;color:var(--es-ink2)}
.es-card .gl-act .btn-primary{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.bq-cta{margin-top:6px}
@media (max-width:560px){.es-card-h{font-size:19px}.bq-cta{width:100%;justify-content:center}}
.bq-cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;background:var(--es-blue);color:#fff;text-decoration:none;font:700 15px/1 var(--es-head);border:0;cursor:pointer}
.bq-cta:hover{background:var(--blue-hover,#2450DA)}
.bq-note{font-size:13.5px;color:var(--es-muted);margin:10px 0 0}
.bq-road{max-width:760px;list-style:none;margin:16px 0 0;padding:0;counter-reset:r}
.bq-road li{display:block;padding:0 0 16px 46px;position:relative;counter-increment:r}
.bq-road li::before{content:counter(r);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;border:2px solid var(--es-blue);display:grid;place-items:center;font:800 14px/1 var(--es-head);color:var(--es-blue)}
.bq-road li::after{content:"";position:absolute;left:15px;top:36px;bottom:4px;width:2px;background:var(--es-line2)}
.bq-road li:last-child::after{display:none}
.bq-road a{font:800 18px/1.3 var(--es-head);color:var(--es-ink);text-decoration:none}
.bq-road a:hover{color:var(--es-blue);text-decoration:underline}
.bq-road p{margin:4px 0 0;font-size:15px;color:var(--es-ink2)}
.bq-road .bq-then{font-size:14px;color:var(--es-muted)}
.es-view{padding:8px 0 40px}
.es-view .es-back{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font:600 14px/1 var(--es-head);color:var(--es-ink2);background:none;border:0;cursor:pointer;text-decoration:none}
.es-view .es-back:hover{color:var(--es-blue)}
.es-progress{position:sticky;top:0;height:3px;background:transparent;z-index:30}
.es-progress i{display:block;height:100%;width:0;background:var(--es-blue)}
.es-copy-note{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--es-ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:90}
/* внутри приложения прокручивается .view, а не страница */
.view .es-toc{top:12px;max-height:calc(100vh - 150px)}
.view .essay h2,.view .essay h3,.view .essay p{scroll-margin-top:16px}
.view .es-progress{position:sticky;top:0}
.es-note{margin:1.2em 0 1.4em;padding:10px 14px 10px 16px;border-left:3px dashed var(--es-warn);background:var(--es-soft);border-radius:0 12px 12px 0;font-size:16px;line-height:1.6;color:var(--es-ink2)}
.es-note .es-tag{margin:0 0 .3em!important;color:var(--es-warn)}
.es-note p:last-child{margin:0}
.es-changes{margin:2em 0 0;font-size:15px;color:var(--es-ink2)}
.es-changes summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--es-blue)}
.es-changes ul{padding-left:1.2em}