/* ============================================================
   JOURNAL
   Page specific styles for journal.html and the article
   template. Everything here is prefixed .jr- so it cannot
   collide with the shared component classes in site.css.

   Direction: the homepage journal strip is a teaser, so it
   crops hard and leads with image. A journal you actually read
   should feel like paper instead: generous measure, quiet
   rules between entries, and type that gets out of the way.
   The index borrows .post from site.css for its cards so the
   two surfaces stay recognisably the same journal.
   ============================================================ */

/* ---------- Index header ---------- */

.jr-head{
  padding-bottom:clamp(48px,6vw,80px);
  border-bottom:1px solid var(--sand-deep);
}
.jr-head__row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(32px,5vw,80px);flex-wrap:wrap;
}
.jr-head h1{max-width:14ch}
.jr-head .lead{max-width:46ch;padding-bottom:10px}

/* ---------- Featured entry ---------- */

.jr-feature{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(32px,4vw,64px);align-items:center;
  padding-block:clamp(56px,7vw,96px);
  border-bottom:1px solid var(--sand-deep);
}
.jr-feature__img{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:1.5;
}
.jr-feature__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease);
}
.jr-feature:hover .jr-feature__img img{transform:scale(1.03)}
.jr-feature__body{display:flex;flex-direction:column;gap:20px}
.jr-feature__title{
  font-family:var(--serif);font-weight:400;color:var(--green);
  font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.12;
  letter-spacing:-.015em;
}
.jr-feature__excerpt{color:var(--ink-soft);line-height:1.7;max-width:44ch}

/* ---------- Meta line ---------- */

.jr-meta{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);
}
.jr-meta span:not(:last-child)::after{
  content:"";display:inline-block;width:14px;height:1px;
  background:var(--green-soft);vertical-align:middle;
  margin-left:12px;
}

/* ---------- Index grid ---------- */

.jr-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(40px,4vw,64px) clamp(28px,3vw,48px);
  padding-block:clamp(56px,7vw,96px);
}
.jr-grid .post__img{aspect-ratio:1.3}
.jr-grid .post__body{padding-right:0}
.jr-grid .post__title{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.28}

/* A card whose post is not written yet. Reads as deliberate
   rather than broken, and is easy to delete once it is live. */
.jr-card--soon{pointer-events:none}
.jr-card--soon .post__img{background:var(--sand)}
.jr-card--soon .post__img img{opacity:.45}
.jr-card--soon .post__title{color:var(--green-soft)}

/* ---------- Article page ---------- */

.jr-article{max-width:none}
.jr-article__head{
  max-width:52rem;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:24px;
}
.jr-article__head h1{
  font-size:clamp(2.4rem,5.2vw,4.2rem);font-weight:300;
  color:var(--green);line-height:1.08;
}
.jr-article__hero{
  border-radius:var(--radius);overflow:hidden;aspect-ratio:1.9;
  margin-block:clamp(40px,5vw,72px);
}
.jr-article__hero img{width:100%;height:100%;object-fit:cover}

.jr-body{
  max-width:38rem;margin-inline:auto;
  font-size:clamp(1.02rem,1.25vw,1.12rem);line-height:1.85;
  color:var(--ink);
}
.jr-body > * + *{margin-top:1.5em}
.jr-body h2{
  font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:400;
  color:var(--green);line-height:1.2;margin-top:2.2em;
}
.jr-body h3{
  font-size:clamp(1.3rem,1.9vw,1.55rem);font-weight:600;
  color:var(--green);margin-top:2em;
}
.jr-body a{
  color:var(--terracotta-deep);
  border-bottom:1px solid rgba(148,71,70,.32);
}
.jr-body a:hover{border-bottom-color:var(--terracotta-deep)}
.jr-body ul,.jr-body ol{padding-left:1.3em;color:var(--ink-soft)}
.jr-body li + li{margin-top:.6em}
.jr-body img{border-radius:var(--radius);width:100%}
.jr-body figure{margin:2.4em 0}
.jr-body figcaption{
  margin-top:12px;font-size:.85rem;color:var(--ink-soft);text-align:center;
}
.jr-body blockquote{
  margin:2.4em 0;padding-left:clamp(20px,3vw,32px);
  border-left:2px solid var(--terracotta);
  font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.85rem);
  line-height:1.35;font-weight:300;color:var(--green);
}
.jr-body blockquote p + p{margin-top:.5em}

.jr-sign{
  font-family:var(--script);
  font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.25;
  color:var(--terracotta-deep);margin-top:2.4em;
}

