@charset "UTF-8";
/* Ibarra Real Nova is loaded from Google Fonts in the Rails app
   (app/assets/stylesheets/application.bootstrap.scss line 1). Kept as-is.
   No binary is vendored here — send woff2 files if you want it self-hosted.
   Body copy uses the native system sans stack; the site loads no second webfont. */
@import url("https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:ital,wght@0,400..700;1,400..700&display=swap");
/* Brand colors are the four SCSS variables the Rails app overrode on Bootstrap
   ($primary, $light, $dark, $secondary). Grays are Bootstrap 5.3 defaults, which
   the app never overrode and which therefore ship in the live site today. */
:root {
  /* --- Brand --- */
  --sf-rust:#bd5123; /* $primary — buttons, links, accents */
  --sf-rust-hover:#a1451e; /* shade 15% — button hover fill */
  --sf-rust-border:#97411c; /* shade 20% — button hover border, link hover */
  --sf-rust-tint:#f2e0d8; /* soft wash for selected/hover states */
  --sf-sage:#d7e2e1; /* $light — the page ground */
  --sf-sage-deep:#c4d2d1; /* sage one step down, for rules on sage */
  --sf-ink:#393939; /* $dark — body text, headings, footer */
  --sf-white:#ffffff; /* $secondary (lighten($light,15%) resolves to white) */
  /* --- Ink band (masthead + footer, from the adopted logo lockup) --- */
  --sf-band:#1d3329; /* deep river green — header and footer bands */
  --sf-band-fg:#f2ead6; /* wordmark on the band */
  --sf-band-nav:#e6ddc6; /* nav links on the band */
  --sf-band-tagline:#a8b8a4; /* tagline under the wordmark */
  --sf-band-rule:rgba(230,221,198,.16);
  --sf-band-meta:#8d9c93; /* copyright line */
  /* --- Neutral scale (Bootstrap 5.3 grays, untouched by the app) --- */
  --sf-gray-100:#f8f9fa;
  --sf-gray-200:#e9ecef;
  --sf-gray-300:#dee2e6;
  --sf-gray-400:#ced4da;
  --sf-gray-500:#adb5bd;
  --sf-gray-600:#6c757d;
  --sf-gray-700:#495057;
  --sf-gray-800:#343a40;
  --sf-gray-900:#212529;
  /* --- Semantic (Bootstrap theme colors still in play) --- */
  --sf-success:#198754;
  --sf-info:#0dcaf0;
  --sf-warning:#ffc107;
  --sf-danger:#dc3545;
  /* --- Surfaces --- */
  --sf-surface-page:var(--sf-sage);
  --sf-surface-card:var(--sf-white);
  --sf-surface-muted:var(--sf-gray-100);
  --sf-surface-inverse:var(--sf-ink);
  /* --- Text --- */
  --sf-text-body:var(--sf-ink);
  --sf-text-heading:var(--sf-ink);
  --sf-text-muted:var(--sf-gray-600);
  --sf-text-link:var(--sf-rust);
  --sf-text-link-hover:var(--sf-rust-border);
  --sf-text-on-inverse:rgba(255,255,255,.9);
  --sf-text-on-inverse-muted:rgba(255,255,255,.55);
  --sf-text-on-rust:#ffffff;
  /* --- Navigation (Bootstrap navbar-light / navbar-dark values) --- */
  --sf-nav-link:rgba(0,0,0,.55);
  --sf-nav-link-hover:rgba(0,0,0,.7);
  --sf-nav-link-active:rgba(0,0,0,.9);
  --sf-nav-link-inverse:rgba(255,255,255,.55);
  --sf-nav-link-inverse-hover:rgba(255,255,255,.75);
  /* --- Lines --- */
  --sf-border:#dee2e6; /* $border-color */
  --sf-border-card:rgba(0,0,0,.175); /* $card-border-color */
  --sf-rule:rgba(57,57,57,.2); /* hairline on sage */
}

/* Serif family is the app's $headings-font-family / $font-family-serif verbatim,
   odd monospace fallback and all. Sans is the Bootstrap 5.3 native stack, which
   is what body copy renders in today. */
