.archive-page { background: var(--color-sand-50); }
.archive-page .desktop-nav .current::after { transform: scaleX(1); }

.archive-hero { position: relative; height: 420px; color: #fff; overflow: hidden; background: var(--color-forest-800); }
.archive-hero > img { position: absolute; inset: 0; object-position: center 48%; }
.archive-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,25,20,.7), rgba(14,25,20,.18) 65%), linear-gradient(0deg, rgba(14,25,20,.47), transparent 54%); }
.archive-hero-inner { position: absolute; z-index: 1; left: var(--gutter); bottom: 62px; display: grid; grid-template-columns: minmax(430px, 1.2fr) minmax(300px, .7fr); align-items: end; column-gap: 90px; width: min(var(--content), calc(100% - (2 * var(--gutter)))); }
.archive-hero-inner .eyebrow { grid-column: 1 / -1; margin-bottom: 14px; }
.archive-hero h1 { margin: 0; font-size: clamp(3.5rem, 5.2vw, 5.6rem); }
.archive-hero-inner > p:last-child { max-width: 440px; margin: 0 0 8px; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.55; }
.archive-hero-meta { position: absolute; z-index: 1; right: 32px; bottom: 28px; margin: 0; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }

.filter-bar { position: sticky; z-index: 50; top: 74px; background: rgba(250,249,245,.96); border-bottom: 1px solid var(--color-sand-200); box-shadow: 0 10px 32px rgba(23,35,30,.04); backdrop-filter: blur(14px); }
.filter-inner { width: min(var(--content), calc(100% - 128px)); margin-inline: auto; }
.archive-filters { display: grid; grid-template-columns: 1.15fr .85fr 1fr .9fr 1.15fr auto; align-items: center; min-height: 92px; }
.archive-filters label { min-width: 0; padding: 4px 26px; border-right: 1px solid var(--color-sand-200); }
.archive-filters label:first-child { padding-left: 0; }
.archive-filters label > span { display: block; margin-bottom: 4px; color: var(--color-muted); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.archive-filters select { width: 100%; padding: 0 20px 0 0; color: var(--color-charcoal); background: transparent; border: 0; outline: 0; font-size: 13px; font-weight: 500; text-overflow: ellipsis; }
.filter-reset { display: inline-flex; align-items: center; min-height: 44px; margin-left: 18px; padding: 0; color: var(--color-muted); background: transparent; border: 0; border-bottom: 1px solid; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.mobile-filter-button { display: none; }
.filter-apply { display: none; }

.archive-content { padding-block: 105px 145px; }
.results-topline { display: flex; align-items: end; justify-content: space-between; padding-bottom: 32px; border-bottom: 1px solid var(--color-sand-200); }
.results-topline .eyebrow { margin-bottom: 13px; }
.results-topline h2 { margin: 0; font-size: clamp(2.2rem, 3.4vw, 3.6rem); }
.results-topline h2 strong { font-weight: 500; color: var(--color-heath-500); }
.view-switch { display: inline-flex; padding: 3px; background: var(--color-sand-100); border: 1px solid var(--color-sand-200); border-radius: 7px; }
.view-switch button { min-width: 74px; min-height: 44px; padding: 0 14px; color: var(--color-muted); background: transparent; border: 0; border-radius: 5px; font-size: 12px; }
.view-switch button.active { color: #fff; background: var(--color-forest-950); }
.active-filters { display: flex; align-items: center; gap: 8px; padding: 20px 0 55px; font-size: 10px; }
.active-filters > span { margin-right: 3px; color: var(--color-muted); }
.active-filters button, .active-filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 11px; color: var(--color-charcoal); background: transparent; border: 1px solid var(--color-sand-200); border-radius: 22px; font-size: 10px; }
.active-filters button:hover, .active-filters a:hover { border-color: var(--color-heath-500); background: var(--color-sand-100); }

.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 100px; transition: opacity .2s ease; }
.archive-card { min-width: 0; }
.archive-card-image { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--color-mist-300); }
.archive-card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15,25,20,.26), transparent 38%); pointer-events: none; }
.card-rating, .card-number, .feature-label { position: absolute; z-index: 2; }
.card-rating { right: 14px; top: 14px; padding: 6px 9px; background: rgba(250,249,245,.92); font-size: 10px; font-weight: 600; }
.card-number { left: 15px; bottom: 12px; color: #fff; font-size: 10px; letter-spacing: .15em; }
.archive-card-body { padding-top: 25px; }
.archive-kicker { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 15px; color: var(--color-forest-600); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.archive-kicker span:last-child { color: var(--color-muted); }
.archive-card h3 { max-width: 520px; margin-bottom: 16px; font-size: clamp(1.75rem, 2.35vw, 2.4rem); }
.archive-card-body > p { max-width: 510px; min-height: 54px; margin-bottom: 24px; color: var(--color-muted); font-size: 15px; line-height: 1.65; }
.archive-card dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding-block: 17px; border-block: 1px solid var(--color-sand-200); }
.archive-card dl div + div { padding-left: 18px; border-left: 1px solid var(--color-sand-200); }
.archive-card dt { color: var(--color-muted); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
.archive-card dd { margin: 3px 0 0; font: 600 13px Manrope, sans-serif; }
.archive-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.archive-card-bottom > div { display: flex; flex-wrap: wrap; gap: 6px; }
.archive-card-bottom > div span { padding: 3px 8px; color: var(--color-muted); border: 1px solid var(--color-sand-200); border-radius: 14px; font-size: 9px; }
.archive-card-bottom > a { flex: 0 0 auto; padding-bottom: 2px; border-bottom: 1px solid; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.card-offset, .card-airy { padding: 0; }

.archive-feature { grid-column: 1 / -1; display: grid; grid-template-columns: 58% 42%; min-height: 590px; margin-top: 22px; background: var(--color-forest-800); color: #fff; }
.archive-feature .archive-card-image { height: 100%; aspect-ratio: auto; }
.archive-feature .archive-card-body { display: flex; flex-direction: column; justify-content: center; padding: 48px; }
.archive-feature .archive-kicker { color: rgba(255,255,255,.65); }
.archive-feature .archive-kicker span:last-child { color: rgba(255,255,255,.5); }
.archive-feature h3 { margin-bottom: 24px; font-size: clamp(2.5rem, 3.7vw, 4rem); }
.archive-feature .archive-card-body > p { min-height: 0; color: rgba(255,255,255,.66); }
.archive-feature blockquote { margin: 6px 0 28px; padding-left: 18px; color: rgba(255,255,255,.82); border-left: 1px solid rgba(255,255,255,.36); font: 400 14px/1.6 Manrope, sans-serif; }
.archive-feature dl { border-color: rgba(255,255,255,.17); }
.archive-feature dl div + div { border-color: rgba(255,255,255,.17); }
.archive-feature dt, .archive-feature .archive-card-bottom > div span { color: rgba(255,255,255,.5); }
.archive-feature .archive-card-bottom > div span { border-color: rgba(255,255,255,.2); }
.feature-label { left: 18px; top: 18px; padding: 7px 10px; color: var(--color-forest-950); background: var(--color-sand-50); font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.archive-note { align-self: end; min-height: 365px; padding: 48px; background: var(--color-sand-100); border-top: 2px solid var(--color-heath-500); }
.archive-note > span { color: var(--color-forest-600); font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.archive-note blockquote { margin: 75px 0 35px; font: 400 clamp(1.35rem, 2vw, 1.8rem)/1.45 Manrope, sans-serif; letter-spacing: -.025em; }
.archive-note p { margin: 0; color: var(--color-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.archive-end { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; margin-top: 120px; color: var(--color-muted); }
.archive-end > span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.archive-end > div { height: 1px; background: var(--color-sand-200); }
.archive-end p { margin: 0; color: var(--color-charcoal); font: 500 13px/1.5 Manrope, sans-serif; }
.archive-empty { max-width: 760px; margin: 40px auto 0; padding: 90px 60px; background: var(--color-sand-100); text-align: center; }
.archive-empty h3 { margin: 12px 0 18px; font-size: clamp(2rem, 4vw, 3.6rem); }
.archive-empty > p:not(.eyebrow) { max-width: 520px; margin: 0 auto 30px; color: var(--color-muted); }
.active-filters__reset { margin-left: auto; border-color: transparent !important; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .filter-inner { width: calc(100% - 64px); }
  .archive-filters { grid-template-columns: repeat(5, 1fr); }
  .archive-filters label { padding-inline: 16px; }
  .filter-reset { display: none; }
  .archive-grid { column-gap: 32px; row-gap: 85px; }
  .archive-feature { grid-template-columns: 55% 45%; }
  .archive-feature .archive-card-body { padding: 38px; }
  .archive-note { padding: 38px; }
}

@media (max-width: 820px) {
  .archive-hero-inner { left: 32px; bottom: 48px; display: block; width: calc(100% - 64px); }
  .archive-hero-inner > p:last-child { max-width: 520px; margin-top: 18px; }
  .filter-bar { top: 64px; padding-block: 10px; }
  .filter-inner { width: calc(100% - 64px); }
  .mobile-filter-button { display: grid; grid-template-columns: 1fr auto auto; align-items: center; width: 100%; min-height: 52px; padding: 0 16px; color: #fff; background: var(--color-forest-950); border: 0; border-radius: 7px; text-align: left; font-size: 13px; font-weight: 600; }
  .mobile-filter-button em { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 16px; color: var(--color-forest-950); background: var(--color-sand-100); border-radius: 50%; font-size: 9px; font-style: normal; }
  .mobile-filter-button i { font-size: 18px; font-style: normal; font-weight: 400; transition: transform .2s ease; }
  .mobile-filter-button[aria-expanded="true"] i { transform: rotate(45deg); }
  .archive-filters { display: none; grid-template-columns: repeat(2, 1fr); padding-block: 15px; }
  .archive-filters.is-open { display: grid; }
  .archive-filters label { min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--color-sand-200); }
  .archive-filters label:nth-child(even) { border-right: 0; }
  .archive-filters label:last-of-type { grid-column: 1 / -1; border-right: 0; }
  .archive-content { padding-block: 90px 115px; }
  .archive-grid { row-gap: 70px; }
  .archive-card h3 { font-size: 1.7rem; }
  .archive-card-bottom { align-items: flex-start; flex-direction: column; }
  .archive-feature { grid-template-columns: 1fr; }
  .archive-feature .archive-card-image { min-height: 440px; }
  .archive-feature .archive-card-body { padding: 45px; }
  .archive-feature .archive-card-bottom { flex-direction: row; align-items: center; }
  .archive-note blockquote { margin-top: 48px; }
}

@media (max-width: 600px) {
  .archive-hero { height: 430px; }
  .archive-hero > img { object-position: 57% center; }
  .archive-hero-inner { left: 20px; bottom: 40px; width: calc(100% - 40px); }
  .archive-hero h1 { font-size: 3.15rem; }
  .archive-hero-inner > p:last-child { margin-top: 16px; font-size: 14px; }
  .archive-hero-meta { display: none; }
  .filter-bar { top: 64px; padding-block: 10px; }
  body.filter-sheet-open .filter-bar { z-index: 160; backdrop-filter: none; }
  .filter-inner { width: calc(100% - 40px); }
  .mobile-filter-button { display: grid; grid-template-columns: 1fr auto auto; align-items: center; width: 100%; min-height: 52px; padding: 0 16px; color: #fff; background: var(--color-forest-950); border: 0; border-radius: 7px; text-align: left; font-size: 13px; font-weight: 600; }
  .mobile-filter-button em { display: grid; place-items: center; width: 20px; height: 20px; margin-right: 16px; color: var(--color-forest-950); background: var(--color-sand-100); border-radius: 50%; font-size: 9px; font-style: normal; }
  .mobile-filter-button i { font-size: 18px; font-style: normal; font-weight: 400; transition: transform .2s ease; }
  .mobile-filter-button[aria-expanded="true"] i { transform: rotate(45deg); }
  .archive-filters { position: fixed; z-index: 170; inset: auto 0 0; display: none; grid-template-columns: 1fr; max-height: 88svh; padding: 22px 20px 24px; overflow-y: auto; background: var(--color-sand-50); border-radius: 14px 14px 0 0; box-shadow: 0 -18px 55px rgba(23,35,30,.2); }
  .archive-filters.is-open { display: grid; }
  .archive-filters .filter-sheet-head { display: flex; grid-column: 1; justify-content: space-between; align-items: center; margin-bottom: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--color-sand-200); }
  .archive-filters label, .archive-filters label:last-of-type { grid-column: auto; min-height: 58px; padding: 10px 2px; border-right: 0; }
  .archive-filters select { font-size: 15px; }
  .archive-filters .filter-reset { display: block; justify-self: start; min-height: 38px; margin: 7px 0 0; }
  .filter-apply { display: flex; justify-content: space-between; align-items: center; min-height: 54px; margin-top: 12px; padding: 0 17px; color: #fff; background: var(--color-forest-950); border: 0; border-radius: 7px; font-size: 13px; font-weight: 600; }
  .archive-content { padding-block: 75px 90px; }
  .results-topline { align-items: flex-start; }
  .results-topline h2 { font-size: 1.85rem; white-space: nowrap; }
  .view-switch button { min-width: 57px; padding-inline: 10px; }
  .active-filters { margin-inline: -20px; padding: 17px 20px 42px; overflow-x: auto; scrollbar-width: none; }
  .active-filters > span { display: none; }
  .active-filters button, .active-filters a { flex: 0 0 auto; }
  .archive-grid { display: block; }
  .archive-card, .archive-note { margin-bottom: 72px; }
  .card-offset, .card-airy { padding: 0; }
  .archive-card-body { padding-top: 21px; }
  .archive-card h3 { font-size: 1.85rem; }
  .archive-card-body > p { min-height: 0; font-size: 14px; }
  .archive-card dl div + div { padding-left: 12px; }
  .archive-card-bottom { align-items: center; flex-direction: row; }
  .archive-card-bottom > div { gap: 4px; }
  .archive-card-bottom > div span:nth-child(n+3) { display: none; }
  .archive-card-bottom > a { font-size: 9px; }
  .archive-feature { display: block; margin-inline: -20px; }
  .archive-feature .archive-card-image { min-height: 0; aspect-ratio: 4/3; }
  .archive-feature .archive-card-body { padding: 35px 20px 42px; }
  .archive-feature h3 { font-size: 2.55rem; }
  .archive-feature blockquote { display: none; }
  .archive-feature .archive-card-bottom { align-items: center; }
  .archive-note { min-height: 330px; padding: 30px; }
  .archive-note blockquote { margin-top: 55px; }
  .archive-end { grid-template-columns: auto 1fr; margin-top: 40px; }
  .archive-end p { grid-column: 1 / -1; margin-top: 10px; }
  .archive-empty { margin-top: 12px; padding: 65px 24px; }
  .active-filters__reset { margin-left: 0; }
}