/* ФАБУЛА · «Почерк» · общий CSS темы.
   Шкала: Literata 252/66/46/34/30/18/16/14, Onest 96/22/17/15/13/11. На телефоне (до 720 px) каждый уровень на ступень ниже.
   Красный только в жестах отбора (.mk). Градиенты только как свет. */
:root{
 --paper:#f4f2ed;--sheet:#fdfcf9;--ink:#1a1a1a;--ink-muted:#3a3a37;--ink-caption:#55534f;--graphite:#5b5b58;
 --mark:#b8321a;--rule:#d8d5ce;--night:#161615;--night-ink:#edebe6;--night-caption:#a3a19b;--night-mark:#e8634d;
 --serif:"Literata",Georgia,serif;--sans:"Onest",system-ui,sans-serif;
 --pad:80px;--sec:120px;--shadow:0 1px 2px rgba(40,30,20,.10),0 12px 28px rgba(40,30,20,.10);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
p{text-wrap:pretty}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}

/* типографика */
.tn{font-variant-numeric:tabular-nums lining-nums}
.h2{margin:0;font-family:var(--serif);font-weight:400;font-size:66px;line-height:1.02;letter-spacing:-.025em;font-variation-settings:"opsz" 72}
.h2 i,.h3 i{font-weight:300}
.pn{margin:0;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.05;letter-spacing:-.02em;font-variation-settings:"opsz" 72}
.pn b{font-family:var(--sans);font-weight:250;color:#6b6964;letter-spacing:-.01em}
.h3{margin:0;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.12;letter-spacing:-.01em}
.acc{margin:0;font-style:italic;font-weight:300;font-size:30px;line-height:1.3}
.lead{margin:0;font-size:18px;line-height:1.55}
.body{margin:0;font-size:16px;line-height:1.55;color:var(--ink-muted)}
.cap{margin:0;font-size:14px;font-style:italic;line-height:1.4;color:var(--ink-caption)}
.note{margin:0;font-size:14px;font-style:italic;line-height:1.35;color:var(--graphite)}
.ui{font-family:var(--sans);font-size:15px}
.meta{margin:0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink-caption)}
.fig{font-family:var(--sans);font-weight:200;font-size:96px;line-height:1;letter-spacing:-.03em}
.step{font-family:var(--sans);font-size:22px;line-height:1.3}
.step-n{font-family:var(--sans);font-size:22px;line-height:1.3;color:var(--graphite);font-variant-numeric:tabular-nums lining-nums}

/* отметки редактора: подчеркнуть и обвести */
.mk{position:relative;white-space:nowrap}
.mk svg{position:absolute;left:-2px;bottom:-7px;width:calc(100% + 4px);height:10px;overflow:visible;pointer-events:none}
.mk svg path{fill:none;stroke:var(--mark);stroke-width:2.2;stroke-linecap:round}
.mk.circle svg{left:-12px;bottom:-9px;width:calc(100% + 24px);height:calc(100% + 18px)}
.dark .mk svg path,.plate .mk svg path{stroke:var(--night-mark)}
.mk svg path[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:fb-draw .9s cubic-bezier(.4,.1,.3,1) .6s forwards}
@keyframes fb-draw{to{stroke-dashoffset:0}}

/* разметка: выноски, замеры, метки вёрстки */
.ann-line{stroke:var(--ink);stroke-width:.75;fill:none}
.ann-dot{fill:var(--ink)}
.ann{font-family:var(--sans);font-size:13px;fill:var(--ink);font-variant-numeric:tabular-nums}
.dim{stroke:var(--graphite);stroke-width:.75;fill:none}
.regm{stroke:var(--graphite);stroke-width:1;fill:none;opacity:.8}
.dark .regm,.plate .regm,.band .regm{stroke:var(--night-ink);opacity:.65}

