:root {
    --al-gold: #c9a227;
    --al-gold-dark: #9b7914;
    --al-ink: #292929;
    --al-muted: #66645f;
    --al-paper: #f8f6f1;
    --al-line: #e8e2d6;
    --al-white: #ffffff;
}

.al-blog,
.al-blog * { box-sizing: border-box; }
.al-blog { color: var(--al-ink); background: var(--al-white); }
.al-blog-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.al-blog-hero { padding: 82px 0 74px; background: linear-gradient(135deg, #262626 0%, #3a3936 60%, #66551e 140%); color: var(--al-white); }
.al-blog-hero .al-blog-shell { max-width: 920px; text-align: center; }
.al-eyebrow { display: inline-block; margin-bottom: 12px; color: var(--al-gold); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.al-blog-hero h1 { margin: 0 auto 18px; max-width: 850px; color: var(--al-white); font-size: clamp(36px, 5vw, 62px); line-height: 1.08; font-weight: 600; hyphens: none; word-break: normal; overflow-wrap: normal; }
.al-blog-hero p { max-width: 760px; margin: 0 auto 32px; color: #eee9df; font-size: 18px; line-height: 1.65; }
.al-blog-search { display: flex; max-width: 720px; margin: 0 auto; padding: 7px; border-radius: 14px; background: var(--al-white); box-shadow: 0 20px 45px rgba(0,0,0,.22); }
.al-blog-search input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 0; outline: 0; background: transparent; color: var(--al-ink); font-size: 16px; }
.al-blog-search button { height: 52px; padding: 0 27px; border: 0; border-radius: 10px; background: var(--al-gold); color: #181818; font-weight: 700; cursor: pointer; transition: .2s ease; }
.al-blog-search button:hover { background: #d9b540; transform: translateY(-1px); }

.al-topic-nav { position: relative; z-index: 3; border-bottom: 1px solid var(--al-line); background: var(--al-white); }
.al-topic-list { display: flex; gap: 10px; overflow-x: auto; padding-top: 18px; padding-bottom: 18px; scrollbar-width: thin; }
.al-topic-list a { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 8px; padding: 10px 14px; border: 1px solid var(--al-line); border-radius: 999px; color: #4a4945; font-size: 14px; font-weight: 600; text-decoration: none; transition: .2s ease; }
.al-topic-list a:hover,
.al-topic-list a.is-active { border-color: var(--al-gold); background: #fff8df; color: #5f4910; }
.al-topic-list a span { min-width: 24px; padding: 2px 6px; border-radius: 999px; background: #eeeae0; font-size: 11px; text-align: center; }

.al-blog-section { padding: 76px 0; }
.al-blog-featured { background: var(--al-paper); }
.al-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 34px; }
.al-section-heading h2 { margin: 0; color: var(--al-ink); font-size: clamp(29px, 3.3vw, 42px); line-height: 1.15; }
.al-section-heading p { max-width: 520px; margin: 0; color: var(--al-muted); line-height: 1.65; }
.al-featured-grid,
.al-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.al-featured-grid .al-post-card:first-child { grid-column: span 2; }
.al-featured-grid .al-post-card:first-child .al-card-media { aspect-ratio: 2 / 1; }
.al-featured-grid .al-post-card:first-child h3 { font-size: 29px; }

.al-post-card { overflow: hidden; border: 1px solid var(--al-line); border-radius: 18px; background: var(--al-white); box-shadow: 0 14px 34px rgba(52,43,18,.07); transition: transform .25s ease, box-shadow .25s ease; }
.al-post-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(52,43,18,.12); }
.al-card-media { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg,#343434,#8d762a); }
.al-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.al-post-card:hover .al-card-media img { transform: scale(1.035); }
.al-card-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #f6e8b6; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.al-card-body { padding: 24px 24px 26px; }
.al-card-category { display: inline-block; margin-bottom: 13px; color: var(--al-gold-dark); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.al-card-body h3 { margin: 0 0 11px; font-size: 22px; line-height: 1.28; }
.al-card-body h3 a { color: var(--al-ink); text-decoration: none; }
.al-card-body h3 a:hover { color: var(--al-gold-dark); }
.al-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; color: #817e76; font-size: 12px; }
.al-card-body p { margin: 0 0 20px; color: var(--al-muted); line-height: 1.62; }
.al-read-more { color: var(--al-gold-dark); font-weight: 700; text-decoration: none; }
.al-read-more span { display: inline-block; margin-left: 4px; transition: transform .2s ease; }
.al-read-more:hover span { transform: translateX(4px); }

.al-pagination { margin-top: 45px; }
.al-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.al-pagination a,
.al-pagination span { display: grid; min-width: 42px; height: 42px; padding: 0 12px; place-items: center; border: 1px solid var(--al-line); border-radius: 10px; color: var(--al-ink); text-decoration: none; }
.al-pagination .current,
.al-pagination a:hover { border-color: var(--al-gold); background: var(--al-gold); color: #1c1c1c; }
.al-empty-state { padding: 55px; border: 1px dashed #d7ccb0; border-radius: 18px; background: var(--al-paper); text-align: center; }

.al-blog-cta { padding: 64px 0; background: #2b2b2a; color: var(--al-white); }
.al-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.al-cta-inner h2 { margin: 0 0 12px; color: var(--al-white); font-size: 34px; }
.al-cta-inner p { max-width: 760px; margin: 0; color: #d9d6ce; line-height: 1.65; }
.al-cta-inner > a { flex: 0 0 auto; padding: 15px 24px; border-radius: 10px; background: var(--al-gold); color: #1c1c1c; font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
    .al-featured-grid,
    .al-post-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .al-featured-grid .al-post-card:first-child { grid-column: span 2; }
    .al-section-heading,
    .al-cta-inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
    .al-blog-shell { width: min(100% - 28px, 1180px); }
    .al-blog-hero { padding: 58px 0 52px; }
    .al-blog-hero p { font-size: 16px; }
    .al-blog-search { padding: 5px; }
    .al-blog-search button { padding: 0 16px; }
    .al-blog-section { padding: 54px 0; }
    .al-featured-grid,
    .al-post-grid { grid-template-columns: 1fr; }
    .al-featured-grid .al-post-card:first-child { grid-column: auto; }
    .al-featured-grid .al-post-card:first-child .al-card-media { aspect-ratio: 16 / 9; }
    .al-featured-grid .al-post-card:first-child h3 { font-size: 23px; }
    .al-card-body { padding: 21px; }
    .al-empty-state { padding: 36px 22px; }
}