:root{--ink:#141414;--muted:#6b6b6b;--line:#e4e4e4;--soft:#f4f3ef;--bg:#fff}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:20px/1.65 Literata,Georgia,serif}
a{color:inherit}img{display:block;width:100%;height:100%;object-fit:cover}.pic{display:block;overflow:hidden}
.meta,nav,.kicker,cite,.bit{font-family:Inter,system-ui,sans-serif}
header.site{max-width:1280px;margin:0 auto;padding:34px 32px 28px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
/* навигация держит линию с логотипом (самым сильным элементом), девиз — подпись под ним;
   от совпадения середин строчных опущено на 2 px — подобрано редактором на глаз (21.10) */
header.site nav{margin-top:5px}
.logo{font:900 40px/1 Inter,system-ui,sans-serif;letter-spacing:-.045em;text-decoration:none}
.logo .tag{display:block;font:400 15px/1.45 Inter,system-ui,sans-serif;letter-spacing:0;margin-top:10px}
.logo .t1,.logo .t2{display:block;white-space:nowrap}.logo .t1{color:#3a3a3a}.logo .t2{color:var(--muted)}
nav{font-size:15px;display:flex;gap:22px;align-items:baseline}  /* «Люди» на одной линии с текстом переключателя */nav a{text-decoration:none;color:var(--muted)}nav a.on,nav a:hover{color:var(--ink)}
.proto{max-width:1280px;margin:10px auto 0;padding:0 32px;font:13px/1.5 Inter,system-ui,sans-serif;color:#8a5a00}
.kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.meta{font-size:14px;color:var(--muted)}
footer{max-width:1280px;margin:0 auto;padding:24px 32px 44px;border-top:1px solid var(--line);font:13px Inter,system-ui,sans-serif;color:var(--muted)}

/* ===== Лента ===== */
.ribbon{max-width:1100px;margin:0 auto;padding:6px 32px 80px}
.feature{padding-bottom:40px;border-bottom:3px solid var(--ink);margin-bottom:8px}
.feature .pic{aspect-ratio:21/9}
.fbody{display:grid;grid-template-columns:7fr 4fr;gap:44px;margin-top:22px;align-items:start}
.feature h2{font:900 clamp(38px,4.6vw,64px)/1 Inter,system-ui,sans-serif;letter-spacing:-.045em;margin:10px 0 0}
.feature h2 a,.row h3 a{text-decoration:none}.feature h2 a:hover,.row h3 a:hover{text-decoration:underline;text-decoration-thickness:3px}
.feature .sub{font-size:19px;color:#3a3a3a;margin:0 0 14px}
.day{display:grid;grid-template-columns:180px 1fr;gap:32px;border-top:1px solid var(--ink);padding:26px 0 8px}
.day>.date{font:800 22px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.day>.date span{display:block;font-weight:400;font-size:14px;color:var(--muted);letter-spacing:0;margin-top:4px}
.row{display:grid;grid-template-columns:220px 1fr;gap:26px;margin-bottom:34px}
.row .pic{aspect-ratio:4/3;border-radius:2px}
.row h3{font:800 27px/1.12 Inter,system-ui,sans-serif;letter-spacing:-.03em;margin:6px 0 8px}
.row .sub{font-size:17px;color:#444;margin:0 0 8px}
.row.solo{grid-template-columns:1fr}
.dayline{display:flex;align-items:center;gap:14px;margin:34px 0 22px;font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dayline::after{content:"";flex:1;height:1px;background:var(--line)}.row.solo h3{font-size:21px}
.row.solo p{font-size:16px;margin:0 0 .5em;color:#333}
.bits{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px dashed var(--line);font:15px/1.4 Inter,system-ui,sans-serif}
.bits li{margin:0 0 8px;display:flex;gap:10px}.bits li::before{content:"✦";color:var(--c1)}
.bits a{text-decoration:none}.bits a:hover{text-decoration:underline}
.bits .lbl{font:700 11px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}

/* ===== Статья ===== */
.open{position:relative;height:min(74vh,720px);overflow:hidden;background:var(--c1)}
.opening{max-width:1180px;margin:0 auto;padding:44px 32px 8px}
.opening h1{font:900 clamp(40px,6vw,78px)/.98 Inter,system-ui,sans-serif;letter-spacing:-.05em;margin:14px 0 22px;max-width:1080px}
.opening .subtitle{font:400 24px/1.4 Inter,system-ui,sans-serif;color:#3d3d3d;max-width:900px;margin:0 0 26px}
.byline{display:flex;flex-wrap:wrap;gap:8px 26px;font:14px/1.4 Inter,system-ui,sans-serif;color:var(--muted);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:12px 0}
.byline b{color:var(--ink);font-weight:600}
.body{max-width:1180px;margin:0 auto;padding:36px 32px 90px;display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:56px}
.lede{font:400 24px/1.55 Literata,Georgia,serif;color:#262626;margin:0 0 8px}
.lede::before{content:"";display:block;width:64px;height:6px;background:var(--c1);margin-bottom:22px}
.text h2{font:800 30px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.025em;margin:56px 0 14px;scroll-margin-top:24px}
.text h2 .n{display:block;font:700 13px Inter,system-ui,sans-serif;letter-spacing:.14em;color:var(--c1);margin-bottom:8px}
.text p{margin:0 0 1.05em}
.text blockquote{margin:34px 0 34px -48px;padding:0 0 0 44px;border-left:6px solid var(--c1);font:600 29px/1.3 Inter,system-ui,sans-serif;letter-spacing:-.02em}
.text blockquote p{margin:0}.text cite{display:block;font:normal 14px/1.5 Inter,system-ui,sans-serif;color:var(--muted);margin-top:10px;letter-spacing:0}
.tc{font:600 13px Inter,system-ui,sans-serif;background:var(--ink);color:#fff;border:0;border-radius:3px;padding:2px 8px;cursor:pointer;margin-left:8px}
.player{position:relative;aspect-ratio:16/9;margin:36px 0;background:#000}
.poster{position:absolute;inset:0;cursor:pointer;overflow:hidden}.poster img{opacity:.8}
.poster .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 16px Inter,system-ui,sans-serif;color:#fff}
.poster .play b{background:rgba(0,0,0,.65);padding:13px 20px;border-radius:999px}
.player.on .poster{display:none}
#ytwrap{position:absolute;inset:0;display:none}.player.on #ytwrap{display:block}
#ytwrap iframe,#yt{width:100%;height:100%;border:0;display:block}
#ytwrap.docked{position:fixed;inset:auto 22px 22px auto;width:420px;height:auto;aspect-ratio:16/9;z-index:60;box-shadow:0 18px 50px rgba(0,0,0,.35);border-radius:6px;background:#000}
#ytwrap.docked.big{width:min(720px,60vw)}
.dockbar{display:none;position:absolute;top:-36px;right:0;gap:6px}
#ytwrap.docked .dockbar{display:flex}
.dockbar button{font:600 14px Inter,sans-serif;border:0;border-radius:6px;background:var(--ink);color:#fff;width:32px;height:30px;cursor:pointer}
.tc.now{background:var(--c1);color:var(--c2)}
@media(max-width:700px){#ytwrap.docked,#ytwrap.docked.big{width:auto;inset:auto 10px 10px 10px}}
/* «кусочки» на полях — те же фрагменты, что уходят в Telegram */
.text section{position:relative}
.bit{margin:-6px 0 22px;padding:14px 16px;background:var(--soft);border-radius:3px;font-size:14px;line-height:1.45}
.bit .lbl{display:block;font:700 11px Inter,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--c1);margin-bottom:6px}
.bit b{display:block;font-size:16px;line-height:1.3;margin-bottom:6px}
.bit a{color:var(--muted)}
.bit:target{outline:3px solid var(--c1)}
@media(min-width:1180px){.bit{position:absolute;left:calc(100% + 56px);top:60px;width:300px;margin:0}}
.source{font:15px/1.5 Inter,system-ui,sans-serif;color:var(--muted);margin-top:56px;border-top:1px solid var(--line);padding-top:16px}

/* ===== Плитка ===== */
.tiles{max-width:1440px;margin:0 auto;padding:4px 20px 80px;display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:150px;gap:14px;grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;border-radius:4px;text-decoration:none;color:var(--c2);background:var(--c1);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.tile .bg{position:absolute;inset:0}.tile .bg img{transition:transform .8s}.tile:hover .bg img{transform:scale(1.04)}
.tile>*:not(.bg){position:relative;z-index:1}
.tile .t{font:900 34px/.98 Unbounded,Inter,sans-serif;letter-spacing:-.02em;text-transform:uppercase}
.tile .s{font:500 15px/1.35 Inter,sans-serif;margin-top:10px;opacity:.95}
.tile .k{font:700 11px Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;opacity:.8;margin-bottom:10px}
.tile.photo{color:#fff}.tile.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.72))}
.tile.num .big{font:900 clamp(56px,8vw,140px)/.85 Unbounded,sans-serif;letter-spacing:-.05em}
.tile.quote .t{text-transform:none;font:700 26px/1.15 Unbounded,sans-serif;letter-spacing:-.01em}
.tile.blob{background:radial-gradient(circle at 25% 30%,var(--c2) 0,transparent 45%),radial-gradient(circle at 80% 75%,var(--c2) 0,transparent 35%),var(--c1);color:#fff}
.tile.ink{background:var(--ink);color:#fff}.tile.paper{background:var(--soft);color:var(--ink)}
.switch{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.switch a{padding:5px 14px;color:var(--ink)}.switch a.on{background:var(--ink);color:#fff}
/* мягкая подсветка при переходе: маркер по строкам — прорисовывается слева направо и тает */
@property --hl{syntax:"<number>";inherits:true;initial-value:0}
.hl{background-image:linear-gradient(transparent 58%,rgba(255,206,64,calc(var(--hl)*.42)) 58%,rgba(255,206,64,calc(var(--hl)*.42)) 92%,transparent 92%);
 background-repeat:no-repeat;background-size:0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.flash .hl{animation:mark 4.2s ease-out forwards}
@keyframes mark{0%{background-size:0% 100%;--hl:1}22%{background-size:100% 100%;--hl:1}60%{--hl:1}100%{background-size:100% 100%;--hl:0}}
.bit.flash,.row.flash,blockquote.flash{animation:soft 3.6s ease-out}
.keys{margin:0 0 40px;padding:18px 0 4px;border-top:3px solid var(--ink);border-bottom:1px solid var(--line);font-family:Inter,system-ui,sans-serif}
.keys .lbl{display:block;font:800 12px Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c1)}
.keys ul{list-style:none;margin:12px 0 10px;padding:0}
.keys li{position:relative;padding-left:24px;margin:0 0 12px;font:600 18px/1.35 Inter,system-ui,sans-serif}
.keys li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;background:var(--c1)}
.keys a{text-decoration:none;color:var(--ink)}.keys a:hover{text-decoration:underline;text-decoration-color:var(--c1);text-decoration-thickness:2px}
.row.bite{display:block;padding:22px 26px 20px;background:var(--soft);border-left:6px solid var(--c1);text-decoration:none;color:var(--ink)}
.row.bite h3{font-size:24px;margin:8px 0 4px}.row.bite:hover h3,.row.bite:hover .bq{text-decoration:underline;text-decoration-thickness:2px}
.bnum{font:900 72px/.9 Unbounded,Inter,sans-serif;letter-spacing:-.04em;color:var(--c1);margin:12px 0 8px}
.bcap{font:600 19px/1.35 Inter,system-ui,sans-serif;margin:0}
.bq{font:400 23px/1.45 Literata,Georgia,serif;margin:10px 0 4px}
.bit.bnumside .big{font:900 40px/1 Unbounded,Inter,sans-serif;letter-spacing:-.03em;color:var(--c1);margin:4px 0 8px}
@keyframes soft{0%{box-shadow:inset 3px 0 0 var(--c1),0 0 0 6px rgba(255,206,64,.18)}100%{box-shadow:inset 3px 0 0 transparent,0 0 0 6px transparent}}
.tile.list{background:var(--soft);color:var(--ink);justify-content:flex-start}
.tile.list .k{color:var(--c1);opacity:1}
.tile.list ul{list-style:none;margin:6px 0 0;padding:0;font:700 18px/1.22 Inter,sans-serif;letter-spacing:-.01em}
.tile.list li{padding:10px 0;border-top:1px solid #d9d6cc}.tile.list li:first-child{border-top:0;padding-top:4px}
.tile.list a{text-decoration:none}.tile.list a:hover{color:var(--c1)}
.tile.raster{color:var(--ink);background:var(--c2)}
.tile.raster .s{background:var(--c2);display:inline;padding:2px 6px;font:700 18px/1.5 Inter,sans-serif;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tile.raster .k{color:var(--c1);opacity:1}
.tile.num{background:var(--c1);color:var(--c2)}
.w2{grid-column:span 2}.w3{grid-column:span 3}.w4{grid-column:span 4}.w6{grid-column:span 6}
.h1{grid-row:span 1}.h2{grid-row:span 2}.h3{grid-row:span 3}.h4{grid-row:span 4}
.tile.w4 .t,.tile.w6 .t{font-size:clamp(34px,4.4vw,64px)}
@media(max-width:900px){.fbody,.row,.day{grid-template-columns:1fr}.feature h2{font-size:36px}
.body{grid-template-columns:1fr}.text blockquote{margin-left:0;padding-left:18px;font-size:23px}
.logo .t1,.logo .t2{white-space:normal}.tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.w3,.w4,.w6{grid-column:span 2}.tile .t{font-size:24px}}