/* journals.html: the hardcover journal collection. Added 2026-10-08.
   The hero is a notebook page: warm paper, a red margin line, the lede set on
   its own ruled lines (each line of text sits on a rule, so they can never
   drift apart the way a background-wide ruling would), and two of the covers
   taped onto the page like photos. The only light hero in the new set, on
   purpose: these are the quiet, everyday pieces. */

.jr-hero{
  position: relative;
  background-color: #f5f0e4;
  background-image: radial-gradient(70% 90% at 85% 10%, rgba(217,165,49,.16), transparent 70%);
  color: var(--ink);
  padding: 76px 0 84px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-light);
}
.jr-hero .wrap{ position: relative; }
/* The red margin line of a ruled page, running the full height of the hero. */
.jr-hero .wrap::before{
  content: "";
  position: absolute;
  left: 6px;
  top: -76px; bottom: -84px;
  width: 2px;
  background: rgba(179,18,45,.42);
}
.jr-hero-inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.jr-copy{ padding-left: 26px; }
.jr-copy .eyebrow{ display: block; color: var(--accent); margin-bottom: 18px; }
.jr-copy h1{
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  margin-bottom: 26px;
}
.jr-copy h1 em{ font-style: normal; color: var(--accent); }
.jr-copy .lede{
  font-size: 1.04rem;
  line-height: 32px;
  color: #4a463e;
  max-width: 48ch;
  margin-bottom: 26px;
  background-image: linear-gradient(transparent 30px, rgba(62,92,140,.24) 30px 31px, transparent 31px);
  background-size: 100% 32px;
}
.jr-copy .hero-meta{ color: var(--ink); }
.jr-copy .hero-meta strong{ color: var(--accent); }

/* Two covers taped to the page. */
.jr-photos{
  position: relative;
  height: 430px;
}
.jr-photo{
  position: absolute;
  margin: 0;
  width: 46%;
  max-width: 250px;
  padding: 11px 11px 34px;
  background: #fff;
  box-shadow: 0 18px 38px rgba(27,27,27,.22), 0 2px 4px rgba(27,27,27,.08);
}
.jr-photo img{ display: block; width: 100%; height: auto; }
.jr-photo::before{                       /* strip of tape */
  content: "";
  position: absolute;
  top: -13px; left: 50%;
  width: 92px; height: 26px;
  margin-left: -46px;
  background: rgba(233,214,160,.72);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transform: rotate(-4deg);
}
.jr-photo-back{ top: 6px; right: 6%; transform: rotate(6deg); }
.jr-photo-front{ top: 64px; right: 40%; transform: rotate(-5deg); z-index: 2; }

@media (max-width: 960px){
  .jr-hero-inner{ grid-template-columns: 1fr; gap: 34px; }
  .jr-photos{ height: 330px; max-width: 520px; width: 100%; margin: 0 auto; }
  .jr-photo{ max-width: 200px; }
  .jr-photo-back{ right: 10%; }
  .jr-photo-front{ right: auto; left: 10%; top: 40px; }
}
@media (max-width: 620px){
  .jr-hero{ padding: 52px 0 60px; }
  .jr-hero .wrap::before{ left: 4px; top: -52px; bottom: -60px; }
  .jr-copy{ padding-left: 16px; }
  .jr-copy .lede{ font-size: .98rem; }
  .jr-photos{ height: 270px; }
  .jr-photo{ width: 44%; padding: 8px 8px 24px; }
  .jr-photo::before{ width: 70px; margin-left: -35px; height: 22px; }
  .jr-photo-back{ right: 4%; }
  .jr-photo-front{ left: 4%; top: 34px; }
}