/* ============================================================
   JOURNAL — archive index and long-form article typography.
   Inherits the studio system: --mainFont / --serifFont, the
   1281px container, and the html[data-theme] light/dark/flex
   contract. Adds no new palette.
   ============================================================ */

:root{
  --jr-rule:#EDEDED;
  --jr-ink:#050505;
  --jr-body:#666;
  --jr-muted:rgb(5 5 5 / .4);
  --jr-measure:640px;
}
:is(html[data-theme="dark"], html[data-theme="flex"]){
  --jr-rule:#262626;
  --jr-ink:#f4f1ec;
  --jr-body:#9a9a9a;
  --jr-muted:rgb(228 224 219 / .45);
}

.journal{background-color:#fff}
:is(html[data-theme="dark"], html[data-theme="flex"]) .journal{background-color:#111}

/* ---------- Masthead ---------- */

.jr-masthead{padding-top:150px;padding-bottom:56px}
.jr-masthead h1{
  margin:0;
  font-family:var(--serifFont);
  font-weight:100;
  font-size:54px;
  line-height:58px;
  letter-spacing:-2.4px;
  color:var(--jr-ink);
}
.jr-masthead .jr-standfirst{
  margin:22px 0 0;
  max-width:436px;
  font-size:14px;
  line-height:25px;
  color:var(--jr-body);
}

/* ---------- Archive: index column + wayfinding rail ---------- */

.jr-archive{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(0,4fr);
  gap:60px;
  padding-bottom:150px;
}

.jr-rail{position:sticky;top:120px;align-self:start}
.jr-rail-group{margin-bottom:38px}
.jr-rail-group:last-child{margin-bottom:0}
.jr-rail-label{
  margin:0 0 14px;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--jr-muted);
}
.jr-rail ul{margin:0;padding:0;list-style:none}
.jr-rail li{margin:0 0 9px}
.jr-rail li:last-child{margin-bottom:0}
.jr-rail a{
  font-size:12px;
  line-height:20px;
  letter-spacing:.24px;
  color:var(--jr-body);
  text-decoration:none;
  transition:color .25s ease;
}
.jr-rail a:hover,
.jr-rail a[aria-current="true"]{color:var(--jr-ink)}
.jr-rail a[aria-current="true"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.jr-rail-clear{
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--jr-muted);
  text-decoration:none;
}
.jr-rail-clear:hover{color:var(--jr-ink)}
.jr-empty a{color:var(--jr-ink);text-decoration:underline;text-underline-offset:5px}

/* ---------- Entries ---------- */

.jr-entries{margin:0;padding:0;list-style:none;border-top:1px solid var(--jr-rule)}
.jr-entry{border-bottom:1px solid var(--jr-rule)}

.jr-entry a{
  display:block;
  padding:34px 0 32px;
  text-decoration:none;
  color:inherit;
}
.jr-meta{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:12px;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--jr-muted);
}
.jr-entry h2{
  margin:0;
  max-width:900px;
  font-family:var(--serifFont);
  font-weight:100;
  font-size:40px;
  line-height:46px;
  letter-spacing:-1.2px;
  color:var(--jr-ink);
  transition:opacity .3s ease;
}
/* One line, per the contract: the excerpt orients, the title sells. */
.jr-excerpt{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:14px 0 0;
  max-width:640px;
  font-size:14px;
  line-height:25px;
  color:var(--jr-body);
}

/* The whole row is the target; the rule brightening is the only hover event. */
.jr-entry{transition:border-color .3s ease}
.jr-entry:hover{border-bottom-color:var(--jr-ink)}
.jr-entry:hover h2{opacity:.62}
.jr-entry a:focus-visible{outline:2px solid var(--jr-ink);outline-offset:6px}

/* ---------- Empty state ---------- */

.jr-empty{
  padding:70px 0 150px;
  border-top:1px solid var(--jr-rule);
  max-width:52ch;
}
.jr-empty p{margin:0 0 12px;font-size:14px;line-height:25px;color:var(--jr-body)}
.jr-empty p:first-child{
  font-family:var(--serifFont);
  font-weight:100;
  font-size:33px;
  line-height:43px;
  letter-spacing:-1px;
  color:var(--jr-ink);
  margin-bottom:18px;
}

/* ============================================================
   ARTICLE
   ============================================================ */

.jr-article-head{
  padding-top:170px;
  max-width:var(--jr-measure);
  margin-left:auto;
  margin-right:auto;
}
.jr-article-head .jr-meta{margin-bottom:20px}
.jr-article-head h1{
  margin:0;
  font-family:var(--serifFont);
  font-weight:100;
  font-size:48px;
  line-height:56px;
  letter-spacing:-1.8px;
  color:var(--jr-ink);
}
.jr-article-head .jr-standfirst{
  margin:26px 0 0;
  max-width:none;
  font-size:17px;
  line-height:30px;
  color:var(--jr-body);
}

/* Hero: genuinely full-bleed — the one element that breaks the text axis,
   and the reward for entering. Breaking out of .container needs the
   negative-margin trick rather than a width override. */
/* Full-bleed by simply not being a .container child — no negative-margin
   breakout, so no scrollbar-width overflow to reason about. */
.jr-hero{
  margin-top:70px;
  width:100%;
}
.jr-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

/* ---------- Prose ---------- */

