@font-face {
font-family: 'Forum';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/forum-400-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Forum';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/forum-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/golos-text-400-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/fonts/golos-text-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/golos-text-600-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Golos Text';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/fonts/golos-text-600-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Римские цифры. Идея: римская запись — это сумма групп. Камень, надпись и её разбор.
Forum — капитель римских надписей; Golos Text — спокойный текст и арабские цифры. Патина бронзовых букв — единственный акцент. */
:root{
--stone:#f3f3ef; --slab:#e3e4de; --ink:#1c2023; --muted:#585f63; --line:#cfd1ca;
--patina:#2c6b60; --patina-strong:#1d4f46; --error:#a3341c;
--wrap:1240px; --pad:clamp(16px,4vw,48px);
--roman:"Forum",Georgia,"Times New Roman",serif;
--text:"Golos Text",-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:16px}
body{margin:0;background:var(--stone);color:var(--ink);font:400 17px/1.62 var(--text);font-variant-numeric:lining-nums tabular-nums;font-kerning:normal}
a{color:var(--patina);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--patina-strong);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--patina);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--stone);padding:8px 12px;z-index:9}.skip:focus{left:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Шапка: словесный знак с римским разделителем слов */
.head,.foot,main{width:min(100% - 2 * var(--pad),var(--wrap));margin-left:auto;margin-right:auto}
.head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 32px;padding-top:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mark{font:400 21px/1 var(--roman);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;white-space:nowrap}
.mark:hover{color:var(--ink)}
.mark i{display:inline-block;width:.34em;height:.3em;margin:0 .32em 0 .12em;background:var(--patina);clip-path:polygon(0 0,100% 0,50% 100%);vertical-align:.24em}
.nav{display:flex;gap:4px 22px;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--line);color:var(--ink)}
.nav a[aria-current]{border-color:var(--patina)}
/* Типографика */
main{padding-bottom:24px}
main:focus{outline:0}
.crumbs{font-size:14px;color:var(--muted);padding-top:22px}
.crumbs a{color:var(--muted)}
h1{font:400 clamp(40px,6.2vw,72px)/1.02 var(--roman);letter-spacing:-.005em;margin:.42em 0 .32em;max-width:16em;text-wrap:balance}
h2{font:400 clamp(28px,3.4vw,36px)/1.1 var(--roman);margin:2.1em 0 .45em;text-wrap:balance}
p{margin:0 0 1em;max-width:40em;text-wrap:pretty}
.lead{font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:34em;margin-bottom:1.4em}
/* Плита калькулятора */
.slab{background:var(--slab);margin:0 0 1.6em;padding:clamp(22px,3.4vw,40px) 40px clamp(26px,4vw,48px);--slab-pad:40px}
@media(max-width:900px){.slab{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad);--slab-pad:0px}}
.slab label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
.field{display:flex;gap:8px;max-width:520px}
.field input{flex:1;min-width:0;font:400 38px/1 var(--roman);letter-spacing:.06em;padding:8px 2px 6px;min-height:60px;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0}
.field input:hover{border-bottom-color:var(--patina)}
.field input:focus-visible{outline:0;border-bottom:3px solid var(--patina);box-shadow:0 3px 0 0 rgba(44,107,96,.18)}
.btn{align-self:flex-end;font:600 15px/1 var(--text);padding:0 18px;min-height:48px;border:0;border-radius:0;background:var(--ink);color:var(--stone);cursor:pointer}
.slab-top{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:22px clamp(32px,5vw,72px);align-items:start}
.examples{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding-top:2px}
.examples p{flex-basis:100%;margin:0 0 2px;font-size:14px;color:var(--muted)}
.ex{font:400 21px/1 var(--roman);letter-spacing:.05em;color:var(--ink);background:var(--stone);border:1px solid var(--line);padding:9px 12px 8px;min-height:42px;cursor:pointer}
.ex:hover{border-color:var(--patina);color:var(--patina-strong)}
.ex:active{transform:translateY(1px)}
@media(max-width:900px){.slab-top{grid-template-columns:minmax(0,1fr)}.examples{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 4px;scrollbar-width:none}.examples p{flex:none;align-self:center;margin:0 4px 0 0}.ex{flex:none}}
.btn:hover{background:var(--patina-strong)}
.btn:active{transform:translateY(1px)}
.hint{font-size:14.5px;color:var(--muted);margin:8px 0 0;min-height:1.6em}
.is-error .hint{color:var(--error)}
.is-error .field input{border-color:var(--error)}
/* Надпись и её разбор — фирменная деталь */
.out{display:block;margin-top:clamp(18px,3vw,34px)}
.ins{--inner:calc(min(100vw - 2 * var(--pad),var(--wrap)) - 2 * var(--slab-pad,0px));--big:clamp(40px,calc((var(--inner) - 7.5rem) / var(--u,6)),156px);
display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px .3em;font-size:var(--big)}
.g{display:flex;flex-direction:column;align-items:stretch}
.g b{font:400 1em/1 var(--roman);letter-spacing:.03em;padding:0 .04em}
.g i{position:relative;display:block;margin-top:12px;padding-top:9px;border-top:2px solid var(--patina);font:600 clamp(15px,1.6vw,19px)/1.2 var(--text);font-style:normal;color:var(--patina-strong);text-align:center;transform-origin:left center}
.g i::before,.g i::after{content:"";position:absolute;top:-10px;width:2px;height:10px;background:var(--patina)}
.g i::before{left:0}.g i::after{right:0}
.g small{display:block;font-size:13.5px;line-height:1.3;color:var(--muted);text-align:center;margin-top:3px;white-space:nowrap}
.sum{align-self:flex-start;margin-top:calc(var(--big) + 12px);padding:7px 0 0 .1em;font:600 clamp(22px,2.6vw,32px)/1 var(--text);white-space:nowrap}
.is-empty .ins,.is-error .ins{opacity:.22}
@media(prefers-reduced-motion:no-preference){
.ins.is-new .g i{animation:draw .42s cubic-bezier(.2,.7,.2,1) both}
.ins.is-new .g:nth-child(2) i{animation-delay:.05s}.ins.is-new .g:nth-child(3) i{animation-delay:.1s}.ins.is-new .g:nth-child(4) i{animation-delay:.15s}
.ins.is-new .sum{animation:rise .4s .18s ease-out both}
.ins{transition:opacity .2s}
}
@keyframes draw{from{transform:scaleX(0);color:transparent}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}}
.figure{margin:1.4em 0 1.8em;padding:clamp(18px,3vw,32px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figure .ins{--inner:calc(min(100vw - 2 * var(--pad),var(--wrap)));--big:clamp(40px,calc((var(--inner) - 7.5rem) / var(--u,6) * .7),112px)}
.figure figcaption{font-size:15px;color:var(--muted);margin-top:16px;max-width:40em}
.figure-404 .ins{--big:clamp(64px,14vw,150px)}
/* Таблицы */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em}
table{border-collapse:collapse;font-variant-numeric:tabular-nums}
th{font-weight:600;font-size:13.5px;color:var(--muted);text-align:left}
td,th{padding:7px 14px 7px 0;vertical-align:baseline}
.ro{font:400 21px/1.2 var(--roman);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.ar,.num{white-space:nowrap}
.num{text-align:right}
.pa{font-size:14px;color:var(--muted);white-space:nowrap}
.s{color:var(--patina-strong);font-weight:600}
.signs{width:100%;max-width:820px;table-layout:fixed}
.signs th{width:7.5em;padding-right:22px;white-space:nowrap}
.signs td{text-align:center;padding:4px 0;border-left:1px solid var(--line)}
.signs .ro{font-size:clamp(40px,6vw,64px);line-height:1.15}
.signs tr+tr td{font-size:15px;color:var(--muted);padding-bottom:6px}
.grid30{min-width:480px;width:100%;max-width:820px}
.grid30 td,.grid30 th{border-bottom:1px solid var(--line);padding-top:6px;padding-bottom:6px}
.grid30 td.ar{color:var(--muted);width:7%}
.grid30 td.ro{width:26%}
.decades{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px clamp(24px,3vw,44px);margin:1.6em 0 1.8em}
.decades-2{grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));margin-top:0}
.decades-2 h2{margin-top:1.2em}
.cat{width:100%}
.cat caption{text-align:left;font:400 26px/1.2 var(--roman);padding:14px 0 6px;border-bottom:2px solid var(--ink)}
.cat thead th{padding-top:8px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.cat td{border-bottom:1px solid var(--line)}
.cat td.ar{color:var(--muted);width:3.4em}
.cat tbody tr:hover td{background:var(--slab)}
.cat-wide{width:auto;min-width:min(100%,420px)}
.cat-wide td,.cat-wide th{padding-right:clamp(18px,4vw,48px)}
.cat-wide td:first-child,.cat-wide th:first-child{padding-left:6px}
.cat tr.now td{background:var(--slab);font-weight:600}
.cat tr.now td.ro{font-weight:400}
.decades-2 .cat caption{font:600 13.5px/1.3 var(--text);color:var(--muted);border-bottom-width:1px;padding-top:0}
/* Оглавление таблиц */
.index{list-style:none;margin:0 0 1em;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index{column-gap:clamp(24px,3vw,44px);border-top:0}
.index li{border-top:2px solid var(--ink);border-bottom:0}
.index a{display:flex;flex-direction:column;gap:2px;padding:12px 0 18px;color:var(--ink);text-decoration:none}
.index b{font:400 26px/1.15 var(--roman);letter-spacing:.04em;color:var(--patina);white-space:nowrap}
.index a:hover span{text-decoration:underline;text-underline-offset:3px}
.index a:hover b{color:var(--patina-strong)}
ul:not(.index){padding-left:1.2em;max-width:40em}
li{margin-bottom:.3em}
/* Подвал */
.foot{margin-top:56px;padding-top:26px;padding-bottom:40px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted);display:grid;gap:12px}
.mark-small{font-size:15px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 22px}
.foot nav a{color:var(--muted)}
.foot p{margin:0}
.cookie{position:fixed;left:12px;right:12px;bottom:12px;max-width:560px;display:flex;gap:14px;align-items:center;background:var(--ink);color:var(--stone);padding:12px 14px 12px 18px;font-size:14px;z-index:5}
.cookie[hidden]{display:none}
.cookie p{margin:0}.cookie a{color:inherit}
.cookie button{flex:none;font:600 14px/1 var(--text);min-height:40px;padding:0 14px;border:0;background:var(--stone);color:var(--ink);cursor:pointer}
/* Мобильная версия: навигация лентой, плита во всю ширину */
@media(max-width:640px){
body{font-size:16.5px}
.head{padding-top:16px;padding-bottom:0;border-bottom:0;display:block}
.nav{flex-wrap:nowrap;overflow-x:auto;margin:12px calc(var(--pad) * -1) 0;padding:0 var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:20px;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:11px 0;white-space:nowrap}
.field input{font-size:32px}
.btn{padding:0 14px}
.g i{margin-top:9px}
.g small{font-size:12px}
.pa{font-size:13px}
.ro{font-size:19px}
td,th{padding-right:8px}
.signs th{width:0;padding:0;font-size:0}
.signs .ro{font-size:34px}
.signs tr+tr td{font-size:13px}
.grid30{min-width:0}.grid30 th{font-size:12px}
.grid30 .ro{font-size:18px}
.nav{gap:16px}.nav a{font-size:14.5px}
.index a{padding:10px 0 14px}
}