/* ============================================================
   s1t · sense1tapo4ek — Japandi design system
   Тёплая бумага, тушь, один тихий акцент (охра).
   Слои: токены → база → layout → компоненты → вариант II.
   Перенос в Vue: каждый блок = компонент (.pc = PostCard и т.д.)
   ============================================================ */

/* ---------- 1. ТОКЕНЫ ---------- */
:root{
  --paper:#f4f0e5; --raised:#faf7ee; --sunken:#ebe5d6;
  --ink:#39332a; --soft:#6f6557; --faint:#9a8f7f;
  --line:#ddd5c2; --line-strong:#c5bba5;

  --accent-base:#b08a3e;                 /* охра — управляется Tweaks */
  --accent:var(--accent-base);
  --accent-ink:#f4f0e5;
  --wash:color-mix(in oklab, var(--accent) 11%, transparent);

  --moss:#5d7052; --ochre:#b08a3e; --clay:#a85b40; --iris:#6f5fa0;

  --serif:"Literata", Georgia, serif;
  --sans:"Golos Text", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;

  --font-display:var(--serif);           /* вариант II меняет на sans */
  --r-s:4px; --r-m:8px;
  --shadow:0 1px 2px rgba(57,51,42,.05), 0 10px 32px rgba(57,51,42,.08);
  --grain:.5;
  --measure:80ch;                         /* ширина лонгрида — зафиксировано владельцем (README хендоффа) */
  --entry-pad:26px;                       /* плотность ленты — Tweaks */
  --page-w:1200px;
}
html[data-theme="dark"]{
  --paper:#211c16; --raised:#2a241d; --sunken:#1a1611;
  --ink:#e9e1d2; --soft:#a99d8b; --faint:#796e5e;
  --line:#3a3228; --line-strong:#4c4234;
  --accent:color-mix(in oklab, var(--accent-base) 62%, #f0ead9);
  --accent-ink:#211c16;
  --wash:color-mix(in oklab, var(--accent) 15%, transparent);
  --moss:#84a878; --ochre:#cfa45a; --clay:#c97f63; --iris:#9d92c6;
  --shadow:0 1px 2px rgba(0,0,0,.2), 0 10px 32px rgba(0,0,0,.28);
}

/* ---------- 2. БАЗА ---------- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
body::after{content:""; position:fixed; inset:0; z-index:999; pointer-events:none;
  opacity:calc(var(--grain) * .14); mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-theme="dark"] body::after{mix-blend-mode:screen; opacity:calc(var(--grain) * .07)}
::selection{background:var(--wash)}
a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in oklab, var(--accent) 45%, transparent)}
a:hover{text-decoration-color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.wordmark{font-family:var(--serif); font-weight:600; letter-spacing:.01em; color:var(--ink); text-decoration:none; white-space:nowrap}
.wordmark .dot{color:var(--accent)}

/* типографика */
.t-display{font-family:var(--font-display); font-weight:600; font-size:clamp(36px,4.6vw,58px); line-height:1.08; letter-spacing:-.015em; text-wrap:balance}
.t-h1{font-family:var(--font-display); font-weight:600; font-size:34px; line-height:1.18; letter-spacing:-.005em; text-wrap:balance}
.t-h2{font-family:var(--font-display); font-weight:600; font-size:23px; line-height:1.3}
.t-h3{font-family:var(--sans); font-weight:600; font-size:16px; line-height:1.4}
.t-overline{font:500 11.5px var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--faint)}
.t-meta{font:12.5px var(--mono); color:var(--faint); white-space:nowrap}
.t-soft{color:var(--soft)}
.meta-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.meta-row .sep{color:var(--faint)}

