/* Токены концепта «Формула» — из DESIGN.md (01.11.2026). Цвета только отсюда. */
:root{
  --bg:#FBF7F1; --bg-soft:#F2ECE3; --sage-soft:#E3E8DA; --lilac-soft:#ECE4EF; --lilac:#B9A5C4; --atom:#7E6A8A;
  --ink:#2B2A28; --ink-soft:#5E5B57; --accent:#3B4A40; --accent-hover:#323F37; --accent-rgb:59,74,64; --sage:#6B7B5C;
  --dark:#26302A; --dark-2:#56685B; --sage-on-dark:#A9B99A; --mute:#B3ACA2; --line-soft:#EEE8DF; --track:#D8D2C8; --dash:#D3C9BB; --example:#8A5A24; --on-dark:#F4F1EA; --on-dark-soft:#C9CFC3; --rule:#E2DACF; --white:#FFFFFF; --warm:#B5793A;
  --shadow-1:0 1px 2px rgba(43,42,40,.06),0 4px 16px rgba(43,42,40,.05);
  --shadow-2:0 2px 4px rgba(43,42,40,.06),0 12px 32px rgba(43,42,40,.08);
  --display:'Unbounded',system-ui,sans-serif; --text:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--text);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid rgba(var(--accent-rgb),.45);outline-offset:3px;border-radius:12px}

.logo{font:700 26px/1 var(--display);letter-spacing:.02em;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.logo .o{width:1.3em;height:.92em;border-radius:999px;background:var(--lilac-soft);display:inline-grid;place-items:center;margin:0 .04em;color:var(--atom)}
.logo .o svg{width:.72em;height:.72em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;font:700 17px/1.2 var(--text);border:0;cursor:pointer;text-decoration:none;text-align:center;transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn-p{background:var(--accent);color:var(--on-dark)}
.btn-p:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn-p:active{transform:none;box-shadow:none}
.btn-s{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-s:hover{background:var(--bg-soft)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--bg),0 0 0 6px rgba(var(--accent-rgb),.4)}
.btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.lnk{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.lnk:hover{text-decoration-thickness:2px}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 12px;border-radius:999px;background:var(--lilac-soft);font:600 13px/1.2 var(--text);color:var(--ink)}
.badge.sage{background:var(--sage-soft)}
.kick{font:700 13px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* заметки для Оли — видны в концепте, скрыты в версии для портфолио (?kwork=1) */
.todo{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:4px 10px;border-radius:8px;background:#FBEBD6;color:#7A4E1D;font:600 13px/1.35 var(--text)}
.todo:before{content:"✎"}
.kwork .todo,.kwork .no-kwork{display:none!important}

.pre:not(.in){opacity:0}
@keyframes rv{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rv.in{animation:rv .4s var(--ease) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.static .rv.in{animation:none}