/* =========================================================
   journal.css — the Journal: journal.html and the articles
   ---------------------------------------------------------
   Long reading, set for it: one column about seventy
   characters wide, generous line height, headings in the same
   wide Archivo as the rest of the site. Layered on main.css,
   so every colour and font here is one of its tokens.
   Only the journal pages load this file.
   ========================================================= */

/* ---------- the masthead: a crumb trail above the headline ---------- */
.jr-crumbs{
  display: flex; flex-wrap: wrap; gap: .45rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.3rem;
}
.jr-crumbs a{ color: var(--rust-text); text-decoration: none; }
.jr-crumbs a:hover{ text-decoration: underline; }
.jr-meta{
  margin-top: 1.4rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
/* an article headline is a sentence, not a slogan: smaller than the
   other pages' display-1, so it sits on two or three lines */
.page-hero .jr-title{ max-width: 26ch; font-size: clamp(2rem, 4.2vw, 3.5rem); line-height: 1.02; }

/* ---------- the article ---------- */
.jr-body{
  max-width: 44rem;               /* about seventy characters a line */
  font-family: var(--font-body);
  font-size: clamp(1.02rem, 1.25vw, 1.12rem);
  line-height: 1.75;
  color: var(--ink-soft);
}
.jr-body > * + *{ margin-top: 1.15em; }
.jr-body h2{
  margin-top: 2.4em;
  font-family: var(--font-display); font-stretch: var(--semi);
  font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25; color: var(--ink);
}
.jr-body h2 + *{ margin-top: .7em; }
.jr-body h3{
  margin-top: 1.8em;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.08rem; color: var(--ink);
}
.jr-body strong{ color: var(--ink); font-weight: 600; }
.jr-body a{ color: var(--rust-text); text-underline-offset: .18em; }
.jr-body ul,
.jr-body ol{ padding-left: 1.25em; }
.jr-body ul{ list-style: disc; }      /* main.css's reset takes the bullets off */
.jr-body ol{ list-style: decimal; }
.jr-body li + li{ margin-top: .45em; }
.jr-body li::marker{ color: var(--rust); }

/* a photograph, full column width */
.jr-figure{ margin-block: 2em; }
.jr-figure img{
  display: block; width: 100%; height: auto;
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.jr-figure figcaption{
  margin-top: .6rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .06em; color: var(--ink-faint);
}

/* the short answer, boxed at the top of an article */
.jr-answer{
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--rust);
  background: var(--rust-tint);
  color: var(--ink);
}
.jr-answer p + p{ margin-top: .6em; }

/* a day-by-day table */
.jr-table{
  width: 100%; border-collapse: collapse;
  font-size: .95rem; line-height: 1.5;
}
.jr-table th,
.jr-table td{ padding: .7rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.jr-table th{
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.jr-table td:first-child{ white-space: nowrap; color: var(--ink); }
.jr-table-wrap{ overflow-x: auto; }

/* ---------- the call to book, at the end of every article ---------- */
.jr-next{
  margin-top: 2.6em; padding: 1.5rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface);
}
.jr-next h2{ margin-top: 0; font-size: 1.25rem; }
.jr-next p{ margin-top: .5em; }
.jr-next-actions{ display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.1rem; }

/* ---------- more from the journal ---------- */
.jr-more{ margin-top: 3rem; max-width: 44rem; }
.jr-more h2{
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.jr-more ul{ list-style: none; padding: 0; margin-top: .8rem; }
.jr-more li{ border-top: 1px solid var(--line); }
.jr-more a{
  display: block; padding: .9rem 0;
  font-family: var(--font-display); font-stretch: var(--semi); font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.jr-more a:hover{ color: var(--rust-text); }

/* ---------- journal.html: the list of articles ---------- */
.jr-list{
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.jr-card{
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.jr-card:hover{ border-color: var(--gold-line); transform: translateY(-2px); }
/* height:auto, or the img's height="…" attribute sets it to the photo's own height */
.jr-card img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-2); }
.jr-card-body{ padding: 1.2rem 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.jr-card-k{
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rust-text);
}
.jr-card h2{
  font-family: var(--font-display); font-stretch: var(--semi);
  font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--ink);
}
.jr-card p{ font-size: .95rem; line-height: 1.6; color: var(--ink-soft); }
.jr-card-go{ margin-top: auto; padding-top: .4rem; font-size: .85rem; color: var(--rust-text); }

/* On phones css/mobile.css cuts every page-hero intro to three lines. An
   article's intro is its summary, so here it is shown in full. (The extra
   class in the selector is what lets this win over mobile.css, which loads
   after this file.) */
@media (max-width: 768px){
  .page-hero .page-hero-inner .lede{
    display: block; overflow: visible;
    -webkit-line-clamp: unset; line-clamp: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .jr-card, .jr-card:hover{ transition: none; transform: none; }
}


/* ---------- A table inside an article ----------
   Used by the price page. It scrolls sideways in its own box on a phone,
   so the article itself never does. */
.jr-table-wrap{
  margin: 1.6rem 0 .8rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.jr-table{
  width: 100%; border-collapse: collapse;
  font-size: .9rem; font-variant-numeric: tabular-nums;
}
.jr-table th,
.jr-table td{
  padding: .7rem .9rem; text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.jr-table tbody tr:last-child td{ border-bottom: 0; }
.jr-table th{
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--surface-2);
}
.jr-table td{ color: var(--ink-soft); }
.jr-table td:first-child{ color: var(--ink); font-weight: 600; }
.jr-table .n{ text-align: right; }
.jr-table tbody td.n:nth-child(4){ color: var(--rust-text); font-weight: 600; }
.jr-table-note{ font-size: .84rem; line-height: 1.6; color: var(--ink-faint); }
@media (max-width: 768px){
  .jr-table{ font-size: .84rem; }
  .jr-table th, .jr-table td{ padding: .6rem .7rem; }
}