/* лонгрид */
.prose{font:17.5px/1.78 var(--serif); max-width:var(--measure); text-wrap:pretty}
.prose p{margin:0 0 1.1em}
.prose h2{font:600 24px/1.3 var(--font-display); margin:1.8em 0 .6em}
.prose h3{font:600 18px/1.4 var(--sans); margin:1.6em 0 .5em}
.prose ul,.prose ol{margin:0 0 1.1em; padding-left:1.3em}
.prose li{margin:.3em 0}
.prose blockquote{margin:1.4em 0; padding:.2em 0 .2em 1.2em; border-left:2px solid var(--line-strong); color:var(--soft); font-style:italic}
.prose code{font:14px var(--mono); background:var(--sunken); border-radius:var(--r-s); padding:.1em .4em}
.prose pre{font:13.5px/1.6 var(--mono); background:var(--sunken); border:1px solid var(--line); border-radius:var(--r-m); padding:16px 18px; overflow:auto}
.prose pre code{background:none; padding:0}
.prose .mdfig{margin:1.6em 0}
.prose .mdfig img{max-width:100%; border-radius:var(--r-m); border:1px solid var(--line)}
.prose .mdfig figcaption{font:12.5px var(--mono); color:var(--faint); margin-top:10px}
.prose .table{margin:1.4em 0}
.prose hr{border:none; text-align:center; margin:2.2em 0}
.prose hr::after{content:"\00b7\2002\00b7\2002\00b7"; color:var(--faint); letter-spacing:.4em; font-size:18px}

/* ---------- 3. LAYOUT ---------- */
.container{max-width:var(--page-w); margin:0 auto; padding:0 40px}
@media (max-width:720px){.container{padding:0 20px}}