:root {
  --sf-font-serif:"Ibarra Real Nova","Courier New",monospace;
  --sf-font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif;
  --sf-font-mono:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sf-font-body:var(--sf-font-sans);
  --sf-font-heading:var(--sf-font-serif);
  /* Sizes. Bootstrap scales headings fluidly below 1200px and caps them at
     the values below; these caps are what the site shows on desktop.
     Fluid formulas, if you want them back: h1 calc(1.375rem + 1.5vw),
     h2 calc(1.325rem + .9vw), h3 calc(1.3rem + .6vw), h4 calc(1.275rem + .3vw). */
  --sf-text-display:3.5rem;
  --sf-text-h1:2.5rem;
  --sf-text-h2:2rem;
  --sf-text-h3:1.75rem;
  --sf-text-h4:1.5rem;
  --sf-text-h5:1.25rem;
  --sf-text-h6:1rem;
  --sf-text-lead:1.25rem;
  --sf-text-body-size:1rem;
  --sf-text-small:.875rem;
  --sf-text-meta:.8125rem;
  --sf-leading-tight:1.2; /* @kind other */
  --sf-leading-heading:1.2; /* @kind other */
  --sf-leading-body:1.5; /* @kind other */
  --sf-leading-prose:1.65; /* @kind other */
  --sf-weight-regular:400;
  --sf-weight-medium:500;
  --sf-weight-semibold:600;
  --sf-weight-bold:700;
  --sf-tracking-eyebrow:.16em;
}

/* The app sets Bootstrap's $spacer to 1.4rem (22.4px), so every stock
   utility step is 1.4rem-based. The scale below is those steps, named. */
:root {
  --sf-spacer:1.4rem; /* 22.4px */
  --sf-space-0:0;
  --sf-space-1:.35rem; /* .25 × spacer — 5.6px */
  --sf-space-2:.7rem; /* .5  × spacer — 11.2px */
  --sf-space-3:1.4rem; /* 1   × spacer — 22.4px */
  --sf-space-4:2.1rem; /* 1.5 × spacer — 33.6px */
  --sf-space-5:4.2rem; /* 3   × spacer — 67.2px */
  --sf-gutter:1.5rem; /* $grid-gutter-width */
  --sf-container-padding:.75rem; /* gutter ÷ 2 */
  --sf-container-sm:540px;
  --sf-container-md:720px;
  --sf-container-lg:960px;
  --sf-container-xl:1140px;
  --sf-container-xxl:1320px;
  --sf-container-max:var(--sf-container-xxl);
  --sf-prose-max:70ch;
}

/* Radii, borders and elevation. Cards are square — the app sets
   $card-border-radius: 0 — while controls keep Bootstrap's radii. */
:root {
  --sf-radius-0:0;
  --sf-radius-sm:.25rem;
  --sf-radius:.375rem; /* $border-radius — buttons, inputs */
  --sf-radius-lg:.5rem;
  --sf-radius-card:0; /* $card-border-radius: 0 */
  --sf-radius-pill:50rem;
  --sf-border-width:1px;
  --sf-shadow-sm:0 .125rem .25rem rgba(0,0,0,.075);
  --sf-shadow:0 .5rem 1rem rgba(0,0,0,.15);
  --sf-shadow-lg:0 1rem 3rem rgba(0,0,0,.175);
  --sf-shadow-inset:inset 0 1px 2px rgba(0,0,0,.075);
  --sf-focus-ring:0 0 0 .25rem rgba(189,81,35,.25); /* @kind shadow */
  /* The river map watermark tiled behind every page (app/assets/images/river.svg).
     Path changed from the design system's "../assets/images/river.svg" to a bare
     filename so Propshaft resolves it to the digested asset. Reapply if re-vendored. */
  --sf-page-texture:url("/assets/river-566f29f3.svg"); /* @kind other */
}

/* Bootstrap's stock transitions — the app adds no custom motion. */
:root {
  --sf-dur-fast:.15s; /* @kind other */
  --sf-dur:.2s; /* @kind other */
  --sf-ease:ease-in-out; /* @kind other */
  --sf-transition-base:color var(--sf-dur-fast) var(--sf-ease),background-color var(--sf-dur-fast) var(--sf-ease),border-color var(--sf-dur-fast) var(--sf-ease),box-shadow var(--sf-dur-fast) var(--sf-ease); /* @kind other */
}

