/* "Journal" magazine-style design for the blog homepage and paginated article listings
   (all-articles archive + category pages). Adapted from client-supplied mockups
   (index_FINAL.html / archive-1.html), with every class prefixed jr- so nothing collides
   with the existing theme's very generic class names (.content, .top, .section, etc.).
   The site's own header/footer/nav are untouched — this only styles the area between them. */
:root {
  --jr-ink: #111;
  --jr-muted: #666;
  --jr-line: #d5d7da;
  --jr-blue: #0b3aa4;
}
/* Width is controlled by the site's own .container (max-width:1440px, same as the header/
   footer), wrapped around the content of each of these in the PHP templates — these rules
   only handle vertical spacing so the two don't fight over horizontal padding. */
.jr-journal { border-top: 3px solid #111; border-bottom: 1px solid #111; background: #fff; }
.jr-journal-name { text-align: center;  font-size: 31px; font-weight: 700; padding: 15px 0 11px; }
/* Masthead links to the journal homepage but must read as plain text, not a link. */
.jr-journal-name a,
.jr-journal-name a:hover,
.jr-journal-name a:focus { color: inherit; text-decoration: none; }
.jr-journal-nav {
  display: flex; gap: 25px; padding: 9px 0;
  border-top: 1px solid #e2e4e6; font-size: 11px; font-weight: 700;
  white-space: nowrap; overflow-x: auto;
  /* Centred while the tabs fit, left-aligned once they overflow.
     NOT done with `justify-content: center`: on an overflowing scroll container that pushes
     the excess off BOTH edges, and you cannot scroll left past the container's start, so the
     first tabs become permanently unreachable (measured at -450px on a 375px viewport).
     This previously used `justify-content: safe center` with plain `center` ahead of it as a
     fallback — but that "fallback" is the bug itself, so any browser or situation where the
     `safe` form doesn't take effect lands straight back on the broken behaviour, which is what
     was still being seen on iOS.
     Auto margins on the end items need no alignment keyword at all: with free space the two
     autos split it and the row centres; with overflow they resolve to 0 and the row starts at
     the left edge, fully scrollable. Plain flexbox, same result everywhere. */
  justify-content: flex-start;
}
.jr-journal-nav > :first-child { margin-left: auto; }
.jr-journal-nav > :last-child { margin-right: auto; }
.jr-journal-nav a { color: var(--jr-ink); text-decoration: none; }
.jr-journal-nav a:hover, .jr-journal-nav a.jr-active { color: var(--jr-blue); }

.jr-trend {
  display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px solid #e6e7e8;
  font-size: 11px; overflow: hidden; white-space: nowrap; background: #fff; color: #333;
}
.jr-trend b { color: var(--jr-blue); }
.jr-trend a { color: inherit; text-decoration: none; }
.jr-trend a:hover { color: var(--jr-blue); }

.jr-content { padding: 26px 0 52px; background: #fff; }
.jr-kicker { font-size: 10px; color: var(--jr-blue); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.jr-kicker a { color: inherit; text-decoration: none; }
.jr-meta { font-size: 10px; color: #777; }

/* No bottom rule here — the next section's .jr-sectionhead already draws the divider above its
   heading, so a border here stacked a second line underneath it. */
.jr-top { padding-bottom: 25px; }
.jr-top-grid {
  display: grid; grid-template-columns: minmax(210px,.72fr) minmax(0,1.65fr) minmax(210px,.72fr);
  gap: 24px;
}
.jr-left, .jr-right { min-width: 0; }
.jr-left { border-right: 1px solid var(--jr-line); padding-right: 22px; }
.jr-right { border-left: 1px solid var(--jr-line); padding-left: 22px; }
.jr-support { padding: 0 0 17px; margin-bottom: 17px; border-bottom: 1px solid #e8eaeb; }
.jr-support h2 { font-weight: 700; font-size: 20px; line-height: 1.1; margin: 0 0 6px; }
.jr-support h2 a { color: var(--jr-ink); text-decoration: none; }
.jr-support h2 a:hover { color: var(--jr-blue); }
.jr-support p { font-size: 11.5px; line-height: 1.45; color: #555; margin: 0; }

.jr-lead h1 {  font-weight: 700; font-size: 40px; line-height: 1.08; letter-spacing: -1px; margin: 0 0 10px; }
.jr-lead h1 a { color: var(--jr-ink); text-decoration: none; }
.jr-lead h1 a:hover { color: var(--jr-blue); }
.jr-lead .jr-dek {  font-size: 17px; line-height: 1.45; color: #444; margin: 0 0 10px; }
.jr-hero {
  height: 340px; background: #eef0ef center/cover no-repeat; margin-top: 14px;
  position: relative; overflow: hidden; border-radius: 4px;
}
.jr-hero-tag {
  position: absolute; left: 16px; bottom: 14px;  font-weight: 700; font-size: 11px; color: #fff;
  letter-spacing: .12em; background: #0b3aa4cc; padding: 7px 9px;
}

.jr-blocktitle { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; border-bottom: 2px solid #111; padding-bottom: 8px; margin: 0 0 9px; }
.jr-rank { display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding: 11px 0; border-bottom: 1px solid #e8eaeb; }
.jr-rank .jr-n { font-size: 25px; color: #999; }
.jr-rank h3 { font-weight: 700; font-size: 15px; line-height: 1.2; margin: 0; }
.jr-rank h3 a { color: var(--jr-ink); text-decoration: none; }
.jr-rank h3 a:hover { color: var(--jr-blue); }

.jr-section { padding-top: 28px; }
.jr-sectionhead { display: flex; align-items: end; justify-content: space-between; border-top: 2px solid #111; padding-top: 8px; margin-bottom: 17px; }
.jr-sectionhead h2 { font-weight: 700; font-size: 27px; margin: 0; }
.jr-sectionhead a { color: var(--jr-blue); font-size: 10px; font-weight: 700; text-decoration: none; }

.jr-triad { display: grid; grid-template-columns: minmax(210px,.72fr) minmax(0,1.65fr) minmax(210px,.72fr); gap: 24px; }
.jr-column { min-width: 0; }
.jr-column:nth-child(2) { border-left: 1px solid #e5e7e8; border-right: 1px solid #e5e7e8; padding: 0 22px; }
.jr-story { padding: 14px 0; border-top: 1px solid #e8eaeb; }
.jr-story:first-child { border-top: 0; padding-top: 0; }
.jr-story h3 { font-weight: 700; font-size: 19px; line-height: 1.12; margin: 0 0 6px; }
.jr-story h3 a { color: var(--jr-ink); text-decoration: none; }
.jr-story h3 a:hover { color: var(--jr-blue); }
.jr-story.jr-center h3 { font-size: 23px; }
.jr-story p { font-size: 11.5px; line-height: 1.45; color: #555; margin: 0 0 6px; }
.jr-image { height: 120px; background: #f3f3f1 center/cover no-repeat; margin-bottom: 10px; border-radius: 3px; }
.jr-center .jr-image { height: 180px; }

.jr-archive-head { display: flex; justify-content: space-between; align-items: end; border-bottom: 4px double #222; padding-bottom: 12px; margin-bottom: 22px; }
.jr-archive-head h1 { font-weight: 700; font-size: 38px; margin: 0; }
.jr-archive-head p { font-size: 11px; color: #666; margin: 0; }
/* Three independent columns, not one grid — a grid stretches every card on a row to the
   tallest, which left large gaps beneath the shorter left/right cards. */
.jr-archive-cols {
  display: grid; grid-template-columns: minmax(210px,.72fr) minmax(0,1.65fr) minmax(210px,.72fr);
  gap: 0 24px;
}
.jr-archive-col { min-width: 0; }
.jr-archive-col:nth-child(2) { border-left: 1px solid #e5e7e8; border-right: 1px solid #e5e7e8; padding: 0 22px; }

.jr-archive-card { padding: 18px 0; border-bottom: 1px solid #dedfe1; }
.jr-archive-card:first-child { padding-top: 0; }
/* Artwork is the 617x324 banner, so the box keeps that ~1.9:1 ratio and scales with the
   column rather than being pinned to a fixed height. */
.jr-archive-thumb {
  display: block; width: 100%; aspect-ratio: 617 / 324;
  background: #e9e9e6 center/cover no-repeat; margin-bottom: 12px; border-radius: 3px;
}
.jr-archive-card h2 { font-weight: 700; font-size: 19px; line-height: 1.15; margin: 0 0 7px; }
.jr-archive-card h2 a { color: var(--jr-ink); text-decoration: none; }
.jr-archive-card h2 a:hover { color: var(--jr-blue); }
.jr-archive-col:nth-child(2) .jr-archive-card h2 { font-size: 23px; }
.jr-archive-card .jr-desc { font-size: 11.5px; line-height: 1.45; color: #555; margin: 0 0 8px; }

.jr-pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 30px; }
.jr-pagination a, .jr-pagination span {
  min-width: 34px; height: 34px; border: 1px solid #cdd1d3; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; text-decoration: none; color: var(--jr-ink);
}
.jr-pagination a:hover { border-color: var(--jr-blue); color: var(--jr-blue); }
.jr-pagination .jr-active { background: #111; color: #fff; border-color: #111; }
.jr-pagination .jr-wide { padding: 0 12px; }
.jr-pagination .jr-disabled { opacity: .4; pointer-events: none; }

@media (max-width: 900px) {
  .jr-top-grid, .jr-triad { grid-template-columns: 1fr 1.5fr; }
  .jr-right { grid-column: 1/-1; border-left: 0; padding-left: 0; border-top: 1px solid var(--jr-line); padding-top: 18px; }
  /* Two columns: the third wraps underneath, and only the first keeps a divider. */
  .jr-archive-cols { grid-template-columns: 1fr 1fr; }
  .jr-archive-col:nth-child(2) { border-right: 0; padding-right: 0; }
  .jr-archive-col:nth-child(3) { grid-column: 1/-1; border-top: 1px solid #e5e7e8; padding-top: 18px; }
  .jr-triad .jr-column:nth-child(3) { grid-column: 1/-1; }
  .jr-column:nth-child(2) { border-right: 0; }
}
@media (max-width: 650px) {
  /* Narrow screens keep Previous/Next plus at most three numbers — the sliding window
     render_pagination_nav() marks; everything outside it carries .jr-page-hide. */
  .jr-pagination .jr-page-hide { display: none; }
  .jr-content { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 767px) {
  .jr-journal-name{ font-size: 19px;}
  .jr-top-grid, .jr-triad { grid-template-columns: 1fr; }
  .jr-archive-cols { grid-template-columns: 1fr; }
  .jr-archive-col:nth-child(n) { border: 0; padding-left: 0; padding-right: 0; }
  .jr-archive-col:nth-child(n+2) { border-top: 1px solid #e5e7e8; padding-top: 18px; }
  .jr-left, .jr-right, .jr-column:nth-child(2) { border: 0; padding-left: 0; padding-right: 0; }
  .jr-lead h1 { font-size: 28px; }
  .jr-story h3{ font-size: 19px;}
  .jr-hero { height: 220px; }
  .jr-archive-col:nth-child(2) .jr-archive-card h2 { font-size: 19px; }
}

/* ---------------------------------------------------------------------------
   Category (editorial grouping) pages — adapted from the supplied mockups.
   Width/padding come from the site's own .container, so these rules only cover
   the internal layout, exactly as the rest of the jr- styles do.
   --------------------------------------------------------------------------- */
/* Font size matches the homepage's .jr-journal-nav (11px). With the full editorial grouping
   names the seven tabs are wide, so the padding is trimmed to let them sit on one line at
   desktop widths instead of forcing a horizontal scrollbar. */
.jr-sectionnav {
  display: flex; gap: 0; border-bottom: 1px solid #111;
  overflow-x: auto; white-space: nowrap;
}
.jr-sectionnav a {
  padding: 12px 12px 10px; font-size: 11px; font-weight: 700; color: var(--jr-ink);
  text-decoration: none; border-right: 1px solid #e2e2e2;
}
.jr-sectionnav a:last-child { border-right: 0; }
.jr-sectionnav a:hover { color: var(--jr-blue); }
.jr-sectionnav a.jr-active { border-bottom: 4px solid #111; }

.jr-cat-heading { padding: 29px 0 12px; }
.jr-cat-heading h1 {  font-size: 42px; line-height: 1; margin: 0 0 8px; letter-spacing: -1.1px; }
.jr-cat-heading p {  font-size: 16px; color: #555; margin: 0; max-width: 760px; line-height: 1.45; }
.jr-cat-rule { border-top: 1px solid #111; }

.jr-leadgrid {
  display: grid; grid-template-columns: 1fr 1.65fr .9fr; gap: 24px;
  padding: 20px 0 24px; border-bottom: 1px solid #111;
}
.jr-leadgrid > div { min-width: 0; }
.jr-leftcol, .jr-centercol { padding-right: 24px; border-right: 1px solid var(--jr-line); }

.jr-cat-story { border-bottom: 1px solid var(--jr-line); padding-bottom: 18px; margin-bottom: 18px; }
.jr-cat-story:last-child { margin-bottom: 0; }
.jr-cat-story .jr-thumb { width: 100%; height: 150px; display: block; background: #e9e9e6 center/cover no-repeat; margin-bottom: 12px; }
.jr-cat-story h3 {  font-size: 21px; line-height: 1.16; margin: 0; letter-spacing: -.3px; }
.jr-cat-story h3 a { color: var(--jr-ink); text-decoration: none; }
.jr-cat-story h3 a:hover { text-decoration: underline; }
.jr-cat-story p {  font-size: 14px; color: var(--jr-muted); line-height: 1.42; margin: 8px 0; }

.jr-feature .jr-thumb { width: 100%; height: 360px; display: block; background: #e9e9e6 center/cover no-repeat; margin-bottom: 15px; }
.jr-feature h2 {  font-size: 34px; line-height: 1.08; letter-spacing: -.7px; margin: 0; }
.jr-feature h2 a { color: var(--jr-ink); text-decoration: none; }
.jr-feature h2 a:hover { text-decoration: underline; }
.jr-feature p {  font-size: 16px; color: var(--jr-muted); line-height: 1.42; margin: 10px 0; }

.jr-righttitle {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700;
  border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 4px;
}
.jr-headlineonly { padding: 14px 0; border-bottom: 1px solid var(--jr-line); }
.jr-headlineonly h3 {  font-size: 19px; line-height: 1.2; margin: 0; }
.jr-headlineonly h3 a { color: var(--jr-ink); text-decoration: none; }
.jr-headlineonly h3 a:hover { text-decoration: underline; }
.jr-popularbox { margin-top: 24px; }
.jr-popularbox .jr-righttitle { margin-bottom: 0; }
.jr-popular { counter-reset: item; margin: 0; padding: 0; }
.jr-popular li {
  list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 13px 0;
  border-bottom: 1px solid var(--jr-line);  font-size: 15px; line-height: 1.25;
}
.jr-popular li:before { counter-increment: item; content: counter(item);  font-size: 20px; color: #777; }
.jr-popular a { color: var(--jr-ink); text-decoration: none; }
.jr-popular a:hover { text-decoration: underline; }

.jr-more { padding: 24px 0 38px; }
.jr-morehead { display: flex; justify-content: space-between; align-items: end; border-bottom: 2px solid #111; padding-bottom: 9px; }
.jr-morehead h2 {  font-size: 25px; margin: 0; }
.jr-morehead span { font-size: 11px; color: #777; }
.jr-moregrid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
.jr-morestory {
  display: grid; grid-template-columns: 130px 1fr; gap: 15px; padding: 20px 0;
  border-bottom: 1px solid var(--jr-line); min-height: 155px;
}
.jr-morestory:nth-child(3n+1), .jr-morestory:nth-child(3n+2) { padding-right: 24px; border-right: 1px solid var(--jr-line); }
.jr-morestory .jr-thumb { width: 130px; height: 105px; display: block; background: #e9e9e6 center/cover no-repeat; }
.jr-morestory h3 {  font-size: 18px; line-height: 1.18; margin: 0; }
.jr-morestory h3 a { color: var(--jr-ink); text-decoration: none; }
.jr-morestory h3 a:hover { text-decoration: underline; }
.jr-morestory p {  font-size: 13px; color: var(--jr-muted); line-height: 1.42; margin: 7px 0 0; }

@media (max-width: 1000px) {
  .jr-leadgrid { grid-template-columns: 1fr 1.5fr; }
  .jr-rightcol { grid-column: 1/-1; border-top: 1px solid #111; padding-top: 20px; }
  .jr-moregrid { grid-template-columns: 1fr 1fr; }
  .jr-morestory:nth-child(n) { border-right: 0; padding-right: 0; }
  .jr-morestory:nth-child(odd) { border-right: 1px solid var(--jr-line); padding-right: 20px; }
}
@media (max-width: 700px) {
  .jr-leadgrid { grid-template-columns: 1fr; }
  .jr-leftcol, .jr-centercol { border-right: 0; padding-right: 0; }
  .jr-feature .jr-thumb { height: 250px; }
  .jr-moregrid { grid-template-columns: 1fr; }
  .jr-morestory:nth-child(n) { border-right: 0; padding-right: 0; }
  .jr-cat-heading h1 { font-size: 36px; }
}