:root{
  --bg:#f5f6f4;--surface:#ffffff;--surface2:#eff0ec;--ink:#151c24;--dim:#5d6670;
  --line:#e0e2dd;--accent:#b45309;--accent-soft:#fdf2e2;--hot:#0f766e;
  --code:#f3f4f1;--shadow:0 1px 1px rgba(21,28,36,.04),0 10px 26px -18px rgba(21,28,36,.30);
  --r:10px}
@media(prefers-color-scheme:dark){:root{
  --bg:#10151b;--surface:#171e26;--surface2:#1e262f;--ink:#e8ecef;--dim:#98a2ad;
  --line:#28313b;--accent:#f0a742;--accent-soft:#2a2115;--hot:#5eead4;
  --code:#141a20;--shadow:0 1px 1px rgba(0,0,0,.4),0 12px 30px -18px rgba(0,0,0,.8)}}

/* Grid Brief wears a serif headline and tabular figures: the subject is
   numbers, and a reader should be able to compare two of them by eye. */
h1,h2,h3,.card h3,.lead h2{font-family:"Iowan Old Style","Palatino Linotype",
  Palatino,Georgia,"Times New Roman",serif;letter-spacing:-.01em}
time,.byline,.card .foot,.wire .ts{font-variant-numeric:tabular-nums}
*{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{border-radius:4px;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)}
.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)}

/* ================================================================
   GRID BRIEF LAYOUT - deliberately not the portal's silhouette
   ================================================================ */
body{background:var(--surface)}
/* Container, text measure and dek all match Dev News Daily exactly. His
   instruction, 2026-09-20, with two screenshots: "сравни с девньюз и сделай
   как там". Before this the page was 1080 wide with the body text capped at
   68ch and the dek at 62ch, both left-aligned inside it - so on a 2560 screen
   the story ran 587px and left 1213px of empty page beside it. A narrow
   measure is good typography and it was still wrong here, because the rules,
   headlines and breadcrumbs went on spanning the full width and the text did
   not line up with any of them. Same numbers as the portal, no exceptions. */

/* masthead: a band, not a sticky toolbar */
.topbar{position:static;background:var(--ink);border-bottom:3px solid var(--accent)}
.topbar .wrap{display:block;height:auto;padding-top:18px;padding-bottom:0}
.brand{color:#fff;font-size:30px;font-weight:700;letter-spacing:-.015em;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;gap:12px}
.brand svg{width:30px;height:30px;flex:0 0 30px;border-radius:6px}
nav.desks{margin:14px 0 0;padding-bottom:12px;gap:0;border-top:1px solid rgba(255,255,255,.14)}
nav.desks a{color:rgba(255,255,255,.72);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;padding:12px 16px 10px 0;border-radius:0}
nav.desks a:hover{background:none;color:#fff}
nav.desks a.on{background:none;color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.langs{position:absolute;right:20px;top:22px}
.langs a{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.22)}
.langs a.on{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.topbar .wrap{position:relative}

/* the feed reads as a wire digest */
.cols{grid-template-columns:minmax(0,1fr) 280px;gap:44px;margin-top:30px}
.grid{grid-template-columns:1fr;gap:0}
.stack{gap:0}
.card{background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:22px 0 20px;box-shadow:none}
.card:hover{box-shadow:none;transform:none}
.card:hover h3 a,.card:hover h2 a{color:var(--accent)}
.card h3{font-size:22px;line-height:1.24;margin:6px 0 7px}
.card p.dek{font-size:15px}
.chip{background:none;border:0;padding:0;color:var(--accent);font-size:11px;
  letter-spacing:.16em;font-weight:800}
.card .foot{font-size:12px;margin-top:11px;color:var(--dim)}
.card.lead{border-top:0;padding-top:6px}
.card.lead .in{padding:0}
.card.lead>img{display:none}          /* the digest opens with words, not a poster */
.lead h2{font-size:34px;line-height:1.14;margin:8px 0 10px}

/* the rail is a column, not a box */
.rail{background:none;border:0;border-left:1px solid var(--line);border-radius:0;
  padding:4px 0 0 22px;box-shadow:none}
.rail h2{font-size:10.5px;letter-spacing:.18em;color:var(--ink)}
.wire li{border-bottom:0;padding:9px 0}
.wire a{font-size:14px;line-height:1.35}

/* an article is a page, not a sheet on a tray */
.sheet{background:none;border:0;border-radius:0;padding:0;margin:26px 0 0}
.sheet article h1{font-size:40px;line-height:1.1;margin:10px 0 16px}
@media(max-width:700px){.sheet article h1{font-size:28px}}
.byline{border-bottom:1px solid var(--line);padding-bottom:14px;font-size:12.5px;
  text-transform:uppercase;letter-spacing:.08em}
.byline .nm{text-transform:none;letter-spacing:0;font-size:14px}
.crumbs{margin-top:18px}
.source{border-radius:0;border-left:3px solid var(--accent)}
figure.mid img{border-radius:0}
.pagehead h1{font-size:34px}
.signature,.intopic{font-size:13px}

/* ---------- phone repair, and it was a real defect ----------
   This block re-declares .cols, and that is the whole point. The layout
   override above sets `grid-template-columns: minmax(0,1fr) 280px` with no
   media query, so it OVERRODE the base rule that collapses the two columns
   below 980px - the cascade takes the later declaration, not the narrower
   one. On a 390px screen the rail kept its 280 pixels and the story was left
   with 26: the front page rendered one letter per line. Found by opening a
   screenshot at 390px, not by reading the CSS; the numbers in the DOM said
   cols 350 / card 26. Any later override of .cols must repeat this. */
@media(max-width:980px){.cols{grid-template-columns:1fr}}
@media(max-width:700px){
  .brand{font-size:21px}
  .brand svg{width:26px;height:26px;flex:0 0 26px}
  .langs{top:16px;right:16px}
  .topbar .wrap{padding-top:14px}
  nav.desks{margin-top:12px}
  nav.desks a{font-size:11px;padding:11px 13px 9px 0}
  .lead h2{font-size:26px}
  .card h3{font-size:19px}
  .sheet article h1{font-size:27px}
  .pagehead h1{font-size:25px}
}