:root {
  --breukelein-blue: #164f75;
  --breukelein-deep: #0c3452;
  --breukelein-gold: #f5c400;
  --breukelein-cream: #f7f3e8;
  --ink: #18212a;
  --white: #fff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Georgia, "Times New Roman", serif; }
a { color: inherit; }
img { max-width: 100%; height: auto; }
.site-shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }

/* Existing-site header, simplified and made responsive */
.site-header { background: #fff; }
.header-top { display: grid; grid-template-columns: 1fr minmax(240px, 436px) 1fr; align-items: center; gap: 24px; padding: 22px 0; font-family: Arial, Helvetica, sans-serif; color: #37424d; font-size: 14px; line-height: 1.5; }
.header-logo { display: block; text-align: center; }
.header-logo img { display: block; width: 100%; }
.header-donate { text-align: right; }
.header-donate a { display: inline-block; padding: 12px 21px; border-radius: 4px; background: var(--breukelein-gold); color: var(--breukelein-deep); text-decoration: none; font-weight: 700; letter-spacing: .04em; }
.main-nav { background: var(--breukelein-deep); font-family: Arial, Helvetica, sans-serif; }
.main-nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.main-nav a { display: block; padding: 18px 16px; color: #fff; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .045em; }
.main-nav a:hover, .main-nav a:focus { background: var(--breukelein-blue); }

.hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--breukelein-deep) 0%, var(--breukelein-blue) 68%, #236b91 100%); color: #fff; }
.hero::after { content: "GA"; position: absolute; right: -10px; bottom: -70px; font-size: clamp(180px, 32vw, 470px); line-height: 1; font-weight: 700; color: rgba(255,255,255,.035); pointer-events: none; }
.save-date { overflow: hidden; white-space: nowrap; background: var(--breukelein-gold); color: var(--breukelein-deep); font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; padding: 11px 0; }
.save-date span { display: inline-block; min-width: 100%; text-align: center; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 54px; align-items: center; padding: 72px 0 68px; }
.eyebrow { margin: 0 0 14px; color: var(--breukelein-gold); font: italic 600 19px/1.4 Georgia, serif; }
h1 { margin: 0; font-size: clamp(52px, 7.2vw, 92px); line-height: .94; font-weight: 500; letter-spacing: -.035em; color: #fff;}
.hero-year { display: block; font-size: .48em; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.hero-details { margin: 28px 0 0; padding-left: 0; list-style: none; font-size: clamp(20px, 2.4vw, 29px); line-height: 1.45; }
.hero-details strong { color: var(--breukelein-gold); font-weight: 600; }
.hero-card { background: rgba(255,255,255,.97); color: var(--ink); padding: 30px; border-top: 8px solid var(--breukelein-gold); box-shadow: 0 24px 55px rgba(0,0,0,.23); text-align: center; }
.hero-card h2 { margin: 0 0 9px; color: var(--breukelein-deep); font-size: 29px; }
.hero-card p { margin: 0 0 20px; font: 16px/1.5 Arial, Helvetica, sans-serif; }
.qr { width: 150px; margin: 2px auto 20px; }
.button { display: inline-block; padding: 14px 25px; border-radius: 4px; background: var(--breukelein-gold); color: var(--breukelein-deep); text-decoration: none; font: 700 15px/1 Arial, Helvetica, sans-serif; letter-spacing: .035em; }
.button:hover, .button:focus { filter: brightness(.94); }
.hero-card .small-link { display: block; margin-top: 13px; color: #46515b; font: 13px/1.4 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }

.section { padding: 76px 0; }
.section-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.section-heading .kicker { margin: 0 0 9px; color: var(--breukelein-blue); font: 700 13px/1.3 Arial, Helvetica, sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.section-heading h2 { margin: 0; color: var(--breukelein-deep); font-size: clamp(36px, 5vw, 56px); line-height: 1.05; font-weight: 500; }
.section-heading p { margin: 18px auto 0; font: 18px/1.65 Arial, Helvetica, sans-serif; color: #4b5660; }

.intro-copy,
.support-copy {
  max-width: 880px;
  margin: 0 auto;
  font: 19px/1.75 Arial, Helvetica, sans-serif;
  color: #3f4a54;
}
.intro-copy p,
.support-copy p {
  margin: 0 0 22px;
}
.intro-copy p:last-child,
.support-copy p:last-child {
  margin-bottom: 0;
}
.intro-copy strong,
.support-copy strong {
  color: var(--breukelein-deep);
}
.support-section {
  background: var(--breukelein-cream);
  text-align: center;
}
.support-copy {
  text-align: left;
}
.support-action {
  margin-top: 30px;
}

.honorees { background: var(--breukelein-cream); }
.honoree-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.honoree { margin: 0; background: #fff; box-shadow: 0 9px 24px rgba(12,52,82,.11); border-bottom: 5px solid var(--breukelein-gold); }
.honoree img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; background: #e9ecef; }
.honoree figcaption {
  padding: 20px;
  text-align: left;
}
.honoree h3{
  margin:0 0 10px;
  color:var(--breukelein-deep);
  font-size:1.65rem;
  line-height:1.2;
}
.honoree p{
  margin:0;
  font:15px/1.6 Arial, Helvetica, sans-serif;
  color:#555;
}
.merit { margin: 26px auto 0; max-width: 350px; display: grid; grid-template-columns: 1fr 1fr; background: var(--breukelein-deep); color: #fff; box-shadow: 0 12px 28px rgba(12,52,82,.2); }
.merit img { display: block; width: 100%; height: auto; }
.merit-copy { grid-column: 1 / -1; padding: 24px; text-align: center; }
.merit-copy h3 {color: #fff;}
.merit-copy .label { color: var(--breukelein-gold); font: italic 600 17px/1.4 Georgia, serif; }
.merit-copy h3 { margin: 5px 0 0; font-size: 28px; font-weight: 500; }

.benefit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 900px; margin: 0 auto; }
.benefit-card { padding: 36px; border: 1px solid #d7dee4; border-top: 6px solid var(--breukelein-gold); text-align: center; }
.benefit-card h3 { margin: 0; color: var(--breukelein-deep); font-size: 29px; line-height: 1.2; }
.benefit-card p { margin: 14px 0 0; font: 17px/1.6 Arial, Helvetica, sans-serif; color: #4b5660; }

.cta { background: var(--breukelein-gold); color: var(--breukelein-deep); text-align: center; }
.cta-inner { padding: 56px 0; }
.cta blockquote { margin: 0 0 25px; font-size: clamp(31px, 5vw, 50px); font-style: italic; }
.cta .button { background: var(--breukelein-deep); color: #fff; }

.footer-top { background: var(--breukelein-deep); color: #fff; padding: 58px 0; }
.footer-grid { display: grid; grid-template-columns: 1.35fr .75fr 1fr; gap: 46px; }
.footer-grid h3 { margin: 0 0 17px; color: var(--breukelein-gold); font-size: 22px; }
.footer-grid p, .footer-grid li { font: 15px/1.7 Arial, Helvetica, sans-serif; color: #e6edf2; }
.footer-links { margin: 0; padding: 0; list-style: none; }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a:focus { text-decoration: underline; }
.footer-bottom { background: #08283e; color: #d6e0e7; font: 13px/1.5 Arial, Helvetica, sans-serif; padding: 20px 0; }

@media (max-width: 920px) {
  .header-top { grid-template-columns: 1fr; text-align: center; }
  .header-contact, .header-donate { text-align: center; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-card { max-width: 500px; }
  .honoree-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-shell { width: min(100% - 24px, 1180px); }
  .header-contact { display: none; }
  .header-logo { max-width: 320px; margin: 0 auto; }
  .main-nav ul { display: grid; grid-template-columns: 1fr 1fr; }
  .main-nav a { padding: 14px 8px; text-align: center; font-size: 11px; }
  .save-date { font-size: 10px; letter-spacing: .08em; }
  .hero-inner { padding: 48px 0; gap: 34px; }
  h1 { font-size: 50px; }
  .hero-details { font-size: 19px; }
  .section { padding: 56px 0; }
  .honoree-grid, .benefit-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :first-child { grid-column: auto; }
  .merit img { height: auto; }
  .merit-copy h3 { font-size: 23px; }
}

/* Shared interior-page styles */
.page-hero {position:relative;overflow:hidden;background:linear-gradient(135deg,var(--breukelein-deep) 0%,var(--breukelein-blue) 72%,#236b91 100%);color:#fff;}
.page-hero::after {content:"";position:absolute;width:360px;height:360px;right:-110px;bottom:-190px;border:72px solid rgba(255,255,255,.04);border-radius:50%;}
.page-hero-inner {position:relative;z-index:1;padding:76px 0 70px;max-width:900px;}
.page-hero .kicker {margin:0 0 12px;color:var(--breukelein-gold);font:700 13px/1.3 Arial,Helvetica,sans-serif;letter-spacing:.15em;text-transform:uppercase;}
.page-hero h1 {margin:0;font-size:clamp(48px,7vw,80px);line-height:1;font-weight:500;letter-spacing:-.035em;}
.page-hero p {max-width:720px;margin:22px 0 0;font:20px/1.65 Arial,Helvetica,sans-serif;color:rgba(255,255,255,.92);}
.content-grid {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:42px;align-items:start;}
.content-copy {font:18px/1.75 Arial,Helvetica,sans-serif;color:#3f4a54;}
.content-copy h2,.donation-card h2 {margin:0 0 18px;color:var(--breukelein-deep);font:500 clamp(31px,4vw,44px)/1.12 Georgia,"Times New Roman",serif;}
.content-copy p {margin:0 0 22px;}
.donation-card {padding:34px;background:var(--breukelein-cream);border-top:7px solid var(--breukelein-gold);box-shadow:0 14px 34px rgba(12,52,82,.13);}
.donation-card p {margin:0 0 20px;font:16px/1.65 Arial,Helvetica,sans-serif;color:#46515b;}
.donation-card .button {width:100%;text-align:center;}
.mail-card {margin-top:26px;padding:28px 30px;border:1px solid #d8dfe4;background:#fff;}
.mail-card h3 {margin:0 0 12px;color:var(--breukelein-deep);font-size:25px;}
.mail-card address {font:normal 16px/1.7 Arial,Helvetica,sans-serif;color:#46515b;}
.tax-note {margin-top:34px;padding:20px 24px;border-left:5px solid var(--breukelein-gold);background:#f4f7f9;font:15px/1.65 Arial,Helvetica,sans-serif;color:#4b5660;}
.main-nav a[aria-current="page"] {background:var(--breukelein-blue);}
@media (max-width:820px){.content-grid{grid-template-columns:1fr;}}
@media (max-width:600px){.page-hero-inner{padding:54px 0 50px}.donation-card{padding:26px}}


/* Contact page */
.contact-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 42px;
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
.contact-column {
  display: grid;
  gap: 26px;
}
.contact-card {
  padding: 34px;
  background: #fff;
  border: 1px solid #d7dee4;
  border-top: 6px solid var(--breukelein-gold);
  box-shadow: 0 10px 28px rgba(12,52,82,.08);
}
.contact-card h2 {
  margin: 0 0 14px;
  color: var(--breukelein-deep);
  font-size: 29px;
  line-height: 1.2;
  font-weight: 500;
}
.contact-card p,
.contact-card address {
  margin: 0;
  color: #46515b;
  font: normal 17px/1.7 Arial, Helvetica, sans-serif;
}
.contact-card a {
  color: var(--breukelein-blue);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.contact-card a:hover,
.contact-card a:focus {
  color: var(--breukelein-deep);
}
.contact-label {
  display: block;
  margin-bottom: 8px;
  color: var(--breukelein-blue);
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.contact-info-block + .contact-info-block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #d7dee4;
}
.contact-info-block h2 {
  margin-bottom: 8px;
  font-size: clamp(30px, 3vw, 38px);
}
.contact-info-block .contact-detail {
  font-size: 17px;
  line-height: 1.7;
}
.contact-note {
  padding: 28px 30px;
  border-left: 5px solid var(--breukelein-gold);
  background: #f4f7f9;
  color: #46515b;
  font: 16px/1.7 Arial, Helvetica, sans-serif;
}
.contact-note strong {
  color: var(--breukelein-deep);
}
@media (max-width: 820px) {
  .contact-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .contact-card,
  .contact-note {
    padding: 26px;
  }
}

/* Board of Directors page */
.board-intro {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
  font: 18px/1.7 Arial, Helvetica, sans-serif;
  color: #4b5660;
}
.board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}
.board-member {
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 30px;
  background: #fff;
  border: 1px solid #d8dfe4;
  border-top: 6px solid var(--breukelein-gold);
  box-shadow: 0 10px 28px rgba(12,52,82,.09);
}
.board-member img {
  display: block;
  width: 164px;
  height: 164px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #e9edf0;
}
.board-member h2 {
  margin: 0 0 6px;
  color: var(--breukelein-deep);
  font-size: 29px;
  line-height: 1.15;
  font-weight: 500;
}
.board-role {
  display: block;
  margin-bottom: 15px;
  color: var(--breukelein-blue);
  font: 700 12px/1.35 Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.board-member p {
  margin: 0 0 14px;
  font: 15.5px/1.65 Arial, Helvetica, sans-serif;
  color: #46515b;
}
.board-member p:last-child { margin-bottom: 0; }
@media (max-width: 1000px) {
  .board-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .board-member {
    grid-template-columns: 1fr;
    padding: 25px;
  }
  .board-member img {
    width: 140px;
    height: 140px;
  }
}
/* Informational page components */
.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 48px;
  align-items: start;
}
.prose {
  font: 18px/1.78 Arial, Helvetica, sans-serif;
  color: #3f4a54;
}
.prose p {
  margin: 0 0 22px;
}
.prose h2,
.prose h3 {
  color: var(--breukelein-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}
.prose h2 {
  margin: 0 0 20px;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
}
.prose h3 {
  margin: 34px 0 12px;
  font-size: 27px;
}
.quote-block {
  margin: 0;
  padding: 34px;
  background: var(--breukelein-cream);
  border-top: 7px solid var(--breukelein-gold);
  box-shadow: 0 14px 34px rgba(12,52,82,.12);
}
.quote-block blockquote {
  margin: 0;
  color: var(--breukelein-deep);
  font: italic 500 clamp(27px, 3vw, 38px)/1.35 Georgia, "Times New Roman", serif;
}
.quote-block p {
  margin: 20px 0 0;
  font: 15px/1.65 Arial, Helvetica, sans-serif;
  color: #59636c;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.value-card {
  padding: 32px;
  background: #fff;
  border: 1px solid #d8e0e5;
  border-top: 6px solid var(--breukelein-gold);
}
.value-card h3 {
  margin: 0 0 12px;
  color: var(--breukelein-deep);
  font-size: 27px;
}
.value-card p {
  margin: 0;
  font: 16px/1.65 Arial, Helvetica, sans-serif;
  color: #4b5660;
}
.section-alt {
  background: var(--breukelein-cream);
}

/* Whom We Assist */
.feature-org-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.feature-org {
  padding: 34px;
  background: #fff;
  border: 1px solid #d7dee4;
  border-top: 7px solid var(--breukelein-gold);
  box-shadow: 0 10px 28px rgba(12,52,82,.09);
}
.feature-org .label {
  display: block;
  margin-bottom: 10px;
  color: var(--breukelein-blue);
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.feature-org h2 {
  margin: 0 0 10px;
  color: var(--breukelein-deep);
  font-size: 32px;
  line-height: 1.15;
}
.feature-org .address {
  margin: 0 0 16px;
  font: 14px/1.55 Arial, Helvetica, sans-serif;
  color: #68727b;
}
.feature-org p {
  margin: 0 0 18px;
  font: 16px/1.68 Arial, Helvetica, sans-serif;
  color: #46515b;
}
.text-link {
  color: var(--breukelein-blue);
  font: 700 14px/1.4 Arial, Helvetica, sans-serif;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.org-list {
  columns: 3;
  column-gap: 38px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.org-list li {
  break-inside: avoid;
  margin: 0 0 12px;
  padding: 0 0 12px 18px;
  position: relative;
  border-bottom: 1px solid rgba(12,52,82,.12);
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  color: #3f4a54;
}
.org-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--breukelein-gold);
}

/* Travel page */
.travel-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 48px;
  align-items: center;
}
.travel-hero-image {
  overflow: hidden;
  border: 8px solid rgba(255,255,255,.95);
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
}
.travel-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.travel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 0;
}
.travel-meta span {
  display: inline-block;
  padding: 9px 13px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  font: 700 13px/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .03em;
}
.travel-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 42px;
  align-items: start;
}
.trip-facts {
  padding: 32px;
  background: var(--breukelein-cream);
  border-top: 7px solid var(--breukelein-gold);
}
.trip-facts h2 {
  margin: 0 0 18px;
  color: var(--breukelein-deep);
  font-size: 31px;
}
.trip-facts dl {
  margin: 0;
}
.trip-facts dt {
  margin-top: 17px;
  color: var(--breukelein-blue);
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.trip-facts dd {
  margin: 5px 0 0;
  font: 16px/1.55 Arial, Helvetica, sans-serif;
  color: #3f4a54;
}
.itinerary {
  max-width: 940px;
  margin: 0 auto;
}
.itinerary-day {
  position: relative;
  margin-left: 18px;
  padding: 0 0 34px 38px;
  border-left: 2px solid #d7dee4;
}
.itinerary-day:last-child {
  padding-bottom: 0;
}
.itinerary-day::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--breukelein-gold);
  box-shadow: 0 0 0 5px var(--breukelein-cream);
}
.itinerary-day h3 {
  margin: 0 0 8px;
  color: var(--breukelein-deep);
  font-size: 25px;
  line-height: 1.25;
}
.itinerary-day p {
  margin: 0 0 10px;
  font: 16px/1.72 Arial, Helvetica, sans-serif;
  color: #46515b;
}
.itinerary-day .hotel {
  color: var(--breukelein-blue);
  font-weight: 700;
}
.travel-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.travel-card {
  padding: 30px;
  background: #fff;
  border: 1px solid #d7dee4;
}
.travel-card h3 {
  margin: 0 0 14px;
  color: var(--breukelein-deep);
  font-size: 27px;
}
.travel-card p,
.travel-card li {
  font: 15px/1.67 Arial, Helvetica, sans-serif;
  color: #46515b;
}
.travel-card ul {
  margin: 0;
  padding-left: 20px;
}
.travel-card p:last-child {
  margin-bottom: 0;
}
.notice-box {
  margin-top: 28px;
  padding: 28px;
  background: #f4f7f9;
  border-left: 6px solid var(--breukelein-gold);
  font: 15px/1.7 Arial, Helvetica, sans-serif;
  color: #46515b;
}
.notice-box strong {
  color: var(--breukelein-deep);
}
@media (max-width: 900px) {
  .story-grid,
  .travel-hero-grid,
  .travel-summary-grid {
    grid-template-columns: 1fr;
  }
  .values-grid {
    grid-template-columns: 1fr;
  }
  .org-list {
    columns: 2;
  }
}
@media (max-width: 650px) {
  .feature-org-grid,
  .travel-card-grid {
    grid-template-columns: 1fr;
  }
  .org-list {
    columns: 1;
  }
}
/* Gaudium archive page */
.gaudium-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 48px;
  align-items: start;
}
.gaudium-definition {
  padding: 34px;
  background: var(--breukelein-cream);
  border-top: 7px solid var(--breukelein-gold);
  box-shadow: 0 14px 34px rgba(12,52,82,.12);
}
.gaudium-definition .word {
  display: block;
  margin-bottom: 8px;
  color: var(--breukelein-deep);
  font: italic 500 clamp(38px, 5vw, 58px)/1 Georgia, "Times New Roman", serif;
}
.gaudium-definition .meaning {
  color: var(--breukelein-blue);
  font: 700 13px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.gaudium-definition p {
  margin: 20px 0 0;
  font: 16px/1.7 Arial, Helvetica, sans-serif;
  color: #46515b;
}
.archive-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.button.button--outline {
  background: transparent;
  border: 2px solid var(--breukelein-deep);
  color: var(--breukelein-deep);
}
.button.button--outline:hover,
.button.button--outline:focus {
  background: var(--breukelein-deep);
  color: #fff;
}
.year-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.year-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 94px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #d7dee4;
  border-left: 6px solid var(--breukelein-gold);
  color: var(--breukelein-deep);
  text-decoration: none;
  box-shadow: 0 7px 20px rgba(12,52,82,.07);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.year-card:hover,
.year-card:focus {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(12,52,82,.13);
  border-left-color: var(--breukelein-blue);
}
.year-card .year {
  font: 500 31px/1 Georgia, "Times New Roman", serif;
}
.year-card .arrow {
  color: var(--breukelein-blue);
  font: 700 21px/1 Arial, Helvetica, sans-serif;
}
.year-card.external .arrow::after {
  content: "↗";
}
.year-card:not(.external) .arrow::after {
  content: "→";
}
.archive-note {
  max-width: 800px;
  margin: 28px auto 0;
  text-align: center;
  font: 15px/1.65 Arial, Helvetica, sans-serif;
  color: #5a6570;
}
@media (max-width: 900px) {
  .gaudium-intro-grid {
    grid-template-columns: 1fr;
  }
  .year-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 680px) {
  .year-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 420px) {
  .year-grid {
    grid-template-columns: 1fr;
  }
}