/* ---------- Article footer ---------- */

.jr-next{
  border-top:1px solid var(--sand-deep);
  margin-top:clamp(64px,8vw,112px);
  padding-top:clamp(48px,6vw,80px);
}
.jr-next__label{margin-bottom:clamp(28px,3vw,44px)}
.jr-next__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,3vw,48px);
}
.jr-next__grid .post__img{aspect-ratio:1.6}

/* ---------- Responsive ---------- */

@media (max-width:1023px){
  .jr-grid{grid-template-columns:repeat(2,1fr)}
  .jr-feature{grid-template-columns:1fr;gap:32px}
  .jr-feature__img{aspect-ratio:1.7}
}
@media (max-width:639px){
  .jr-grid{grid-template-columns:1fr;gap:44px}
  .jr-next__grid{grid-template-columns:1fr}
  .jr-head__row{gap:24px}
  .jr-article__hero{aspect-ratio:1.4}
}

/* ============================================================
   ARTICLE ADDITIONS
   Components the article template needed but did not have:
   a byline, a reusable service CTA, and two development-only
   markers used while an article is still a draft.
   ============================================================ */

/* ---------- Byline ---------- */
/* Sits under the standfirst in the centred title block. The site has
   no author profile system, so the byline links to the About page,
   which is where Julia's bio already lives. */
.jr-byline{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:.85rem;color:var(--ink-soft);
}
.jr-byline__by{font-style:italic}
.jr-byline a{
  color:var(--green);text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
}
.jr-byline a:hover{color:var(--terracotta-deep)}
/* Optional "Updated" line; leave the element out entirely when an
   article has never been revised. */
.jr-updated{
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);
}

/* ---------- In-article service CTA ---------- */
/* One component, used at the foot of every article in the cluster.
   Matches the sand panel used on the service pages rather than
   introducing a new card style. */
.jr-cta{
  max-width:38rem;margin:clamp(56px,7vw,88px) auto 0;
  background:var(--sand);border-radius:var(--radius);
  padding:clamp(28px,4vw,48px);
  display:flex;flex-direction:column;align-items:flex-start;gap:16px;
}
.jr-cta__eyebrow{margin-bottom:2px}
.jr-cta h2{
  font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.1rem);
  font-weight:400;color:var(--green);line-height:1.2;margin:0;
}
.jr-cta p{font-size:.98rem;line-height:1.7;color:var(--ink-soft);max-width:46ch}
.jr-cta .btn{margin-top:6px}
@media (max-width:520px){ .jr-cta .btn{width:100%;justify-content:center} }

/* ---------- Development-only markers ----------
   Both of these are deliberately loud. They exist so an unfinished
   article can never be mistaken for a finished one, and both are
   deleted outright when the real content goes in. */
.jr-draft{
  max-width:38rem;margin-inline:auto;
  border:1px dashed var(--terracotta);border-radius:12px;
  background:rgba(186,101,98,.06);
  padding:clamp(20px,3vw,32px);
  display:flex;flex-direction:column;gap:10px;
}
.jr-draft__label{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terracotta-deep);
}
.jr-draft__slot{
  font-family:var(--sans);font-size:1rem;line-height:1.6;
  color:var(--terracotta-deep);margin:0;
}
.jr-draft__note{font-size:.85rem;line-height:1.6;color:var(--ink-soft);margin:0}
.jr-draft__note code{
  font-size:.82em;background:rgba(52,56,55,.06);
  padding:1px 5px;border-radius:4px;
}

/* A hero slot with no suitable photograph in the library yet. Holds
   the exact aspect ratio the real image will use, so dropping the
   file in later changes nothing about the layout. */
.jr-article__hero--todo{
  display:grid;place-items:center;text-align:center;
  background:var(--sand);
  border:1px dashed var(--terracotta);
  padding:24px;
}
.jr-article__hero--todo p{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta-deep);line-height:1.8;max-width:44ch;
}
.jr-article__hero--todo span{
  display:block;letter-spacing:normal;text-transform:none;
  font-size:.9rem;color:var(--ink-soft);margin-top:10px;
}

/* A related-article card whose hero image does not exist yet. Fills the
   .post__img ratio with the sand tone so the card keeps its shape. */
.jr-card--noimg{display:block;width:100%;height:100%;background:var(--sand)}

/* A hero whose source is a tall portrait. The 1.9 hero crop would otherwise
   centre on the torso and cut the head off, so pull the framing upward. */
.jr-article__hero--tall img{object-position:50% 22%}