/* =====================================================================
   Journal — blog archive (index.html query loop) and single post view
   (single.html). Archive reuses the site's card language (white surface,
   16px radius, tinted shadow — same family as home's .journey-card).
   Single post keeps a plain centered title block and reuses legal.css's
   prose rhythm for body copy, bumped up to full ink contrast and larger
   type since this is primary reading content, not fine-print legal text.

   SCOPING: every rule below is scoped under either .journal-grid (the
   archive's query-loop wrapper) or body.single-post (the single-post
   body class WordPress adds only on that template). This is mandatory,
   not stylistic — .wp-block-post-content, .wp-block-post-title etc. are
   WordPress CORE block classes that also render on every ordinary Page
   (About, Contact, Visa, tour pages...) via the Post Content block in
   page.html. An earlier version of this file targeted those classes
   unscoped and it broke every page on the site (their content got
   crushed into a 70ch column) since every page loads every CSS file.
   Never add a bare .wp-block-post-content / .wp-block-post-title /
   .wp-block-post-excerpt rule here again — always scope it.
   ===================================================================== */

/* ---------- Archive (index.html) ---------- */
.journal-hero{padding-top:clamp(96px,11vw,120px);padding-bottom:clamp(32px,5vw,48px)}
.journal-hero .eyebrow{color:var(--coral-strong)}
.journal-hero h1{font-size:clamp(2.1rem,4.2vw,3rem);margin:.6rem 0 .6rem;max-width:20ch}
.journal-hero p{color:var(--muted);font-size:1.02rem;max-width:56ch;line-height:1.65}

.journal-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;
  padding-bottom:clamp(56px,8vw,96px);
  list-style:none;margin:0;padding-left:0;
}
/* Home's teaser reuses this grid followed by a .view-all-wrap link — the
   bottom padding above is meant for the standalone /journal/ archive where
   this grid is the section's last element; zero it out here so it doesn't
   stack with the view-all link's own spacing (matches the 0px pattern the
   other 3 teaser sections on Home already use before their own .view-all-wrap). */
.journal-grid:has(+ .view-all-wrap){padding-bottom:0}
/* Neutralise WordPress core's block-gap margin (added to every query-loop
   item after the first, meant for a flow/list layout) now that this is a
   CSS Grid with its own `gap` — without this override the two spacing
   systems stack, pushing every card but the first down and out of
   alignment with its row. */
.journal-grid > li{margin-block-start:0!important;margin-block-end:0!important}
@media(max-width:960px){.journal-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.journal-grid{grid-template-columns:1fr}}

.journal-grid.wp-block-post,
.journal-grid .wp-block-post{
  background:var(--card);border-radius:var(--radius-md);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.journal-grid .wp-block-post-featured-image{margin:0;aspect-ratio:4/3;overflow:hidden}
.journal-grid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block}
.journal-card-body{padding:1.4rem 1.5rem 1.6rem}
.journal-date{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem;display:block}
.journal-grid .wp-block-post-title{font-family:'Fraunces',serif;font-weight:500;font-size:1.2rem;line-height:1.3;margin:0 0 .6rem}
.journal-grid .wp-block-post-title a{color:var(--ink);text-decoration:none}
.journal-grid .wp-block-post-title a:hover{color:var(--coral-strong)}
.journal-grid .wp-block-post-excerpt{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0}
.journal-grid .wp-block-post-excerpt p{margin:0}

.journal-empty{padding:clamp(56px,8vw,96px) 0;text-align:center;color:var(--muted)}

/* ---------- Single post (single.html), scoped to body.single-post ---------- */
body.single-post .post-back-row{padding:clamp(96px,11vw,120px) 0 0}
body.single-post .post-back{
  display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);
  font-size:.85rem;text-decoration:none;transition:color .2s var(--ease);
}
body.single-post .post-back:hover{color:var(--coral-strong)}

body.single-post .post-header{max-width:70ch;margin:0 auto;text-align:center;padding:1.6rem 0 2rem}
body.single-post .post-header .eyebrow{color:var(--coral-strong);justify-content:center;width:100%}
body.single-post .post-header h1{font-size:clamp(2rem,4.4vw,2.9rem);margin:.7rem 0 .8rem;line-height:1.16}
body.single-post .post-header .journal-date{text-align:center}

body.single-post .post-featured{max-width:960px;margin:0 auto clamp(32px,5vw,48px)}
body.single-post .post-featured img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow);display:block}

body.single-post .wp-block-post-content{
  max-width:70ch;margin:0 auto;padding:clamp(24px,4vw,40px) 0 clamp(56px,8vw,96px);
  color:var(--ink);font-size:1.05rem;line-height:1.8;
}
body.single-post .wp-block-post-content h2{font-size:1.5rem;margin:2.4rem 0 .9rem;scroll-margin-top:100px}
body.single-post .wp-block-post-content h3{font-size:1.2rem;margin:2rem 0 .7rem}
body.single-post .wp-block-post-content p{margin:0 0 1.2rem}
body.single-post .wp-block-post-content ul,body.single-post .wp-block-post-content ol{margin:0 0 1.2rem;padding-left:1.4rem}
body.single-post .wp-block-post-content li{margin-bottom:.5rem}
body.single-post .wp-block-post-content a{color:var(--coral-strong);text-decoration:underline;text-underline-offset:2px}
body.single-post .wp-block-post-content strong{color:var(--ink);font-weight:600}
body.single-post .wp-block-post-content img{border-radius:var(--radius-md);margin:1.8rem 0}
body.single-post .wp-block-post-content blockquote{
  border-left:3px solid var(--coral);margin:1.8rem 0;padding:.2rem 0 .2rem 1.3rem;
  font-family:'Fraunces',serif;font-style:italic;color:var(--maroon);font-size:1.15rem;
}

body.single-post .post-final{
  max-width:70ch;margin:0 auto;text-align:center;padding-top:clamp(32px,5vw,48px);
  border-top:1px solid var(--border);padding-bottom:clamp(56px,8vw,96px);
}
body.single-post .post-final p{font-family:'Fraunces',serif;font-weight:500;font-size:1.3rem;color:var(--ink);margin-bottom:1.2rem}