/* ============================================================
   SUSQUEHANNA FOOTPRINTS — base + component layer
   A Bootstrap-free rebuild of the public site's chrome. Every metric is
   carried over from the Bootstrap 5.3 defaults the site runs on today,
   with the app's four SCSS overrides applied ($primary, $light, $dark,
   $spacer: 1.4rem, $card-border-radius: 0).
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-body-size);
  font-weight: var(--sf-weight-regular);
  line-height: var(--sf-leading-body);
  color: var(--sf-text-body);
  background: var(--sf-page-texture) var(--sf-surface-page);
  -webkit-font-smoothing: antialiased;
}

img, svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6, .sf-h1, .sf-h2, .sf-h3, .sf-h4 {
  margin: 0 0 0.5rem;
  font-family: var(--sf-font-heading);
  font-weight: var(--sf-weight-regular);
  line-height: var(--sf-leading-heading);
  color: var(--sf-text-heading);
  text-wrap: pretty;
}

h1, .sf-h1 {
  font-size: var(--sf-text-h1);
}

h2, .sf-h2 {
  font-size: var(--sf-text-h2);
}

h3, .sf-h3 {
  font-size: var(--sf-text-h3);
}

h4, .sf-h4 {
  font-size: var(--sf-text-h4);
}

h5 {
  font-size: var(--sf-text-h5);
}

h6 {
  font-size: var(--sf-text-h6);
}

.sf-display {
  font-family: var(--sf-font-heading);
  font-size: var(--sf-text-display);
  line-height: 1.1;
  margin: 0;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

small, .sf-small {
  font-size: var(--sf-text-small);
}

hr, .sf-rule {
  border: 0;
  border-top: 1px solid var(--sf-rule);
  margin: var(--sf-space-4) 0;
  opacity: 1;
}

a {
  color: var(--sf-text-link);
  text-decoration: underline;
}

a:hover {
  color: var(--sf-text-link-hover);
}

.sf-link {
  color: var(--sf-text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sf-link:hover {
  color: var(--sf-text-link-hover);
}

.sf-link--plain {
  text-decoration: none;
}

.sf-link--plain:hover {
  text-decoration: underline;
}

.sf-eyebrow {
  font-family: var(--sf-font-body);
  font-size: var(--sf-text-meta);
  font-weight: var(--sf-weight-semibold);
  letter-spacing: var(--sf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sf-text-muted);
}

.sf-meta {
  font-size: var(--sf-text-meta);
  color: var(--sf-text-muted);
}

.sf-muted {
  color: var(--sf-text-muted);
}

.sf-lead {
  font-size: var(--sf-text-lead);
  font-weight: 300;
}

/* --- Layout ------------------------------------------------ */
.sf-container {
  width: 100%;
  max-width: var(--sf-container-max);
  margin-inline: auto;
  padding-inline: var(--sf-container-padding);
}

.sf-container--narrow {
  max-width: var(--sf-container-lg);
}

.sf-container--prose {
  max-width: var(--sf-container-md);
}

.sf-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
}

.sf-grid {
  display: grid;
  gap: var(--sf-gutter);
}

.sf-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.sf-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.sf-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .sf-grid--3, .sf-grid--4, .sf-grid--2 {
    grid-template-columns: 1fr;
  }
}
.sf-page {
  padding-block: var(--sf-space-4) var(--sf-space-5);
}

/* --- Site header ------------------------------------------- */
/* The masthead is an ink-green band carrying the emblem lockup. */
.sf-site-header {
  background: var(--sf-band);
  padding-block: 0.875rem;
}

.sf-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sf-space-4);
}

.sf-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--sf-text-heading);
}

.sf-brand:hover {
  color: var(--sf-text-heading);
}

.sf-brand__mark {
  height: 88px;
  width: auto;
  display: block;
}

.sf-brand__lockup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sf-brand__name {
  font-family: var(--sf-font-heading);
  font-size: 1.75rem;
  line-height: 1.05;
  margin: 0;
  font-weight: var(--sf-weight-regular);
}

.sf-brand__tagline {
  font-family: var(--sf-font-body);
  font-size: 0.6875rem;
  letter-spacing: var(--sf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sf-band-tagline);
}

.sf-brand--band .sf-brand__name, .sf-brand--band:hover .sf-brand__name {
  color: var(--sf-band-fg);
}

.sf-brand--sm .sf-brand__mark {
  height: 64px;
}

.sf-brand--sm .sf-brand__name {
  font-size: 1.5rem;
}

.sf-brand--inverse .sf-brand__name, .sf-brand--inverse:hover {
  color: var(--sf-text-on-inverse);
}

.sf-nav {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.sf-nav__link {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--sf-nav-link);
  text-decoration: none;
  transition: var(--sf-transition-base);
}