/* раскладка. .sheet-in — лист бумаги с появлением, .lay-in — только появление (обложки, стопки) */
.fb-main{display:block}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.sec{padding-top:var(--sec)}
.rs{background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22168%22%20height%3D%2222%22%20viewBox%3D%220%200%20168%2022%22%3E%3Cpath%20d%3D%22M4%2013.2%20C%2026%209.6%2C%2048%208.4%2C%2070%2010.6%20C%2092%2012.8%2C%20112%2014.6%2C%20134%2011.4%20C%20146%209.6%2C%20156%207.6%2C%20164%208.4%20C%20156%209.4%2C%20146%2011.6%2C%20134%2013.4%20C%20112%2016.8%2C%2092%2015.2%2C%2070%2013%20C%2048%2010.9%2C%2026%2011.8%2C%204%2013.2%20Z%22%20fill%3D%22%238f8c86%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%224%22%20r%3D%221.6%22%20fill%3D%22%238f8c86%22%2F%3E%3C%2Fsvg%3E') center top / 168px 22px no-repeat;padding-top:80px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 80px;align-items:start}
.stack{display:flex;flex-direction:column;gap:22px}
.sheet,.sheet-in{background:var(--sheet);box-shadow:var(--shadow)}
.frame{border:1px solid #8f8c86;display:flex;align-items:flex-end;padding:22px;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(26,26,26,.05) 14px 15px)}
.list{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--rule)}
.list>li{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;align-items:baseline;padding:14px 0;border-top:1px solid var(--rule)}
.tbl{border-top:1px solid var(--ink)}
.tbl [role="row"]{display:grid;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.tbl .th{padding:10px 0;border-bottom:1px solid var(--ink);color:var(--ink-caption);font-size:14px}

/* шапка */
.fb-header{position:sticky;top:0;z-index:20;background:var(--paper);transition:transform .25s ease}
.fb-header.is-hidden{transform:translateY(-100%)}
.fb-header .in{max-width:1440px;margin:0 auto;height:88px;display:flex;align-items:baseline;gap:44px;padding:32px var(--pad) 0}
.fb-home{display:block;height:26px;text-decoration:none;color:var(--ink)}
.lg{display:block;width:100px;height:28px;overflow:visible;fill-rule:evenodd;clip-rule:evenodd}
.fb-nav{display:flex;gap:30px}
.fb-nav a{text-decoration:none;color:var(--ink-muted)}
.fb-cta{margin-left:auto}
.fb-menu{display:none}
/* обёртка шаблонной части не должна мешать липкой шапке */
.wp-block-template-part:has(> .fb-header){display:contents}
/* на главной шапка прозрачна над первым экраном, после прокрутки на бумаге */
body.home .fb-header.is-top:not(:has(details[open])){background:transparent}

/* кнопки и формы */
.btn{height:48px;padding:0 4px;border:none;border-bottom:1px solid transparent;background:none;font-family:var(--sans);font-size:15px;color:var(--ink-muted);cursor:pointer}
.btn[aria-pressed="true"]{color:var(--ink);border-bottom:2px solid var(--ink)}
.b-dark,.b-light{height:48px;padding:0 24px;border:1px solid var(--ink);border-radius:0;font-family:var(--sans);font-size:15px;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.b-dark{background:var(--ink);color:var(--paper)}
.b-light{background:transparent;color:var(--ink)}
.fb-form{display:flex;flex-direction:column;gap:22px}
.fb-form fieldset{margin:0;padding:0;border:none}
.fb-form legend{padding:0;margin-bottom:12px}
.fb-form .checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px}
.fb-form .checks label{display:flex;gap:10px;align-items:center;min-height:32px}
.fb-form input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.fb-form .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fb-form label.f{display:flex;flex-direction:column;gap:8px}
.fb-form input[type=text],.fb-form input[type=email],.fb-form textarea{border:1px solid var(--ink);border-radius:0;background:var(--sheet);font-size:16px;color:var(--ink)}
.fb-form input[type=text],.fb-form input[type=email]{height:48px;padding:0 14px;font-family:var(--sans)}
.fb-form textarea{padding:12px 14px;font-family:var(--serif);resize:vertical}
.fb-form .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-muted)}
.fb-form .consent input{margin-top:2px}
.fb-form .b-dark{align-self:flex-start}
.fb-contact .in{max-width:1440px;margin:0 auto;padding:80px var(--pad) 120px;display:grid;grid-template-columns:420px minmax(0,1fr);gap:60px}

