/* css/archive.css: /archive/, every event, work and post as one contents page. Prefix ar-. Light theme only, like the rest of the site. */

.ar-page {
  --ar-ink: #0a2342;
  --ar-text: #1f2937;
  --ar-muted: #4b5563;                      /* 7.1:1 on paper */
  --ar-gold: var(--accent-gold, #c9a46b);
  --ar-gold-deep: #7a5c24;                  /* gold as text: 5.6:1 on paper */
  --ar-paper: #fbf8f2;
  --ar-line: rgba(10, 35, 66, .14);
  --ar-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --ar-duration: 220ms;
  --ar-ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--ar-paper);
  color: var(--ar-text);
}

/* ---------- Hero (shares the site's .page-title-section; same navy + gold rule as the events page) ---------- */
.ar-hero {
  position: relative;
  margin-bottom: 0;
  padding: 3rem 0 3.25rem;
  background:
    radial-gradient(52rem 20rem at 88% -20%, rgba(201, 164, 107, .24), transparent 62%),
    radial-gradient(38rem 18rem at 4% 120%, rgba(28, 74, 126, .6), transparent 62%),
    var(--primary-color, #0a2342);
}
.ar-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--ar-gold) 20%, var(--ar-gold) 80%, transparent);
}
.ar-eyebrow {
  margin: 0 0 .5rem; color: #e7cf9f;
  font: 700 .78rem/1 var(--body-font, Lato, sans-serif); letter-spacing: .28em; text-transform: uppercase;
}
.ar-hero h1 { margin: 0; font-size: clamp(2.3rem, 1.7rem + 3vw, 3.6rem); letter-spacing: -.015em; }
.ar-hero .subtitle { max-width: 38rem; margin: .8rem auto 0; color: rgba(255, 255, 255, .86); opacity: 1; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.ar-hero .ar-about { font-size: .95rem; color: rgba(255, 255, 255, .7); }

.ar-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.ar-jump a {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .34); border-radius: 999px;
  color: #fff; font-weight: 700; text-decoration: none;
  transition: background-color var(--ar-duration), border-color var(--ar-duration);
}
.ar-jump a span { color: #e7cf9f; font-variant-numeric: tabular-nums; }
.ar-jump a:hover { background: rgba(255, 255, 255, .1); border-color: #e7cf9f; }
.ar-jump a:focus-visible { outline: 3px solid #e7cf9f; outline-offset: 3px; }

/* ---------- Find in this archive (js/archive.js unhides it) ---------- */
.ar-page [hidden] { display: none !important; }
.ar-filter { margin: 0 0 2.25rem; }
.ar-filter label { display: block; margin-bottom: .4rem; color: var(--ar-ink); font-weight: 700; }
.ar-filter input {
  display: block; width: 100%; max-width: 34rem; min-height: 48px; margin: 0; padding: .6rem 1.2rem;
  border: 1px solid var(--ar-line); border-radius: 999px; background: #fff; color: var(--ar-ink);
  font: 400 1.02rem/1.3 var(--body-font, Lato, sans-serif);
  transition: border-color var(--ar-duration), box-shadow var(--ar-duration);
}
.ar-filter input::placeholder { color: #6b7280; }
.ar-filter input:hover { border-color: var(--ar-gold); }
.ar-filter input:focus-visible { outline: 3px solid var(--ar-ink); outline-offset: 2px; border-color: var(--ar-gold); }
.ar-filter__status { min-height: 1.4em; margin: .5rem 0 0; color: var(--ar-muted); font-size: .9rem; }

/* ---------- Body ---------- */
.ar-wrap { max-width: 1100px; margin-inline: auto; padding: 2.5rem 20px 3.5rem; }
.ar-notice {
  margin: 0 0 2rem; padding: .9rem 1.1rem; border-left: 4px solid var(--ar-gold-deep);
  background: #fff; color: var(--ar-ink); border-radius: 0 10px 10px 0;
}
.ar-section { margin-bottom: 3.25rem; scroll-margin-top: calc(var(--gn-header-h, 84px) + 1rem); }
.ar-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem;
  margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--ar-ink);
}
.ar-head h2 {
  margin: 0; color: var(--ar-ink); font: 400 clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem)/1.15 var(--ar-serif); letter-spacing: -.01em;
}
.ar-more { color: var(--ar-gold-deep); font-weight: 700; text-decoration: none; }
.ar-more:hover, .ar-more:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.ar-groups { column-width: 21rem; column-gap: 2.75rem; }
.ar-group { break-inside: avoid; margin: 0 0 2rem; }
.ar-group h3 {
  display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0;
  color: var(--ar-gold-deep); font: 700 .8rem/1.4 var(--body-font, Lato, sans-serif); letter-spacing: .2em; text-transform: uppercase;
}
.ar-group h3 a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.ar-group h3 a:hover, .ar-group h3 a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ar-count { color: var(--ar-muted); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.ar-list { list-style: none; margin: 0; padding: 0; }
.ar-list li { break-inside: avoid; }
.ar-list a {
  position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: .55rem 0; border-bottom: 1px solid var(--ar-line);
  color: var(--ar-ink); text-decoration: none;
}
.ar-title { font: 400 1.08rem/1.35 var(--ar-serif); }
.ar-date { flex: none; color: var(--ar-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
/* the hover rule is a scaled pseudo-element: it moves on the compositor, never through layout */
.ar-list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ar-gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--ar-duration) var(--ar-ease);
}
.ar-list a:hover::after, .ar-list a:focus-visible::after { transform: scaleX(1); }
.ar-list a:focus-visible { outline: 3px solid var(--ar-ink); outline-offset: 2px; border-radius: 4px; }
.ar-empty { color: var(--ar-muted); font-style: italic; }
.ar-foot { margin: 0; color: var(--ar-muted); }
.ar-foot a { color: var(--ar-gold-deep); font-weight: 700; }

@media (max-width: 560px) {
  .ar-hero { padding: 2.25rem 0 2.5rem; }
  .ar-title { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-list a::after, .ar-jump a, .ar-filter input { transition: none; }
}