.sf-nav__link:hover {
  color: var(--sf-nav-link-hover);
}

.sf-nav__link.is-active {
  color: var(--sf-nav-link-active);
}

.sf-nav--inverse .sf-nav__link {
  color: var(--sf-nav-link-inverse);
}

.sf-nav--inverse .sf-nav__link:hover, .sf-nav--inverse .sf-nav__link.is-active {
  color: var(--sf-nav-link-inverse-hover);
}

.sf-nav--band {
  gap: 0.5rem;
}

.sf-nav--band .sf-nav__link {
  color: var(--sf-band-nav);
  font-size: 0.9375rem;
  padding: 0.5rem 0.3rem;
  white-space: nowrap;
}

.sf-nav--band .sf-nav__link:hover {
  color: #fff;
}

.sf-nav--band .sf-nav__link.is-active {
  color: #fff;
  box-shadow: inset 0 -1px 0 var(--sf-rust);
}

/* --- Site footer ------------------------------------------- */
/* Same ink band as the masthead, opened up: lockup left, two link columns right,
   a hairline, then the copyright line. */
.sf-site-footer {
  background: var(--sf-band);
  color: var(--sf-band-nav);
  margin-top: auto;
  padding-top: var(--sf-space-4);
}

.sf-site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sf-space-5);
  flex-wrap: wrap;
  padding-bottom: var(--sf-space-4);
}

.sf-site-footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  gap: 0.625rem 3rem;
  padding-top: 0.5rem;
}

.sf-site-footer__links a {
  color: var(--sf-band-nav);
  font-size: 0.9375rem;
  text-decoration: none;
}

.sf-site-footer__links a:hover {
  color: #fff;
}

.sf-site-footer__legal {
  border-top: 1px solid var(--sf-band-rule);
  padding: 1.125rem 0 1.625rem;
  font-size: var(--sf-text-meta);
  color: var(--sf-band-meta);
}

@media (max-width: 760px) {
  .sf-site-footer__links {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
}
/* --- Buttons ----------------------------------------------- */
.sf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sf-font-body);
  font-size: 1rem;
  font-weight: var(--sf-weight-regular);
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--sf-radius);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: var(--sf-transition-base);
}

.sf-btn:focus-visible {
  outline: 0;
  box-shadow: var(--sf-focus-ring);
}

.sf-btn:disabled, .sf-btn.is-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.sf-btn--sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: var(--sf-radius-sm);
}

.sf-btn--lg {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  border-radius: var(--sf-radius-lg);
}

.sf-btn--block {
  width: 100%;
}

.sf-btn--primary {
  background: var(--sf-rust);
  border-color: var(--sf-rust);
  color: var(--sf-text-on-rust);
}

.sf-btn--primary:hover {
  background: var(--sf-rust-hover);
  border-color: var(--sf-rust-border);
  color: var(--sf-text-on-rust);
}

.sf-btn--primary:active {
  background: var(--sf-rust-border);
  border-color: var(--sf-rust-border);
}

.sf-btn--secondary {
  background: var(--sf-white);
  border-color: var(--sf-white);
  color: var(--sf-ink);
}

.sf-btn--secondary:hover {
  background: var(--sf-gray-200);
  border-color: var(--sf-gray-200);
  color: var(--sf-ink);
}

.sf-btn--dark {
  background: var(--sf-ink);
  border-color: var(--sf-ink);
  color: var(--sf-white);
}

.sf-btn--dark:hover {
  background: #000;
  border-color: #000;
  color: var(--sf-white);
}

.sf-btn--outline {
  background: transparent;
  border-color: var(--sf-rust);
  color: var(--sf-rust);
}

.sf-btn--outline:hover {
  background: var(--sf-rust);
  color: var(--sf-text-on-rust);
}

.sf-btn--outline-dark {
  background: transparent;
  border-color: var(--sf-ink);
  color: var(--sf-ink);
}

.sf-btn--outline-dark:hover {
  background: var(--sf-ink);
  color: var(--sf-white);
}

.sf-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sf-rust);
  padding-inline: 0.25rem;
}

.sf-btn--ghost:hover {
  color: var(--sf-rust-border);
  text-decoration: underline;
}

.sf-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.sf-btn-group--end {
  justify-content: flex-end;
  display: flex;
}

