/* Compact blog hub header. bx- namespace avoids legacy .blog-hero rules. */
body.page-blog .bx-hero { padding: 118px 0 8px; background: var(--ix-paper); color: var(--ix-ink); }
body.page-blog .bx-shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
body.page-blog .bx-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: end; gap: 16px 48px; }
body.page-blog .bx-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--ix-orange); font: 800 12px/1 var(--ix-sans); letter-spacing: .16em; text-transform: uppercase; }
body.page-blog .bx-kicker i { width: 28px; height: 2px; background: currentColor; }
body.page-blog .bx-hero h1 { margin: 0 !important; color: var(--ix-ink) !important; font: 400 clamp(40px, 5vw, 68px)/1 var(--ix-display) !important; letter-spacing: -.03em !important; text-wrap: balance; }
body.page-blog .bx-hero h1 em { color: var(--ix-orange); font-style: italic; }
body.page-blog .bx-lead { margin: 0; color: var(--ix-muted); font: 500 16px/1.65 var(--ix-sans); }
body.page-blog .bx-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; padding: 18px 0; border-top: 1px solid var(--ix-line); border-bottom: 1px solid var(--ix-line); }
body.page-blog .bx-ribbon > span { margin-right: 6px; color: var(--ix-muted); font: 800 11px/1 var(--ix-sans); letter-spacing: .14em; text-transform: uppercase; }
body.page-blog .bx-ribbon a { padding: 10px 16px; border: 1px solid var(--ix-line); border-radius: 999px; color: var(--ix-ink); font: 700 13px/1 var(--ix-sans); text-decoration: none; transition: background .2s ease, color .2s ease; }
body.page-blog .bx-ribbon a:hover { background: var(--ix-ink); color: var(--ix-paper); }
body.page-blog .bx-ribbon a:focus-visible { outline: 3px solid var(--ix-orange); outline-offset: 3px; }
body.page-blog.redesign-interior #articles { padding-top: 24px !important; }

/* Search + filters: one slim toolbar. */
html body.page-blog.redesign-interior #articles .blog-search-wrap { display: block !important; margin: 0 0 32px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-intro { display: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-controls { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 16px !important; width: 100% !important; margin: 0 !important; padding: 8px 8px 8px 20px !important; border: 1px solid var(--ix-line) !important; border-radius: 18px !important; background: color-mix(in srgb, var(--ix-ink) 4%, var(--ix-paper)) !important; box-shadow: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-box { display: flex !important; flex: 1 1 260px !important; align-items: center !important; gap: 10px !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-icon { display: inline-flex !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: var(--ix-muted) !important; font-size: 15px !important; }
html body.page-blog.redesign-interior #articles #blogSearchInput { flex: 1 !important; min-width: 0 !important; height: 44px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; color: var(--ix-ink) !important; font: 600 15px/1 var(--ix-sans) !important; outline: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-controls:focus-within { border-color: var(--ix-orange) !important; }
html body.page-blog.redesign-interior #articles .blog-search-box:focus-within { box-shadow: none !important; }
html body.page-blog.redesign-interior #articles #blogSearchInput::-webkit-search-cancel-button, html body.page-blog.redesign-interior #articles #blogSearchInput::-webkit-search-decoration { -webkit-appearance: none !important; appearance: none !important; display: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-clear { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 30px !important; min-height: 0 !important; line-height: 28px !important; margin: 0 4px 0 0 !important; padding: 0 12px !important; border: 1px solid var(--ix-line) !important; border-radius: 999px !important; background: none !important; box-shadow: none !important; color: var(--ix-muted) !important; font: 700 12px/1 var(--ix-sans) !important; cursor: pointer; }
html body.page-blog.redesign-interior #articles .blog-search-clear:hover { border-color: var(--ix-ink) !important; color: var(--ix-ink) !important; }
html body.page-blog.redesign-interior #articles .blog-search-clear[hidden] { display: none !important; }
html body.page-blog.redesign-interior #articles .blog-search-tags { display: flex !important; flex: 0 1 auto !important; width: auto !important; overflow: visible !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; }
html body.page-blog.redesign-interior #articles .blog-search-tag { display: inline-flex !important; align-items: center !important; gap: 7px !important; height: 38px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid color-mix(in srgb, var(--ix-ink) 16%, transparent) !important; border-radius: 999px !important; background: color-mix(in srgb, var(--ix-ink) 5%, var(--ix-paper)) !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--ix-ink) 6%, transparent) !important; color: var(--ix-ink) !important; font: 700 13px/1 var(--ix-sans) !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .2s !important; -webkit-tap-highlight-color: transparent; }
html body.page-blog.redesign-interior #articles .blog-search-tag i { display: inline-block !important; font-size: 12px !important; color: var(--ix-orange) !important; opacity: .9; }
html body.page-blog.redesign-interior #articles .blog-search-tag:hover { border-color: var(--ix-ink) !important; background: color-mix(in srgb, var(--ix-ink) 10%, var(--ix-paper)) !important; transform: translateY(-1px); } html body.page-blog.redesign-interior #articles .blog-search-tag:active { transform: scale(.97); } html body.page-blog.redesign-interior #articles .blog-search-tag:focus-visible { outline: 2px solid var(--ix-orange) !important; outline-offset: 2px !important; } html body.page-blog.redesign-interior #articles .blog-search-icon { color: var(--ix-orange) !important; }
html body.page-blog.redesign-interior #articles .blog-search-tag.active, html body.page-blog.redesign-interior #articles .blog-search-tag.is-active, html body.page-blog.redesign-interior #articles .blog-search-tag[aria-pressed="true"] { border-color: var(--ix-ink) !important; background: var(--ix-ink) !important; color: var(--ix-paper) !important; } html body.page-blog.redesign-interior #articles .blog-search-tag.active i, html body.page-blog.redesign-interior #articles .blog-search-tag.is-active i, html body.page-blog.redesign-interior #articles .blog-search-tag[aria-pressed="true"] i { color: inherit !important; }

