:root{
  --bg:#f3f5f9;--surface:#ffffff;--surface2:#eef1f6;--ink:#0f1620;--dim:#5a6575;
  --line:#e2e7ef;--accent:#4f46e5;--accent-soft:#eef0fe;--hot:#e0245e;
  --code:#f4f6fa;--shadow:0 1px 2px rgba(16,24,40,.05),0 8px 24px -12px rgba(16,24,40,.14);
  --r:14px}
@media(prefers-color-scheme:dark){:root{
  --bg:#0c1017;--surface:#131923;--surface2:#1a2130;--ink:#e7edf5;--dim:#94a1b4;
  --line:#222b3a;--accent:#8b8cf9;--accent-soft:#1e2140;--hot:#ff5d8f;
  --code:#161d29;--shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -14px rgba(0,0,0,.7)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.6 Inter,"Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"Segoe UI",
    Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1220px;margin:0 auto;padding:0 20px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:18px;height:62px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;
  letter-spacing:-.02em;white-space:nowrap}
.brand svg{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:block}

nav.desks{display:flex;gap:2px;margin-left:34px;margin-right:auto;
  overflow-x:auto;scrollbar-width:none}
nav.desks::-webkit-scrollbar{display:none}
nav.desks a{color:var(--dim);font-size:13.5px;font-weight:600;padding:7px 10px;
  border-radius:9px;white-space:nowrap}
nav.desks a:hover{background:var(--surface2);color:var(--ink)}
nav.desks a.on{background:var(--accent-soft);color:var(--accent)}
.langs{display:flex;gap:4px;margin-left:14px;flex:0 0 auto}
.langs a{font-size:12px;font-weight:700;color:var(--dim);padding:6px 9px;border-radius:8px;
  border:1px solid var(--line)}
.langs a.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}

/* ---------- layout ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:28px;margin:26px 0 10px}
@media(max-width:980px){.cols{grid-template-columns:1fr}
  /* Below this width the rail stops being a rail: it unstacks under the feed
     and repeats, as one long list, the same stories the cards above already
     show. His instruction on 2026-09-20 - "remove Latest across all desks from
     the mobile versions". Desktop keeps it; it is only hidden where the two
     columns have already collapsed into one. */
  .rail{display:none}}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:700px){.grid{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px 16px;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.card h3{margin:8px 0 6px;font-size:19px;line-height:1.3;letter-spacing:-.015em;font-weight:700}
.card p.dek{margin:0;color:var(--dim);font-size:14.5px;line-height:1.5}
.card .foot{margin-top:12px;display:flex;align-items:center;gap:10px;
  color:var(--dim);font-size:12.5px}
.lead{padding:0;overflow:hidden}
.lead>img{width:100%;height:auto;display:block;border-bottom:1px solid var(--line)}
.lead .in{padding:20px 22px 18px}
.lead h2{margin:8px 0 8px;font-size:29px;line-height:1.18;letter-spacing:-.025em;font-weight:800}
@media(max-width:700px){.lead h2{font-size:23px}}
.lead p.dek{color:var(--dim);font-size:16px;margin:0}

/* ---------- phone only: nothing below changes the desktop layout ---------- */
@media(max-width:700px){
  /* The top bar becomes two rows: brand and language switch, then the desk
     strip across the full width. Before this the strip had about 20px between
     the brand and the switch and showed one clipped letter. */
  .topbar .wrap{height:auto;flex-wrap:wrap;gap:10px;padding-top:11px}
  .brand{font-size:17px}
  .brand svg{width:24px;height:24px;flex:0 0 24px}
  .langs{margin-left:auto}
  nav.desks{order:3;flex:0 0 100%;margin:0 -20px;padding:0 20px 10px;gap:3px}
  nav.desks a{font-size:13px;padding:6px 9px}

  /* Metadata never breaks inside an item: the row wraps between them instead.
     The separator dots are dropped here, because a wrapped row leaves them
     stranded at the end of a line. */
  .byline,.card .foot{white-space:nowrap;flex-wrap:wrap;gap:5px 10px}
  .byline .dotsep,.card .foot .dotsep{display:none}
  .byline{font-size:13px}
}

/* ---------- chips, bylines, avatars ---------- */
.chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-soft);
  padding:4px 9px;border-radius:999px}
