/* ── About Hero ── */
.about-hero {
  position: relative;
  height: 250px;
  min-height: 250px;
  background-color: #374c38;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-hero__overlay {
  text-align: center;
  padding: 0 1rem;
}

.about-hero__title {
  color: #fff;
}

/* ── Philosophy ── */
.about-philosophy {
  background-color: #374c38;
}

/* ── Classes Section ── */
.about-classes {
  background-color: #9db29f;
}

/* ── Class Card ── */
.about-class-card {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2rem;
}

.about-class-card__icon {
  color: #374c38;
  margin-bottom: 1rem;
}

.about-class-card__icon img {
  width: 100px;
}

.about-class-card__title {
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.about-class-card__desc {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.7;
}

/* ── Community / Values ── */
.about-community {
  background-color: #374c38;
}

.about-value-card__icon {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

/* ── CTA Section ── */
.about-cta {
  background-color: #9db29f;
}

.about-cta__btn {
  background-color: #374c38;
}

.about-cta__btn:hover {
  background-color: #2b3c2c;
}

/* ── Location Section ── */
.about-location {
  background-color: #374c38;
}

/* ── Dark mode ── deepen the sage sections to forest green and darken the
   white cards (plus their hardcoded text) so they stay legible. Sections
   already on #374c38 (hero, philosophy, community, location) need no change. */
.dark .about-classes,
.dark .about-cta {
  background-color: #374c38;
}

.dark .about-class-card {
  background-color: #1c211c;
}

.dark .about-class-card__title {
  color: #e6ece6;
}

.dark .about-class-card__desc {
  color: #9aa89c;
}

/* The CTA button is #374c38 in light mode; once its section is forest green
   it would blend in, so switch it to sage to stay visible. */
.dark .about-cta__btn {
  background-color: #9db29f;
}

.dark .about-cta__btn:hover {
  background-color: #8aa38c;
}
/* ── Events Page (Luma-inspired) ── */
.events-page {
  background-color: var(--color-muted);
  min-height: calc(100vh - 4rem);
}

/* ── Event Card ── */
.event-card {
  background: white;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.event-card--past {
  opacity: 0.6;
  pointer-events: none;
}

.event-card__inner {
  display: flex;
  flex-direction: column;
}

.event-card--horizontal .event-card__inner {
  flex-direction: row;
  align-items: center;
}

.event-card__image {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.event-card--horizontal .event-card__image {
  width: 200px;
  height: auto;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .event-card--horizontal .event-card__inner {
    flex-direction: column;
  }

  .event-card--horizontal .event-card__image {
    width: 100%;
    height: 200px;
    aspect-ratio: auto;
  }
}

.event-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
}

.event-card__date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3rem;
  padding-top: 0.125rem;
}

.event-card__date-month {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.event-card__date-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-foreground);
}

.event-card__info {
  flex: 1;
  min-width: 0;
}

.event-card__title {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-foreground);
  margin-bottom: 0.375rem;
}

.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

.event-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.event-card__price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.event-card__price--free {
  color: var(--color-primary);
}

.event-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
}

.event-card__tag--full {
  color: var(--color-destructive);
}

/* ── Event Show ── */
.event-show__container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 3rem 1rem;
}

@media (min-width: 640px) {
  .event-show__container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.event-show__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .event-show__layout {
    grid-template-columns: 1fr;
  }
}

