/* Travelogue (blog) article styles. SOURCE OF TRUTH for all 17 article
   pages (was inlined identically in each). The per-article .article-hero
   fallback gradient is overridden with a 1-line inline <style> per page. */
.article-wrap { max-width: 820px; margin: 0 auto; }
    .article-back { font-size: .82rem; color: var(--gray-700); text-decoration: none; display: inline-block; margin-bottom: 18px; }
    .article-back:hover { color: var(--orange); }
    .article-eyebrow {
      font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      color: var(--orange); margin-bottom: 10px;
    }
    .article-title {
      font-size: clamp(1.7rem, 6vw, 2.8rem); font-weight: 900; line-height: 1.1;
      letter-spacing: -.025em; color: var(--black); margin: 0 0 12px;
    }
    .article-dek {
      font-size: 1.15rem; color: var(--gray-700); line-height: 1.55; margin: 0 0 16px;
      font-weight: 500;
    }
    .article-meta {
      font-size: .82rem; color: var(--gray-500); margin-bottom: 28px;
      padding-bottom: 20px; border-bottom: 1px solid var(--gray-100);
    }
    .article-hero {
      aspect-ratio: 16/9; border-radius: 16px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
      font-size: 84px; line-height: 1; margin-bottom: 32px;
      background: linear-gradient(135deg, #0d0d0d 0%, #2d3d3a 45%, #00897b 100%);
      color: rgba(255,255,255,.95);
    }
    .article-body { font-size: 1.05rem; color: var(--gray-700); line-height: 1.75; }
    .article-body h2 {
      font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.2;
      color: var(--black); margin: 40px 0 14px;
    }
    .article-body p { margin: 0 0 18px; }
    .article-body ul { padding-left: 20px; margin: 0 0 18px; }
    .article-body li { margin-bottom: 10px; }
    .article-body li strong { color: var(--black); }
    .article-body a:not(.btn) { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }

    .pull {
      margin: 28px 0; padding: 4px 0 4px 22px;
      border-left: 4px solid var(--teal);
      font-size: 1.22rem; font-weight: 700; line-height: 1.35;
      color: var(--black); letter-spacing: -.01em;
    }

    .article-tags {
      margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--gray-100);
      display: flex; flex-wrap: wrap; gap: 8px;
    }
    .article-tag {
      font-size: .75rem; padding: 4px 10px; border-radius: 999px;
      background: var(--gray-100); color: var(--gray-700);
    }

    .article-footer-cta {
      margin: 40px 0 0; padding: 24px; border-radius: 14px;
      background: linear-gradient(135deg,#0f4c3a 0%,#00897b 100%); color: #fff; text-align: center;
    }
    .article-footer-cta p { margin: 0 0 14px; font-size: 1.05rem; font-weight: 600; color: #fff; }


    .bl-meta {
      font-size: .82rem; font-weight: 700; letter-spacing: .02em;
      color: var(--teal); text-transform: uppercase;
      margin: -6px 0 14px;
    }
    .bl-build {
      display: inline-block; margin: 2px 0 6px;
      font-weight: 700; text-decoration: none; color: var(--orange) !important;
    }
    .bl-build:hover { text-decoration: underline; }

    /* Phone polish — tighten heading/body type + the footer CTA padding. */
    @media (max-width: 560px) {
      .article-body { font-size: 1rem; }
      .article-body h2 { font-size: 1.3rem; margin-top: 32px; }
      .article-hero { border-radius: 12px; margin-bottom: 24px; }
      .pull { font-size: 1.1rem; padding-left: 16px; }
      .article-footer-cta { padding: 20px; }
    }