/* --- Cards -------------------------------------------------- */
.sf-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--sf-surface-card);
  color: var(--sf-ink);
  border: 1px solid var(--sf-border-card);
  border-radius: var(--sf-radius-card);
}

.sf-card--flat {
  background: transparent;
  border: 0;
}

.sf-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.sf-card__body {
  padding: var(--sf-spacer);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
}

.sf-card__title {
  margin: 0;
  font-family: var(--sf-font-heading);
  font-size: var(--sf-text-h4);
  line-height: 1.2;
}

.sf-card__text {
  margin: 0;
  color: var(--sf-ink);
}

.sf-card__footer {
  padding: var(--sf-spacer);
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* --- Post summary (public index rows) ----------------------- */
.sf-post-summary {
  padding-block: var(--sf-space-3);
  border-bottom: 1px solid var(--sf-rule);
}

.sf-post-summary__title {
  margin: 0 0 0.35rem;
  font-family: var(--sf-font-heading);
  font-size: var(--sf-text-h3);
}

.sf-post-summary__title a {
  color: var(--sf-text-heading);
  text-decoration: none;
}

.sf-post-summary__title a:hover {
  color: var(--sf-rust);
}

/* --- Prose (CMS body copy) ---------------------------------- */
.sf-prose {
  max-width: var(--sf-prose-max);
  line-height: var(--sf-leading-prose);
}

.sf-prose h2, .sf-prose h3 {
  margin-top: var(--sf-space-4);
}

.sf-prose img {
  margin-block: var(--sf-space-3);
}

.sf-prose blockquote {
  margin: var(--sf-space-3) 0;
  padding-left: var(--sf-space-3);
  border-left: 3px solid var(--sf-rust);
  font-family: var(--sf-font-heading);
  font-size: 1.25rem;
}

.sf-prose figcaption {
  font-size: var(--sf-text-meta);
  color: var(--sf-text-muted);
}

/* --- Badges & tags ------------------------------------------ */
.sf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35em 0.65em;
  font-size: 0.75em;
  font-weight: var(--sf-weight-bold);
  line-height: 1;
  border-radius: var(--sf-radius-sm);
  background: var(--sf-ink);
  color: var(--sf-white);
}

.sf-badge--primary {
  background: var(--sf-rust);
}

.sf-badge--muted {
  background: var(--sf-gray-200);
  color: var(--sf-gray-700);
}

.sf-badge--success {
  background: var(--sf-success);
}

.sf-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  font-size: var(--sf-text-meta);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-pill);
  background: var(--sf-white);
  color: var(--sf-gray-700);
  text-decoration: none;
}

.sf-tag:hover, .sf-tag.is-active {
  background: var(--sf-rust-tint);
  border-color: var(--sf-rust);
  color: var(--sf-rust-border);
}

.sf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* --- Forms --------------------------------------------------- */
.sf-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--sf-space-3);
}

.sf-label {
  font-size: var(--sf-text-small);
  color: var(--sf-gray-700);
}

.sf-input, .sf-select, .sf-textarea {
  width: 100%;
  font-family: var(--sf-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--sf-ink);
  padding: 0.375rem 0.75rem;
  background: var(--sf-white);
  border: 1px solid var(--sf-gray-400);
  border-radius: var(--sf-radius);
  transition: var(--sf-transition-base);
}

.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
  outline: 0;
  border-color: #dea891;
  box-shadow: var(--sf-focus-ring);
}

.sf-textarea {
  min-height: 8rem;
  resize: vertical;
}

.sf-help {
  font-size: var(--sf-text-meta);
  color: var(--sf-text-muted);
}

.sf-error {
  font-size: var(--sf-text-meta);
  color: var(--sf-danger);
}

.sf-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sf-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--sf-rust);
}

/* --- Alerts --------------------------------------------------- */
.sf-alert {
  padding: var(--sf-space-2) var(--sf-space-3);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius);
  background: var(--sf-white);
  margin-bottom: var(--sf-space-3);
}

.sf-alert--danger {
  background: #f8d7da;
  border-color: #f1aeb5;
  color: #58151c;
}

.sf-alert--success {
  background: #d1e7dd;
  border-color: #a3cfbb;
  color: #0a3622;
}

.sf-alert--warning {
  background: #fff3cd;
  border-color: #ffe69c;
  color: #664d03;
}

/* --- Table ---------------------------------------------------- */
.sf-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sf-white);
}

.sf-table th, .sf-table td {
  padding: 0.5rem;
  border-bottom: 1px solid var(--sf-border);
  text-align: left;
  vertical-align: middle;
}

