/* ============================================================================ Dragonfly Insights — Second Chair corpus (Insight Bridge × Dragonfly Thinking) ── insights.css ───────────────────────────────────────────────────────── Section layer for the Insights pages. Extends legal-site.css; adds no new color — position/reach data reads on the slate ramp, with crimson reserved for divergence (the analytically interesting state) and interactive tells. ========================================================================== */ /* ── The six dimension hues ─────────────────────────────────────────────── The corpus records its own six dimensions in data/topics/topics.json, and each one names a canonical --df-lens-* token. These pages run on the Harvard --legal-* system and never load canonical, so the mapping happens here: one place, both themes, rather than hex hardcoded into a figure. Values are canonical's own light and dark pairs, unchanged. This is the header comment's "adds no new color" line stretching, and it is deliberate: the topic field is the one figure on these pages whose subject IS the dimension split, so slate cannot carry it. Nothing else uses these. */ :root { --legal-lens-cap: #0563FA; /* Capability & evaluation */ --legal-lens-prac: #0BAEA3; /* Practice integration & workflow */ --legal-lens-mkt: #FF9413; /* Markets, business models & capital */ --legal-lens-prof: #92448A; /* Profession, expertise & formation */ --legal-lens-gov: #0ABF67; /* Governance, justice & accountability */ --legal-lens-work: #F81369; /* Labour market & workforce transition */ } :root[data-theme="dark"], .theme-dark { --legal-lens-cap: #4d8bff; --legal-lens-prac: #2DD4BF; --legal-lens-mkt: #FBA94B; --legal-lens-prof: #C084CC; --legal-lens-gov: #34D399; --legal-lens-work: #F81369; } /* ── Section rhythm tokens ──────────────────────────────────────────────── This file grew 47 distinct hard-coded pixel values for padding, gap and margin, and seven type sizes inside the explorer's 480px left panel alone. That is why "cramped" was unfixable one selector at a time: every panel was tuned separately, so there was nothing to tune. Two scales carry all of it. The type scale bottoms out at 12px, which is the design system's own --t-label — 10.5px was a size this section invented for itself, and one of its uses failed contrast at 4.34:1. */ :root { --ins-gap-xs: 6px; --ins-gap-sm: 10px; --ins-gap: 16px; --ins-gap-lg: 24px; --ins-gap-xl: 34px; --ins-pad-tight: 14px 18px; --ins-pad: 18px 22px; --ins-pad-loose: 26px 28px; --ins-t-micro: 12px; --ins-t-meta: 13px; --ins-t-ui: 15px; --ins-t-read: 16px; } /* ── Section sub-nav ────────────────────────────────────────────────────── Slim sticky rail under the primary nav. No second brandmark, no filled pill: the active page is told by a crimson underline, matching the site's habit of using color as punctuation rather than as a field. */ .corpus-sub{position:sticky;top:68px;z-index:30;background:var(--bg-page);border-bottom:1px solid var(--border)} .corpus-sub .inner{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;align-items:stretch;gap:24px;flex-wrap:wrap;min-height:50px} .corpus-sub .items{display:flex;align-items:stretch;gap:24px;flex-wrap:wrap} .corpus-sub a{display:flex;align-items:center;font-size:14.5px;font-weight:500;color:var(--text-faint);text-decoration:none;padding:0;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s ease,border-color .15s ease} .corpus-sub a:hover{color:var(--text-heading)} .corpus-sub a[aria-current="page"]{color:var(--text-display);font-weight:600;border-bottom-color:var(--legal-crimson)} .corpus-sub a .ext{color:var(--text-faint);margin-left:5px;font-size:11px} /* ── Page lede ────────────────────────────────────────────────────────── */ /* Longhand, not shorthand: .lede is also .wrap, whose 40px inset must survive. */ .lede{padding-top:64px;padding-bottom:8px} .lede .eyebrow-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-bottom:24px} .lede h1{font-size:clamp(34px,4.6vw,54px);font-weight:600;letter-spacing:-0.025em;line-height:1.06;max-width:19ch} .lede h1 em{font-style:italic;color:var(--legal-crimson)} .lede .standfirst{margin-top:26px;max-width:62ch;font-size:19px;line-height:1.6;color:var(--text-muted)} .lede .standfirst code{font-family:var(--legal-sans);font-weight:600;color:var(--text-heading)} /* Two column systems, 52px apart, with nothing mediating: a 706px measure column inside an 1160px container, then a full-bleed strip using every pixel of it. 39% of the lede's width was dead, and the eye read the whole page as cramped because it was pushed left, yanked full-width, then pushed left again. The provenance block is FIXED WORDING, not a fixed position — moving it into the right column spends the void on the thing readers most need to see (who made this) and gives the page one grid instead of two. Only ledes that HAVE a provenance block become two-column: the MCP and course ledes have nothing to put in column two, and a narrowed title buys them nothing. */ /* ── Figures strip ────────────────────────────────────────────────────── */ .figs{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-panel);overflow:hidden;margin-top:var(--space-block)} .figs .f{padding:26px 22px;border-right:1px solid var(--border)} .figs .f:last-child{border-right:0} .figs .n{font-family:var(--legal-serif);font-size:38px;font-weight:600;line-height:1;color:var(--text-display);letter-spacing:-0.02em} .figs .l{margin-top:10px;font-size:12.5px;line-height:1.45;color:var(--text-faint)} .figs .f.live .n::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--legal-crimson);vertical-align:middle;margin-left:8px;margin-bottom:12px} /* Compact inline stat rail (method / partner footers) */ .statrail{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .statrail span{display:inline-flex;align-items:baseline;gap:7px;padding:8px 13px;border:1px solid var(--border);border-radius:var(--radius-badge);background:var(--bg-panel);font-size:13px;color:var(--text-faint)} .statrail span b{font-family:var(--legal-serif);font-size:17px;font-weight:600;color:var(--text-display)} /* ── The two partners ───────────────────────────────────────────────────── Insight Bridge builds the structure; Dragonfly works it. The block is a 1px-gap grid rather than two floating cards, because the point being made is that these are two halves of one thing rather than a pair of logos. */ .partners{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;margin-top:34px} .partner{background:var(--bg-panel);padding:28px 30px;display:flex;flex-direction:column} .partner .porg{font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--legal-crimson)} .partner h3{font-family:var(--legal-serif);font-size:23px;font-weight:600;letter-spacing:-0.01em;color:var(--text-display);margin:12px 0 0} .partner .prole{margin-top:7px;font-size:13px;font-weight:600;color:var(--text-heading);line-height:1.5} .partner p{margin:16px 0 0;font-size:15px;line-height:1.65;color:var(--text-muted);flex:1} .partner .plinks{margin-top:22px;display:flex;gap:20px;flex-wrap:wrap;font-size:14px} @media(max-width:820px){.partners{grid-template-columns:1fr}} /* ── Tool cards ───────────────────────────────────────────────────────── */ .tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px} .tools--3{grid-template-columns:repeat(3,minmax(0,1fr))} .tool{display:flex;flex-direction:column;gap:9px;padding:22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-panel);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease} .tool:hover{border-color:var(--legal-crimson-20);box-shadow:var(--shadow-card)} .tool b{font-family:var(--legal-serif);font-size:19px;font-weight:600;color:var(--text-display)} .tool span{font-size:14px;line-height:1.55;color:var(--text-muted)} /* ── Family list (overview) ───────────────────────────────────────────── */ .fam-list{display:flex;flex-direction:column;border-top:1px solid var(--border)} .fam{display:grid;grid-template-columns:132px 1fr 200px;gap:36px;align-items:start;padding:34px 8px;border-bottom:1px solid var(--border);text-decoration:none;transition:background .15s ease} .fam:hover{background:var(--bg-subtle)} .fam .idx{font-family:var(--legal-serif);font-size:15px;font-weight:600;color:var(--legal-crimson);letter-spacing:0.02em} .fam .idx small{display:block;margin-top:8px;font-family:var(--legal-sans);font-size:11.5px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);line-height:1.7} .fam h3{font-size:23px;font-weight:600;letter-spacing:-0.015em;margin-bottom:12px;max-width:26ch} .fam p{margin:0;font-size:15.5px;line-height:1.65;color:var(--text-muted);max-width:62ch} .fam .go{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:13.5px;font-weight:600;color:var(--text-heading);padding-top:4px} .fam:hover .go,.fam:hover h3{color:var(--legal-crimson)} /* ── Acknowledgment block ─────────────────────────────────────────────── */ .credit{margin-top:96px;padding-top:34px;border-top:1px solid var(--border);display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap} .credit .k{font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint);width:180px;flex:none;padding-top:3px} .credit p{margin:0;max-width:62ch;font-size:15.5px;line-height:1.7;color:var(--text-muted)} /* ── Long-form corpus prose (families, method) ────────────────────────── */ .prose{max-width:70ch} .prose p{font-size:17.5px;line-height:1.75;color:var(--text-body);margin:0 0 24px} .prose p.intro{font-size:19px;color:var(--text-muted);line-height:1.7} .prose h2{font-size:31px;font-weight:600;letter-spacing:-0.02em;margin:0 0 22px;max-width:24ch} .prose h3{font-size:21px;font-weight:600;letter-spacing:-0.01em;margin:48px 0 18px} .prose h4{font-family:var(--legal-sans);font-size:15px;font-weight:600;color:var(--text-heading);margin:0 0 10px;letter-spacing:0} .prose ul,.prose ol{margin:0 0 24px;padding-left:22px} .prose li{font-size:17px;line-height:1.7;color:var(--text-body);margin-bottom:14px} .prose li b{color:var(--text-heading);font-weight:600} .prose a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .15s ease,text-decoration-color .15s ease} .prose a:hover{color:var(--legal-crimson);text-decoration-color:var(--legal-crimson)} .prose em{font-style:italic} /* Source slug — the record's own identifier, kept verbatim */ .slug{font-size:13.5px;font-weight:500;color:var(--text-heading);background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-xs,3px);padding:1px 6px;text-decoration:none;white-space:nowrap;transition:border-color .15s ease,color .15s ease} .slug:hover{color:var(--legal-crimson);border-color:var(--legal-crimson-20)} /* Cluster name — a proposition, opens the cluster */ .cl{font-weight:600;color:var(--text-heading);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;text-decoration-thickness:1.5px} .cl:hover{color:var(--legal-crimson);text-decoration-color:var(--legal-crimson)} /* Pull quote — verbatim, attributed to its slug */ .pull{margin:34px 0;padding:0 0 0 24px;border-left:3px solid var(--legal-crimson)} .pull p{font-family:var(--legal-serif);font-size:23px;line-height:1.45;color:var(--text-display);margin:0 0 14px;font-weight:500} .pull cite{font-style:normal;font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-faint)} /* Family header block inside the long read */ .fam-head{margin:0 0 30px;padding-top:8px} .fam-head .rule{height:2px;background:var(--legal-crimson);width:56px;margin-bottom:22px} .fam-head .meta{font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:16px} /* 88px, not 76px: --space-section (96px) is the between-section value that already works on the overview, and fam-read was the only long-read rhythm on the section running tighter than the tokens — on the page carrying the most continuous prose. */ section.fam-read{padding-top:88px;padding-bottom:88px;border-top:1px solid var(--border)} section.fam-read:first-of-type{border-top:0} /* ── Numbered pipeline steps (method) ─────────────────────────────────── */ .steps{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--border);margin-top:8px} .step{display:grid;grid-template-columns:76px 1fr;gap:28px;padding:26px 8px;border-bottom:1px solid var(--border)} .step .no{font-family:var(--legal-serif);font-size:26px;font-weight:600;color:var(--legal-crimson);line-height:1} .step h4{font-size:17px;font-family:var(--legal-serif);font-weight:600;color:var(--text-display);margin:0 0 9px} .step p{margin:0;font-size:16px;line-height:1.7;color:var(--text-muted);max-width:66ch} /* Numbered limits — same rhythm, slate numeral (a caveat, not a stage) */ .step.limit .no{color:var(--text-faint);font-size:22px} /* ── Explorer ─────────────────────────────────────────────────────────── */ .exp-panel{border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-panel);overflow:hidden;margin-top:26px} .exp-panel .ph{display:flex;align-items:baseline;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg-subtle);flex-wrap:wrap} .exp-panel .ph b{font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-heading)} .exp-panel .ph span{font-size:13px;color:var(--text-faint)} .legend{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-faint)} .legend i{display:inline-flex;align-items:center;gap:7px;font-style:normal} .legend i::before{content:"";width:11px;height:11px;border-radius:2px;background:var(--k)} /* .cl-row itself is declared once, in the EXPLORER WORKSPACE block below. An earlier `1fr 240px 54px` grid used to be declared here as well and lost to the later one — 60 lines of this file were unreachable, including a DIFFERENT grid template, which is the kind of thing the next person to tune the index edits and watches do nothing. The cluster flags live here because they are the only part of that block the later one never redeclared. */ .exp-note{padding:16px 20px;font-size:12.5px;line-height:1.6;color:var(--text-faint);background:var(--bg-subtle);border-top:1px solid var(--border)} /* ── Code (MCP page — the one place a mono face appears) ──────────────── */ .code{background:var(--df-slate-950,#0f172a);color:#e2e8f0;border-radius:var(--radius-md);padding:18px 20px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.65;margin:0 0 24px} .urlbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-subtle);margin-bottom:28px} .urlbar .lb{font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint)} .urlbar .u{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:var(--text-heading);word-break:break-all} .urlbar .cp{margin-left:auto;font-size:13px;font-weight:600;color:var(--legal-crimson);border:1px solid var(--legal-crimson-20);background:none;border-radius:var(--radius-sm);padding:7px 13px;cursor:pointer;font-family:inherit} .urlbar .cp:hover{background:var(--legal-crimson-08)} .client{margin-bottom:36px} .client h4{font-family:var(--legal-serif);font-size:19px;font-weight:600;color:var(--text-display);margin:0 0 12px} .tool-group{margin-top:34px} .tool-group .gl{font-size:var(--t-label);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--legal-crimson);margin-bottom:14px} .tool-rows{border-top:1px solid var(--border)} .tool-row{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:14px 8px;border-bottom:1px solid var(--border-soft)} .tool-row .tn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:var(--legal-crimson);word-break:break-all} .tool-row .td{font-size:15px;line-height:1.6;color:var(--text-muted)} /* ── Lens cards (the chain, moved here from the visualization suite) ────── The essay cards carry raster thumbnails. The lens maps deliberately do not: a screenshot of an interactive map goes stale the moment the data moves, and a stale screenshot of a data artefact is a claim about the data. Each lens card carries a small inline-SVG motif of its own mark grammar instead — a network, a matrix, a tree — drawn from currentColor so it works in both themes and never disagrees with the page it points at. */ .lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media (max-width:980px){.lens-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.lens-grid{grid-template-columns:1fr}} .lens-card{display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease} .lens-card:hover{box-shadow:var(--shadow-card);border-color:var(--legal-crimson-20)} .lens-card:focus-visible{outline:2px solid var(--legal-crimson);outline-offset:2px} .lens-motif{height:108px;display:grid;place-items:center;flex-shrink:0;background:var(--bg-subtle);border-bottom:1px solid var(--border);color:var(--legal-crimson);position:relative} .lens-motif svg{width:100%;height:100%;display:block} /* These two asked for var(--legal-mark-2, monospace) as a TYPEFACE. The --legal-mark-* tokens are crimson shades (#6E1020 / #8F1728 / #A51C30), and because --legal-mark-2 IS defined the `monospace` fallback never fired — the declaration resolved to a colour, was invalid, and was dropped. So every card numeral and every facts row has always rendered in the inherited proportional face at 11px with .08em tracking, which is the one combination the size was never chosen for. Now a real mono token, at the 11.5px this file uses for every other label. */ .lens-motif .lens-num{position:absolute;top:10px;left:12px;font-family:var(--legal-mono);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--text-faint)} .lens-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px} .lens-body .meta-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap} .lens-body h3{font-size:20px;font-weight:600;letter-spacing:-0.01em;margin-bottom:10px} .lens-body p{font-size:14.5px;color:var(--text-muted);line-height:1.6;margin:0 0 16px} .lens-body .read{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--link)} .lens-card:hover .read{color:var(--legal-crimson)} /* Facts strip on a card — corpus counts, so a reader knows the size of the thing before they open a 500 KB map. */ .lens-facts{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 16px;font-family:var(--legal-mono);font-size:11.5px;color:var(--text-faint)} .lens-facts b{color:var(--text-heading);font-weight:700} /* The scenarios card has to do two things at once: click through as a whole, like every other card, AND offer its three sibling views. It cannot be an — an inside an is invalid and the browser auto-closes the outer one at the first inner link, which visibly split this card in two. So it stays a
and the heading's link is STRETCHED over the whole card with a pseudo-element; the three view links sit above that overlay on their own stacking context and keep their individual targets. */ .lens-card--multi{position:relative} .lens-card--multi:hover{box-shadow:var(--shadow-card);border-color:var(--legal-crimson-20)} .lens-card--multi:focus-within{border-color:var(--legal-crimson-20);box-shadow:var(--shadow-card)} .lens-body h3 a{color:inherit;text-decoration:none} .lens-body h3 a::after{content:"";position:absolute;inset:0;z-index:1} .lens-card--multi:hover .lens-body h3 a{color:var(--legal-crimson)} .sub-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;position:relative;z-index:2} .sub-links a{font-size:12.5px;font-weight:500;text-decoration:none;color:var(--link);border:1px solid var(--border);border-radius:var(--radius-badge,4px);padding:4px 10px;transition:border-color .16s,color .16s,background .16s} .sub-links a:hover{color:var(--legal-crimson);border-color:var(--legal-crimson-20);background:var(--legal-crimson-08)} .note-band{border:1px solid var(--border);border-left:3px solid var(--legal-crimson);background:var(--bg-subtle);border-radius:var(--radius-md,6px);padding:18px 22px;margin-top:34px} .note-band p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-muted);max-width:82ch} .note-band strong{color:var(--text-heading)} /* ── Responsive ───────────────────────────────────────────────────────── */ @media(max-width:1080px){ .tools--3{grid-template-columns:repeat(2,minmax(0,1fr))} .figs{grid-template-columns:repeat(3,1fr)} .figs .f{border-bottom:1px solid var(--border)} .figs .f:nth-child(3n){border-right:0} .tools{grid-template-columns:repeat(2,1fr)} } @media(max-width:820px){ .tools,.tools--3{grid-template-columns:1fr} .corpus-sub{position:static} .corpus-sub .inner{padding:10px 20px} .fam{grid-template-columns:1fr;gap:14px} .fam .go{justify-content:flex-start} .fam .idx small{display:inline;margin-left:12px} .figs{grid-template-columns:repeat(2,1fr)} .figs .f:nth-child(3n){border-right:1px solid var(--border)} .figs .f:nth-child(2n){border-right:0} .step{grid-template-columns:1fr;gap:10px} .tool-row{grid-template-columns:1fr;gap:6px} .credit .k{width:auto} } /* ══════════════════════════════════════════════════════════════════════════════ CORPUS FIGURES Every figure on these pages is drawn from the corpus's own counts as inline SVG or CSS bars in the site's own tokens — no raster imagery. The rule the lens maps already follow applies here: a picture on a page about evidence is a claim about the evidence, so it has to be made of the evidence. Slate carries the quantity; crimson marks only the thing being pointed at. ══════════════════════════════════════════════════════════════════════════ */ .cfig { margin: 0; padding: 26px 28px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); } .cfig + .cfig { margin-top: var(--ins-gap-lg); } .cfig figcaption { display: flex; flex-direction: column; gap: 7px; margin-bottom: 22px; } .fig-label { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--legal-crimson); } .fig-read { font-family: var(--legal-serif); font-size: 19px; font-weight: 600; letter-spacing: -0.012em; color: var(--text-display); line-height: 1.3; max-width: 46ch; } .fig-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border-soft); font-size: 13.5px; line-height: 1.65; color: var(--text-faint); max-width: 84ch; } /* Figure grid — two figures side by side where they earn it */ .fig-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .fig-pair .cfig + .cfig { margin-top: 0; } @media (max-width: 900px) { .fig-pair { grid-template-columns: 1fr; } } /* ── Ramp: labeled horizontal bars (era, voice) ──────────────────────────── */ .ramp { display: flex; flex-direction: column; gap: 9px; } .ramp-row { display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr) 62px; gap: 16px; align-items: center; } .ramp--voice .ramp-row { grid-template-columns: minmax(0, 27ch) minmax(0, 1fr) 62px; } .ramp-k { font-size: 13px; line-height: 1.35; color: var(--text-body); } .ramp-k small { display: block; font-size: 11px; color: var(--text-faint); margin-top: 1px; } .ramp-bar { height: 16px; background: var(--bg-hover); border-radius: 2px; overflow: hidden; } .ramp-bar i { display: block; height: 100%; background: var(--df-slate-400, #94a3b8); border-radius: 2px; } .ramp-bar i.hot { background: var(--df-slate-600, #475569); } .ramp-bar i.thin { background: var(--legal-crimson); } .ramp-n { text-align: right; font-family: var(--legal-serif); font-size: 16px; font-weight: 600; color: var(--text-heading); line-height: 1.1; } .ramp-n small { display: block; font-family: var(--legal-sans); font-size: 10.5px; font-weight: 500; color: var(--text-faint); margin-top: 3px; } @media (max-width: 640px) { .ramp-row, .ramp--voice .ramp-row { grid-template-columns: minmax(0, 1fr) 54px; row-gap: 5px; } .ramp-bar { grid-column: 1 / -1; } } /* ── Stack: one bar, six segments ─────────────────────────────────────────── */ .stack { display: flex; height: 34px; border-radius: 3px; overflow: hidden; background: var(--bg-hover); } .stack i { display: block; height: 100%; background: var(--df-slate-400, #94a3b8); border-right: 1px solid var(--bg-panel); min-width: 2px; } .stack i.contest { background: var(--legal-crimson); } .stack i:first-child { background: var(--df-slate-500, #64748b); } .stack-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 15px; font-size: 12.5px; color: var(--text-faint); } .stack-key .key::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--df-slate-400, #94a3b8); margin-right: 7px; } .stack-key .key.contest::before { background: var(--legal-crimson); } .stack-key b { color: var(--text-heading); font-weight: 700; margin-left: 3px; } /* ── Family shape: one bar per family, one scale ─────────────────────────── It was two bars per family, each normalized to its OWN series maximum on a shared baseline with no axis — so 53 clusters and 554 sources drew the same height, and 11 clusters drew taller than 37 sources. One derived quantity (sources per cluster) needs one bar and one scale; the raw pair stays under the column so nothing left the page. */ .fs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: end; } .fs-col { display: flex; flex-direction: column; gap: 12px; text-decoration: none; padding: 6px 4px; border-radius: var(--radius-sm, 4px); transition: background .15s ease; } .fs-col:hover { background: var(--bg-subtle); } .fs-bars { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 150px; } .fs-bars i { position: relative; width: 26px; max-width: 100%; border-radius: 2px 2px 0 0; min-height: 4px; } .fs--single .fs-bars i { width: 72px; } .fs-bars i b { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-family: var(--legal-serif); font-size: 14px; font-weight: 600; color: var(--text-heading); } .fs-s { background: var(--df-slate-600, #475569); } .fs-col:hover .fs-s { background: var(--legal-crimson); } .fs-k { text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } .fs-k small { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--text-faint); } .fs-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; font-size: 12.5px; color: var(--text-faint); } .fs-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; } .fs-legend .k-s::before { background: var(--df-slate-600, #475569); } /* ── Scrutiny grid: 106 cells ─────────────────────────────────────────────── */ .scrut { display: grid; grid-template-columns: repeat(auto-fill, minmax(16px, 1fr)); gap: 5px; } .scrut i { display: block; aspect-ratio: 1 / 1; border-radius: 2px; background: var(--df-slate-500, #64748b); border: 1px solid transparent; } /* A hollow cell is told ONLY by its border, so that border is a graphical object under WCAG 1.4.11 and owes 3:1 against the panel behind it. slate-400 measured 2.56:1 on white — and hollow is 53 of the 106 cells, i.e. half the figure. slate-500 clears it in both themes (4.76:1 light, 3.44:1 dark). */ .scrut i.sv { background: transparent; border-color: var(--df-slate-500, #64748b); } .scrut i.un { background: var(--legal-crimson); border-color: var(--legal-crimson); } .scrut i.sv.un { background: transparent; border-color: var(--legal-crimson); } .scrut-key { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; font-size: 12.5px; color: var(--text-faint); } .scrut-key span { display: flex; align-items: center; gap: 9px; } .scrut-key .k { width: 11px; height: 11px; border-radius: 2px; flex: none; border: 1px solid transparent; } .scrut-key .k.solid { background: var(--df-slate-500, #64748b); } .scrut-key .k.hollow { background: transparent; border-color: var(--df-slate-500, #64748b); } .scrut-key .k.crim { background: var(--legal-crimson); } .scrut-key b { color: var(--text-heading); font-weight: 700; margin-left: auto; font-family: var(--legal-serif); } /* ── Reach curve ──────────────────────────────────────────────────────────── */ .curve svg { width: 100%; height: 132px; display: block; overflow: visible; } .curve-fill { fill: var(--legal-crimson-08, rgba(165,28,48,.08)); } .curve-line { fill: none; stroke: var(--legal-crimson); stroke-width: 1.4; vector-effect: non-scaling-stroke; } .curve-mark { stroke: var(--df-slate-400, #94a3b8); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; } .curve-ax { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 11.5px; color: var(--text-faint); } .curve-ax span:nth-child(2) { text-align: center; } .curve-ax span:last-child { text-align: right; } /* ══════════════════════════════════════════════════════════════════════════════ SOURCE REGISTER ══════════════════════════════════════════════════════════════════════════ */ /* NOT sticky. It was, at top:118px — which put it over the facet row directly below it, so the register loaded with its own Voice chips hidden behind the filter box. Two stacked sticky bars (site nav + section sub-nav) are already as much fixed chrome as this page can carry. */ .reg-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-panel); } .reg-controls input[type="search"] { flex: 1 1 300px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-page); color: var(--text-body); font-family: inherit; font-size: 15px; } .reg-controls input[type="search"]:focus { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } .reg-controls .count { font-size: 13px; color: var(--text-faint); white-space: nowrap; } .facets { display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 16px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .facets .fgroup { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; } .facets .flabel { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); margin-right: 4px; } .chip { font-size: 12.5px; font-weight: 500; color: var(--text-muted); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-badge, 4px); padding: 5px 11px; cursor: pointer; font-family: inherit; transition: all .14s ease; } .chip:hover { border-color: var(--legal-crimson-20); color: var(--text-heading); } .chip[aria-pressed="true"] { background: var(--legal-crimson); border-color: var(--legal-crimson); color: #fff; } .chip b { font-weight: 600; opacity: .7; margin-left: 5px; } /* 1,011 rows at 122px each is a 108,649px page, and the 15 facet chips and the filter box scroll out of reach after 132px. The controls stay non-sticky — see the note above; two stacked sticky bars is genuinely the ceiling here — so the way back to them is one floating element OUTSIDE the type flow rather than a third fixed band across the top. */ .reg-jump { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: var(--ins-t-meta); font-weight: 600; color: var(--text-heading); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px; padding: 11px 18px; cursor: pointer; box-shadow: var(--shadow-panel); transition: border-color .15s ease, color .15s ease, opacity .2s ease, transform .2s ease; } .reg-jump:hover { border-color: var(--legal-crimson-20); color: var(--legal-crimson); } .reg-jump[hidden] { display: none; } .reg-jump .n { font-family: var(--legal-serif); font-weight: 600; color: var(--text-faint); } .reg-jump.on { color: var(--legal-crimson); border-color: var(--legal-crimson-20); } @media (max-width: 620px) { .reg-jump { right: 14px; bottom: 14px; padding: 10px 15px; } } @media print { .reg-jump { display: none !important; } } .src { display: grid; grid-template-columns: minmax(0, 1fr) 190px 128px; gap: 20px; align-items: baseline; padding: 15px 20px; border-bottom: 1px solid var(--border-soft); scroll-margin-top: 190px; } .src:target { background: var(--legal-crimson-08, rgba(165,28,48,.08)); box-shadow: inset 3px 0 0 var(--legal-crimson); } .src:last-of-type { border-bottom: 0; } .src-t { font-size: 15px; line-height: 1.45; color: var(--text-heading); font-weight: 500; } .src-t a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline); } .src-t a:hover { color: var(--legal-crimson); border-bottom-color: currentColor; } .src-a { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); font-weight: 400; } .src-slug { display: block; margin-top: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-faint); word-break: break-all; } .src-p { font-size: 12.5px; line-height: 1.5; color: var(--text-faint); } .src-m { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; text-align: right; } .src-m .yr { font-family: var(--legal-serif); font-size: 16px; font-weight: 600; color: var(--text-heading); } .src-m .vc { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); line-height: 1.35; } .src[hidden] { display: none; } /* The way into the record's reading of this work. On the title would be wrong — the title already goes to the publisher, and one element cannot mean two destinations. */ .src-open { margin-top: 3px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-badge); background: var(--bg-panel); font-family: inherit; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: border-color .12s ease, color .12s ease; } .src-open:hover { border-color: var(--legal-crimson-20); color: var(--legal-crimson); } .src-open:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } /* The 541 works the register holds that the corpus index does not. Stated, not left blank: "no reading exists" and "the page is broken" must not look alike. */ .src-gap { margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); opacity: .75; } @media (max-width: 900px) { .src { grid-template-columns: 1fr; gap: 8px; } .src-m { align-items: flex-start; text-align: left; flex-direction: row; gap: 12px; flex-wrap: wrap; align-items: center; } .src-open, .src-gap { margin-top: 0; } } /* ── The register's reading, in a slide-over ─────────────────────────────── Not inline. This page is 108,649px; expanding a row in place would move every row under it and lose the position of a reader 40,000px in. */ .reg-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60; backdrop-filter: blur(1.5px); } .reg-scrim[hidden] { display: none; } .reg-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw); z-index: 61; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-panel); border-left: 1px solid var(--border); box-shadow: -18px 0 48px rgba(15, 23, 42, .16); } .reg-drawer[hidden] { display: none; } .reg-drawer:focus { outline: none; } .reg-drawer-b { padding: 26px 28px 60px; } .reg-drawer h2 { font-family: var(--legal-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.22; color: var(--text-display); margin: 13px 0 0; padding-right: 34px; } .reg-x { position: sticky; top: 0; float: right; margin: 10px 12px 0 0; z-index: 1; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius-badge); background: var(--bg-panel); font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; } .reg-x:hover { border-color: var(--legal-crimson-20); color: var(--legal-crimson); } .reg-x:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } /* The page behind a modal must not scroll under it. */ body.reg-locked { overflow: hidden; } /* The way back out of a reading opened from inside another one. A cluster lists its sources and a source lists its clusters, so the drawer goes two and three deep; without this the only way back is to close it and find the sentence again. It names its destination rather than saying "Back", because after two hops a reader genuinely does not remember which one they came from. Rendered only when there is somewhere back to, so it never sits there inert. */ .rd-back { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: var(--radius-badge); background: var(--bg-subtle); font: inherit; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); text-align: left; cursor: pointer; } .rd-back:hover { border-color: var(--legal-crimson-20); color: var(--legal-crimson); } .rd-back:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } .rd-slug { margin: 10px 0 0; } .rd-slug code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text-faint); word-break: break-all; } a.rd-link { color: var(--text-display); text-decoration: none; border-bottom: 1px solid var(--link-underline); } a.rd-link:hover { color: var(--legal-crimson); border-bottom-color: currentColor; } /* The claims spine and the tag profile fold. Eight claim families and forty tags open at once is a wall; the label and the count are the disclosure. */ .rd-acc { border: 1px solid var(--border-soft); border-radius: var(--radius-md); margin-bottom: 7px; background: var(--bg-subtle); } .rd-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; font-size: 14px; line-height: 1.5; color: var(--text-body); } .rd-acc > summary::-webkit-details-marker { display: none; } .rd-acc > summary:hover { color: var(--legal-crimson); } .rd-n { flex: none; padding: 2px 8px; border-radius: var(--radius-badge); background: var(--bg-hover); font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .rd-n.hi { background: var(--legal-crimson-08); color: var(--crimson-on-wash); } .rd-acc-b { padding: 0 14px 14px; } /* Two ways on, and they are different places: the work itself, and its row in the register with everything filed beside it. Stacked rather than run together, so neither reads as the other's qualifier. */ .rd-out { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .rd-acc-b p { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); margin: 0; max-width: 62ch; } @media (max-width: 620px) { .reg-drawer-b { padding: 20px 18px 50px; } } /* The family-shape figure at the narrow end. Five columns is the right reading — the comparison IS across all five — so the bars and gutters shrink rather than the grid reflowing into a shape that no longer compares. */ @media (max-width: 700px) { .fs { gap: 7px; } .fs-bars { gap: 4px; height: 120px; } .fs-bars i, .fs--single .fs-bars i { width: 30px; } .fs-bars i b { font-size: 12px; top: -16px; } .fs-col { padding: 6px 0; } .fs-k { font-size: 10px; letter-spacing: .03em; } .fs-k small { font-size: 10px; } } @media (max-width: 420px) { .fs-bars { gap: 3px; } .fs-bars i, .fs--single .fs-bars i { width: 22px; } .fs-bars i b { font-size: 11px; top: -14px; } .fs-k { font-size: 9px; } .fs-k small { font-size: 9.5px; } } /* Source slugs are long, hyphenated identifiers set `white-space:nowrap` so they read as one token. At 375px a single slug is wider than the column, and nowrap made the whole families page scroll sideways. Below the tablet breakpoint they are allowed to break — a wrapped identifier is still one identifier; a page that scrolls sideways is not still a page. */ @media (max-width: 820px) { .slug { white-space: normal; overflow-wrap: anywhere; } } /* ══════════════════════════════════════════════════════════════════════════════ EXPLORER WORKSPACE Ranked cluster list on the left, the reading on the right — the shape the corpus app uses, rebuilt in this project's own type and palette so a reader never leaves the series to see what a cluster actually says. ══════════════════════════════════════════════════════════════════════════ */ .dimlegend { display: flex; flex-wrap: wrap; gap: 7px; padding: 14px 20px; border-bottom: 1px solid var(--border); } .dimchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; font-family: inherit; font-size: var(--ins-t-micro); font-weight: 500; color: var(--text-muted); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-badge, 4px); cursor: pointer; transition: all .14s ease; } .dimchip:hover { border-color: var(--legal-crimson-20); color: var(--text-heading); } .dimchip[aria-pressed="true"] { border-color: var(--text-heading); color: var(--text-display); background: var(--bg-subtle); font-weight: 600; } .dimchip b { font-weight: 600; opacity: .55; margin-left: 3px; } .dimchip .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; } /* The six dimensions of the corpus. Muted on purpose: this is a categorical label on a list, not a data encoding competing with the reach bar, and crimson stays reserved for divergence. */ .d-CAP { background: #5B7DB1; } .d-PRAC { background: #3E8E8A; } .d-MKT { background: #C08A45; } .d-PROF { background: #8A6BA8; } .d-GOV { background: #4E8B62; } .d-WORK { background: #B4677E; } :root[data-theme="dark"] .d-CAP { background: #7B9BCB; } :root[data-theme="dark"] .d-PRAC { background: #55AAA5; } :root[data-theme="dark"] .d-MKT { background: #D6A362; } :root[data-theme="dark"] .d-PROF { background: #A587C2; } :root[data-theme="dark"] .d-GOV { background: #67A87C; } :root[data-theme="dark"] .d-WORK { background: #CE8299; } /* The list is an INDEX — a bounded, scrollable picker is the right shape for 106 rows. The reading is not: see .exp-right. */ .cl-list { max-height: calc(100vh - 340px); min-height: 320px; overflow-y: auto; overscroll-behavior: contain; } @media (max-width: 1100px) { .cl-list { max-height: 52vh; min-height: 0; } } /* The reach bar is gone, and the 144px it held (128px track + 16px gutter) went to the cluster names. It was the wrong mark for a PRE-SORTED list: 87 of the 105 adjacent pairs differed by under 2px, so 83% of consecutive bars were visually identical and said nothing the row order had not already said, while at the tail the 1.4% floor drew reach 1 and reach 5 as the same 1.8px stub. Reach now reads as what it is — a number, in the serif, at a size you can read — and the row gets LESS dense while the type gets bigger. */ .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: var(--ins-gap); align-items: center; width: 100%; padding: 13px 20px 13px 17px; border: 0; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background .13s ease, border-color .13s ease; } .cl-row:hover { background: var(--bg-subtle); } .cl-row:last-of-type { border-bottom: 0; } .cl-row:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: -2px; } .cl-row[aria-selected="true"] { background: var(--legal-crimson-08, rgba(165,28,48,.08)); border-left-color: var(--legal-crimson); } .cl-row[data-dim="CAP"] { border-left-color: #5B7DB1; } .cl-row[data-dim="PRAC"] { border-left-color: #3E8E8A; } .cl-row[data-dim="MKT"] { border-left-color: #C08A45; } .cl-row[data-dim="PROF"] { border-left-color: #8A6BA8; } .cl-row[data-dim="GOV"] { border-left-color: #4E8B62; } .cl-row[data-dim="WORK"] { border-left-color: #B4677E; } .cl-row[aria-selected="true"] { border-left-color: var(--legal-crimson); } .cl-row .nm { font-size: var(--ins-t-ui); line-height: 1.45; color: var(--text-body); } .cl-row[aria-selected="true"] .nm { color: var(--text-display); font-weight: 600; } .cl-row .rc { text-align: right; font-family: var(--legal-serif); font-size: var(--ins-t-read); font-weight: 600; color: var(--text-heading); } .cl-row[hidden] { display: none; } /* Cluster flags. 10.5px was the smallest type on the site and the least forgiving place to sit under the contrast floor — which .fl.q did, at 4.34:1 on --text-faint across 53 instances. --text-muted takes it to 6.9:1, and 12px is the design system's own --t-label rather than a size invented here. */ .cl-row .nm .fl { display: inline-block; margin-left: 8px; font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-badge); background: var(--legal-crimson-08); color: var(--crimson-on-wash); vertical-align: 1px; } .cl-row .nm .fl.q { background: var(--bg-hover); color: var(--text-muted); } /* ── Control bar ────────────────────────────────────────────────────────── The text filter and the six dimension chips used to live inside the index. With the index now one of three columns they would eat it, so they sit above all three and act on whatever the third column is showing. They are the only controls on the page that reach every one of the 106 regardless of scope. */ .exp-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); } .exp-controls input[type="search"] { flex: 1 1 260px; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-page); color: var(--text-body); font-family: inherit; font-size: var(--ins-t-ui); } .exp-controls input[type="search"]:focus { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } .exp-controls .dimlegend { padding: 0; border: 0; flex: 1 1 auto; } .exp-controls .count { font-size: var(--ins-t-meta); color: var(--text-faint); white-space: nowrap; } /* ── Three columns ──────────────────────────────────────────────────────── Left to right IS the hierarchy, so a reader never has to hold it in their head: the level you are at is the column you are in, and the two beside it stay visible. This replaces two stacked pickers that sat 2,000px above the panel they drove. Only families → themes actually nests. Themes → clusters does not — 38 of the 106 clusters sit under four themes — so the third column reports how many of what it lists are shared, and the reading carries the chips that move you across. Three columns are a good shape for this data precisely because they do NOT imply containment the way an indented tree would. */ /* The cluster list is the thing the reader came for, so it gets the room. The two pickers are rails beside it, not equal thirds. */ .exp-cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.95fr) minmax(0, 1.5fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; margin-top: 18px; } .exp-col { background: var(--bg-panel); display: flex; flex-direction: column; min-width: 0; } .exp-col-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .exp-col-h b { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-heading); } .exp-col-h span { font-size: var(--ins-t-micro); color: var(--text-faint); line-height: 1.45; } /* Was capped at 340px so the reading BELOW could clear the fold. The reading is an overlay now — nothing sits under these columns competing for the fold — so the cap comes off and the pickers get usable height. */ .exp-col-b { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 300px); min-height: 320px; } .exp-col-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent; background: none; font-family: inherit; text-align: left; cursor: pointer; line-height: 1.45; font-size: var(--ins-t-meta); transition: background .12s ease; } .exp-col-item:hover { background: var(--bg-subtle); } .exp-col-item:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: -2px; } .exp-col-item[hidden] { display: none; } .exp-col-item[aria-pressed="true"] { background: var(--legal-crimson-08); border-left-color: var(--legal-crimson); } .exp-col-item .ci-t { flex: 1; min-width: 0; color: var(--text-body); text-wrap: pretty; } .exp-col-item[aria-pressed="true"] .ci-t { color: var(--text-display); font-weight: 600; } .exp-col-item .ci-t .stem { color: var(--text-faint); font-weight: 400; } /* --crimson-on-wash: on the SELECTED row this eyebrow sits on a crimson-08 wash, and dark mode's lifted crimson measured 4.26:1 against it — the same crimson-ink-on-crimson-wash case as the badges and the cluster flags. */ .exp-col-item .ci-k { display: block; font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--crimson-on-wash); margin-bottom: 3px; } /* --text-muted, not --text-faint: on the selected row the crimson-08 wash lightens the panel under it and faint slate landed at 4.16:1. */ .exp-col-item .ci-n { flex: none; font-family: var(--legal-serif); font-weight: 600; font-size: var(--ins-t-meta); color: var(--text-muted); } .exp-col-item .ci-go { flex: none; color: var(--text-faint); opacity: .5; } .exp-col-item:hover .ci-go { opacity: 1; color: var(--legal-crimson); } /* The "everything at this level" rows. They are the escape hatch that keeps the old flat list reachable, so they read as a different KIND of row. */ .exp-col-all { background: var(--bg-subtle); } .exp-col-all .ci-k { color: var(--text-muted); } .exp-col-all[aria-pressed="true"] .ci-k { color: var(--crimson-on-wash); } .exp-col-hint { margin: 0; padding: 16px; font-size: var(--ins-t-meta); line-height: 1.6; color: var(--text-faint); } .exp-col-hint[hidden] { display: none; } /* ── Families and themes are CHECKBOXES ─────────────────────────────────── They used to be radio buttons in all but name: one selection, no way to click it off, and no way to hold two at once. The box on the left is the whole affordance — without it "selected" and "hovered" were both a wash and a reader could not tell which of the two they were looking at. */ .exp-col-item[aria-checked="true"] { background: var(--legal-crimson-08); border-left-color: var(--legal-crimson); } .exp-col-item[aria-checked="true"] .ci-t { color: var(--text-display); font-weight: 600; } .exp-col-item[aria-checked="true"] .ci-k { color: var(--crimson-on-wash); } .exp-pick .ci-x { flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 3px; border: 1.5px solid var(--border); background: var(--bg-panel); position: relative; transition: background .12s ease, border-color .12s ease; } .exp-pick:hover .ci-x { border-color: var(--legal-crimson-20); } .exp-pick[aria-checked="true"] .ci-x { background: var(--legal-crimson); border-color: var(--legal-crimson); } /* Drawn, not a glyph: a text tick inherits the row's font and sat off-center in the box at every size we tried. */ .exp-pick[aria-checked="true"] .ci-x::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } /* The family label above each block of themes, so the second column can offer all twenty at once without them reading as one undifferentiated list. */ .exp-col-grp { padding: 9px 16px 7px; background: var(--bg-subtle); border-bottom: 1px solid var(--border-soft); font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); } .exp-col-grp[hidden] { display: none; } /* The cluster column is the old index, unchanged in kind: same rows, same reach numbers, same dimension edge. */ .exp-col--wide .cl-list { max-height: calc(100vh - 300px); min-height: 320px; } /* ── the reading, as an overlay ───────────────────────────────────────────── It used to be `.exp-right`, a block in the flow 1,000px below the columns, which is why the page carried a scroll hack in each direction. Fixed to the viewport it cannot move the page at all. */ .exp-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 60; backdrop-filter: blur(1.5px); } /* Explicit, because [hidden] is a UA rule and ANY author `display` beats it — which is exactly how the drawer below ended up never really hidden. The register's slide-over already learned this; see .reg-scrim. */ .exp-scrim[hidden] { display: none; } /* Deliberately the same shape as .reg-drawer, which has worked on the register page for months. top/right/bottom rather than a 100vh height, an explicit [hidden], and the scroll lock on BODY not the root element — setting overflow:hidden on can reset the scroll position out from under the reader in some engines, which is the opposite of the point. */ .exp-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw); z-index: 61; display: flex; flex-direction: column; background: var(--bg-panel); border-left: 1px solid var(--border); box-shadow: -18px 0 48px rgba(15, 23, 42, .16); transform: translateX(100%); transition: transform .22s ease; } .exp-drawer[hidden] { display: none; } .exp-drawer.is-open { transform: translateX(0); } .exp-drawer:focus { outline: none; } /* The reading scrolls inside the drawer; the page behind it is locked, so there are never two live scrollers competing for the wheel. */ .exp-drawer > .pan { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; } .exp-drawer-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); } .exp-drawer-top .exp-crumb { flex: 1 1 auto; min-width: 0; border: 0; padding: 0; background: none; border-radius: 0; position: static; } .exp-close { flex: none; width: 34px; height: 34px; line-height: 1; font-size: 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-panel); color: var(--text-muted); cursor: pointer; } .exp-close:hover { color: var(--legal-crimson); border-color: var(--legal-crimson); } .exp-close:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 2px; } body.exp-locked { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .exp-drawer { transition: none; } } /* The orientation copy, lifted out of the reading and onto the page. */ .exp-intro { margin-top: 20px; padding: 22px 24px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); } /* The crumb. Sticky under the site nav + section sub-nav, which are already 118px of fixed chrome — this adds one slim line, not a fourth band, and it is the only thing on screen once a 3,000px reading is open that says where the reader is and gets them back. */ .exp-crumb { position: sticky; top: 118px; z-index: 20; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 18px; border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--bg-subtle); font-size: var(--ins-t-meta); color: var(--text-faint); } .exp-crumb button { border: 0; background: none; font: inherit; color: var(--text-muted); cursor: pointer; padding: 0; text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .exp-crumb button:hover { color: var(--legal-crimson); text-decoration-color: var(--legal-crimson); } .exp-crumb button:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 2px; } .exp-crumb .sep { opacity: .5; } .exp-crumb .here { color: var(--text-heading); font-weight: 600; } /* The panel meets the crumb, so the two read as one object. */ .exp-read .exp-right { border-top-left-radius: 0; border-top-right-radius: 0; } @media (max-width: 820px) { .exp-crumb { position: static; } } @media (max-width: 1080px) { .exp-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .exp-col:first-child { grid-column: 1 / -1; } .exp-col:first-child .exp-col-b { max-height: 210px; } } /* Below the tablet breakpoint the three columns become ONE horizontally snapping strip. Three stacked lists is what a phone would otherwise get, and that is the flat picker stack again with extra steps. The strip scrolls sideways INSIDE ITS OWN BOX — the page itself never does. */ @media (max-width: 820px) { .exp-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .exp-col, .exp-col:first-child { scroll-snap-align: start; grid-column: auto; } .exp-col-b, .exp-col:first-child .exp-col-b, .exp-col--wide .cl-list { max-height: 56vh; } } /* ── Where it sits: the lateral move ────────────────────────────────────── Themes and clusters do not nest, so a cluster has to be able to say where else it lives and take the reader there — including into another family. This is the one move three columns cannot make on their own. */ .parents { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } .pchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-family: inherit; font-size: var(--ins-t-micro); font-weight: 500; line-height: 1.5; border-radius: var(--radius-badge); background: var(--bg-hover); color: var(--text-muted); border: 1px solid transparent; cursor: pointer; transition: border-color .12s ease, color .12s ease; } .pchip:hover { border-color: var(--legal-crimson-20); color: var(--legal-crimson); } .pchip:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } .pchip.fam { background: var(--legal-crimson-08); color: var(--crimson-on-wash); font-weight: 600; } /* The theme the reader is already in. It is the one chip that would do nothing, so it recedes rather than leading — the actionable ones carry the weight. */ .pchip.here { background: none; border-style: dashed; border-color: var(--border); color: var(--text-faint); font-weight: 500; cursor: default; } .pchip.here:hover { border-color: var(--border); color: var(--text-faint); } /* A member-tier parent edge. The record keeps 507 of these against the 281 its own theme totals count, so the extra ones are SHOWN — they are the record's — but not offered: a chip that took you to a theme whose list does not contain the cluster you came from reads as a broken page rather than as soft membership. Rendered as a span, so it is not focusable either. */ .pchip.soft { background: none; border-style: dashed; border-color: var(--border-soft); color: var(--text-faint); cursor: default; } .pchip i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; opacity: .7; } .pchip.primary { border-color: var(--legal-crimson-20); } /* ── Right: the reading ───────────────────────────────────────────────────── */ /* The reading FLOWS. It was sticky with max-height:calc(100vh - 152px) and its own scrollbar, which meant a 10,500px reading rendered inside a 746px window — 7% of it visible, the rest reachable only by scrolling a nested box next to a page that also scrolled. That reads as broken, and it was. The index sticks instead (it is short and bounded); the reading runs at its natural height and the page scrolls it, which is what a long read wants. */ .exp-right { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-panel); } .pan { padding: 26px 28px 30px; } .pan-empty .k { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--legal-crimson); } .pan-empty h3 { font-family: var(--legal-serif); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--text-display); margin: 12px 0 14px; max-width: 24ch; } .pan-empty p { font-size: 15px; line-height: 1.7; color: var(--text-muted); margin: 0 0 14px; max-width: 60ch; } .pan-empty ul { margin: 0; padding-left: 20px; } .pan-empty li { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin-bottom: 9px; } .pan-dim { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-faint); } .pan-dim .dot { width: 9px; height: 9px; border-radius: 2px; } .pan h2 { font-family: var(--legal-serif); font-size: 26px; font-weight: 600; letter-spacing: -0.018em; line-height: 1.2; color: var(--text-display); margin: 13px 0 0; } .pan-line { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-faint); max-width: 62ch; } .pan-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 22px 0 0; } .pan-stats div { background: var(--bg-panel); padding: 13px 14px; } .pan-stats .n { font-family: var(--legal-serif); font-size: 21px; font-weight: 600; line-height: 1; color: var(--text-display); } /* min-height so "SOURCES / REACHING" and "RECORDED / STANCES" running to two lines does not leave the four cells without a shared label baseline. */ .pan-stats .l { margin-top: 7px; font-size: var(--ins-t-micro); line-height: 1.4; letter-spacing: .05em; min-height: 2.7em; text-transform: uppercase; color: var(--text-faint); } /* Six cells go 3x2, not 6x1: the panel is ~620px even at a 1440 viewport, so a sixth column would put "Sources reaching" on four lines. */ .pan-stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 520px) { .pan-stats, .pan-stats-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ── The record's own reading ────────────────────────────────────────────── The proposition, the cross-cutting findings, and the voice and era lenses: the corpus's own analysis, carried across verbatim. Every position elsewhere in the panel is recorded RELATIVE TO the proposition, so it leads. */ .pan-prop { margin: 14px 0 0; font-family: var(--legal-serif); font-size: 16.5px; line-height: 1.62; color: var(--text-body); max-width: 62ch; } .pan-kp { margin: 0 0 20px; padding: 0 0 0 15px; border-left: 2px solid var(--border); } .pan-kp:last-child { margin-bottom: 0; } .pan-kp-t { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--text-display); margin-bottom: 8px; max-width: 62ch; } .pan-kp p { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); } .pan-lens { margin: 0 0 20px; padding: 14px 16px; background: var(--bg-subtle); border-radius: var(--radius-md); } .pan-lens:last-child { margin-bottom: 0; } .pan-lens-h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; } .pan-lens-l { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-display); } .pan-lens p { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); } /* The position a facet holds, stated rather than left to the bar above it. The corpus is 94.6% Supports/Builds on, so the crimson variant is the one that carries information — the agreeing pills stay quiet. */ .pan-pos { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-badge); background: var(--bg-hover); font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); } .pan-pos.contest { background: var(--legal-crimson-08); color: var(--crimson-on-wash); } /* Quotes nested inside a finding or a lens block sit smaller than the standing pull-quotes, so the reading above them keeps the weight. */ .pq-s { margin: 12px 0 0; padding-left: 14px; border-left-width: 2px; } .pq-s p { font-size: 15px; line-height: 1.55; } .pan-sec { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } .pan-sec:first-of-type { border-top: 0; } /* The masthead, the section sub-nav and the reading's own crumb are all sticky, so an un-offset anchor jump lands the heading underneath about 165px of chrome — which reads as the jump having gone to the wrong place. */ .pan-sec { scroll-margin-top: 172px; } /* ── The way through a long reading ──────────────────────────────────────── The widest cluster is ~22,000px once the record's own reading is in place. Without this the era lens is only reachable by scrolling past 12,000px of findings, and the sources only by scrolling past all of it. */ .pan-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; padding: 13px 15px; background: var(--bg-subtle); border-radius: var(--radius-md); } .pan-jump-k { font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; } .pan-jump a { padding: 3px 9px; border-radius: var(--radius-badge); background: var(--bg-panel); border: 1px solid var(--border-soft); font-size: var(--ins-t-micro); font-weight: 500; line-height: 1.5; color: var(--text-muted); text-decoration: none; transition: border-color .12s ease, color .12s ease; } .pan-jump a:hover { border-color: var(--legal-crimson-20); color: var(--legal-crimson); } .pan-jump a:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 1px; } .pan-k { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--legal-crimson); margin-bottom: 13px; } .pan-sec p { font-size: 15px; line-height: 1.72; color: var(--text-body); margin: 0 0 14px; max-width: 64ch; } .pan-sec p:last-child { margin-bottom: 0; } .pan-sub { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin: 18px 0 8px; } /* Absent reading — said plainly rather than padded with generated prose. */ .pan-none { padding: 15px 17px; border: 1px dashed var(--border); border-radius: var(--radius-md); font-size: 14px; line-height: 1.65; color: var(--text-faint); max-width: 64ch; } /* Mix bars — voice rows click through to the register filtered by that voice. */ .mix { display: flex; flex-direction: column; gap: 6px; } .mix-row { display: grid; grid-template-columns: minmax(0, 13ch) minmax(0, 1fr) 52px; gap: 12px; align-items: center; padding: 3px 6px; margin: 0 -6px; border-radius: var(--radius-sm, 4px); text-decoration: none; } a.mix-row:hover { background: var(--bg-subtle); } a.mix-row:hover .mix-k { color: var(--legal-crimson); } .mix-k { font-size: 12.5px; line-height: 1.3; color: var(--text-body); } .mix-b { height: 13px; background: var(--bg-hover); border-radius: 2px; overflow: hidden; display: flex; } /* min-width for the same reason .stack i already carries one: a family's "Mixed 4" rendered a 1.0px segment and "Opposes 6" a 1.6px one — present in the data, invisible on the page. */ .mix-b i { display: block; height: 100%; background: var(--df-slate-400, #94a3b8); min-width: 3px; } .mix-b i.contest { background: var(--legal-crimson); } .mix-n { text-align: right; font-family: var(--legal-serif); font-size: 13.5px; font-weight: 600; color: var(--text-heading); } .mix-n small { font-family: var(--legal-sans); font-size: 11px; font-weight: 600; color: var(--legal-crimson); margin-left: 4px; } /* A row whose whole count is contesting says so with the crimson bar it already draws — it does not need the number printed twice. */ .mix-row.contested .mix-k { color: var(--legal-crimson); font-weight: 600; } /* Quotes — verbatim, attributed, exactly as the record returned them. */ .pq { margin: 0 0 18px; padding: 0 0 0 18px; border-left: 3px solid var(--legal-crimson); } .pq p { font-family: var(--legal-serif); font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--text-display); margin: 0 0 9px; } .pq cite { font-style: normal; font-size: 11.5px; line-height: 1.5; letter-spacing: .04em; color: var(--text-faint); display: block; } /* Sources in the panel */ .pan-srcs { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .cs { display: flex; flex-direction: column; gap: 4px; padding: 10px 13px; background: var(--bg-panel); text-decoration: none; transition: background .12s ease; } .cs:hover { background: var(--bg-subtle); } .cs-t { font-size: 13.5px; line-height: 1.4; color: var(--text-heading); } .cs:hover .cs-t { color: var(--legal-crimson); } .cs-m { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); } /* How the source's own argument was framed where it took this position. The record supplies it for 1,356 of the 1,654 stances; the rest of the cards simply do not carry the line rather than carrying an empty one. */ .cs-f { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); } .cs.contest { box-shadow: inset 2px 0 0 var(--legal-crimson); } .cs.contest .cs-m { color: var(--legal-crimson); font-weight: 600; } /* A long reading needs its own internal rhythm once it is no longer boxed — the source list at the foot of a wide cluster runs to a hundred-odd entries. */ .pan-srcs { max-height: none; } .pan-sec .pan-srcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } @media (max-width: 620px) { .pan-sec .pan-srcs { grid-template-columns: 1fr; } } /* ── The register at the foot of a reading ──────────────────────────────── The READING was never the problem. On the widest cluster it runs 2,216px — a good long read that wants nothing done to it, and the flowing column above is the right call. What made the panel feel broken was the 7,129px, 148-entry source register appended to the end of an essay: 72% of a 9,917px panel. So the reading still flows and the register folds. Nothing is deleted and nothing is paginated away — every source stays on the page, and the summary states the count, which is itself the disclosure this page cares about. */ .pan-srcs-fold { margin-top: 4px; } .pan-srcs-fold > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 11px 14px; cursor: pointer; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle); transition: border-color .14s ease; } .pan-srcs-fold > summary::-webkit-details-marker { display: none; } .pan-srcs-fold > summary:hover { border-color: var(--legal-crimson-20); } .pan-srcs-fold > summary:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 2px; } .pan-srcs-fold > summary .sn { flex: none; font-family: var(--legal-serif); font-size: 17px; font-weight: 600; color: var(--text-display); } /* flex:1 rather than auto width — otherwise the sentence claims the whole row and the count and the control each land on a line of their own. */ .pan-srcs-fold > summary .sl { flex: 1 1 220px; min-width: 0; font-size: var(--ins-t-meta); color: var(--text-muted); line-height: 1.5; } .pan-srcs-fold > summary .sx { flex: none; margin-left: auto; font-size: var(--ins-t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--legal-crimson); white-space: nowrap; } .pan-srcs-fold > summary .sx::after { content: " \2193"; } .pan-srcs-fold[open] > summary .sx::after { content: " \2191"; } .pan-srcs-fold[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .pan-srcs-fold[open] > summary .sx-show { display: none; } .pan-srcs-fold:not([open]) > summary .sx-hide { display: none; } .pan-srcs-fold > .pan-srcs { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } /* Above 1400px the panel is wide enough to carry the register open, so the JS ships it open there — a closed
is outside Cmd-F, and on a screen with room the fold buys nothing. Below that it ships closed. */ /* ══════════════════════════════════════════════════════════════════════════════ COURSE PAGE ══════════════════════════════════════════════════════════════════════════ */ .lvls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; margin-top: 34px; } .lvl { background: var(--bg-panel); padding: 24px 26px; } .lvl-k { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--legal-crimson); margin-bottom: 12px; } .lvl p { margin: 0; font-size: 15px; line-height: 1.68; color: var(--text-muted); } @media (max-width: 860px) { .lvls { grid-template-columns: 1fr; } } .ses-map { margin-top: 30px; border-top: 1px solid var(--border); } .wk { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; padding: 26px 8px 12px; } .wk-n { font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--legal-crimson); } .wk-t { font-family: var(--legal-serif); font-size: 18px; font-weight: 600; color: var(--text-display); } .ses { display: grid; grid-template-columns: 46px 108px minmax(0, 1fr) 200px; gap: 20px; align-items: baseline; padding: 13px 8px; border-bottom: 1px solid var(--border-soft); } .ses:hover { background: var(--bg-subtle); } .ses-n { font-family: var(--legal-serif); font-size: 15px; font-weight: 600; color: var(--text-faint); } .ses-d { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-faint); text-transform: uppercase; } .ses-t { font-size: 16px; line-height: 1.45; color: var(--text-heading); } .ses-l { text-align: right; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); } @media (max-width: 860px) { .ses { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; } .ses-d { grid-column: 2; order: -1; } .ses-l { grid-column: 2; text-align: left; } } /* Lists of things inside the panel that navigate the map */ .glist { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; } .gl { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 10px 13px; background: var(--bg-panel); border: 0; font-family: inherit; text-align: left; cursor: pointer; transition: background .12s ease; } .gl:hover { background: var(--bg-subtle); } .gl:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: -2px; } .gl-t { flex: 1; font-size: 13.5px; line-height: 1.4; color: var(--text-heading); } .gl:hover .gl-t { color: var(--legal-crimson); } .gl-n { font-family: var(--legal-serif); font-size: 13.5px; font-weight: 600; color: var(--text-faint); } .linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 3px; cursor: pointer; text-align: left; } .linkish:hover { color: var(--legal-crimson); text-decoration-color: currentColor; } /* The featured lens is a card like the other six, so it behaves like one: the picture and the heading are both links to the figure. It previously carried a single small button and nothing else was clickable, which on the one card the page says to START WITH is the worst place for that. */ .viz-teaser .canvas-link { display: block; text-decoration: none; cursor: pointer; } .viz-teaser .canvas-link:focus-visible { outline: 2px solid var(--legal-crimson); outline-offset: 2px; } .viz-teaser .copy h3 a { color: inherit; text-decoration: none; } .viz-teaser .copy h3 a:hover { color: var(--legal-crimson); } .viz-teaser:hover .copy h3 a { color: var(--legal-crimson); } /* Second Chair reading alignment: retain the legal site's typography and tokens. */ .alignment-section{margin-top:72px} .alignment-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px} .alignment-note{font-size:14px;line-height:1.7;color:var(--text-muted);max-width:78ch} .alignment-details{margin-top:32px;margin-bottom:32px} .alignment-details>summary{cursor:pointer;font-weight:600;color:var(--text-heading);padding:14px 0;border-bottom:1px solid var(--border)} .alignment-details>summary:focus-visible{outline:2px solid var(--text-heading);outline-offset:4px} .alignment-details>section.wrap{width:100%;max-width:none;margin-top:24px!important;padding-inline:0} .record-summary{display:grid;grid-template-columns:1fr 1fr;gap:48px} .record-summary h3,.record-position h3{font-family:var(--legal-serif);font-weight:500;font-size:26px;color:var(--text-heading);margin:0 0 14px} .record-summary p,.record-position p{color:var(--text-muted);font-size:15px;line-height:1.7} .record-bars{margin:24px 0} .record-bars>div{margin-bottom:14px} .record-bars dt{font-size:14px;color:var(--text-body);margin-bottom:5px} .record-bars dd{margin:0;display:grid;grid-template-columns:1fr 48px;align-items:center;gap:12px} .record-bars dd b{text-align:right;font-size:13px;font-family:var(--legal-mono);font-weight:500} .record-bar{display:block;width:var(--bar);height:7px;background:var(--legal-crimson)} .record-position{margin-top:36px;padding-top:24px;border-top:1px solid var(--border)} .record-position dl{display:flex;flex-wrap:wrap;gap:18px 32px} .record-position dt{font-size:14px;color:var(--text-muted)} .record-position dd{font-family:var(--legal-mono);font-size:20px;color:var(--text-heading);margin:6px 0 0} .source-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:18px 0} .source-filters label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:500;color:var(--text-muted);min-width:0} .source-filters select,.source-scope select{font:inherit;font-size:14px;color:var(--text-body);background:var(--bg-page);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 30px 10px 10px;width:100%;min-width:0;max-width:100%} .source-filters select:focus-visible,.source-scope select:focus-visible{outline:2px solid var(--text-heading);outline-offset:2px} .source-scope{display:flex;gap:16px 32px;flex-wrap:wrap;align-items:center;padding:0 0 20px;font-size:14px;color:var(--text-muted)} .source-scope>label{display:flex;align-items:center;gap:10px;max-width:100%} .source-scope input{accent-color:var(--legal-crimson);width:16px;height:16px} .corpus-sub .aligned-nav{overflow-x:auto;flex-wrap:nowrap} .corpus-sub .aligned-nav a{white-space:nowrap} @media(max-width:900px){.source-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.record-summary{gap:28px}} @media(max-width:600px){.source-filters{grid-template-columns:minmax(0,1fr)}.record-summary{grid-template-columns:minmax(0,1fr)}.alignment-section{margin-top:48px}.source-scope>label{width:100%}.source-scope select{flex:1}.record-position dl{gap:18px 24px}} /* One corpus hierarchy shared by Overview and Topics. */ .topic-overview{margin-top:72px} .topic-tree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 64px} .topic-tree section{padding-top:20px;border-top:1px solid var(--border)} .topic-tree h3{font-size:21px;line-height:1.35;margin:0 0 14px} .topic-tree h3 small{font:400 12px var(--legal-mono);color:var(--text-faint);white-space:nowrap} .topic-tree ul{list-style:none;margin:0;padding:0} .topic-tree li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:15px;line-height:1.5} .topic-tree li span{color:var(--text-faint);font-size:12px} .topic-tree a,.topic-family-index a{color:inherit;text-decoration:none} .topic-tree a:hover,.topic-family-index a:hover b{text-decoration:underline;text-underline-offset:4px} .topic-family-index{margin-top:36px} .topic-family-index ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px} .topic-family-index li{border-top:1px solid var(--border)} .topic-family-index a{display:flex;gap:16px;padding:20px 0;line-height:1.5} .topic-family-index b{display:block;color:var(--text-heading);font-size:18px;line-height:1.35} .topic-family-index a span span{display:block;margin-top:6px;font-size:14px;color:var(--text-muted)} .topic-family-index small{display:block;font-size:12px;color:var(--text-faint);margin-top:7px} .topic-index-num{color:var(--crimson-on-wash);font:14px var(--legal-mono);padding-top:3px} .topic-controls{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin-top:40px} .topic-controls label{display:grid;gap:8px;font-size:13px;flex:1;min-width:200px} .topic-controls input{width:100%;padding:12px;border:1px solid var(--border);border-radius:0;background:var(--bg-page);color:var(--text-body);font:inherit;font-size:16px;box-sizing:border-box} .topic-controls p{width:100%;margin:0;font-size:13px;color:var(--text-faint)} .topic-reading-note{font-size:13px;line-height:1.6;color:var(--text-muted);margin-top:20px} .topic-family{margin-top:64px;padding-top:32px;border-top:2px solid var(--border);scroll-margin-top:150px} .topic-family h2{font-size:clamp(28px,3.2vw,40px);max-width:28ch;line-height:1.15;margin:14px 0} .topic-scale{font:12px var(--legal-mono);color:var(--text-faint);line-height:1.7} .topic-claim{font-size:21px;line-height:1.45;color:var(--text-heading);max-width:76ch;margin:12px 0} .topic-description{font-size:16px;line-height:1.75;max-width:90ch;color:var(--text-muted)} .topic-facts{font-size:12px;line-height:1.7;color:var(--text-faint);margin:18px 0} .topic-facts p{margin:4px 0}.topic-facts b{display:inline-block;min-width:72px;color:var(--text-muted);font-weight:500} .topic-theme-links{display:flex;gap:8px 22px;flex-wrap:wrap;margin:22px 0 30px;max-width:95ch} .topic-theme-links a{font-size:13px;color:var(--text-muted);text-decoration:underline;text-underline-offset:4px} .topic-theme-links small{color:var(--text-faint);margin-left:4px} .topic-theme{border-top:1px solid var(--border);padding:28px 0;scroll-margin-top:150px} .topic-theme h3{font-size:26px;line-height:1.25;margin:10px 0} .topic-theme .topic-claim{font-size:19px} .topic-reading{margin-top:20px} .topic-reading summary{cursor:pointer;font-size:15px;color:var(--text-heading);padding:12px 0} .topic-reading summary span{color:var(--text-faint);font-size:12px;margin-left:12px} .topic-records{list-style:none;padding:0;margin:12px 0;max-width:1000px} .topic-records li{border-top:1px solid var(--border);scroll-margin-top:150px} .topic-record{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0;color:var(--text-heading);text-decoration:none;line-height:1.4} .topic-record:hover b{text-decoration:underline;text-underline-offset:4px} .topic-record b{font-size:15px;font-weight:600}.topic-record-claim{display:block;color:var(--text-muted);font-size:13px;margin-top:3px} .topic-reach{font-size:12px;color:var(--text-faint);white-space:nowrap} #topics-main [hidden]{display:none!important} @media(max-width:700px){.topic-tree,.topic-family-index ol{grid-template-columns:1fr}.topic-tree{gap:24px}.topic-family{margin-top:44px}.topic-reading summary span{display:block;margin:6px 0 0 18px}.topic-record{gap:12px}.topic-reach{white-space:normal;min-width:55px;text-align:right}.topic-claim{font-size:19px}} /* One Insights navigation; identical position on reading and map pages. */ .corpus-sub .inner{max-width:none;margin:0;padding:0 40px;box-sizing:border-box;width:100%;flex-wrap:nowrap} .corpus-sub .insights-nav{flex-wrap:nowrap;overflow-x:auto;min-width:0;min-height:50px;gap:24px;width:100%} .corpus-sub .insights-nav a{flex-shrink:0} @media(max-width:700px){.corpus-sub .inner{padding:0 20px}.corpus-sub .insights-nav{gap:20px;min-height:44px}}