.sitehead{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.sitehead .container{display:flex; align-items:center; gap:30px; height:64px}
.sitehead .wordmark{font-size:21px}
.sitenav{display:flex; gap:4px; margin-left:8px}
.sitenav a{font:14.5px var(--sans); color:var(--soft); text-decoration:none; padding:6px 12px; border-radius:var(--r-s)}
.sitenav a:hover{color:var(--ink); background:var(--wash)}
.sitenav a.on{color:var(--ink); background:var(--wash); box-shadow:inset 0 -2px 0 var(--accent)}
.headtools{margin-left:auto; display:flex; align-items:center; gap:14px}
.searchbox{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:var(--r-s); padding:6px 12px; background:var(--raised); color:var(--faint); font:13.5px var(--sans); cursor:pointer; min-width:180px}
.searchbox:hover{border-color:var(--line-strong); color:var(--soft)}
.searchbox kbd{margin-left:auto; font:11px var(--mono); border:1px solid var(--line); border-radius:3px; padding:1px 5px}
.themebtn{background:none; border:none; cursor:pointer; color:var(--faint); font:13px var(--sans); padding:6px}
.themebtn:hover{color:var(--ink)}
@media (max-width:880px){.searchbox{min-width:0}.searchbox .sb-label,.searchbox kbd{display:none}}
@media (max-width:720px){.sitenav{gap:0}.sitenav a{padding:6px 8px; font-size:13.5px}.sitehead .container{gap:14px}}

main{min-height:60vh}
.pagehead{padding:64px 0 36px}
.pagehead .t-h1{margin:0 0 12px}
.pagehead .lead{margin:0; color:var(--soft); font-size:17px; max-width:38em; text-wrap:pretty}

.sitefoot{border-top:1px solid var(--line); margin-top:110px; padding:44px 0 60px}
.sitefoot .cols{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px}
.sitefoot h4{font:600 13px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 12px}
.sitefoot a{display:block; color:var(--soft); text-decoration:none; font-size:14.5px; padding:3px 0}
.sitefoot a:hover{color:var(--accent)}
@media (max-width:720px){.sitefoot .cols{grid-template-columns:1fr; gap:28px}}

/* двухколоночный шаблон: контент + сайдбар */
.with-aside{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; align-items:start}
@media (max-width:960px){.with-aside{grid-template-columns:1fr}}
.aside{position:sticky; top:88px; display:flex; flex-direction:column; gap:32px}
.aside section h4{font:500 11.5px var(--sans); letter-spacing:.15em; text-transform:uppercase; color:var(--faint); margin:0 0 14px}
@media (max-width:960px){.aside{position:static}}

/* ---------- 4. КОМПОНЕНТЫ ---------- */
/* кнопки */
.btn{display:inline-flex; align-items:center; gap:8px; font:500 14.5px var(--sans);
  color:var(--ink); background:none; border:1px solid var(--line-strong); border-radius:var(--r-s);
  padding:9px 18px; cursor:pointer; text-decoration:none;
  transition:border-color .15s, background .15s, color .15s}
.btn:hover{border-color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn-primary:hover{background:color-mix(in oklab, var(--ink) 86%, var(--accent))}
.btn-quiet{border-color:transparent; color:var(--soft)}
.btn-quiet:hover{color:var(--ink); background:var(--wash); border-color:transparent}
.btn-sm{padding:5px 12px; font-size:13.5px}

/* поля */
.field{width:100%; font:15px/1.5 var(--sans); color:var(--ink); background:var(--raised);
  border:1px solid var(--line); border-radius:var(--r-s); padding:10px 13px}
.field::placeholder{color:var(--faint)}
.field:focus{outline:none; border-color:var(--accent)}
.field.err{border-color:var(--clay)}
.field[disabled]{opacity:.5; background:var(--sunken)}
textarea.field{resize:vertical; min-height:96px; line-height:1.6}
.f-label{display:block; font:500 14.5px var(--sans); margin-bottom:7px}
.f-hint{font:13px var(--sans); color:var(--faint); margin-top:6px}
.f-err{font:13px var(--sans); color:var(--clay); margin-top:6px}

/* radio / checkbox */
.choice{display:flex; align-items:flex-start; gap:11px; padding:8px 0; cursor:pointer; font-size:15px}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice .mark{flex:0 0 18px; width:18px; height:18px; margin-top:2px;
  border:1.5px solid var(--line-strong); background:var(--raised);
  display:inline-flex; align-items:center; justify-content:center; transition:.15s}
.choice.radio .mark{border-radius:50%}
.choice.check .mark{border-radius:var(--r-s)}
.choice .mark::after{content:""; opacity:0; transition:opacity .12s}
.choice.radio .mark::after{width:8px; height:8px; border-radius:50%; background:var(--accent)}
.choice.check .mark::after{width:9px; height:5px; margin-top:-2px;
  border-left:2px solid var(--accent-ink); border-bottom:2px solid var(--accent-ink); transform:rotate(-45deg)}
.choice input:checked + .mark{border-color:var(--accent)}
.choice.check input:checked + .mark{background:var(--accent)}
.choice input:checked + .mark::after{opacity:1}
.choice:hover .mark{border-color:var(--accent)}

/* теги */
.tag{display:inline-flex; align-items:center; gap:6px; font:12.5px var(--mono); color:var(--soft);
  border:1px solid var(--line); border-radius:99px; padding:3px 12px; text-decoration:none; cursor:pointer; background:none; white-space:nowrap}
.tag:hover{border-color:var(--line-strong); color:var(--ink)}
.tag.on{border-color:var(--accent); color:var(--accent); background:var(--wash)}
.tag .cnt{color:var(--faint); font-size:11px}
.tagrow{display:flex; flex-wrap:wrap; gap:8px}

/* статусы — геометрические фигуры: ● активен · ▲ в работе · ■ остановлен · ◆ прочее */.dot-status{display:inline-block; width:7px; height:7px; background:var(--faint); flex:0 0 7px; transform:rotate(45deg)}
.dot-status.moss{background:var(--moss); border-radius:50%; transform:none}
.dot-status.ochre{background:transparent; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:8px solid var(--ochre); transform:none; flex-basis:10px}
.dot-status.clay{background:var(--clay); border-radius:0; transform:none}

/* PostCard — карточка поста в ленте */
.pc{display:grid; grid-template-columns:110px minmax(0,1fr); gap:24px;
  padding:var(--entry-pad) 0; border-bottom:1px solid var(--line); align-items:baseline}
.pc:last-child{border-bottom:none}
.pc .when{font:12.5px var(--mono); color:var(--faint)}
.pc h3{margin:0 0 6px; font:600 22px/1.3 var(--font-display)}
.pc h3 a{color:var(--ink); text-decoration:none}
.pc h3 a:hover{color:var(--accent)}
.pc .ex{margin:0 0 12px; font-size:15px; color:var(--soft); max-width:38em; text-wrap:pretty}
.pc .pc-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
@media (max-width:620px){.pc{grid-template-columns:1fr; gap:6px}}

/* ProjectCard */
.prj{background:var(--raised); border:1px solid var(--line); border-radius:var(--r-m);
  padding:26px 28px; display:flex; flex-direction:column; gap:12px; transition:border-color .15s, box-shadow .15s}
.prj:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.prj h3{margin:0; font:600 21px/1.3 var(--font-display)}
.prj p{margin:0; font-size:14.5px; color:var(--soft); flex:1; text-wrap:pretty}
.prj .links{display:flex; gap:16px; font-size:14px}
.prjgrid{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media (max-width:760px){.prjgrid{grid-template-columns:1fr}}

/* ReactionBar */
.rbar{display:flex; align-items:center; gap:10px}
.rbtn{display:inline-flex; align-items:center; gap:7px; font:13.5px var(--mono); color:var(--soft);
  background:var(--raised); border:1px solid var(--line); border-radius:99px; padding:6px 14px; cursor:pointer; transition:.15s; white-space:nowrap}
.rbtn:hover{border-color:var(--line-strong); color:var(--ink)}
.rbtn.on{border-color:var(--accent); color:var(--accent); background:var(--wash)}
.rbtn .ico{font-size:14px; line-height:1}

/* PollWidget */
.poll{background:var(--raised); border:1px solid var(--line); border-radius:var(--r-m); padding:24px 26px; max-width:560px}
.poll .ph{display:flex; align-items:baseline; gap:10px; margin-bottom:4px}
.poll .ph h4{margin:0; font:600 17px var(--sans)}
.poll .ph .state{margin-left:auto; font:11.5px var(--mono); color:var(--faint); white-space:nowrap}
.poll .psub{font:13px var(--sans); color:var(--faint); margin:0 0 16px}
.popt{display:block; width:100%; text-align:left; position:relative; font:15px var(--sans); color:var(--ink);
  background:none; border:1px solid var(--line); border-radius:var(--r-s); padding:10px 14px; margin-bottom:8px;
  cursor:pointer; overflow:hidden; transition:border-color .15s}
.popt:hover{border-color:var(--accent)}
.popt .bar{position:absolute; inset:0; width:0; background:var(--wash); transition:width .5s ease}
.popt .lbl{position:relative; display:flex; gap:12px; align-items:baseline}
.popt .pct{margin-left:auto; font:13px var(--mono); color:var(--faint)}
.popt.mine{border-color:var(--accent)}
.popt.mine .lbl::after{content:"·"; color:var(--accent); font-weight:700}
.poll.closed .popt{cursor:default}
.poll .pfoot{font:12.5px var(--mono); color:var(--faint); margin-top:10px}

/* CommentThread */
.cthread{max-width:var(--measure)}
.cm{display:grid; grid-template-columns:38px minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid var(--line)}
.cm:last-child{border-bottom:none}
.cm .ava{width:38px; height:38px; border-radius:50%; background:var(--sunken); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font:600 14px var(--serif); color:var(--soft)}
.cm.admin .ava{background:var(--wash); border-color:var(--accent); color:var(--accent)}
.cm .who{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:5px}
.cm .nick{font:600 14.5px var(--sans)}
.cm .suffix{font:12px var(--mono); color:var(--faint)}
.cm .badge-admin{font:10.5px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent); border-radius:3px; padding:0 6px}
.cm .when{font:12px var(--mono); color:var(--faint); margin-left:auto}
.cm .body{font-size:15px; margin:0; max-width:36em; text-wrap:pretty}
.cm .acts{display:flex; gap:14px; margin-top:8px; font-size:13px}
.cm .acts button{background:none; border:none; cursor:pointer; color:var(--faint); font:13px var(--sans); padding:0; white-space:nowrap}
.cm .acts button:hover{color:var(--accent)}
.cm.reply{margin-left:52px; grid-template-columns:30px minmax(0,1fr)}
.cm.reply .ava{width:30px; height:30px; font-size:12px}
.cm.hidden-c .body, .cm.hidden-c .who{opacity:.4; font-style:italic}

/* состояния: пусто / загрузка / ошибка */
.state-block{padding:56px 24px; text-align:center; color:var(--faint); font-size:15px}
.state-block .glyph{font-family:var(--serif); font-size:30px; display:block; margin-bottom:10px; color:var(--line-strong)}
.state-block.error .glyph{color:var(--clay)}
.skeleton{position:relative; overflow:hidden; background:var(--sunken); border-radius:var(--r-s); color:transparent}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--raised) 70%, transparent), transparent);
  animation:shimmer 1.6s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion: reduce){.skeleton::after{animation:none}}

