html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#000;font-family:'Golos Text','Segoe UI',Arial,sans-serif}
[hidden]{display:none!important}
img,svg{max-width:100%}
h1,h2,h3{overflow-wrap:break-word}
*{box-sizing:border-box}
a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{text-decoration-thickness:3px}
button{font:inherit;color:inherit}

/* ---------- токены ---------- */
.root{
  --serif:'Geologica','Segoe UI',Arial,sans-serif;--hw:600;--ht:-.02em;--hs:1;--hand:'Caveat','Segoe Print',cursive;--hh:1.3;
  --ink:#000;--ink2:#4D4D4D;--paper:#fff;
  --teal:#12B5A5;--amber:#FFB020;
  --g-font:#FFE27A;--g-space:#A9DCFF;--g-page:#D3D3D8;--g-struct:#FFBE94;--g-table:#BDEBC4;--g-num:#DCC8FF;
  --sans:'Golos Text','Segoe UI',Arial,sans-serif;
  --ul-amber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9C30 4 62 12 100 7S162 5 198 9' fill='none' stroke='%23FFB020' stroke-width='7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 14C62 10 126 15 184 11' fill='none' stroke='%23FFB020' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --ul-teal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9C30 4 62 12 100 7S162 5 198 9' fill='none' stroke='%2312B5A5' stroke-width='7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M16 14C62 10 126 15 184 11' fill='none' stroke='%2312B5A5' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3C12.6 8 11.4 15 12 21'/%3E%3Cpath d='M3 12C8 11.4 15 12.6 21 12'/%3E%3C/svg%3E");
  --minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 12C8 11.4 15 12.6 21 12'/%3E%3C/svg%3E");
  background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;font-family:var(--sans)
}
.wrap{max-width:1200px;margin:0 auto;padding-left:40px;padding-right:40px}
.ink2{color:var(--ink2)}
.rule{border-top:1px solid var(--ink)}

/* ---------- типографика (шрифты переключаются в Tweaks) ---------- */
.h1{font-family:var(--serif);font-weight:var(--hw);font-size:calc(clamp(36px,4.4vw,60px) * var(--hs));line-height:1.08;letter-spacing:var(--ht);margin:0;text-wrap:balance;overflow-wrap:normal;word-break:keep-all}
.h2{font-family:var(--serif);font-weight:var(--hw);font-size:calc(clamp(30px,3.3vw,42px) * var(--hs));line-height:1.14;letter-spacing:var(--ht);margin:0;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:var(--hw);font-size:calc(24px * var(--hs));line-height:1.22;letter-spacing:var(--ht);margin:0}
.lead{font-size:19px;line-height:1.6;color:var(--ink2);margin:0;max-width:34em;text-wrap:pretty}
.p{margin:0;max-width:34em;text-wrap:pretty}
.hand{font-family:var(--hand);font-size:calc(22px * var(--hh));line-height:1.15;color:var(--ink)}

