/* News: write-ups that trace an event through its transactions, set the way news sites set a story. A main column
   carries the headline and the text, a rail beside it carries the key numbers and then the list of parts, kept in view;
   the lead diagram runs across the page under the head; each part opens under a hairline rule. The site's graphite and
   hairlines carry the page, and the only colours are the parties in the story, each kept to one hue across the
   diagrams, the timeline and the tables: the attacker in coral, Binance's wallets in gold, the attacker moving funds in
   sky, frozen funds in grey. */
.story {
  --attacker: #ff7a5c;
  --attacker-soft: rgb(255 122 92 / 0.12);
  --binance: #e8b84a;
  --binance-soft: rgb(232 184 74 / 0.12);
  --asset: #6cc3e0;
  --asset-soft: rgb(108 195 224 / 0.11);
  --frozen: #b4b4b0;
  --frozen-soft: rgb(255 255 255 / 0.05);
  --rail: 320px;
  --rail-gap: 64px;
  padding-bottom: 104px;
  font-size: 17px;
  line-height: 1.7;
}
.story p { margin: 0; }
.story a { color: var(--mint-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.story code, .story .addr { font-family: var(--mono); font-size: 0.88em; }
.story .addr { color: var(--ink-3); word-break: break-all; }
.story ::selection { background: rgb(47 240 184 / 0.28); color: var(--ink); }

/* News pages run wider than the rest of the site, as news sites do: room for a full main column and its rail. */
body[data-page="news"] { --col: 1360px; }

/* Main column and rail, at the top and through the body alike. */
.story-top, .story-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: var(--rail-gap); align-items: start; }
.story-top { padding-top: 56px; }
.story-main { grid-column: 1; grid-row: 1; min-width: 0; }
.story-rail { grid-column: 2; grid-row: 1; align-self: stretch; }
.story-rail .contents { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }

/* The head: label, headline, standfirst, then who and when between two rules. */
.story-head { display: grid; min-width: 0; }
.story-flag { margin-bottom: 18px; }
.story h1 { margin: 0; font-size: clamp(34px, 4.6vw, 52px); font-weight: 650; line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.story .dek { margin-top: 20px; color: var(--ink-2); font-size: 19px; line-height: 1.55; letter-spacing: -0.01em; text-wrap: pretty; }
.story-meta { display: grid; gap: 4px; margin-top: 26px; padding: 14px 0; border-block: 1px solid var(--line-strong); }
.story-byline { color: var(--ink-2); font-size: 14.5px; }
.story-byline a { color: var(--ink); font-weight: 600; text-decoration: none; }
.story-byline a:hover { text-decoration: underline; }
/* The latest update's time leads to that update, so it reads as a link, not as the author's name. */
.story-byline a.story-updated { color: var(--mint-text); font-weight: 500; text-decoration: underline; text-decoration-color: rgb(47 240 184 / 0.4); }
.story-byline a.story-updated:hover { text-decoration-color: currentColor; }
.dateline { color: var(--ink-3); font: 400 12.5px/1.5 var(--mono); }

/* The rail: a title over hairline rows, the way a news site's side column lists its stories. */
.rail-title { margin-bottom: 4px; color: var(--ink-3); font: 600 12px/1.5 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.story-glance { padding-top: 6px; }
.contents ol { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.contents li { border-bottom: 1px solid var(--line); }
.contents a { display: block; padding: 9px 0 9px 12px; margin-left: -12px; border-left: 2px solid transparent; color: var(--ink-3); font-size: 14.5px; line-height: 1.4; text-decoration: none; transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.contents a:hover { color: var(--ink); }
.contents a[aria-current] { border-left-color: var(--mint); color: var(--ink); }
.contents a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 4px; }

/* Key numbers read as a ledger: the figure, then what it is. The dot names the party. In the rail each takes two
   lines; in the text, one row. */
.story .facts { display: grid; border-top: 1px solid var(--line-strong); }
.story .fact { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.story-glance .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
.story .fact b { display: flex; align-items: center; gap: 10px; font: 600 21px/1.2 var(--sans); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.story .fact b::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--line-hi); }
.story .fact.attacker b::before { background: var(--attacker); }
.story .fact.binance b::before { background: var(--binance); }
.story .fact.frozen b::before { background: var(--frozen); }
.story .fact span { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.story-glance .fact span { padding-left: 17px; font-size: 14px; }

/* The lead: the first part's diagram across the page, under the head. */
.story-lead { margin-top: 48px; }
.story-lead > * + * { margin-top: 16px; }
.story-lead h2 { margin-top: 0; }
.story-lead figure > :is(.legend, figcaption) { max-width: calc(100% - var(--rail) - var(--rail-gap)); }

/* A part opens under a rule, with more room above its heading than below. */
.story-main section > * + * { margin-top: 20px; }
.story h2 { margin: 72px 0 0; padding-top: 22px; border-top: 1px solid var(--line-strong); font-size: 28px; font-weight: 650; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.story-main > section:first-child > h2:first-child { margin-top: 56px; }
.story h2 + * { margin-top: 16px; }
.story h3 { margin: 40px 0 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.story h3 + * { margin-top: 12px; }
.story .lede { color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.story div.two, .story section.two, .story .mech { display: grid; }
.story .mech > * + * { margin-top: 16px; }
.story :is(div.two, section.two) > div > * + * { margin-top: 16px; }
.story :is(div.two, section.two) > div > h3 { margin-top: 40px; }
.story :is(div.two, section.two) > div > h3 + * { margin-top: 12px; }

/* Diagrams and tables: across the page in the lead, at the main column's width in the body, scrolling sideways when
   they need more room than that. */
.story figure { display: grid; gap: 12px; margin: 28px 0 0; }
.story .scroll { overflow-x: auto; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); scrollbar-color: #34343a transparent; }
.story .scroll svg { display: block; min-width: 1100px; max-width: 100%; height: auto; }
.story .scroll.small svg { min-width: 760px; }
.story section > .table-scroll { margin-top: 28px; }
.story section > .table-scroll + figcaption { margin-top: 12px; }
.story figcaption { color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.story .legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-3); font-size: 13px; }
.story .legend i { display: inline-block; width: 22px; height: 0; margin-right: 6px; border-top: 2px solid currentColor; vertical-align: middle; }
.story .legend .a { color: var(--attacker); }
.story .legend .b { color: var(--binance); }
.story .legend .s { color: var(--asset); }
.story .legend .f { color: var(--frozen); }
.story .legend .dash i, .story .legend i.dashed { border-top-style: dashed; }

/* Geist sets wider than the face the diagrams were laid out in, so their words sit a touch tighter to stay in their boxes. */
.story svg text { fill: var(--ink); font: 400 12px var(--sans); letter-spacing: -0.02em; }
.story svg .mono { fill: var(--ink-3); font: 400 11px var(--mono); }
.story svg .lbl { fill: var(--ink-3); font-size: 11.5px; }
.story svg .ttl { font-size: 13px; font-weight: 600; }
.story svg .col { fill: var(--ink-3); font: 500 11px var(--mono); letter-spacing: 0.08em; }
.story svg .node { fill: var(--surface-2); stroke: var(--line-hi); stroke-width: 1.2; }
.story svg .node.attacker { fill: var(--attacker-soft); stroke: var(--attacker); }
.story svg .node.binance { fill: var(--binance-soft); stroke: var(--binance); }
.story svg .node.asset { fill: var(--asset-soft); stroke: var(--asset); }
.story svg .node.frozen { fill: var(--frozen-soft); stroke: var(--frozen); stroke-dasharray: 4 3; }
.story svg .e { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.story svg .e.attacker { stroke: var(--attacker); }
.story svg .e.binance { stroke: var(--binance); stroke-width: 2.2; }
.story svg .e.asset { stroke: var(--asset); stroke-width: 1.8; }
.story svg .e.dash { stroke-dasharray: 5 4; }
.story svg .e.thin { stroke-width: 1; }
.story svg .edge-lbl { fill: var(--ink); font-size: 11px; }
.story svg .edge-lbl.attacker { fill: var(--attacker); }
.story svg .edge-lbl.binance { fill: var(--binance); }
.story svg .edge-lbl.asset { fill: var(--asset); }
.story svg .edge-lbl.muted { fill: var(--ink-3); }
.story svg .lane { stroke: var(--line-strong); stroke-width: 1; }
.story svg .mk { fill: var(--ink-2); }
.story svg .mk-a { fill: var(--attacker); }
.story svg .mk-b { fill: var(--binance); }
.story svg .mk-s { fill: var(--asset); }

/* The timeline: time in the margin, what happened beside it. */
.story .steps { display: grid; border-top: 1px solid var(--line-strong); }
.story .step { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.story .step time { padding-top: 2px; color: var(--ink-3); font: 400 12.5px/1.6 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.story .step b { display: block; font-weight: 600; }
.story .step p { margin-top: 2px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.story .step.attacker time { color: var(--attacker); }
.story .step.binance time { color: var(--binance); }
.story .step.frozen time { color: var(--frozen); }
.story :is(.mech ol, .reasons) { display: grid; gap: 12px; margin: 0; padding-left: 22px; color: var(--ink-2); }
.story :is(.mech ol, .reasons) li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.story :is(.mech ol, .reasons) b { color: var(--ink); font-weight: 600; }
.story p.small { color: var(--ink-3); font-size: 14px; line-height: 1.6; }
.story .note { padding: 16px 18px; border-radius: 10px; background: var(--attacker-soft); box-shadow: inset 0 0 0 1px rgb(255 122 92 / 0.28); color: var(--ink-2); font-size: 15px; }
.story .note b { color: var(--ink); }

.story table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.story th, .story td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.story th { color: var(--ink-3); font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.story td { color: var(--ink-2); }
.story td:first-child { min-width: 160px; color: var(--ink); font-weight: 600; }
.story .table-scroll { overflow-x: auto; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.story .holdings { min-width: 720px; }
.story .ledger { min-width: 640px; }
.story .chains { min-width: 980px; }
.story .table-scroll :is(th, td):first-child { padding-left: 16px; }
.story .table-scroll tr:last-child td { border-bottom: 0; }
.story .holdings th, .story .holdings td { padding-block: 7px; }
.story .holdings td:first-child { min-width: 0; white-space: nowrap; }
.story .tname { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.story .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.story .note-cell { color: var(--ink-3); font-size: 13px; }
.story .st-frozen td { background: var(--frozen-soft); }
.story .pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--line-hi); border-radius: 6px; color: var(--ink-3); font: 400 11px/1.6 var(--mono); letter-spacing: 0.03em; white-space: nowrap; }
.story .pill.ok { border-color: var(--asset); color: var(--asset); }
.story .pill.inf { border-color: var(--binance); color: var(--binance); }
.story .pill.rep, .story .pill.frz { border-color: var(--frozen); color: var(--frozen); }
.story .pill.open { border-color: var(--attacker); color: var(--attacker); }
.story .sources { display: grid; gap: 0; border-top: 1px solid var(--line-strong); font-size: 14px; }
.story .sources a { padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.story .sources a:hover { color: var(--ink); }

/* The section's own page: the stories, newest first. */
.news-list { display: grid; gap: 12px; margin: 0 0 72px; padding: 0; list-style: none; }
.news-item a { display: grid; gap: 8px; padding: 22px 24px; border-radius: 10px; background: var(--surface-lit); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; transition: box-shadow 0.2s var(--ease-out), translate 0.2s var(--ease-out); }
.news-item a:hover { box-shadow: var(--shadow-lift); }
.news-item a:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.news-meta { color: var(--ink-3); font: 500 12px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.news-item h2 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; text-wrap: balance; }
.news-item p { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: 15px; }

/* Below the width a rail needs, the rail's parts sit in the column: the key numbers after the head, the list of parts
   before the story, in two columns where there is room. */
@media (max-width: 999px) {
  .story-top, .story-body { grid-template-columns: minmax(0, 1fr); }
  .story-rail, .story-main { grid-column: 1; grid-row: auto; }
  .story-glance { margin-top: 36px; padding-top: 0; }
  .story-glance .fact { grid-template-columns: 11rem minmax(0, 1fr); gap: 20px; }
  .story-glance .fact span { padding-left: 0; }
  .story-rail { margin-top: 48px; }
  .story-rail .contents { position: static; max-height: none; }
  .story-lead figure > :is(.legend, figcaption) { max-width: none; }
}
@media (min-width: 640px) and (max-width: 999px) {
  .contents ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .news-item a:hover { translate: 0 -2px; }
}
@media (max-width: 560px) {
  .story { font-size: 16px; }
  .story-top { padding-top: 32px; }
  .story-glance .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .story .dek { font-size: 18px; }
  .story h2 { margin-top: 64px; font-size: 24px; }
  .story .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .story .step { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .story td:first-child { min-width: 0; }
  .news-item a { padding: 18px; }
}

/* Breaking News sizes on a story; the label itself is in site.css, since the home page shows it too. */
.story-flag .breaking { gap: 8px; height: 30px; padding: 0 12px; font-size: 13px; }
.story-flag .breaking-dot { width: 8px; height: 8px; }
.news-meta .breaking { margin-right: 10px; vertical-align: 1px; }