/* ============================================================
   THE JOURNAL — connboatrentals.com
   Blog index + article styles. Loads after assets/atlas-sub.css
   and reuses its tokens: navy / ivory / champagne gold, Cormorant
   Garamond display, Manrope body, soft geometry only.
   ============================================================ */

/* ---------- Journal hero ---------- */
/* Seven nav items instead of six — tighten the letter-spacing a touch so
   "Captain for a Day" stays on one line at 1366px. */
.brandbar nav a{margin-left:20px;font-size:.68rem;letter-spacing:.15em;white-space:nowrap;}

.journal-hero{min-height:56svh;}
.journal-hero h1{max-width:22ch;}
.journal-hero .journal-meta{
  margin-top:22px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,239,228,.72);display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.journal-hero .journal-meta i{font-style:normal;color:var(--gold-2);}

/* ---------- Section headers ---------- */
.journal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.journal-head .section-title{max-width:26ch;}

/* ---------- Featured post ---------- */
.journal-feature{
  display:grid;grid-template-columns:1.12fr .88fr;gap:0;margin-top:44px;
  border:1px solid var(--line-soft);border-radius:28px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-lg);
}
.journal-feature-media{position:relative;min-height:340px;background:var(--navy-2);}
.journal-feature-media img{width:100%;height:100%;object-fit:cover;display:block;}
.journal-feature-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,19,24,.35));pointer-events:none;}
.journal-feature-body{padding:clamp(30px,4.4vw,52px);display:flex;flex-direction:column;justify-content:center;}
.journal-feature-body .chip{margin-bottom:18px;}
.journal-feature-body h2{font-size:clamp(1.9rem,3.4svw,2.7rem);line-height:1.08;}
.journal-feature-body h2 a:hover{color:var(--gold);}
.journal-feature-body p{margin-top:16px;color:var(--slate);font-size:1rem;max-width:46ch;}
.journal-feature-body .post-meta{margin-top:22px;}
.journal-feature-body .btn{margin-top:26px;align-self:flex-start;}

/* ---------- Post grid ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px;}
.post-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);
  border-radius:22px;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line);}
.post-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-2);}
.post-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);}
.post-card:hover .post-card-media img{transform:scale(1.045);}
.post-card-media .chip{position:absolute;left:14px;top:14px;background:rgba(9,21,29,.78);border-color:rgba(220,192,132,.45);color:var(--gold-2);}
.post-card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1;}
.post-card-body h3{font-size:1.42rem;line-height:1.14;}
.post-card-body h3 a:hover{color:var(--gold);}
.post-card-body p{margin-top:12px;color:var(--slate);font-size:.94rem;flex:1;}
.post-meta{
  margin-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.post-meta i{font-style:normal;color:var(--gold);}

/* ---------- Category chip ---------- */
.chip{
  display:inline-block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--line);border-radius:999px;padding:6px 14px;
  background:rgba(250,247,240,.9);
}

/* ---------- Article ---------- */
.article-hero{min-height:58svh;}
.article-hero .article-kicker{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-2);
}
.article-hero .article-kicker .chip{background:rgba(7,19,24,.4);color:var(--gold-2);border-color:rgba(220,192,132,.45);}
.article-hero h1{font-size:clamp(2.3rem,5svw,3.65rem);max-width:24ch;}
.article-hero .post-meta{color:rgba(244,239,228,.74);margin-top:24px;}
.article-hero .post-meta i{color:var(--gold-2);}

.article-wrap{width:min(760px,92%);margin:0 auto;}
.article-lede{
  font-family:var(--serif);font-size:clamp(1.2rem,2.1svw,1.45rem);line-height:1.5;
  color:var(--navy);margin:0 0 40px;
}
.prose{font-size:1.02rem;line-height:1.78;color:var(--ink);}
.prose p{margin:0 0 22px;}
.prose h2{
  font-size:clamp(1.6rem,2.7svw,2rem);margin:52px 0 16px;line-height:1.14;scroll-margin-top:110px;
}
.prose h3{font-size:1.24rem;margin:34px 0 12px;}
.prose ul,.prose ol{margin:0 0 24px;padding-left:22px;}
.prose li{margin-bottom:10px;}
.prose li::marker{color:var(--gold);}
.prose strong{color:var(--navy);font-weight:700;}
.prose a{color:var(--gold);font-weight:600;border-bottom:1px solid rgba(189,145,70,.35);transition:color .2s,border-color .2s;}
.prose a:hover{color:var(--navy);border-color:var(--navy);}
.prose blockquote{
  margin:34px 0;padding:6px 0 6px 26px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:1.3rem;line-height:1.45;color:var(--navy);
}
.prose blockquote p{margin:0;}
.callout{
  margin:0 0 30px;padding:24px 28px;border-radius:20px;border:1px solid rgba(189,145,70,.35);
  background:linear-gradient(120deg,rgba(189,145,70,.09),rgba(189,145,70,.02));
  color:var(--ink);font-size:.99rem;
}
.callout strong{color:var(--navy);}

/* ---------- Article footer blocks ---------- */
.article-end{margin-top:56px;padding-top:30px;border-top:1px solid var(--line-soft);}
.article-end .note{margin-top:0;}

.journal-faq{margin-top:26px;max-width:none;}

.related{margin-top:0;}
.related .post-grid{margin-top:34px;}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .journal-feature{grid-template-columns:1fr;}
  .journal-feature-media{min-height:280px;aspect-ratio:16/10;}
  .post-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .post-grid{grid-template-columns:1fr;}
  .journal-hero{min-height:52svh;}
  .article-hero{min-height:54svh;}
  .prose h2{margin-top:42px;}
  .callout{padding:20px 22px;}
}