/* ---------- маркерная графика ---------- */
.ul{background:var(--ul-amber) 0 100%/100% .42em no-repeat;padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ul.teal{background-image:var(--ul-teal)}
.hl{background:var(--c);padding:.04em .28em .08em;margin:0 -.04em;border-radius:.3em .12em .35em .1em/.12em .35em .1em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.rg{position:relative;display:inline-block;white-space:nowrap}
.ring{position:absolute;left:-.45em;top:-.3em;width:calc(100% + .9em);height:calc(100% + .6em);overflow:visible;fill:none;stroke:var(--teal);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ring path{vector-effect:non-scaling-stroke}
.chk{width:26px;height:24px;flex:none;fill:none;stroke:var(--teal);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.arr{width:100px;height:44px;flex:none;fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.stk{display:inline-block;font-family:var(--hand);font-size:calc(22px * var(--hh));line-height:1.1;color:#000;background:var(--amber);border:2px solid #000;padding:9px 16px 10px;border-radius:255px 14px 225px 14px/14px 225px 14px 255px;transform:rotate(-3deg)}
.dab{display:inline-block;width:14px;height:14px;border:1.5px solid #000;border-radius:60% 40% 55% 45%/45% 55% 40% 60%;background:var(--c);flex:none}
.ic{width:72px;height:72px;flex:none;fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ic .blob{fill:var(--c);stroke:none;transition:transform .25s ease}
.ruler{height:16px;background:
  repeating-linear-gradient(90deg,#000 0 1px,transparent 1px 8px) left bottom/100% 6px no-repeat,
  repeating-linear-gradient(90deg,#000 0 1.5px,transparent 1.5px 40px) left bottom/100% 13px no-repeat}

/* ---------- шапка ---------- */
.top{border-bottom:1px solid #000;font-size:13px}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:7px;padding-bottom:7px}
.hd{position:sticky;top:0;z-index:50;background:#fff;border-bottom:2px solid #000}
.hd .in{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:16px;padding-bottom:16px}
.prog{position:absolute;left:0;right:0;bottom:-4px;height:5px;background:var(--teal);transform-origin:0 50%;transform:scaleX(0);border-radius:0 3px 3px 0;pointer-events:none}
.nav{display:flex;align-items:center;gap:6px 30px}
.nav a,.nav button.nv{position:relative;text-decoration:none;font-size:15px;font-weight:500;padding:4px 0;background:var(--ul-amber) 0 100%/0 .5em no-repeat;transition:background-size .25s ease;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:#000;line-height:1.4}
.nav a:hover,.nav button.nv:hover,.nav button.nv[aria-expanded="true"]{background-size:100% .5em}
.nav .caret{width:12px;height:8px;fill:none;stroke:#000;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nav button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.ddw{position:relative}
.dd{position:absolute;top:calc(100% + 22px);left:-18px;width:420px;background:#fff;border:2px solid #000;padding:6px 0;z-index:60;animation:pop .18s ease-out both}
.dd a{display:flex;align-items:center;gap:12px;padding:10px 18px;background:none;font-weight:500;text-decoration:none}
.dd a:hover{background:#F3F3F3}
.dd .hand{margin-left:auto;font-size:calc(19px * var(--hh));white-space:nowrap}
.burger{display:none;align-items:center;justify-content:center;width:46px;height:46px;border:2px solid #000;background:#fff;cursor:pointer;padding:0}
.burger svg{width:24px;height:22px;fill:none;stroke:#000;stroke-width:2.6;stroke-linecap:round}
.mnav{border-top:1px solid #000;background:#fff;padding:8px 0 16px;animation:pop .18s ease-out both}
.mnav a{display:flex;align-items:center;gap:12px;padding:12px 0;text-decoration:none;font-weight:500;border-bottom:1px solid #D0D0D0}
.mnav .sp{padding-top:14px;font-size:14px;color:var(--ink2)}

/* ---------- кнопки и значки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border:2px solid #000;background:var(--teal);color:#000;font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer}
.btn:hover{background:#000;color:#fff;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff}
.btn.ghost:hover{background:#000;color:#fff}
.sev{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;font:600 13px/1 var(--sans);white-space:nowrap}
.sev.crit{background:#000;color:#fff;border:1.5px solid #000}
.sev.warn{background:#fff;color:#000;border:1.5px solid #000}
.sev.rec{background:#fff;color:#000;border:1.5px dashed #000}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1.5px solid #000;background:#fff;color:#000;font:500 14px/1 var(--sans);cursor:pointer;transition:background-color .15s}
.pill:hover{background:#F3F3F3}
.pill.on{background:var(--teal)}

/* ---------- образец страницы Word ---------- */
.cmt{display:block;width:100%;text-align:left;border:1px solid #000;background:#fff;padding:10px 12px;font-size:13px;line-height:1.45;cursor:pointer;transition:border-color .15s,background-color .15s}
.cmt:hover{background:#FAFAFA}
.cmt.on{border:2px solid var(--teal);padding:9px 11px}
.cmt b{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.cmt span.t{display:block;margin-top:5px}
.frag{transition:outline-color .15s}

/* ---------- блоки с фото и параллаксом ---------- */
.photo-sec{position:relative;overflow:hidden;display:flex;align-items:center;min-height:640px;border-top:1px solid #000}
.photo-bg{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
.photo{position:absolute;left:0;right:0;top:-14%;bottom:-14%;background:#E6E6E7 center/cover no-repeat}
.photo.a{background-color:#E3EDEB;background-image:url(img/desk.webp)}
.photo.b{background-color:#E6E6E9;background-image:url(img/works.webp)}
.photo-tag{position:absolute;right:20px;bottom:16px;z-index:2;background:#fff;border:1.5px solid #000;padding:6px 12px;font-size:13px;line-height:1.4;max-width:360px}
.sheet{position:relative;background:#fff;border:2px solid #000;padding:40px 36px 36px;display:flex;flex-direction:column;gap:20px}

/* ---------- прочее ---------- */
.row2{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:18px 22px;border-bottom:1px solid #D0D0D0;animation:rowin .3s ease-out both}
.grow:hover .ic .blob{transform:translate(3px,3px)}
.faq{border-top:1px solid #000}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-family:var(--serif);font-weight:var(--hw);font-size:calc(21px * var(--hs));letter-spacing:var(--ht);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:22px;height:22px;flex:none;background:var(--plus) center/contain no-repeat;transition:transform .2s}
.faq[open] summary::after{background-image:var(--minus)}
.faq summary:hover::after{transform:rotate(90deg)}
.faq[open] summary:hover::after{transform:none}
.faq p{margin:0 0 24px;max-width:40em;color:var(--ink2)}
.field{display:flex;flex-direction:column;gap:6px;flex:1 1 220px}
.field label{font-size:14px;font-weight:600}
.field input,.field textarea{font:400 16px var(--sans);color:#000;background:#fff;border:2px solid #000;padding:11px 13px;min-height:48px;border-radius:0}
.field input:focus,.field textarea:focus{border-color:var(--teal)}
.dark a:hover{text-decoration-color:var(--teal)}
a:focus-visible,.btn:focus-visible,.faq summary:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.pill:focus-visible,.cmt:focus-visible,.burger:focus-visible,.nav button:focus-visible{outline:3px solid #000;outline-offset:3px}
.dark a:focus-visible{outline-color:#fff}

@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(-14px 100% -14px -14px)}to{clip-path:inset(-14px -14px -14px -14px)}}
@keyframes sweep{from{background-size:0 .42em}to{background-size:100% .42em}}
@keyframes drop{from{opacity:0;transform:translateY(-14px) rotate(-8deg)}to{opacity:1;transform:rotate(-3deg)}}
@keyframes par{from{transform:translateY(-9%)}to{transform:translateY(9%)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shrink{from{padding-top:16px;padding-bottom:16px}to{padding-top:8px;padding-bottom:8px}}

/* анимации включаются только если пользователь не отключил движение */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:background-color .12s,color .12s,transform .08s}
  .ul.load{animation:sweep .9s cubic-bezier(.3,.7,.2,1) .35s both}
  .load-wipe{animation:wipe .8s ease-out 1.1s both}
  .load-drop{animation:drop .5s cubic-bezier(.3,1.4,.5,1) 1.7s both}
  @supports (animation-timeline:view()){
    .scrub{animation:wipe linear both;animation-timeline:view();animation-range:entry 20% entry 95%}
    .par{animation:par linear both;animation-timeline:view()}
    .prog{animation:grow linear both;animation-timeline:scroll()}
    .hd .in{animation:shrink linear both;animation-timeline:scroll();animation-range:0 140px}
  }
}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .wrap{padding-left:20px;padding-right:20px}
  .arr.between{display:none}
  .exnote{display:none}
  .nav,.hdcta,.top .r{display:none}
  .burger{display:inline-flex}
  .photo-sec{min-height:560px}
  .sheet{padding:36px 22px 28px}
}

/* ---------- добавки для статической версии ---------- */
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:#000;border:2px solid #000;padding:10px 16px;font-weight:600}
.skip:focus{left:8px}
.hd.sm .in{padding-top:8px;padding-bottom:8px}
.hd .in{transition:padding .2s}
.frag{outline:2.5px solid transparent;outline-offset:2px}
.frag.hit{outline-color:#12B5A5}
.rg .frag{display:inline}
.top .r{display:flex;gap:20px}
@media (max-width:900px){.top .r{display:none}}
.field{min-width:0}
form>.field{flex:none}
.err{margin:0;color:#000;border:2px solid #000;border-left-width:8px;padding:10px 12px;font-size:15px}
.dd[hidden],.mnav[hidden]{display:none}
@media (max-width:900px){.dd{width:min(420px,calc(100vw - 40px))}}
@media print{.hd,.top,.prog,.burger{display:none}}


/* Логотипы Фонда и мероприятия (п. 3.2б договора) */
.fund-logo{display:block;height:96px;width:auto;max-width:100%;object-fit:contain}