.sf-table thead th {
  font-size: var(--sf-text-small);
  color: var(--sf-gray-700);
  font-weight: var(--sf-weight-semibold);
}

/* --- Pagination ------------------------------------------------ */
.sf-pagination {
  display: inline-flex;
  list-style: none;
  margin: var(--sf-space-3) 0 0;
  padding: 0;
}

.sf-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  color: var(--sf-rust);
  text-decoration: none;
  margin-left: -1px;
}

.sf-pagination li:first-child .sf-pagination__link {
  border-radius: var(--sf-radius) 0 0 var(--sf-radius);
  margin-left: 0;
}

.sf-pagination li:last-child .sf-pagination__link {
  border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
}

.sf-pagination__link:hover {
  background: var(--sf-gray-200);
  color: var(--sf-rust-border);
}

.sf-pagination__link.is-active {
  background: var(--sf-rust);
  border-color: var(--sf-rust);
  color: var(--sf-white);
}

.sf-pagination__link.is-disabled {
  color: var(--sf-gray-500);
  pointer-events: none;
}

/* --- Icons ----------------------------------------------------- */
.sf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.sf-icon img, .sf-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sf-icon--sm {
  width: 1rem;
  height: 1rem;
}

.sf-icon--lg {
  width: 1.25rem;
  height: 1.25rem;
}

.sf-icon--xl {
  width: 1.5rem;
  height: 1.5rem;
}

/* --- Emblem rule (logo used as a section divider) --------------- */
.sf-emblem-rule {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-block: var(--sf-space-4);
}

.sf-emblem-rule::before, .sf-emblem-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sf-rule);
}

.sf-emblem-rule img {
  height: 34px;
  width: auto;
  display: block;
  opacity: 0.75;
}

html,
body {
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.sf-card--flat .sf-card__body {
  padding: var(--sf-space-3) 0 0;
}

.sf-page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sf-space-3);
  margin-bottom: var(--sf-space-3);
}
.sf-page-title h1 {
  margin: 0;
}
.sf-page-title .sf-eyebrow {
  display: block;
  margin-bottom: 0.5rem;
}

.sf-post-summary--row {
  display: flex;
  gap: var(--sf-space-3);
  align-items: flex-start;
}
.sf-post-summary--row > :first-child {
  flex: 1;
}

.sf-figure {
  margin: 0;
}
.sf-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.sf-figure figcaption {
  margin-top: 0.5rem;
}
.sf-figure__title {
  font-family: var(--sf-font-heading);
  font-size: 1.125rem;
}

.sf-hero {
  align-items: center;
  padding-block: var(--sf-space-5);
}
.sf-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-2);
  max-width: 34rem;
}
.sf-hero__title {
  margin: 0;
  font-size: var(--sf-text-display);
  line-height: 1.12;
}
.sf-hero img {
  display: block;
  width: 100%;
}

.sf-home-grid {
  padding-bottom: var(--sf-space-5);
}

.sf-biography {
  align-items: start;
}
.sf-biography img {
  display: block;
  width: 100%;
}

.sf-figure-full {
  margin: 0;
}
.sf-figure-full img {
  display: block;
  width: 100%;
}
.sf-figure-full figcaption {
  margin-top: 0.5rem;
}

.sf-btn--start {
  align-self: flex-start;
}

.pagy.series-nav {
  display: inline-flex;
  margin-top: var(--sf-space-3);
}
.pagy.series-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  margin-left: -1px;
  background: var(--sf-white);
  border: 1px solid var(--sf-border);
  color: var(--sf-rust);
  text-decoration: none;
  transition: var(--sf-transition-base);
}
.pagy.series-nav a:first-child {
  margin-left: 0;
  border-radius: var(--sf-radius) 0 0 var(--sf-radius);
}
.pagy.series-nav a:last-child {
  border-radius: 0 var(--sf-radius) var(--sf-radius) 0;
}
.pagy.series-nav a:hover {
  background: var(--sf-gray-200);
  color: var(--sf-rust-border);
}
.pagy.series-nav a[aria-current=page] {
  background: var(--sf-rust);
  border-color: var(--sf-rust);
  color: var(--sf-white);
}
.pagy.series-nav a[aria-disabled=true]:not([aria-current=page]) {
  color: var(--sf-gray-500);
  pointer-events: none;
}

audio {
  width: 100%;
}