/* =========================================================
   BLOG — shared visual system with the main site
========================================================= */

.blog-hero{padding:38px 0 42px}
.blog-hero .hero-copy{padding:24px 0 12px}
.blog-hero .hero-services{margin:28px 0 16px}
.blog-hero .hero-services a{color:inherit}
.blog-hero h1{margin-bottom:22px}
.blog-hero h1 em{font-family:'Playfair Display',Georgia,serif;color:var(--blue);font-style:italic;font-weight:600;letter-spacing:-.04em}
.blog-hero .hero-lead{max-width:650px}
.blog-hero .hero-visual .visual-card{min-height:610px}

.blog-section{background:#fffefa}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.blog-card{
  position:relative;display:flex;flex-direction:column;min-height:300px;
  padding:28px;background:var(--paper);border:1px solid var(--line);
  border-radius:26px;box-shadow:0 12px 34px rgba(20,25,35,.045);
  transition:transform .25s,box-shadow .25s,border-color .25s;
  cursor:pointer;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d8d3c8}
.blog-card--featured{
  grid-column:1/-1;min-height:350px;
  background:linear-gradient(135deg,#f7f1ea 0%,#fff 72%);
}
.blog-card__meta{display:flex;align-items:center;gap:12px;margin-bottom:28px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.blog-card__meta span{color:var(--blue)}
.blog-card__meta time{color:#858780;font-weight:600;letter-spacing:0;text-transform:none}
.blog-card h3{
  max-width:800px;margin:0 0 14px;font-family:Manrope,Arial,sans-serif;
  font-size:clamp(24px,3vw,38px);line-height:1.02;letter-spacing:-.055em
}
.blog-card:not(.blog-card--featured) h3{font-size:clamp(22px,2.2vw,29px)}
.blog-card p{max-width:720px;margin:0;color:var(--muted);font-size:13px;line-height:1.6}
.blog-card__link{
  display:inline-flex;align-items:center;gap:8px;width:max-content;margin-top:auto;padding-top:22px;
  border:0;background:none;color:var(--blue);font:inherit;font-size:11px;font-weight:900;cursor:pointer
}
.blog-card__link span{transition:transform .2s}
.blog-card:hover .blog-card__link span{transform:translate(3px,-3px)}

/* Article modal */
.article-modal[hidden]{display:none}
.article-modal{position:fixed;z-index:10000;inset:0;display:flex;align-items:stretch;justify-content:center;overflow:hidden}
.article-modal__backdrop{position:absolute;inset:0;background:rgba(8,16,30,.62);backdrop-filter:blur(8px)}
.article-modal__window{
  position:relative;z-index:2;width:min(1180px,100%);height:100%;max-height:100%;
  overflow-y:auto;overscroll-behavior:contain;background:var(--paper);
  box-shadow:0 30px 100px rgba(0,0,0,.25);animation:articleModalIn .28s ease both
}
.article-modal__inner{width:min(850px,calc(100% - 48px));margin:0 auto;padding:90px 0 100px}
.article-modal__close{
  position:fixed;z-index:4;top:22px;right:28px;display:grid;place-items:center;
  width:48px;height:48px;border:1px solid rgba(16,26,43,.10);border-radius:50%;
  background:rgba(255,253,249,.96);color:var(--navy);font-size:30px;line-height:1;
  cursor:pointer;box-shadow:0 8px 25px rgba(0,0,0,.08);transition:.2s
}
.article-modal__close:hover{transform:rotate(5deg) scale(1.04);background:#fff}
.article-modal__meta{display:flex;align-items:center;gap:14px;margin-bottom:24px;color:#858780;font-size:11px}
.article-modal__meta span{color:var(--blue);font-weight:900;letter-spacing:.13em}
.article-modal__inner h2{
  margin:0 0 30px;font-size:clamp(40px,6vw,72px);line-height:.96;letter-spacing:-.065em
}
.article-modal__intro{margin:0 0 50px;color:#555b59;font-size:clamp(18px,2vw,22px);line-height:1.6}
.article-modal__inner h3{margin:48px 0 15px;font-size:27px;line-height:1.12;letter-spacing:-.045em}
.article-modal__inner p{color:#4f5351;font-size:16px;line-height:1.75}
.article-modal__cta{margin-top:55px;padding:30px;border:1px solid var(--line);border-radius:24px;background:#f4eee8}
.article-modal__cta strong{display:block;margin-bottom:8px;font-size:23px;letter-spacing:-.035em}
.article-modal__cta p{margin-bottom:22px}
body.article-modal-open{overflow:hidden}
@keyframes articleModalIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}

@media(max-width:1100px){
  .blog-hero .hero-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .blog-hero{padding:38px 0 42px}
  .blog-hero .hero-copy{padding:18px 0 0}
  .blog-grid{grid-template-columns:1fr;gap:8px}
  .blog-card,.blog-card--featured{grid-column:auto;min-height:0;padding:22px;border-radius:21px}
  .blog-card--featured{min-height:300px}
  .blog-card__meta{margin-bottom:22px}
  .blog-card h3,.blog-card:not(.blog-card--featured) h3{font-size:23px}
  .blog-card p{font-size:11px}
  .blog-card__link{font-size:10px;padding-top:18px}
  .article-modal__window{width:100%;border-radius:0}
  .article-modal__inner{width:calc(100% - 36px);padding:78px 0 70px}
  .article-modal__close{top:14px;right:14px;width:44px;height:44px}
  .article-modal__inner h2{font-size:40px}
  .article-modal__intro{font-size:18px}
  .article-modal__inner h3{margin-top:38px;font-size:23px}
  .article-modal__inner p{font-size:15px;line-height:1.7}
  .article-modal__cta{padding:23px}
}
@media(max-width:390px){
  .article-modal__inner{width:calc(100% - 28px)}
  .article-modal__inner h2{font-size:34px}
}