.jr-prose{
  max-width:var(--jr-measure);
  margin:0 auto;
  padding:80px 0 40px;
  font-size:19px;
  line-height:34px;
  color:var(--jr-body);
}
.jr-prose > *:first-child{margin-top:0}

.jr-prose p{margin:0 0 30px}

/* Opening paragraph carries slightly more presence without a drop cap. */
.jr-prose > p:first-of-type{
  font-size:21px;
  line-height:36px;
  color:var(--jr-ink);
}

.jr-prose h2,
.jr-prose h3,
.jr-prose h4{
  color:var(--jr-ink);
  font-weight:300;
  letter-spacing:-.4px;
}
/* More space above a heading than below it. */
.jr-prose h2{
  margin:64px 0 22px;
  font-family:var(--serifFont);
  font-weight:100;
  font-size:33px;
  line-height:43px;
  letter-spacing:-1px;
}
.jr-prose h3{margin:52px 0 18px;font-size:20px;line-height:30px}
.jr-prose h4{margin:44px 0 14px;font-size:17px;line-height:28px}

.jr-prose a{
  color:var(--jr-ink);
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--jr-muted);
  transition:text-decoration-color .25s ease;
}
.jr-prose a:hover{text-decoration-color:var(--jr-ink)}

.jr-prose strong{color:var(--jr-ink);font-weight:400}
.jr-prose em{font-style:italic}

.jr-prose ul,
.jr-prose ol{margin:0 0 30px;padding-left:22px}
.jr-prose li{margin:0 0 12px;padding-left:6px}
.jr-prose li::marker{color:var(--jr-muted)}

.jr-prose blockquote{
  margin:52px 0;
  padding:0;
  border:0;
  font-family:var(--serifFont);
  font-weight:100;
  font-size:28px;
  line-height:40px;
  letter-spacing:-.8px;
  color:var(--jr-ink);
}
.jr-prose blockquote p{margin:0}

.jr-prose hr{
  margin:60px 0;
  border:0;
  border-top:1px solid var(--jr-rule);
}

.jr-prose img{
  display:block;
  width:100%;
  height:auto;
  margin:52px 0;
  border-radius:4px;
}

.jr-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.88em;
  color:var(--jr-ink);
}
.jr-prose pre{
  margin:0 0 30px;
  padding:24px;
  overflow-x:auto;
  border:1px solid var(--jr-rule);
  border-radius:4px;
  font-size:13px;
  line-height:22px;
}

/* ---------- Article footer ---------- */

/* general.css styles the bare `footer` element for the site footer
   (black ground, white text). An article byline is also correctly a
   <footer>, so that chrome has to be undone here. */
footer.jr-article-foot{
  max-width:var(--jr-measure);
  margin:0 auto;
  padding:0 0 40px;
  background-color:transparent;
  color:inherit;
  overflow:visible;
}
.jr-byline{
  padding-top:34px;
  border-top:1px solid var(--jr-rule);
  font-size:12px;
  line-height:20px;
  letter-spacing:.24px;
  color:var(--jr-muted);
}
.jr-byline strong{color:var(--jr-ink);font-weight:300}

.jr-more{padding:0 0 150px}
.jr-more .jr-rail-label{margin-bottom:26px}

/* ---------- Responsive ---------- */

@media (max-width:1100px){
  .jr-archive{grid-template-columns:1fr;gap:0}
  .jr-rail{
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:0 32px;
    margin-bottom:46px;
  }
  .jr-rail-group{margin-bottom:22px}
  .jr-rail ul{display:flex;flex-wrap:wrap;gap:0 18px}
  .jr-rail li{margin-bottom:0}
  .jr-entry h2{font-size:33px;line-height:40px}
  .jr-article-head h1{font-size:40px;line-height:48px}
}

@media (max-width:740px){
  .jr-masthead{padding-top:130px;padding-bottom:48px}
  .jr-masthead h1{font-size:38px;line-height:44px;letter-spacing:-1.4px}
  .jr-archive{padding-bottom:100px}
  .jr-entry a{padding:26px 0 24px}
  .jr-entry h2{font-size:27px;line-height:34px;letter-spacing:-.7px;max-width:none}
  .jr-meta{gap:12px;flex-wrap:wrap}
  .jr-article-head{padding-top:120px}
  .jr-article-head h1{font-size:34px;line-height:41px;letter-spacing:-1.1px}
  .jr-article-head .jr-standfirst{font-size:16px;line-height:28px}
  .jr-hero{margin-top:44px}
  .jr-prose{padding:52px 0 32px;font-size:16px;line-height:29px}
  .jr-prose > p:first-of-type{font-size:17px;line-height:31px}
  .jr-prose h2{margin:46px 0 18px;font-size:26px;line-height:34px}
  .jr-prose blockquote{margin:40px 0;font-size:23px;line-height:33px}
  .jr-more{padding-bottom:100px}
}

@media (prefers-reduced-motion:reduce){
  .jr-entry,
  .jr-entry h2,
  .jr-rail a,
  .jr-prose a{transition:none}
}

/* ---------- Pager ---------- */

.jr-pager{
  display:flex;
  align-items:baseline;
  gap:28px;
  margin-top:44px;
  font-size:10px;
  line-height:1;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.jr-pager a{color:var(--jr-ink);text-decoration:none;border-bottom:1px solid var(--jr-rule);padding-bottom:3px}
.jr-pager a:hover{border-bottom-color:var(--jr-ink)}
.jr-pager-count{color:var(--jr-muted)}