/* Engagement layer (engage.js): one dominant forward click, and reading that flows on without a visible end.
   Loaded after the Living Forms stylesheets; uses their palette. */
.onyx-design {--eg-ink:var(--lf-ink,#20291b);--eg-paper:var(--lf-paper,#f1f0e4);--eg-acid:var(--lf-acid,#e0f57b);--eg-purple:var(--lf-purple,#624963);--eg-muted:#56604c}
.onyx-design .eg-hidden {display:none!important}

/* ---------- Primary call to action: the one thing to click ---------- */
.onyx-design a.eg-cta {display:inline-flex;align-items:center;gap:18px;margin-top:24px;padding:16px 26px 16px 28px;border-radius:40px;background:var(--eg-acid);color:var(--eg-ink)!important;font:800 16px/1 var(--font-family-sansSerif);letter-spacing:-.01em;text-decoration:none!important;box-shadow:0 0 0 0 var(--eg-glow);animation:eg-breathe 2.6s ease-out 1.2s infinite;transition:transform .2s ease}
.onyx-design a.eg-cta:hover {transform:translateX(4px)}
.onyx-design .eg-cta-arrow {display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--eg-ink);color:var(--eg-acid);font-size:16px;transition:transform .2s ease}
.onyx-design a.eg-cta:hover .eg-cta-arrow {transform:translateX(4px)}
@keyframes eg-breathe {0%{box-shadow:0 0 0 0 var(--eg-glow)}70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* The whole lead slab is the target; the headline link stretches across it. */
.onyx-design .lf-lead-slab {position:relative;cursor:pointer}
.onyx-design .lf-lead-slab h1 a::after {content:'';position:absolute;inset:0;z-index:1}
.onyx-design .lf-lead-slab .eg-cta {position:relative;z-index:2}
.onyx-design .lf-lead-slab .lf-thumb img {transition:transform 6s ease}
.onyx-design .lf-lead-slab:hover .lf-thumb img {transform:scale(1.05)}
/* Headline arrives first, the button right after it: the eye lands on the story, then the action. */
.onyx-design .lf-lead-slab h1 {animation:eg-up .7s cubic-bezier(.2,.7,.2,1) both}
.onyx-design .lf-lead-slab .lf-deck {animation:eg-up .7s .15s cubic-bezier(.2,.7,.2,1) both}
.onyx-design .lf-lead-slab .eg-cta {animation:eg-up .7s .3s cubic-bezier(.2,.7,.2,1) both,eg-breathe 2.6s ease-out 1.4s infinite}
@keyframes eg-up {from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* The rail beside it is quieter, so it reads as "after", not "instead". */
.onyx-design .lf-lead .lf-rail {background:var(--eg-soft)}
.onyx-design .lf-lead .lf-rail h2 {font-size:18px;color:var(--eg-muted)}
.onyx-design .lf-lead .lf-rail-title {font-size:15px;font-weight:600}

/* Returning reader: what is new since last time. */
.onyx-design .eg-since {display:flex;align-items:center;gap:12px;padding:12px 38px;background:var(--eg-ink);color:var(--eg-paper)!important;font-size:13px;text-decoration:none!important;animation:eg-up .5s ease both}
.onyx-design .eg-since[hidden] {display:none}
.onyx-design .eg-since strong {color:var(--eg-acid)}
.onyx-design .eg-since span:not(.eg-since-dot) {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.onyx-design .eg-since-dot {flex:none;width:9px;height:9px;border-radius:50%;background:var(--eg-acid);animation:eg-blink 1.6s ease-in-out infinite}
@keyframes eg-blink {50%{opacity:.25}}

/* ---------- Hooks: the question the reader may already be asking ---------- */
.onyx-design .eg-hook {display:block;font:700 11px/1.4 var(--font-family-sansSerif);letter-spacing:.06em;text-transform:uppercase;color:var(--eg-purple)}

/* ---------- Up-next dock ---------- */
.onyx-design .eg-dock {position:fixed;right:20px;bottom:20px;z-index:60;width:min(400px,calc(100vw - 40px));background:var(--eg-ink);color:var(--eg-paper);border-radius:18px;box-shadow:0 18px 50px var(--eg-shadow);transform:translateY(130%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease;pointer-events:none}
.onyx-design .eg-dock.is-shown {transform:none;opacity:1;pointer-events:auto}
.onyx-design .eg-dock-link {display:grid;grid-template-columns:72px minmax(0,1fr) 34px;gap:14px;align-items:center;padding:12px 16px 12px 12px;color:inherit!important;text-decoration:none!important}
.onyx-design .eg-dock-img {width:72px;height:72px;border-radius:12px;background:var(--eg-media) center/cover no-repeat;position:relative;overflow:hidden}
.onyx-design .eg-dock.is-live .eg-dock-img::after {content:'▶';position:absolute;inset:auto 6px 6px auto;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--eg-acid);color:var(--eg-ink);font-size:9px}
.onyx-design .eg-dock .eg-hook {display:block;color:var(--eg-acid);margin-bottom:4px}
.onyx-design .eg-dock-copy {min-width:0}
.onyx-design .eg-dock-hook {display:block;font:700 11px/1.4 var(--font-family-sansSerif);letter-spacing:.06em;text-transform:uppercase;color:var(--eg-acid);margin-bottom:4px}
.onyx-design .eg-dock-title {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 15px/1.3 var(--font-family-sansSerif);letter-spacing:-.015em}
.onyx-design .eg-dock-go {display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--eg-acid);color:var(--eg-ink);font-weight:800;animation:eg-nudge 2.4s ease-in-out 1s infinite}
@keyframes eg-nudge {0%,70%,100%{transform:none}80%{transform:translateX(4px)}90%{transform:translateX(-1px)}}
.onyx-design .eg-dock-close {position:absolute;top:-10px;left:-10px;width:26px;height:26px;border-radius:50%;border:1px solid var(--eg-dock-rule);background:var(--eg-ink);color:var(--eg-paper);font-size:14px;line-height:1;cursor:pointer;opacity:.75}
.onyx-design .eg-dock-close:hover {opacity:1}

/* ---------- Reading progress ---------- */
.onyx-design .eg-progress {position:fixed;inset:0 0 auto;height:3px;z-index:70;pointer-events:none}
.onyx-design .eg-progress span {display:block;height:100%;background:var(--eg-purple);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Article: provenance label ---------- */
.onyx-design .eg-provenance {display:flex;align-items:baseline;gap:10px;max-width:640px;margin:18px 0 0;font:400 13px/1.5 var(--font-family-sansSerif);color:var(--eg-muted)}
.onyx-design .eg-provenance strong {color:var(--eg-ink);font-weight:700}
.onyx-design .eg-provenance-dot {flex:none;width:9px;height:9px;border-radius:50%;background:var(--eg-ink);transform:translateY(-1px)}
.onyx-design .eg-provenance[data-eg-kind="ai"] .eg-provenance-dot {background:transparent;border:2px solid var(--eg-purple)}
.onyx-design .eg-provenance[data-eg-kind="opinion"] .eg-provenance-dot {background:var(--eg-purple)}
.onyx-design .eg-provenance[data-eg-kind="press"] .eg-provenance-dot {background:var(--lf-line)}

/* ---------- Article: mid-article detour ---------- */
.onyx-design .lf-article .c-content .eg-detour {margin:44px 0;padding:0}
.onyx-design .eg-detour-card {display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:22px;align-items:center;padding:18px;background:var(--eg-soft);border-radius:18px;color:var(--eg-ink)!important;text-decoration:none!important;font-family:var(--font-family-sansSerif);transition:background .2s ease,transform .25s ease}
.onyx-design .eg-detour-card:hover {background:var(--eg-soft2);transform:translateY(-2px)}
.onyx-design .eg-card-img {display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--eg-media)}
.onyx-design .eg-card-img img {display:block;width:100%;height:100%;object-fit:cover;margin:0!important;transition:transform 4s ease}
.onyx-design .eg-detour-card:hover .eg-card-img img {transform:scale(1.06)}
.onyx-design .eg-card-copy {display:grid;gap:8px;min-width:0}
.onyx-design .eg-card-title {font:700 21px/1.22 var(--font-family-sansSerif);letter-spacing:-.03em}
.onyx-design .eg-card-deck {font:400 14px/1.55 var(--font-family-sansSerif);color:var(--eg-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Article: Onyx Live clip in the margin (wide screens only) ---------- */
.onyx-design .lf-article {position:relative}
.onyx-design .eg-margin {display:none}
@media (min-width:1320px) {
  .onyx-design .eg-margin {display:block;position:absolute;top:18%;bottom:0;left:calc(100% + 56px);width:230px}
  .onyx-design .eg-margin-inner {position:sticky;top:110px}
}
.onyx-design .eg-clip {display:grid;gap:10px;color:var(--eg-ink)!important;text-decoration:none!important;font-family:var(--font-family-sansSerif)}
.onyx-design .eg-clip-frame {position:relative;display:block;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--eg-media)}
.onyx-design .eg-clip-frame img {display:block;width:100%;height:100%;object-fit:cover;animation:eg-kenburns 14s ease-in-out infinite alternate}
@keyframes eg-kenburns {from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-4%,-3%)}}
.onyx-design .eg-clip-frame::after {content:'';position:absolute;inset:0;background:linear-gradient(0deg,var(--eg-scrim),transparent 55%)}
.onyx-design .eg-clip-live {position:absolute;top:12px;left:12px;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:20px;background:var(--eg-scrim);color:var(--eg-paper);font:700 11px/1 var(--font-family-sansSerif)}
.onyx-design .eg-clip-dot {width:7px;height:7px;border-radius:50%;background:var(--eg-live);animation:eg-blink 1.2s ease-in-out infinite}
.onyx-design .eg-clip-play {position:absolute;left:12px;bottom:12px;z-index:1;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--eg-acid);color:var(--eg-ink);font-size:14px;padding-left:3px;animation:eg-breathe 2.6s ease-out infinite}
.onyx-design .eg-clip-title {font:700 16px/1.3 var(--font-family-sansSerif);letter-spacing:-.02em}
.onyx-design .eg-clip-cta {font:700 12px/1.4 var(--font-family-sansSerif);text-decoration:underline;text-underline-offset:4px}

/* ---------- Article: sources ---------- */
.onyx-design .eg-sources {margin-top:48px;padding:22px 26px;border:1px solid var(--lf-line,#b9beac);border-radius:14px;font-family:var(--font-family-sansSerif)}
.onyx-design .eg-sources h2 {margin:0 0 10px;font:700 13px/1.4 var(--font-family-sansSerif);letter-spacing:.06em;text-transform:uppercase}
.onyx-design .eg-sources ol {margin:0;padding-left:20px;font-size:14px;line-height:1.6}
.onyx-design .eg-sources li span {color:var(--eg-muted);font-size:12px}

/* ---------- Article: forward-only end link ---------- */
.onyx-design .lf-article-endrow .eg-next-link {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label go" "title go";gap:4px 18px;align-items:center;flex:1;max-width:520px;padding:18px 20px 18px 24px;border-radius:18px;background:var(--eg-ink);color:var(--eg-paper)!important;text-decoration:none!important;transition:transform .2s ease}
.onyx-design .lf-article-endrow .eg-next-link:hover {transform:translateX(4px)}
.onyx-design .eg-next-label {grid-area:label;font:700 11px/1.4 var(--font-family-sansSerif);letter-spacing:.06em;text-transform:uppercase;color:var(--eg-acid)}
.onyx-design .eg-next-title {grid-area:title;font:700 17px/1.3 var(--font-family-sansSerif);letter-spacing:-.02em}
.onyx-design .eg-next-link>span[aria-hidden] {grid-area:go;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--eg-acid);color:var(--eg-ink);font-weight:800;animation:eg-nudge 2.4s ease-in-out infinite}

/* ---------- Article stream: the next article continues below, with a seam rather than an ending ---------- */
.onyx-design .eg-seam {position:relative;max-width:760px;margin:10px auto 0;padding:56px 38px 8px;text-align:center}
.onyx-design .eg-seam-line {display:block;width:2px;height:64px;margin:0 auto 18px;background:linear-gradient(var(--eg-paper),var(--eg-purple));animation:eg-drip 1.8s ease-in-out infinite}
@keyframes eg-drip {0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.3);transform-origin:bottom}}
.onyx-design .eg-seam .eg-hook {font-size:13px}
.onyx-design .eg-seam-loading {display:block;width:28px;height:28px;margin:18px auto 0;border-radius:50%;border:2px solid var(--lf-line,#b9beac);border-top-color:var(--eg-ink);animation:eg-spin .8s linear infinite}
.onyx-design .eg-seam.is-loaded .eg-seam-loading {display:none}
@keyframes eg-spin {to{transform:rotate(360deg)}}
.onyx-design .eg-chained {animation:eg-up .6s ease both}
.onyx-design .eg-chained .lf-article-top {padding-top:8px}

/* ---------- Feeds that keep going ---------- */
.onyx-design .eg-feed {padding:24px 38px 40px}
.onyx-design .eg-feed-grid:empty {display:none}
.onyx-design .lf-archive-card.is-seen {opacity:.6}
.onyx-design .eg-sentinel {height:1px}
.onyx-design .eg-sentinel.is-loading {height:60px;background:radial-gradient(circle,var(--eg-ink) 3px,transparent 4px) center/18px 18px no-repeat;animation:eg-blink 1s ease-in-out infinite}
.onyx-design .eg-doors {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.onyx-design .eg-doors a {display:grid;gap:8px;padding:26px;border-radius:18px;background:var(--eg-ink);color:var(--eg-paper)!important;font:700 22px/1.2 var(--font-family-sansSerif);letter-spacing:-.03em;text-decoration:none!important}
.onyx-design .eg-doors .eg-hook {color:var(--eg-acid)}
.onyx-design .eg-rise {opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.onyx-design .eg-rise.eg-in {opacity:1;transform:none}

@media (max-width:650px) {
  .onyx-design .eg-since {padding:12px 20px}
  .onyx-design a.eg-cta {width:100%;justify-content:space-between}
  .onyx-design .eg-dock {right:10px;left:10px;bottom:10px;width:auto;border-radius:16px}
  .onyx-design .eg-dock-link {grid-template-columns:56px minmax(0,1fr) 32px;gap:12px}
  .onyx-design .eg-dock-img {width:56px;height:56px}
  .onyx-design .eg-dock-close {top:-9px;left:auto;right:-4px}
  .onyx-design .eg-detour-card {grid-template-columns:minmax(0,1fr);padding:14px}
  .onyx-design .eg-card-title {font-size:19px}
  .onyx-design .lf-article-endrow {flex-direction:column;align-items:stretch}
  .onyx-design .lf-article-endrow .eg-next-link {max-width:none}
  .onyx-design .eg-feed {padding:16px 20px 32px}
  .onyx-design .eg-doors {grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce) {
  .onyx-design :is(.eg-cta,.eg-dock-go,.eg-clip-frame img,.eg-clip-play,.eg-clip-dot,.eg-since-dot,.eg-seam-line,.eg-next-link>span,.lf-lead-slab h1,.lf-lead-slab .lf-deck,.eg-chained) {animation:none!important}
  .onyx-design .eg-rise {opacity:1;transform:none}
  .onyx-design .eg-dock {transition:none}
}

/* =====================================================================
   "Assay" — the feed. Design school: a lab instrument read-out crossed with a social timeline.
   Overemphasised tenets: (1) one acid-lime action at a time, reserved for the next click and nothing else;
   (2) oversized, tightly set headlines; (3) monospace specimen labels for every fact about a post;
   (4) a dark instrument surface, so images and the acid action glow.
   ===================================================================== */
.onyx-design {--eg-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;--eg-night:#0e1113;--eg-panel:#161a1d;--eg-panel2:#1d2226;--eg-rule:#2a3035;--eg-bone:#f1f0e4;--eg-dim:#9aa39a;--eg-violet:#c5a6d6;
  --eg-deck:#c9cfc6;--eg-focus-rule:#4a5258;--eg-glow:#e0f57b99;--eg-soft:#e5e8da;--eg-soft2:#dce3ca;--eg-shadow:#0b100a55;--eg-media:#171d1b;--eg-dock-rule:#ffffff33;
  --eg-scrim:#0e1113cc;--eg-shade-rgb:14 17 19;--eg-on-scrim:#f1f0e4;--eg-on-scrim-dim:#c9cfc6;--eg-on-scrim-rule:#ffffff40;--eg-live:#ff5a4e;--eg-clip:#0a0c0d;--eg-take:#2a1f2c;--eg-take-rule:#4a3a4d;--eg-logo-filter:none}
.onyx-design:has(.eg-home) {background:var(--eg-night);color:var(--eg-bone)}
.onyx-design:has(.eg-home) .lf-header {background:var(--eg-night);color:var(--eg-bone);max-width:none}
.onyx-design:has(.eg-home) .lf-header .lf-logo img {filter:var(--eg-logo-filter)}
.onyx-design:has(.eg-home) .lf-header .lf-nav {border-top-color:var(--eg-rule)}
.onyx-design:has(.eg-home) .lf-subscribe {background:var(--eg-bone);color:var(--eg-night)!important}
.onyx-design:has(.eg-home) .lf-footer {display:none}

/* Reading meter in the header */
.onyx-design .eg-meter {display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border:1px solid currentColor;border-radius:20px;font:700 12px/1 var(--eg-mono);text-decoration:none!important;color:inherit!important;opacity:.85}
.onyx-design .eg-meter-n {font-size:14px}
.onyx-design .eg-meter-l {font-weight:500;opacity:.8}
.onyx-design .eg-meter.is-bump {animation:eg-bump .9s cubic-bezier(.2,.9,.3,1.4)}
@keyframes eg-bump {0%{transform:scale(1)}30%{transform:scale(1.25);background:var(--eg-acid);color:var(--eg-ink)!important}100%{transform:scale(1)}}

/* Three-column app */
.onyx-design .eg-app {display:grid;grid-template-columns:200px minmax(0,640px) 300px;justify-content:center;gap:36px;padding:28px 28px 80px;font-family:var(--font-family-sansSerif)}
.onyx-design .eg-left {position:sticky;top:20px;align-self:start;display:grid;gap:2px}
.onyx-design .eg-left a {display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:24px;color:var(--eg-bone);text-decoration:none;font:600 15px/1.2 var(--font-family-sansSerif);letter-spacing:-.01em;transition:background .15s}
.onyx-design .eg-left a:hover {background:var(--eg-panel2)}
.onyx-design .eg-left a span {color:var(--eg-violet);font-size:12px}
.onyx-design .eg-right {position:sticky;top:20px;align-self:start;display:grid;gap:18px}
.onyx-design .eg-right h2 {margin:0 0 14px;font:700 11px/1.4 var(--eg-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--eg-dim)}
.onyx-design .eg-stats,.onyx-design .eg-topics {background:var(--eg-panel);border:1px solid var(--eg-rule);border-radius:20px;padding:20px}
.onyx-design .eg-stats dl {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.onyx-design .eg-stats dt {font:500 10px/1.3 var(--eg-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--eg-dim)}
.onyx-design .eg-stats dd {margin:4px 0 0;font:800 26px/1 var(--font-family-sansSerif);letter-spacing:-.04em;color:var(--eg-bone)}
.onyx-design .eg-stats-fact {margin:16px 0 0;font-size:13px;line-height:1.5;color:var(--eg-bone)}
.onyx-design .eg-stats-note,.onyx-design .eg-stats-empty {margin:10px 0 0;font:500 11px/1.5 var(--eg-mono);color:var(--eg-dim)}
.onyx-design .eg-topics ul {list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.onyx-design .eg-topics a {display:inline-flex;gap:8px;align-items:center;padding:7px 12px;border:1px solid var(--eg-rule);border-radius:20px;color:var(--eg-bone);text-decoration:none;font:600 13px/1 var(--font-family-sansSerif)}
.onyx-design .eg-topics a span {font:500 11px var(--eg-mono);color:var(--eg-dim)}
.onyx-design .eg-topics a:hover {border-color:var(--eg-bone)}

.onyx-design .eg-feedcol {min-width:0}
.onyx-design .eg-home .eg-since {padding:14px 18px;margin-bottom:14px;border-radius:16px;background:var(--eg-panel2);border:1px solid var(--eg-rule)}
.onyx-design .eg-feed-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:14px}

/* Posts */
.onyx-design .eg-post {position:relative;display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:12px;padding:20px 22px 18px;background:var(--eg-panel);border:1px solid var(--eg-rule);border-radius:22px;color:var(--eg-bone);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,opacity .3s}
.onyx-design .eg-post a {color:inherit;text-decoration:none}
.onyx-design .eg-post-title a::after {content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.onyx-design .eg-post-section,.onyx-design .eg-post-head a {position:relative;z-index:2}
.onyx-design .eg-post-head {display:flex;align-items:center;gap:10px;font:500 11px/1.3 var(--eg-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--eg-dim)}
.onyx-design .eg-post-section {color:var(--eg-bone);font-weight:700}
.onyx-design .eg-post-kind {padding:3px 8px;border:1px solid var(--eg-rule);border-radius:10px}
.onyx-design .eg-post-head time {margin-left:auto}
.onyx-design .eg-post-media {position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--eg-media)}
.onyx-design .eg-post-media img {display:block;width:100%;height:100%;object-fit:cover;transition:transform 5s ease}
.onyx-design .eg-post:hover .eg-post-media img {transform:scale(1.04)}
.onyx-design .eg-post-title {margin:0;font:750 clamp(22px,2.4vw,30px)/1.1 var(--font-family-sansSerif);letter-spacing:-.045em;text-wrap:balance;overflow-wrap:anywhere}
.onyx-design .eg-post-deck {margin:0;font-size:15px;line-height:1.55;color:var(--eg-deck);overflow-wrap:anywhere}
.onyx-design .eg-post-foot {display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 11px/1.3 var(--eg-mono);color:var(--eg-dim)}
.onyx-design .eg-post-go {position:relative;z-index:2;display:inline-flex;gap:10px;align-items:center;padding:9px 16px;border-radius:20px;border:1px solid var(--eg-rule);font:700 13px/1 var(--font-family-sansSerif);color:var(--eg-bone);transition:background .25s,color .25s,border-color .25s,transform .25s}
.onyx-design .eg-post-why {margin:0;font:700 11px/1.3 var(--eg-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--eg-violet)}
.onyx-design .eg-post.is-stretch .eg-post-why::before {content:'↯ '}

/* The one action: whichever unread card sits in the reading zone. */
.onyx-design .eg-post.is-focus {border-color:var(--eg-focus-rule);transform:scale(1.012)}
.onyx-design .eg-post.is-focus .eg-post-go {background:var(--eg-acid);border-color:var(--eg-acid);color:var(--eg-ink);box-shadow:0 0 0 0 var(--eg-glow);animation:eg-breathe 2.4s ease-out .4s infinite}
.onyx-design .eg-post.is-seen {opacity:.55}
.onyx-design .eg-post.is-seen .eg-post-head::after {content:'Read';margin-left:6px;color:var(--eg-acid)}
.onyx-design .eg-post.is-seen.is-focus {opacity:.8}

/* Rhythm: plain stories come full, compact or headline-only */
.onyx-design .eg-post--story.is-compact {grid-template-columns:minmax(0,1fr) 132px;grid-template-areas:"head head" "title media" "deck media" "foot foot";column-gap:18px}
.onyx-design .eg-post--story.is-compact .eg-post-head {grid-area:head}
.onyx-design .eg-post--story.is-compact .eg-post-why {grid-column:1/-1}
.onyx-design .eg-post--story.is-compact .eg-post-media {grid-area:media;aspect-ratio:1;align-self:start}
.onyx-design .eg-post--story.is-compact .eg-post-title {grid-area:title;font-size:21px}
.onyx-design .eg-post--story.is-compact .eg-post-deck {grid-area:deck;font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.onyx-design .eg-post--story.is-compact .eg-post-foot {grid-area:foot}
.onyx-design .eg-post--story.is-headline .eg-post-media,.onyx-design .eg-post--story.is-headline .eg-post-deck {display:none}
.onyx-design .eg-post--story.is-headline .eg-post-title {font-size:clamp(24px,2.8vw,34px)}
/* The first post is the lead: biggest headline on the page. */
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-title {font-size:clamp(30px,3.6vw,46px);letter-spacing:-.05em}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-media,.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-deck {display:block}
.onyx-design .eg-feed-grid>.eg-post--story:first-child {grid-template-columns:1fr;grid-template-areas:none}
.onyx-design .eg-feed-grid>.eg-post--story:first-child>* {grid-area:auto}
.onyx-design .eg-feed-grid>.eg-post--story:first-child .eg-post-media {aspect-ratio:16/10}

/* Clips: tall video frame, live dot */
.onyx-design .eg-post-play {position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:20px;background:var(--eg-scrim);color:var(--eg-on-scrim);font:700 12px/1 var(--eg-mono);text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(6px)}
/* Takes: opinion, set as a large violet statement */
.onyx-design .eg-post--take {background:var(--eg-take);border-color:var(--eg-take-rule)}
.onyx-design .eg-post--take .eg-post-media {display:none}
.onyx-design .eg-post--take .eg-post-title {font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--eg-violet)}
.onyx-design .eg-post--take .eg-post-title::before {content:'“';display:block;font-size:64px;line-height:.6;margin-bottom:6px;color:var(--eg-violet);opacity:.6}
/* Wire: company releases, compact and clearly not reporting */
.onyx-design .eg-post--wire {gap:8px;padding:14px 18px;background:transparent;border-style:dashed}
.onyx-design .eg-post--wire .eg-post-media,.onyx-design .eg-post--wire .eg-post-deck {display:none}
.onyx-design .eg-post--wire .eg-post-title {font-size:17px;font-weight:600;letter-spacing:-.015em}
.onyx-design .eg-post--interview {background:linear-gradient(160deg,var(--eg-panel2),var(--eg-panel) 60%)}

/* Scroll-up pill */
.onyx-design .eg-uppill {position:fixed;top:14px;left:50%;z-index:65;max-width:min(560px,calc(100vw - 32px));transform:translate(-50%,-160%);padding:11px 18px;border-radius:24px;background:var(--eg-bone);color:var(--eg-ink)!important;font:700 13px/1.2 var(--font-family-sansSerif);text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 30px #0006;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.onyx-design .eg-uppill.is-shown {transform:translate(-50%,0)}

/* Article milestone */
.onyx-design .eg-milestone {margin:28px 0 0;padding:14px 18px;border-radius:14px;background:var(--eg-ink);color:var(--eg-bone);font:500 13px/1.5 var(--font-family-sansSerif);animation:eg-up .5s ease both}
.onyx-design .eg-milestone strong {color:var(--eg-acid)}
/* On the article page the margin clip's play button is not the action; the acid stays with "next". */
.onyx-design .eg-clip-play {background:var(--eg-bone);animation:none}

/* Dark feed versions of shared pieces */
.onyx-design .eg-home .eg-doors a {background:var(--eg-panel2);border:1px solid var(--eg-rule)}
.onyx-design .eg-home .eg-sentinel.is-loading {background-image:radial-gradient(circle,var(--eg-bone) 3px,transparent 4px)}
.onyx-design .eg-home .lf-archive-pagination {padding:0 28px 40px;color:var(--eg-bone)}

@media (max-width:1180px) {
  .onyx-design .eg-app {grid-template-columns:minmax(0,640px) 280px;gap:28px}
  .onyx-design .eg-left {display:none}
}
@media (max-width:900px) {
  .onyx-design .eg-app {grid-template-columns:minmax(0,1fr);padding:12px 10px 60px}
  .onyx-design .eg-right {position:static;order:-1}
  .onyx-design .eg-topics {display:none}
  .onyx-design .eg-post {padding:16px 16px 14px;border-radius:18px}
  .onyx-design .eg-post--story.is-compact {grid-template-columns:minmax(0,1fr) 96px}
  .onyx-design .eg-post--story.is-compact .eg-post-title {font-size:18px}
  .onyx-design .eg-post--story.is-compact .eg-post-deck {display:none}
  .onyx-design .eg-meter-l {display:none}
}
@media (prefers-reduced-motion:reduce) {
  .onyx-design :is(.eg-post--clip .eg-post-media img,.eg-post.is-focus .eg-post-go,.eg-meter.is-bump,.eg-milestone) {animation:none!important}
  .onyx-design .eg-post {transition:none}
}

/* v2: the lead is a poster. Headline and the acid action sit inside the first viewport on every screen size. */
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child {min-height:min(540px,calc(100vh - 210px));align-content:end;padding:26px;overflow:hidden;isolation:isolate;border-color:var(--eg-focus-rule);--eg-bone:var(--eg-on-scrim);--eg-dim:var(--eg-on-scrim-dim);--eg-rule:var(--eg-on-scrim-rule)}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-media {position:absolute;inset:0;border-radius:0;aspect-ratio:auto;max-height:none;z-index:-1}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-media::after {content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgb(var(--eg-shade-rgb)) 8%,rgb(var(--eg-shade-rgb)/.85) 38%,rgb(var(--eg-shade-rgb)/.4) 70%,rgb(var(--eg-shade-rgb)/.13))}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-head {position:absolute;top:22px;left:26px;right:26px}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-kind {background:var(--eg-scrim)}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-deck {color:var(--eg-on-scrim);opacity:.88;max-width:52ch}
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-go {padding:14px 22px;font-size:15px}
.onyx-design .eg-uppill:not(.is-shown) {visibility:hidden;transition:transform .35s,visibility 0s .35s}
.onyx-design .eg-meter.is-zero {display:none}
.onyx-design:has(.eg-home) .lf-subscribe {background:transparent;color:var(--eg-bone)!important;border:1px solid var(--eg-rule)}
@media (max-width:900px) {
  .onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child {min-height:calc(100svh - 150px);padding:18px}
  .onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-head {top:16px;left:18px;right:18px}
  .onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-title {font-size:32px}
  .onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child .eg-post-go {flex:1;justify-content:center}
}
.onyx-design .eg-home .eg-since.is-focus {background:var(--eg-acid);border-color:var(--eg-acid);color:var(--eg-ink)!important}
.onyx-design .eg-home .eg-since.is-focus strong {color:var(--eg-ink)}
.onyx-design .eg-home .eg-since.is-focus .eg-since-dot {background:var(--eg-ink)}
.onyx-design .eg-post--story.is-compact {grid-template-areas:"why why" "head head" "title media" "deck media" "foot foot"}
.onyx-design .eg-post--story.is-compact .eg-post-why {grid-area:why}
.onyx-design .eg-stats dd {font-size:22px}
@media (max-width:900px) {
  .onyx-design .eg-stats--infeed:has(dl) {display:block!important}
  .onyx-design .eg-home .eg-since {display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;font-size:13px}
  .onyx-design .eg-home .eg-since strong {grid-column:2}
  .onyx-design .eg-home .eg-since .eg-since-dot {grid-row:1}
  .onyx-design .eg-home .eg-since span:not(.eg-since-dot):not([aria-hidden]) {grid-column:2;grid-row:2}
  .onyx-design .eg-home .eg-since span[aria-hidden] {grid-column:3;grid-row:1/3;align-self:center;font-weight:800}
}
.onyx-design .eg-home .eg-since[hidden] {display:none}

/* Section pages: the homepage feed with a heading on top */
.onyx-design .eg-section-head {padding:6px 4px 22px;margin-bottom:14px;border-bottom:1px solid var(--eg-rule)}
.onyx-design .eg-section-kicker {margin:0 0 10px;font:500 11px/1.3 var(--eg-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--eg-dim)}
.onyx-design .eg-section-kicker a {color:inherit;text-decoration:none}
.onyx-design .eg-section-head h1 {margin:0;font:800 clamp(40px,5.4vw,68px)/.95 var(--font-family-sansSerif);letter-spacing:-.06em;color:var(--eg-bone)}
.onyx-design .eg-section-dek {margin:14px 0 0;max-width:46ch;font-size:16px;line-height:1.5;color:var(--eg-deck)}
.onyx-design .eg-section-meta {margin:14px 0 0;font:500 11px/1.5 var(--eg-mono);color:var(--eg-dim)}
.onyx-design .eg-section-meta a {color:inherit}
.onyx-design .eg-left a[aria-current] {background:var(--eg-panel2);color:var(--eg-bone)}
.onyx-design .eg-left a[aria-current] span {color:var(--eg-bone)}
@media (max-width:900px) {
  .onyx-design .eg-section-head {padding:4px 8px 18px}
}
/* A lead story without a photo still gets a dark poster, so its light type stays readable. */
.onyx-design .eg-feed-grid>.eg-post:not(.eg-post--clip):first-child:not(:has(.eg-post-media)) {background:var(--eg-clip)}
/* Reading stats only appear once there is something to count. */
.onyx-design .eg-stats:not(:has(dl)) {display:none}
.onyx-design .eg-meter.is-zero {display:none}
/* The live menu has ten items: on laptops and up let it wrap to a second line instead of scrolling sideways. */
@media (min-width:901px) {
  .onyx-design .lf-header .lf-nav {overflow:visible}
  .onyx-design .lf-header .lf-nav ul {flex-wrap:wrap;width:auto;gap:0 24px}
}

/* Video posts: a 16:9 thumbnail with one centred play button, tapped to play in place (like any social feed). */
.onyx-design .eg-post-video {position:relative;z-index:2;aspect-ratio:16/9;cursor:pointer}
.onyx-design .eg-post-video::after {content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgb(0 0 0/.25),transparent 45%);transition:background .2s}
.onyx-design .eg-post-video:hover::after {background:rgb(0 0 0/.12)}
.onyx-design .eg-play {position:absolute;z-index:1;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgb(255 255 255/.92);box-shadow:0 6px 24px rgb(0 0 0/.25);transition:transform .2s}
.onyx-design .eg-play::before {content:'';position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent var(--lf-ink)}
.onyx-design .eg-post-video:hover .eg-play {transform:scale(1.08)}
.onyx-design .eg-post-video.is-playing {cursor:default;background:#000}
.onyx-design .eg-post-video.is-playing::after {display:none}
.onyx-design .eg-post-video iframe,.onyx-design .eg-post-video video {position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* Pinned hot topic above the home feed */
.onyx-design .eg-hot {margin-bottom:14px;padding:18px 18px 16px;border-radius:22px;background:var(--eg-panel);border:1px solid var(--eg-rule)}
.onyx-design .eg-hot-head {display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:14px}
.onyx-design .eg-hot-badge {display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;background:var(--eg-live);color:#fff;font:700 11px/1 var(--eg-mono);letter-spacing:.06em;text-transform:uppercase}
.onyx-design .eg-hot-badge::before {content:'';width:6px;height:6px;border-radius:50%;background:#fff;animation:eg-blink 1.6s ease-in-out infinite}
.onyx-design .eg-hot-head h2 {margin:0;font:800 20px/1.15 var(--font-family-sansSerif);letter-spacing:-.03em}
.onyx-design .eg-hot-head h2 a {color:var(--eg-bone);text-decoration:none}
.onyx-design .eg-hot-row {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.onyx-design .eg-hot-row a {display:grid;gap:8px;color:var(--eg-bone);text-decoration:none}
.onyx-design .eg-hot-img {position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--eg-media)}
.onyx-design .eg-hot-img img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.onyx-design .eg-hot-row a:hover img {transform:scale(1.04)}
.onyx-design .eg-hot-t {font:700 13px/1.3 var(--font-family-sansSerif);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.onyx-design .eg-play--sm {width:36px;height:36px;margin:-18px 0 0 -18px}
.onyx-design .eg-play--sm::before {left:14px;top:11px;border-width:7px 0 7px 11px}
@media (max-width:900px) {
  .onyx-design .eg-hot {margin:0 0 12px;border-radius:18px;padding:14px}
  .onyx-design .eg-hot-row {display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none}
  .onyx-design .eg-hot-row li {flex:0 0 62%;scroll-snap-align:start}
}