/* ==================================================================
   journal.css — the journal, built out of the home page's own sections.

   The point is visual familiarity. A reader who arrives here from a
   search has already learned the home page's language once; making them
   learn a second one is what loses them. So there is nothing new here:

     the index    borrows the works section — a display heading over a
                  list of title-and-description rows
     an article   borrows the process section — a display heading, then
                  rows split heading-left / prose-right

   No rules, no boxed panels, no micro-labels. Separation is space and
   type scale, which is how the rest of the site does it.
   ================================================================== */

body.jr-body {
  margin: 0;
  background: var(--swatch--black-400, #080807);
  color: var(--swatch--beige-100, #e8e8e3);
  min-height: 100svh;
}

.jr_wrap {
  padding: var(--_spacing---section-space--page-top, 9rem)
           var(--site--margin, 1.5rem)
           var(--_spacing---section-space--large, 7rem);
  overflow: clip;
}

/* the display heading that opens every section on the home page ---- */
.jr_display {
  margin: 0 0 var(--_spacing---space--8, 3rem);
  color: var(--swatch--beige-100, #e8e8e3);
  font-family: var(--_typography---font--secondary-family, sans-serif);
  font-weight: 800;
  font-size: 13.85vw;
  line-height: .82;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

/* ==================================================================
   Index — the works section's list rhythm
   ================================================================== */
.jr_index_lede {
  max-width: 34ch;
  margin: 0 0 var(--_spacing---section-space--small, 5rem);
  color: var(--swatch--black-50, #938f8a);
}

.jr_list {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---section-space--small, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.jr_item_link {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--site--gutter, 1.5rem);
  width: 100%;
  color: inherit;
  text-decoration: none;
  transition: opacity 300ms ease;
}
/* the row the pointer is on stays lit and the rest recede — the same
   move the nav and the works list make */
.jr_list:hover .jr_item_link { opacity: .4; }
.jr_list:hover .jr_item_link:hover { opacity: 1; }
.jr_item_link:focus-visible { outline: 2px solid currentColor; outline-offset: .6rem; }

.jr_item_text {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--4, 1rem);
  max-width: 39ch;
}
.jr_item_meta {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--2, .4rem);
  align-items: flex-end;
  text-align: right;
  flex: none;
  color: var(--swatch--black-50, #938f8a);
  font-variant-numeric: tabular-nums;
}

/* ==================================================================
   Article — the process section's rhythm
   ================================================================== */
.jr_header {
  max-width: var(--column-width--8, 60ch);
  margin-bottom: var(--_spacing---section-space--small, 5rem);
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--5, 1.4rem);
}
.jr_kicker {
  color: var(--swatch--black-50, #938f8a);
  font-variant-numeric: tabular-nums;
}
.jr_title {
  margin: 0;
  max-width: 20ch;
}
/* the standfirst runs the home page's scroll-highlight, which is the
   single most recognisable thing on the site */
.jr_lede {
  margin: 0;
  max-width: 30ch;
  color: var(--swatch--beige-100, #e8e8e3);
}

.jr_content-list {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---section-space--small, 5rem);
}

/* heading left, prose right — the process section's split exactly */
.jr_content-item {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--site--gutter, 1.5rem);
}
.jr_content-left { flex: 1; }
.jr_content_heading { margin: 0; max-width: 20ch; }

.jr_prose {
  width: var(--column-width--6, 50%);
  flex: none;
  color: var(--swatch--black-50, #938f8a);
  font-family: var(--_typography---font--primary-family, sans-serif);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.55;
}
/* zero the children generically so the sibling rule below is what sets
   the rhythm; `.jr_prose p { margin: 0 }` would out-specify it */
.jr_prose > * { margin: 0; }
.jr_prose > * + * { margin-top: var(--_spacing---space--5, 1.4rem); }

.jr_prose strong { color: var(--swatch--beige-100, #e8e8e3); font-weight: 600; }
.jr_prose a { color: var(--swatch--beige-100, #e8e8e3); }
.jr_prose ul, .jr_prose ol {
  padding-left: 1.2rem;
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--3, .7rem);
}
.jr_prose li::marker { color: var(--swatch--black-100, #6b645c); }

/* sub-headings inside a section stay in the body column */
.jr_prose h3, .jr_prose h4 {
  margin-top: var(--_spacing---space--6, 2rem);
  color: var(--swatch--beige-100, #e8e8e3);
  font-family: var(--_typography---font--primary-family, sans-serif);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}

/* the one pulled line per article, set in the display face the way the
   home page sets its statements */
.jr_prose blockquote { margin-top: var(--_spacing---space--7, 2.5rem); }
.jr_prose blockquote p {
  color: var(--swatch--beige-100, #e8e8e3);
  font-family: var(--_typography---font--secondary-family, sans-serif);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.jr_prose code {
  font-family: var(--_typography---font--tertiary-family, monospace);
  font-size: .88em;
  color: var(--swatch--beige-100, #e8e8e3);
}
.jr_prose hr { display: none; }

/* --- pictures ------------------------------------------------------
   No frame, no caption rule, no rounded corners. The image sits in the
   prose column at its own width and the caption reads as another line
   of body text, one step quieter. */
.jr_figure { margin-top: var(--_spacing---space--7, 2.5rem); }
.jr_figure img {
  display: block;
  width: 100%;
  height: auto;
  /* width and height are written into the markup when the studio knows
     them, so the space is reserved before the bytes arrive */
  background: var(--swatch--black-300, #12120f);
}
.jr_figure figcaption {
  margin-top: var(--_spacing---space--3, .7rem);
  color: var(--swatch--black-100, #6b645c);
  font-size: .92em;
  line-height: 1.45;
}

/* A pause between passages, as space. A rule would be the one hairline
   on a site that has none. */
.jr_break {
  height: var(--_spacing---space--6, 2rem);
  pointer-events: none;
}

/* --- closing call, then what to read next ------------------------- */
.jr_end {
  margin-top: var(--_spacing---section-space--large, 8rem);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--site--gutter, 1.5rem);
}
.jr_end_text {
  flex: 1;
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--5, 1.4rem);
  max-width: 20ch;
}
.jr_end_aside {
  width: var(--column-width--6, 50%);
  flex: none;
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--5, 1.4rem);
  align-items: flex-start;
}
.jr_end_aside p { margin: 0; max-width: 34ch; color: var(--swatch--black-50, #938f8a); }
.jr_end .g_btn_main { display: inline-flex; align-items: center; }

.jr_next {
  margin-top: var(--_spacing---section-space--large, 8rem);
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--site--gutter, 1.5rem);
}
.jr_next_heading { flex: 1; margin: 0; max-width: 20ch; }
.jr_next_list {
  width: var(--column-width--6, 50%);
  flex: none;
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--5, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jr_next_list a {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--2, .35rem);
  color: inherit;
  text-decoration: none;
  transition: opacity 300ms ease;
}
.jr_next_list:hover a { opacity: .4; }
.jr_next_list:hover a:hover { opacity: 1; }
.jr_next_date { color: var(--swatch--black-50, #938f8a); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------
   Below the site's own tablet breakpoint the process section stacks,
   so these do too.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
  .jr_display { font-size: 17vw; }
  .jr_content-item, .jr_end, .jr_next, .jr_item_link {
    flex-flow: column;
    gap: var(--_spacing---space--5, 1.4rem);
  }
  .jr_prose, .jr_end_aside, .jr_next_list { width: 100%; }
  .jr_item_meta { flex-flow: row; gap: 1rem; align-items: baseline; text-align: left; }
  .jr_list:hover .jr_item_link { opacity: 1; }
  .jr_header { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .jr_item_link, .jr_next_list a { transition: none; }
}

/* The process section's rows are short, so its heading never leaves the
   viewport. Article sections run long, so the heading is pinned while its
   own prose scrolls past — same layout, it just holds your place. */
@media (min-width: 992px) {
  .jr_content_heading {
    position: sticky;
    top: calc(var(--_spacing---section-space--page-top, 6rem) * .55);
  }
}

/* Body copy passes under the fixed nav, which the home page's scrim was
   never sized for — dense text stayed legible through it. */
.jr-body .nav_scrim {
  height: clamp(5rem, 10vh, 7rem);
  background: linear-gradient(
    to bottom,
    var(--swatch--black-400, #080807) 0%,
    color-mix(in srgb, var(--swatch--black-400, #080807) 92%, transparent) 55%,
    transparent 100%
  );
}

/* ------------------------------------------------------------- legal ---- */
/* Privacy and Terms, and the row that links to them from every rendered
   page. A platform review asks for both to be reachable without hunting
   through a menu, which is also where anyone would look. */
.jr_footer {
  padding: clamp(2.4rem, 6vh, 4rem) var(--site--gutter, 1.5rem);
  display: flex;
  justify-content: center;
}
.footer_legal { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer_legal_link {
  color: var(--swatch--black-50, #938f8a);
  text-decoration: none;
  transition: color 300ms ease;
}
.footer_legal_link:hover { color: var(--swatch--beige-100, #e8e8e3); }

/* the prose column takes lists as well as paragraphs on these two */
.jr_prose ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
.jr_prose li { margin-bottom: .5rem; }