/* PAGE HEADER */
.blog-header {
  padding: 140px 2rem 64px;
  border-bottom: 1px solid var(--border);
}
.blog-header-inner { max-width: 1280px; margin: 0 auto; }
.blog-label {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}
.blog-title {
  font-family: var(--serif); font-size: clamp(48px, 7vw, 96px);
  font-weight: 300; line-height: 0.95; letter-spacing: -0.025em;
  margin-bottom: 48px;
}
.blog-title em { font-style: italic; color: var(--accent); }

/* CONTROLS */
.blog-controls {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 16px; justify-content: space-between;
}
.filter-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-tag {
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 7px 16px;
  border: 1px solid var(--border); background: none;
  color: var(--muted); cursor: pointer; transition: all 0.2s;
}
.filter-tag:hover { border-color: var(--accent); color: var(--accent); }
.filter-tag.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.search-wrap { position: relative; }
.search-input {
  font-family: var(--sans); font-size: 13px;
  padding: 8px 16px 8px 36px; border: 1px solid var(--border);
  background: none; color: var(--dark); outline: none; width: 220px;
  transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--muted); }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none; font-size: 13px;
}

/* BLOG GRID */
.blog-body { max-width: 1280px; margin: 0 auto; padding: 64px 2rem 120px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 40px 32px;
}
.blog-card {
  display: flex; flex-direction: column;
  cursor: pointer; transition: opacity 0.2s;
  border: none; padding-top: 0;
}
.blog-card:hover { opacity: 0.88; }
.card-image {
  position: relative; height: 180px; overflow: hidden;
  margin-bottom: 20px; flex-shrink: 0;
}
.card-image-letter {
  position: absolute; bottom: -8px; right: 16px;
  font-family: var(--serif); font-size: 140px; font-weight: 300;
  line-height: 1; opacity: 0.12; letter-spacing: -0.05em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  user-select: none; pointer-events: none;
}
.card-image-label {
  position: absolute; top: 16px; left: 20px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; opacity: 0.7;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.card-tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.card-tag + .card-tag::before { content: '·'; margin-right: 6px; color: var(--border); }
.card-title {
  font-family: var(--serif); font-size: clamp(20px, 2vw, 26px);
  font-weight: 400; line-height: 1.2; letter-spacing: -0.01em;
  margin-bottom: 14px; flex: 1;
  transition: color 0.2s;
}
.blog-card:hover .card-title { color: var(--accent); }
.card-excerpt {
  font-family: var(--sans); font-size: 13px; line-height: 1.75;
  color: var(--muted); margin-bottom: 20px;
}
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
}
.card-date { font-family: var(--sans); font-size: 11px; color: var(--muted); letter-spacing: 0.04em; }
.card-read {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}

/* NO RESULTS */
.no-results {
  grid-column: 1/-1; text-align: center; padding: 80px 0;
  font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--muted);
}

/* POST MODAL */
.modal {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(680px, 100vw); background: var(--cream);
  overflow-y: auto; z-index: 101; padding: 48px 48px 80px;
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.modal.open { transform: translateX(0); }
@media (max-width: 600px) { .modal { padding: 32px 24px 64px; } }
.modal-close {
  position: sticky; top: 0; display: flex; justify-content: flex-end;
  margin-bottom: 32px; background: var(--cream); padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.modal-close button {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  transition: color 0.2s;
}
.modal-close button:hover { color: var(--dark); }
.modal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.modal-tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
.modal-tag + .modal-tag::before { content: '·'; margin-right: 6px; color: var(--border); }
.modal-title {
  font-family: var(--serif); font-size: clamp(28px, 4vw, 44px);
  font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 16px;
}
.modal-date {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--border);
}
.modal-body {
  font-family: var(--sans); font-size: 15px; line-height: 1.85; color: #333;
}
.modal-body p { margin-bottom: 20px; }
.modal-body h2, .modal-body h3 {
  font-family: var(--serif); font-weight: 400; margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
.modal-body h2 { font-size: 28px; }
.modal-body h3 { font-size: 22px; }
.modal-body ul, .modal-body ol { padding-left: 24px; margin-bottom: 20px; }
.modal-body li { margin-bottom: 8px; }
.modal-body strong { font-weight: 500; color: var(--dark); }
.modal-body a { color: var(--accent); }
.modal-cta {
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border);
  text-align: center;
}
.modal-cta-label {
  font-family: var(--serif); font-size: 22px; font-weight: 300;
  color: var(--dark); margin-bottom: 20px;
}
.modal-cta-btn {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; background: var(--accent); color: #fff;
  border: none; padding: 14px 32px; cursor: pointer;
  transition: background 0.2s;
}
.modal-cta-btn:hover { background: #427d77; }

/* Footer newsletter form variant used on blog */
.footer-nl-label { font-family: var(--sans); font-size: 13px; line-height: 1.7; }
.footer-nl-form { display: flex; width: 280px; border: 1px solid var(--border); }
.footer-nl-form input { flex: 1; padding: 10px 14px; font-family: var(--sans); font-size: 13px; border: none; outline: none; background: transparent; color: var(--dark); }
.footer-nl-form button { padding: 10px 16px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--dark); color: var(--cream); border: none; cursor: pointer; }

@media (max-width: 1024px) {
  .footer-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 24px;
  }
  .footer-links { justify-content: center; width: 100%; }
  .footer-center { width: 100%; align-items: center; }
  .footer-nl-label, .footer-copy { text-align: center; width: 100%; }
  .footer-nl-form { margin: 0 auto; }
}