/* Семейные истории — тема «Альбом».
   Семейный альбом по десятилетиям: картонные страницы, бархатная бордовая обложка с золотым тиснением,
   вкладки-закладки сверху, снимки разных эпох в чёрных уголках (кабинетная карточка 1900-х, «зубчик» 50-х,
   квадрат 70-х, глянец с датой 90-х, моментальное фото 2010-х), «Семейное древо» на обложке,
   колода вопросов для интервью, памятка по оцифровке. Сообщения — письма родным: марка-портрет,
   «от кого / кому», почтовый штемпель, подпись от руки. Профиль — страница родословной книги.
   Шрифты: Alice (заголовки), Noto Serif (текст), Comforter (подписи от руки), все OFL. */

@font-face { font-family: "Alice"; src: url("fonts/alice-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alice"; src: url("fonts/alice-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-cyrillic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-cyrillic-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Comforter"; src: url("fonts/comforter-cyrillic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Comforter"; src: url("fonts/comforter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
	--rb-board: #d6c6a6;
	--rb-board2: #c7b48f;
	--rb-page: #f6eedd;
	--rb-page2: #efe3ca;
	--rb-paper: #fbf6ea;
	--rb-ink: #3a2a1f;
	--rb-ink2: #5a4434;
	--rb-mute: #7a6452;
	--rb-dim: #a08a74;
	--rb-line: rgba(58, 42, 31, .14);
	--rb-line2: rgba(58, 42, 31, .26);
	--rb-cover: #5a2326;
	--rb-cover2: #3e1619;
	--rb-cover3: #74302f;
	--rb-gold: #d2ad63;
	--rb-gold2: #a57f3a;
	--rb-corner: #211915;
	--rb-link: #7a3a28;
	--rb-pen: #2e486a;
	--rb-head: "Alice", "Georgia", "Times New Roman", serif;
	--rb-text: "Noto Serif", "Georgia", "Times New Roman", serif;
	--rb-hand: "Comforter", "Segoe Script", cursive;
	--rb-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--rb-wrap: 1260px;
	--rb-shadow: 0 1px 0 rgba(58, 42, 31, .08), 0 14px 30px -20px rgba(45, 30, 18, .55);
	--rb-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
	--rb-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .45' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.22'/%3E%3C/svg%3E");
}

/* оттенки закладок глав */
.rb-tone--clay  { --t: #a5583a; --tl: #f1dccd; --td: #7c3d24; }
.rb-tone--sepia { --t: #8a6a45; --tl: #eee0c8; --td: #644a2c; }
.rb-tone--rose  { --t: #9b4c5c; --tl: #f2dadd; --td: #723442; }
.rb-tone--ink   { --t: #3c5a75; --tl: #dce5ec; --td: #283f55; }
.rb-tone--moss  { --t: #5a6a43; --tl: #e2e7d3; --td: #3f4b2d; }
.rb-tone--ochre { --t: #a07a2c; --tl: #f2e5c4; --td: #73561a; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font: 400 16.5px/1.66 var(--rb-text);
	color: var(--rb-ink);
	background-color: var(--rb-board);
	background-image: var(--rb-noise), var(--rb-fiber), radial-gradient(1200px 600px at 50% -10%, rgba(255, 248, 230, .55), transparent 70%);
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--rb-link); text-decoration: none; }
a:hover { color: var(--rb-cover); }
:focus-visible { outline: 2px dashed var(--rb-cover); outline-offset: 3px; }
button { font: inherit; color: inherit; }
p { margin: 0 0 .8em; }
.rb-skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--rb-cover); color: #fff; padding: 8px 14px; }
.rb-skip:focus { left: 12px; }
.rb-ico { display: block; flex-shrink: 0; }

.rb-h1 { font: 400 clamp(28px, 3.2vw, 42px)/1.12 var(--rb-head); margin: 0 0 .35em; color: var(--rb-ink); }
.rb-h2 { font: 400 clamp(22px, 2vw, 28px)/1.2 var(--rb-head); margin: 0; color: var(--rb-ink); }
.rb-h3 { font: 400 13px/1.3 var(--rb-head); text-transform: uppercase; letter-spacing: .18em; color: var(--rb-mute); margin: 0 0 14px; }
.rb-kicker { font: 400 12.5px/1.35 var(--rb-head); text-transform: uppercase; letter-spacing: .2em; color: var(--rb-mute); margin: 0 0 8px; }
.rb-kicker a { color: inherit; border-bottom: 1px dotted currentColor; }
.rb-more { font: italic 400 14.5px/1.3 var(--rb-text); color: var(--rb-link); background: none; border: 0; padding: 0 0 1px; cursor: pointer; border-bottom: 1px dotted rgba(122, 58, 40, .55); }
.rb-more:hover { color: var(--rb-cover); border-bottom-style: solid; }
.rb-empty { color: var(--rb-mute); list-style: none; padding: 10px 0; font-style: italic; }
.rb-sheet { background: var(--rb-page); background-image: var(--rb-fiber); border: 1px solid rgba(58, 42, 31, .12); box-shadow: var(--rb-shadow); padding: 24px 26px; min-width: 0; }

/* ------------------------------------------------------------------ шапка-корешок и вкладки-закладки */
.rb-top { background: var(--rb-cover); background-image: var(--rb-noise), linear-gradient(180deg, var(--rb-cover3), var(--rb-cover) 55%, var(--rb-cover2)); color: #f3e3c4; position: relative; z-index: 20; }
.rb-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(210, 173, 99, .35); }
.rb-top__in { max-width: var(--rb-wrap); margin: 0 auto; padding: 14px 24px 10px; display: flex; align-items: center; gap: 22px; }
.rb-logo { display: flex; align-items: center; gap: 12px; color: #f6e7c8; min-width: 0; }
.rb-logo:hover { color: #fff; }
.rb-logo__mark { flex-shrink: 0; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); transition: transform .4s ease; }
.rb-logo:hover .rb-logo__mark { transform: rotate(-4deg) scale(1.04); }
.rb-logo__txt { display: grid; line-height: 1.1; min-width: 0; }
.rb-logo__name { font: 400 27px/1.05 var(--rb-head); color: var(--rb-gold); letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.rb-logo__sub { font: italic 400 13px/1.3 var(--rb-text); color: rgba(243, 227, 196, .78); margin-top: 3px; }
.rb-find { margin-left: auto; position: relative; display: flex; align-items: center; flex: 0 1 360px; }
.rb-find__l { position: absolute; left: -999px; }
.rb-find__i { position: absolute; left: 12px; color: rgba(243, 227, 196, .7); pointer-events: none; }
.rb-find input.textbox { width: 100%; background: rgba(0, 0, 0, .22); border: 1px solid rgba(210, 173, 99, .38); color: #fbefd6; padding: 9px 76px 9px 38px; border-radius: 2px; font-size: 15px; }
.rb-find input.textbox::placeholder { color: rgba(243, 227, 196, .55); font-style: italic; }
.rb-find input.textbox:focus { border-color: var(--rb-gold); box-shadow: none; outline: none; background: rgba(0, 0, 0, .3); }
.rb-find__b { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 12px; background: var(--rb-gold); color: var(--rb-cover2); border: 0; font: 400 14px/1 var(--rb-head); letter-spacing: .06em; cursor: pointer; border-radius: 1px; }
.rb-find__b:hover { background: #e6c47d; }
.rb-me { position: relative; }
.rb-me__b { display: flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(210, 173, 99, .45); color: #f6e7c8; padding: 6px 12px; border-radius: 2px; cursor: pointer; font: 400 15px/1 var(--rb-head); letter-spacing: .04em; white-space: nowrap; }
.rb-me__b:hover { border-color: var(--rb-gold); color: #fff; }
.rb-me__panel { position: absolute; right: 0; top: calc(100% + 10px); width: 300px; background: var(--rb-paper); color: var(--rb-ink); border: 1px solid var(--rb-line2); box-shadow: 0 24px 40px -18px rgba(30, 18, 10, .6); padding: 18px; z-index: 60; }

.rb-tabs { max-width: var(--rb-wrap); margin: 0 auto; padding: 4px 24px 0; }
.rb-tabs__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; align-items: flex-end; }
.rb-tabs__in::-webkit-scrollbar { display: none; }
.rb-tab { position: relative; display: grid; gap: 1px; padding: 8px 16px 9px; min-width: 128px; flex-shrink: 0; background: var(--t, #8d7b62); color: #fbf1dc; border-radius: 7px 7px 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -6px 10px -8px rgba(0, 0, 0, .45); transform: translateY(4px); transition: transform .25s ease, background .25s; }
.rb-tab--home { --t: #b9a07a; color: var(--rb-cover2); }
.rb-tab__era { font: italic 400 11.5px/1.2 var(--rb-text); opacity: .82; white-space: nowrap; }
.rb-tab__t { font: 400 16px/1.15 var(--rb-head); white-space: nowrap; }
.rb-tab:hover { transform: translateY(0); color: #fff; }
.rb-tab--home:hover { color: var(--rb-cover2); }
.rb-tab.is-on { background: var(--rb-page); color: var(--rb-ink); transform: translateY(1px); box-shadow: 0 -2px 0 var(--t) inset, 0 -1px 0 rgba(255, 255, 255, .4) inset; z-index: 2; }
.rb-tab.is-on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--t); border-radius: 7px 7px 0 0; }
.rb-tab.is-on .rb-tab__era { color: var(--td, var(--rb-mute)); opacity: 1; }
.rb-subtabs { background: var(--rb-page); border-bottom: 1px solid var(--rb-line); box-shadow: 0 6px 14px -12px rgba(45, 30, 18, .6); }
.rb-subtabs__in { max-width: var(--rb-wrap); margin: 0 auto; padding: 10px 24px; display: flex; gap: 6px 22px; flex-wrap: wrap; align-items: baseline; }
.rb-subtabs__k { font: 400 12px/1 var(--rb-head); letter-spacing: .2em; text-transform: uppercase; color: var(--td); margin-right: 4px; }
.rb-sub { color: var(--rb-ink2); font-size: 15px; padding: 2px 0; border-bottom: 1px solid transparent; }
.rb-sub:hover { color: var(--td); border-bottom-color: var(--t); }
.rb-sub.is-on { color: var(--td); border-bottom: 2px solid var(--t); }
.rb-crumbs-row { max-width: var(--rb-wrap); margin: 0 auto; padding: 14px 24px 0; }
.rb-crumbs { font: italic 400 14px/1.4 var(--rb-text); color: var(--rb-mute); display: flex; flex-wrap: wrap; gap: 4px 8px; }
.rb-crumbs a { color: var(--rb-ink2); }
.rb-crumbs a:hover { color: var(--rb-cover); }
.rb-crumbs .active { color: var(--rb-ink); }
.rb-crumbs__sep { color: var(--rb-dim); }
.rb-page--index .rb-crumbs-row { display: none; }
.rb-app { min-height: 100vh; display: flex; flex-direction: column; }
.rb-main { max-width: var(--rb-wrap); width: 100%; margin: 0 auto; padding: 18px 24px 56px; display: block; flex: 1 0 auto; }

/* ------------------------------------------------------------------ общие: лица, марки, штемпели, звания, «спасибо» */
.rb-face { display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; vertical-align: middle; border-radius: 50%; }
.rb-face img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(.28) saturate(.9) contrast(1.02); }
.rb-face--xs { width: 24px; height: 24px; font-size: 10px; }
.rb-face--s  { width: 34px; height: 34px; font-size: 13px; }
.rb-face--m  { width: 52px; height: 52px; font-size: 19px; }
.rb-face--l  { width: 64px; height: 64px; font-size: 23px; }
.rb-face--xl { width: 150px; height: 190px; font-size: 54px; border-radius: 50% / 50%; }
.rb-face--mono { font-family: var(--rb-head); color: #fbf1dc; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 -10px 18px -10px rgba(0, 0, 0, .35); }
.rb-ink-0 { background: #8a6a45; } .rb-ink-1 { background: #6f7c5a; } .rb-ink-2 { background: #9b5c4a; }
.rb-ink-3 { background: #50677a; } .rb-ink-4 { background: #7d5b6c; } .rb-ink-5 { background: #a07a2c; }
.rb-stack { display: flex; flex-wrap: wrap; }
.rb-stack .rb-face { margin-right: -7px; box-shadow: 0 0 0 2px var(--rb-page); }

/* марка: зубцы по краю, внутри портрет */
.rb-stamp { display: inline-block; flex-shrink: 0; padding: 6px; background: #fffdf6; box-shadow: 0 2px 4px rgba(45, 30, 18, .22);
	-webkit-mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, #0000 2.3px, #000 2.7px) -3.5px -3.5px / 7px 7px round;
	mask: linear-gradient(#000 0 0) content-box, radial-gradient(circle, #0000 2.3px, #000 2.7px) -3.5px -3.5px / 7px 7px round; transform: rotate(-3deg); }
.rb-stamp .rb-face { border-radius: 0; width: 56px; height: 66px; font-size: 21px; }
.rb-stamp--big .rb-face { width: 68px; height: 80px; font-size: 25px; }
.rb-stamp .rb-face--mono { background-image: linear-gradient(160deg, rgba(255, 255, 255, .18), transparent 60%); }

/* почтовый штемпель */
.rb-pmark { position: relative; display: inline-grid; place-items: center; align-content: center; width: 60px; height: 60px; border-radius: 50%; color: var(--td, var(--rb-ink2));
	border: 1.6px solid currentColor; box-shadow: inset 0 0 0 3px var(--rb-page), inset 0 0 0 4.2px currentColor; transform: rotate(-11deg); line-height: 1; opacity: .88; flex-shrink: 0; }
.rb-pmark b { font: 400 21px/1 var(--rb-head); }
.rb-pmark span { font: 400 10px/1.1 var(--rb-head); text-transform: uppercase; letter-spacing: .14em; }
.rb-pmark i { font: 400 9.5px/1 var(--rb-head); font-style: normal; letter-spacing: .08em; opacity: .85; }

.rb-rank { display: inline-flex; align-items: center; gap: 6px; font: italic 400 13.5px/1.2 var(--rb-text); color: var(--rb-ink2); }
.rb-badge { display: block; flex-shrink: 0; }
.rb-badge .pc { fill: #f8f0de; stroke: #8a6a45; stroke-width: 1; }
.rb-badge .im { fill: #b99c72; }
.rb-badge .co { fill: var(--rb-corner); }
.rb-badge .gd { fill: none; stroke: var(--rb-gold2); stroke-width: .9; }
.rb-badge .rb { fill: var(--rb-cover); }
.rb-badge--5 .pc, .rb-badge--6 .pc { stroke: var(--rb-gold2); }
.rb-rep { display: inline-flex; align-items: center; gap: 4px; font: 400 13px/1 var(--rb-text); color: var(--rb-mute); }
.rb-rep b { font: 700 13.5px/1 var(--rb-text); color: var(--rb-ink2); }
.rb-ribbon { display: block; }
.rb-ribbon path { fill: var(--rb-cover); }
.rb-rep--zero .rb-ribbon path { fill: var(--rb-dim); }
.rb-rep--down .rb-ribbon path { fill: #7a6f66; }

/* ------------------------------------------------------------------ снимки: уголки и пять эпох */
.rb-corner { position: absolute; width: 24px; height: 24px; z-index: 3; background: linear-gradient(135deg, #3a2e27, var(--rb-corner) 55%); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); pointer-events: none; }
.rb-corner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent 40%); clip-path: inherit; }
.rb-corner--tl { left: -5px; top: -5px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.rb-corner--tr { right: -5px; top: -5px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.rb-corner--bl { left: -5px; bottom: -5px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.rb-corner--br { right: -5px; bottom: -5px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.rb-photo { position: relative; display: block; width: 100%; max-width: 300px; transform: rotate(var(--tilt, -1deg)); transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), box-shadow .35s; box-shadow: 0 10px 18px -12px rgba(30, 18, 10, .7); }
a.rb-photo:hover, .rb-snap:hover .rb-photo { transform: rotate(0deg) translateY(-4px) scale(1.015); box-shadow: 0 18px 26px -14px rgba(30, 18, 10, .7); }
.rb-photo__img { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.rb-art { display: block; width: 100%; height: 100%; }
.rb-art .bg { fill: var(--pbg); } .rb-art .f1 { fill: var(--p1); } .rb-art .f2 { fill: var(--p2); } .rb-art .f3 { fill: var(--p3); } .rb-art .f4 { fill: var(--p4); } .rb-art .f5 { fill: var(--p5); }
.rb-art .ln, .rb-art .ln2 { fill: none; stroke: var(--pl); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-art .ln2 { stroke-width: 4.5; }
.rb-art .ln circle, .rb-art circle.ln { fill: none; }

/* I. кабинетная карточка 1900-х: плотный картон, золотой обрез, овальная виньетка сепией */
.rb-era--1 { --pbg: #dcc59c; --p1: #cdb185; --p2: #b39265; --p3: #6d5036; --p4: #8b6a44; --p5: #ead8b4; --pl: #573d27;
	background: linear-gradient(160deg, #efe1c1, #dfcca3); padding: 14px 16px 34px; border-radius: 3px; }
.rb-era--1::before { content: ""; position: absolute; inset: 7px 8px 26px; border: 1px solid rgba(165, 127, 58, .75); pointer-events: none; }
.rb-era--1::after { content: ""; position: absolute; left: 50%; bottom: 12px; width: 70px; height: 1px; margin-left: -35px; background: linear-gradient(90deg, transparent, rgba(165, 127, 58, .9), transparent); }
.rb-era--1 .rb-photo__img { border-radius: 50% / 50%; aspect-ratio: 5 / 4; box-shadow: inset 0 0 26px 8px rgba(110, 80, 54, .45); }
.rb-era--1 .rb-photo__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 30px 14px #e6d4ae; }
.rb-era--1 .rb-art { filter: sepia(.35); }

/* II. ч/б отпечаток 50-х с фигурным краем «зубчик» */
.rb-era--2 { --pbg: #c9c6bf; --p1: #e2dfd8; --p2: #a9a59c; --p3: #3c3a36; --p4: #6e6a62; --p5: #f1efe9; --pl: #2c2a27;
	background: #fbf9f3 padding-box; border: 9px solid transparent; border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='27' height='27'%3E%3Cpath fill='%23fbf9f3' d='M0 1.6 1.5 0 3 1.6 4.5 0 6 1.6 7.5 0 9 1.6 10.5 0 12 1.6 13.5 0 15 1.6 16.5 0 18 1.6 19.5 0 21 1.6 22.5 0 24 1.6 25.5 0 27 1.6 27 1.5 25.4 3 27 4.5 25.4 6 27 7.5 25.4 9 27 10.5 25.4 12 27 13.5 25.4 15 27 16.5 25.4 18 27 19.5 25.4 21 27 22.5 25.4 24 27 25.5 25.4 27 25.5 27 24 25.4 22.5 27 21 25.4 19.5 27 18 25.4 16.5 27 15 25.4 13.5 27 12 25.4 10.5 27 9 25.4 7.5 27 6 25.4 4.5 27 3 25.4 1.5 27 0 25.4 0 25.5 1.6 24 0 22.5 1.6 21 0 19.5 1.6 18 0 16.5 1.6 15 0 13.5 1.6 12 0 10.5 1.6 9 0 7.5 1.6 6 0 4.5 1.6 3 0 1.5 1.6 0z'/%3E%3C/svg%3E") 9 round; padding: 3px; }
.rb-era--2 .rb-art { filter: grayscale(1) contrast(1.05); }
.rb-era--2 .rb-photo__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(30, 28, 25, .28)); }

/* III. квадратный цветной отпечаток 70–80-х: белое поле, скруглённые углы, выцветший тёплый цвет */
.rb-era--3 { --pbg: #e8c49a; --p1: #f3dbb6; --p2: #c88a5a; --p3: #66705f; --p4: #c35a3d; --p5: #a3bba8; --pl: #5a4232;
	background: #fffaf0; padding: 9px; border-radius: 7px; }
.rb-era--3 .rb-photo__img { aspect-ratio: 1 / 1; border-radius: 4px; }
.rb-era--3 .rb-photo__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 214, 160, .32), rgba(120, 170, 160, .18)); mix-blend-mode: soft-light; }
.rb-era--3 .rb-art { filter: saturate(.75) sepia(.12); }

/* IV. глянец 90–2000-х без полей, оранжевая дата в углу */
.rb-era--4 { --pbg: #86acd0; --p1: #f3dbae; --p2: #4e8a5c; --p3: #2b3a55; --p4: #d9462e; --p5: #f4c84a; --pl: #1d2738;
	background: #111; padding: 0; border-radius: 1px; }
.rb-era--4 .rb-photo__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .26), transparent 38%, transparent 70%, rgba(255, 255, 255, .08)); }
.rb-era--4 .rb-art { filter: saturate(1.12) contrast(1.05); }
.rb-photo__date { position: absolute; right: 10px; bottom: 7px; z-index: 2; font: 700 15px/1 var(--rb-mono); letter-spacing: .12em; color: #ff8a24; text-shadow: 0 0 4px rgba(255, 120, 20, .85), 0 0 1px #ffb15c; }

/* V. моментальное фото 2010–2020-х: широкое нижнее поле, подпись маркером */
.rb-era--5 { --pbg: #e3ece6; --p1: #ffffff; --p2: #a6c3b3; --p3: #32453e; --p4: #df7a5e; --p5: #f2cb8d; --pl: #2a3a34;
	background: #fdfdfa; padding: 10px 10px 42px; border-radius: 2px; }
.rb-photo__pen { position: absolute; left: 10px; right: 10px; bottom: 6px; font: 400 27px/1.1 var(--rb-hand); color: #2c3e5c; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* VI. в любые годы: карточка из крафта, рисунок чернилами */
.rb-era--6 { --pbg: #dcc5a0; --p1: #ead8b8; --p2: #cdb18a; --p3: #6a4f3a; --p4: #a5583a; --p5: #f3e6cc; --pl: #4d3828;
	background: #c9ae84; background-image: var(--rb-fiber); padding: 8px; border-radius: 2px; }

/* ------------------------------------------------------------------ главная: обложка и древо */
.rb-cover { display: grid; gap: 22px; margin-bottom: 34px; }
.rb-cover__velvet { position: relative; padding: 16px 16px 16px 30px; background: var(--rb-cover); background-image: var(--rb-noise), radial-gradient(120% 140% at 25% 10%, var(--rb-cover3), var(--rb-cover) 55%, var(--rb-cover2)); box-shadow: 0 26px 40px -24px rgba(30, 12, 12, .8), inset 0 0 0 1px rgba(0, 0, 0, .3); border-radius: 4px 10px 10px 4px; color: #f3e3c4; }
.rb-cover__velvet::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .07) 60%, rgba(0, 0, 0, .22)); border-radius: 4px 0 0 4px; }
.rb-cover__frame { position: relative; border: 1.5px solid rgba(210, 173, 99, .75); outline: 1px solid rgba(210, 173, 99, .35); outline-offset: -8px; padding: 34px 40px 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px 46px; align-items: center; }
.rb-cover__title { text-align: center; }
.rb-cover__orn { justify-content: center; }
.rb-cover__k { font: 400 13px/1 var(--rb-head); letter-spacing: .34em; text-transform: uppercase; color: rgba(210, 173, 99, .85); margin: 0 0 18px; }
.rb-cover__h { font: 400 clamp(42px, 5vw, 66px)/1 var(--rb-head); margin: 0; color: var(--rb-gold); text-shadow: 0 1px 0 rgba(255, 230, 170, .35), 0 -1px 0 rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4); }
.rb-cover__orn { margin: 18px 0 0; display: flex; align-items: center; gap: 10px; }
.rb-cover__orn::before, .rb-cover__orn::after { content: ""; height: 1px; flex: 0 1 70px; background: linear-gradient(90deg, transparent, var(--rb-gold)); }
.rb-cover__orn::after { background: linear-gradient(90deg, var(--rb-gold), transparent); }
.rb-cover__orn span { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--rb-gold); }
.rb-cover__lead { font: 400 17px/1.62 var(--rb-text); color: #f0dfc0; max-width: 34em; margin: 0 0 20px; }
.rb-cover__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.rb-btn { display: inline-flex; align-items: center; padding: 11px 16px; font: 400 15.5px/1 var(--rb-head); letter-spacing: .04em; color: var(--rb-cover2); background: linear-gradient(180deg, #e6c47d, var(--rb-gold) 60%, #b8913f); border-radius: 2px; box-shadow: 0 2px 0 #7d5d26, inset 0 1px 0 rgba(255, 255, 255, .45); }
.rb-btn:hover { color: var(--rb-cover2); filter: brightness(1.06); }
.rb-btn--ghost { background: transparent; color: #f3e3c4; box-shadow: inset 0 0 0 1px rgba(210, 173, 99, .6); }
.rb-btn--ghost:hover { color: #fff; background: rgba(210, 173, 99, .12); filter: none; }

.rb-treebox { position: relative; background: var(--rb-page); background-image: var(--rb-fiber), radial-gradient(70% 80% at 40% 55%, rgba(255, 252, 240, .7), transparent 70%); border: 1px solid rgba(58, 42, 31, .12); box-shadow: var(--rb-shadow); padding: 22px 26px 18px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px 30px; align-items: start; min-width: 0; }
.rb-treebox::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(165, 127, 58, .28); pointer-events: none; }
.rb-treebox__side { display: grid; gap: 18px; align-content: start; padding-top: 10px; }
.rb-treebox__head { display: grid; gap: 6px; justify-items: start; }
.rb-treebox__head .rb-kicker { margin: 0; }
.rb-treebox__sub { font: italic 400 14.5px/1.5 var(--rb-text); color: var(--rb-mute); margin: 0 0 4px; }
.rb-tree { max-width: 800px; width: 100%; justify-self: center; }

.rb-tree__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rb-tree__ground { fill: #c9b48c; opacity: .55; }
.rb-tree__trunk { fill: #6b4f3a; }
.rb-tree__br { fill: none; stroke: #6b4f3a; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease, opacity .5s; }
.rb-tree__br.is-folded { stroke-dashoffset: 1; opacity: 0; }
.rb-tree__leaf { fill: #6f7d55; opacity: .8; transition: opacity .6s .35s, transform .6s .35s; }
.rb-tree__leaves g:nth-child(3n) .rb-tree__leaf { fill: #8a9668; } .rb-tree__leaves g:nth-child(4n) .rb-tree__leaf { fill: #a5874d; }
.rb-tree__leaf.is-folded { opacity: 0; transform: scale(.2); transition-delay: 0s; }
.rb-node { cursor: pointer; outline: none; }
.rb-node__in { transition: transform .45s cubic-bezier(.2, .8, .3, 1.3), opacity .35s; }
.rb-node.is-folded { pointer-events: none; }
.rb-node.is-folded .rb-node__in { transform: scale(.62); opacity: .6; }
.rb-node__q { font: 400 26px/1 var(--rb-head); fill: var(--rb-gold2); text-anchor: middle; opacity: 0; transition: opacity .3s; }
.rb-node__sil, .rb-node__name, .rb-node__plus, .rb-node__glass { transition: opacity .3s; }
.rb-node.is-folded .rb-node__sil, .rb-node.is-folded .rb-node__name, .rb-node.is-folded .rb-node__plus, .rb-node.is-folded .rb-node__glass { opacity: 0; }
.rb-node.is-folded .rb-node__q { opacity: 1; }
.rb-node.is-folded .rb-node__ring { fill: rgba(248, 239, 217, .4); stroke-dasharray: 4 5; stroke-width: 1.6; }
.rb-node.is-folded .rb-node__bg { fill: transparent; }
.rb-node__ring { fill: #f8efd9; stroke: var(--rb-gold2); stroke-width: 2.2; transition: stroke .25s, stroke-width .25s; }
.rb-node__bg { fill: #d8c29a; }
.rb-node__sil { fill: #6b4f3a; }
.rb-node__sil .tie { fill: none; stroke: #d8c29a; stroke-width: 1.4; }
.rb-node__glass { fill: rgba(255, 255, 255, .06); stroke: rgba(90, 60, 30, .35); stroke-width: 1; }
.rb-node__name--s { display: none; }
.rb-node__name { font: 400 15px/1 var(--rb-head); fill: var(--rb-ink); text-anchor: middle; paint-order: stroke; stroke: var(--rb-page); stroke-width: 4px; stroke-linejoin: round; }
.rb-node__plus circle { fill: var(--rb-cover); stroke: #f8efd9; stroke-width: 2; }
.rb-node__plus path { stroke: #f8efd9; stroke-width: 1.8; stroke-linecap: round; transition: transform .3s; transform-box: fill-box; transform-origin: center; }
.rb-node.is-open .rb-node__plus path:last-child { transform: scaleY(0); }
.rb-node.is-open .rb-node__plus circle { fill: var(--rb-gold2); }
.rb-node:hover .rb-node__ring, .rb-node:focus-visible .rb-node__ring { stroke: var(--rb-cover); stroke-width: 3; }
.rb-node.is-sel .rb-node__ring { stroke: var(--rb-cover); stroke-width: 4; }
.rb-node.is-sel .rb-node__bg { fill: #e4cfa6; }
.rb-node.is-sel .rb-node__name { fill: var(--rb-cover); }
.rb-tree__book { cursor: pointer; }
.rb-tree__bookp { fill: var(--rb-cover); stroke: var(--rb-gold2); stroke-width: 1.2; }
.rb-tree__bookl { fill: none; stroke: var(--rb-gold); stroke-width: 1; opacity: .75; }
.rb-tree__book g { transition: transform .3s; }
.rb-tree__book:hover g { transform: translate(120px, 400px); }
.rb-tree__booklbl { font: italic 400 13px/1 var(--rb-text); fill: var(--rb-ink2); text-anchor: middle; }
.rb-tree__panel { align-self: start; background: var(--rb-paper); border: 1px solid var(--rb-line); border-top: 3px solid var(--rb-cover); padding: 16px 16px 14px; box-shadow: 0 10px 20px -16px rgba(45, 30, 18, .6); position: relative; }
.rb-tree__panel::before { content: ""; position: absolute; top: -10px; left: 50%; width: 30px; height: 16px; margin-left: -15px; background: rgba(214, 198, 166, .78); transform: rotate(-4deg); }
.rb-tree__info.is-anim { animation: rb-in .35s ease; }
.rb-tree__who { font: 400 32px/1 var(--rb-hand); color: var(--rb-pen); margin: 4px 0 6px; }
.rb-tree__sec { font: 400 19px/1.2 var(--rb-head); margin: 0 0 8px; }
.rb-tree__hint { font-size: 14.5px; line-height: 1.55; color: var(--rb-ink2); }
.rb-tree__k { font: 400 11.5px/1 var(--rb-head); letter-spacing: .16em; text-transform: uppercase; color: var(--rb-mute); margin: 10px 0 6px; }
.rb-tree__fresh { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.rb-tree__fresh a { font: italic 400 14px/1.35 var(--rb-text); color: var(--rb-ink); }
.rb-tree__fresh a:hover { color: var(--rb-cover); }
.rb-tree__go { margin: 0; }
@keyframes rb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ главная: альбом по десятилетиям */
.rb-story { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 28px; align-items: start; }
.rb-ruler { position: sticky; top: 16px; padding: 10px 0; }
.rb-ruler__k { font: 400 11.5px/1 var(--rb-head); letter-spacing: .2em; text-transform: uppercase; color: var(--rb-ink2); margin: 0 0 14px; }
.rb-ruler ol { list-style: none; margin: 0; padding: 0 0 0 16px; position: relative; display: grid; gap: 18px; }
.rb-ruler ol::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1.5px; background: rgba(58, 42, 31, .3); }
.rb-ruler a { display: grid; gap: 1px; position: relative; color: var(--rb-ink2); transition: color .25s, transform .25s; }
.rb-ruler a::before { content: ""; position: absolute; left: -16px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--rb-board); border: 1.5px solid var(--t); transition: background .25s, transform .25s; }
.rb-ruler b { font: 400 25px/1 var(--rb-hand); font-weight: 400; color: var(--td); }
.rb-ruler span { font: 400 13.5px/1.2 var(--rb-head); }
.rb-ruler a:hover, .rb-ruler a.is-on { color: var(--rb-ink); transform: translateX(3px); }
.rb-ruler a.is-on::before { background: var(--t); transform: scale(1.25); }

.rb-ch { position: relative; background: var(--rb-page); background-image: var(--rb-fiber); border: 1px solid rgba(58, 42, 31, .12); box-shadow: var(--rb-shadow); padding: 40px 42px 44px; margin-bottom: 34px; min-height: min(80vh, 760px); scroll-margin-top: 16px; }
.rb-ch::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--t, var(--rb-gold2)); }
.rb-ch::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; background: linear-gradient(225deg, transparent 50%, rgba(58, 42, 31, .08) 50%, rgba(255, 255, 255, .5) 78%); }
.rb-ch__head { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "num t" "era lead"; gap: 4px 30px; margin-bottom: 30px; align-items: end; }
.rb-ch__num { grid-area: num; font: 400 13px/1 var(--rb-head); letter-spacing: .26em; text-transform: uppercase; color: var(--td, var(--rb-mute)); margin: 0 0 6px; }
.rb-ch__era { grid-area: era; font: 400 46px/1 var(--rb-hand); color: var(--t, var(--rb-ink2)); margin: 0; align-self: start; }
.rb-ch__t { grid-area: t; font: 400 clamp(30px, 3.2vw, 44px)/1.05 var(--rb-head); margin: 0; }
.rb-ch__t a { color: var(--rb-ink); }
.rb-ch__t a:hover { color: var(--td); }
.rb-ch__lead { grid-area: lead; font-size: 16.5px; line-height: 1.6; color: var(--rb-ink2); max-width: 46em; margin: 6px 0 0; }
.rb-ch--last { min-height: 0; }
.rb-ch--last .rb-ch__head { grid-template-areas: "num" "t"; grid-template-columns: 1fr; }
.rb-ch__more { margin: 18px 0 0; }

.rb-snaps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 34px; }
.rb-snaps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.rb-snap { min-width: 0; display: grid; align-content: start; gap: 18px; }
.rb-snap:nth-child(2) .rb-photo { margin-top: 18px; }
.rb-snap__cap { padding-left: 4px; }
.rb-snap__t { font: 400 22px/1.15 var(--rb-head); margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; }
.rb-snap__t a { color: var(--rb-ink); }
.rb-snap__t a:hover { color: var(--td, var(--rb-cover)); }
.rb-snap__d { font-size: 14.5px; line-height: 1.55; color: var(--rb-mute); margin: 0 0 12px; }
.rb-snap__fresh { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rb-snap__fresh li { padding-bottom: 8px; background: linear-gradient(90deg, rgba(58, 42, 31, .25) 50%, transparent 50%) 0 100% / 6px 1px repeat-x; }
.rb-snap__fresh a { display: block; font: italic 400 15px/1.4 var(--rb-text); color: var(--rb-ink); }
.rb-snap__fresh a:hover { color: var(--td, var(--rb-cover)); }
.rb-snap__fresh span { display: block; font: 400 12.5px/1.3 var(--rb-text); color: var(--rb-dim); margin-top: 2px; }
.rb-snap__none { font: italic 400 14px/1.4 var(--rb-text); color: var(--rb-dim); background: none !important; }
.rb-js .rb-snap { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rb-js .rb-snap.is-in { opacity: 1; transform: none; }
.rb-js .rb-snap:nth-child(2) { transition-delay: .1s; } .rb-js .rb-snap:nth-child(3) { transition-delay: .2s; }

/* колода вопросов */
.rb-deck { margin-top: 44px; padding-top: 34px; border-top: 1px dashed var(--rb-line2); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.rb-deck__h, .rb-scan__h { font: 400 clamp(24px, 2.4vw, 32px)/1.15 var(--rb-head); margin: 0 0 10px; }
.rb-deck__lead { color: var(--rb-ink2); font-size: 15.5px; }
.rb-deck__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.rb-deck__tab { background: transparent; border: 1px solid var(--rb-line2); padding: 7px 13px; font: 400 15px/1 var(--rb-head); color: var(--rb-ink2); cursor: pointer; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; }
.rb-deck__tab:hover { border-color: var(--t); color: var(--td); }
.rb-deck__tab.is-on { background: var(--t); border-color: var(--t); color: #fff7ea; }
.rb-deck__foot { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; }
.rb-deck__table { position: relative; min-height: 290px; padding: 10px 26px 30px; }
.rb-deck__stack { list-style: none; margin: 0; padding: 0; position: relative; height: 250px; }
.rb-qcard { position: absolute; inset: 0; background: #fffdf7; border: 1px solid rgba(58, 42, 31, .16); box-shadow: 0 12px 22px -16px rgba(45, 30, 18, .7); padding: 18px 22px 16px 26px; cursor: pointer;
	background-image: linear-gradient(transparent 0 46px, rgba(176, 60, 60, .55) 46px 47.5px, transparent 47.5px), repeating-linear-gradient(transparent 0 30px, rgba(60, 90, 117, .18) 30px 31px);
	background-size: 100% 100%, 100% 31px; background-position: 0 0, 0 47px; background-repeat: no-repeat, repeat-y;
	transform: translate(calc(var(--pos, 0) * 9px), calc(var(--pos, 0) * 7px)) rotate(calc(var(--pos, 0) * 1.6deg - 1deg)); z-index: calc(20 - var(--pos, 0)); transition: transform .45s cubic-bezier(.2, .8, .3, 1.1), opacity .35s; }
.rb-qcard[data-pos="hide"] { opacity: 0; pointer-events: none; }
.rb-qcard.is-going { transform: translate(115%, -30px) rotate(14deg); opacity: 0; }
.rb-qcard__k { font: 400 11.5px/1 var(--rb-head); letter-spacing: .16em; text-transform: uppercase; color: var(--rb-mute); margin: 4px 0 22px; }
.rb-qcard__q { font: 400 clamp(19px, 1.8vw, 23px)/1.36 var(--rb-head); color: var(--rb-ink); margin: 0 0 12px; }
.rb-qcard__h { font: italic 400 14px/1.45 var(--rb-text); color: var(--rb-pen); margin: 0; }
.rb-qcard__h::before { content: "Совет: "; font-style: normal; color: var(--rb-mute); }
.rb-deck__count { position: absolute; right: 26px; bottom: 0; font: italic 400 14px/1 var(--rb-text); color: var(--rb-mute); margin: 0; }
.rb-js .rb-deck__stack:not([hidden]) .rb-qcard:first-child:hover { transform: translate(0, -4px) rotate(-1.5deg); }

/* памятка «Как оцифровать фото» */
.rb-scan { margin-top: 44px; padding-top: 34px; border-top: 1px dashed var(--rb-line2); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 34px; align-items: start; }
.rb-scan__steps { list-style: none; counter-reset: st; margin: 14px 0 12px; padding: 0; display: grid; gap: 12px; }
.rb-scan__steps li { counter-increment: st; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; font-size: 15px; line-height: 1.55; color: var(--rb-ink2); }
.rb-scan__steps li::before { content: counter(st); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 18px/1 var(--rb-head); color: var(--rb-page); background: var(--t, var(--rb-ink2)); box-shadow: inset 0 0 0 2px var(--rb-page), 0 0 0 1px var(--t); }
.rb-scan__steps b { font: 400 17px/1.3 var(--rb-head); font-weight: 400; color: var(--rb-ink); }
.rb-namer { background: #e7d3ae; background-image: var(--rb-fiber); border: 1px solid rgba(58, 42, 31, .18); padding: 20px 20px 16px; box-shadow: 0 14px 22px -18px rgba(45, 30, 18, .8); transform: rotate(.6deg); }
.rb-namer__k { font: 400 13px/1 var(--rb-head); letter-spacing: .18em; text-transform: uppercase; color: var(--rb-ink2); margin: 0 0 14px; }
.rb-namer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.rb-namer__grid label { display: grid; gap: 4px; font: italic 400 13px/1.2 var(--rb-text); color: var(--rb-mute); }
.rb-namer__wide { grid-column: 1 / -1; }
.rb-namer input { width: 100%; font: 400 15.5px/1.3 var(--rb-text); color: var(--rb-ink); background: rgba(255, 253, 246, .75); border: 0; border-bottom: 1.5px solid rgba(58, 42, 31, .4); padding: 7px 8px 6px; border-radius: 0; }
.rb-namer input:focus { outline: none; border-bottom-color: var(--rb-cover); background: #fffdf6; }
.rb-namer__out { margin: 16px 0 10px; background: #fffdf6; border: 1px dashed rgba(58, 42, 31, .35); padding: 10px 12px; overflow-wrap: anywhere; }
.rb-namer__out code { font: 600 14px/1.45 var(--rb-mono); color: var(--rb-cover); }
.rb-namer__note { font-size: 13.5px; line-height: 1.5; color: var(--rb-ink2); margin: 0 0 12px; }
.rb-namer__back { font-size: 13.5px; line-height: 1.5; color: var(--rb-ink2); background: rgba(255, 253, 246, .55); padding: 10px 12px; border-left: 3px solid var(--rb-pen); }
.rb-namer__back b { font-weight: 700; color: var(--rb-ink); }

/* подписи-письма: свежие истории */
.rb-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rb-caps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 36px; }
.rb-cap { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px 0; background: linear-gradient(90deg, rgba(58, 42, 31, .22) 50%, transparent 50%) 0 100% / 6px 1px repeat-x; }
.rb-cap__b { min-width: 0; }
.rb-cap__k { font: 400 11.5px/1.2 var(--rb-head); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 3px; color: var(--td); }
.rb-cap__k a { color: inherit; }
.rb-cap__t { font: 400 19px/1.25 var(--rb-head); margin: 0 0 5px; }
.rb-cap__t a { color: var(--rb-ink); }
.rb-cap__t a:hover { color: var(--td); }
.rb-cap__m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: italic 400 13px/1.3 var(--rb-text); color: var(--rb-mute); margin: 0; }

/* ------------------------------------------------------------------ раздел */
.rb-fhead { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: 34px; align-items: center; background: var(--rb-page); background-image: var(--rb-fiber); border: 1px solid rgba(58, 42, 31, .12); border-top: 5px solid var(--t); box-shadow: var(--rb-shadow); padding: 30px 34px; margin-bottom: 24px; }
.rb-page--cat .rb-fhead { grid-template-columns: minmax(0, 1fr) auto; }
.rb-fhead__d { color: var(--rb-ink2); max-width: 44em; margin: 0; }
.rb-fhead__act { align-self: end; }
.rb-subs { margin-bottom: 24px; padding: 34px 34px 38px; }
.rb-group { margin-bottom: 24px; }
.rb-group__t { font: 400 26px/1.2 var(--rb-head); margin: 0 0 22px; }
.rb-tlist { padding: 24px 28px 14px; }
.rb-tlist__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
.rb-sort { display: flex; flex-wrap: wrap; gap: 4px 14px; font: italic 400 14px/1.3 var(--rb-text); color: var(--rb-mute); margin: 0; }
.rb-sort a { color: var(--rb-ink2); border-bottom: 1px dotted currentColor; }
.rb-tlist__list { list-style: none; margin: 0; padding: 0; }
.rb-trow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 92px; gap: 18px; align-items: center; padding: 16px 0; background: linear-gradient(90deg, rgba(58, 42, 31, .22) 50%, transparent 50%) 0 100% / 6px 1px repeat-x; position: relative; }
.rb-trow__h { font: 400 21px/1.25 var(--rb-head); margin: 0 0 6px; }
.rb-trow__t { color: var(--rb-ink); }
.rb-trow__t:hover { color: var(--td); }
.rb-trow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font: italic 400 13.5px/1.3 var(--rb-text); color: var(--rb-mute); margin: 0; }
.rb-trow__by a { color: var(--rb-ink2); font-style: normal; }
.rb-trow__n { text-align: center; display: grid; justify-items: center; padding: 8px 4px; border: 1px solid var(--rb-line); background: rgba(255, 253, 246, .6); color: var(--rb-ink2); }
.rb-trow__n b { font: 400 24px/1 var(--rb-head); color: var(--td); }
.rb-trow__n span { font: italic 400 12px/1.2 var(--rb-text); }
.rb-trow__n:hover { border-color: var(--t); color: var(--rb-ink); }
.rb-trow__mod { position: absolute; right: -6px; top: 8px; }
.rb-pages { font: italic 400 13px/1 var(--rb-text); margin-left: 8px; color: var(--rb-mute); }
.rb-pages a { color: var(--rb-ink2); }
.rb-sep { list-style: none; font: 400 12px/1 var(--rb-head); letter-spacing: .2em; text-transform: uppercase; color: var(--td, var(--rb-mute)); padding: 18px 0 6px; }
.rb-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; margin: 18px 0; }
.rb-bar__r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.rb-new { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rb-new--on { background: var(--rb-cover); }

/* ------------------------------------------------------------------ тема: переписка письмами */
.rb-corr { margin-bottom: 20px; }
.rb-thead { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 34px; align-items: center; background: var(--rb-page); background-image: var(--rb-fiber); border: 1px solid rgba(58, 42, 31, .12); border-top: 5px solid var(--t); box-shadow: var(--rb-shadow); padding: 28px 34px; margin-bottom: 30px; }
.rb-thead__h { font-size: clamp(27px, 3vw, 38px); }
.rb-thead__by { display: flex; align-items: center; gap: 10px; font-style: italic; color: var(--rb-ink2); margin: 0 0 14px; }
.rb-thead__by b { font-style: normal; color: var(--rb-ink); font-weight: 400; font-family: var(--rb-head); font-size: 17px; }
.rb-thead__dl { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0; }
.rb-thead__dl div { display: grid; gap: 4px; }
.rb-thead__dl dt { font: 400 11px/1 var(--rb-head); letter-spacing: .18em; text-transform: uppercase; color: var(--rb-mute); }
.rb-thead__dl dd { margin: 0; font: 400 17px/1.2 var(--rb-head); color: var(--rb-ink); }

.rb-letters { display: grid; gap: 26px; max-width: 920px; margin: 0 auto; }
.rb-letter { position: relative; background: var(--rb-paper); background-image: var(--rb-fiber), linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 120px); border: 1px solid rgba(58, 42, 31, .14); box-shadow: 0 2px 0 rgba(58, 42, 31, .05), 0 16px 26px -20px rgba(45, 30, 18, .75); padding: 24px 34px 18px; }
.rb-letter:nth-child(even) { transform: rotate(.25deg); background-color: #f9f2e2; }
.rb-letter:nth-child(3n) { transform: rotate(-.3deg); }
.rb-letter--first { padding-top: 34px; border-color: rgba(58, 42, 31, .2); }
.rb-letter--first::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(165, 127, 58, .35); pointer-events: none; }
.rb-letter.is-target { box-shadow: 0 0 0 3px rgba(90, 35, 38, .35), 0 16px 26px -20px rgba(45, 30, 18, .75); }
.rb-anchor { position: absolute; top: -24px; }
.rb-letter__flag { position: absolute; left: 34px; top: -11px; margin: 0; background: var(--t, var(--rb-cover)); color: #fff7ea; font: 400 12px/1 var(--rb-head); letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px 6px; }
.rb-letter__flag--op { background: var(--rb-pen); }
.rb-letter__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--rb-line); }
.rb-letter__addr { margin: 0; display: grid; gap: 7px; min-width: 0; }
.rb-letter__addr div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; gap: 10px; padding-bottom: 4px; background: linear-gradient(90deg, rgba(58, 42, 31, .3) 50%, transparent 50%) 76px 100% / 4px 1px repeat-x; }
.rb-letter__addr dt { font: italic 400 13px/1.2 var(--rb-text); color: var(--rb-mute); }
.rb-letter__addr dd { margin: 0; font: 400 15px/1.35 var(--rb-text); color: var(--rb-ink2); min-width: 0; overflow-wrap: anywhere; }
.rb-letter__nick a { font: 400 18px/1.2 var(--rb-head); color: var(--rb-ink); }
.rb-letter__nick a:hover { color: var(--rb-cover); }
.rb-letter__city { font-style: italic; color: var(--rb-mute); margin-left: 8px; font-size: 14px; }
.rb-letter__city::before { content: "· "; }
.rb-letter__addr dd > a { color: var(--rb-ink); font-family: var(--rb-head); }
.rb-letter__re { font-size: 13px; font-style: italic; color: var(--rb-dim); }
.rb-letter__when { display: flex; align-items: center; gap: 12px; color: var(--rb-mute); text-align: right; }
.rb-letter__when time { display: grid; font: italic 400 14px/1.3 var(--rb-text); }
.rb-letter__when time span { font-size: 12.5px; color: var(--rb-dim); }
.rb-letter__when:hover { color: var(--rb-cover); }
.rb-pmark--post { width: 56px; height: 56px; }
.rb-letter__body { font-size: 16.5px; line-height: 1.72; color: var(--rb-ink); overflow-wrap: anywhere; }
.rb-letter--first .rb-letter__body { font-size: 17.5px; }
.rb-letter__sign { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.rb-letter__close { margin: 0; display: grid; justify-items: start; line-height: 1; }
.rb-letter__close span { font: italic 400 14px/1.2 var(--rb-text); color: var(--rb-mute); }
.rb-letter__close b { font: 400 38px/1.05 var(--rb-hand); color: var(--rb-pen); margin: 2px 0 0 16px; transform: rotate(-3deg); }
.rb-letter__creds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; }
.rb-letter__tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rb-line); }
.post_meta { font: italic 400 12.5px/1.3 var(--rb-text); color: var(--rb-dim); }
.post_meta:empty { display: none; }
.rb-guest { max-width: 920px; margin: 0 auto 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; background: var(--rb-page2); border: 1px dashed var(--rb-line2); padding: 16px 20px; }
.rb-guest p { margin: 0; font-style: italic; color: var(--rb-ink2); }
.rb-tfoot { max-width: 920px; margin: 26px auto 10px; display: grid; gap: 10px; }
.rb-tfoot__note { font: italic 400 13.5px/1.5 var(--rb-text); color: var(--rb-mute); margin: 0; }
.rb-nextprev { display: flex; justify-content: space-between; gap: 14px; }
.rb-nextprev a { font: 400 15px/1.2 var(--rb-head); color: var(--rb-ink2); border-bottom: 1px dotted currentColor; }
.rb-tools { max-width: 920px; margin: 14px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.thread_tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.thread_tools li { background: none !important; padding: 0 !important; }

/* ------------------------------------------------------------------ профиль: страница родословной книги */
.rb-prof { display: grid; gap: 24px; }
.rb-prof__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 34px; align-items: center; padding: 30px 36px; }
.rb-prof__frame { padding: 16px 18px; background: linear-gradient(160deg, #efe1c1, #dccaa1); box-shadow: 0 12px 18px -12px rgba(30, 18, 10, .6), inset 0 0 0 1px rgba(165, 127, 58, .5); transform: rotate(-1.5deg); }
.rb-prof__frame .rb-face { box-shadow: 0 0 0 3px #f6ecd4, 0 0 0 4px rgba(165, 127, 58, .8); }
.rb-prof__frame .rb-face--mono { font-size: 58px; }
.rb-prof__name { margin-bottom: 10px; }
.rb-prof__rank { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; font: italic 400 16px/1.3 var(--rb-text); color: var(--rb-ink2); }
.rb-prof__nums { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.rb-prof__nums li { display: grid; justify-items: center; padding: 12px 16px; border: 1px solid var(--rb-line2); min-width: 98px; background: rgba(255, 253, 246, .55); }
.rb-prof__nums b { font: 400 34px/1 var(--rb-head); color: var(--rb-cover); }
.rb-prof__nums span { font: italic 400 13px/1.2 var(--rb-text); color: var(--rb-mute); }
.rb-prof__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; }
.rb-anketa__dl { margin: 0 0 14px; display: grid; gap: 0; }
.rb-anketa__dl div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; padding: 10px 0; background: linear-gradient(90deg, rgba(58, 42, 31, .25) 50%, transparent 50%) 0 100% / 5px 1px repeat-x; }
.rb-anketa__dl dt { font: italic 400 14px/1.4 var(--rb-text); color: var(--rb-mute); }
.rb-anketa__dl dd { margin: 0; font: 400 16px/1.4 var(--rb-head); color: var(--rb-ink); }
.rb-anketa__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.rb-ladder__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rb-ladder__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; color: var(--rb-dim); }
.rb-ladder__list li.is-past { color: var(--rb-ink2); }
.rb-ladder__list li.is-now { color: var(--rb-ink); background: rgba(210, 173, 99, .22); box-shadow: inset 3px 0 0 var(--rb-cover); }
.rb-ladder__t { font: 400 16.5px/1.2 var(--rb-head); }
.rb-ladder__n { font: italic 400 13px/1 var(--rb-text); }
.rb-quotes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.rb-quote__t { margin: 0 0 4px; font: italic 400 15px/1.55 var(--rb-text); }
.rb-quote__t a { color: var(--rb-ink); }
.rb-quote__t a::before { content: "«"; } .rb-quote__t a::after { content: "»"; }
.rb-quote__m { font-size: 12.5px; color: var(--rb-dim); margin: 0; }
.rb-prof__extra:empty { display: none; }

/* ------------------------------------------------------------------ ошибки и переходы */
.rb-msg { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 34px; align-items: center; max-width: 900px; margin: 30px auto; padding: 36px 40px; }
.rb-msg__empty { position: relative; width: 150px; height: 120px; margin: 0; border: 1.5px dashed rgba(58, 42, 31, .3); transform: rotate(-3deg); background: rgba(58, 42, 31, .04); }
.rb-msg__empty--full { background: linear-gradient(160deg, #e5d2ab, #c9ad80); border-style: solid; }
.rb-msg__body { color: var(--rb-ink2); }
.rb-msg__body ol, .rb-msg__body ul { padding-left: 1.3em; }
.rb-page--redirect .rb-msg { margin-top: 12vh; }

/* ------------------------------------------------------------------ подвал: задняя крышка альбома */
.rb-foot { background: var(--rb-cover2); background-image: var(--rb-noise), linear-gradient(180deg, var(--rb-cover), var(--rb-cover2)); color: rgba(243, 227, 196, .8); border-top: 1px solid rgba(210, 173, 99, .4); }
.rb-foot__in { max-width: var(--rb-wrap); margin: 0 auto; padding: 34px 24px 40px; display: grid; gap: 16px; }
.rb-foot__brand { max-width: 52em; margin: 0; font-size: 15px; line-height: 1.6; }
.rb-foot__brand b { font: 400 21px/1 var(--rb-head); color: var(--rb-gold); font-weight: 400; }
.rb-foot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rb-foot__links a { color: #f3e3c4; font: 400 15px/1.3 var(--rb-head); border-bottom: 1px solid rgba(210, 173, 99, .35); }
.rb-foot__links a:hover { color: var(--rb-gold); border-color: var(--rb-gold); }
.rb-foot__note { font: italic 400 13px/1.5 var(--rb-text); color: rgba(243, 227, 196, .6); margin: 0; max-width: 60em; }

/* ------------------------------------------------------------------ вход и меню участника */
.rb-login__p { font-size: 14px; color: var(--rb-mute); font-style: italic; }
.rb-field { margin: 0 0 12px; display: grid; gap: 5px; }
.rb-field label { font: 400 12px/1 var(--rb-head); letter-spacing: .12em; text-transform: uppercase; color: var(--rb-mute); }
.rb-field--row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.rb-field--row label { letter-spacing: 0; text-transform: none; font: 400 14px/1.2 var(--rb-text); color: var(--rb-ink2); }
.rb-field input.textbox { width: 100%; }
.rb-field .button { width: 100%; }
.rb-mine__who { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.rb-mine__who span { display: grid; }
.rb-mine__who a { font-size: 13px; font-style: italic; }
.rb-mine__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.rb-mine__links a { display: block; padding: 8px 10px; color: var(--rb-ink2); font-size: 15px; }
.rb-mine__links a:hover { background: var(--rb-page2); color: var(--rb-cover); }
.rb-pm[data-n="0"] { display: none; }
.rb-pm { background: var(--rb-cover); color: #fff; border-radius: 999px; padding: 1px 6px; font: 700 11px/1.3 var(--rb-text); }

/* ------------------------------------------------------------------ стандартные элементы MyBB в стиле альбома */
.tborder { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--rb-page); background-image: var(--rb-fiber); border: 1px solid rgba(58, 42, 31, .14); margin: 0 0 18px; color: var(--rb-ink); box-shadow: var(--rb-shadow); }
.tborder td, .tborder th { padding: 10px 14px; border-bottom: 1px solid var(--rb-line); vertical-align: top; text-align: left; }
.thead { background: transparent; border-bottom: 3px double var(--rb-line2) !important; color: var(--rb-ink); font: 400 21px/1.3 var(--rb-head); }
.thead a, .thead strong { color: var(--rb-ink); font-weight: 400; }
.thead .expcolimage { float: right; }
.tcat { background: var(--rb-page2); font: 400 12px/1.3 var(--rb-head); letter-spacing: .14em; text-transform: uppercase; color: var(--rb-ink2); }
.tcat a { color: var(--rb-ink2); }
.trow1, .trow2 { background: transparent; }
.trow2 { background: rgba(255, 253, 246, .45); }
.trow_shaded { background: rgba(90, 35, 38, .06); }
.trow_selected td, .trow_selected { background: rgba(210, 173, 99, .22); }
.tfoot { background: var(--rb-page2); }
.tborder a, .trow1 a, .trow2 a, .tfoot a { color: var(--rb-link); }
.smalltext { font-size: 13px; line-height: 1.45; color: var(--rb-mute); }
.largetext { font: 400 21px/1.3 var(--rb-head); }
.float_left { float: left; } .float_right { float: right; } .clear { clear: both; }
input.textbox, textarea, select, input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="number"], input[type="url"] {
	font: 400 16px/1.4 var(--rb-text); color: var(--rb-ink); background: #fffdf6; border: 1px solid var(--rb-line2); border-radius: 2px; padding: 9px 12px; max-width: 100%; transition: border-color .2s, box-shadow .2s; }
textarea { width: 100%; min-height: 170px; line-height: 1.6; }
input.textbox:focus, textarea:focus, select:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus { outline: none; border-color: var(--rb-cover); box-shadow: 0 0 0 3px rgba(90, 35, 38, .12); }
.button, input.button, button.button, a.button, input[type="submit"], input[type="button"], button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 400 15.5px/1 var(--rb-head); letter-spacing: .04em; color: #f6e7c8; background: var(--rb-cover); background-image: linear-gradient(180deg, var(--rb-cover3), var(--rb-cover)); border: 0; border-radius: 2px; padding: 12px 18px; cursor: pointer; text-decoration: none; box-shadow: 0 2px 0 var(--rb-cover2), inset 0 0 0 1px rgba(210, 173, 99, .35); transition: filter .2s, transform .15s; }
.button:hover, input.button:hover, input[type="submit"]:hover, button[type="submit"]:hover, a.button:hover { color: #fff; filter: brightness(1.12); }
.button:active, input[type="submit"]:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rb-cover2); }
.new_thread_button, .new_reply_button { background: var(--t, var(--rb-cover)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent); box-shadow: 0 2px 0 var(--td, var(--rb-cover2)); }
.closed_button { background: var(--rb-page2); color: var(--rb-mute); box-shadow: none; }
.rb-find__b { box-shadow: none; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: 400 14px/1 var(--rb-head); }
.pagination .pages { color: var(--rb-mute); margin-right: 6px; font-style: italic; font-family: var(--rb-text); }
.pagination a, .pagination .pagination_current { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border: 1px solid var(--rb-line2); color: var(--rb-ink2); background: #fffdf6; }
.pagination a:hover { border-color: var(--rb-cover); color: var(--rb-cover); }
.pagination .pagination_current { background: var(--rb-cover); border-color: var(--rb-cover); color: #f6e7c8; }
.postbit_buttons { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.postbit_buttons > a, .postbit_buttons a { display: inline-flex; align-items: center; padding: 3px 0; font: italic 400 13px/1.2 var(--rb-text); color: var(--rb-mute); }
.postbit_buttons a:hover { color: var(--rb-cover); }
.postbit_buttons a span { background: none !important; padding: 0 !important; }
.popup_menu { background: var(--rb-paper); border: 1px solid var(--rb-line2); padding: 6px; box-shadow: 0 18px 30px -14px rgba(45, 30, 18, .5); z-index: 50; }
.popup_menu .popup_item { display: block; padding: 7px 10px; color: var(--rb-ink2); font-size: 15px; }
.popup_menu .popup_item:hover { background: var(--rb-page2); }
.blocker { background: rgba(40, 20, 15, .55) !important; }
.modal { background: var(--rb-paper) !important; color: var(--rb-ink); border: 1px solid var(--rb-line2); border-radius: 2px !important; box-shadow: 0 30px 60px -20px rgba(30, 18, 10, .6) !important; padding: 18px !important; }
.modal .tborder { margin: 0; box-shadow: none; }
.error, div.error { background: #f6e0d8; border: 1px solid rgba(90, 35, 38, .35); padding: 12px 16px; color: var(--rb-ink); margin-bottom: 14px; }
.red_alert, .pm_alert { background: #f2e5c4; border: 1px solid rgba(160, 122, 44, .4); padding: 10px 14px; margin-bottom: 14px; }
fieldset { border: 1px solid var(--rb-line2); padding: 12px 14px; margin: 0 0 14px; }
legend { font: 400 12px/1 var(--rb-head); letter-spacing: .14em; text-transform: uppercase; color: var(--rb-mute); padding: 0 6px; }
.usercp_nav_item, .modcp_nav_item { display: block; padding: 6px 4px; color: var(--rb-ink2); }
.sceditor-container { max-width: 100%; }
.ignored_post, .deleted_post_hidden { padding: 12px 16px; border: 1px dashed var(--rb-line2); color: var(--rb-mute); margin-bottom: 12px; font-style: italic; }
.scaleimages img { max-width: 100%; height: auto; }
/* BB-коды: цитата как вырезка из чужого письма */
blockquote.mycode_quote { margin: 12px 0 14px; padding: 12px 16px 12px 18px; background: rgba(239, 227, 202, .7); border-left: 2px dotted var(--rb-ink2); color: var(--rb-ink2); font-style: italic; font-size: 15.5px; position: relative; }
blockquote.mycode_quote cite { display: block; font: 400 13.5px/1.2 var(--rb-head); font-style: normal; color: var(--rb-ink); margin-bottom: 5px; letter-spacing: .02em; }
blockquote.mycode_quote cite > span { color: var(--rb-dim); margin-left: 6px; font-size: 12px; }
.codeblock { margin: 12px 0; background: #ead9b6; background-image: var(--rb-fiber); border: 1px solid var(--rb-line2); overflow: hidden; }
.codeblock .title { font: 400 11px/1 var(--rb-head); letter-spacing: .16em; text-transform: uppercase; color: var(--rb-mute); padding: 8px 12px; border-bottom: 1px dashed var(--rb-line2); }
.codeblock code { display: block; padding: 12px; overflow-x: auto; font: 13.5px/1.55 var(--rb-mono); color: var(--rb-ink); }
.mycode_list, ul.mycode_list, ol.mycode_list { padding-left: 1.4em; }
.post_body li { margin: 3px 0; }
.post_body li::marker { color: var(--rb-cover); }
.post_body hr, .mycode_hr { border: 0; height: 12px; margin: 16px 0; background: radial-gradient(circle, var(--rb-gold2) 1.5px, transparent 2px) center / 18px 12px repeat-x; }
.post_body img.mycode_img { padding: 6px; background: #fffdf6; box-shadow: 0 6px 14px -8px rgba(30, 18, 10, .6); transform: rotate(-.6deg); }
.post_body .mycode_s { text-decoration-color: var(--rb-cover); text-decoration-thickness: 1.5px; }
.post_body .mycode_u { text-decoration-color: var(--rb-pen); text-underline-offset: 3px; }
.signature { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--rb-line2); font-size: 14px; color: var(--rb-mute); font-style: italic; }
.video_embed iframe, .post_body iframe { max-width: 100%; }

/* ------------------------------------------------------------------ планшет */
@media (max-width: 1180px) {
	.rb-treebox { grid-template-columns: minmax(0, 1fr) 260px; }
	.rb-story { grid-template-columns: 1fr; }
	.rb-ruler { display: none; }
	.rb-ch { min-height: 0; }
}
@media (max-width: 980px) {
	.rb-treebox { grid-template-columns: 1fr; }
	.rb-treebox__side { display: contents; }
	.rb-treebox__head { order: -1; }
	.rb-tree__panel { order: 2; }
	.rb-cover__frame { grid-template-columns: 1fr; }
	.rb-snaps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rb-deck, .rb-scan { grid-template-columns: 1fr; }
	.rb-fhead { grid-template-columns: 190px minmax(0, 1fr); }
	.rb-fhead__act { grid-column: 1 / -1; }
	.rb-prof__head { grid-template-columns: auto minmax(0, 1fr); }
	.rb-prof__nums { grid-column: 1 / -1; }
	.rb-prof__grid { grid-template-columns: 1fr; }
	.rb-ch__head { grid-template-columns: 1fr; grid-template-areas: "num" "era" "t" "lead"; }
	.rb-ch__era { font-size: 40px; margin-bottom: 4px; }
}

/* ------------------------------------------------------------------ телефон */
@media (max-width: 760px) {
	body { font-size: 16px; }
	.rb-top__in { flex-wrap: wrap; padding: 12px 16px 8px; gap: 10px 12px; }
	.rb-logo__name { font-size: 22px; }
	.rb-logo__sub { font-size: 12px; }
	.rb-logo__mark { width: 42px; height: 42px; }
	.rb-me { margin-left: auto; }
	.rb-me__b span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
	.rb-find { order: 3; flex: 1 1 100%; margin-left: 0; }
	.rb-me__panel { width: min(300px, calc(100vw - 32px)); }
	.rb-tabs { padding: 2px 0 0; }
	.rb-tabs__in { padding: 0 16px; }
	.rb-tab { min-width: 0; padding: 7px 12px 8px; }
	.rb-tab__t { font-size: 15px; }
	.rb-subtabs__in { padding: 10px 16px; gap: 6px 16px; }
	.rb-crumbs-row { padding: 12px 16px 0; }
	.rb-main { padding: 14px 16px 40px; }
	.rb-sheet { padding: 18px 16px; }
	.rb-cover { gap: 18px; margin-bottom: 22px; }
	.rb-cover__velvet { padding: 10px; }
	.rb-cover__frame { padding: 26px 18px 22px 28px; }
	.rb-cover__h { font-size: 40px; }
	.rb-cover__lead { font-size: 15.5px; }
	.rb-btn { padding: 10px 13px; font-size: 14.5px; }
	.rb-treebox { padding: 18px 12px 14px; }
	.rb-node__name { display: none; }
	.rb-node__name--s { display: inline; font-size: 21px; stroke-width: 5px; }
	.rb-ch { padding: 26px 16px 28px; margin-bottom: 22px; }
	.rb-ch__t { font-size: 30px; }
	.rb-snaps, .rb-snaps--2 { grid-template-columns: 1fr; gap: 34px; }
	.rb-snap { justify-items: center; }
	.rb-snap:nth-child(2) .rb-photo { margin-top: 0; }
	.rb-photo { max-width: 280px; }
	.rb-snap__cap { justify-self: stretch; }
	.rb-deck__table { padding: 8px 14px 28px 4px; }
	.rb-deck__stack { height: 270px; }
	.rb-qcard { padding: 16px 16px 14px 18px; }
	.rb-namer__grid { grid-template-columns: 1fr 1fr; }
	.rb-caps--grid { grid-template-columns: 1fr; }
	.rb-cap { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
	.rb-pmark { width: 54px; height: 54px; }
	.rb-fhead { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; }
	.rb-fhead .rb-photo { max-width: 220px; }
	.rb-tlist { padding: 16px 14px 8px; }
	.rb-trow { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
	.rb-trow__n { grid-column: 2; justify-self: start; display: flex; gap: 6px; align-items: baseline; padding: 4px 10px; }
	.rb-trow__n b { font-size: 17px; }
	.rb-trow__h { font-size: 18.5px; }
	.rb-thead { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px; }
	.rb-thead .rb-photo { max-width: 180px; }
	.rb-letter { padding: 22px 16px 14px; }
	.rb-letter:nth-child(even), .rb-letter:nth-child(3n) { transform: none; }
	.rb-letter__flag { left: 16px; right: 16px; font-size: 10.5px; letter-spacing: .08em; padding: 5px 9px; }
	.rb-letter--first { padding-top: 44px; }
	.rb-letter__head { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
	.rb-letter__when { grid-column: 1 / -1; justify-content: flex-start; text-align: left; }
	.rb-letter__addr div { grid-template-columns: 64px minmax(0, 1fr); background-position: 64px 100%; gap: 8px; }
	.rb-stamp .rb-face { width: 46px; height: 54px; font-size: 18px; }
	.rb-stamp--big .rb-face { width: 54px; height: 64px; }
	.rb-letter__body { font-size: 16px; }
	.rb-letter__close b { font-size: 33px; }
	.rb-prof__head { grid-template-columns: 1fr; justify-items: start; padding: 22px 16px; gap: 18px; }
	.rb-face--xl { width: 120px; height: 152px; font-size: 44px; }
	.rb-anketa__dl div { grid-template-columns: 1fr; gap: 2px; }
	.rb-msg { grid-template-columns: 1fr; padding: 24px 16px; gap: 18px; }
	.rb-msg__empty { width: 120px; height: 96px; }
	.rb-foot__in { padding: 28px 16px 34px; }
}
@media (max-width: 400px) {
	.rb-logo__sub { display: none; }
	.rb-cover__h { font-size: 35px; }
	.rb-namer__grid { grid-template-columns: 1fr; }
	.rb-prof__nums li { min-width: 0; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.rb-js .rb-snap { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ ссылки в сообщениях: свой стиль форума («зубчатый обрез фотокарточки»)
   Под словом — тонкая линия с прямоугольными зубцами, как фигурный край старого отпечатка «с зубчиком»
   (SVG data-URI, шаг 6px, высота 4px, repeat-x), без обычного подчёркивания. При наведении зубцы
   краснеют бордо обложки, а под нижней половиной слова проступает сепия, как тон старого снимка. */
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url {
	color: #6e3a24;
	font-weight: 700;
	text-decoration: none;
	padding-bottom: 4px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 3.4H1.5V.8H4.5V3.4H6' fill='none' stroke='%238a6a45' stroke-width='1.1' stroke-opacity='.8'/%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: 6px 4px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: color .2s, background-color .2s;
}
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url:hover {
	color: #5a2326;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4'%3E%3Cpath d='M0 3.4H1.5V.8H4.5V3.4H6' fill='none' stroke='%235a2326' stroke-width='1.3'/%3E%3C/svg%3E"), linear-gradient(transparent 52%, rgba(184, 147, 101, .3) 52%);
	background-repeat: repeat-x, no-repeat;
	background-position: 0 100%, 0 0;
	background-size: 6px 4px, 100% 100%;
}
:is(.post_body, .signature, [class*="-post__body"], [class*="-post__sign"]) a.mycode_url::after { content: none; }