/* таблица */
.table{border-collapse:collapse; width:100%; font-size:14.5px}
.table th{text-align:left; font:500 11.5px var(--sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); padding:8px 14px 8px 0; border-bottom:1px solid var(--line-strong)}
.table td{padding:11px 14px 11px 0; border-bottom:1px solid var(--line); vertical-align:top}
.table .num{font-family:var(--mono); font-size:13.5px}

/* пагинация */
.pager{display:flex; align-items:center; gap:8px; padding:34px 0 0}
.pager button{font:13.5px var(--mono); color:var(--soft); background:none; border:1px solid var(--line);
  border-radius:var(--r-s); min-width:36px; padding:7px 10px; cursor:pointer}
.pager button:hover{border-color:var(--line-strong); color:var(--ink)}
.pager button.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pager button[disabled]{opacity:.4; cursor:default}

/* тост */
.toast{position:fixed; bottom:28px; left:50%; transform:translate(-50%, 8px);
  background:var(--ink); color:var(--paper); font:14.5px var(--sans);
  border-radius:var(--r-s); padding:10px 20px; opacity:0; transition:.25s; pointer-events:none; z-index:1000}
.toast.show{opacity:1; transform:translate(-50%, 0)}

.rule{border:none; border-top:1px solid var(--line); margin:0}

