/* Optional reading layout; the editorial front page keeps its full width. */
.jn-reading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.jn-reading__main, .jn-sidebar, .jn-sidebar__widgets, .jn-widget { min-width: 0; }
.jn-reading .jn-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.jn-sidebar { display: grid; gap: 24px; padding-block: 32px; }
.jn-sidebar__widgets { display: grid; gap: 20px; }
.jn-sidebar__widgets:empty { display: none; }
.jn-widget { padding: 20px; border: 1px solid var(--glass-edge); border-radius: var(--radius); color: var(--ink); background-color: var(--glass-fill); background-image: var(--glass-sheen); box-shadow: var(--glass-shadow); overflow-wrap: anywhere; overflow-x: auto; }
.jn-widget__title { margin: 0 0 16px; font-size: var(--text-lead); }
.jn-widget :is(input, select, textarea, iframe, video) { max-width: 100%; }
.jn-widget :is(input, select, textarea) { min-width: 0; }
.jn-widget ul { padding-inline-start: 20px; }
.jn-widget figure { margin-inline: 0; }
.jn-widget table { display: block; max-width: 100%; overflow-x: auto; }
.jn-widget a:where(:hover, :focus-visible) { color: var(--accent-text); }
@media (min-width: 960px) {
    .jn-reading--from-960.jn-reading--columns { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
    .jn-reading--from-960.jn-reading--left.jn-reading--columns { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
    .jn-reading--from-960.jn-reading--left.jn-reading--columns > .jn-reading__main { grid-column: 2; grid-row: 1; }
    .jn-reading--from-960.jn-reading--left.jn-reading--columns > .jn-sidebar { grid-column: 1; grid-row: 1; }
    .jn-reading--mobile-only > .jn-sidebar { display: none; }
}
@media (min-width: 1100px) {
    .jn-reading--from-1100.jn-reading--columns { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
    .jn-reading--from-1100.jn-reading--left.jn-reading--columns { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
    .jn-reading--from-1100.jn-reading--left.jn-reading--columns > .jn-reading__main { grid-column: 2; grid-row: 1; }
    .jn-reading--from-1100.jn-reading--left.jn-reading--columns > .jn-sidebar { grid-column: 1; grid-row: 1; }
}
@media (min-width: 1280px) {
    .jn-reading--from-1280.jn-reading--columns { grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); }
    .jn-reading--from-1280.jn-reading--left.jn-reading--columns { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); }
    .jn-reading--from-1280.jn-reading--left.jn-reading--columns > .jn-reading__main { grid-column: 2; grid-row: 1; }
    .jn-reading--from-1280.jn-reading--left.jn-reading--columns > .jn-sidebar { grid-column: 1; grid-row: 1; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .jn-widget { -webkit-backdrop-filter: blur(var(--glass-blur-quiet)); backdrop-filter: blur(var(--glass-blur-quiet)); }
}
@media (prefers-reduced-transparency: reduce) {
    .jn-widget { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Only our image creative has a visual frame; third-party ads keep their material. */
.jn-ad-placement { margin-block: 24px; }
.jn-ad { --ad-height: var(--ad-height-mobile); display: block; min-width: 0; max-width: 100%; margin-block: 24px; overflow-x: clip; }
.jn-ad__label { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--text-xs); line-height: 1.5; text-align: center; }
.jn-ad__body { min-width: 0; max-width: 100%; }
.jn-ad--code .jn-ad__body { min-height: var(--ad-height); }
.jn-ad--image .jn-ad__body { border: 1px solid var(--glass-edge); border-radius: 8px; overflow: hidden; }
.jn-ad--image a { display: block; }
.jn-ad--image img { display: block; width: 100%; height: auto; }
.jn-ad__body iframe { max-width: 100%; border: 0; }
.jn-sidebar > .jn-ad { margin-block: 0; }
@media (max-width: 959px) { .jn-ad--no-mobile { display: none; } }
@media (min-width: 960px) {
    .jn-ad { --ad-height: var(--ad-height-desktop); }
    .jn-ad--no-desktop { display: none; }
}
.jn-ad-placement:has(> .jn-ad--no-mobile) { margin-block: 0; }
@media (min-width: 960px) {
    .jn-ad-placement:has(> .jn-ad--no-mobile) { margin-block: 24px; }
    .jn-ad-placement:has(> .jn-ad--no-desktop) { margin-block: 0; }
}
