/* ============================================================
   VISTA PALENCIA — Journal (Blog) styles
   Used by blog.html (index) and post.html (article).
   Brand: deep-green #0d3325 · gold #c9a96e · warm-white #faf8f4
   ============================================================ */

:root{
  --bl-green:#0d3325; --bl-green2:#00524b; --bl-gold:#c9a96e;
  --bl-gold-d:#b98a49; --bl-cream:#f5f0e8; --bl-white:#faf8f4;
  --bl-ink:#1c2a23;
}

/* ---------- shared page frame ---------- */
.bl-page{ background:var(--bl-white); color:var(--bl-ink);
  font-family:'Poppins',var(--font-sans,sans-serif); }
.bl-wrap{ max-width:1180px; margin:0 auto; padding:0 26px; }

/* ---------- hero ---------- */
.bl-hero{ position:relative; background:
    radial-gradient(120% 140% at 50% -20%, #14543f 0%, var(--bl-green) 55%, #07271c 100%);
  color:var(--bl-white); text-align:center;
  padding:clamp(150px,20vh,210px) 22px clamp(72px,10vh,110px); overflow:hidden; }
.bl-hero::after{ content:""; position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  width:54px; height:1px; background:linear-gradient(90deg,transparent,var(--bl-gold),transparent); }
.bl-eyebrow{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--bl-gold);
  margin:0 0 18px; opacity:0; animation:blUp .8s .05s forwards; }
.bl-hero h1{ font-family:'Cormorant Garamond',var(--font-serif,Georgia,serif);
  font-weight:500; font-size:clamp(40px,6vw,74px); line-height:1.04; letter-spacing:.005em;
  margin:0 auto 18px; max-width:14ch; opacity:0; animation:blUp .9s .12s forwards; }
.bl-hero p{ font-size:clamp(15px,1.5vw,18px); line-height:1.6; max-width:56ch;
  margin:0 auto; color:rgba(250,248,244,.82); opacity:0; animation:blUp .9s .2s forwards; }
@keyframes blUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }

/* ---------- listing ---------- */
.bl-list{ padding:clamp(56px,8vh,92px) 0 clamp(80px,12vh,130px); }

/* featured (first) post */
.bl-feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border-radius:22px; overflow:hidden; background:var(--bl-green);
  box-shadow:0 30px 70px rgba(8,30,22,.16); margin-bottom:clamp(40px,6vh,66px); }
.bl-feature a.bl-fimg{ display:block; min-height:340px; background-size:cover; background-position:center; }
.bl-feature .bl-fbody{ padding:clamp(34px,4vw,56px); color:var(--bl-white);
  display:flex; flex-direction:column; justify-content:center; }
.bl-feature .bl-meta{ color:var(--bl-gold); }
.bl-feature h2{ font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(28px,3.4vw,44px); line-height:1.1; margin:14px 0 16px; }
.bl-feature h2 a{ color:var(--bl-white); text-decoration:none; }
.bl-feature p{ color:rgba(250,248,244,.8); font-size:15.5px; line-height:1.7; margin:0 0 26px; }

/* grid of cards */
.bl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,38px); }
.bl-card{ background:#fff; border:1px solid rgba(13,51,37,.08); border-radius:18px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.bl-card:hover{ transform:translateY(-6px); box-shadow:0 26px 56px rgba(8,30,22,.14); }
.bl-card .bl-cimg{ display:block; aspect-ratio:16/10; background-size:cover;
  background-position:center; background-color:var(--bl-green); }
.bl-card .bl-cbody{ padding:24px 24px 28px; display:flex; flex-direction:column; flex:1; }
.bl-card h3{ font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:23px; line-height:1.18; margin:11px 0 11px; }
.bl-card h3 a{ color:var(--bl-ink); text-decoration:none; }
.bl-card h3 a:hover{ color:var(--bl-green2); }
.bl-card p{ font-size:14px; line-height:1.65; color:#5a6760; margin:0 0 20px; flex:1; }

/* meta line + read link */
.bl-meta{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--bl-gold-d);
  display:flex; gap:10px; align-items:center; }
.bl-meta .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; }
.bl-read{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--bl-green2);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px; margin-top:auto; }
.bl-read .arr{ transition:transform .25s; }
.bl-card:hover .bl-read .arr, .bl-feature a.bl-go:hover .arr{ transform:translateX(4px); }
.bl-feature .bl-go{ color:var(--bl-gold); align-self:flex-start; }

