/* Layout: деловое издание - узкая колонка чтения, слева рубрики-«румбы», латунь как единственный акцент на холодной бумаге */
:root{
  --paper:#f3f5f4; --surface:#ffffff; --ink:#15202b; --muted:#5a6672; --rule:#d5dbdf;
  --brass:#9a7428; --brass-soft:#f1e8d6; --sea:#1f3a52;
  --f-display:"Literata", Georgia, "Times New Roman", serif;
  --f-body:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --wrap:1080px; --read:680px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0f151b; --surface:#151d25; --ink:#e7ecef; --muted:#9aa6b1; --rule:#26323d;
  --brass:#d1a956; --brass-soft:#2a2418; --sea:#9cc3e0; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0f151b; --surface:#151d25; --ink:#e7ecef; --muted:#9aa6b1; --rule:#26323d;
  --brass:#d1a956; --brass-soft:#2a2418; --sea:#9cc3e0; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font:17px/1.65 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:600;text-wrap:balance;letter-spacing:-.01em;margin:0}
p{margin:0}

/* header */
.top{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.logo svg{flex:none;color:var(--brass)}
.logo b{font:700 22px/1 var(--f-display);letter-spacing:.01em}
.logo span{font-size:12.5px;color:var(--muted);line-height:1.3;max-width:26ch;display:none;padding-left:12px;border-left:1px solid var(--rule)}
@media(min-width:900px){.logo span{display:block}}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);padding:8px 12px;border-radius:999px}
nav.main a:hover{color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--brass-soft)}
@media(max-width:620px){.bar{padding-block:10px;gap:8px}nav.main{width:100%;overflow-x:auto;flex-wrap:nowrap;margin-inline:-8px}nav.main a{flex:none}}

main{padding-block:44px 72px}


/* home */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:end;padding-bottom:44px;border-bottom:1px solid var(--rule)}
@media(max-width:860px){.hero{grid-template-columns:1fr;gap:28px}}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.08}
.hero p.lead{font-size:19px;color:var(--muted);margin-top:20px;max-width:46ch}
.word{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:22px 24px}
.word small{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:10px}
.word h3{font-size:26px}
.word p{margin-top:8px;color:var(--muted);font-size:15.5px}
.word .heard{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink)}
.word .heard i{font-style:normal;color:var(--muted)}
.word a.more{display:inline-block;margin-top:14px;font-weight:600;font-size:15px;color:var(--sea);text-decoration:none}

.sec{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding-block:40px;border-bottom:1px solid var(--rule)}
@media(max-width:760px){.sec{grid-template-columns:1fr;gap:14px}}
.sec > h2{font-size:15px;font-family:var(--f-body);font-weight:600;color:var(--muted);letter-spacing:.02em}
.list{display:grid;gap:0}
.item{display:grid;gap:6px;padding-block:18px;border-top:1px solid var(--rule);text-decoration:none}
.item:first-child{border-top:0;padding-top:0}
.item .rub{font-size:13px;color:var(--brass);font-weight:600}
.item h3{font-size:24px;line-height:1.25}
.item:hover h3{color:var(--sea)}
.item p{color:var(--muted);font-size:16px;max-width:62ch}
.item .meta{font-size:13.5px;color:var(--muted)}

/* article */
.art{max-width:var(--read);margin:0 auto}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.art .rub{font-size:14px;color:var(--brass);font-weight:600}
.art h1{font-size:clamp(30px,4.4vw,44px);line-height:1.15;margin-top:10px}
.art .meta{font-size:14px;color:var(--muted);margin-top:14px}
.art .lead{font:500 21px/1.55 var(--f-display);margin-top:26px}
.art .body{display:grid;gap:18px;margin-top:26px}
.art .body h2{font-size:25px;margin-top:14px}
.art .body ul{margin:0;padding-left:1.2em;display:grid;gap:10px}
.art .body li::marker{color:var(--brass)}
.cta{margin-top:40px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:24px}
.cta p{font-weight:600;font-size:18px}
.cta .btn{margin-top:16px}
.btn{display:inline-block;background:var(--sea);color:var(--paper);text-decoration:none;font-weight:600;font-size:15.5px;padding:12px 20px;border-radius:8px}
.btn:hover{filter:brightness(1.12)}
.related{margin-top:36px;font-size:15.5px}
.related a{color:var(--sea);font-weight:500}