.who{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px}
.av{width:26px;height:26px;border-radius:50%;display:block;flex:0 0 26px}
.who .nm{font-weight:650;color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.dotsep::before{content:"·";margin:0 7px;color:var(--line)}

/* ---------- wire rail ---------- */
.rail{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 18px 12px;position:sticky;top:78px}
.rail h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  margin:16px 0 4px}
.wire{list-style:none;padding:0;margin:0}
.wire li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.38}
.wire li:last-child{border-bottom:0}
.wire a{font-weight:600}
.wire a:hover{color:var(--accent)}
.wire .ts{display:block;color:var(--dim);font-size:11.5px;margin-bottom:3px;
  font-variant-numeric:tabular-nums}

/* ---------- infinite scroll ----------
   The button is not decoration: with JavaScript off it is how the rest of the
   archive is reached, and it is what a crawler follows. The script hides
   nothing and removes nothing. */
.morewrap{display:flex;justify-content:center;margin:28px 0 6px}
.more{display:inline-block;font-size:14px;font-weight:650;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:10px 22px;
  background:var(--surface)}
.more:hover{color:var(--ink);border-color:var(--dim)}
.endnote{text-align:center;color:var(--dim);font-size:13px;margin:28px 0 6px}

/* ---------- article ---------- */
/* The sheet is exactly as wide as the news feed below the same breadcrumb:
   full container, no max-width, no auto margins, nothing beside it. */
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 20px 26px;margin:0}
@media(max-width:700px){.sheet{padding:22px 20px}}
/* No narrowing inside either: the text runs the width of the sheet, the same
   width the list rows run. */
.sheet article{max-width:none;margin:0}
.sheet article h1{font-size:37px;line-height:1.13;margin:12px 0 14px;letter-spacing:-.03em;
  font-weight:800}
@media(max-width:700px){.sheet article h1{font-size:27px}}
.sheet article h2{font-size:22px;margin:34px 0 10px;letter-spacing:-.015em;font-weight:750}
.sheet article h3{font-size:18px;margin:26px 0 8px;font-weight:700}
.sheet article p{margin:0 0 18px;font-size:17.5px;line-height:1.72}
.sheet article ul,.sheet article ol{font-size:17.5px;line-height:1.7;padding-left:22px}
.sheet article li{margin-bottom:9px}
.byline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--dim);
  font-size:13.5px;margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.byline .nm{color:var(--ink);font-weight:650}
