/* JR Web 3.1 · extension of Brand System 3.0. Portal and reader only.
   Paper is the structural surface. Contextual depth belongs to cover art. */
body.jr-portal {
  --jr-space: clamp(24px, 4vw, 56px);
  --jr-page: min(100% - var(--jr-space) * 2, 1296px);
  font-family: var(--jr-sans);
}
.jr-skip-link { position: fixed; left: 16px; top: -100px; z-index: 10000; padding: 14px 20px; background: var(--jr-paper); color: var(--jr-red); }
.jr-skip-link:focus { top: 12px; }
body.jr-portal #heroSection { grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 28px 48px; padding-inline: max(var(--jr-space), calc((100vw - 1296px)/2)); padding-bottom: 40px; }
body.jr-portal #heroSection .nav { gap: 24px; padding-block: 12px !important; }
body.jr-portal #heroSection .nav-logo-mark { width: 220px !important; height: 64px !important; }
body.jr-portal #heroSection .nav .nav-links { gap: 22px; }
body.jr-portal #heroSection .nav .nav-links a { font: 500 .85rem/1.4 var(--jr-sans); letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; min-height: 44px; }
body.jr-portal #heroSection .hero-bg-slides { width: min(100%, 500px); justify-self: center; grid-column: 2; grid-row: 2; }
body.jr-portal #heroSection .hero-bg-slide { display: block; }
body.jr-portal #heroSection .hero-bg-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.jr-portal #heroSection .hero-text-panel { grid-column: 1; grid-row: 2; }
body.jr-portal #heroSection .hero-slide-title { font-family: var(--jr-serif); font-size: clamp(2.25rem, 3.6vw, 3.6rem) !important; font-weight: 500; letter-spacing: -.035em; line-height: 1.1 !important; text-wrap: balance; margin: 14px 0 20px; }
body.jr-portal #heroSection .hero-slide-sub { font: 400 clamp(1rem,1.4vw,1.15rem)/1.65 var(--jr-sans); max-width: 48ch; margin: 0; }
body.jr-portal #heroSection .hero-slide-cat { font: 600 .75rem/1.5 var(--jr-sans); letter-spacing: .04em; }
.jr-hero-read[hidden] { display: none; }
.jr-hero-read { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; margin-top: 24px; color: var(--jr-red); font: 600 .9rem/1.5 var(--jr-sans); border-bottom: 1px solid var(--jr-red); }
body.jr-portal .jr-search-toggle { margin-left: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--jr-fog); background: transparent; color: var(--jr-ink); font: 500 .85rem var(--jr-sans); cursor: pointer; }
body.jr-portal .site-main :is(.jr-latest,.section.editorial-section,.jr-topics) { width: var(--jr-page); max-width: none; margin-inline: auto; padding: clamp(36px,5vw,64px) 0; border: 0; }
body.jr-portal .site-main .jr-latest { border-bottom: 1px solid var(--jr-fog); }
body.jr-portal .site-main :is(.jr-latest-head,.section-header,.jr-web-section-head) { display: flex; align-items: end; justify-content: space-between; padding: 0; margin: 0 0 28px; border: 0; gap: 24px; }
body.jr-portal .site-main .jr-latest-head::after { display: none; }
body.jr-portal .site-main :is(.section-title,#latestTitle,#topicsTitle) { margin: 6px 0 0; font: 500 clamp(1.8rem,2.7vw,2.5rem)/1.15 var(--jr-serif); letter-spacing: -.025em; color: var(--jr-ink); }
body.jr-portal .site-main :is(.jr-web-kicker,.section-label) { display: block; margin: 0; color: var(--jr-red); font: 600 .75rem/1.5 var(--jr-sans); text-transform: none; letter-spacing: .025em; }
body.jr-portal .site-main .jr-latest-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; padding: 0; overflow: visible; }
.jr-story { min-width: 0; display: flex; flex-direction: column; color: var(--jr-ink); text-decoration: none; }
.jr-story-image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--jr-fog); }
.jr-story-image.is-portrait { aspect-ratio: 4 / 5; object-fit: contain; background: var(--jr-paper); }
.jr-story-body { padding: 18px 0 0; min-width: 0; }
.jr-story h3 { font: 500 clamp(1.35rem,1.8vw,1.75rem)/1.23 var(--jr-serif); letter-spacing: -.025em; margin: 8px 0 12px; text-wrap: balance; }
.jr-story p { font: 400 1rem/1.65 var(--jr-sans); color: var(--jr-slate); margin: 0 0 14px; }
.jr-story-date { display: block; color: var(--jr-slate); font: 400 .8rem/1.5 var(--jr-sans); }
.jr-story:hover h3, .jr-story:focus-visible h3 { color: var(--jr-red); text-decoration: underline; text-underline-offset: .15em; }
.jr-curation-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 32px; align-items: start; grid-template-rows: min-content 1fr; }
.jr-curation-grid .jr-story-lead { grid-row: span 2; }
.jr-curation-grid .jr-story-lead .jr-story-image { max-height: 580px; }
.jr-curation-grid .jr-story-lead h3 { font-size: clamp(1.7rem,2.4vw,2.3rem); }
.jr-curation-grid .jr-story:not(.jr-story-lead) { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--jr-fog); }
.jr-curation-grid .jr-story:not(.jr-story-lead) .jr-story-body { padding: 0; }
.jr-curation-grid .jr-story:not(.jr-story-lead) h3 { font-size: clamp(1.25rem,1.6vw,1.55rem); }
.jr-curation-grid .jr-story:not(.jr-story-lead) p { font-size: .92rem; }
.jr-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
body.jr-portal .site-main .jr-topics { border-block: 1px solid var(--jr-fog); }
.jr-web-section-head > p { max-width: 38ch; font: 400 1rem/1.65 var(--jr-sans); color: var(--jr-slate); margin: 0; }
.jr-topic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 24px; }
.jr-topic-grid button { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border: 0; border-bottom: 1px solid var(--jr-fog); background: transparent; color: var(--jr-ink); font: 500 1.2rem var(--jr-serif); text-align: left; cursor: pointer; }
.jr-topic-grid button span { color: var(--jr-red); }
.jr-topic-grid button:hover { color: var(--jr-red); }
body.jr-portal .site-main :is(.guide-hub-inner,.consult-home-inner) { padding-block: 36px; }
body.jr-portal .site-main .guide-hub-copy { font-weight: 400; font-size: 1rem; line-height: 1.65; }
body.jr-portal .site-main .guide-hub-label { font: 600 .75rem/1.5 var(--jr-sans); letter-spacing: .025em; }
body.jr-portal .site-main .guide-hub-title { font-size: clamp(1.8rem,2.7vw,2.5rem); line-height: 1.15; }
body.jr-portal .site-main .guide-hub-card { border-radius: 0; }
body.jr-portal .site-main .guide-hub-card strong { font-size: 1.5rem; line-height: 1.2; }
body.jr-portal .site-main .guide-hub-card span { font-size: .95rem; line-height: 1.65; font-weight: 400; }
body.jr-portal .site-main .jr-news-section { padding-bottom: 16px; }
/* Modal search uses native focus containment and Escape handling. */
.jr-search { position: fixed; inset: 0; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); height: auto; margin: auto; padding: clamp(20px,4vw,36px); border: 1px solid var(--jr-fog); background: var(--jr-paper); color: var(--jr-ink); overflow-y: auto; font-family: var(--jr-sans); }
.jr-search::backdrop { background: rgb(21 21 21 / .55); }
.jr-search-head { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 24px; }
.jr-search h2 { font: 500 clamp(1.5rem,3vw,2rem)/1.2 var(--jr-serif); margin: 0; }
.jr-search button { min-height: 44px; padding: 10px 14px; border: 1px solid var(--jr-fog); color: var(--jr-red); background: transparent; font: 500 .85rem var(--jr-sans); cursor: pointer; }
.jr-search label { display: block; margin-bottom: 10px; font-size: .9rem; }
.jr-search-field { display: flex; gap: 8px; }
.jr-search input { min-width: 0; flex: 1; min-height: 48px; padding: 12px; border: 1px solid var(--jr-slate); border-radius: 0; background: var(--jr-paper); color: var(--jr-ink); font: 400 1rem var(--jr-sans); }
.jr-search-field button { background: var(--jr-red); color: var(--jr-paper); border: 0; }
.jr-search-filter:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
#searchStatus { margin: 20px 0; color: var(--jr-slate); font-size: .9rem; line-height: 1.5; }
#searchResults { list-style: none; margin: 0; padding: 0; }
#searchResults li { display: grid; gap: 6px; padding: 16px 0; border-top: 1px solid var(--jr-fog); }
#searchResults a { color: var(--jr-ink); font: 500 1.25rem/1.4 var(--jr-serif); text-decoration-thickness: 1px; text-underline-offset: .18em; }
#searchResults a:hover { color: var(--jr-red); }
#searchResults span { font-size: .8rem; color: var(--jr-slate); }
.jr-search-more { margin-top: 20px; width: 100%; }
/* Long-form hash reader follows the same scale as the static article template. */
body.jr-portal .article-inner { max-width: 820px; padding-inline: 32px; margin: 0 auto; }
body.jr-portal .article-view h1 { font: 500 clamp(2rem,4.2vw,3.5rem)/1.15 var(--jr-serif); letter-spacing: -.035em; text-wrap: balance; max-width: 100%; overflow-wrap: break-word; word-break: normal; }
body.jr-portal .article-view .a-subtitle { font: 400 1.1rem/1.65 var(--jr-sans); }
body.jr-portal .article-view .a-meta { font: 400 .85rem/1.6 var(--jr-sans); letter-spacing: 0; }
body.jr-portal .a-body { font-family: var(--jr-sans); }
body.jr-portal .a-body :is(h2,h3) { font-family: var(--jr-serif); line-height: 1.25; }
body.jr-portal .article-brand-lockup img { border: 0; border-radius: 0; }
@media (max-width: 1100px) {
  body.jr-portal #heroSection .nav .nav-links { display: none; }
  body.jr-portal #heroSection .nav-toggle { display: flex; flex-shrink: 0; }
  body.jr-portal #heroSection .jr-search-toggle { margin-left: auto; }
  body.jr-portal #heroSection .nav.is-open .nav-links { display: flex; position: absolute; z-index: 20; inset: 100% 0 auto; width: auto; align-items: flex-start; padding: 20px 24px; gap: 4px; }
  .jr-curation-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; }
  .jr-curation-grid .jr-story:not(.jr-story-lead) { display: flex; gap: 0; }
  .jr-curation-grid .jr-story:not(.jr-story-lead) .jr-story-image { max-height: 300px; }
  .jr-curation-grid .jr-story:not(.jr-story-lead) .jr-story-body { padding-top: 18px; }
}
@media (max-width: 700px) {
  body.jr-portal #heroSection { grid-template-columns: minmax(0,1fr); gap: 20px; }
  body.jr-portal #heroSection .nav { gap: 10px; min-height: 84px; }
  body.jr-portal #heroSection .nav-logo-mark { width: 180px !important; height: 52px !important; }
  body.jr-portal #heroSection .nav-toggle { width: 44px; height: 44px; }
  body.jr-portal #heroSection .jr-search-toggle { padding-inline: 10px; }
  body.jr-portal #heroSection .hero-bg-slides { grid-row: 2; grid-column: 1; width: min(100%,440px); }
  body.jr-portal #heroSection .hero-text-panel { grid-row: 3; grid-column: 1; padding: 0 !important; }
  body.jr-portal #heroSection .hero-slide-title { font-size: clamp(2rem,7.6vw,3rem) !important; }
  .jr-hero-read { margin-top: 16px; }
  body.jr-portal .site-main :is(.jr-latest-grid,.jr-category-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  body.jr-portal .site-main .jr-latest-grid .jr-story:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: center; }
  body.jr-portal .site-main .jr-latest-grid .jr-story:first-child .jr-story-body { padding: 0; }
  .jr-story h3 { font-size: 1.35rem; }
  .jr-story p { font-size: .95rem; }
  .jr-curation-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .jr-curation-grid .jr-story-lead { grid-row: auto; }
  .jr-curation-grid .jr-story:not(.jr-story-lead) { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,3fr); gap: 20px; }
  .jr-curation-grid .jr-story:not(.jr-story-lead) .jr-story-body { padding: 0; }
  .jr-topic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; }
  body.jr-portal .site-main .jr-web-section-head { display: block; }
  .jr-web-section-head > p { margin-top: 16px; }
  body.jr-portal .article-inner { width: calc(100% - 48px) !important; max-width: none !important; padding-inline: 0; }
}
@media (max-width: 380px) {
  body.jr-portal { --jr-space: 16px; }
  body.jr-portal #heroSection .nav-logo-mark { width: 150px !important; height: 46px !important; }
  body.jr-portal #heroSection .nav { gap: 8px; }
  body.jr-portal .site-main :is(.jr-latest-grid,.jr-category-grid) { grid-template-columns: minmax(0,1fr); }
  body.jr-portal .site-main .jr-latest-grid .jr-story:first-child { display: flex; }
  .jr-curation-grid .jr-story:not(.jr-story-lead) { grid-template-columns: minmax(0,1fr); }
  .jr-search-head { flex-direction: column-reverse; }
  .jr-search-head button { align-self: end; }
}
/* Topic labels and article counts share the same registry as the header. */
.jr-topic-grid button { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; min-height: 104px; padding: 20px 28px 20px 0; }
.jr-topic-grid button > span:not(.jr-topic-arrow) { color: inherit; }
.jr-topic-grid button small { color: var(--jr-slate); font: 400 .8rem/1.5 var(--jr-sans); }
.jr-topic-grid .jr-topic-arrow { position: absolute; right: 0; top: 24px; }
/* A dedicated destination, rather than a topic mixed into the cultural feed. */
body.jr-portal .jr-oni-entry{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0 auto 48px;width:calc(100% - 112px);max-width:1296px;padding:28px 0;border-top:1px solid var(--jr-fog);border-bottom:1px solid var(--jr-fog)}
body.jr-portal .jr-oni-entry h2{font:500 clamp(1.5rem,2.4vw,2rem)/1.2 var(--jr-serif);margin:8px 0}
body.jr-portal .jr-oni-entry p{color:var(--jr-slate)}
body.jr-portal .jr-oni-entry a{display:inline-flex;gap:24px;align-items:center;min-height:44px;white-space:nowrap;color:var(--jr-red);font-size:.875rem}
@media(max-width:700px){body.jr-portal .jr-oni-entry{width:calc(100% - 40px);display:block;margin-bottom:32px}body.jr-portal .jr-oni-entry a{margin-top:16px}}