/* glossary */
.page-h{max-width:var(--read)}
.page-h h1{font-size:clamp(30px,4.4vw,46px);line-height:1.12}
.page-h p{color:var(--muted);font-size:18px;margin-top:14px}
.abc{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 8px}
.abc a{text-decoration:none;font-size:14.5px;padding:6px 12px;border:1px solid var(--rule);border-radius:999px;background:var(--surface)}
.abc a:hover{border-color:var(--brass)}
.terms{display:grid;gap:0;margin-top:24px}
.term{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;padding-block:28px;border-top:1px solid var(--rule)}
@media(max-width:760px){.term{grid-template-columns:1fr;gap:10px}}
.term h2{font-size:26px;line-height:1.2}
.term .en{display:block;font:400 14px/1.4 var(--f-body);color:var(--muted);margin-top:6px}
.term .def{font-size:17.5px}
.term .def b{font-weight:600}
.term .ex{margin-top:14px;display:grid;gap:8px;font-size:15.5px}
.term .ex div{padding-left:14px;border-left:2px solid var(--brass-soft)}
.term .ex span{color:var(--muted)}
.term .go{margin-top:14px;font-size:15px}
.term .go a{color:var(--sea);font-weight:600}
.term{scroll-margin-top:130px}
.term:target{background:linear-gradient(var(--brass-soft),var(--brass-soft)) no-repeat 0 0/4px 100%}

/* podborka */
.progs{display:grid;gap:18px;margin-top:32px;max-width:860px}
.prog{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:24px;display:grid;gap:12px}
.prog .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.prog h3{font-size:23px}
.prog .who{font-size:14px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 20px;margin:4px 0}
.facts div{font-size:14.5px}
.facts span{display:block;font-size:12.5px;color:var(--muted)}
.prog .pm{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px;font-size:15.5px}
.prog .pm b{display:block;font-size:13px;color:var(--muted);font-weight:600;margin-bottom:2px}
.prog .foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:12px;border-top:1px solid var(--rule)}
.prog .foot a.link{color:var(--sea);font-weight:600;text-decoration:none}
.ad{font-size:12.5px;color:var(--muted)}
.tag{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--brass-soft);color:var(--brass)}
.note{max-width:var(--read);margin-top:28px;font-size:15px;color:var(--muted)}

/* about */
.about{max-width:var(--read);display:grid;gap:18px;font-size:17.5px}
.about h2{font-size:24px;margin-top:12px}

footer{border-top:1px solid var(--rule);padding-block:28px 40px;font-size:14px;color:var(--muted)}
footer .wrap{display:grid;gap:8px}
footer a{color:var(--muted)}

