/* Journal — listing (design D "Topic shelves" refined), topic pages and every paper (A's layout) and the journal
   search (D). Approved 3 Oct 2026, canvas "Journal — Refined". Scoped to main.jlx. Markup: include/ccl-journal-list.php. */
.jlx {
	--jlx-bg: #FFFFFF; --jlx-soft: #F1F4F9; --jlx-ink: #0B1A2E; --jlx-body: #3A4659; --jlx-muted: #566175;
	--jlx-line: #E1E7F0; --jlx-line2: #C9D3E2; --jlx-blue: #1D63FF; --jlx-blue-text: #1D55E0; --jlx-navy: #0A1628; --jlx-gold: #F6C85F;
	--jlx-dim: #C3CCDA; --jlx-onnavy-mute: #8E9AAE; --jlx-mark: #FCE7A8; --jlx-field: #FFFFFF; --jlx-card: #FFFFFF;
	--jlx-av-bg: #EEF4FF; --jlx-av: #1D55E0; --jlx-note-bg: #FBF8F1; --jlx-note-line: #ECE6D6; --jlx-note-ic: #8A5A00;
	--jlx-display: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--jlx-text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--jlx-mono-f: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	--jlx-pad: clamp(20px, 5.6vw, 80px);
	display: block; background: var(--jlx-bg); color: var(--jlx-ink); font-family: var(--jlx-text); font-size: 16px; line-height: 1.55;
}
html[data-ccl-theme="dark"] .jlx {
	--jlx-bg: #0B1220; --jlx-soft: #0F192B; --jlx-ink: #E8EDF5; --jlx-body: #C9D2DF; --jlx-muted: #9AA6B8;
	--jlx-line: #22304A; --jlx-line2: #2A3A58; --jlx-blue-text: #7DA4FF; --jlx-navy: #070E1A; --jlx-mark: rgba(246,200,95,0.32);
	--jlx-field: #0F192B; --jlx-card: #0F192B; --jlx-av-bg: rgba(125,164,255,0.14); --jlx-av: #9DB9FF;
	--jlx-note-bg: rgba(246,200,95,0.07); --jlx-note-line: rgba(246,200,95,0.22); --jlx-note-ic: #F6C85F;
}
/* Topic tints */
.jlx .jlx-t--personal-injury { --tb: #E5F4EC; --tf: #1F7A4A; }
.jlx .jlx-t--liability { --tb: #E7EEFB; --tf: #1D55E0; }
.jlx .jlx-t--maritime-law { --tb: #E4F1F6; --tf: #1B6C8A; }
.jlx .jlx-t--aviation-law { --tb: #ECEFFC; --tf: #3B4CB8; }
.jlx .jlx-t--ethics { --tb: #F1E9F7; --tf: #6B3FA0; }
.jlx .jlx-t--conference-papers { --tb: #FBF1DC; --tf: #8A5A00; }
.jlx .jlx-t--book-reviews { --tb: #FCEAE4; --tf: #A4402A; }
.jlx .jlx-t--other { --tb: #EEF1F5; --tf: #3A4659; }
html[data-ccl-theme="dark"] .jlx .jlx-t--personal-injury { --tb: rgba(127,209,165,0.14); --tf: #8FDCB2; }
html[data-ccl-theme="dark"] .jlx .jlx-t--liability { --tb: rgba(125,164,255,0.15); --tf: #A5BFFF; }
html[data-ccl-theme="dark"] .jlx .jlx-t--maritime-law { --tb: rgba(124,199,224,0.14); --tf: #8FD3EA; }
html[data-ccl-theme="dark"] .jlx .jlx-t--aviation-law { --tb: rgba(174,184,255,0.15); --tf: #B9C2FF; }
html[data-ccl-theme="dark"] .jlx .jlx-t--ethics { --tb: rgba(201,169,240,0.15); --tf: #D2B6F3; }
html[data-ccl-theme="dark"] .jlx .jlx-t--conference-papers { --tb: rgba(240,200,120,0.14); --tf: #F2CD84; }
html[data-ccl-theme="dark"] .jlx .jlx-t--book-reviews { --tb: rgba(244,160,143,0.15); --tf: #F6AE9F; }
html[data-ccl-theme="dark"] .jlx .jlx-t--other { --tb: rgba(255,255,255,0.08); --tf: #C9D2DF; }

.jlx *, .jlx *::before, .jlx *::after { box-sizing: border-box; }
.jlx :where(h1, h2, h3, h4, p, ul, ol, li) { margin: 0; }
.jlx :where(ul, ol) { padding: 0; list-style: none; }
.jlx li { min-width: 0; }
.jlx a { color: inherit; text-decoration: none; }
.jlx button, .jlx input, .jlx select { font: inherit; }
.jlx a:focus-visible, .jlx button:focus-visible, .jlx input:focus-visible, .jlx select:focus-visible { outline: 3px solid var(--jlx-blue); outline-offset: 3px; border-radius: 8px; }
.jlx .jlx-hero a:focus-visible, .jlx .jlx-hero button:focus-visible, .jlx .jlx-hero select:focus-visible, .jlx .jlx-talk a:focus-visible { outline-color: var(--jlx-gold); }
.jlx .jlx-sbox input:focus-visible { outline: 0; }
.jlx .jlx-sbox:focus-within { outline: 3px solid var(--jlx-gold); outline-offset: 3px; }
.jlx [hidden] { display: none !important; }
html:has(main.jlx), html:has(main.jlx) body { overflow-x: clip !important; }
.jlx-ic { flex: none; display: block; }
.jlx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jlx-wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--jlx-pad); box-sizing: content-box !important; }
.jlx .jlx-narrow { display: none; }
.jlx mark { background: var(--jlx-mark); color: inherit; padding: 0 2px; border-radius: 3px; }
.jlx .jlx-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15.5px; font-weight: 800; color: var(--jlx-blue-text); white-space: nowrap; }
.jlx .jlx-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.jlx-p { font-size: 17px; line-height: 1.6; color: var(--jlx-body); }
.jlx-mono { font-family: var(--jlx-mono-f); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jlx-muted); }

/* Buttons */
.jlx .jlx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 10px; border: 1px solid transparent; font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.jlx .jlx-btn--sm { min-height: 46px; padding: 0 16px; font-size: 15px; }
.jlx .jlx-btn--line { background: transparent; border-color: var(--jlx-line2); color: var(--jlx-ink); }
.jlx .jlx-btn--gold { min-height: 54px; background: var(--jlx-gold); border-color: var(--jlx-gold); color: #0A1628; }
.jlx .jlx-btn--gold:hover { background: #F2BB3A; color: #0A1628; }
.jlx .jlx-btn--ghost { min-height: 54px; background: transparent; border-color: rgba(255,255,255,0.3); color: #FFFFFF; }
.jlx .jlx-btn--ghost:hover { border-color: #FFFFFF; background: rgba(255,255,255,0.06); color: #FFFFFF; }
/* The site sets a short height on every tel: link; this one is a button. */
.jlx a.jlx-btn[href^="tel:"] { display: inline-flex !important; align-items: center !important; min-height: 54px !important; }

/* Navy headers */
.jlx-hero { background: var(--jlx-navy); color: #FFFFFF; padding: 28px 0 56px; }
.jlx-hero--a, .jlx-hero--search { padding-bottom: 44px; }
.jlx-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: #AEBBD0; }
.jlx-crumb li { display: inline-flex; align-items: center; gap: 8px; }
.jlx-crumb a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline !important; text-underline-offset: 3px; }
.jlx-crumb a:hover { color: #FFFFFF; }
.jlx-crumb .jlx-ic { color: var(--jlx-onnavy-mute); }
.jlx-crumb [aria-current] { color: #FFFFFF; font-weight: 600; }
.jlx-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jlx-gold); }
.jlx-eyebrow--ic { display: inline-flex; align-items: center; gap: 10px; }
.jlx-h1 { font-family: var(--jlx-display); font-size: clamp(36px, 4.2vw, 60px); font-weight: 900; line-height: 1.03; letter-spacing: -0.025em; color: #FFFFFF; text-wrap: balance; overflow-wrap: break-word; }
.jlx-h1--xl { font-size: clamp(40px, 4.6vw, 64px); }
.jlx-h1--md { font-size: clamp(32px, 3.6vw, 52px); }
.jlx-lead { max-width: 820px; font-size: 19px; line-height: 1.6; color: var(--jlx-dim); text-wrap: pretty; }

/* D header: centred, then the topic tiles */
.jlx-dhero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 28px 0 8px; text-align: center; }
.jlx-dhero .jlx-sbox { margin-top: 6px; }
.jlx-browse { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.jlx-hero .jlx-mono { color: var(--jlx-onnavy-mute); }
.jlx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jlx-tile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: #FFFFFF; transition: border-color .15s, background-color .15s; }
.jlx-tile:hover { border-color: rgba(246,200,95,0.7); background: rgba(255,255,255,0.07); }
.jlx-tile:focus-within { outline: 3px solid var(--jlx-gold); outline-offset: 3px; }
.jlx-tile__top { display: flex; justify-content: space-between; align-items: center; color: var(--jlx-gold); }
.jlx-tile__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(246,200,95,0.14); color: var(--jlx-gold); display: flex; align-items: center; justify-content: center; }
.jlx-tile__ic--plain { background: transparent; width: auto; height: auto; justify-content: flex-start; }
.jlx-tile__n { font-family: var(--jlx-display); font-size: 20px; font-weight: 800; line-height: 1.2; }
.jlx-tile__n a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.jlx .jlx-tile__n a:focus-visible { outline: 0; }
.jlx-tile__d { flex: 1; font-size: 14px; line-height: 1.5; color: var(--jlx-dim); }
.jlx-tile__l { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.12); }
.jlx-tile__k { font-family: var(--jlx-mono-f); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jlx-onnavy-mute); }
.jlx-tile__lt { font-size: 14px; font-weight: 700; line-height: 1.4; color: #FFFFFF; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jlx-tile--all { justify-content: center; gap: 10px; background: transparent; border-style: dashed; border-color: rgba(255,255,255,0.3); }
.jlx-tile--all .jlx-tile__d { flex: none; }

/* A header: text and search side by side, then the topic chips */
.jlx-ahero { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: end; padding: 32px 0 30px; }
.jlx-ahero__t, .jlx-shero__t { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.jlx-ahero .jlx-lead { max-width: 680px; }
.jlx-shero { display: grid; grid-template-columns: minmax(0, 1fr) 640px; gap: 56px; align-items: end; padding-top: 28px; }
.jlx-shero__t { gap: 12px; }
.jlx-shero .jlx-lead { font-size: 18px; }

/* Search box (always on navy) */
.jlx-sbox { display: flex; width: 100%; max-width: 760px; height: 62px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); overflow: hidden; text-align: left; }
.jlx-sbox--a, .jlx-sbox--value { height: 58px; max-width: none; }
.jlx-sbox__f { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0 8px 0 16px; color: #AEBBD0; }
.jlx .jlx-sbox input[type=search] { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: #FFFFFF; font-size: 16px; font-weight: 500; -webkit-appearance: none; appearance: none; }
.jlx .jlx-sbox--value input[type=search] { font-size: 17px; font-weight: 600; }
.jlx .jlx-sbox input[type=search]::placeholder { color: #AEBBD0; opacity: 1; }
.jlx .jlx-sbox input[type=search]::-webkit-search-cancel-button { display: none; }
.jlx .jlx-sbox__x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #AEBBD0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.jlx .jlx-sbox__x:hover { color: #FFFFFF; background: rgba(255,255,255,0.08); }
.jlx .jlx-sbox__go { flex: none; height: 100%; padding: 0 22px; border: 0; border-radius: 0; background: var(--jlx-gold); color: #0A1628; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.jlx .jlx-sbox__go:hover { background: #F2BB3A; }

/* Topic chips (navy) and the phone dropdowns that replace them */
.jlx-chips ul { display: flex; flex-wrap: wrap; gap: 10px; }
.jlx .jlx-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); color: #FFFFFF; font-size: 15px; font-weight: 700; white-space: nowrap; transition: border-color .15s; }
.jlx .jlx-chip .jlx-ic { color: var(--jlx-gold); }
.jlx .jlx-chip:hover { border-color: rgba(246,200,95,0.7); }
.jlx .jlx-chip[aria-current] { background: var(--jlx-gold); border-color: var(--jlx-gold); color: #0A1628; }
.jlx .jlx-chip[aria-current] .jlx-ic { color: #0A1628; }
.jlx .jlx-chip--light { background: var(--jlx-field); border-color: var(--jlx-line2); color: var(--jlx-ink); }
.jlx .jlx-chip--light:hover { border-color: var(--jlx-blue); }
.jlx .jlx-chip__ic { display: inline-flex; background: none; }
.jlx .jlx-chip__ic .jlx-ic { color: var(--tf); }
.jlx-msel { display: none; }
.jlx-msel__l { font-size: 13px; font-weight: 700; }
.jlx-msel--dark .jlx-msel__l { color: #AEBBD0; }
.jlx-msel__f, .jlx-sel__f { position: relative; display: block; }
.jlx-msel__f .jlx-ic, .jlx-sel__f .jlx-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.jlx .jlx-msel select { display: block; width: 100%; height: 52px; margin: 0; padding: 0 44px 0 14px; border-radius: 10px; font-size: 16px; font-weight: 700; -webkit-appearance: none; appearance: none; cursor: pointer; }
.jlx .jlx-msel--dark select { border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #FFFFFF; }
.jlx .jlx-msel select option { color: #0B1A2E; background: #FFFFFF; }
.jlx-msel--dark .jlx-msel__f .jlx-ic { color: var(--jlx-gold); }

/* Sections */
.jlx-sec { padding: 56px 0 48px; }
.jlx-sec .jlx-wrap { display: flex; flex-direction: column; gap: 24px; }
.jlx-sec--new { padding: 56px 0 32px; }
.jlx-sec--shelves { padding: 24px 0 64px; }
.jlx-sec--shelves .jlx-wrap { gap: 18px; }
.jlx-sec--briefs { padding: 48px 0 40px; }
.jlx-sec--briefs .jlx-wrap { gap: 22px; }
.jlx-sec--arch { padding: 8px 0 64px; }
.jlx--all .jlx-sec--arch, .jlx-sec--briefs + .jlx-sec--arch { padding-top: 8px; }
.jlx--a .jlx-hero + .jlx-sec--arch { padding-top: 48px; }
.jlx-sec--arch .jlx-wrap { gap: 20px; }
.jlx-sec--results { padding: 44px 0 64px; }
.jlx-sec--results .jlx-wrap { gap: 18px; }
.jlx-sec--none { padding: 48px 0 64px; }
.jlx-sec--none .jlx-wrap { gap: 28px; }
.jlx-sec__intro { display: flex; flex-direction: column; gap: 10px; }
.jlx-sec__head { display: flex; justify-content: space-between; align-items: end; gap: 16px 24px; flex-wrap: wrap; }
.jlx-h2 { font-family: var(--jlx-display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: var(--jlx-ink); }
.jlx-h2--sm { font-size: clamp(24px, 2.1vw, 30px); }

/* Archive note */
.jlx-note { display: flex; gap: 10px; padding: 14px 18px; border-radius: 12px; background: var(--jlx-note-bg); border: 1px solid var(--jlx-note-line); font-size: 14.5px; line-height: 1.55; color: var(--jlx-body); }
.jlx-note .jlx-ic { margin-top: 2px; color: var(--jlx-note-ic); }

/* Topic tag, kind, byline */
.jlx-tag { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--tb); color: var(--tf); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.jlx-kind { font-family: var(--jlx-mono-f); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jlx-muted); white-space: nowrap; }
.jlx-kind--brief { color: var(--jlx-blue-text); }
.jlx-by { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--jlx-body); }
.jlx-by strong { font-weight: 700; color: var(--jlx-ink); }
.jlx-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--jlx-av-bg); color: var(--jlx-av); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; }
.jlx-go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--jlx-blue-text); }

/* Briefing paper cards */
.jlx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jlx-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jlx-cards--1, .jlx-cards--wide { grid-template-columns: minmax(0, 1fr); }
.jlx-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: 18px; border: 1px solid var(--jlx-line); background: var(--jlx-card); transition: border-color .15s, box-shadow .15s; }
.jlx-card:hover { border-color: var(--jlx-blue); box-shadow: 0 6px 24px rgba(11,26,46,0.08); }
.jlx-card:focus-within { outline: 3px solid var(--jlx-blue); outline-offset: 3px; }
.jlx-card__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.jlx-card__t { font-family: var(--jlx-display); font-size: 23px; font-weight: 800; line-height: 1.22; color: var(--jlx-ink); text-wrap: pretty; }
.jlx-card__t a::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.jlx .jlx-card__t a:focus-visible { outline: 0; }
.jlx-card__x { flex: 1; font-size: 15.5px; line-height: 1.6; color: var(--jlx-body); }
.jlx-card .jlx-go { align-self: flex-start; }
.jlx-card:hover .jlx-go { text-decoration: underline; text-underline-offset: 3px; }
.jlx-card--wide { padding: 32px; }
.jlx-card--wide .jlx-card__t { font-size: 28px; }

/* Shelves */
.jlx-shelves { display: flex; flex-direction: column; }
.jlx-shelf { display: flex; flex-direction: column; gap: 16px; padding: 28px 0; border-top: 1px solid var(--jlx-line); scroll-margin-top: 120px; }
.jlx-shelf__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.jlx-shelf__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.jlx-tile-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--tb); color: var(--tf); display: flex; align-items: center; justify-content: center; }
.jlx-tile-ic--sm { width: 40px; height: 40px; border-radius: 10px; }
.jlx-shelf__n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jlx-shelf__n h3 { font-family: var(--jlx-display); font-size: 24px; font-weight: 800; line-height: 1.2; color: var(--jlx-ink); }
.jlx-shelf__d { font-size: 15px; line-height: 1.5; color: var(--jlx-body); }
.jlx-shelf__all { display: none; }
.jlx-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jlx-mini { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 14px; border: 1px solid var(--jlx-line); background: var(--jlx-card); transition: border-color .15s; }
.jlx-mini:hover { border-color: var(--jlx-blue); }
.jlx-mini:focus-within { outline: 3px solid var(--jlx-blue); outline-offset: 3px; }
.jlx-mini__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.jlx-mini__top .jlx-kind { font-size: 11.5px; }
.jlx-mini__d { font-family: var(--jlx-mono-f); font-size: 13px; font-weight: 600; color: var(--jlx-muted); white-space: nowrap; }
.jlx-mini__t { flex: 1; font-family: var(--jlx-display); font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--jlx-ink); }
.jlx-mini__t a::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.jlx .jlx-mini__t a:focus-visible { outline: 0; }
.jlx-mini__x { font-size: 14.5px; line-height: 1.6; color: var(--jlx-body); }
.jlx-mini__a { font-size: 14px; color: var(--jlx-muted); }
.jlx-mini__a strong { color: var(--jlx-body); font-weight: 700; }

/* Archive rows */
.jlx-rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--jlx-line); }
.jlx-row { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--jlx-line); }
.jlx-row__y { font-family: var(--jlx-mono-f); font-size: 15px; font-weight: 600; color: var(--jlx-muted); }
.jlx-row__b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jlx-row__t { font-family: var(--jlx-display); font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--jlx-ink); }
.jlx-row__t a::after { content: ''; position: absolute; inset: 0; }
.jlx .jlx-row__t a:focus-visible { outline: 0; }
.jlx-row:focus-within { outline: 3px solid var(--jlx-blue); outline-offset: 2px; border-radius: 8px; }
.jlx-row:hover .jlx-row__t a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jlx-row__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px; color: var(--jlx-muted); }
.jlx-row__m strong { color: var(--jlx-body); font-weight: 700; }
.jlx-row__m .jlx-kind { font-size: 11.5px; }
.jlx-row__e { display: flex; align-items: center; gap: 18px; color: var(--jlx-blue-text); }

/* Sort and topic selects (light) */
.jlx-sel-form { display: flex; align-items: center; gap: 10px; }
.jlx-sel { display: flex; align-items: center; gap: 10px; }
.jlx-sel__l { font-size: 14px; font-weight: 700; color: var(--jlx-muted); }
.jlx .jlx-sel select { display: block; height: 46px; min-width: 190px; margin: 0; padding: 0 40px 0 14px; border-radius: 10px; border: 1px solid var(--jlx-line2); background: var(--jlx-field); color: var(--jlx-ink); font-size: 15px; font-weight: 700; -webkit-appearance: none; appearance: none; cursor: pointer; }
.jlx .jlx-sel select:hover { border-color: var(--jlx-blue); }
.jlx .jlx-sel select option { color: #0B1A2E; background: #FFFFFF; }
.jlx-sel__f .jlx-ic { color: var(--jlx-ink); }
.jlx-sfilter { display: none; }

/* Search */
.jlx-found { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jlx-found ul { display: flex; flex-wrap: wrap; gap: 10px; }
.jlx-found__l { margin-right: 4px; font-size: 15px; font-weight: 800; color: var(--jlx-muted); }
.jlx-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 15.5px; font-weight: 700; color: var(--jlx-body); }
.jlx-shelves--search .jlx-shelf:first-child { border-top: 1px solid var(--jlx-line); }
.jlx-sec--results .jlx-note { margin-top: 8px; }
.jlx-none__head { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.jlx-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.jlx-tips li { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 14px; background: var(--jlx-soft); }
.jlx-tips__t { font-size: 17px; font-weight: 800; color: var(--jlx-ink); }
.jlx-tips__d { font-size: 15px; line-height: 1.55; color: var(--jlx-body); }
.jlx-browse--light { margin-top: 0; }
.jlx-ltiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jlx .jlx-ltile { display: flex; align-items: center; gap: 12px; min-height: 64px; height: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--jlx-line); background: var(--jlx-card); color: var(--jlx-ink); transition: border-color .15s; }
.jlx .jlx-ltile:hover { border-color: var(--jlx-blue); }
.jlx .jlx-ltile > .jlx-ic { color: var(--jlx-blue-text); }
.jlx .jlx-ltile--all { border-style: dashed; border-color: var(--jlx-line2); background: transparent; }
.jlx-ltile__n { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.3; }

/* Talk strip */
.jlx-talk { padding: 0 0 88px; }
.jlx-talk__box { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px 48px; border-radius: 20px; background: var(--jlx-navy); }
html[data-ccl-theme="dark"] .jlx-talk__box { background: #0F192B; border: 1px solid #22304A; }
.jlx-talk__txt { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.jlx-talk h2 { font-family: var(--jlx-display); font-size: 32px; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; color: #FFFFFF; }
.jlx-talk p { font-size: 17px; line-height: 1.6; color: var(--jlx-dim); }
.jlx-talk__btns { flex: none; display: flex; gap: 12px; }

/* ---------- Laptop ---------- */
@media (max-width: 1180px) {
	.jlx-ahero { grid-template-columns: minmax(0, 1fr) 440px; gap: 40px; }
	.jlx-shero { grid-template-columns: minmax(0, 1fr) 520px; gap: 40px; }
	.jlx-tiles { gap: 14px; }
	.jlx-tile { padding: 20px; }
	.jlx-cards { gap: 20px; }
	.jlx-card { padding: 22px; }
	.jlx-card__t { font-size: 21px; }
	.jlx-talk__box { flex-direction: column; align-items: flex-start; gap: 24px; }
	.jlx-ltiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Tablet ---------- */
@media (max-width: 1023px) {
	.jlx-ahero, .jlx-shero { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: stretch; }
	.jlx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jlx-cards, .jlx-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jlx-cards--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
	.jlx-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jlx-shelf__head { align-items: flex-start; flex-direction: column; gap: 8px; }
	.jlx-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 18px; }
	.jlx-row__e .jlx-tag { display: none; }
	.jlx-tips { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
	.jlx .jlx-wide, .jlx .jlx-wide-b { display: none; }
	.jlx .jlx-narrow { display: inline; }
	.jlx-hero { padding: 20px 0 28px; }
	.jlx-hero--search { padding-bottom: 26px; }
	.jlx-crumb ol { gap: 2px 6px; font-size: 13.5px; }
	.jlx-h1, .jlx-h1--xl { font-size: 40px; letter-spacing: -0.02em; }
	.jlx--topic .jlx-h1 { font-size: 38px; }
	.jlx-h1--md { font-size: 32px; }
	.jlx-lead { font-size: 16.5px; }
	.jlx--a .jlx-lead { font-size: 16px; }
	.jlx-dhero { align-items: stretch; gap: 12px; padding: 18px 0 0; text-align: left; }
	.jlx-dhero .jlx-sbox { margin-top: 6px; }
	.jlx-sbox, .jlx-sbox--a, .jlx-sbox--value { height: 54px; }
	.jlx .jlx-sbox__go { padding: 0 16px; }
	.jlx-sbox__f { gap: 10px; padding-left: 14px; }
	.jlx-browse { margin-top: 18px; gap: 0; }
	.jlx-tiles, .jlx-chips { display: none; }
	.jlx-msel { display: flex; flex-direction: column; gap: 6px; }
	.jlx-ahero { padding: 18px 0 18px; gap: 18px; }
	.jlx-ahero__t { gap: 10px; }
	.jlx-eyebrow--ic { gap: 8px; }
	.jlx-eyebrow--ic .jlx-ic { width: 18px; height: 18px; }
	.jlx-shero { padding-top: 16px; gap: 16px; }

	.jlx-sec { padding: 28px 0 20px; }
	.jlx-sec .jlx-wrap { gap: 14px; }
	.jlx-sec--new { padding: 28px 0 24px; }
	.jlx-sec--shelves { padding: 4px 0 28px; }
	.jlx-sec--briefs { padding: 26px 0 10px; }
	.jlx-sec--arch, .jlx--all .jlx-sec--arch, .jlx-sec--briefs + .jlx-sec--arch { padding: 24px 0 28px; }
	.jlx--a .jlx-hero + .jlx-sec--arch { padding-top: 26px; }
	.jlx-sec--results { padding: 22px 0 28px; }
	.jlx-sec--none { padding: 28px 0 28px; }
	.jlx-sec--none .jlx-wrap { gap: 22px; }
	.jlx-sec__intro { gap: 6px; }
	.jlx-sec__head { flex-direction: column; align-items: stretch; gap: 14px; }
	.jlx-h2 { font-size: 26px; }
	.jlx-h2--sm, .jlx--a .jlx-h2 { font-size: 24px; }
	.jlx--search .jlx-h2--sm { font-size: 22px; line-height: 1.2; }
	.jlx-p { font-size: 15.5px; }
	.jlx-note { font-size: 14px; }

	.jlx-cards, .jlx-cards--2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.jlx-cards--3 > :last-child:nth-child(odd) { grid-column: auto; }
	.jlx-card, .jlx-card--wide { gap: 12px; padding: 20px; border-radius: 16px; }
	.jlx-card__t, .jlx-card--wide .jlx-card__t { font-size: 20px; }
	.jlx-card__x { font-size: 15px; }
	.jlx-card__t a::after { border-radius: 16px; }

	.jlx-shelf { gap: 0; padding: 22px 0 6px; border-top: 2px solid var(--jlx-ink); }
	.jlx-shelves--search .jlx-shelf:first-child { border-top: 2px solid var(--jlx-ink); }
	.jlx-shelf__head { flex-direction: row; align-items: center; padding-bottom: 6px; }
	.jlx-shelf__id { gap: 12px; }
	.jlx-shelf .jlx-tile-ic { width: 40px; height: 40px; border-radius: 10px; }
	.jlx-shelf .jlx-tile-ic .jlx-ic { width: 19px; height: 19px; }
	.jlx-shelf__n h3 { font-size: 21px; }
	.jlx-shelf__d { display: none; }
	.jlx-minis { display: flex; flex-direction: column; gap: 0; }
	.jlx-mini { gap: 8px; padding: 16px 0; border: 0; border-top: 1px solid var(--jlx-line); border-radius: 0; background: transparent; }
	.jlx-mini:focus-within { outline-offset: 0; }
	.jlx-mini__top .jlx-kind { font-size: 11px; }
	.jlx-mini__d { font-size: 12.5px; }
	.jlx-mini__t { font-size: 17.5px; }
	.jlx-mini__t a::after { border-radius: 0; }
	.jlx .jlx-shelf__all { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-top: 1px solid var(--jlx-line); font-size: 15.5px; font-weight: 800; color: var(--jlx-blue-text); }

	.jlx-sel-form { display: block; }
	.jlx-sel { flex-direction: column; align-items: stretch; gap: 6px; }
	.jlx-sel__l { font-size: 13px; }
	.jlx .jlx-sel select { width: 100%; height: 52px; padding-right: 44px; font-size: 16px; }
	.jlx-rows { border-bottom: 1px solid var(--jlx-line); }
	.jlx-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 0; align-items: center; }
	.jlx-row__b, .jlx-row__m { display: contents; }
	.jlx-row__m .jlx-kind { grid-area: 1 / 1; font-size: 11px; }
	.jlx-row__y { grid-area: 1 / 2; font-size: 12.5px; }
	.jlx-row__t { grid-area: 2 / 1 / 3 / 3; font-size: 17.5px; }
	.jlx-row__m > span:first-child { grid-area: 3 / 1 / 4 / 3; font-size: 14px; color: var(--jlx-muted); }
	.jlx-row__e { display: none; }

	.jlx-found { display: none; }
	.jlx-sfilter { display: block; }
	.jlx-tips li { padding: 16px 18px; }
	.jlx-ltiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }

	.jlx-talk { padding: 4px 0 36px; }
	.jlx-talk__box { gap: 14px; padding: 24px 20px; border-radius: 18px; }
	.jlx-talk h2 { font-size: 24px; }
	.jlx-talk p { font-size: 15.5px; }
	.jlx-talk__btns { flex-direction: column; align-self: stretch; gap: 12px; }
	.jlx .jlx-btn--gold, .jlx .jlx-btn--ghost { width: 100%; min-height: 52px; }
}
@media (max-width: 380px) {
	.jlx-h1, .jlx-h1--xl, .jlx--topic .jlx-h1 { font-size: 34px; }
	.jlx-card__t, .jlx-card--wide .jlx-card__t { font-size: 19px; }
	.jlx-card__top { flex-wrap: wrap; row-gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.jlx * { transition: none !important; }
}