.byline a.nm:hover{color:var(--accent)}
figure.mid{margin:32px 0;padding:0}
figure.mid img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--line)}
figure.mid figcaption{color:var(--dim);font-size:12.5px;margin-top:9px;text-align:center}
.intopic{margin:26px 0 0;color:var(--dim);font-size:14px}
.intopic a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.signature{margin:28px 0 2px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--dim);font-size:14px}
.signature a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.signature a:hover{color:var(--accent)}
.source{background:var(--surface2);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:30px 0 4px}
.source b{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--dim);margin-bottom:6px}
.source .sname{font-weight:650;margin-bottom:3px}
.source a{color:var(--accent);word-break:break-all;font-size:13.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.source a:hover{text-decoration:underline}
pre{background:var(--code);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  overflow-x:auto;font-size:13.5px;line-height:1.55;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{background:var(--code);padding:2px 6px;border-radius:6px;font-size:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre code{background:none;padding:0}
blockquote{border-left:3px solid var(--accent);margin:22px 0;padding:2px 0 2px 18px;
  color:var(--dim)}

/* ---------- section / author pages ---------- */
/* The last crumb carries the full headline because that is what the
   BreadcrumbList must name - so it is clipped in CSS, not shortened in the
   markup. Truncating the text itself would make the visible trail and the
   structured data describe two different things. */
.crumbs{font-size:12.5px;color:var(--dim);margin:0 0 14px;display:flex;
  align-items:center;gap:7px;letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;flex-wrap:nowrap}
.crumbs a{flex:none}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5;flex:none}
.crumbs span:last-child{color:var(--ink);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.pagehead{margin:28px 0 18px}
.pagehead h1{font-size:31px;letter-spacing:-.025em;margin:0 0 6px;font-weight:800}
.lede{color:var(--dim);font-size:16px;max-width:640px;margin:0}
.stack{display:grid;gap:14px;margin-bottom:30px}
.profile{display:flex;align-items:center;gap:16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:26px 0 20px}
.profile img{width:64px;height:64px;border-radius:50%;flex:0 0 64px}
.profile h1{font-size:25px;margin:0 0 4px;letter-spacing:-.02em}
footer{border-top:1px solid var(--line);margin-top:46px;padding-block:24px;
  color:var(--dim);font-size:13px;background:var(--surface)}
footer a:hover{color:var(--accent)}

/* ================================================================
   COIN BRIEF LAYOUT - the LinkedIn shape
   ----------------------------------------------------------------
   His instruction 2026-09-21, after the first attempt: "цвета говно
   для коинбрифа - не делай белое на черном. возьми дизайн как у
   линкедина." So: warm grey ground, white cards with a hairline and a
   soft shadow, LinkedIn blue, ordinary system sans, nothing uppercase
   and nothing monospaced.

   LIGHT IN BOTH COLOUR SCHEMES, on purpose. A reader whose system is
   set to dark would otherwise get back exactly the dark page he just
   rejected, so the dark block below repeats the light values.

   Markup, the card component, the OG cards and every guard are
   untouched - this is paint only.
   ================================================================ */
:root{
  --bg:#f4f2ee;--surface:#ffffff;--surface2:#f3f2ef;--ink:#1c1c1c;--dim:#5f6163;
  --line:#e3e2df;--accent:#0a66c2;--accent-soft:#e7f0fa;--hot:#b24020;
  --code:#f3f2ef;
  --shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.05);
  --r:8px}
@media(prefers-color-scheme:dark){:root{
  --bg:#f4f2ee;--surface:#ffffff;--surface2:#f3f2ef;--ink:#1c1c1c;--dim:#5f6163;
  --line:#e3e2df;--accent:#0a66c2;--accent-soft:#e7f0fa;--hot:#b24020;
  --code:#f3f2ef;
  --shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.05);
  --r:8px}}

body{background:var(--bg);color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;font-feature-settings:normal}

/* top bar: white, hairline under it, the active desk marked by a bar */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);box-shadow:none}
.brand{font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand svg{border-radius:4px}
nav.desks a{font-family:inherit;font-size:14px;font-weight:400;text-transform:none;
  letter-spacing:normal;color:var(--dim);border-radius:0;border-left:0;
  padding:18px 14px 16px;box-shadow:none}
nav.desks a:hover{background:transparent;color:var(--ink)}
nav.desks a.on{background:transparent;color:var(--ink);font-weight:600;
  box-shadow:inset 0 -2px 0 var(--ink)}
.langs a{font-family:inherit;border-radius:999px;letter-spacing:normal;
  font-weight:600;color:var(--dim);border:1px solid var(--line)}
.langs a.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* cards: white panels, soft corner, hairline + a low shadow */
.card,.lead,.rail,.profile,.sheet{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow)}
.card{border-left:1px solid var(--line);transition:box-shadow .12s ease}
.card:hover{box-shadow:0 0 0 1px rgba(0,0,0,.09),0 4px 14px rgba(0,0,0,.09)}
.card p.dek,.lead p.dek,.lede{color:var(--dim)}

/* metadata back to plain sans */
.chip{font-family:inherit;border-radius:999px;letter-spacing:.02em;text-transform:none;
  font-size:12px;font-weight:600;padding:4px 11px;border:0;
  background:var(--accent-soft);color:var(--accent)}
.byline,.who,.source,.crumbs,.wire .ts,.signature,.endnote{font-family:inherit}
.who,.byline{font-size:13px;color:var(--dim)}
.who .nm{font-weight:600;color:var(--ink)}
.wire .ts{letter-spacing:normal;text-transform:none;color:var(--dim);font-size:12px}
.dotsep::before{content:"·";color:var(--dim)}

/* the rail reads as a LinkedIn side module */
.rail h2{font-family:inherit;color:var(--ink);font-weight:600;letter-spacing:normal;
  text-transform:none;font-size:16px}
.wire li{border-bottom:1px solid var(--line)}
.wire a:hover{color:var(--accent);text-decoration:underline}

/* headlines: ordinary tracking, ordinary weights */
.lead h2,.card h3,.pagehead h1,.sheet article h1{letter-spacing:-.01em}
.pagehead h1::before{content:none}

/* the pill button LinkedIn uses everywhere */
.more{border-radius:999px;font-family:inherit;text-transform:none;letter-spacing:normal;
  font-size:15px;font-weight:600;color:var(--accent);border:1px solid var(--accent);
  background:transparent;padding:10px 24px}
.more:hover{background:var(--accent-soft);color:var(--accent)}

footer{background:var(--surface);border-top:1px solid var(--line);font-family:inherit;
  font-size:13px;letter-spacing:normal;color:var(--dim)}
a{color:inherit}
.sheet article a{color:var(--accent)}
.sheet article a:hover{text-decoration:underline}
figure.mid img{border-radius:var(--r)}