@charset "UTF-8";
.gallery-swiper.svelte-19y4lbs {
  --swiper-theme-color: #fff; /* affects arrows + active bullet */
  --swiper-pagination-color: pink; /* active bullet */
  --swiper-pagination-bullet-inactive-color: rgba(255, 105, 180, 0.4); /* inactive bullets */
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bottom: 12px;
}

.gallery-swiper.svelte-19y4lbs::part(pagination) {
  bottom: 12px;
}

.gallery-swiper.svelte-19y4lbs::part(bullet) {
  background: pink;
  opacity: 0.4;
}

.gallery-swiper.svelte-19y4lbs::part(bullet-active) {
  background: white;
  opacity: 1;
}

/* Navigation buttons */
.gallery-swiper.svelte-19y4lbs::part(button-next),
.gallery-swiper.svelte-19y4lbs::part(button-prev) {
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: white;
}

/* On a phone the slide is swiped, not clicked, and the arrows only eat into
  the width the copy needs. The pagination bullets still show there is more
  than one announcement. 600px matches styles/_mixin.scss breakpoint(mobile),
  which Svelte's scoped SCSS cannot @use from here. */
@media (max-width: 600px) {
  .gallery-swiper.svelte-19y4lbs::part(button-next),
  .gallery-swiper.svelte-19y4lbs::part(button-prev) {
    display: none;
  }
}
.container.svelte-19y4lbs {
  box-sizing: border-box;
  /* The bleed rules below hang this box past its parent on negative margins.
       max-width:100% would resolve against the *padded* width and clamp it back,
       turning the bleed into a sideways shove, so the cap has to go. */
  max-width: none;
  height: auto;
  background-color: var(--panel-solid);
  color: white;
  /* Full bleed on a phone: cancel the content column's gutter on both sides
       so the panel runs to either screen edge. */
}
@media (max-width: 600px) {
  .container.svelte-19y4lbs {
    margin-inline: calc(var(--content-gutter, 0px) * -1);
  }
}
/* (empty) .container {
  /* Desktop and tablet keep the left gutter — the panel stays flush with the
       articles beneath it — and cancel only the right, which is where the
       content column already meets the edge of the viewport. *\/
}*/
@media (min-width: 601px) {
  .container.svelte-19y4lbs {
    margin-right: calc(var(--content-gutter, 0px) * -1);
  }
}
.container.svelte-19y4lbs .top-bar:where(.svelte-19y4lbs) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}
.container.svelte-19y4lbs .top-bar:where(.svelte-19y4lbs) .title:where(.svelte-19y4lbs) {
  font-size: 1rem;
  font-weight: normal;
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
}
.container.svelte-19y4lbs .top-bar:where(.svelte-19y4lbs) .closeBtn:where(.svelte-19y4lbs) {
  /* `.title` is width:100%, so without this the button is squeezed away */
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.container.svelte-19y4lbs .top-bar:where(.svelte-19y4lbs) .closeBtn:where(.svelte-19y4lbs):hover, .container.svelte-19y4lbs .top-bar:where(.svelte-19y4lbs) .closeBtn:where(.svelte-19y4lbs):focus-visible {
  background: rgba(255, 255, 255, 0.15);
}
.container.svelte-19y4lbs .top-bar:where(.svelte-19y4lbs) .closeBtn:where(.svelte-19y4lbs) svg:where(.svelte-19y4lbs) {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
/* (empty) .container {
  /* Chevron points up to collapse, down to re-open *\/
}*/
.container.is-collapsed.svelte-19y4lbs .closeBtn:where(.svelte-19y4lbs) svg:where(.svelte-19y4lbs) {
  transform: rotate(180deg);
}
.container.svelte-19y4lbs swiper-container:where(.svelte-19y4lbs) {
  width: 100%;
  height: auto;
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
}
.container.svelte-19y4lbs swiper-container:where(.svelte-19y4lbs) swiper-slide:where(.svelte-19y4lbs) {
  height: auto;
  display: flex;
  flex-direction: column;
}
.container.svelte-19y4lbs .slide-inner:where(.svelte-19y4lbs) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.container.svelte-19y4lbs .slide-inner:where(.svelte-19y4lbs) a:where(.svelte-19y4lbs) {
  text-decoration: none;
  color: inherit;
  width: 100%;
  text-align: center;
}
.container.svelte-19y4lbs .slide-link:where(.svelte-19y4lbs) {
  text-decoration: none;
  color: inherit;
  font-size: min(2rem, 2vw);
  line-height: 1.3;
  box-sizing: border-box;
  padding: 20px 60px 50px;
  /* 2vw is sized for a desktop viewport — on a 375px phone it resolves to
        about 7px. The 60px side padding went with the arrows that are hidden
        above, so the copy gets that width back. */
}
@media (max-width: 600px) {
  .container.svelte-19y4lbs .slide-link:where(.svelte-19y4lbs) {
    font-size: 1.15rem;
    line-height: 1.45;
    padding: 8px 16px 28px;
  }
}
/* (unused) .container .swiper-button-next,
.container .swiper-button-prev {
  background-color: white;
  padding: 12px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: #333 !important;
}*/

/* (unused) .swiper .pagination .swiper-pagination-bullet {
  background-color: pink;
}*/
/* (unused) .swiper .pagination .swiper-pagination-bullet-active {
  color: white;
}*/.article-list.svelte-yuj9cu {
  padding-top: 20px;
}

ul.svelte-yuj9cu {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.post-item.svelte-yuj9cu {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  background: var(--article-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.post-item.svelte-yuj9cu:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  background-color: color-mix(in srgb, var(--theme-mid) 8%, var(--article-bg));
}

.post-link.svelte-yuj9cu {
  display: block;
  padding: 20px;
  color: var(--font-color-title);
  text-decoration: none;
}

.post-title.svelte-yuj9cu {
  display: block;
  font-size: 1.5rem;
  color: var(--font-color-title);
  line-height: 1.3;
  margin-bottom: 8px;
}

.post-meta.svelte-yuj9cu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--theme-grey-font);
  margin-bottom: 12px;
}

.post-summary.svelte-yuj9cu {
  color: var(--theme-summary-color);
  line-height: 1.7;
}

.pagination.svelte-yuj9cu {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  padding: 16px 0 32px;
}
.pagination.svelte-yuj9cu button:where(.svelte-yuj9cu) {
  padding: 8px 20px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  background: var(--article-bg);
  color: var(--font-color-title);
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pagination.svelte-yuj9cu button:where(.svelte-yuj9cu):hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pagination.svelte-yuj9cu button:where(.svelte-yuj9cu):disabled {
  opacity: 0.35;
  cursor: default;
}
.pagination.svelte-yuj9cu .page-info:where(.svelte-yuj9cu) {
  color: var(--theme-grey-font);
  font-size: 0.9rem;
  min-width: 120px;
  text-align: center;
}