:root {
  --ink: #21133d;
  --ink-soft: #5d526d;
  --violet: #6c2ef2;
  --violet-dark: #5120c6;
  --orange: #f66b3b;
  --cream: #fff8ef;
  --lavender: #f5f1ff;
  --line: #e7e0ef;
  --white: #fff;
  --shadow: 0 22px 56px rgba(33, 19, 61, .12);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 4px solid #ffb18f; outline-offset: 4px; }
.container { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; top: -70px; left: 18px; z-index: 100; padding: 11px 16px; border-radius: 0 0 12px 12px; color: #fff; background: var(--orange); font-weight: 900; }
.skip-link:focus { top: 0; }
.site-header { color: #fff; background: var(--ink); }
.header-inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; color: #fff; text-decoration: none; }
.brand-logo { width: 260px; max-width: 45vw; height: auto; }
.back-home { padding: 11px 17px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; color: #fff; font-weight: 850; text-decoration: none; }
.back-home:hover { background: rgba(255,255,255,.1); }
.archive-hero { padding: 92px 0 145px; color: #fff; background: radial-gradient(circle at 82% 10%, rgba(246,107,59,.3), transparent 27%), linear-gradient(135deg, #21133d, #4c2385); }
.eyebrow { margin: 0 0 12px; color: #ffd0bd; font-size: .85rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
h1, h2 { line-height: 1.08; letter-spacing: -.035em; }
h1 { max-width: 900px; margin: 0 0 22px; font-size: clamp(3.1rem, 8vw, 6.4rem); }
.archive-hero p:last-child { max-width: 770px; margin: 0; color: rgba(255,255,255,.8); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.archive-tools { position: relative; z-index: 2; margin-top: -67px; }
.filter-panel { display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 13px; padding: 24px; border-radius: 27px; background: #fff; box-shadow: var(--shadow); }
.filter-panel label span { display: block; margin: 0 0 7px 3px; color: var(--ink-soft); font-size: .73rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; }
.filter-panel input, .filter-panel select { width: 100%; min-height: 58px; padding: 0 16px; border: 1px solid transparent; border-radius: 14px; color: var(--ink); background: #f7f4fc; font-weight: 750; }
.filter-panel input:focus, .filter-panel select:focus { border-color: var(--violet); background: #fff; outline: 0; box-shadow: 0 0 0 4px rgba(108,46,242,.12); }
.filter-panel button { align-self: end; min-height: 58px; padding: 0 20px; border: 0; border-radius: 14px; color: #fff; background: var(--violet); font-weight: 900; cursor: pointer; }
.results { margin: 20px 5px 0; color: var(--violet-dark); font-weight: 900; }
.archive-list { padding: 62px 0 110px; }
.archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.archive-card { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 13px 34px rgba(33,19,61,.08); transition: transform .2s ease, box-shadow .2s ease; }
.archive-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(33,19,61,.14); }
.archive-card[hidden] { display: none; }
.archive-card-image { height: 235px; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--violet), #a17cff); text-decoration: none; }
.archive-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.archive-card:hover .archive-card-image img { transform: scale(1.04); }
.archive-card-image > span:not(.card-fallback) { position: absolute; left: 15px; top: 15px; padding: 7px 10px; border-radius: 999px; background: rgba(33,19,61,.83); font-size: .72rem; font-weight: 900; }
.card-fallback { font-size: 3rem; font-weight: 950; letter-spacing: -.08em; opacity: .75; }
.archive-card-body { padding: 25px; }
.archive-card-meta { margin: 0 0 10px; color: var(--violet); font-size: .76rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.archive-card h2 { margin: 0 0 13px; font-size: 1.45rem; }
.archive-card h2 a { text-decoration: none; }
.archive-card-body > p:not(.archive-card-meta) { min-height: 78px; margin: 0 0 20px; color: var(--ink-soft); font-size: .94rem; }
.archive-card-link { color: var(--violet-dark); font-weight: 950; }
.empty { padding: 45px; border-radius: 22px; color: var(--ink-soft); background: var(--lavender); text-align: center; font-weight: 800; }
.load-more-wrap { margin-top: 44px; text-align: center; }
.load-more { min-height: 54px; padding: 0 24px; border: 0; border-radius: 15px; color: #fff; background: var(--violet); box-shadow: 0 12px 25px rgba(108,46,242,.24); font-weight: 900; cursor: pointer; }
.load-more:hover { background: var(--violet-dark); }
.load-more[hidden] { display: none; }
.site-footer { padding: 32px 0; color: rgba(255,255,255,.65); background: #160c2a; text-align: center; font-size: .82rem; }

@media (max-width: 980px) {
  .filter-panel { grid-template-columns: 1fr 1fr; }
  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .container { width: min(calc(100% - 28px), var(--max)); }
  .header-inner { min-height: 76px; }
  .brand-logo { width: 188px; max-width: 48vw; }
  .back-home { padding: 9px 12px; font-size: .83rem; }
  .archive-hero { padding: 67px 0 116px; }
  h1 { font-size: clamp(2.8rem, 15vw, 4.5rem); }
  .archive-tools { margin-top: -48px; }
  .filter-panel, .archive-grid { grid-template-columns: 1fr; }
  .archive-card-body > p:not(.archive-card-meta) { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}