/* ==================================================================
   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: ui-monospace, SFMono-Regular, Menlo, 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%
  );
}

/* ==================================================================
   Index — cards with covers

   The index used to be titles in a column. It was tidy and it did not
   read as a blog, because a blog is a thing you graze and this was a
   table of contents.

   Three findings shaped what replaced it, and they agree with each
   other:

     Nielsen's blog front-page study found readers scan *summaries*.
     Shown whole posts they read the first and stopped; shown summaries
     they worked through ten. So each card carries the standfirst, not
     just the headline — and not the article.

     Nielsen's scanning work found readers catch on headlines and on
     images, and ignore pictures that are only there to decorate. The
     covers are drawn from each title, so the picture says what the post
     says.

     NN/g's eyetracking on zigzag layouts found alternating image sides
     makes readers stumble — they fixate on an image, then have to find
     the text again. Aligned images let them run straight down. So every
     cover sits at the top of its own card and they line up across the
     row. Nothing alternates.

   The newest post runs full width. A list where every item is the same
   size tells a reader nothing about where to start.
   ================================================================== */
.jr_cards {
  display: grid;
  /* 24rem, not 20: at 20 a 1440px screen fits four across and the
     standfirst wraps to six short lines, which is the measure problem
     the cards were meant to fix */
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: var(--_spacing---section-space--small, 4rem) var(--site--gutter, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jr_card.is-lead { grid-column: 1 / -1; }

.jr_card_link {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--5, 1.4rem);
  height: 100%;
  color: inherit;
  text-decoration: none;
  transition: opacity 300ms ease;
}
.jr_cards:hover .jr_card_link { opacity: .45; }
.jr_cards:hover .jr_card_link:hover { opacity: 1; }
.jr_card_link:focus-visible { outline: 2px solid currentColor; outline-offset: .6rem; }

.jr_card_media {
  display: block;
  overflow: clip;
  background: var(--swatch--black-300, #12120f);
}
.jr_card_media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}
.jr_card_link:hover .jr_card_media img { transform: scale(1.03); }

.jr_card_body {
  display: flex;
  flex-flow: column;
  gap: var(--_spacing---space--3, .7rem);
  max-width: 42ch;
}
.jr_card_tag {
  color: var(--swatch--black-50, #938f8a);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.jr_card_title { display: block; text-wrap: balance; }
.jr_card_desc { color: var(--swatch--black-50, #938f8a); max-width: 46ch; }
.jr_card_meta {
  color: var(--swatch--black-100, #6b645c);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
  padding-top: var(--_spacing---space--2, .4rem);
}

/* the lead runs picture-left, words-right on a wide screen — one row of
   it, which is inside what the zigzag study calls fine */
@media (min-width: 992px) {
  .jr_card.is-lead .jr_card_link {
    flex-flow: row;
    align-items: center;
    gap: var(--_spacing---space--8, 3rem);
  }
  .jr_card.is-lead .jr_card_media { flex: 1 1 58%; min-width: 0; }
  .jr_card.is-lead .jr_card_body { flex: 1 1 42%; max-width: 34ch; }
}

/* ------------------------------------------------------- breadcrumbs ---- */
/* The trail was in the JSON-LD and nowhere a person could see it: Google
   could follow it and a reader two levels down could not. Google builds
   the breadcrumb in a result from either source, so this costs nothing
   there and fixes the half that mattered more. */
.jr_crumbs {
  margin: 0 0 var(--_spacing---space--6, 2rem);
  color: var(--swatch--black-100, #6b645c);
}
.jr_crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jr_crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.jr_crumbs a { color: var(--swatch--black-50, #938f8a); text-decoration: none; }
.jr_crumbs a:hover { color: var(--swatch--beige-100, #e8e8e3); }
/* the last crumb is the page you are on, so it does not need to be short */
.jr_crumbs [aria-current] {
  /* inline-block, because max-width does nothing to an inline box and
     the headline crumb then ran the full width of the title */
  display: inline-block;
  vertical-align: bottom;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----------------------------------------------------------- byline ---- */
.jr_byline {
  display: flex;
  align-items: center;
  gap: var(--_spacing---space--4, 1rem);
  margin-top: var(--_spacing---space--3, .7rem);
}
.jr_byline_face {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--swatch--black-300, #12120f);
}
.jr_byline_text { display: flex; flex-flow: column; gap: .15rem; }
.jr_byline_name { color: var(--swatch--beige-100, #e8e8e3); }
.jr_byline_meta {
  color: var(--swatch--black-50, #938f8a);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- hero ---- */
/* The cover again, above the first line of the article. It is the same
   file the card and the share preview use, so somebody arriving from
   either lands on the picture they clicked. */
.jr_hero {
  margin: 0 0 var(--_spacing---section-space--small, 5rem);
  overflow: clip;
  background: var(--swatch--black-300, #12120f);
}
.jr_hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}

@media (max-width: 991px) {
  .jr_card.is-lead .jr_card_body { max-width: none; }
  .jr_cards:hover .jr_card_link { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .jr_card_link, .jr_card_media img { transition: none; }
  .jr_card_link:hover .jr_card_media img { transform: none; }
}

/* The footer itself lives in site.css — it is on the booking page too,
   and that page does not load this file. */

/* 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; }