.event-show__left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.event-show__cover {
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.event-show__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-show__right {
  display: flex;
  flex-direction: column;
}

.event-show__title {
  font-size: 2rem;
  color: var(--color-foreground);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.event-show__details {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.event-show__detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.event-show__rsvp {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

.event-show__description {
  padding-top: 0.5rem;
}
/* ── FAQs Hero ── */
.faqs-hero {
  position: relative;
  min-height: 250px;
  background-color: #374c38;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
}

.faqs-hero__overlay {
  text-align: center;
  padding: 0 1rem;
  max-width: 600px;
}

.faqs-hero__title {
  color: #fff;
}

.faqs-hero__subtitle {
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ── FAQs Content ── */
.faqs-content {
  background-color: #9db29f;
}

/* ── Container ── */
.faqs-container {
  background-color: #fff;
  border-radius: 1rem;
  padding: 2.5rem 2rem;
}

@media (min-width: 640px) {
  .faqs-container {
    padding: 3rem 3rem;
  }
}

/* ── Policy Sections ── */
.faqs-policy-section {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(55, 76, 56, 0.15);
}

.faqs-policy-section--last {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.faqs-policy-title {
  color: #374c38;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.faqs-policy-text {
  font-size: 0.9375rem;
  color: #1a1a1a;
  line-height: 1.8;
  margin-bottom: 0.75rem;
}

.faqs-policy-text:last-child {
  margin-bottom: 0;
}

.faqs-policy-text strong {
  font-weight: 600;
}

/* ── Dark mode ── deepen the sage content background to forest green and
   darken the white policy container (plus its hardcoded text and divider).
   The hero is already #374c38, so it needs no override. */
.dark .faqs-content {
  background-color: #374c38;
}

.dark .faqs-container {
  background-color: #1c211c;
}

.dark .faqs-policy-section {
  border-bottom-color: rgba(230, 236, 230, 0.12);
}

.dark .faqs-policy-title {
  color: #9db29f;
}

.dark .faqs-policy-text {
  color: #e6ece6;
}
@font-face {
  font-family: "Monigue";
  src: url(/assets/Monigue-e0521f2cd2e1c30712b7bc8e832a33130cadfe1d8ff7a133a625e0db7619615c.otf) format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "NOIRetBLANC";
  src: url(/assets/NOIRetBLANC_Med_Italic-880613eba9dd9dfbbe5744378654029f1c53550c3994b8d5f782379a640a2e0c.otf) format("opentype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}
/* ── Hero Section ── */
.home-hero {
  position: relative;
  height: 85vh;
  min-height: 500px;
  background: #000;
  overflow: hidden;
}

.home-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.home-hero__content {
  position: absolute;
  bottom: -6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  padding: 0 1rem;
}



.home-hero__card {
  background-color: #374c38;
  border-radius: 1rem;
  padding: 3rem 1.25rem;
  text-align: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.home-hero__logo {
  height: 3.5rem;
  width: 3.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 0.5rem;
  object-fit: contain;
}

.home-hero__title {
  font-size: 2.75rem;
  font-weight: 300;
  color: #fff;
}

@media (max-width: 768px) {
  .home-hero__title {
    font-size: 1.75rem;
  }
}

.home-hero__cta-wrapper {
  margin-top: 2rem;
}

.home-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background-color: #9db29f;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.home-hero__cta-icon {
  margin-left: 0.5rem;
  height: 1rem;
  width: 1rem;
}

/* ── Today's Classes ── */
.home-classes {
  background-color: #9db29f;
  padding-top: 11rem;
}

.home-class-card {
  background-color: #fff;
  padding: 2.5rem;
}

.home-class-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.home-class-card__teacher {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1rem;
}

.home-class-card__time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 1.25rem;
}

.home-class-card__time-icon {
  height: 1rem;
  width: 1rem;
}

.home-class-card__book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background-color: #9db29f;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

/* ── Community Quote ── */
.home-quote {
  background-color: #9db29f;
}

.home-quote__text {
  font-family: "Monigue", sans-serif;
  font-size: 4rem;
}

/* ── Feature Cards ── */
.home-features {
  background-color: #9db29f;
}

.home-feature-card {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 3rem;
}

.home-feature-icon {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ── Pricing Section ── */
.home-pricing {
  background-color: #9db29f;
}

.home-pricing__sidebar {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2rem;
}

.home-pricing__popular-badge {
  background-color: #374c38;
}

.home-pricing__btn--popular {
  background-color: #374c38;
}

/* ── CTA Section ── */
.home-cta__image {
  min-height: 450px;
  background-image: url(/assets/IMG_7254-50a7ebaa242c90670f0842aa410b31fe7a988503ebfd4f905ed52b13eaf749f5.jpg);
  background-size: cover;
  background-position: center;
}

.home-cta__content {
  background-color: #374c38;
  padding-left: 2rem;
}

.home-cta__btn {
  background-color: #9db29f;
}

/* ── Dark mode ── deepen the sage section backgrounds to forest green so the
   landing page reads as dark, and darken the solid white cards that sit on
   them (plus their hardcoded text) to stay legible. */
.dark .home-classes,
.dark .home-quote,
.dark .home-features,
.dark .home-pricing {
  background-color: #374c38;
}

.dark .home-class-card {
  background-color: #1c211c;
}

.dark .home-class-card__title {
  color: #e6ece6;
}

.dark .home-class-card__teacher,
.dark .home-class-card__time {
  color: #9aa89c;
}
/* ── Teachers Hero ── */
.teachers-hero {
  position: relative;
  height: 250px;
  min-height: 320px;
  background-color: #374c38;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teachers-hero__overlay {
  text-align: center;
  padding: 0 1rem;
}

.teachers-hero__title {
  color: #fff;
}

/* ── Teachers Grid ── */
.teachers-grid {
  background-color: #9db29f;
}

/* ── Teacher Card ── */
.teacher-card {
  background-color: #fff;
  border-radius: 1rem;
  overflow: hidden;
}

.teacher-card__photo-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.teacher-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-card__photo-placeholder {
  width: 100%;
  height: 100%;
  background-color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.teacher-card__photo-placeholder span {
  font-size: 2.5rem;
  font-weight: 600;
  color: #94a3b8;
}

.teacher-card__info {
  padding: 1.5rem;
}

.teacher-card__name {
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.teacher-card__styles {
  font-size: 0.875rem;
  color: #9db29f;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

.teacher-card__bio {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.6;
}

.teacher-card__bio p + p {
  margin-top: 0.75rem;
}

/* ── Dark mode ── deepen the sage grid background to forest green and darken
   the white teacher cards (plus their hardcoded text) so they stay legible.
   The hero is already #374c38, so it needs no override. */
.dark .teachers-grid {
  background-color: #374c38;
}

.dark .teacher-card {
  background-color: #1c211c;
}

.dark .teacher-card__name {
  color: #e6ece6;
}

.dark .teacher-card__bio {
  color: #9aa89c;
}

.dark .teacher-card__photo-placeholder {
  background-color: #2c332c;
}
:root {
  /* Base colors — override per client */
  --color-primary: #374C38;
  --color-primary-foreground: #ffffff;
  --color-primary-hover: #2B3C2C;
  --color-secondary: #EDF2ED;
  --color-secondary-foreground: #1e293b;
  --color-accent: #9DB29F;
  --color-accent-foreground: #1e293b;
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  --color-muted: #f8fafc;
  --color-muted-foreground: #64748b;
  --color-border: #e2e8f0;
  --color-destructive: #ef4444;
  --color-destructive-foreground: #ffffff;
  --color-success: #10b981;
  --color-success-foreground: #ffffff;
  --color-warning: #f59e0b;
  --color-warning-foreground: #ffffff;
  --color-card: #ffffff;
  --color-card-foreground: #0f172a;
  --color-sidebar: #f8fafc;
  --color-sidebar-foreground: #334155;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Monigue", var(--font-sans);
  --font-display-alt: "NOIRetBLANC", var(--font-sans);

  /* Spacing & Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 100;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Dark mode — applied when <html> has the `dark` class. Green-tinted to match
   the brand palette: lighter sage greens read as accents on the dark surfaces. */
.dark {
  --color-primary: #7CA67E;
  --color-primary-foreground: #14180F;
  --color-primary-hover: #8DB78F;
  --color-secondary: #232A23;
  --color-secondary-foreground: #E6ECE6;
  --color-accent: #9DB29F;
  --color-accent-foreground: #14180F;
  --color-background: #141814;
  --color-foreground: #E6ECE6;
  --color-muted: #1E241E;
  --color-muted-foreground: #9AA89C;
  --color-border: #2C332C;
  --color-destructive: #E06B5C;
  --color-destructive-foreground: #14180F;
  --color-success: #6FB58A;
  --color-success-foreground: #14180F;
  --color-warning: #D8B05A;
  --color-warning-foreground: #14180F;
  --color-card: #1C211C;
  --color-card-foreground: #E6ECE6;
  --color-sidebar: #1C211C;
  --color-sidebar-foreground: #E6ECE6;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Smooth color transitions when toggling dark mode */
html {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

/*
 * Dark-mode compatibility layer for Tailwind utility classes that don't yet
 * use theme variables. Always-dark surfaces (e.g. a pinned footer) are scoped
 * out via :not([data-theme-static]).
 */
.dark .bg-white:not([data-theme-static]) { background-color: var(--color-card); }
.dark .bg-white\/80:not([data-theme-static]) { background-color: color-mix(in srgb, var(--color-card) 80%, transparent); }
.dark .bg-gray-50:not([data-theme-static]),
.dark .bg-slate-50:not([data-theme-static]) { background-color: var(--color-muted); }
.dark .bg-gray-100:not([data-theme-static]),
.dark .bg-slate-100:not([data-theme-static]) { background-color: var(--color-muted); }

.dark .text-gray-900:not([data-theme-static]),
.dark .text-slate-900:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-800:not([data-theme-static]),
.dark .text-slate-800:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-700:not([data-theme-static]),
.dark .text-slate-700:not([data-theme-static]) { color: var(--color-foreground); }
.dark .text-gray-600:not([data-theme-static]),
.dark .text-slate-600:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-500:not([data-theme-static]),
.dark .text-slate-500:not([data-theme-static]) { color: var(--color-muted-foreground); }
.dark .text-gray-400:not([data-theme-static]),
.dark .text-slate-400:not([data-theme-static]) { color: var(--color-muted-foreground); }

.dark .border-gray-200:not([data-theme-static]),
.dark .border-slate-200:not([data-theme-static]) { border-color: var(--color-border); }
.dark .border-gray-300:not([data-theme-static]),
.dark .border-slate-300:not([data-theme-static]) { border-color: var(--color-border); }

/* Calendar view toggle buttons */
.active-view {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.active-view:hover {
  opacity: 0.9;
}

.inactive-view {
  border: 1px solid var(--color-border);
  background-color: transparent;
  color: var(--color-foreground);
}

.inactive-view:hover {
  background-color: var(--color-secondary);
}

/* Pagy pagination */
.pagy.series-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pagy.series-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--color-foreground);
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.pagy.series-nav > a:hover:not([aria-disabled="true"]) {
  background-color: var(--color-muted);
}

.pagy.series-nav > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-primary-foreground);
}

.pagy.series-nav > a[aria-disabled="true"]:not([aria-current="page"]) {
  color: var(--color-muted-foreground);
  cursor: default;
  opacity: 0.5;
}

.pagy.series-nav > a[role="separator"] {
  opacity: 1;
  letter-spacing: 0.1em;
}

.pagy.series-nav > a[aria-label="Previous"],
.pagy.series-nav > a[aria-label="Next"] {
  font-size: 0;
  overflow: hidden;
}

.pagy.series-nav > a[aria-label="Previous"]::before,
.pagy.series-nav > a[aria-label="Next"]::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.pagy.series-nav > a[aria-label="Previous"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 19l-7-7 7-7'/%3E%3C/svg%3E");
}

.pagy.series-nav > a[aria-label="Next"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
}