/* ============================================================
   Index pages: articles.html, notes.html,
   weekly-reports.html. One shared flavor (dark desk masthead,
   floating search toolbar, editorial cards), and one signature
   visual each: the shelf, the periodic table, the timeline.
   Everything is scoped under .lv or an lv- class.
   ============================================================ */

.lv {
  --rule: #e2ddd0;
  --lav: #a9a4ff;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  /* technologies (articles) */
  --c-trapped-ions: #4a43b8; --c-superconducting: #1f6d80; --c-photonics: #964680; --c-annealing: #a6702a; --c-topological: #557335;
  /* topics (notes): the site's own topic-dot colors */
  --c-foundations: #5b54e0; --c-hardware: #e08a72; --c-error-correction: #2bb8e0; --c-benchmarks: #4f9d69; --c-business-markets: #c08a1e;
  /* channels (weekly) */
  --c-res: #e9785f; --c-news: #7b74f0;
  background: var(--cream);
  overflow-x: clip;
}
[data-tag="trapped-ions"] { --c: var(--c-trapped-ions); } [data-tag="superconducting"] { --c: var(--c-superconducting); }
[data-tag="photonics"] { --c: var(--c-photonics); } [data-tag="annealing"] { --c: var(--c-annealing); } [data-tag="topological"] { --c: var(--c-topological); }
[data-topic="foundations"] { --c: var(--c-foundations); } [data-topic="hardware"] { --c: var(--c-hardware); }
[data-topic="error-correction"] { --c: var(--c-error-correction); } [data-topic="benchmarks"] { --c: var(--c-benchmarks); }
[data-topic="business-markets"], [data-topic="business-&-markets"] { --c: var(--c-business-markets); }
[data-kind="res"] { --c: var(--c-res); } [data-kind="news"] { --c: var(--c-news); }
.lv :focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* Reveal: a keyframe on `translate`, so it never fights hover transforms */
.lv-js .lv [data-reveal]:not(.is-in) { opacity: 0; }
.lv-js .lv [data-reveal].is-in { animation: lv-rise .75s var(--ease-out) var(--d, 0s) both; }
@keyframes lv-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* ============================================================
   Shared: the masthead (the desk at night)
   ============================================================ */
.lv-mast { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--text-light); padding: 58px 0 74px; }
.lv-lamp { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 18% -10%, rgba(255, 214, 150, .15), transparent 62%),
    radial-gradient(ellipse 50% 70% at 90% 115%, rgba(91, 84, 224, .26), transparent 64%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 7px); }
