/* bywill.ai homepage: "Latest from the Journal" (proposed 4 Nov 2026).
   Compact Economist-style teaser matching /blog/ (theme "economist"). Every rule is scoped to .jl-; nothing else
   on the homepage is touched. Serif comes from the Journal's self-hosted Source Serif 4 under /blog/fonts/. */
@font-face { font-family: "JL Source Serif"; src: url("/blog/fonts/SourceSerif4-normal-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JL Source Serif"; src: url("/blog/fonts/SourceSerif4-italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

.jl {
  --jl-serif: "JL Source Serif", "Source Serif 4", Georgia, "Times New Roman", serif;
  --jl-sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --jl-ink: #0f0f0f; --jl-text: #1f1f1c; --jl-mute: #6d6d66; --jl-paper: #faf8f2;
  --jl-red: #a73632; --jl-deep: #245b36; --jl-hair: rgba(15, 15, 15, .16);
  background: var(--jl-paper); color: var(--jl-ink);
  padding: clamp(2.6rem, 5vw, 3.8rem) max(4vw, 1.2rem) clamp(2.8rem, 5vw, 4rem);
  scroll-margin-top: 70px;
}
.jl *, .jl *::before, .jl *::after { box-sizing: border-box; }
.jl-wrap { max-width: 1180px; margin: 0 auto; }

/* masthead strip: thin black rule with the red tab, kicker left, link right */
.jl-head {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--jl-ink); padding-top: .85rem; margin-bottom: 1.5rem;
}
.jl-head::before { content: ""; position: absolute; left: 0; top: -1px; width: 3.2rem; height: 5px; background: var(--jl-red); }
.jl-kicker { margin: 0; display: flex; align-items: baseline; gap: .7rem; font: 600 .74rem/1 var(--jl-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--jl-red); }
.jl-kicker h2 { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.jl-no { color: var(--jl-mute); font-weight: 500; padding-left: .7rem; border-left: 1px solid var(--jl-hair); }
.jl-all, .jl-all:visited { font: 600 .72rem/1 var(--jl-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--jl-ink); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; padding-bottom: .15rem; transition: color .2s ease, border-color .2s ease; }
.jl-all:hover, .jl-all:focus-visible { color: var(--jl-deep); border-bottom-color: currentColor; }

/* grid: lead story (cover + text) | two text-only entries */
.jl-grid { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); gap: 0 2.4rem; align-items: start; }
.jl-grid > article { margin: 0; min-width: 0; }
.jl a { color: inherit; text-decoration: none; }
.jl-lead > a { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.jl-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f2eee3; }
.jl-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.jl-text { display: grid; gap: .45rem; align-content: start; }
.jl-cat { font: 600 .68rem/1.3 var(--jl-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--jl-red); }
.jl h3 { margin: 0; font-family: var(--jl-serif); font-weight: 600; color: var(--jl-ink); letter-spacing: -.012em; text-wrap: balance; transition: color .2s ease; }
.jl-lead h3 { font-size: clamp(1.45rem, 2.1vw, 1.85rem); line-height: 1.12; }
.jl-std { font: italic 400 1.02rem/1.4 var(--jl-serif); color: var(--jl-deep); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jl-meta { font: 500 .66rem/1.4 var(--jl-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--jl-mute); margin-top: .2rem; }
.jl-meta i { font-style: normal; margin: 0 .3rem; }

.jl-side { display: grid; border-left: 1px solid var(--jl-hair); padding-left: 2.4rem; align-self: stretch; align-content: start; }
.jl-side article + article { border-top: 1px solid var(--jl-hair); margin-top: 1rem; padding-top: 1rem; }
.jl-side a { display: grid; gap: .35rem; }
.jl-side h3 { font-size: 1.15rem; line-height: 1.22; }

.jl a:hover h3, .jl a:focus-visible h3 { color: var(--jl-deep); }
.jl-lead > a:hover .jl-cover img, .jl-lead > a:focus-visible .jl-cover img { transform: scale(1.025); }
.jl a:focus-visible { outline: 2px solid var(--jl-deep); outline-offset: 5px; }

@media (max-width: 1020px) {
  .jl-grid { grid-template-columns: 1fr; }
  .jl-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--jl-hair); margin-top: 1.4rem; padding-top: 1rem; }
}
@media (max-width: 640px) {
  .jl-head { margin-bottom: 1.1rem; }
  .jl-lead > a { grid-template-columns: 1fr; gap: .9rem; }
  .jl-lead h3 { font-size: 1.45rem; }
  .jl-std { -webkit-line-clamp: 2; }
  .jl-side h3 { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jl-cover img, .jl h3, .jl-all { transition: none; }
  .jl-lead > a:hover .jl-cover img { transform: none; }
}