/* ===== Варианты оформления (скины) ===== */
:root{--band:#12263a;--band-2:#1a3550;--band-ink:#eef3f7;--band-mute:#a9bccc;--accent:#b8892f;--band-accent:#e0b866;--r1:#2f7f8f;--r2:#b5573f;--r3:#b8892f}
:root[data-skin="emerald"]{--band:#103a30;--band-2:#174a3e;--band-ink:#eef5f1;--band-mute:#a7c4b8;--accent:#b5652e;--band-accent:#e9a46b;--r1:#2e7a5d;--r2:#b5652e;--r3:#7a6a2e}
:root[data-skin="bordo"]{--band:#46172a;--band-2:#5a2036;--band-ink:#f7eef1;--band-mute:#d2b1bd;--accent:#b0842f;--band-accent:#e2bd6b;--r1:#8a2c48;--r2:#2f6f86;--r3:#b0842f}
:root[data-skin]{--brass:var(--accent);--brass-soft:color-mix(in srgb,var(--accent) 16%,var(--surface));--sea:var(--ink)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"])[data-skin]{--brass:var(--band-accent);--r1:color-mix(in srgb,var(--r1) 55%,#fff);--r2:color-mix(in srgb,var(--r2) 55%,#fff);--r3:color-mix(in srgb,var(--r3) 55%,#fff)}}
:root[data-theme="dark"][data-skin]{--brass:var(--band-accent);--r1:color-mix(in srgb,var(--r1) 55%,#fff);--r2:color-mix(in srgb,var(--r2) 55%,#fff);--r3:color-mix(in srgb,var(--r3) 55%,#fff)}

/* шапка: тонкая цветная линия */
.top{border-bottom:3px solid var(--band)}
.logo svg{color:var(--brass)}
nav.main a[aria-current="page"]{background:var(--band);color:var(--band-ink)}

/* первый экран - цветная полоса во всю ширину */
.band{background:var(--band);color:var(--band-ink);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax);margin-top:-44px;padding-block:56px 60px;margin-bottom:8px;position:relative}

.band .hero{border-bottom:0;padding-bottom:0;position:relative;z-index:1}
.band .hero h1{color:#ffffff}
.band .hero h1 em{font-style:normal;color:inherit}
.band .hero p.lead{color:var(--band-mute)}
.band .kick{display:inline-flex;gap:10px;align-items:center;font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--band-accent);margin-bottom:18px}
.band .kick::before{content:"";width:28px;height:2px;background:currentColor}

.band 

/* рамка с уголками, как на морской карте */
.framed{--c:var(--brass);--l:22px;--w:2px;background:
 linear-gradient(var(--c),var(--c)) left top/var(--l) var(--w),linear-gradient(var(--c),var(--c)) left top/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) right top/var(--l) var(--w),linear-gradient(var(--c),var(--c)) right top/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) left bottom/var(--l) var(--w),linear-gradient(var(--c),var(--c)) left bottom/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) right bottom/var(--l) var(--w),linear-gradient(var(--c),var(--c)) right bottom/var(--w) var(--l),
 var(--surface);background-repeat:no-repeat;border:1px solid var(--rule);border-radius:2px}
.band .word{color:var(--ink)}
.word.framed{--c:var(--band-accent);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.word small{color:var(--brass)}
.cta.framed{padding:28px}
.cta .btn,.btn{background:var(--band);color:var(--band-ink)}

/* рубрики в своих цветах */
.rub{display:inline-flex;align-items:center;gap:7px}
.rub::before{content:"";width:8px;height:8px;transform:rotate(45deg);background:currentColor;flex:none}
.rub[data-r="1"]{color:var(--r1)!important}.rub[data-r="2"]{color:var(--r2)!important}.rub[data-r="3"]{color:var(--r3)!important}.rub[data-r="4"]{color:var(--r4)!important}
:root{--r4:#3f6a8c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--r4:#8fb6d6}}
:root[data-theme="dark"]{--r4:#8fb6d6}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.filters button{all:unset;cursor:pointer;font-size:14.5px;padding:7px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--brass) 35%,var(--rule));background:var(--surface);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--band);color:var(--band-ink);border-color:var(--band)}
.filters button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.all-link{display:inline-block;margin-top:18px;font-weight:600;color:var(--ink)}

/* заголовки разделов главной: ромб-румб */
.sec > h2{display:flex;align-items:center;gap:10px;color:var(--ink)}
.sec > h2::before{content:"";width:10px;height:10px;border:2px solid var(--brass);transform:rotate(45deg);flex:none}
.item h3{transition:color .15s}
.item:hover h3{color:var(--brass)}

/* словарь */
.abc a{border-color:color-mix(in srgb,var(--brass) 35%,var(--rule))}
.abc a:hover{background:var(--band);color:var(--band-ink);border-color:var(--band)}
.term h2{color:var(--ink)}
.term .ex div{border-left-color:var(--brass)}

/* подборка */
.prog{border-top:0;position:relative;overflow:hidden}
.prog .head h3{color:var(--ink)}
.prog .tag{background:var(--brass-soft);color:var(--brass)}
.prog .facts div{padding:8px 10px;background:color-mix(in srgb,var(--band) 6%,var(--surface));border-radius:6px}

/* подвал - цветной */
footer{background:var(--band);color:var(--band-mute);border-top:0;box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
footer a{color:var(--band-ink)}


/* переключатель вариантов */






@media(max-width:520px){}
@media(prefers-reduced-motion:reduce){.item h3{transition:none}}

/* штурвал */
html,body{overflow-x:clip}
:root{--wood:#8a5a2c;--wood-d:#5e3b1a;--hub:#c99a3e;--hub-d:#7a5a1c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--wood:#b07a45;--wood-d:#7d5228;--hub:#dcb15a;--hub-d:#8c6a26}}
:root[data-theme="dark"]{--wood:#b07a45;--wood-d:#7d5228;--hub:#dcb15a;--hub-d:#8c6a26}
.logo .wheel-logo{flex:none;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.logo:hover .wheel-logo{transform:rotate(45deg)}
.band-wheel{position:absolute;right:-90px;top:50%;width:min(560px,78vw);height:auto;aspect-ratio:1;translate:0 -50%;pointer-events:none;opacity:.14;
 --wood:var(--band-accent);--wood-d:var(--band-accent);--hub:var(--band-accent);--hub-d:var(--band);animation:helm 240s linear infinite}
@keyframes helm{to{rotate:360deg}}
@media(max-width:860px){.band-wheel{right:-160px;top:22%;opacity:.1}}

/* сменяющийся термин */
.word{position:relative;overflow:hidden}
.word .w-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.word .w-top small{margin:0}
.word .w-nav{display:flex;gap:4px}
.word .w-nav button{all:unset;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--muted);border:1px solid var(--rule);font-size:15px;line-height:1}
.word .w-nav button:hover{color:var(--ink);border-color:var(--brass)}
.word .w-nav button:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.w-body{transition:opacity .45s ease,transform .45s ease;min-height:228px}
.w-body.out{opacity:0;transform:translateX(-18px)}
.w-body.pre{opacity:0;transform:translateX(18px);transition:none}
.w-count{white-space:nowrap;margin-right:4px;align-self:center;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.w-progress{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--brass);transform-origin:left;transform:scaleX(0)}
.w-progress.run{transition:transform var(--dur,7s) linear;transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.band-wheel{animation:none}.w-body{transition:none}.w-progress{display:none}.logo .wheel-logo{transition:none}}

/* фирменный стиль: маленькие штурвалы */
.logo b{font-size:24px}
.bar{min-height:72px}
.art .body ul{list-style:none;padding-left:0}
.art .body li{position:relative;padding-left:32px}
.li-wheel{position:absolute;left:0;top:.18em;width:21px;height:21px;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.art .body li:hover .li-wheel{transform:rotate(180deg)}
.sec > h2::before{display:none}
.sec > h2{align-self:start;align-items:center}
.h-wheel{width:22px;height:22px;flex:none;transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.sec:hover .h-wheel{transform:rotate(90deg)}

/* фирменный блок-призыв на фоне штурвала */
.cta-band{--c:var(--band-accent);--l:22px;--w:2px;position:relative;overflow:hidden;margin-top:44px;color:var(--band-ink);border-radius:3px;padding:34px 30px;
 background:
 linear-gradient(var(--c),var(--c)) left 10px top 10px/var(--l) var(--w),linear-gradient(var(--c),var(--c)) left 10px top 10px/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) right 10px top 10px/var(--l) var(--w),linear-gradient(var(--c),var(--c)) right 10px top 10px/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) left 10px bottom 10px/var(--l) var(--w),linear-gradient(var(--c),var(--c)) left 10px bottom 10px/var(--w) var(--l),
 linear-gradient(var(--c),var(--c)) right 10px bottom 10px/var(--l) var(--w),linear-gradient(var(--c),var(--c)) right 10px bottom 10px/var(--w) var(--l),
 var(--band);background-repeat:no-repeat;box-shadow:0 22px 44px -28px rgba(0,0,0,.55)}
.cb-wheel{position:absolute;right:-70px;top:50%;width:300px;height:300px;translate:0 -50%;opacity:.13;pointer-events:none;
 --wood:var(--band-accent);--wood-d:var(--band-accent);--hub:var(--band-accent);--hub-d:var(--band);animation:helm 200s linear infinite}
.cb-in{position:relative;z-index:1;max-width:520px;display:grid;gap:14px;justify-items:start}
.cb-kick{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--band-accent)}
.cta-band p{font:600 21px/1.4 var(--f-display);color:var(--band-ink);margin:0}
.btn.btn-acc{background:var(--band-accent);color:var(--band);margin-top:4px}
.btn.btn-acc:hover{filter:brightness(1.08)}
.page-cta{max-width:var(--read)}
@media(max-width:560px){.cta-band{padding:30px 22px}.cb-wheel{width:220px;height:220px;right:-80px;top:30%}}
@media(prefers-reduced-motion:reduce){.li-wheel,.h-wheel{transition:none}.cb-wheel{animation:none}}

/* фото на заднем плане: серые тона, еле заметно */
:root{--photo-op:.07}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--photo-op:.06}}
:root[data-theme="dark"]{--photo-op:.06}
.photo-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:center/cover no-repeat;filter:grayscale(1) blur(1.5px);opacity:var(--photo-op);transition:opacity .6s ease;transform:scale(1.02)}
.photo-bg.fade{opacity:0}
.haze{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--paper) 0%,transparent 25%,transparent 72%,var(--paper) 100%)}
@media(prefers-reduced-motion:reduce){.photo-bg{transition:none}}

/* ===== общие для многостраничной версии ===== */
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
footer{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}
.t-link{color:inherit;text-decoration:none}
.t-link:hover{color:var(--brass)}
.term-page .lead b{font-weight:700}
.term-page .meta{margin-top:8px}
.term-page .quote{margin:0;font:500 20px/1.5 var(--f-display);padding:4px 0 4px 18px;border-left:3px solid var(--brass)}
.term-page .ask{font-size:18px}
.t-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid var(--rule)}
.t-nav a{color:var(--ink);font-weight:600;text-decoration:none}
.t-nav a:hover{color:var(--brass)}
.link.muted{color:var(--muted);font-weight:500}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}