.lv-eyebrow { font: 600 0.76rem/1.5 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); }
.lv-mast .lv-eyebrow { color: var(--lav); }
.lv-mast h1 { color: #fff; font: 600 clamp(2.2rem, 4.6vw, 3.4rem)/1.08 var(--serif); letter-spacing: -0.015em; margin: 8px 0 14px; }
.lv-intro { color: var(--text-dim); font: 400 1.08rem/1.7 var(--serif); max-width: 64ch; }
.lv-intro a { color: var(--lav); text-decoration: underline; text-underline-offset: 3px; }
.lv-intro a:hover { color: #fff; }
.lv-mast-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 30px; font-size: 0.84rem; color: var(--text-dim); }
.lv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.lv-legend > span { display: inline-flex; align-items: center; gap: 7px; font: 500 0.78rem var(--sans); color: var(--text-light); }
.lv-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.lv-legend-star { color: #ffe08a !important; }

/* ============================================================
   Shared: the floating toolbar (search + subject chips)
   ============================================================ */
.lv-toolbar { position: sticky; top: 12px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: -30px 0 10px; padding: 12px 14px 12px 12px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--rule); border-radius: 16px; box-shadow: 0 18px 40px -26px rgba(30, 28, 90, .55); }
.lv-search { flex: 1 1 240px; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; border: 1px solid var(--rule); border-radius: 10px; background: var(--cream); color: var(--text-mute); transition: border-color .2s, box-shadow .2s; }
.lv-search:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent); }
.lv-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 0.95rem var(--sans); color: var(--text-dark); outline: none; }
.lv .note-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.lv .note-filter button { display: inline-flex; align-items: center; gap: 7px; font: 500 0.82rem/1 var(--sans); color: var(--text-dark); background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 8px 12px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.lv .note-filter button[data-tag]::before, .lv .note-filter button[data-topic]::before, .lv .note-filter button[data-kind]:not([data-kind="all"])::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.lv .note-filter button:hover { border-color: color-mix(in srgb, var(--c, var(--purple)) 60%, var(--rule)); }
.lv .note-filter button.active { background: var(--text-dark); border-color: var(--text-dark); color: #fff; }
.lv-count { font: 500 0.8rem var(--sans); color: var(--text-mute); white-space: nowrap; }
.lv-everything { font: 600 0.84rem var(--sans); color: var(--purple); white-space: nowrap; }
.lv-everything:hover { text-decoration: underline; text-underline-offset: 3px; }
.lv .filter-empty { margin: 30px 0; padding: 22px; text-align: center; border: 1px dashed var(--rule); border-radius: 12px; color: var(--text-mute); font: 400 1.15rem var(--hand); }

/* ============================================================
   Shared: sections and the topic/technology tag
   ============================================================ */
.lv-sec { padding: 56px 0 8px; }
.lv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.lv-head h2 { display: flex; align-items: center; gap: 12px; font: 600 clamp(1.6rem, 3vw, 2.15rem)/1.15 var(--serif); letter-spacing: -0.01em; margin-top: 4px; }
.lv-subhead { font: 600 0.74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); margin: 40px 0 6px; }
.lv .article-tag, .lv .note-topic { display: inline-flex; align-items: center; gap: 6px; font: 600 0.7rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); background: none; padding: 0; border: 0; }
.lv .article-tag::before, .lv .note-topic::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--c, var(--text-mute)); }
.lv .article-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.lv .article-pubdate { font: 500 0.8rem var(--sans); color: var(--text-mute); }
.lv .note-title { font-family: var(--serif); }
.lv .note-title a::after { content: ""; position: absolute; inset: 0; }    /* whole card opens the entry */

/* The older list styles in styles.css still apply to these class hooks (main.js
   filters by them), so neutralize the parts this design replaces. */
.lv .note-title, .lv .article-card .note-title { margin: 0; color: var(--text-dark); font-weight: 600; }
.lv .note-title a, .lv .article-card .note-title a, .lv .note-row .note-title a { color: inherit; text-decoration: none; }
.lv .article-card, .lv .article-card:hover { box-shadow: none; }
.lv .article-foot { border-top: 0; padding-top: 0; font-size: inherit; }
.lv .article-toc .article-foot .article-tag { font-weight: 600; color: var(--text-mute); }
.lv .article-toc .article-foot > .article-pubdate::before { content: none; }
.lv .toc-section { margin-top: 0; }
.lv .toc-abstract { max-width: none; margin: 0; }
.lv .lv-search .note-search { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.lv .start-here { border: 0; }
.lv .note-card { box-shadow: none; }
.lv .note-title a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple) 45%, transparent); text-underline-offset: 4px; }

/* ============================================================
   Masthead lanes (Notes: the five topics), in the same dark-card
   language as the weekly timeline items.
   ============================================================ */