.bl-empty{ text-align:center; padding:80px 20px; color:#6b766f; }
.bl-empty h3{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:28px;
  color:var(--bl-green); margin:0 0 10px; }
.bl-skel{ border-radius:18px; height:330px; background:linear-gradient(100deg,#eee 30%,#f6f6f6 50%,#eee 70%);
  background-size:200% 100%; animation:blShim 1.3s infinite; }
@keyframes blShim{ to{ background-position:-200% 0; } }

/* ---------- single article ---------- */
.bl-article{ padding-bottom:clamp(70px,11vh,120px); }
.bl-ahero{ position:relative; min-height:clamp(360px,52vh,560px); display:flex; align-items:flex-end;
  background-size:cover; background-position:center; color:var(--bl-white); }
.bl-ahero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,24,17,.25) 0%,rgba(6,24,17,.78) 100%); }
.bl-ahero .bl-ahead{ position:relative; max-width:900px; margin:0 auto; width:100%;
  padding:0 26px clamp(40px,6vh,64px); }
.bl-ahero h1{ font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(32px,5vw,60px); line-height:1.08; margin:16px 0 16px; max-width:20ch; }
.bl-ahero .bl-meta{ color:var(--bl-gold-light,#e8d5a3); }
.bl-back{ position:relative; z-index:2; }
.bl-backlink{ display:inline-flex; align-items:center; gap:8px; color:rgba(250,248,244,.9);
  font-family:'Montserrat',sans-serif; font-weight:600; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; }
.bl-backlink:hover{ color:var(--bl-gold); }

.bl-body{ max-width:740px; margin:0 auto; padding:clamp(44px,6vh,70px) 26px 0; }
.bl-body p{ font-size:17.5px; line-height:1.85; color:#2c3a32; margin:0 0 24px; }
.bl-body h2{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(26px,3vw,36px);
  color:var(--bl-green); line-height:1.18; margin:46px 0 16px; }
.bl-body h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:23px;
  color:var(--bl-green2); margin:34px 0 12px; }
.bl-body ul,.bl-body ol{ margin:0 0 24px; padding-left:24px; }
.bl-body li{ font-size:17px; line-height:1.8; color:#2c3a32; margin:0 0 9px; }
.bl-body blockquote{ margin:32px 0; padding:6px 0 6px 26px; border-left:3px solid var(--bl-gold);
  font-family:'Cormorant Garamond',serif; font-size:24px; line-height:1.5; font-style:italic; color:var(--bl-green); }
.bl-body img{ width:100%; border-radius:14px; margin:30px 0; }
.bl-body a{ color:var(--bl-green2); text-decoration:underline; text-underline-offset:3px; }
.bl-body strong{ color:var(--bl-ink); }
.bl-body hr{ border:none; height:1px; background:rgba(13,51,37,.12); margin:42px 0; }

/* article CTA */
.bl-cta{ max-width:740px; margin:clamp(48px,7vh,72px) auto 0; padding:0 26px; }
.bl-cta-inner{ background:radial-gradient(120% 160% at 0% 0%, #14543f, var(--bl-green));
  border-radius:20px; padding:clamp(34px,4vw,52px); text-align:center; color:var(--bl-white); }
.bl-cta-inner h3{ font-family:'Cormorant Garamond',serif; font-weight:500;
  font-size:clamp(24px,3vw,34px); margin:0 0 12px; }
.bl-cta-inner p{ color:rgba(250,248,244,.8); margin:0 0 26px; font-size:15px; }
.bl-cta-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.bl-btn{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; padding:14px 28px; border-radius:12px; text-decoration:none;
  transition:transform .15s, background .25s, border-color .25s; }
.bl-btn-gold{ background:var(--bl-gold); color:var(--bl-green); }
.bl-btn-gold:hover{ transform:translateY(-2px); background:var(--bl-gold-d); }
.bl-btn-ghost{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.32);
  color:var(--bl-white); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.bl-btn-ghost:hover{ transform:translateY(-2px); border-color:var(--bl-gold); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .bl-feature{ grid-template-columns:1fr; }
  .bl-feature a.bl-fimg{ min-height:230px; }
  .bl-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .bl-grid{ grid-template-columns:1fr; }
  .bl-body p,.bl-body li{ font-size:16.5px; }
}