/* ---------- код-редактор ---------- */
.codeblk{margin:1.6em 0; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--sunken)}
.cb-head{display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--raised)}
.cb-dot{width:9px; height:9px; border-radius:50%; flex:0 0 9px}
.cb-lang{font:500 12px var(--mono); color:var(--soft); letter-spacing:.04em}
.cb-file{font:12px var(--mono); color:var(--faint)}
.cb-copy{margin-left:auto; font:12px var(--mono); color:var(--faint); background:none; border:none; cursor:pointer; padding:2px 4px}
.cb-copy:hover{color:var(--accent)}
.codeblk pre{margin:0; padding:16px 18px; overflow:auto; font:13.5px/1.65 var(--mono); color:var(--ink)}
.tk-kw{font-style:normal; color:var(--accent); font-weight:500}
.tk-str{font-style:normal; color:var(--moss)}
.tk-com{font-style:italic; color:var(--faint)}
.tk-num{font-style:normal; color:var(--clay)}
.tk-dec{font-style:normal; color:var(--iris)}

/* ---------- графики ---------- */
.chart{margin:1.8em 0; padding:20px 22px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--raised)}
.ch-head{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
.ch-title{font:600 14.5px var(--sans)}
.ch-unit{font:11.5px var(--mono); color:var(--faint); margin-left:auto}
.ch-bars{display:flex; flex-direction:column; gap:9px}
.ch-row{display:grid; grid-template-columns:minmax(90px,160px) 1fr 48px; gap:14px; align-items:center}
.ch-lbl{font:12.5px var(--mono); color:var(--soft); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-track{height:14px; background:var(--sunken); border-radius:2px; overflow:hidden}
.ch-bar{display:block; height:100%; background:var(--accent); opacity:.85; border-radius:2px}
.ch-val{font:12.5px var(--mono); color:var(--faint)}
.ch-line{width:100%; height:150px; display:block}
.ch-x{display:flex; justify-content:space-between; font:11px var(--mono); color:var(--faint); margin-top:8px}

/* ---------- колаут ---------- */
.callout{margin:1.6em 0; padding:16px 20px; background:var(--wash); border:1px solid color-mix(in oklab, var(--accent) 30%, transparent); border-radius:var(--r-m)}
.callout .co-label{display:block; font:500 11.5px var(--sans); letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:7px}
.callout p{margin:0; font:15.5px/1.65 var(--sans); color:var(--ink)}

/* ---------- ГЕОМЕТРИЯ И ЧЕРТЁЖ ---------- */
/* глиф перед оверлайнами и метками: ▵ ▢ ◇ ◯ ✳ ⊕ */
.geo{font-style:normal; font-family:var(--mono); color:var(--accent); font-size:.95em; margin-right:9px; display:inline-block; transform:translateY(-.5px)}
.t-overline .geo{font-size:11px}

/* размерная линия — линейка с засечками на концах */
.dim{position:relative; border:none; border-top:1px solid var(--line-strong); margin:0}
.dim::before,.dim::after{content:""; position:absolute; top:-4px; width:1px; height:9px; background:var(--line-strong)}
.dim::before{left:0}
.dim::after{right:0}

/* реперные кресты по углам блока (как на чертеже / печатном листе) */
.reg{position:relative}
.reg .reg-mark{position:absolute; width:13px; height:13px; pointer-events:none; color:var(--line-strong)}
.reg .reg-mark::before,.reg .reg-mark::after{content:""; position:absolute; background:currentColor}
.reg .reg-mark::before{left:6px; top:0; width:1px; height:13px}
.reg .reg-mark::after{top:6px; left:0; height:1px; width:13px}
.reg .reg-mark.tl{top:0; left:0}
.reg .reg-mark.tr{top:0; right:0}
.reg .reg-mark.bl{bottom:0; left:0}
.reg .reg-mark.br{bottom:0; right:0}

/* подпись-фигура: fig. 01 */
.fig{font:11px var(--mono); color:var(--faint); letter-spacing:.08em}

/* счётчик посещений — одометр из ячеек */
.visits{display:inline-flex; align-items:center; gap:12px}
.visits .digits{display:inline-flex}
.visits .digits span{font:500 15px/1 var(--mono); color:var(--ink); background:var(--raised);
  border:1px solid var(--line-strong); border-left:none; padding:7px 7px 6px; min-width:24px; text-align:center}
.visits .digits span:first-child{border-left:1px solid var(--line-strong); border-radius:var(--r-s) 0 0 var(--r-s)}
.visits .digits span:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.visits .vlabel{font:11.5px var(--mono); color:var(--faint); letter-spacing:.06em}

/* списки лонгрида — геометрический маркер */
.prose ul{list-style:none; padding-left:1.5em}
.prose ul li{position:relative}
.prose ul li::before{content:"▹"; position:absolute; left:-1.4em; color:var(--accent); font-size:.85em; top:.18em}

/* заголовки h2 лонгрида — тихий геометрический префикс */
.prose h2::before{content:"▢\2002"; color:var(--accent); font-size:.7em; vertical-align:.15em}

/* координатная миллиметровка — фон для героя/акцентных зон, едва видимая */
.graphpaper{background-image:
  linear-gradient(color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size:28px 28px}

/* карточка поста для витрины */
.pcard{background:var(--raised); border:1px solid var(--line); border-radius:var(--r-m); padding:24px 26px;
  display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s}
.pcard:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.pcard h3{margin:0; font:600 19px/1.35 var(--font-display)}
.pcard h3 a{color:var(--ink); text-decoration:none}
.pcard h3 a:hover{color:var(--accent)}
.pcard .ex{margin:0; font-size:14.5px; color:var(--soft); flex:1; text-wrap:pretty}

/* cover story — вариант «обложка» */
.cover{padding:72px 0 56px}
.cover .cv-title{font-family:var(--font-display); font-weight:600; font-size:clamp(34px,4.4vw,56px); line-height:1.1; letter-spacing:-.015em; text-wrap:balance; margin:14px 0 18px}
.cover .cv-title a{color:var(--ink); text-decoration:none}
.cover .cv-title a:hover{color:var(--accent)}
.cover .cv-ex{font:18px/1.6 var(--serif); color:var(--soft); max-width:36em; margin:0 0 20px; text-wrap:pretty}

/* дневник — месячные группы */
.month-h{display:flex; align-items:center; gap:14px; margin:44px 0 6px}
.month-h .t-overline{flex:0 0 auto}
.month-h .dim{flex:1}

/* ---------- АДМИНКА ---------- */
.adminbar{display:flex; align-items:baseline; gap:18px; padding:26px 0 14px}
.atabs{display:flex; gap:4px; border-bottom:1px solid var(--line-strong); flex-wrap:wrap}
.atabs a{display:inline-flex; align-items:center; gap:7px; font:14.5px var(--sans); color:var(--soft); text-decoration:none; padding:9px 16px; border:1px solid transparent; border-bottom:none; border-radius:var(--r-s) var(--r-s) 0 0; position:relative; top:1px}
.atabs a .geo{margin-right:0; font-size:11px}
.atabs a:hover{color:var(--ink)}
.atabs a.on{color:var(--ink); background:var(--paper); border-color:var(--line-strong); border-bottom:1px solid var(--paper)}
.adminbody{padding:30px 0 60px}
.ahead{display:flex; align-items:center; gap:16px; margin-bottom:22px}
.statrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:16px}
.stat{border:1px solid var(--line); border-radius:var(--r-m); background:var(--raised); padding:18px 20px}
.stat .num{display:block; font:600 30px/1 var(--mono); margin-bottom:6px}
.stat .lbl{font:12.5px var(--sans); color:var(--faint)}
.card{background:var(--raised); border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px}
.card.alink{text-decoration:none; color:var(--ink); display:block}
.card.alink:hover{border-color:var(--line-strong); box-shadow:var(--shadow)}
.card.alink p{margin:6px 0 0; font-size:13.5px; color:var(--soft)}
.atable{display:flex; flex-direction:column}
.arow{display:grid; grid-template-columns:14px minmax(180px,1.4fr) auto minmax(0,1fr) auto; gap:16px; align-items:center;
  padding:13px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); border-radius:var(--r-s)}
.arow:hover{background:var(--wash)}
.arow .cell-title{font:500 15px var(--sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.arow .cell-tags{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill{font:11.5px var(--mono); border-radius:99px; padding:3px 11px; white-space:nowrap}
.pill-moss{color:var(--moss); border:1px solid color-mix(in oklab, var(--moss) 45%, transparent); background:color-mix(in oklab, var(--moss) 9%, transparent)}
.pill-ochre{color:var(--ochre); border:1px solid color-mix(in oklab, var(--ochre) 45%, transparent); background:color-mix(in oklab, var(--ochre) 9%, transparent)}
.pill-clay{color:var(--clay); border:1px solid color-mix(in oklab, var(--clay) 45%, transparent); background:color-mix(in oklab, var(--clay) 9%, transparent)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.apane{min-width:0}
.mdarea{font-family:var(--mono); font-size:13.5px; line-height:1.7; min-height:340px; white-space:pre; overflow-x:auto}
.mdtools{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.mdtools button{font:12px var(--mono); color:var(--soft); background:var(--raised); border:1px solid var(--line); border-radius:var(--r-s); padding:5px 11px; cursor:pointer}
.mdtools button:hover{border-color:var(--accent); color:var(--accent)}
.prevhead{display:flex; align-items:baseline; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line-strong); margin-bottom:18px}
.prevhead .t-meta{margin-left:auto}
.preview{font-size:16px}
.sandbox-frame{width:100%; border:1px dashed var(--line-strong); border-radius:var(--r-m); background:#fff}
select.field{appearance:none; cursor:pointer}

/* image-slot — видимая рамка плейсхолдера в обеих темах */
image-slot{display:block; border:1px dashed var(--line-strong); background:var(--sunken); border-radius:var(--r-m); overflow:hidden}
image-slot[shape="circle"]{border-radius:50%}

/* ---------- 5. ВАРИАНТ II — «чертёж»: тот же Japandi, суше и техничнее ---------- */
html[data-variant="II"]{
  --font-display:var(--sans);
  --r-s:2px; --r-m:3px;
}
html[data-variant="II"] .t-display{font-weight:600; letter-spacing:-.025em; font-size:clamp(34px,4.2vw,52px)}
html[data-variant="II"] .wordmark{font-family:var(--mono); font-weight:500; letter-spacing:-.02em}
html[data-variant="II"] .pc .when, html[data-variant="II"] .t-meta{letter-spacing:.02em}
html[data-variant="II"] .pc h3{font-size:19px}
html[data-variant="II"] .prj h3{font-size:18px}
html[data-variant="II"] .tag{border-radius:var(--r-s)}
html[data-variant="II"] .rbtn{border-radius:var(--r-s)}
html[data-variant="II"] .prose{font-family:var(--sans); font-size:16px; line-height:1.7}
html[data-variant="II"] .prose blockquote{font-style:normal; border-left-color:var(--accent)}
html[data-variant="II"] .prose hr::after{content:"// \2002 // \2002 //"; font:12px var(--mono); letter-spacing:0}
html[data-variant="II"] .pagehead{padding-top:48px}
html[data-variant="II"] .cm .ava{border-radius:var(--r-s); font-family:var(--mono)}
html[data-variant="II"] .sitehead{backdrop-filter:none; background:var(--paper)}
html[data-variant="II"] .prose h2::before{content:"◇\2002"}