.lv-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; }
.lv-lanes.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.lv-lanes.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 701px) { .lv-lanes.five .lv-lane-head { flex-direction: column; align-items: flex-start; gap: 2px; } }
.lv-lane { display: flex; flex-direction: column; padding: 16px 18px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--navy-line); border-left: 3px solid var(--c); }
.lv-lane-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lv-lane-head h2 { font: 600 1.15rem/1.25 var(--serif); color: #fff; }
.lv-lane-head h2 a:hover { color: var(--c); }
.lv-lane-head p { font: 500 0.78rem var(--sans); color: var(--text-dim); }
.lv-lane-sub { margin-top: 14px; font: 600 0.62rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.lv-lane-start { margin-top: 4px; font: 600 0.9rem/1.45 var(--serif); }
.lv-lane-desc { margin-top: 8px; font-size: 0.9rem; line-height: 1.55; color: var(--text-dim); }
.lv-lane.series .lv-lane-start { font-size: 1rem; }
.lv-lane-start a { color: #fff; }
.lv-lane-start a:hover { color: var(--c); text-decoration: underline; text-underline-offset: 3px; }
.lv-seq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; min-height: 26px; }
.lv-seq-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); opacity: .85; transition: transform .2s, opacity .3s; }
.lv-seq-dot.start { box-shadow: 0 0 0 2px #111018, 0 0 0 3.5px #ffe08a; }
.lv-seq-dot:hover, .lv-seq-dot:focus-visible { transform: scale(1.35); opacity: 1; outline: none; }
.lv-seq-dot.is-dim { opacity: .15; }

/* Groups: a label column on the left, content on the right
   (the same row structure as the weekly reports) */
.lv-grp { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.lv-grp:last-child { border-bottom: 0; }
.lv-grp-label { position: sticky; top: 92px; align-self: start; }
.lv-grp-label b { display: block; font: 400 1.6rem/1.1 var(--hand); color: var(--text-dark); }
.lv-grp-label b.topic { display: flex; align-items: center; gap: 8px; font: 600 1.15rem/1.25 var(--serif); }
.lv-grp-label b.topic i { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.lv-grp-label span { display: block; font: 500 0.8rem var(--sans); color: var(--text-mute); margin-top: 2px; }
.lv-tick { position: relative; display: inline-block; font: 700 0.78rem/1.2 var(--sans); letter-spacing: .03em; color: #155c2a; padding: 1px 5px; isolation: isolate; }
.lv-tick::before { content: ""; position: absolute; inset: 2px -1px 0; z-index: -1; background: color-mix(in srgb, #5dff5a 48%, transparent); transform: rotate(-1.5deg); border-radius: 2px; }

/* ============================================================
   NOTES: the notes look like notes. The newest are pinned paper
   cards; every topic is a ruled notebook sheet, numbered in the margin.
   ============================================================ */
.lv-pinned { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; padding-top: 16px; }
.lv .lv-paper {
  position: relative; display: flex; flex-direction: column; padding: 38px 22px 14px 46px; overflow: visible;
  border: 1px solid rgba(20, 24, 38, .10); border-radius: 6px;
  background:
    linear-gradient(to right, transparent 33px, rgba(196, 70, 70, .24) 33px, rgba(196, 70, 70, .24) 34px, transparent 34px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(80, 95, 135, .16) 29px, rgba(80, 95, 135, .16) 30px),
    linear-gradient(180deg, #fbfaf6 0%, #f6f3ea 100%);
  background-position: 0 0, 0 38px, 0 0;
  box-shadow: 0 18px 28px rgba(12, 12, 14, .10), 0 2px 8px rgba(12, 12, 14, .06);
  transform: rotate(-.4deg); transition: transform .3s var(--ease-out), box-shadow .3s;
}
.lv .lv-paper:nth-child(2) { transform: rotate(.3deg); }
.lv .lv-paper:nth-child(3) { transform: rotate(-.15deg); }
.lv .lv-paper:hover, .lv .lv-paper:focus-within { transform: translateY(-4px) rotate(0deg); box-shadow: 0 24px 38px rgba(12, 12, 14, .13), 0 3px 10px rgba(12, 12, 14, .07); }
/* the push pin, the same one the original notes page used */
.lv .lv-paper::before { content: ""; position: absolute; top: -14px; left: 50%; width: 21px; height: 21px; z-index: 3; border-radius: 50%;
  transform-origin: 50% 133%; transform: translateX(-50%) rotate(14deg);
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 14%, transparent 15%), radial-gradient(circle at 55% 62%, #6d64ff 0%, #5147d9 48%, #2d2789 100%);
  box-shadow: 4px 6px 8px rgba(12, 12, 14, .34), 2px 3px 4px rgba(12, 12, 14, .24), inset 0 -2px 3px rgba(0, 0, 0, .22), inset 0 2px 3px rgba(255, 255, 255, .45); }
.lv .lv-paper::after { content: ""; position: absolute; top: 5px; left: 50%; width: 3.5px; height: 9px; z-index: 2; border-radius: 50% 50% 35% 35% / 40% 40% 70% 70%;
  transform-origin: 50% 100%; transform: translateX(-50%) rotate(14deg); background: linear-gradient(to bottom, #3a3577 0%, #221f4c 55%, rgba(30, 28, 70, 0) 100%); }
.lv .lv-paper .note-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; }
.lv .lv-paper .note-date { font: 400 1.12rem/30px var(--hand); color: #23306e; }
.lv .lv-paper .note-topic { line-height: 30px; }
.lv .lv-paper .note-title { font: 600 1.12rem/30px var(--serif); margin: 0; }
.lv .lv-paper .note-excerpt { flex: none; margin: 0; font: 400 0.93rem/30px var(--serif); color: var(--text-mute); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lv .lv-paper .note-readmore { margin-top: auto; font: 600 0.84rem/30px var(--sans); color: var(--purple); }

.lv-sheet {
  position: relative; padding: 24px 28px 24px 96px; border: 1px solid var(--paper-border); border-radius: 6px; counter-reset: ln;
  background-color: #fbfaf6;
  background-image:
    linear-gradient(to right, transparent 70px, var(--paper-margin) 70px, var(--paper-margin) 71px, transparent 71px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, color-mix(in srgb, var(--paper-line) 70%, transparent) 31px, color-mix(in srgb, var(--paper-line) 70%, transparent) 32px);
  background-position: 0 0, 0 24px;
  box-shadow: 0 18px 34px -26px rgba(30, 28, 90, .45);
}
/* punched holes down the left edge */
.lv-sheet::before { content: ""; position: absolute; left: 16px; top: 12px; bottom: 12px; width: 18px;
  background: radial-gradient(circle at 50% 50%, var(--cream) 0 6px, rgba(20, 24, 38, .16) 6.5px, transparent 8px) center top / 18px 96px repeat-y; }
.lv .lv-line { position: relative; display: block; padding: 0 6px 0 0; margin: 0; border: 0; line-height: 32px; counter-increment: ln; }
.lv-line::before { content: counter(ln); position: absolute; left: -72px; width: 38px; text-align: right; font: 400 1.18rem/32px var(--hand); color: var(--c); }
.lv .lv-line .note-title { display: inline; font: 600 1.02rem/32px var(--serif); }
.lv .lv-line:hover .note-title a, .lv .lv-line:focus-within .note-title a { color: var(--purple); }
.lv-line .start-here { display: inline-block; margin-left: 8px; vertical-align: 1px; font: 400 0.95rem/1.3 var(--hand); color: #8a6a00; background: color-mix(in srgb, #ffe137 45%, transparent); border-radius: 4px; padding: 0 6px; transform: rotate(-1.5deg); }
.lv .lv-line .note-line { display: inline; margin: 0 0 0 .45em; font: 400 0.93rem/32px var(--serif); color: var(--text-mute); }

/* ============================================================
   ARTICLES: a journal contents page. It matches the article pages
   themselves: a white printed page under a purple rule, Playfair
   titles, letter-spaced small caps, hairline rules, numbered sections.
   ============================================================ */
.lv-articles { padding-bottom: 76px; }
/* the printed page rises out of the dark masthead, like the toolbar on the other pages */
.lvj-page { position: relative; z-index: 2; margin-top: -30px; background: #fff; border: 1px solid var(--paper-border); border-top: 3px solid var(--purple); border-radius: 2px; box-shadow: 0 30px 60px -44px rgba(30, 28, 90, .4); padding: 48px 56px 64px; }
.lvj-head { padding-bottom: 26px; margin-bottom: 34px; border-bottom: 3px double var(--j-rule); }
.lvj-kicker { font: 600 0.72rem/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--purple); }
.lvj-head h1 { font: 600 clamp(2.2rem, 4vw, 3rem)/1.12 var(--display); letter-spacing: -.012em; color: var(--text-dark); margin: 12px 0 14px; }
.lvj-intro { font: 400 1.04rem/1.75 var(--serif); color: #3a3f52; max-width: 70ch; }
.lvj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 52px; align-items: start; }
.lvj-main { grid-column: 1; grid-row: 1; min-width: 0; }
.lvj-side { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 30px; }
.lvj-side-head { font: 600 0.66rem/1.4 var(--sans); letter-spacing: .15em; text-transform: uppercase; color: var(--text-dark); padding-bottom: 8px; border-bottom: 1.5px solid var(--j-ink); margin-bottom: 8px; }
.lvj-tools .lv-search { height: 40px; margin-bottom: 24px; background: var(--j-tint); }
.lv .lvj-tools .note-filter { flex-direction: column; align-items: stretch; gap: 1px; }
.lv .lvj-tools .note-filter button { justify-content: flex-start; width: 100%; border: 0; border-radius: 4px; background: none; padding: 8px 8px; font: 500 0.88rem/1.2 var(--sans); color: var(--text-dark); }
.lv .lvj-tools .note-filter button:hover { background: var(--j-tint); }
.lv .lvj-tools .note-filter button.active { background: var(--j-tint); color: var(--text-dark); font-weight: 600; box-shadow: inset 2px 0 0 var(--purple); }
.lvj-tools .lv-count { margin-top: 10px; padding-left: 8px; }
.lvj-about dl { margin: 0; }
.lvj-about dt { font: 600 0.98rem/1.35 var(--serif); margin-top: 8px; }
.lvj-about dt a:hover { color: var(--purple); }
.lvj-about dd { margin: 2px 0 10px; font-size: 0.85rem; line-height: 1.5; color: var(--text-mute); }
.lvj-about ul { list-style: none; padding: 0; margin: 0; }
.lvj-about li { padding: 8px 0; border-bottom: 1px solid var(--j-rule); }
.lvj-about li a { font: 600 0.92rem/1.35 var(--serif); color: var(--text-dark); }
.lvj-about li a:hover { color: var(--purple); }
.lvj-about li span { display: block; font-size: 0.78rem; color: var(--text-mute); }

.lvj-h2 { display: flex; align-items: baseline; gap: .38em; font: 600 1.62rem/1.3 var(--display); letter-spacing: -.005em; color: var(--text-dark); margin: 0; }
.lvj-h2 span { font: 600 1.15em var(--sans); color: var(--purple); }
.lvj-sec + .lvj-sec { margin-top: 60px; }
.lvj-issue-head { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; font: 600 0.68rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dark); }
.lvj-issue-head span { color: var(--text-mute); }
.lvj-issue-head em { font-style: normal; color: #fff; background: var(--purple); border-radius: 999px; padding: 3px 8px; letter-spacing: .1em; }
.lvj-issue-head::after { content: ""; flex: 1; height: 1px; background: var(--j-rule); }
.lvj-list { margin-top: 14px; }
.lv .lvj-issue .lvj-entry:last-child, .lv .lvj-pair .lvj-entry { border-bottom: 0; }
.lvj-about dl + .lvj-side-head { margin-top: 22px; }
.lv .lvj-entry { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 24px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--j-rule); }
.lv .lvj-entry.co { grid-template-columns: minmax(0, 1fr) 176px; }
.lvj-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; border: 1px solid var(--paper-border); transition: filter .3s; }
.lvj-entry.co .lvj-thumb img { aspect-ratio: 2 / 1; }
.lvj-entry:hover .lvj-thumb img { filter: brightness(1.08) saturate(1.08); }
.lvj-type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 0.64rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.lvj-type .lv-tick { letter-spacing: .03em; }
.lv .lvj-entry .note-title { font: 600 1.24rem/1.3 var(--display); letter-spacing: -.005em; }
.lv .lvj-entry:hover .note-title a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple) 45%, transparent); text-underline-offset: 4px; }
.lv .lvj-entry .toc-abstract { margin-top: 7px; font: 400 0.95rem/1.62 var(--serif); color: #3a3f52; }
.lvj-entry .article-foot { margin-top: 10px; }
/* the current issue: the lead article large, its parts side by side */
.lv .lvj-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; padding-top: 18px; }
.lvj-lead .lvj-thumb { order: -1; }
.lv .lvj-lead .note-title { font-size: 1.75rem; line-height: 1.22; }
.lv .lvj-lead .toc-abstract { font-size: 1.02rem; line-height: 1.7; }
.lvj-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.lv .lvj-pair .lvj-entry { grid-template-columns: minmax(0, 1fr) 92px; gap: 18px; }
.lv .lvj-pair .lvj-entry .note-title { font-size: 1.12rem; }
.lv .lvj-pair .lvj-entry .toc-abstract { font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   WEEKLY REPORTS: the two-lane timeline
   ============================================================ */
.lv-tl { position: relative; margin-top: 36px; padding-left: 150px; }
.lv-tl-lane { position: absolute; left: 0; width: 132px; font: 600 0.7rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
.lv-tl-lane::before { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--c); margin-bottom: 8px; }
.lv-tl-lane.res { --c: var(--c-res); top: 30px; }
.lv-tl-lane.news { --c: #a9a4ff; bottom: 30px; }
/* any number of weeks: one column per week, oldest left; scrolls sideways once they no longer fit (opens on the latest, listing.js) */
.lv-tl-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); column-gap: 14px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 6px 54px 12px 0; scrollbar-width: thin; scrollbar-color: rgba(169, 164, 255, .35) transparent; }
/* soft edges on the side(s) with more weeks to scroll to (classes set by listing.js) */
.lv-tl-track.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
.lv-tl-track.more-r { -webkit-mask-image: linear-gradient(270deg, transparent, #000 48px); mask-image: linear-gradient(270deg, transparent, #000 48px); }
.lv-tl-track.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.lv-tl-track:focus-visible { outline: 2px solid var(--lav); outline-offset: 4px; border-radius: 6px; }
.lv-tl-next { display: none; }
.lv-tl-week { position: relative; display: grid; grid-template-rows: 118px 46px 118px; }
/* the line through the nodes: one segment per week (bridging the gap), so it spans the whole scroll width */
.lv-tl-week::before { content: ""; position: absolute; left: -7px; right: -7px; top: 50%; height: 2px; margin-top: -1px; background: rgba(169, 164, 255, .42); pointer-events: none; }
.lv-tl-week:first-child::before { left: 0; background: linear-gradient(90deg, rgba(169, 164, 255, .12), rgba(169, 164, 255, .42)); }
.lv-tl-week.is-latest::after { content: ""; position: absolute; left: calc(100% + 7px); width: 40px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(169, 164, 255, .5) 0 5px, transparent 5px 10px); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); pointer-events: none; }
.lv-tl-item { position: relative; display: block; align-self: end; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--navy-line); border-left: 3px solid var(--c); font: 600 0.86rem/1.32 var(--serif); color: #fff; transition: background .25s, transform .3s var(--ease-out), border-color .25s, opacity .3s; }
.lv-tl-item small { display: block; font: 600 0.6rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-bottom: 3px; }
.lv-tl-item .tt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lv-tl-item.res { --c: var(--c-res); }
.lv-tl-item.news { --c: #a9a4ff; align-self: start; }
.lv-tl-item::after { content: ""; position: absolute; left: 50%; width: 1px; height: 14px; background: rgba(169, 164, 255, .35); }
.lv-tl-item.res::after { top: 100%; }
.lv-tl-item.news::after { bottom: 100%; }
.lv-tl-item:hover, .lv-tl-item:focus-visible { background: rgba(255, 255, 255, .09); border-color: color-mix(in srgb, var(--c) 60%, var(--navy-line)); transform: translateY(var(--lift, -3px)); outline: none; }
.lv-tl-item.news:hover, .lv-tl-item.news:focus-visible { --lift: 3px; }
.lv-tl-item.is-dim { opacity: .2; }
.lv-tl-node { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #15142a; border: 2px solid var(--lav); }
.lv-tl-date { align-self: center; justify-self: center; margin-top: 30px; font: 400 1rem/1 var(--hand); color: var(--text-dim); white-space: nowrap; }
.lv-tl-date em { font: 700 0.58rem/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--purple); border-radius: 999px; padding: 3px 6px; margin-left: 6px; vertical-align: 2px; }
.lv-tl-week.is-latest .lv-tl-node { width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--lav); box-shadow: 0 0 0 6px rgba(169, 164, 255, .18), 0 0 18px rgba(169, 164, 255, .7); }
.lv-tl-week.is-latest .lv-tl-date { color: #fff; }
.lv-tl-week.is-latest .lv-tl-item { background: rgba(255, 255, 255, .07); }
/* the timeline draws itself left to right */
.lv-js .lv-tl .lv-tl-week::before { transform: scaleX(0); transform-origin: left; }
.lv-js .lv-tl.is-in .lv-tl-week::before { transform: scaleX(1); transition: transform .5s linear calc(var(--i) * .16s); }
.lv-js .lv-tl .lv-tl-week { opacity: 0; translate: 0 10px; }
.lv-js .lv-tl.is-in .lv-tl-week { opacity: 1; translate: 0 0; transition: opacity .5s ease calc(.2s + var(--i) * .16s), translate .6s var(--ease-out) calc(.2s + var(--i) * .16s); }

/* Channel key + the weeks, newest first */
.lv-channels { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; margin: 40px 0 8px; }
.lv-channel { padding: 0 0 16px; border-bottom: 3px solid var(--c); }
.lv-channel.res { --c: var(--c-res); grid-column: 2; }
.lv-channel.news { --c: var(--c-news); grid-column: 3; }
.lv-channel h2 { font: 600 1.35rem/1.2 var(--serif); }
.lv-channel h2 a:hover { color: var(--purple); }
.lv-channel p { font-size: 0.9rem; line-height: 1.55; color: var(--text-mute); margin-top: 4px; }
.lv-more { display: inline-block; margin-top: 8px; font: 600 0.84rem var(--sans); color: var(--purple); }
.lv-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.lv-week { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); column-gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.lv-week-date { position: sticky; top: 92px; align-self: start; }
.lv-week-date b { display: block; font: 400 1.6rem/1.1 var(--hand); color: var(--text-dark); }
.lv-week-date span { font: 500 0.8rem var(--sans); color: var(--text-mute); }
.lv-week-date em { display: inline-block; margin-top: 8px; font: 700 0.6rem/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--purple); border-radius: 999px; padding: 4px 7px; }
.lv-report { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--c); border-radius: 12px; overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s; }
.lv-report.res { --c: var(--c-res); }
.lv-report.news { --c: var(--c-news); }
.lv-report:hover, .lv-report:focus-within { transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(30, 28, 90, .6); }
.lv-report-img { background: #11131f; overflow: hidden; }
.lv-report-img img { width: 100%; aspect-ratio: 1600 / 540; object-fit: cover; transition: transform .7s var(--ease-out); }
.lv-report:hover .lv-report-img img { transform: scale(1.03); }
.lv-report-body { padding: 14px 18px 18px; }
.lv-report-kind { font: 600 0.68rem/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 80%, #1a1f33); }
.lv-report h3 { font: 600 1.18rem/1.28 var(--serif); margin: 5px 0 6px; }
.lv-report h3 a::after { content: ""; position: absolute; inset: 0; }
.lv-report h3 a:hover { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple) 45%, transparent); text-underline-offset: 4px; }
.lv-report-body > p:last-child { font-size: 0.88rem; line-height: 1.55; color: var(--text-mute); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lv-week.is-latest .lv-report h3 { font-size: 1.32rem; }
.lv-week.is-latest .lv-report-body > p:last-child { -webkit-line-clamp: 4; }
.lv-empty { margin: 30px 0; padding: 22px; text-align: center; border: 1px dashed var(--rule); border-radius: 12px; color: var(--text-mute); font: 400 1.15rem var(--hand); }
.lv-empty[hidden] { display: none; }
/* one channel at a time */
.lv-weekly[data-kind="res"] .lv-report.news, .lv-weekly[data-kind="news"] .lv-report.res,
.lv-weekly[data-kind="res"] .lv-channel.news, .lv-weekly[data-kind="news"] .lv-channel.res { display: none; }
.lv-weekly[data-kind] .lv-week, .lv-weekly[data-kind] .lv-channels { grid-template-columns: 150px minmax(0, 1fr); }
.lv-weekly[data-kind] .lv-channel { grid-column: 2; }
.lv-weekly[data-kind] .lv-report { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.lv-weekly[data-kind] .lv-report-img img { height: 100%; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1000px) {
  .lv-lanes.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lv-lanes.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lvj-page { padding: 36px 34px 52px; }
  .lvj-layout { grid-template-columns: minmax(0, 1fr) 200px; gap: 34px; }
  .lv .lvj-lead { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .lv-tl { padding-left: 0; }
  .lv-tl-lane { display: none; }
  .lv-tl-track { grid-auto-columns: 150px; }
  .lv-pinned { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Articles: the sidebar opens up above the contents; the series notes go last */
  .lvj-layout { display: flex; flex-direction: column; gap: 28px; }
  .lvj-side { display: contents; }
  .lvj-tools { order: 1; }
  .lvj-main { order: 2; }
  .lvj-about { order: 3; padding-top: 10px; }
  .lv .lvj-tools .note-filter { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .lv .lvj-tools .note-filter button { width: auto; border: 1px solid var(--j-rule); border-radius: 999px; padding: 7px 11px; }
  .lv .lvj-tools .note-filter button.active { box-shadow: none; background: var(--text-dark); color: #fff; border-color: var(--text-dark); }
  .lvj-tools .lv-search { margin-bottom: 16px; }
  .lvj-tools .lvj-side-head { display: none; }
  .lvj-tools .lv-count { padding-left: 2px; }
}
@media (max-width: 700px) {
  .lv .wrap { padding: 0 18px; }
  .lv-mast { padding: 34px 0 60px; }
  .lv-mast h1 { font-size: 2.15rem; }
  .lv-intro { font-size: 1rem; }
  .lv-lanes, .lv-lanes.four, .lv-lanes.five { grid-template-columns: minmax(0, 1fr); }
  .lv-toolbar { position: relative; top: 0; padding: 10px; }
  .lv-count { order: 3; }
  .lv-everything { order: 4; margin-left: auto; }
  .lv-channels { display: none; }
  .lv-week, .lv-weekly[data-kind] .lv-week, .lv-grp { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .lv-week-date, .lv-grp-label { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .lv-week-date b, .lv-grp-label b { display: inline; font-size: 1.4rem; }
  .lv-grp-label b.topic { font-size: 1.1rem; }
  .lv-week-date em { margin-top: 0; }
  .lv-grp-label span { display: inline; margin-top: 0; }
  .lv-weekly[data-kind] .lv-report { display: flex; }
  .lv .lv-paper { padding-left: 40px; }
  .lv-sheet { padding: 24px 14px 24px 66px; background-image:
    linear-gradient(to right, transparent 50px, var(--paper-margin) 50px, var(--paper-margin) 51px, transparent 51px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 31px, color-mix(in srgb, var(--paper-line) 70%, transparent) 31px, color-mix(in srgb, var(--paper-line) 70%, transparent) 32px); }
  .lv-sheet::before { left: 8px; width: 14px; background-size: 14px 96px; }
  .lv-line::before { left: -54px; width: 30px; }
  .lv-articles { padding-bottom: 48px; }
  .lvj-page { padding: 28px 18px 40px; border-left: 0; border-right: 0; margin: -24px -18px 0; }
  .lvj-head h1 { font-size: 2.05rem; }
  .lv .lvj-entry, .lv .lvj-entry.co { grid-template-columns: minmax(0, 1fr) 84px; gap: 14px; }
  .lv .lvj-entry.co { grid-template-columns: minmax(0, 1fr) 104px; }
  .lv .lvj-entry .note-title { font-size: 1.1rem; }
  .lv .lvj-entry .toc-abstract { font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .lvj-pair { grid-template-columns: minmax(0, 1fr); }
  .lv .lvj-lead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lv .lvj-lead .note-title { font-size: 1.45rem; }
}

/* Reduced motion: no slides or draws, everything in place */
@media (prefers-reduced-motion: reduce) {
  .lv-js .lv [data-reveal]:not(.is-in) { opacity: 1; }
  .lv-js .lv-tl .lv-tl-week { opacity: 1; translate: 0 0; }
  .lv-js .lv-tl .lv-tl-week::before { transform: none; }
}

/* Learn / Analysis switch (notes.html, analysis.html) */
.lv-switch{display:inline-flex;gap:.25rem;margin:.25rem 0 .75rem;padding:.2rem;border:1px solid rgba(91,84,224,.35);border-radius:999px;font:500 .9rem/1 Inter,sans-serif}
.lv-switch a{padding:.45rem .95rem;border-radius:999px;color:#5b54e0;text-decoration:none}
.lv-switch a[aria-current="page"]{background:#5b54e0;color:#fff}
.lv-analysis .lv-pinned:empty::after,.lv-analysis .lv-pinned:not(:has(article))::after{content:"No Analysis Notes yet.";color:#666}