@charset "UTF-8";
/* ============================================================================
   The journal, and the reviews.

   Thirty-two posts brought across from the old WordPress site. They arrive as
   ordinary prose -- headings, paragraphs, lists, pictures -- so this sets one
   readable column and gets out of the way. Everything is drawn from olive.css's
   tokens, so the writing sits in the same world as the rest of the estate.
   ========================================================================== */

/* ------------------------------------------------------------ the index */
.jr-list{list-style:none;margin:clamp(1.6rem,4vw,2.6rem) 0 0;padding:0;
  display:grid;gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.jr-card a{display:block;text-decoration:none;color:var(--deep);height:100%}
.jr-card figure{margin:0 0 1rem;overflow:hidden;background:var(--cream)}
.jr-card img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.jr-card a:hover img,.jr-card a:focus-visible img{transform:scale(1.04)}
.jr-when{display:block;font:500 .66rem/1 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive);margin-bottom:.6rem}
.jr-card h2{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 .5rem;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .5s cubic-bezier(.16,1,.3,1)}
.jr-card a:hover h2,.jr-card a:focus-visible h2{background-size:100% 1px}
.jr-card p{font-size:.94rem;margin:0;max-width:34rem}

/* -------------------------------------------------------------- the post */
.jr-post{max-width:none}
/* The reading column lines up with the page's headline rather than
   centring, so a post sits in the same grid as every other page. */
.prose{max-width:38rem;margin:0}
.prose > *{max-width:100%}
.prose p{font-size:1.06rem;line-height:1.65;margin:0 0 1.3rem}
.prose h2{font-size:clamp(1.7rem,3vw,2.3rem);margin:clamp(2.2rem,5vw,3.4rem) 0 .9rem}
.prose h3{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:clamp(1.8rem,4vw,2.6rem) 0 .7rem}
.prose h4{font:500 .72rem/1.3 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--olive);margin:2rem 0 .6rem}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.3rem}
.prose li{margin-bottom:.5rem;line-height:1.6}
.prose a{color:inherit;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom:.1rem;transition:background-size .5s cubic-bezier(.16,1,.3,1)}
.prose a:hover,.prose a:focus-visible{background-size:0 1px;background-position:100% 100%}
.prose strong{font-weight:600}
.prose blockquote{margin:2rem 0;padding-left:1.2rem;border-left:2px solid var(--olive);
  font:italic 400 1.15rem/1.5 var(--text)}
/* Pictures reach a little past the reading measure, to the right, so they
   are part of the writing rather than an interruption -- and the left edge
   stays true to the column. */
.prose figure{margin:clamp(2rem,4vw,3rem) 0;width:min(46rem,100%)}
.prose img{width:100%;height:auto;display:block}
.prose figcaption{font:500 .74rem/1.4 var(--sans);letter-spacing:.06em;color:var(--olive);
  margin-top:.6rem;text-align:center}

/* ----------------------------------------------------------- the reviews */
/* Five reviews, each with a name against it. They are set as testimony --
   the headline the reviewer gave it, their words, and their signature --
   rather than as decorative pull quotes in boxes, which is what the first
   pass did and which read as filler. */
.rv-list{list-style:none;margin:clamp(1.8rem,5vw,3.4rem) 0 0;padding:0;
  display:grid;gap:clamp(2.4rem,6vw,4.5rem);max-width:44rem}
.rv{display:grid;gap:.9rem;padding-top:clamp(1.6rem,4vw,2.4rem);border-top:1px solid var(--olive)}
.rv:first-child{border-top:0;padding-top:0}
.rv h2{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.1;margin:0;max-width:20ch}
.rv blockquote{margin:0;font:400 1.05rem/1.65 var(--text);max-width:38rem}
.rv-who{margin:.3rem 0 0;font:500 .7rem/1.4 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive)}
.rv-who span{display:block;letter-spacing:.14em;opacity:.75;margin-top:.3rem}

/* Wide enough, and the signature sits out in the margin beside the words,
   where a name belongs. */
@media (min-width:1100px){
  .rv-list{max-width:none}
  .rv{grid-template-columns:minmax(0,26rem) 1fr;column-gap:clamp(2rem,4vw,4rem);
    align-items:start}
  .rv h2{grid-column:1;grid-row:1}
  .rv-who{grid-column:1;grid-row:2;margin-top:.6rem}
  .rv blockquote{grid-column:2;grid-row:1 / span 2}
}