/* Pinned guide: photo fills the card height, calmer title, no stacked bottom spacing. */
html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned { align-items: stretch !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 32px !important; }
html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned .blog-image { height: auto !important; min-height: 300px !important; margin: 0 !important; aspect-ratio: auto !important; }
html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned .blog-image :is(img, video) { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned .blog-image { position: relative !important; }
html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned .blog-content { align-self: center !important; padding-block: 8px !important; }
html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned h2 { font-size: clamp(30px, 3vw, 44px) !important; line-height: 1.05 !important; }
html body.page-blog.redesign-interior .blog-grid { row-gap: 40px !important; }

@media (max-width: 860px) {
  body.page-blog .bx-head { grid-template-columns: 1fr; }
  body.page-blog .bx-hero { padding-top: 96px; }
  html body.page-blog.redesign-interior #articles .blog-search-tags { justify-content: flex-start !important; }
  html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned .blog-image { min-height: 220px !important; }
}
@media (max-width: 600px) {
  body.page-blog .bx-shell { width: calc(100% - 32px); }
  body.page-blog .bx-ribbon { margin-top: 20px; padding: 14px 0; }
  html body.page-blog.redesign-interior #articles .blog-search-controls { padding: 6px 10px 10px 16px !important; }
  html body.page-blog.redesign-interior #articles .blog-search-box { flex-basis: 100% !important; border-bottom: 1px solid var(--ix-line) !important; padding-bottom: 6px !important; }
  html body.page-blog.redesign-interior #articles .blog-search-tags { flex-wrap: nowrap !important; overflow-x: auto !important; width: 100% !important; padding: 4px 2px 2px !important; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  html body.page-blog.redesign-interior #articles .blog-search-tags::-webkit-scrollbar { display: none; }
  html body.page-blog.redesign-interior #articles .blog-search-tag { flex: none !important; }
  html body.page-blog.redesign-interior .blog-grid > .blog-card.blog-card--pinned h2 { font-size: 30px !important; }
}

/* One card layout for every post in the grid. A legacy rule gave cards from the 4th child onward
   25px inset padding while cards 2-3 used the flat layout, so the first row looked misaligned. */
html body.page-blog.redesign-interior .blog-grid > .blog-card:not(.blog-card--pinned) .blog-content { padding: 14px 2px 0 !important; }
html body.page-blog.redesign-interior #articles .blog-search-icon, html body.page-blog.redesign-interior #articles .blog-search-icon i { color: var(--ix-orange) !important; opacity: 1 !important; }