/* The Weather Journal stylesheet. Rebuilt 2026-09-10 to the j-001 design:
   lead package, capped section modules with wing-tint top rules, a working
   rail, and ONE shared article shell for every wing. Every color is an
   existing style.css token; nothing anywhere under 12px.
   UNIFICATION DEBT (2026-08-20): the bottom bar + sheet below are the
   THIRD hand-rolled copy of the mobile shell (app, school, journal). The
   z-order law is copied from the school's 2026-08-19 trap fix: the sheet
   sits UNDER the bar (1300 vs 1400) so the Menu button that opened it can
   always close it. When the shells unify, this block and
   weather-school/school.css merge into one shared file. */

:root { --topbar-h: 56px; } /* journal.js measures the real header; never hardcoded downstream */

/* style.css app mode (>=900x600) pins html and body to one screen height
   for the forecast dashboard; on a journal page that caps every sticky
   range at one viewport, so the sub-tab bar quietly stopped sticking
   900px into a read (found j-002, 2026-09-10). Journal pages scroll. */
@media (min-width: 900px) and (min-height: 600px) {
  html, body { height: auto; min-height: 100%; }
}

.st-wrap { margin: 0 auto; }
.st-wrap .card { margin-bottom: 14px; }
.st-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; margin: 0 0 4px; text-wrap: balance; }
.st-sub { color: var(--muted); margin: 0; line-height: 1.5; font-size: 14px; text-wrap: pretty; }
.st-home { display: inline-block; margin-top: 4px; padding: 4px 0; color: var(--accent-ink); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--accent); }
.jl-back-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 4px 0 0; }
.jf-kicker { display: block; font-size: 12px; line-height: 1.3; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
.jl-eyebrow { font-size: 12px; font-weight: 750; letter-spacing: 1.6px; color: var(--accent-ink); margin: 0 0 8px; }
.st-wrap [hidden] { display: none !important; }

/* ---------- hub: two columns below the tab row ---------- */
@media (min-width: 900px) {
  .jl-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
  /* the rail runs the whole way down beside the modules (R007); it is a
     full column now, not a short sticky stack */
  .jl-aside { display: flex; flex-direction: column; }
  .jl-aside .card { margin-bottom: 14px; }
  .jl-chiprow { display: none; }
  /* About the Editor: DOM sits after the aside (phone reading order), the
     grid puts it back under the main column as the last card (mwr-001) */
  .jl-about { grid-column: 1; }
}

/* ---------- lead package ---------- */
.jl-lead { padding: 16px; }
.jl-lead-main { display: block; text-decoration: none; color: inherit; }
.jl-lead-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 10px; }
.jl-lead-title { display: block; font-size: 32px; line-height: 1.2; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; text-wrap: balance; }
.jl-lead .jf-kicker { margin-bottom: 6px; }
.jl-deck { display: block; font-size: 19px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.jl-lead-deck { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jl-lead-meta { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 8px; }
.jl-lead-main:hover .jl-lead-title, .jl-lead-main:focus .jl-lead-title,
.jl-stack-row:hover .jl-stack-title, .jl-stack-row:focus .jl-stack-title { text-decoration: underline; text-decoration-color: var(--accent); }
.jl-stack-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 0; border-top: 1px solid rgba(128, 136, 150, 0.16); text-decoration: none; color: inherit; }
.jl-lead-stack .jl-stack-row:first-child { border-top: none; padding-top: 0; }
.jl-stack-thumb { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.jl-stack-row.jl-stack-noart { grid-template-columns: minmax(0, 1fr); }
.jl-stack-title { display: block; font-size: 17px; line-height: 1.35; font-weight: 760; letter-spacing: -0.2px; }
.jl-stack-date { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 3px; }
.jl-stack-row .jf-kicker { margin-bottom: 2px; }
@media (min-width: 640px) {
  .jl-lead { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: 18px; }
  .jl-lead-stack { min-width: 0; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .jl-lead { display: block; }
  .jl-lead-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin-top: 10px; }
  .jl-lead-stack .jl-stack-row:nth-child(2) { border-top: none; padding-top: 0; }
}

/* ---------- section modules ---------- */
.jl-section { position: relative; padding: 16px; }
/* the one signature move: each module wears its wing tint as a 3px top
   rule, inset by the card radius (the exact rgba tints of the old slides) */
.jl-section::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 3px;
  border-radius: 0 0 2px 2px; background: rgba(128, 136, 150, 0.2); }
.jl-section[data-wing="explainers"]::before { background: rgba(95, 176, 236, 0.14); }
.jl-section[data-wing="updates"]::before { background: rgba(255, 207, 92, 0.14); }
.jl-section[data-wing="tales"]::before { background: rgba(186, 130, 255, 0.13); }
.jl-section[data-wing="field"]::before { background: rgba(120, 220, 160, 0.13); }
.jl-section[data-wing="receipts"]::before { background: rgba(236, 110, 95, 0.14); }
.jl-section[data-wing="beat"]::before { background: rgba(95, 176, 236, 0.14); }
.jl-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; }
.jl-sec-name { font-size: 20px; line-height: 1.2; font-weight: 800; margin: 0; letter-spacing: -0.3px; text-wrap: balance; }
.jl-sec-all { font-size: 13px; font-weight: 700; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.jl-sec-all:hover, .jl-sec-all:focus { text-decoration: underline; text-decoration-color: var(--accent); }

/* entry rows: kicker and title and date beside a 112x84 thumb on desktop */
.jl-row { display: block; text-decoration: none; color: inherit; padding: 12px 0;
  border-top: 1px solid rgba(128, 136, 150, 0.16);
  content-visibility: auto; contain-intrinsic-size: auto 110px; }
.jl-row-id { display: block; min-width: 0; }
.jl-row-title { display: block; font-size: 17px; line-height: 1.35; font-weight: 760; letter-spacing: -0.2px; margin-bottom: 2px; }
.jl-row-hook { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.jl-row-date { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 3px; }
.jl-row .jf-kicker { margin-bottom: 2px; }
.jl-row:hover .jl-row-title, .jl-row:focus .jl-row-title { text-decoration: underline; text-decoration-color: var(--accent); }
.jl-row-hasart { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 4px 12px;
  grid-template-areas: "id thumb" "hook thumb" "date thumb"; align-items: start; }
.jl-row-hasart .jl-row-id { grid-area: id; }
.jl-row-hasart .jl-row-hook { grid-area: hook; }
.jl-row-hasart .jl-row-date { grid-area: date; margin-top: 0; }
.jl-row-thumb { grid-area: thumb; width: 112px; height: 84px; object-fit: cover; border-radius: 10px; }
.jl-row-pinned .jf-kicker { color: var(--accent-ink); }
.jl-row-empty { font-style: italic; }
/* module rows clamp the hook to one line; the article carries the rest */
.jl-section .jl-row-hook { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* compact rows (What's New: a ledger, not a headline war) */
.jl-rowc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid rgba(128, 136, 150, 0.16); text-decoration: none; color: inherit; }
.jl-rowc .jl-row-title { font-size: 16px; margin: 0; }
.jl-rowc .jl-row-date { margin: 0; white-space: nowrap; }
.jl-rowc:hover .jl-row-title, .jl-rowc:focus .jl-row-title { text-decoration: underline; text-decoration-color: var(--accent); }

/* explainer mini-card grid, 2 across, thumb on top */
.jl-exgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jl-excard { display: block; text-decoration: none; color: inherit; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.jl-excard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.jl-excard-body { padding: 10px 12px 12px; }
.jl-excard .jf-kicker { margin-bottom: 3px; }
.jl-excard .jl-row-title { margin-bottom: 3px; }
.jl-excard .jl-row-hook { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.jl-excard:hover .jl-row-title, .jl-excard:focus .jl-row-title { text-decoration: underline; text-decoration-color: var(--accent); }
/* the labeled art-less strip (mwr-004: either art, or a deliberate section) */
.jl-strip-label { display: block; font-size: 12px; line-height: 1.3; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; padding-top: 12px;
  border-top: 1px solid rgba(128, 136, 150, 0.16); }

/* ---------- filter: a control that says so (R004) ---------- */
.jl-filter .sub-head { margin-bottom: 2px; }
.jl-filter-help { font-size: 12px; line-height: 1.3; color: var(--muted); margin: 0 0 8px; }
.jl-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 2px solid transparent; border-radius: 10px; color: inherit; font: inherit;
  font-size: 14px; font-weight: 700; padding: 8px 10px; cursor: pointer; text-align: left; }
.jl-filter-row .jl-count { font-size: 12px; font-weight: 500; color: var(--muted); }
.jl-filter-row[aria-pressed="true"] { border-color: var(--accent); font-weight: 800; }
.jl-filter-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* sticky chip row for 768/390 (the rail is gone, R004 still holds).
   A sticky bar wears its OWN surface: panel ground, hairline bottom rule,
   shadow only while pinned, so the reader sees a bar and not a strange
   cutoff (Joe, 2026-09-10, R012) */
.jl-chiprow { position: sticky; top: var(--topbar-h); z-index: 40; background: var(--panel);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line); }
.jl-chiprow.is-stuck { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22); }
.jl-chiprow-label { font-size: 12px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.jl-chip { background: none; border: 2px solid var(--line); border-radius: 999px; color: inherit; font: inherit;
  font-size: 14px; font-weight: 700; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.jl-chip[aria-pressed="true"] { border-color: var(--accent); font-weight: 800; }
.jl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- about the editor: the last card before the footer (mwr-001) ---------- */
.jl-about { display: flex; align-items: center; gap: 18px; }
.jl-mast-art { width: 112px; height: 112px; flex: 0 0 auto; object-fit: contain; }

/* ---------- rail cards ---------- */
.jl-standings-line { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 6px; }
.jl-rail-link { display: block; width: fit-content; font-size: 13px; font-weight: 700; color: var(--accent-ink);
  text-decoration: none; padding: 2px 0; white-space: nowrap; }
.jl-rail-link:hover, .jl-rail-link:focus { text-decoration: underline; text-decoration-color: var(--accent); }
.jl-rules-copy { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 8px; }
/* More headlines: every entry the front page holds behind a module cap,
   text rows, kicker plus title plus date (desktop rail only) */
.jl-mh-row { display: block; text-decoration: none; color: inherit; padding: 9px 0;
  border-top: 1px solid rgba(128, 136, 150, 0.16); }
.jl-morehead a:first-of-type { border-top: none; padding-top: 2px; }
.jl-mh-row .jf-kicker { margin-bottom: 2px; }
.jl-mh-title { display: block; font-size: 15px; line-height: 1.35; font-weight: 760; letter-spacing: -0.2px; }
.jl-mh-date { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.jl-mh-row:hover .jl-mh-title, .jl-mh-row:focus .jl-mh-title { text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- phone: Joe's card grammar, 50/50 then copy at 100 ---------- */
@media (max-width: 899px) {
  /* style.css's sideways backstop (overflow-x: hidden on html and body)
     turns body into a scroll container and silently kills every sticky
     inside it, the chip bar included; clip keeps the backstop without
     making a scroller (found j-002, 2026-09-10) */
  html, body { overflow-x: clip; }
  /* one column in reading order: lead, chips, conditions, modules,
     subscribe, standings, rules, about (the grid flattens to a flex list) */
  .jl-body, .jl-main, .jl-aside { display: contents; }
  main.st-wrap { display: flex; flex-direction: column; }
  .jl-lead { order: 1; }
  .jl-chiprow { order: 2; }
  .jl-wx { order: 3; }
  .jl-section { order: 4; }
  .jl-sub-card { order: 5; }
  .jl-standings { order: 6; }
  .jl-rules { order: 7; }
  .jl-about { order: 8; }
  /* the chip row is the phone filter; the desktop rail extras stay home */
  .jl-filter, .jl-morehead { display: none; }
  /* the joint between the lead package and the headline stack gets the
     stack's own rhythm, a hairline with air, not a 5px crush (j-010) */
  .jl-lead-stack { border-top: 1px solid rgba(128, 136, 150, 0.16); margin-top: 12px; padding-top: 10px; }
}
@media (max-width: 639px) {
  .jl-lead-title { font-size: 23px; line-height: 1.25; }
  .jl-deck { font-size: 17px; }
  .jl-sec-name { font-size: 18px; line-height: 1.25; }
  .jl-row-title, .jl-stack-title { font-size: 16px; }
  /* stack rows: ROW 1 is 50/50, image beside the identifying text */
  .jl-stack-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; align-items: start; }
  .jl-stack-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 10px; }
  .jl-stack-row.jl-stack-noart { grid-template-columns: minmax(0, 1fr); }
  /* entry rows: image half, identity half (kicker, title, date), then the
     hook at 100 percent below ROW 1 */
  .jl-row-hasart { grid-template-columns: 1fr 1fr; gap: 6px 12px;
    grid-template-areas: "thumb id" "thumb date" "hook hook"; align-items: start; }
  .jl-row-hasart .jl-row-date { align-self: start; }
  .jl-row-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .jl-exgrid { grid-template-columns: 1fr; }
  .jl-about { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-items: center; }
  .jl-about .jl-mast-art { width: 100%; height: auto; max-width: 155px; justify-self: center; }
  .jl-about .st-sub { grid-column: 1 / -1; }
}


/* ---------- the rock's weather chip ---------- */
.jl-wx { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 12px 14px; }
.jl-wx-read { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.jl-wx-temp { font-weight: 800; font-size: 18px; }
.jl-wx-place { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jl-wx-go { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent-ink);
  border-bottom: 1.5px solid var(--accent); white-space: nowrap; }
.jl-wx-face { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }

/* ---------- subscribe ---------- */
.sub-form { margin: 0; }
.sub-head { font-size: 12px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 8px; }
.sub-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-row input { flex: 1 1 220px; font-size: 16px; padding: 10px 12px; border-radius: 10px;
  border: 1.5px solid rgba(128,136,150,0.4); background: transparent; color: inherit; }
.sub-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.sub-row button { font-size: 16px; font-weight: 750; padding: 10px 18px; border-radius: 10px;
  border: none; background: var(--accent); color: #1c1f25; cursor: pointer; }
.sub-row button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.sub-row button[disabled] { opacity: 0.6; cursor: default; }
#subHp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sub-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; line-height: 1.5; }
.sub-note a { color: var(--accent-ink); font-weight: 650; text-decoration: none; border-bottom: 1.5px solid var(--accent); }

/* ---------- mobile shell (see UNIFICATION DEBT note up top) ---------- */
@media (max-width: 899px) {
  .jl-back-top { display: none; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .jl-mbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    background: var(--panel); border-top: 1px solid var(--line); }
  .jl-mbar .mbar-home { display: flex; align-items: center; gap: 7px; text-decoration: none; color: inherit;
    font-weight: 750; font-size: 0.84rem; }
  .jl-mbar .mbar-home-eyes { display: inline-flex; gap: 3px; }
  .jl-mbar .mbar-home-eyes span { width: 9px; height: 9px; border-radius: 50%; background: var(--text);
    box-shadow: inset 0 0 0 2px var(--panel); }
  .jl-mbar .mbar-mid { flex: 1 1 auto; text-align: center; }
  .jl-mbar .mbar-title { font-weight: 800; font-size: 0.95rem; }
  .jl-mbar .mbar-menu { display: flex; align-items: center; gap: 6px; background: none; border: none;
    color: inherit; font: inherit; font-size: 0.84rem; font-weight: 750; cursor: pointer; padding: 6px 2px; }
  /* sheet UNDER the bar, always: the button that opened it must stay
     tappable to close it (the school trap, 2026-08-19, never again) */
  /* the Journal's sheet IS the site's sheet (Joe, 2026-09-20). style.css owns the scrim, the
     panel, the head and the rows; this wing only says when it opens. */
  body.jl-launcher-open { overflow: hidden; }
}
@media (min-width: 900px) { .jl-mbar, .jl-launcher { display: none !important; } }

/* ---------- the shared article shell ---------- */
/* the sub-tab bar is NOT sticky on articles (Joe, 2026-09-10 follow-up);
   the route back lives in the rail and at the article end. No divider
   below it, and its text sits the same measured 14.8px under the site
   nav's hairline as the site nav's text sits above it (measured with
   getBoundingClientRect at 1440, j-009, 2026-09-10) */
.tabs.jl-subtabs { margin-top: -8.19px; padding: 0; border-bottom: 0; }
.tabs.jl-subtabs .tab { text-decoration: none; white-space: nowrap; }
@media (min-width: 900px) {
  .jl-artgrid { display: grid; grid-template-columns: minmax(0, 680px) 300px; gap: 16px;
    max-width: 996px; margin: 0 auto; align-items: start; }
  /* the rail is NOT pinned as a whole: a whole-rail pin put Subscribe
     forever below the fold at 900 tall (Joe, 2026-09-10, R013). Instead the
     rail stretches to the article's height and its LAST card (Subscribe)
     rides sticky below the header, so the right side never goes dead for
     screens (R007) while every card above it scrolls normally and the
     pinned card always fits the viewport. */
  .jl-art-rail { align-self: stretch; }
  .jl-art-rail .card { margin-bottom: 14px; }
  .jl-art-rail .jl-sub-card { position: sticky; top: calc(var(--topbar-h) + 14px); }
}
@media (max-width: 899px) {
  /* width: 100% is load-bearing: the auto side margins turn OFF flex
     stretch inside the st-wrap column, and shrink-to-fit then lands on the
     beat table's 454px min-content, clipping the dek and caption past a
     390 viewport (j-010; min-width: 0 alone never fixed it) */
  .jl-artgrid { max-width: 680px; margin: 0 auto; width: 100%; }
}
/* main.st-wrap is a column flexbox below 900, and a flex item's min-width
   defaults to auto: the .beat-table 420px min-content pushed the whole grid,
   article and rail to 454px inside a 390px phone (j-005, 2026-09-10) */
.jl-artgrid { min-width: 0; }
.jl-article { min-width: 0; }
.jl-article .card { padding: 16px; }
.jl-art-title { font-size: 34px; line-height: 1.15; font-weight: 800; letter-spacing: -0.5px;
  margin: 0 0 6px; text-wrap: balance; }
.jl-art-head .jf-kicker a { color: var(--accent-ink); text-decoration: none; }
.jl-art-head .jf-kicker a:hover, .jl-art-head .jf-kicker a:focus { text-decoration: underline; text-decoration-color: var(--accent); }
.jl-art-head .jl-deck { margin: 0 0 12px; }
.jl-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 0 14px;
  border-bottom: 1px solid rgba(128, 136, 150, 0.2); margin-bottom: 16px; }
.jl-byline img { width: 40px; height: 40px; object-fit: contain; }
.jl-byline-who { font-size: 14px; font-weight: 750; }
.jl-byline-meta { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); font-weight: 500; }
.jl-share { display: flex; gap: 8px; margin-left: auto; }
.jl-share button { background: transparent; border: 1.5px solid var(--line); border-radius: 999px;
  color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px;
  cursor: pointer; white-space: nowrap; }
.jl-share button:hover { border-color: var(--accent); }
.jl-share button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jl-share-end { margin: 18px 0 0; }
.jl-share-end .jl-share { margin-left: 0; }
@media (max-width: 639px) {
  .jl-art-title { font-size: 26px; line-height: 1.2; }
  .jl-art-head .jl-deck { font-size: 17px; }
  .jl-share { margin-left: 0; flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .jl-share button { width: 100%; }
}
@media (min-width: 640px) and (max-width: 899px) {
  .jl-art-title { font-size: 30px; line-height: 1.2; }
  .jl-art-head .jl-deck { font-size: 18px; }
}

/* article body rhythm: the measure is the medicine, ~72 characters */
.jl-article .jl-p, .jl-article .rb-why { font-size: 17px; line-height: 1.7; text-wrap: pretty; margin: 0 0 14px; }
/* a prose link is an atomic box: a link wrapped across two lines hands the
   R009 boxes check a union rect that swallows its neighbors (ready.gov and
   the Hawaii EMA link, 2026-09-10); max-width keeps a long one from
   overflowing the phone measure */
.jl-article p a, .ex-body p a { display: inline-block; max-width: 100%; }
.jl-article .jl-h2 { font-size: 22px; line-height: 1.3; font-weight: 780; margin: 22px 0 8px; text-wrap: balance; }
.jl-article .jl-h3 { font-size: 18px; line-height: 1.3; font-weight: 760; margin: 18px 0 6px; text-wrap: balance; }
.jl-article ul, .jl-article ol { text-wrap: pretty; }
@media (max-width: 639px) {
  .jl-article .jl-p, .jl-article .rb-why { font-size: 16px; line-height: 1.65; }
  .jl-article .jl-h2 { font-size: 20px; }
}
.jl-pull { font-size: 21px; line-height: 1.45; font-weight: 650; color: var(--text); text-wrap: balance;
  border-left: 3px solid var(--accent); padding: 4px 0 4px 16px; margin: 20px 0; }
@media (max-width: 899px) { .jl-pull { font-size: 20px; } }
@media (max-width: 639px) { .jl-pull { font-size: 19px; } }

/* figures: caption and credit below the pixels, never on them (R009) */
.beat-fig, .beat-hero { margin: 22px 0; }
.beat-hero { margin: 0 0 14px; }
.beat-fig img, .beat-hero img { display: block; width: 100%; max-width: 100%; height: auto;
  border-radius: 12px; border: 1px solid var(--line, #dde3ec); }
.beat-fig figcaption, .beat-hero figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5;
  color: var(--muted, #5b6472); text-wrap: balance; }
.beat-fig figcaption .fig-credit, .beat-hero figcaption .fig-credit { font-size: 12px; }

/* tables ride a scroll wrap below 480 inner width */
.beat-tablewrap { overflow-x: auto; margin: 10px 0 16px; }
.beat-table { border-collapse: collapse; font-size: 14px; line-height: 1.5; min-width: 420px;
  font-variant-numeric: tabular-nums; }
.beat-table th, .beat-table td { border-bottom: 1px solid var(--line); padding: 6px 12px 6px 0; text-align: left; }
.beat-table th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* key points, places chips, follow line */
.beat-keys { background: rgba(128,136,150,.08); border-radius: 12px; padding: 12px 18px; margin: 0 0 16px; }
.beat-keys-h { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 6px; }
.beat-keys ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.beat-places { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
.jl-placechips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.jl-placechips a { display: inline-block; font-size: 14px; font-weight: 700; color: var(--accent-ink);
  text-decoration: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.jl-placechips a:hover, .jl-placechips a:focus { border-color: var(--accent); }
.beat-follow { font-size: 14px; color: var(--muted); margin-top: 18px; }
.beat-follow a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.beat-follow a:hover, .beat-follow a:focus { text-decoration: underline; text-decoration-color: var(--accent); }

/* more from the Journal: dates in normal flow, never positioned over text */
.jl-more { margin-top: 20px; border-top: 1px solid rgba(128, 136, 150, 0.2); padding-top: 14px; }
.jl-more-h { font-size: 12px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 10px; }
.jl-more-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .jl-more-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* the card is the story's photograph with the words over a dark overlay (Joe, 2026-09-21:
   "the featured image should be the background with the black overlay and the words") */
.jl-more-card { display: block; position: relative; overflow: hidden; text-decoration: none; color: #fff;
  background: #10151c; border: 1px solid var(--line); border-radius: 12px; aspect-ratio: 4 / 3; }
.jl-more-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease; }
.jl-more-card:hover img { transform: scale(1.04); }
.jl-more-body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 12px 12px 11px; background: linear-gradient(180deg, rgba(8, 12, 18, 0.05) 0%, rgba(8, 12, 18, 0.55) 55%, rgba(8, 12, 18, 0.88) 100%); }
.jl-more-kicker { display: block; font-size: 11px; line-height: 1.3; font-weight: 750; letter-spacing: 0.1em;
  color: #ffcf5c; margin-bottom: 4px; }
.jl-more-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 14px; font-weight: 760; line-height: 1.3; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.jl-more-date { display: block; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, 0.72); margin-top: 4px; }
.jl-more-card:hover .jl-more-title, .jl-more-card:focus .jl-more-title { text-decoration: underline; text-decoration-color: var(--accent); }
.jl-next-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* latest-from rows on the article rail: text only, dates on their own line */
.jl-latest-from a { display: block; text-decoration: none; color: inherit; padding: 8px 0;
  border-top: 1px solid rgba(128, 136, 150, 0.16); }
.jl-latest-from a:first-of-type { border-top: none; padding-top: 0; }
.jl-latest-title { display: block; font-size: 15px; line-height: 1.35; font-weight: 760; }
.jl-latest-date { display: block; font-size: 12px; line-height: 1.3; color: var(--muted); margin-top: 2px; }
.jl-latest-from a:hover .jl-latest-title, .jl-latest-from a:focus .jl-latest-title { text-decoration: underline; text-decoration-color: var(--accent); }

/* update post pages (legacy classes still pressed by press-update.py) */
.jl-article .st-title { margin-bottom: 14px; }
.jl-back-top { font-size: 13px; font-weight: 700; color: var(--accent-ink); text-decoration: none;
  border: 1.5px solid var(--line); border-radius: 999px; padding: 7px 13px; white-space: nowrap; }
.jl-dek { font-size: 19px; line-height: 1.5; color: var(--muted); margin: 6px 0 14px; }
.jl-item-title { display: block; font-size: 17px; font-weight: 760; line-height: 1.35; letter-spacing: -0.2px; margin-bottom: 4px; }
.jl-item-hook { display: block; font-size: 14px; color: var(--muted); line-height: 1.5; }
.jl-item-meta { display: block; font-size: 12px; font-weight: 750; letter-spacing: 1.1px;
  color: var(--accent-ink); margin-bottom: 4px; }
.jl-row-by { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.jl-row-text { display: block; min-width: 0; }

/* the box score: the week at a glance before the stories */
.rb-board { width: 100%; border-collapse: collapse; margin: 4px 0 6px;
  font-variant-numeric: tabular-nums; font-size: 14px; }
.rb-board th { font-size: 12px; font-weight: 750; letter-spacing: 1px; color: var(--muted);
  text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid rgba(128, 136, 150, 0.3); }
.rb-board td { padding: 8px 8px 8px 0; border-bottom: 1px solid rgba(128, 136, 150, 0.14);
  vertical-align: top; }
.rb-board .rb-no { color: var(--accent); font-weight: 800; }
.rb-board .rb-miss { font-weight: 750; white-space: nowrap; }
.rb-board-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

/* Rock Bottom house styles (promoted from the week 33 page) */
.rb-item { border-top: 1px solid rgba(128, 136, 150, 0.2); padding: 20px 0 8px; margin-top: 8px; }
.rb-rank { font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; }
.rb-place { font-size: 1.15rem; font-weight: 780; margin: 4px 0 10px; }
.rb-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
@media (max-width: 480px) { .rb-vs { grid-template-columns: 1fr; } }
.rb-vs > div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.rb-vs .lbl { display: block; font-size: 12px; font-weight: 750; letter-spacing: 1px; color: var(--muted); margin-bottom: 3px; }
.rb-vs .val { font-weight: 750; font-size: 0.95rem; line-height: 1.35; }
.rb-why { margin: 0 0 8px; }
.rb-burn { line-height: 1.5; margin: 0 0 10px; color: var(--muted); font-style: italic; }
.rb-metar { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted);
  background: var(--panel-2); border-radius: 8px; padding: 8px 10px; overflow-x: auto; white-space: pre; }
.rb-note { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* last word on purpose: the chip row is the phone and tablet filter only
   (the rail's Browse card owns desktop), whatever the cascade above says */
@media (min-width: 900px) { .jl-chiprow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

/* ---------- From the Rock Shop card (Joe's decided card, j-008, 2026-09-10):
   compact, no price, full-width name, the button. On stories it stands where
   The Standings stood; on the hub every eligible card presses into one fixed
   slot above Subscribe and journal.js reveals one. ---------- */
.jl-shop { box-sizing: border-box; width: 100%; max-width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0 0 16px; color: var(--text); }
.jl-shop-eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-ink); margin: 0; }
.jl-shop-quip { font-size: 14px; font-weight: 600; margin: 2px 0 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jl-shop-quip::before { content: "\201C"; color: var(--accent-ink); }
.jl-shop-quip::after { content: "\201D"; color: var(--accent-ink); }
/* when there is no signed quip line */
.jl-shop-eyebrow + .jl-shop-img { margin-top: 12px; }
/* height:auto is load-bearing: the pressed img carries height="300", which makes the
   box height definite and makes aspect-ratio inert (Joe caught the square card, 2026-09-11). */
/* the artwork is the point of the shirt (Joe, 2026-09-11): the picture zooms inside its
   own frame, on hover where there is a pointer and on tap where there is not. Nothing
   moves outside the card, so the rail never shifts. */
.jl-shop-figure { position: relative; overflow: hidden; border-radius: 10px; background: #fff; cursor: zoom-in; display: block; width: 100%; }
.jl-shop-figure .jl-shop-img { transition: transform .35s ease; transform-origin: center center; will-change: transform; }
@media (hover: hover) and (pointer: fine) { .jl-shop-figure:hover .jl-shop-img { transform: scale(2.1); } }
.jl-shop-figure.is-zoomed { cursor: zoom-out; }
.jl-shop-figure.is-zoomed .jl-shop-img { transform: scale(2.1); }
.jl-shop-figure::after { content: "Tap to see the art"; position: absolute; right: 8px; bottom: 8px; font-size: 11px; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 999px; background: rgba(17,20,26,.72); color: #fff; opacity: .9; transition: opacity .2s ease; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .jl-shop-figure::after { content: "Hover to see the art"; } }
.jl-shop-figure:hover::after, .jl-shop-figure.is-zoomed::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .jl-shop-figure .jl-shop-img { transition: none; } }
.jl-shop-img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; display: block; }
.jl-shop-name { font-weight: 700; font-size: 15px; line-height: 1.3; margin: 10px 0 0; }
.jl-shop-btn { display: block; text-align: center; margin-top: 12px; padding: 10px 12px;
  border: 1px solid var(--text); border-radius: 10px; font-weight: 700; text-decoration: none; color: var(--text); }
.jl-shop-btn:hover { background: var(--panel-2); }
/* suppressed while the alert ticker is live */
body.alert-live .jl-shop { display: none; }
/* the hub slot: every card stacks in one grid cell so the slot holds the
   tallest card's height before journal.js runs; no layout shift. Cards
   stretch to the slot and the button rides the bottom edge. */
.jl-shop-slot { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 16px; }
.jl-shop-slot .jl-shop { grid-area: 1 / 1; min-width: 0; margin: 0; visibility: hidden;
  display: flex; flex-direction: column; }
.jl-shop-slot .jl-shop.is-on { visibility: visible; }
.jl-shop-slot .jl-shop-btn { margin-top: auto; }
.jl-shop-slot .jl-shop-name { margin-bottom: 12px; }
@media (max-width: 899px) {
  /* phone hub reading order: directly above Subscribe (order 5, earlier in DOM) */
  .jl-shop-slot { order: 5; }
}

/* ---------- the receipts and the shelf wings on the shared shell (2026-09-21) ----------
   The receipts page, the tales and field pieces, and the What's New posts were still
   wearing their pre-redesign page strings; these are the few rules their bodies need
   that no other wing carries. */
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 16px; }
.rc-stat { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: rgba(128, 136, 150, 0.06); min-width: 0; }
.rc-k { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 750; line-height: 1.3; }
.rc-v { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; letter-spacing: -0.5px; }
.rc-v span { font-size: 14px; font-weight: 650; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.rc-n { font-size: 12px; color: var(--muted); line-height: 1.4; }
.jl-article .jl-note { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 14px; }
.jl-article .jl-note.jl-lore { font-style: italic; }
.jl-article .jl-h2:first-child { margin-top: 0; }
.jl-article .beat-table th[scope="row"] { font-size: 14px; letter-spacing: 0; text-transform: none; color: inherit; font-weight: 650; }

/* ---------- the rock-rail pages: /weather-rock and /snow-day-calculator (2026-09-21) ----------
   Joe: "The content in the block should scroll not the page. So the site is uniform in
   experience." The same law as the Facts tab (style.css, 2026-09-20): the article card is
   the scroll container and the rock holds beside it. Phones keep the page scroll: a card
   that scrolls inside a page that scrolls is a trap under a thumb. */
@media (min-width: 900px) {
  body.rock-rail .jl-artgrid { align-items: start; }
  body.rock-rail .jl-article { max-height: calc(100vh - var(--topbar-h) - 77px); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-gutter: stable; }
  body.rock-rail .jl-art-rail { position: sticky; top: 14px; align-self: start; }
}