:root{
--background:#ffffff;--foreground:#111111;--accent:#555555;
--hairline:rgba(0,0,0,.12);--hairline-strong:rgba(0,0,0,.25);
--block-border:rgba(0,0,0,.16);--block-bg:rgba(0,0,0,.025);
--hover:rgba(0,0,0,.05);--card-bg:#fafafa;
--font-serif:Georgia,"Merriweather",serif;
--font-sans:"Helvetica Neue",Arial,sans-serif;
/* Legacy aliases — older fragments and inline styles still reference
these names; they resolve to the new tokens. */
--ink:var(--foreground);--muted:var(--accent);--line:var(--hairline);
--bg:var(--background);--card:var(--card-bg);--blue:var(--foreground);
--radius:12px;
--sent:#b42318;--got:#067647;
}
@media (prefers-color-scheme: dark){
:root{
--background:#111111;--foreground:#eeeeee;--accent:#aaaaaa;
--hairline:rgba(255,255,255,.14);--hairline-strong:rgba(255,255,255,.3);
--block-border:rgba(255,255,255,.16);--block-bg:rgba(255,255,255,.04);
--hover:rgba(255,255,255,.1);--card-bg:#1a1a1a;
--sent:#f97066;--got:#32b67a;
}
/* Active/selected states need no dark overrides here: their base
rules pair background:var(--foreground) with color:var(--background),
so the pair inverts coherently in both schemes. (The #111 overrides
that used to sit in this block lost on source order to the later
base rules and never took effect — Batch E removed them.) */
/* Team-coloured node titles (baked TEAM_COLORS fills) are unreadable
on the dark background; in dark mode they take the ink colour. */
.graph text tspan:not(.muted){fill:var(--foreground)}
}
*{box-sizing:border-box}
body{font-family:var(--font-serif);
margin:0;color:var(--foreground);background:var(--background);line-height:1.6;
-webkit-font-smoothing:antialiased}
a{color:var(--foreground);text-decoration:underline;text-decoration-thickness:1px;
text-underline-offset:2px;transition:all .2s ease}
a:hover{text-decoration-thickness:2px;background:var(--hover)}
h1{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
h2{font-size:1.75rem;font-weight:700;border-bottom:2px solid var(--foreground);
padding-bottom:.5rem;margin:0 0 1.5rem}
.site-header{position:sticky;top:0;z-index:50;background:var(--background);
border-bottom:1px solid var(--hairline)}
.site-header .inner{max-width:920px;margin:0 auto;padding:1.1rem 2rem;
display:flex;align-items:center;gap:1.5rem}
.site-header .inner-wide{max-width:1200px}
.brand{white-space:nowrap;display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--font-serif);font-weight:800;font-size:1.35rem;
color:var(--foreground);letter-spacing:-.02em;text-decoration:none}
.brand:hover{text-decoration:none;background:none}
.brand svg{flex:0 0 auto;display:block}
.site-header nav{margin-left:auto;display:flex;gap:.25rem;
font-family:var(--font-sans);font-size:.95rem;white-space:nowrap}
.site-header nav a{white-space:nowrap;text-decoration:none;padding:.4rem .6rem;
border-radius:6px;opacity:.85;color:var(--foreground)}
.site-header nav a:hover{background:var(--hover);opacity:1;text-decoration:none}
.nav-single{display:flex;align-items:center;gap:.25rem}
.nav-single .nav-primary{display:flex;gap:.25rem}
.nav-more{position:relative}
.nav-more summary{cursor:pointer;list-style:none;color:var(--foreground);
font-family:var(--font-sans);font-size:.95rem;white-space:nowrap;opacity:.85;
padding:.4rem .6rem;border-radius:6px}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary:hover{background:var(--hover);opacity:1}
.nav-more summary .chev{display:inline-block;transition:transform .15s;font-size:.75em}
.nav-more[open] summary .chev{transform:rotate(180deg)}
.nav-more nav{position:absolute;top:calc(100% + 8px);right:0;background:var(--background);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);padding:8px;display:flex;flex-direction:column;gap:2px;min-width:180px;z-index:200}
.nav-more nav a{display:block;padding:.55rem .8rem;border-radius:6px;opacity:1}.nav-more hr.nav-div{border:0;border-top:1px solid var(--hairline);margin:6px 8px}.row-sources{font-size:.82rem;color:var(--accent);margin-top:6px}.row-sources a{margin-right:6px}
.nav-more nav a:hover{background:var(--hover);text-decoration:none}
.hsrch{position:relative;flex:1;display:flex;justify-content:center;margin-left:0}
.hsrch input{width:min(360px,100%);padding:.55rem .9rem;border:1px solid var(--hairline-strong);border-radius:8px;font-family:var(--font-sans);font-size:.95rem;background:transparent;color:var(--foreground)}
.hsrch input:focus{outline:none;border-color:var(--foreground)}
.hs-results{position:absolute;top:calc(100% + 8px);right:0;width:min(360px,85vw);max-height:62vh;overflow:auto;background:var(--background);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.08);list-style:none;margin:0;padding:6px;z-index:200}
.hs-results li a{display:flex;gap:10px;padding:8px 10px;border-radius:6px;line-height:1.35;font-size:.92rem;text-decoration:none}
.hs-results li a:hover{background:var(--hover);text-decoration:none}
.hs-kind{flex:0 0 52px;font-family:var(--font-sans);font-size:.66rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;padding-top:.22rem}
.hs-main{flex:1 1 auto;min-width:0}
.hs-sub{display:block;color:var(--accent);font-size:.8rem;margin-top:2px}
.hs-toggle{display:none;background:none;border:0;color:var(--foreground);cursor:pointer;
padding:.45rem .55rem;border-radius:6px;line-height:0;opacity:.85}
.hs-toggle:hover{background:var(--hover);opacity:1}
.hs-toggle svg{display:block}
/* Medium widths: the wordmark + full input + nav no longer fit the row,
so at <=1100px viewport the search collapses to a magnifier toggle; the
input opens as an overlay under the masthead. Large widths show the
input by default (base rules); mobile widths (max-width:600px block
below) keep the full-width input row. */
@media(min-width:601px) and (max-width:1100px){
.site-header .inner{position:relative}
.hsrch{flex:0 0 auto;position:static}
.hs-toggle{display:block}
.hsrch input{display:none}
.hsrch.open input{display:block;position:absolute;left:2rem;right:2rem;
top:calc(100% + 10px);width:auto;background:var(--background);z-index:210;
box-shadow:0 10px 24px rgba(0,0,0,.08)}
.hsrch.open .hs-results{left:2rem;right:2rem;width:auto;top:calc(100% + 58px);z-index:210}
}
/* Batch C (2026-11-04): the masthead matches the page's content width
again — narrow (920px) pages get a 920px header — reversing Batch A's
wide-everywhere masthead. A 920px header cannot carry wordmark + 360px
input + nav at ANY desktop width, so for narrow headers the magnifier
regime applies at every width >=601px: the regime keys off the
header's own width (its missing .inner-wide class), not the viewport
alone. Wide (1200px) headers are unchanged by this block. */
@media(min-width:1101px){
.site-header .inner:not(.inner-wide){position:relative}
.site-header .inner:not(.inner-wide) .hsrch{flex:0 0 auto;position:static}
.site-header .inner:not(.inner-wide) .hs-toggle{display:block}
.site-header .inner:not(.inner-wide) .hsrch input{display:none}
.site-header .inner:not(.inner-wide) .hsrch.open input{display:block;position:absolute;left:2rem;right:2rem;
top:calc(100% + 10px);width:auto;background:var(--background);z-index:210;
box-shadow:0 10px 24px rgba(0,0,0,.08)}
.site-header .inner:not(.inner-wide) .hsrch.open .hs-results{left:2rem;right:2rem;width:auto;top:calc(100% + 58px);z-index:210}
}
@media(max-width:600px){
.site-header .inner{flex-wrap:wrap;flex-direction:column;align-items:center;row-gap:10px;padding:14px 24px}
.brand{white-space:nowrap;font-size:1.1rem}
.site-header nav{margin-left:0;width:100%}
.site-header nav.nav-single{margin-left:0;margin-right:0;gap:8px;justify-content:center}
.nav-single .nav-primary{gap:0}
/* Batch E: the full nav (5 primary links + More) overflowed the
390px header by ~41px and, being centered, clipped its first link
off-screen at -17px. Trimmed link padding, gaps and nav type size
in this block only, so the row fits the header with room to spare
and nothing sits off-screen. */
.site-header nav{font-size:.9rem}
.site-header nav a{padding:.4rem .35rem}
.nav-more summary{font-size:.9rem;padding:.4rem .35rem}
.container{padding-left:24px;padding-right:24px}
.hsrch{order:3;width:100%;margin-left:0}
.hsrch input{width:100%}
.hs-results{left:0;right:auto;width:100%}
}
.container{max-width:920px;margin:0 auto;padding:24px 32px 64px;width:100%}
.container-wide{max-width:1200px}
.crumb{margin:20px 0 0;font-family:var(--font-sans);font-size:.9rem;color:var(--accent)}
.crumb a{color:var(--accent)}
.hero{padding:2.5rem 0 .5rem}
.hero h1{font-size:2.8rem;margin:0 0 1rem;letter-spacing:-.03em;line-height:1.1;font-weight:800}
.hero p.tagline{color:var(--accent);font-size:1.2rem;margin:0 0 1.5rem;max-width:62ch;line-height:1.5}
/* Batch F (register item 33): on the pages this batch makes wide, the
hero spans the frame — heroes carrying .hero-full run their subtitle
the full frame width, like the homepage lede (Batch C item 11).
Other pages' heroes keep the measure until the Pass 4 audit. */
.hero-full p.tagline{max-width:none}
/* Pass 4 (item 1): hero titles step down on small screens. This media
query used to sit BEFORE the .hero h1 rule above, so the 2.8rem base
rule won on source order and the shrink never applied — leaderboard
titles wrapped cramped at 390px. It must stay after the base rule. */
@media(max-width:560px){
.hero h1{font-size:2.1rem}
}
.controls{display:flex;gap:.75rem;flex-wrap:wrap;margin:18px 0 24px}
/* Batch I (item 55): the hub filter controls keep the standard
.controls bottom margin (24px, the archive's controls-to-content
gap) instead of the old 12px override, so the first trade row gets
the same breathing room as the site's other control-to-list gaps. */
.controls.list-search{margin:0 0 24px}
.controls.list-search input{flex:1;min-width:200px}
.controls input[type=search],.controls select{font-family:var(--font-sans);font-size:1rem;padding:.7rem .9rem;
border:1px solid var(--hairline-strong);border-radius:8px;background:transparent;min-width:0;color:var(--foreground)}
.controls input[type=search]{flex:2 1 260px}
.controls select{flex:1 1 180px;appearance:none;-webkit-appearance:none;-moz-appearance:none;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555555' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}
.controls input[type=search]:focus,.controls select:focus{outline:none;border-color:var(--foreground)}
/* Mobile: search full-width on its own line, filters 2-per-row.
This must come AFTER the base .controls rules so it wins on mobile. */
@media(max-width:560px){
.controls input[type=search]{flex:1 1 100%}
.controls select{flex:1 1 calc(50% - 6px);min-width:0}
.player-controls input[type=search]{flex:1 1 100%}
.player-controls select{flex:1 1 calc(50% - 6px)}
}
.notable{margin:0 0 28px}
.notable summary{cursor:pointer;font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.notable .notable-hint{font-size:.85rem;font-weight:400;color:var(--accent);margin-left:.6rem}
.notable .lede{color:var(--accent);margin:12px 0 16px;max-width:60rem}
.notable-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.notable-col{background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);padding:18px}
.notable-col h3{margin:0 0 6px;font-size:1rem}
.notable-col ul{list-style:none;margin:0;padding:0}
.notable-col li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--hairline);font-size:.94rem}
.notable-col li.asset-row{display:block}
.notable-col li:first-child{border-top:0;padding-top:4px}
.notable-col .stat{color:var(--accent);font-size:.85rem;white-space:nowrap}
/* Notable-list links take the ledger treatment (2026-11-04): no underline,
a padded hover chip that leaves the text position untouched — the same
pattern as .ledger .what a and the Connected-trees rows. */
.notable-col li a{text-decoration:none;border-radius:6px;
padding:.15rem .5rem;margin:-.15rem -.5rem}
.notable-col li a:hover{background:var(--hover);text-decoration:none}
.notable-col li.asset-row a{display:block}
.tree-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:16px;list-style:none;padding:0;margin:0}
.tree-card{background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);
padding:2rem;
display:flex;flex-direction:column;gap:10px;transition:all .2s ease}
.tree-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.05);border-color:var(--hairline-strong)}
.chip-more-btn{background:none;border:1px solid var(--hairline);border-radius:999px;
padding:.3rem .8rem;font-family:var(--font-sans);font-size:.9rem;color:var(--foreground);cursor:pointer}
.chip-more-btn:hover{background:var(--hover)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);
gap:16px;list-style:none;padding:0;margin:0 0 8px}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}}
.story-card{background:var(--block-bg);border:1px solid var(--block-border);border-left:5px solid var(--foreground);
border-radius:0;padding:2rem}
.story-card h3{margin:0 0 6px;font-size:1.05rem}
.story-card h3 a{color:inherit;text-decoration:none}
.story-card h3 a:hover{color:var(--foreground);background:none}
.story-card p{margin:6px 0 0}
.home-two-col{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:24px 0}
@media(max-width:900px){.home-two-col{grid-template-columns:1fr}}
.related-posts{background:transparent;border:1px solid var(--hairline);border-radius:0;
padding:18px 20px;margin:24px 0}
.related-posts h3{margin:0 0 10px;font-size:1rem}
.related-posts ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.related-posts .meta{display:block;font-size:.8rem;color:var(--accent)}
.hub-side .related-posts{margin:0 0 24px}
.follow-banner{background:var(--block-bg);border:1px solid var(--block-border);border-left:5px solid var(--foreground);
border-radius:0;padding:16px 20px;margin:24px 0}
.follow-banner p{margin:0}
footer .social{margin-top:8px;font-size:.9rem}
.tree-card h2{margin:0;font-size:1.25rem;letter-spacing:-.01em;font-family:var(--font-sans);font-weight:700;border-bottom:none;padding-bottom:0}
.tree-card h2 a{color:var(--foreground);text-decoration:none}
.tree-card h2 a:hover{color:var(--foreground);text-decoration:none;background:none}
/* Batch K (item 2): homepage featured cards — the title link gets a
hover affordance, titles reserve two lines so all three cards'
bodies start at the same height, and meta + action chip pin to the
card bottom. */
.collection-card h2{min-height:3.2em}
.collection-card h2 a:hover{text-decoration:underline}
.collection-card .meta{margin-top:auto;padding-top:.75rem}
.collection-card .card-action{margin:.8rem 0 0}
.tree-card p{margin:0;color:var(--accent);font-size:.9rem}
.meta{color:var(--accent);font-size:.85rem;font-family:var(--font-sans)}
/* Team-hub hero meta lines only (franchise one-liner + eras/links line):
explicit even margins instead of the default ~1em, which stacked
them ~14px apart under the tagline's 24px gap. Scoped via a class
emitted only by team_pages' hero — .meta itself is unchanged and
shared by player hubs, the archive, and cards. */
.hero-meta-line{margin:.6rem 0 0}
.fame-line{margin:4px 0 18px;color:var(--accent);font-size:1rem;display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:6px}
/* Pass 3b: the fame block takes the approved mockup's featured-block
treatment (1px block border + 5px left rule on block-bg, as
.story-card/.follow-banner) instead of the pre-redesign rounded card. */
.fame-card{background:var(--block-bg);border:1px solid var(--block-border);border-left:5px solid var(--foreground);padding:1.75rem 2rem;margin:0 0 20px}
.fame-heading{margin:0 0 12px;font-size:1.3rem;font-weight:700;border-bottom:none;padding-bottom:0}
.fame-grid{display:grid;gap:16px;align-items:start}
.fame-grid-1{grid-template-columns:1fr;max-width:280px}
.fame-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fame-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fame-cell{display:flex;flex-direction:column;gap:6px;min-width:0}
.fame-trend-cell .sparkline{margin:2px auto 0 0}
.fame-trend-cell .fame-label{font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.fame-how-line{margin:8px 0 0;font-size:.82rem}
/* Batch C (2026-11-04): the trending sidebar is FLAT — no card box and
no gray item boxes inside it. It is a headed hairline list in the
site's ledger language: a 2px-ruled heading (the section-head pattern
at sidebar scale), rows split by hairlines, name left, meta right
(the pageview sparkline until the 2026-11-05 trade-impact rework,
the anchor-trade meta since); the leaderboard link under the rows
is a .chip. */
.trending-widget{margin:24px 0;width:100%;box-sizing:border-box}
.trending-widget h3{margin:0;font-size:1.25rem;border-bottom:2px solid var(--foreground);padding-bottom:.5rem}
.trend-grid{display:flex;flex-direction:column}
.trend-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
padding:.85rem 0;border-bottom:1px solid var(--hairline);min-width:0}
.trend-name{font-weight:600;color:var(--foreground);text-decoration:none;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
padding:.2rem .5rem;margin-left:-.5rem;border-radius:6px}
.trend-name:hover{background:var(--hover);text-decoration:none}
.trend-meta{flex:0 0 auto;color:var(--accent);font-size:.82rem;font-family:var(--font-sans);
font-variant-numeric:tabular-nums;white-space:nowrap}
.trending-widget .meta{margin:14px 0 0}
@media(max-width:600px){.trending-widget{margin:16px 0}}
@media(max-width:600px){.fame-grid-3,.fame-grid-2{grid-template-columns:1fr}.fame-grid-1{max-width:none}}
/* Pass 3b: fame cells stack like the mockup — eyebrow label over a
large value; the detail stays behind the info tooltip. */
.fame-stat{display:inline-flex;flex-direction:column;gap:2px}
.fame-stat-label{font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.fame-stat-main{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.fame-stat-value{font-weight:700;color:var(--foreground);font-size:1.5rem;line-height:1.15}
.fame-sep{opacity:.55}
.fame-how{font-size:.82rem;color:var(--accent);text-decoration:underline;text-decoration-color:var(--hairline);text-underline-offset:2px;white-space:nowrap}
.fame-trend-inline{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.fame-trend-label{font-size:.85rem}
@media(max-width:600px){.fame-trend-inline{flex-basis:100%;margin-top:4px}}
.fame-how:hover{color:var(--foreground);text-decoration-color:var(--foreground)}
.fame-info-wrap{position:relative;display:inline-flex;cursor:pointer;outline:none;border-radius:4px}
.fame-info{color:var(--accent);font-size:.95rem;line-height:1;font-weight:400}
.fame-info-wrap:hover .fame-info,.fame-info-wrap:focus .fame-info{color:var(--foreground)}
.fame-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);width:max-content;max-width:min(230px,calc(100vw - 32px));background:var(--foreground);color:var(--card-bg);font-size:.82rem;font-weight:400;line-height:1.55;letter-spacing:0;text-transform:none;padding:10px 13px;border-radius:8px;opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:30;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.18);white-space:normal;word-wrap:break-word;overflow-wrap:break-word}
.fame-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--foreground)}
.fame-info-wrap:hover .fame-tip,.fame-info-wrap:focus .fame-tip,.fame-info-wrap:focus-within .fame-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.sparkline{display:block;margin:0 auto}
td.spark{text-align:center;min-width:90px}
.trend-badge{display:inline-block;margin-left:6px;padding:.18rem .6rem;font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--foreground);background:transparent;border:1px solid var(--hairline-strong);border-radius:999px;vertical-align:middle;white-space:nowrap}
/* Edge-aware shift: JS sets an absolute left and adds .tip-shifted when the
centered tooltip would overflow the viewport. Kill the -50% translate so
the JS-computed position is exact; arrow follows --tip-arrow. */
.fame-tip.tip-shifted{transform:translateY(4px)}
.fame-info-wrap:hover .fame-tip.tip-shifted,.fame-info-wrap:focus .fame-tip.tip-shifted,.fame-info-wrap:focus-within .fame-tip.tip-shifted{transform:translateY(0)}
.fame-tip.tip-shifted::after{left:var(--tip-arrow,50%);transform:translateX(-50%)}
@media (max-width:400px){.fame-tip{max-width:190px}}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
border-bottom:2px solid var(--foreground);padding-bottom:.5rem;margin:3.5rem 0 1.5rem;flex-wrap:wrap}
.section-head h2{margin:0;font-size:1.75rem;letter-spacing:-.01em;border-bottom:none;padding-bottom:0}
/* The head link's -.6rem side margins cancel its chip padding (the
.crumb a treatment): on the heading line the link is right-pinned,
so its text ends flush with the section's right edge; wrapped under
the heading on phones it is left-pinned, so its text starts flush
with the left edge. Without the left margin the wrapped link's text
sat .6rem in from the edge (Peter, 2026-11-06). */
.section-head a{font-family:var(--font-sans);font-size:.95rem;font-weight:600;text-decoration:none;
padding:.4rem .6rem;margin-left:-.6rem;margin-right:-.6rem;border-radius:6px;color:var(--foreground)}
.section-head a:hover{background:var(--hover);text-decoration:none}
.section-sub{color:var(--accent);font-family:var(--font-sans);font-size:.92rem;margin:0 0 12px}
/* Batch E: a section-head followed by a subtitle was carrying the full
1.5rem margin under its rule AND the subtitle's own margins, so the
stack (rule -> subtitle -> first row) ran far looser than the 1.5rem
a subtitle-less section puts between its rule and first row. The
head's margin collapses to .75rem when a subtitle follows; the
subtitle's own 12px then separates it from the first row. */
.section-head:has(+ .section-sub){margin-bottom:.75rem}
@media(max-width:640px){
/* When the archive link wraps under the heading it keeps the head's
negative right margin and reads as floating; square it up. */
.section-head{row-gap:.2rem}
.section-head a{margin-right:0}
}
.action-link{font-family:var(--font-sans);font-size:.95rem;font-weight:600;text-decoration:none;
padding:.4rem .6rem;border-radius:6px;color:var(--foreground);display:inline-block}
.action-link:hover{background:var(--hover);text-decoration:none}
.crumb a,.hero-player-link a{font-family:var(--font-sans);font-size:.95rem;font-weight:600;text-decoration:none;
padding:.4rem .6rem;margin-left:-.6rem;border-radius:6px;color:var(--foreground);display:inline-block}
.crumb a:hover,.hero-player-link a:hover{background:var(--hover);text-decoration:none}
.eyebrow{font-family:var(--font-sans);font-size:.8rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent);margin:0 0 1rem}
.trade-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 6px}
.pager[hidden]{display:none}
.pager button{padding:.4rem .9rem;border:1px solid var(--hairline-strong);border-radius:999px;background:transparent;color:var(--foreground);font-family:var(--font-sans);font-size:.9rem;cursor:pointer}
.pager button:hover{background:var(--hover)}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager .pg-info{font-family:var(--font-sans);font-size:.85rem;color:var(--accent)}
/* Batch K (item 9): archive/hub trade rows lay out across the full frame
like the team-hub ledger rows — date column left, headline flexing,
badges and team chips on the same line — instead of stacking every
element in the left ~quarter of the row. Same markup as before
(trade_row / TRADES_JS renderRow), pure CSS restructure. */
.trade-row{background:transparent;border:0;border-bottom:1px solid var(--hairline);border-radius:0;
padding:1rem 0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1.25rem;
content-visibility:auto;contain-intrinsic-size:auto 84px}
.trade-row a.row-link{color:var(--foreground);display:block;text-decoration:none}
.trade-row a.row-link:hover{text-decoration:none;background:none}
.trade-row .row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0;
order:2;flex:1 1 18rem}
.trade-row .row-head{font-weight:700;font-size:1.1rem}
.trade-row .row-badges{order:3}
a.chip{text-decoration:none;color:var(--foreground)}
a.chip:hover{background:var(--hover);text-decoration:none}
.trade-row p{margin:0;color:var(--accent);font-size:.92rem;order:5;flex:1 1 100%}
.trade-row .row-partof{order:3;flex:1 1 100%;font-size:.8rem;color:var(--accent);margin-top:.2rem}
.trade-row .row-tree{font-size:.8rem;color:var(--accent);margin-top:0;
order:1;flex:0 0 7.5rem;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.trade-row .chips{order:4;margin-top:0}
.card .chips{margin-top:.5rem}
.chips-more{display:contents}
.chips-more[hidden]{display:none}
.share{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:14px;font-family:var(--font-sans)}
.share-label{font-size:.85rem;color:var(--accent)}
.follow-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:14px;font-family:var(--font-sans)}
.follow-label{font-size:.85rem;color:var(--accent)}
/* Mobile: the follow chip row stays on one line (short label +
tighter chips instead of Instagram wrapping to a second line). */
@media(max-width:34rem){
.follow-row{flex-wrap:nowrap;gap:.35rem}
.follow-row .follow-label{white-space:nowrap}
.follow-row .chip{white-space:nowrap;padding:.3rem .55rem;font-size:.85rem}
}
.trade-row .row-context{order:5;flex:1 1 100%;font-size:.9rem;color:var(--accent)}
/* Player-hub rows (2026-11-06 redesign): the context line moves INSIDE
the headline block, under the headline link, in small muted sans —
the row reads date | move headline + "from the …" line | chips
instead of a full-width strip under everything. Hub rows only; the
class is set solely on the player-hub call path. */
.trade-row.hub-row .row-top{flex-direction:column;align-items:flex-start;
gap:.15rem;justify-content:center}
.trade-row.hub-row .row-context{order:0;flex:none;font-family:var(--font-sans);
font-size:.85rem}
/* Hub-row badge + spacing revision (2026-11-06, approved mockup):
treatment A — the badge rides inside the headline link at the end of
the headline text (margin-left .5rem), and the headline -> muted
line gap grows .15rem -> .5rem. Both apply above 700px only: at
<=700px Peter ruled the current production mobile layout stays
exactly as-is, so there the in-link badge is hidden and the
.row-badges flex item renders as today; above 700px the reverse. */
.trade-row.hub-row .row-link .impact-badges{margin-left:.5rem}
@media(min-width:701px){
.trade-row.hub-row .row-badges{display:none}
.trade-row.hub-row .row-top{gap:.5rem}
}
@media(max-width:700px){
.trade-row.hub-row .row-link .impact-badges{display:none}
}
/* Mid band (~701-1150px): hub-row chips take their own full line
starting at the headline column's left edge (7.5rem date column +
1.25rem column gap), 1rem below the muted line, flowing inline —
never wrapped under the date column. Desktop keeps the one-line
layout; <=700px keeps current production behavior. */
@media(min-width:701px) and (max-width:1150px){
.trade-row.hub-row .chips{flex:1 1 100%;padding-left:8.75rem;margin-top:1rem}
}
@media (max-width:700px){
.trade-row.hub-row[data-badges=""] .chips{margin-top:.5rem}
/* Same collapse on the plain (non-hub) rows — archive, year archives:
without a .row-badges block their chips sit 0px under the headline
line (and 0px under the "Part of ..." line on searching-mode swap
rows). Scoped to non-ledger lists: team-hub ledger rows carry their
chips inside .row-sub, whose own margin already provides the gap,
and tree cards are a different family (uniform gap, no badges
dependence). Badge rows and >=701px are untouched. */
.trade-list:not(.ledger) .trade-row[data-badges=""] .chips{margin-top:.5rem}
}
.share-btn{display:inline-block;padding:.4rem .9rem;border:1px solid var(--hairline-strong);border-radius:999px;
background:transparent;color:var(--foreground);font-size:.9rem;cursor:pointer;text-decoration:none}
.share-btn:hover{background:var(--hover);text-decoration:none}
button.share-btn{font-family:var(--font-sans)}
.chip{display:inline-flex;align-items:center;font-family:var(--font-sans);font-size:.9rem;
padding:.3rem .8rem;border-radius:999px;border:1px solid var(--hairline);background:transparent;color:var(--foreground)}
.chip .dot{display:none}
.stat-chips{display:flex;gap:2.5rem;flex-wrap:wrap;border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);padding:1rem 0;margin:1.25rem 0 1rem;font-family:var(--font-sans)}
.stat{background:transparent;border:0;padding:0;font-size:.95rem;color:var(--accent)}
.stat b{color:var(--foreground)}
.ledger{list-style:none;margin:0;padding:0}
.ledger li{display:flex;gap:1.5rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--hairline)}
.ledger li:first-child{padding-top:0}
.ledger .when{font-family:var(--font-sans);font-size:.85rem;color:var(--accent);flex:0 0 7.5rem}
.ledger .what{font-size:1.1rem}
.ledger .what a{text-decoration:none;padding:.2rem .5rem;margin-left:-.5rem;border-radius:6px;display:inline-block}
.ledger .what a:hover{background:var(--hover);text-decoration:none}
/* Batch C: the Latest-trades return line — one muted sans line under a
homepage ledger headline naming what the headliner's old club
received in the deal (emitted by build_index only). */
.ledger .ret{display:block;font-family:var(--font-sans);font-size:.85rem;
color:var(--accent);margin-top:.2rem}
@media(max-width:640px){
.ledger li{flex-direction:column;gap:.15rem}
.ledger .when{flex:none}
/* First row only (Peter, 2026-11-06): stacked, the first row's date
sat 12px under the Latest trades dek — the dek's bottom margin
alone, because the shared first-child rule zeroes the row's top
padding — while the desktop grid restores 1rem there. .625rem
opens the first row 22px under the dek; later rows unchanged. */
.ledger li:first-child{padding-top:.625rem}
}
#vc-chart-wrap,#vc-prob-wrap,#vc-round-wrap{background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);padding:12px;margin:12px 0}
#vc-chart,#vc-prob,#vc-round{width:100%;height:auto;display:block}
.vc-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:.92rem}
.vc-controls select{font:inherit;padding:4px 8px;border-radius:6px;border:1px solid var(--hairline-strong);background:transparent;color:var(--foreground)}
.card{background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);
padding:18px 20px;margin:14px 0}
.card.flash{outline:3px solid var(--foreground);transition:outline-color 1.2s}
/* Chapter flash (2026-11-07): the graph JS flashes trade cards on
arrival (?trade=), map clicks and search activation, and on tree
pages the element carrying a trade id is the chapter — but the
flash rule above was never chapter-scoped, so a flashed chapter
got a 3px outline at offset 0 while its horizontal padding is 0:
the heavy frame sat directly on the text (Peter's phone report:
headline text clipped at the outline's edge, no padding, no
design language). Chapters take the site's chip treatment
instead: hover tint, a hairline-weight inset frame, rounded
corners. The 1rem horizontal padding is cancelled by -1rem
margins, so the text never moves and the frame stands 1rem
clear of it at every width; the container's 32px gutter absorbs
the wider box with 16px to spare. The chapter's straight bottom
hairline is suppressed while flashed so it does not cut across
the rounded frame. True .card targets keep the outline rule. */
.card.chapter.flash{outline:none;background:var(--hover);
box-shadow:inset 0 0 0 1px var(--hairline-strong);border-radius:var(--radius);
border-bottom-color:transparent;
padding-left:1rem;padding-right:1rem;margin-left:-1rem;margin-right:-1rem}
.trade-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.trade-head h3{margin:0;font-size:1.06rem;letter-spacing:-.01em}
.impact-badges{display:inline-flex;gap:6px;flex-wrap:wrap}
.hero-badges{margin:.9rem 0 .6rem;display:flex;gap:6px;flex-wrap:wrap}
.hero-bigness{margin:.6rem 0;font-size:.85rem;color:var(--accent)}
.hero-bigness a{color:var(--foreground)}
.hero-bigness .fame-info{font-size:.85rem;vertical-align:-1px}
.hero-bigness .fame-tip{font-size:.82rem;left:auto;right:-8px;transform:translateY(4px)}
.hero-bigness .fame-tip::after{left:auto;right:14px;transform:none}
.hero-bigness .fame-info-wrap:hover .fame-tip,.hero-bigness .fame-info-wrap:focus .fame-tip{transform:translateY(0)}
.hero-player-link{margin:.6rem 0;font-size:.85rem}
.hero-player-link a{color:var(--foreground)}
/* Tree hero Variant 2 (Peter, 2026-11-06): badges + Blockbuster score
+ player link collapse into ONE meta line under the lede; the share
controls ride the Trade Custody Map heading line; the follow links
condense into the stat strip. Mobile spacing per addendum 4. */
.meta-line{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;align-items:center;
margin:.6rem 0;font-size:.85rem;color:var(--accent)}
.meta-line a{color:var(--foreground)}
.meta-line .sep{color:var(--hairline-strong)}
.meta-line .hero-bigness{margin:0}
.meta-line .meta-player-link{font-family:var(--font-sans);font-size:.95rem;
font-weight:600;text-decoration:none;color:var(--foreground)}
.meta-line .meta-player-link:hover{text-decoration:underline}
.meta-badges{display:inline-flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.map-head{display:flex;align-items:flex-end;justify-content:space-between;
gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--foreground);
padding-bottom:.5rem;margin:2.2rem 0 .4rem}
.map-head h2{font-size:1.75rem;font-weight:700;margin:0;letter-spacing:-.01em;
border-bottom:none;padding-bottom:0}
.map-share{display:flex;align-items:center;gap:.5rem;font-family:var(--font-sans);
padding-bottom:.15rem}
.map-share .lbl{font-size:.85rem;color:var(--accent)}
.follow-inline{margin-left:auto;font-size:.95rem;color:var(--accent)}
.follow-inline a{color:var(--foreground);text-decoration:none}
.follow-inline a:hover{text-decoration:underline}
.sum-lede{color:var(--accent);font-size:1.2rem;margin:0 0 .45rem;line-height:1.5}
/* Hero context (items 190/192, 2026-11-07): the title-gap context
text renders inside the .terms disclosure layer (lead paragraph of
"Full trade terms", or a compact "Trade context" expander), never
as an open paragraph — the old .hero-context rule is gone with
the element it styled. */
.terms{margin:0 0 1.5rem}
.terms summary{font-family:var(--font-sans);font-size:.88rem;font-weight:600;
color:var(--accent);cursor:pointer;width:max-content}
.terms summary:hover{color:var(--foreground)}
.terms .terms-body{font-size:.95rem;color:var(--accent);line-height:1.55;
margin:.65rem 0 0}
@media(max-width:700px){
.meta-line{flex-direction:column;align-items:flex-start;gap:.6rem}
.meta-line .sep{display:none}
.hero .stat-chips{padding:.75rem 0;margin:1rem 0 .75rem;gap:.6rem 1.5rem}
.map-head{margin-top:1.6rem;row-gap:.5rem}
.map-share{margin-left:0}
.follow-inline{margin-left:0}
}
.drafted-notes{margin:.45rem 0}
.drafted-note{margin:.45rem 0;font-size:.85rem;color:var(--accent)}
.drafted-note a{color:var(--foreground)}
/* Connected trees (density pass, 2026-11-04): drafted-with cross-links as
one collapsed section — summary carries title + count, notes grouped by
direction as ledger rows. Shared by tree pages and player hubs. */
.connected{margin:1.5rem 0 .5rem;border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);padding:1rem 0}
.connected summary{cursor:pointer}
.cx-title{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.cx-hint{font-family:var(--font-sans);font-size:.85rem;font-weight:400;
color:var(--accent);margin-left:.6rem}
.cx-sub{font-family:var(--font-sans);font-size:.75rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
margin:1.1rem 0 .3rem}
.cx-list{list-style:none;margin:0;padding:0}
.cx-list li{padding:.45rem 0;border-bottom:1px solid var(--hairline)}
.cx-list li:last-child{border-bottom:none}
.card-badges{margin:.6rem 0 0}
.row-badges{margin:.4rem 0}
.impact-label{font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:.18rem .6rem;border-radius:999px;border:1px solid var(--hairline-strong);color:var(--foreground);
background:transparent;cursor:help;white-space:nowrap}
.impact-badges .impact-label:first-child,.hero-badges .impact-label:first-child{border:2px solid var(--foreground);padding:.12rem .55rem}
/* The redesign drops the badges' colour fills (gold/blue/green/purple):
all four keys share the monochrome outline above; significance is
carried by border weight (first badge) and registry order. The per-key
rules stay so every BADGE_DEFINITIONS key remains explicitly styled. */
.impact-label.impact-hof,.impact-label.impact-icon,.impact-label.impact-top-pick,.impact-label.impact-firsts{background:transparent}
/* Homepage tree cards put the badges inside the
after the title
link; as a row of their own they never crowd a wrapped title. */
.tree-card h2 .impact-badges{display:flex;margin-top:.45rem}
.trade-date{color:var(--accent);font-size:.85rem}
.trade-id{color:var(--accent);font-size:.78rem}
.leg{border-top:1px dashed var(--hairline);padding:10px 0 8px}
.leg:first-of-type{border-top:none}
.leg-team{margin-bottom:6px}
.move{display:flex;gap:10px;margin:5px 0;font-size:.95rem}
.move .k{flex:0 0 88px;font-family:var(--font-sans);font-size:.7rem;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--accent);padding-top:4px}
.move.sent .k{color:var(--sent)}
.move.got .k{color:var(--got)}
.move em{color:var(--accent)}
.src{font-size:.82rem;color:var(--accent);margin-top:8px;word-break:break-all}
.src a{color:var(--accent);text-decoration:underline}
h2.section{margin-top:2.2rem;scroll-margin-top:72px}
.graph-wrap{border:1px solid var(--block-border);border-radius:0;background:var(--block-bg);
overflow:hidden;
user-select:none;-webkit-user-select:none}
/* Custody map framing (Batch F, 2026-11-04): tree pages are wide
(1200px) pages, so the map section is plain frame content — the
Batch B/D breakout (a 100vw-sized, margin-shifted island that left
the content column) is abolished; the map's edges are the page
frame's edges by construction. */
@media(max-width:700px){
/* Batch D: iPhone Safari has no Fullscreen API — remove the fullscreen
control on mobile viewports instead of leaving a dead button. The
toolbar is a wrapping flex row, so display:none leaves no gap. */
.graph-fs{display:none}
}
.graph-wrap:fullscreen{background:var(--background);overflow:auto}
.graph-wrap:-webkit-full-screen{background:var(--background);overflow:auto}
.graph-wrap,.card,h2.section{scroll-margin-top:72px}
.hub-partners,.dc-section,.trades-header{scroll-margin-top:72px}
/* Batch K (item 7): breathing room above the team-hub "All trades"
heading, and scroll targets (hub heading, archive trade list) land
fully below the sticky header after year/decade/pagination jumps. */
.trades-header{margin-top:2.2rem;scroll-margin-top:88px}
#trade-list{scroll-margin-top:88px}
@media(max-width:640px){
/* The sticky header grows to ~151px when the search wraps (<=~610px). */
.trades-header,#trade-list{scroll-margin-top:164px}
}
/* The map stage owns every touch drag (touch hotfix, 2026-11-04):
touch-action:none at all widths — pan-y let the browser claim
vertical/diagonal drags for page scroll (pointercancel mid-pan).
Page scroll starts on content outside the map. */
svg.graph{display:block;width:100%;cursor:grab;touch-action:none;background:
radial-gradient(circle at 1px 1px,var(--hairline) 1px,transparent 1px);background-size:22px 22px}
svg.graph:active{cursor:grabbing}
.node rect{fill:var(--background);stroke:var(--hairline-strong);stroke-width:1.5}
.node{cursor:pointer}
.node:hover rect{stroke:var(--foreground)}
.node.active rect{fill:var(--foreground);stroke:var(--foreground)}
.node.active text{fill:var(--background)}
/* The team-coloured title segments are tspans carrying their own baked
fill attributes, which the text-level rule above cannot reach — on
the active card (fill:var(--foreground)) they kept their team colours
and the dark ones vanished (HOU navy on the black card, 1.13:1). In
the active state every segment takes the card's paired foreground
(var(--background): 18.9:1 on the light-scheme card, 16.3:1 on the
dark-scheme one). The selector outranks the dark-mode tspan override
too, which otherwise puts var(--foreground) text on the dark mode
active card whose fill is that same var(--foreground). */
.graph .node.active text tspan{fill:var(--background)}
.node text{font-size:12.5px;fill:var(--foreground);pointer-events:none}
.node .t{font-weight:700}
.edge{stroke:var(--accent);stroke-width:1.6}
.edge.re-traded{stroke:var(--accent);stroke-dasharray:5 4}
.hint{font-size:.86rem;color:var(--accent);margin:.5rem 0 .8rem}
.node.asset-player rect{fill:var(--background);stroke:var(--foreground);stroke-width:2}
.node.asset-pick rect{fill:var(--background);stroke:var(--hairline-strong);stroke-width:2}
.node.asset-dead rect{stroke:var(--accent);stroke-dasharray:6 4}
.node .sub{font-size:11px;fill:var(--accent)}
.node .outcome{font-size:11.5px;font-weight:700;fill:var(--foreground)}
.node .chain{font-size:11.5px;font-weight:700}
.node .chain .muted{font-style:italic;font-weight:400;fill:var(--accent)}
.node.dim{opacity:.45}
.edge.dim{opacity:.45}
.node.traced rect{stroke:var(--foreground);stroke-width:3.5}
.edge.traced{stroke:var(--foreground);stroke-width:3}
.node.foreign rect:not(.bridge-halo){stroke:var(--foreground);stroke-width:2;stroke-dasharray:7 4}
.foreign-tag{font-size:10.5px;font-weight:700;fill:var(--foreground);pointer-events:none}
.bridge-halo{fill:none;stroke:var(--accent);stroke-width:2.5;pointer-events:none}
.graph-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 10px;
padding:14px 16px 0}
.gsearch{position:relative;flex:1 1 220px;min-width:180px}
.gsearch input{width:100%;padding:8px 14px;border:1px solid var(--hairline-strong);border-radius:999px;
font-family:var(--font-sans);font-size:.9rem;background:var(--background);color:var(--foreground)}
.gsearch-results{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--background);
border:1px solid var(--hairline);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);
z-index:30;overflow:hidden}
.gsearch-results button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
padding:9px 12px;border:0;background:none;cursor:pointer;font-size:.88rem;color:var(--foreground)}
.gsearch-results button:hover{background:var(--hover)}
.gsearch-results button span{font-size:.76rem;color:var(--accent)}
.gview{display:flex;border:1px solid var(--hairline-strong);border-radius:999px;overflow:hidden;background:var(--background)}
.gview button{border:0;background:var(--background);padding:8px 14px;font-family:var(--font-sans);font-size:.85rem;font-weight:600;
cursor:pointer;color:var(--foreground)}
.gview button.on{background:var(--foreground);color:var(--background)}
.gzoom{display:flex;border:1px solid var(--hairline-strong);border-radius:999px;overflow:hidden;background:var(--background)}
.gzoom button{border:0;background:var(--background);padding:8px 14px;font-size:1rem;font-weight:700;
cursor:pointer;color:var(--foreground);line-height:1}
.gzoom button:hover{background:var(--hover)}
.graph-reset,.graph-fs{border:1px solid var(--hairline-strong);
background:var(--background);border-radius:999px;padding:8px 14px;font-family:var(--font-sans);font-size:.85rem;font-weight:600;
color:var(--foreground);cursor:pointer}
.graph-reset:hover,.graph-fs:hover{background:var(--hover)}
.graph-conn{border:1px solid var(--hairline-strong);
background:var(--background);border-radius:999px;padding:8px 14px;font-family:var(--font-sans);font-size:.85rem;font-weight:600;
color:var(--foreground);cursor:pointer;
display:inline-flex;align-items:center;gap:.35rem;user-select:none}
.graph-conn input{accent-color:var(--foreground);margin:0;cursor:pointer}
.graph.hide-foreign .node.foreign,
.graph.hide-foreign .edge.foreign-edge,
.graph.hide-foreign .edge-label.foreign-edge{display:none}
.edge-label{font-size:10px;fill:var(--accent);paint-order:stroke;stroke:var(--background);
stroke-width:3px;pointer-events:none}
.legend{font-family:var(--font-sans);font-size:.86rem;color:var(--accent);margin:.2rem 0 .8rem;padding:0 16px}
.legend .sw{display:inline-block;width:16px;height:11px;border:2px solid;
border-radius:3px;vertical-align:-1px;margin:0 5px 0 14px}
.legend .sw.first{margin-left:0}
.sw.player{border-color:var(--foreground)}
.sw.pick{border-color:var(--hairline-strong)}
.sw.dead{border-color:var(--accent);border-style:dashed}
.sw.foreign{border-color:var(--foreground);border-style:dashed}
.journey{margin:.5rem 16px 16px;border:1px solid var(--hairline);border-radius:var(--radius);
background:var(--card-bg);padding:.8rem 1rem;font-size:.9rem}
.journey[hidden]{display:none}
.j-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.3rem}
.j-head b{font-size:1rem}
.j-head b a{color:var(--foreground)}
.j-head b a:hover{color:var(--foreground)}
.j-kind{font-family:var(--font-sans);font-size:.72rem;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.j-close{margin-left:auto;border:1px solid var(--hairline-strong);background:var(--background);border-radius:999px;
width:28px;height:28px;font-size:1rem;line-height:1;cursor:pointer;color:var(--accent);flex:none}
.j-close:hover{background:var(--hover);color:var(--foreground)}
.j-steps{list-style:none;margin:.3rem 0 0;padding:0}
.j-steps li{padding:.32rem 0;border-top:1px solid var(--hairline);font-size:.88rem;line-height:1.5}
.j-steps li:first-child{border-top:0}
.j-date{color:var(--accent);font-size:.8rem;margin-right:.4rem}
.j-from{color:var(--accent)}
.j-arrow{color:var(--accent);margin:0 .15rem}
.j-via{color:var(--accent);font-size:.8rem;margin-left:.4rem}
.j-tree{color:var(--accent);font-size:.8rem;margin-left:.4rem}
.j-term{color:var(--accent)}
footer{margin-top:5rem;color:var(--accent);font-family:var(--font-sans);font-size:.9rem;border-top:1px solid var(--hairline);padding:2rem 0 3rem}
footer p{margin:0 0 .5rem;line-height:1.6}
.foot-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-serif);
font-weight:800;font-size:1.05rem;color:var(--foreground);margin:0 0 .9rem}
.foot-brand svg{display:block}
.team-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem}
/* Micro-batch item 71 (2026-11-04): the li stretches to its grid
row's height and the card link fills it (flex), so every card in a
row is the row's tallest height even when a name wraps to two
lines; the trade count never wraps and stays pinned at the first
line's baseline while the name wraps freely. */
.team-card{display:flex}
.team-card a{display:flex;flex:1;justify-content:space-between;align-items:baseline;padding:.6rem .8rem;background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);text-decoration:none}
.team-card a:hover{text-decoration:none;border-color:var(--hairline-strong);background:var(--card-bg)}
.team-card .team-name{font-weight:600;min-width:0}
.team-card .meta{white-space:nowrap;flex:0 0 auto;margin-left:.5rem}
.player-index{list-style:none;padding:0;margin:1rem 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.4rem .8rem}
.player-row{font-size:.92rem;padding:.3rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
content-visibility:auto;contain-intrinsic-size:auto 28px}
.player-row a{font-weight:600;color:var(--foreground);text-decoration:none}
.player-row a:hover{color:var(--foreground);text-decoration:underline;background:none}
.faq{margin:1rem 0 2rem}
.faq-item{border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card-bg);padding:.7rem 1rem;margin:.5rem 0}
.faq-item summary{font-weight:600;cursor:pointer;font-size:.95rem}
.faq-item p{margin:.5rem 0 0;color:var(--accent);font-size:.92rem;line-height:1.55}
.hub-nav{display:flex;gap:.25rem;flex-wrap:wrap;font-family:var(--font-sans);font-size:.95rem;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:.6rem 0;margin:1.5rem 0}
.hub-nav a{text-decoration:none;padding:.3rem .6rem;border-radius:6px;color:var(--foreground)}
.hub-nav a:hover{background:var(--hover);text-decoration:none}
.hub-layout{display:grid;grid-template-columns:1fr;gap:28px;margin:20px 0}
@media(min-width:720px){.hub-layout{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.hub-main{min-width:0}
.hub-side{display:flex;flex-direction:column;gap:20px;min-width:0}
.hub-side .hub-biggest,.hub-side .hub-partners{background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);padding:16px 18px}
.hub-years h2,.hub-biggest h2,.hub-partners h2{font-size:1.1rem;margin:0 0 10px;border-bottom:none;padding-bottom:0}
.hub-biggest ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.hub-biggest ol.deal-list,.hub-biggest ol.name-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.hub-biggest .rank{color:var(--accent);font-size:.82rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:1.4em;padding-top:2px;flex-shrink:0}
.deal-list li{border-bottom:1px solid var(--hairline)}
.deal-list li:last-child{border-bottom:0}
.deal-link{display:flex;gap:10px;padding:9px 0;color:var(--foreground);text-decoration:none}
.deal-link:hover{text-decoration:none;background:none}
.deal-link:hover .deal-headline{color:var(--foreground);text-decoration:underline}
.deal-body{display:flex;flex-direction:column;gap:1px;min-width:0}
.deal-headline{font-weight:600;line-height:1.4;color:var(--foreground)}
.deal-star{color:var(--foreground);font-size:.85em}
.deal-date{color:var(--accent);font-size:.82rem}
.name-list li{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--hairline)}
.name-list li:last-child{border-bottom:0}
.name-body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.name-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.name-link{font-weight:600;color:var(--foreground);text-decoration:none}
.name-link:hover{color:var(--foreground);background:none}
.fame-badge{background:transparent;color:var(--foreground);font-family:var(--font-sans);font-size:.78rem;font-weight:700;padding:.18rem .6rem;border:1px solid var(--hairline-strong);border-radius:999px;font-variant-numeric:tabular-nums;white-space:nowrap}
.name-detail{color:var(--accent);font-size:.82rem}
.name-detail a{color:var(--accent)}
.name-detail a:hover{color:var(--foreground)}
.hub-biggest li{line-height:1.45}
.hub-biggest .meta{display:block;margin-top:8px}
.hub-partners ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.hub-partners li{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 0}
.hub-partners .partner-note{font-size:.82rem;line-height:1.45}
/* Pass 3a: team hub ledger rows (mockup-team) + hairline hub FAQ.
The .ledger base (flex row, .when column, mobile stacking) comes from
the pass-2 block above; these rules add the hub row's sub-line and
undo the .ledger link padding inside it. */
.trade-list.ledger .row-head{font-weight:700;font-size:1.1rem}
.trade-list.ledger .row-sub{display:block;margin-top:.35rem;font-size:.85rem;color:var(--accent)}
/* The padding reset is for the row's text links only — scoped with
:not(.chip) since Batch E: unscoped it also zeroed the team chips'
own padding, so chip names sat against their borders. */
.trade-list.ledger .row-sub a:not(.chip){padding:0;margin-left:0}
/* ...and the chips keep the canonical .chip padding: the ledger's
.what a rule (.2rem .5rem + a negative left margin for text links)
would otherwise win over .chip on specificity. */
.trade-list.ledger .row-sub a.chip{padding:.3rem .8rem;margin-left:0}
.trade-list.ledger .row-sub .chips{display:inline-flex;vertical-align:middle}
/* Batch E (mobile): the hub meta line is inline content — chips, the
date/tree link and the sources wrapped mid-line and rode up beside
each other. On phones it becomes a column: chips on their own line,
then the date link, then the sources, with even gaps. */
@media(max-width:640px){
.trade-list.ledger .row-sub{display:flex;flex-direction:column;
align-items:flex-start;gap:.5rem;margin-top:.55rem}
.trade-list.ledger .row-sub .chips{display:flex;flex-wrap:wrap;gap:6px}
.trade-list.ledger .row-sub .row-sources{margin-top:0}
}
.hub-faq .faq-item{border:0;border-bottom:1px solid var(--hairline);border-radius:0;background:transparent;padding:1rem 0;margin:0}
.hub-faq .faq-item summary{font-size:1.05rem;font-weight:700}
/* Batch K (item 8): FAQ answers take their section's full width on every
page type — the 64ch/856px answer caps are removed everywhere. */
/* Pass 3b: player-hub FAQ takes the same borderless details treatment
as the team hubs and the approved player mockup (hairline rows, no
boxes). */
.player-faq .faq-item{border:0;border-bottom:1px solid var(--hairline);border-radius:0;background:transparent;padding:1rem 0;margin:0}
.player-faq .faq-item summary{font-size:1.05rem;font-weight:700}
.hub-partners .plink{border:0;background:none;font:inherit;font-weight:600;color:var(--foreground);cursor:pointer;padding:0;text-align:left}
.hub-partners .plink:hover{text-decoration:underline}
.hub-partners .plink.active{color:var(--foreground);text-decoration:underline}
/* Batch H: partners past the top 5 render hidden behind an expander.
The author display:flex on .hub-partners li would beat the UA
[hidden] rule, so hidden partner items are hidden explicitly. */
.hub-partners li[hidden]{display:none}
.hub-partners .partner-more{margin-top:10px}
.ychip{display:inline-block;padding:.3rem .8rem;border:1px solid var(--hairline);border-radius:999px;background:transparent;font-family:var(--font-sans);font-size:.9rem;color:var(--foreground);cursor:pointer;margin:2px 2px}
.ychip:hover{background:var(--hover)}
.ychip.active{border-color:var(--foreground);font-weight:700}
.ychip .n{color:var(--accent);font-weight:400;font-size:.76rem}
.ychip[hidden]{display:none}
.ychip.yclear{border-style:dashed;border-color:var(--hairline-strong);color:var(--accent);background:transparent}
.dc-section{margin:24px 0}
.dc-tabs{display:flex;gap:6px;margin:12px 0;flex-wrap:wrap}
.dc-tab,.dc-ytab{cursor:pointer}
.dc-tab[aria-selected="true"],.dc-ytab[aria-selected="true"]{background:var(--foreground);color:var(--background);border-color:var(--foreground)}
.dc-board{width:100%;border-collapse:collapse;margin:1rem 0}
.dc-board th,.dc-board td{padding:.5rem;border-bottom:1px solid var(--hairline);text-align:left}
.dc-board th{width:6rem;color:var(--accent);font-weight:600}
.dc-pick{display:inline-block;padding:.18rem .6rem;border:1px solid var(--hairline-strong);border-radius:999px;font-family:var(--font-sans);font-size:.78rem;font-weight:600;margin:1px 2px;background:transparent;color:var(--foreground);white-space:nowrap}
.dc-pick.away,.dc-pick.conditional,.dc-pick.unver{border-style:dashed;color:var(--accent)}
button.dc-pick{cursor:pointer;font-family:var(--font-sans)}
.dc-badge{display:inline-block;padding:.18rem .6rem;border:1px solid var(--hairline-strong);border-radius:999px;font-family:var(--font-sans);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--foreground);background:transparent;white-space:nowrap;margin:1px 2px}
.dc-badge.cond{border-style:dashed;color:var(--accent)}
.dc-trace{font-size:.72rem;color:var(--foreground);text-decoration:none;margin-left:4px;white-space:nowrap}
.dc-trace:hover{text-decoration:underline}
/* Table batch item 66: the chip itself is the trace link now (the
per-chip .dc-trace line is gone from draft_capital.py). */
a.dc-pick{text-decoration:none}
a.dc-pick:hover{border-color:var(--foreground)}
.dc-q{font-weight:700;cursor:help;padding:0 .15rem}
/* Author display rules would beat the UA [hidden] rule (the Batch H
partner-items trap), so cell extras behind an expander are hidden
explicitly. */
.dc-extra[hidden]{display:none}
.dc-more{font-size:.72rem;padding:.14rem .55rem}
.dc-scroll{overflow-x:auto;margin:1rem 0}
/* Batch F: the league board is a wide page now. table-layout:fixed puts
the R1–R7 columns on a consistent grid (chips aligned per column
instead of floating in content-sized columns); cells wrap between
chips rather than overflowing. min-width rises to 56rem so the fixed
round columns still fit a chip + trace link at phone scroll widths.
The Team column is sticky at the left on horizontal scroll: opaque
background in both colour schemes (var(--background) flips with the
scheme) and a hairline right edge drawn as a shadow, which survives
border-collapse where a border on the sticky cell would not. */
.dc-league{width:100%;border-collapse:collapse;min-width:56rem;table-layout:fixed}
.dc-league th,.dc-league td{padding:.45rem .5rem;border-bottom:1px solid var(--hairline);text-align:center;font-size:.88rem}
.dc-league th:first-child{width:19%}
.dc-league th:last-child{width:6%}
.dc-league th:first-child,.dc-league td:first-child{text-align:left;position:sticky;left:0;background:var(--background);box-shadow:1px 0 0 var(--hairline-strong);z-index:1}
.dc-league thead th:first-child{z-index:2}
.dc-league thead th{color:var(--accent);font-weight:600}
.dc-league th[data-sort]{cursor:pointer}
.dc-league th[data-sort]:hover{color:var(--foreground)}
.dc-net{font-weight:700}
.dc-net.pos{color:#15803d}
.dc-net.neg{color:#b91c1c}
.dc-net.zero{color:var(--accent)}
.dc-pop{position:absolute;background:var(--card-bg);border:1px solid var(--hairline);border-radius:8px;padding:8px 12px;font-size:.8rem;max-width:280px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:100}
.dc-legend{font-size:.82rem;color:var(--accent);margin:8px 0}
/* Batch K (item 5): the snapshot card's three column headings share one
treatment — a reserved two-line band, so the chip lists start on the
same baseline at every width even when a heading wraps. At >=900px
the year tabs and the legend share one horizontal row (tabs left,
legend flowing right); they stack on small screens. */
.dc-snapshot h3{font-family:var(--font-sans);font-size:.92rem;letter-spacing:.05em;
text-transform:uppercase;color:var(--muted);line-height:1.45;min-height:2.9em;margin:0 0 8px}
.dc-snapshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
@media(max-width:700px){
/* Single-column snapshot: the h3 two-line band has no neighbouring
column to align with, so it reads as a large empty gap under each
heading (reserved line ~21px + the 8px margin) while the sections
themselves are only the grid's 16px apart — the spacing inverts.
Drop the band so a heading sits 8px above its own list, and let
the row gap carry the section separation at 24px. */
.dc-snapshot h3{min-height:0}
.dc-snapshot-grid{row-gap:24px}
}
.dc-legend .dc-leg{display:block;margin:0 0 .35rem}
@media(min-width:900px){
.dc-head{display:flex;align-items:flex-start;gap:2rem}
.dc-head .dc-tabs{flex:0 0 auto;margin:0}
.dc-head .dc-legend{flex:1 1 auto;margin:0;text-align:right}
.dc-head .dc-legend .dc-leg{display:inline;margin:0}
.dc-head .dc-legend .dc-leg + .dc-leg::before{content:"·";margin:0 .45em}
}
/* ===== Pass 2: homepage + tree pages ===== */
/* Homepage featured-story strip (2026-11-05; demoted the same day at
Peter's direction — the first cut read as a second headline
competing with the hero): one line of furniture at body size,
driven by data/featured.json (see featured_strip_html). A small
caps label, then the story's headline as an ordinary text-size
link; the entry's dek is never rendered — it rides on the link as
its title attribute. One hairline under the strip (the masthead's
own rule closes the top), nothing else. A small pushpin glyph
leads the line — Peter's addition, so the strip reads as a
pinned-for-now item, temporary by suggestion rather than
permanent furniture. It renders only while an entry's window is
open at build time; with no active entry the homepage carries no
strip markup at all, and the hero keeps its stock padding in
every state. */
.featured-strip{border-bottom:1px solid var(--hairline);margin:0;
padding:.5rem 0 .55rem;font-size:1rem;line-height:1.4}
.featured-strip .fs-pin{color:var(--accent);margin-right:.5em}
.featured-strip .fs-pin svg{display:inline-block;vertical-align:-.18em}
.featured-strip .fs-label{font-family:var(--font-sans);font-size:.72rem;font-weight:700;
letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.featured-strip .fs-sep{color:var(--accent);margin:0 .45em}
.featured-strip a{text-decoration:none}
.featured-strip a:hover{text-decoration:underline}
/* Variant C (2026-11-05, Peter's live iteration on the demoted line):
the same one line inside a content-hugging pill — a fit-content
rounded border in the chip language (1px hairline, 999px radius,
chip-scale padding) instead of the full-width hairline under the
line, and the whole pill is one tap target. The pill is exactly as
wide as its contents plus padding, so it encloses no empty space;
the rest of the row is ordinary page. On narrow screens the
headline wraps inside the pill and the pill grows with it. */
.featured-strip.is-pill{border-bottom:0;padding:.55rem 0 .6rem}
.fs-pill{display:inline-block;max-width:100%;padding:.38rem .9rem;
border:1px solid var(--hairline);border-radius:999px;
color:var(--foreground)}
.featured-strip a.fs-pill:hover{background:var(--hover);
text-decoration:none}
.home-hero{padding-top:4rem}
/* Headline measure widened from the mockup's 16ch (density pass, 2026-11-04):
the mockup's column is 856px wide, production's homepage runs 1136px, so
16ch stranded the headline at ~36% of the measure. 22ch restores the
mockup's roughly-half-measure proportion and sets it in two lines. */
.home-hero h1{font-size:3.2rem;max-width:22ch}
@media(max-width:560px){.home-hero h1{font-size:2.3rem}}
/* Batch C: the homepage lede runs the full hero width — a wide h1, a
narrow lede and centered stats read as three different alignments.
Other .lede uses keep the 56ch measure. */
.home-hero .lede{max-width:none}
.lede{font-size:1.25rem;color:var(--accent);line-height:1.5;margin:0 0 2.5rem;max-width:56ch}
.stats{display:flex;flex-wrap:wrap;gap:1rem 3rem;justify-content:center;
border-top:1px solid var(--hairline);
border-bottom:1px solid var(--hairline);padding:1.1rem 0;margin:2.5rem 0 0;
font-family:var(--font-sans)}
.stats .stat{text-align:center}
.stats .n{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.01em;color:var(--foreground)}
.stats .l{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent);margin-top:.15rem}
/* Batch C: the homepage hero search is the page's primary surface (the
masthead search is suppressed on the homepage), so it is composed as
ONE control group — a single 2px ink outline wrapping the input and
the team select, split by a hairline — taller and in larger type than
the shared .controls rows the hub filters use. Styling only: same
elements, ids, placeholder and INDEX_JS behavior. The magnifier is a
background glyph on the input, accent ink (lighter in dark mode, like
the select's arrow). */
.home-hero .controls{gap:0;border:2px solid var(--foreground);border-radius:12px;
overflow:hidden;background:var(--background)}
.home-hero .controls input[type=search]{border:0;border-radius:0;
padding:1rem 1.1rem 1rem 3rem;font-size:1.15rem;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23555555' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.3 16.3 L22 22'/%3E%3C/g%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:1.05rem center;background-size:20px 20px}
.home-hero .controls select{border:0;border-radius:0;
border-left:1px solid var(--hairline-strong);
padding:1rem 2.6rem 1rem 1.1rem;font-size:1.15rem}
.home-hero .controls input[type=search]:focus,.home-hero .controls select:focus{outline:none}
.home-hero .controls:focus-within{box-shadow:0 0 0 3px var(--hover)}
@media (prefers-color-scheme: dark){
.home-hero .controls input[type=search]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23aaaaaa' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.3 16.3 L22 22'/%3E%3C/g%3E%3C/svg%3E")}
}
/* Mobile: the group stacks — the select goes under the input and the
divider hairline turns horizontal. (The generic <=560px .controls
rules already give the input a full row; the select needs the same
here rather than its half-row share.) */
@media(max-width:560px){
.home-hero .controls select{flex:1 1 100%;border-left:0;border-top:1px solid var(--hairline-strong)}
}
/* Batch C: when INDEX_JS swaps the featured section for search results,
the results take the same 2rem top margin the featured section's
heading has (Batch G moved it off the panel onto the "Featured"
section-head), so the gap below the hero stats strip is identical
in the default and post-search layouts (.5rem hero bottom padding
+ 2rem either way). */
#search-results{margin-top:2rem}
#no-results{margin-top:2rem}
/* Team-query tiering (2026-11-06): when the homepage search identifies
a team, results render in tiers inside the same results grid — a
full-width tier heading, the team-hub card first, then root-party
trees, later-trade trees, and pick-connected trees. The heading,
note and more-line items span the whole grid row. Values ported
from the approved discovery mockup. */
#search-results .tier-head{grid-column:1/-1;display:flex;align-items:baseline;
gap:.8rem;border-bottom:2px solid var(--foreground);padding-bottom:.5rem;
margin:1.2rem 0 0}
#search-results .tier-head:first-child{margin-top:0}
#search-results .tier-head h2{font-size:1.5rem;margin:0;letter-spacing:-.01em;
border-bottom:none;padding-bottom:0}
#search-results .tier-head .count{font-family:var(--font-sans);
font-size:.85rem;color:var(--accent)}
#search-results .tier-note{grid-column:1/-1;color:var(--accent);
font-size:.95rem;margin:0;max-width:78ch}
#search-results .hub-card{border:2px solid var(--foreground);
background:var(--background)}
#search-results .hub-card h2{font-family:var(--font-serif)}
#search-results .hub-card p{color:var(--accent);font-size:.95rem;margin:.4rem 0 0}
#search-results .hub-card .go{font-family:var(--font-sans);font-weight:600;
font-size:.95rem}
#search-results .hub-card .go a{color:var(--foreground)}
#search-results .tier-tag{display:inline-block;align-self:flex-start;
font-family:var(--font-sans);
font-size:.7rem;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;border:1px solid var(--hairline-strong);
border-radius:999px;padding:.1rem .55rem;color:var(--accent);
margin-bottom:.5rem}
#search-results .why-match{color:var(--accent);font-size:.92rem;margin:.6rem 0 0}
#search-results .more-line{grid-column:1/-1;font-family:var(--font-sans);
font-size:.9rem;color:var(--accent);border:1px dashed var(--hairline-strong);
border-radius:var(--radius);padding:.8rem 1rem}
/* Micro-batch item 65 (2026-11-04): homepage Latest trades / Trending
players alignment. On desktop the two columns become ONE grid with
shared rows (the column wrappers and the trending aside render as
contents, so their children place into the grid): both headings
bottom-align in row 1 so their 2px rules sit on the same line, the
Latest lede occupies row 2 on the left only, and both lists start
together in row 3. Before this, the trending widget's 24px top
margin vs the section head's 3.5rem put Trending 32px higher and
its first row 92px above Latest's first row. The head's 3.5rem top
margin moves onto the container (24px + 56px = 80px) so the gap
above the section is unchanged. Latest rows also get uniform
padding and a floor height: the shared .ledger first-child rule
zeroed the first row's top padding (76.5px band vs 92.5px for the
rest) and a row without a return line would shrink the same way —
every homepage ledger row now takes the full two-line height
(measured 92.5px) regardless of badge/return-line content. Mobile
(<=900px, stacked) is untouched.
Fame-display fix (2026-11-05): the leaderboard chip used to place
in grid-row 4, below the 1fr row 3 whose height the LEFT ledger
sets — so it landed at the bottom of the left column, far below
the five trending rows. fame.py now wraps the list and the chip
in one .trend-body div, which is the single column-2/row-3 grid
item; the chip flows directly under the list inside it at the
base .meta margin (14px), the same as stacked flow. */
@media(min-width:901px){
.home-two-col{grid-template-rows:auto auto 1fr;row-gap:12px;margin-top:80px}
.home-two-col .home-col{display:contents}
.home-two-col .trending-widget{display:contents}
.home-two-col .section-head{grid-column:1;grid-row:1;margin:0;align-self:end}
.home-two-col .section-sub{grid-column:1;grid-row:2;margin:0}
.home-two-col ul.ledger{grid-column:1;grid-row:3}
.home-two-col .ledger li{min-height:92.5px}
.home-two-col .ledger li:first-child{padding-top:1rem}
.home-two-col .trending-widget h3{grid-column:2;grid-row:1;align-self:end}
.home-two-col .trend-body{grid-column:2;grid-row:3}
}
/* Batch E: on phones an active homepage search collapses the hero
stats strip, so the results render immediately under the search
controls instead of below the stats — with the keyboard up, the
results sat entirely off-screen and the search felt dead. INDEX_JS
toggles .searching on the hero while a query/team filter is active
and scrolls the hero under the masthead on the inactive->active
transition. Desktop never collapses (Batch C spacing stands). */
@media(max-width:600px){
.home-hero.searching .stats{display:none}
}
/* Browse-by-team strip (Form B, decided 2026-11-06): a one-line
disclosure at the foot of the homepage hero — mockup of record
mockup-browse-by-team-mobile-2026-11-06.html (closed strip 61px at
390px). While a homepage search is active the strip hides at every
width on the same .searching state, so results sit directly under
the controls; the stats bar keeps its phone-only rule above.
2026-11-07 fix (Peter, screenshots): the strip's top margin was
1.25rem against a uniform 40px section rhythm everywhere else in
the hero (lede->controls, controls->stats, strip->Featured all
40px measured) — margin-top is now 2.5rem, so the collapsed strip
sits evenly in the rhythm; idle footprint 61px -> 81px at 390px.
Same pass: .tb-chip takes text-decoration:none — the strip defined
its own chip class instead of the shared .chip and dropped the
a.chip{text-decoration:none} companion rule, so the global
a{underline} showed through on every team name. */
.home-hero.searching .teambrowse{display:none}
.teambrowse{margin:2.5rem 0 0}
.tb-toggle{display:flex;align-items:baseline;gap:.6rem;width:100%;
background:none;border:0;border-bottom:1px solid var(--hairline);
padding:.65rem 0 .8rem;cursor:pointer;font-family:var(--font-sans);
text-align:left;color:var(--foreground)}
.tb-toggle .tb-name{font-size:.95rem;font-weight:700;letter-spacing:.02em}
.tb-toggle .tb-count{font-size:.85rem;color:var(--accent)}
.tb-toggle .tb-chev{margin-left:auto;font-size:.9rem;color:var(--accent);
transition:transform .15s ease}
.tb-toggle[aria-expanded="true"] .tb-chev{transform:rotate(180deg)}
.tb-panel{padding:.9rem 0 .4rem}
.tb-chips{display:flex;flex-wrap:wrap;gap:8px}
.tb-chip{display:inline-flex;align-items:center;font-family:var(--font-sans);
font-size:.9rem;padding:.3rem .8rem;border-radius:999px;
border:1px solid var(--hairline);color:var(--foreground);white-space:nowrap;
text-decoration:none}
a.tb-chip:hover{background:var(--hover);text-decoration:none}
.tb-note{font-family:var(--font-sans);font-size:.82rem;color:var(--accent);
margin:.7rem 0 0}
/* Batch G2: the featured section is a plain card row — the section
heading's 2rem top margin keeps the Batch C spacing invariant (the
hero-to-section gap the rule measures is identical in the default
and searched layouts), and the section carries the 3.5rem bottom
margin the Batch G panel used to, so the gap down to Latest trades
is unchanged. The Batch G panel composition (lead + side rail
enclosing the cards) and its scoped rules are gone entirely. */
#featured-section .section-head{margin-top:2rem}
#featured-section{margin-bottom:3.5rem}
.badge-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0}
.collection-card .kicker{font-family:var(--font-sans);font-size:.75rem;
text-transform:uppercase;letter-spacing:.05em;color:var(--accent);font-weight:600;display:block}
.essay-list{list-style:none;margin:0;padding:0}
.essay-list li{padding:1.5rem 0;border-bottom:1px solid var(--hairline)}
.essay-list li:first-child{padding-top:0}
.essay-list .date{font-family:var(--font-sans);font-size:.85rem;color:var(--accent);margin:0 0 .35rem}
.essay-list h3{font-size:1.4rem;margin:0 0 .4rem;font-weight:700}
.essay-list h3 a{display:inline-block;text-decoration:none;padding:.3rem .6rem;
margin-left:-.6rem;border-radius:6px}
.essay-list h3 a:hover{background:var(--hover);text-decoration:none}
.essay-list .summary{margin:0;color:var(--accent);font-size:1.05rem}
/* Density pass (2026-11-04): on small screens the featured-card blurbs run
6+ lines; clamp to 4 so kicker/title/meta hierarchy survives. The full
text is one tap away on the tree page the card links to. */
@media(max-width:640px){.collection-card>p:not(.meta){display:-webkit-box;
-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}}
/* Chapters replace .card on tree pages only. The article keeps the card
class + data-trade-id so the graph JS content filter (which selects
.card[data-trade-id]) behaves exactly as before; these rules strip the
card chrome back to the hairline chapter treatment. */
/* Batch F: tree pages are wide now, but chapter prose keeps the
readable measure it had in the 920px column (856px content width),
left-aligned inside the frame; the section heading above the
chapters spans the full frame like the other page furniture. */
.chapter{background:transparent;border:0;border-bottom:1px solid var(--hairline);
border-radius:0;padding:1.75rem 0;margin:0}
/* Micro-batch item 70 (2026-11-04): Batch F capped the whole chapter
at 856px, but the receives grid is a two-column DATA layout, not
prose — it now spans the wide frame in two equal columns. The
856px prose cap moves onto the chapter's text elements (date line,
headline, badges, sent lines, sources), which keep the readable
measure; only the grid and the chapter hairline span the frame. */
.chapter .chapter-date,.chapter h3,.chapter .badge-row,
.chapter .sent-line,.chapter .row-sources,
.chapter .chapter-note{max-width:856px}
.chapter:first-of-type{padding-top:0}
.chapter-date{font-family:var(--font-sans);font-size:.85rem;color:var(--accent);margin:0 0 .3rem}
.chapter h3{font-size:1.35rem;margin:0 0 .5rem;font-weight:700}
.chapter h3 a{text-decoration:none;padding:.2rem .5rem;margin-left:-.5rem;
border-radius:6px;display:inline-block}
.chapter h3 a:hover{background:var(--hover);text-decoration:none}
.legs{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.5rem;margin:.75rem 0}
.legs h4{font-family:var(--font-sans);font-size:.75rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--accent);margin:0 0 .4rem;font-weight:700}
.legs ul{list-style:none;margin:0;padding:0;font-size:1.02rem}
.legs li{padding:.25rem 0;border-bottom:1px solid var(--hairline)}
/* Public-notes build (2026-11-07): the fact-bearing note block — the
label reuses the .legs h4 small-caps rule verbatim; body text only,
existing vars, dark-mode safe. */
.chapter-note{margin:.9rem 0 0}
.chapter-note h4{font-family:var(--font-sans);font-size:.75rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--accent);
margin:0 0 .4rem;font-weight:700}
.chapter-note p{margin:0;font-size:1.02rem;line-height:1.55}
.legs li:last-child{border-bottom:none}
@media(max-width:640px){
.legs{grid-template-columns:1fr;gap:1.5rem}
/* Micro-batch item 61 (2026-11-04): on phones the stacked team
blocks sat 16px apart and the chapter's sources footer 12px
(margins collapsed) — tighter than the site's 24px section
rhythm. Both go to 24px at mobile widths; desktop unchanged. */
.chapter .row-sources{margin-top:24px}
}
.sent-line{margin:.5rem 0 0;font-size:.98rem}
.sent-k{font-family:var(--font-sans);font-size:.75rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-right:.4rem}