/* полоса и тёмные секции */
.plate{position:relative;overflow:hidden;background:#141413;height:400px}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,19,.92) 0%,rgba(20,20,19,.35) 45%,rgba(20,20,19,0) 70%);pointer-events:none}
.plate-img{position:absolute;inset:-44px 0;background-size:cover;background-repeat:no-repeat;background-position:90% 60%}
.rc{position:absolute;z-index:2;width:30px;height:30px;pointer-events:none;overflow:visible;--o:28px}
.rx{position:absolute;z-index:2;left:50%;top:9px;width:38px;height:38px;margin-left:-19px;pointer-events:none;overflow:visible}
.rc.tl{left:var(--o);top:var(--o)}.rc.tr{right:var(--o);top:var(--o)}.rc.bl{left:var(--o);bottom:var(--o)}.rc.br{right:var(--o);bottom:var(--o)}
.plate .h2{position:absolute;left:max(var(--pad),calc((100% - 1440px)/2 + var(--pad)));top:120px;z-index:1;color:var(--night-ink)}
.dark{background:var(--night);color:var(--night-ink)}
.dark a{color:var(--night-ink)}
.dark a:focus-visible{outline-color:var(--night-ink)}

/* подвал */
.fb-footer{background:var(--night);color:var(--night-ink)}
.fb-footer a{color:var(--night-ink)}
.fb-footer a:focus-visible{outline-color:var(--night-ink)}
.fb-footer .in{max-width:1440px;margin:0 auto;padding:56px var(--pad) 48px}
.fb-footer .cols{display:grid;grid-template-columns:420px repeat(3,minmax(0,1fr));gap:60px}
.fb-footer .col{display:flex;flex-direction:column;gap:10px}
.fb-footer .col>span,.fb-footer .dim-t{color:var(--night-caption)}
.fb-footer .col a{text-decoration:none}
.fb-footer .docs{margin-top:48px;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:13px}
.fb-footer .docs a,.fb-footer .legal a{color:var(--night-caption)}
.fb-footer .legal{margin-top:22px;display:grid;grid-template-columns:420px minmax(0,1fr) auto;gap:60px;font-size:13px;line-height:1.6;color:var(--night-caption)}
.fb-footer .fb-kin{color:var(--night-caption);margin:6px 0 0}
.fb-footer .fb-kin a{color:var(--night-caption);text-decoration:underline;text-underline-offset:2px}
.fb-footer .tg{display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.fb-footer .tg svg{fill:none;stroke:var(--night-ink);stroke-width:1.5;stroke-linejoin:round;flex:none}
.fb-footer .short{display:none}

/* движение по прокрутке: только то, что что-то сообщает */
@keyframes fb-rise{from{translate:0 36px;opacity:0}to{translate:0 0;opacity:1}}
@keyframes fb-fade{from{opacity:0}to{opacity:1}}
@supports (animation-timeline: view()){
 .flow-in{animation:fb-flow linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
 @keyframes fb-flow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
 .bar-in{transform-origin:left center;animation:fb-bar linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
 @keyframes fb-bar{from{scale:0 1}to{scale:1 1}}
 .sheet-in,.lay-in{animation:fb-lay linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
 @keyframes fb-lay{from{translate:0 60px;rotate:3deg;opacity:0}to{translate:0 0;opacity:1}}
 .mk.scroll svg path[pathLength]{stroke-dashoffset:0;animation:fb-mark linear both;animation-timeline:view();animation-range:entry 60% cover 50%}
 @keyframes fb-mark{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
 .plate-img{animation:fb-drift linear both;animation-timeline:view()}
 @keyframes fb-drift{from{translate:0 -40px}to{translate:0 40px}}
 .dim-in{stroke-dasharray:1;stroke-dashoffset:1;animation:fb-mark linear both;animation-timeline:view();animation-range:entry 40% cover 45%}
 .dim-lb{animation:fb-fade linear both;animation-timeline:view();animation-range:entry 60% cover 50%}
}

/* наведение и фокус: строка и кнопка инвертируются, ссылка получает графитовый штрих, лист выпрямляется. Красный в наведении не участвует */
a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .15s ease}
a:has(svg),a:has(img),[role="row"] a,li:has(> a:first-child) > a{background-image:none}
a:focus-visible{background-size:100% 1.5px;text-decoration-color:transparent}
[role="row"]:has(a),li:has(> a:first-child){position:relative;transition:background-color .15s ease,box-shadow .15s ease}
[role="row"]:has(a) a::after,li:has(> a:first-child) > a::after{content:"";position:absolute;inset:0 -14px}
[role="row"] a:focus-visible,li:has(> a:first-child) > a:focus-visible{outline:none}
[role="row"]:has(a:focus-visible),li:has(> a:first-child:focus-visible){background:var(--ink);box-shadow:-14px 0 0 var(--ink),14px 0 0 var(--ink);outline:2px solid var(--ink);outline-offset:4px}
[role="row"]:has(a:focus-visible) *,li:has(> a:first-child:focus-visible) *{color:var(--paper)!important}
.sheet:has(a),.sheet-in:has(a){transition:transform .15s ease,box-shadow .15s ease}
.fb-footer li:has(> a:first-child),.fb-nav li{background:none!important;box-shadow:none!important}
@media (hover:hover){
 a:hover{background-size:100% 1.5px;text-decoration-color:transparent}
 [role="row"]:has(a):hover,li:has(> a:first-child):hover{background:var(--ink);box-shadow:-14px 0 0 var(--ink),14px 0 0 var(--ink)}
 [role="row"]:has(a):hover *,li:has(> a:first-child):hover *{color:var(--paper)!important}
 .b-dark:hover{background:var(--paper);color:var(--ink)}
 .b-light:hover{background:var(--ink);color:var(--paper)}
 .btn:hover{color:var(--ink);border-bottom-color:var(--ink)}
 .sheet:has(a):hover,.sheet-in:has(a):hover{transform:rotate(0) translateY(-4px)!important;box-shadow:0 2px 4px rgba(40,30,20,.12),0 18px 40px rgba(40,30,20,.16)}
}
@media (prefers-reduced-motion:reduce){
 *{animation:none!important;transition:none!important}
 .mk svg path[pathLength],.dim-in{stroke-dashoffset:0}
}

/* узкий десктоп: подвал с узкой колонкой бренда */
@media (max-width:1360px) and (min-width:1101px){
 .fb-footer .cols{grid-template-columns:260px repeat(3,minmax(0,1fr));gap:40px}
 .fb-footer .legal{grid-template-columns:260px minmax(0,1fr) auto;gap:40px}
}
/* планшет: 721–1100 px. Бренд во всю ширину, форма в один столбец */
@media (max-width:1100px) and (min-width:721px){
 .fb-contact .in{grid-template-columns:minmax(0,1fr);gap:28px;max-width:860px;margin:0}
 .fb-footer .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
 .fb-footer .cols>.brand{grid-column:1 / -1}
 .fb-footer .legal{grid-template-columns:minmax(0,1fr) auto;gap:8px 40px}
 .fb-footer .legal>span:first-child{grid-column:1 / -1}
 .fb-header .in{gap:28px}
}
@media (max-width:900px) and (min-width:721px){
 .fb-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* шапка до 900 px телефонная: логотип и «Меню», на 721–900 строка разделов не помещается */
@media (max-width:900px){
 .fb-header .in{height:64px;padding:22px var(--pad) 0;justify-content:space-between;gap:0}
 .fb-nav,.fb-cta{display:none}
 .fb-menu{display:block;position:relative}
 .fb-menu summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:15px}
 .fb-menu summary::-webkit-details-marker{display:none}
 .fb-menu[open] summary{text-decoration:underline;text-underline-offset:5px}
 .fb-menu nav{position:fixed;left:0;right:0;top:64px;bottom:0;background:var(--paper);padding:28px var(--pad);display:flex;flex-direction:column;gap:4px;overflow:auto}
 .fb-menu nav a{display:flex;align-items:center;min-height:48px;font-family:var(--serif);font-size:30px;text-decoration:none}
 .fb-menu nav a.fb-menu-cta{margin-top:20px;font-family:var(--sans);font-size:15px;text-decoration:underline}
}
/* телефон: 390–720 px. Поля 20, каждый уровень шкалы на ступень ниже */
@media (max-width:720px){
 :root{--pad:20px;--sec:72px}
 html{scroll-padding-top:72px}
 .h2{font-size:46px;line-height:1.04}
 .pn{font-size:34px;line-height:1.08}
 .pn b{display:block}
 .h3{font-size:30px;line-height:1.14}
 .grid-2,.fb-contact .in{grid-template-columns:minmax(0,1fr);gap:28px}
 .list>li{display:flex;flex-direction:column;gap:4px}
 .tbl [role="row"]{display:flex;flex-direction:column;gap:6px;padding:16px 0}
 .tbl .th{display:none}
 .fb-contact .in{padding:56px var(--pad) 72px}
 .fb-form .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
 .fb-form .checks label{min-height:44px}
 .fb-form input[type=checkbox]{width:20px;height:20px}
 .fb-form .fields{grid-template-columns:minmax(0,1fr)}
 .fb-form .b-dark{align-self:stretch;height:52px}
 .plate{height:300px}
 .rc{--o:16px;width:24px;height:24px}
 .rx{display:none}
 .plate::after{background:linear-gradient(0deg,rgba(20,20,19,.92) 0%,rgba(20,20,19,.35) 55%,rgba(20,20,19,0) 80%)}
 .plate-img{background-position:80% 60%}
 .plate .h2{top:auto;bottom:48px;left:var(--pad)}
 .fb-footer .in{padding:48px var(--pad) 40px}
 .fb-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
 .fb-footer .cols>.brand,.fb-footer .cols>.prod{grid-column:1 / -1}
 .fb-footer .col{gap:16px}
 .fb-footer .docs{flex-direction:column;gap:10px;margin-top:36px}
 .fb-footer .legal{display:flex;flex-direction:column;gap:6px;margin-top:36px}
 .fb-footer .long{display:none}
 .fb-footer .short{display:inline}
}

/* 404 */
.nf{display:grid;grid-template-columns:560px minmax(0,1fr);gap:60px;padding-top:120px;padding-bottom:160px}
.nf-nav{padding-top:128px}
.nf-note{margin:40px 0 0 284px;max-width:380px;display:flex;flex-direction:column;gap:6px}
@media (max-width:720px){
 .nf{grid-template-columns:minmax(0,1fr);gap:0;padding-top:40px;padding-bottom:80px}
 .nf-nav{padding-top:56px}
 .nf-note{margin:32px 0 0 48px}
}

/* WebKit (Safari и любой браузер на iPhone): на главной обложки «Фабрикатора» (.lay-in в absolute-раскладке) после появления по прокрутке
   оставались невидимыми, на месте фото была пустота (30.09.2026). В WebKit обложки и стопки показываем сразу, без появления.
   2.10.2026 пустота повторилась во встроенном браузере Телеграма на iPhone: условие расширено признаком iOS (-webkit-touch-callout),
   обложкам в absolute-раскладке задан loading="eager" (WordPress сам ставит lazy, если атрибута нет). */
@supports (font:-apple-system-body) or (-webkit-touch-callout:none){ .lay-in{animation:none;opacity:1} }

/* Плашка согласия на Метрику (с 0.13.15): лист бумаги внизу слева, не перекрывает шапку; на телефоне во всю ширину */
.cc{position:fixed;left:24px;bottom:24px;z-index:30;max-width:520px;padding:22px 24px 24px;background:var(--sheet);box-shadow:var(--shadow);color:var(--ink)}
.cc[hidden]{display:none}
.cc-t{margin:0 0 8px;font-family:var(--serif);font-size:18px;line-height:1.35}
.cc-b{margin:0 0 18px;font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink-muted)}
.cc-b a{color:var(--ink)}
.cc-a{display:flex;gap:12px;flex-wrap:wrap}
@media (hover:hover){.cc .b-dark:hover{background:var(--paper);color:var(--ink)}.cc .b-light:hover{background:var(--ink);color:var(--paper)}}
@media (max-width:720px){.cc{left:0;right:0;bottom:0;max-width:none;padding:18px 20px calc(20px + env(safe-area-inset-bottom))}.cc-a button{flex:1 1 0}}