/* ==========================================================================
   MIEDEMA VACATURE — GLOBAL STYLES
   
   Kevin Powell: intrinsic design, clamp(), min(), geen breakpoints
   Registreer ALLE ma-* classes als Global Style in GenerateBlocks
   Laad dit bestand via child-theme functions.php
   ========================================================================== */
 
 
/* ==========================================================================
   OVERZICHT
   ========================================================================== */
 
/* Link kleuren in donkere containers (single hero-bar, usp-header) */
 
.ma-sgl-hero-bar a,
.ma-sgl-usp-header a {
  color: var(--ma-off-white);
  text-decoration: none;
}
 
.ma-sgl-hero-bar a:visited,
.ma-sgl-usp-header a:visited {
  color: var(--ma-off-white);
}
 
.ma-sgl-hero-bar a:is(:hover, :focus) {
  color: var(--ma-ink-inverse);
}
 
/* Overzicht kaarten (zwart): links moeten off-white zijn, niet thema-blauw */
.ma-ovz-body a,
.ma-ovz-meta-tag a {
  color: var(--ma-off-white);
  text-decoration: none;
}
 
.ma-ovz-body a:visited,
.ma-ovz-meta-tag a:visited {
  color: var(--ma-off-white);
}
 
.ma-ovz-body a:is(:hover, :focus),
.ma-ovz-meta-tag a:is(:hover, :focus) {
  color: var(--ma-ink-inverse);
  text-decoration: underline;
}
 
.ma-ovz-root {
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding: clamp(1rem, 0.5rem + 2vw, 2rem)
           clamp(1rem, 0.5rem + 2vw, 1.5rem)
           clamp(2rem, 1rem + 3vw, 4rem);
}
 
.ma-ovz-intro {
  margin-block-end: clamp(2rem, 1rem + 3vw, 3.5rem);
  max-width: 640px;
}
 
.ma-ovz-kicker {
  display: block;
  font-size: clamp(0.65rem, 0.5rem + 0.3vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ma-accent-text);
  margin-block-end: clamp(0.4rem, 1.5vw, 0.75rem);
}
 
.ma-ovz-h1 {
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.15;
  margin-block: 0 clamp(0.5rem, 1.5vw, 1rem);
  text-wrap: pretty;
  max-width: 65ch;
}
 
.ma-ovz-desc {
  font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.05rem);
  line-height: 1.6;
  color: var(--ma-ink-1);
  margin-block-end: 0;
  letter-spacing: 0.3px;
  text-wrap: pretty;
  max-width: 75ch;
}
 
/* Grid — 4 kolommen (standaard) */
.ma-ovz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
}
 
/* Grid — 2 kolommen variant */
.ma-ovz-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
  gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem);
}
 
/* Grid — horizontale swipe carrousel (homepage) */
.ma-ovz-grid-swipe {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(85%, 380px);
  gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  padding-block-end: 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
 
.ma-ovz-grid-swipe::-webkit-scrollbar {
  display: none;
}
 
.ma-ovz-grid-swipe > .gb-loop-item,
.ma-ovz-grid-swipe > article {
  scroll-snap-align: start;
}
 
/* Swipe header: titel links, pijlen rechts */
.ma-swipe-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: clamp(0.75rem, 2vw, 1.25rem);
}
 
/* Pijl-knoppen */
.ma-swipe-arrows {
  display: flex;
  gap: clamp(0.35rem, 1vw, 0.5rem);
}
 
.ma-swipe-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
  height: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
  background-color: var(--ma-surface-inverse);
  color: var(--ma-ink-inverse);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
 
.ma-swipe-arrow:is(:hover, :focus) {
  background-color: var(--ma-accent-solid);
  color: var(--ma-accent-ink);
}
 
.ma-swipe-arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: square;
}
 
/* Footer onder carrousel: dots + hint */
.ma-swipe-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
 
.ma-swipe-dots {
  display: flex;
  gap: 6px;
}
 
.ma-swipe-dot {
  width: 24px;
  height: 3px;
  background-color: var(--ma-border-strong);
  transition: background-color 0.2s ease;
}
 
.ma-swipe-dot.active {
  background-color: var(--ma-accent);
}
 
.ma-swipe-hint {
  font-size: clamp(0.7rem, 0.6rem + 0.2vw, 0.8rem);
  color: var(--ma-ink-2);
  letter-spacing: 0.3px;
}
 
/* Card: article is de kaart — ZWART */
.ma-ovz-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: var(--ma-surface-inverse);
  overflow: hidden;
  text-decoration: none;
  color: var(--ma-ink-inverse);
}
 
.ma-ovz-card:focus-visible {
  outline: 2px solid var(--ma-focus-ring);
  outline-offset: 2px;
}
 
/* Badge: absoluut binnen card */
.ma-ovz-badge-text {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: clamp(0.5rem, 1.5vw, 1rem);
  z-index: 2;
  display: inline-block;
  padding: 0.35rem 0.65rem;
  font-size: clamp(0.62rem, 0.5rem + 0.25vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  background-color: var(--ma-accent-solid);
  color: var(--ma-accent-ink);
}
 
/* Afbeelding */
.ma-ovz-card-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
 
.ma-ovz-card:is(:hover, :focus-within) .ma-ovz-card-img {
  transform: scale(1.03);
}
 
/* Body: stretcht door grid-template-rows: auto 1fr */
.ma-ovz-body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1vw, 0.6rem);
  padding: clamp(0.8rem, 0.5rem + 1.5vw, 1.5rem);
}
 
/* Titel */
.ma-ovz-title {
  color: var(--ma-ink-inverse);
  font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.3px;
  margin: 0;
  text-wrap: pretty;
}
 
/* Excerpt */
.ma-ovz-excerpt {
  color: var(--ma-off-white);
  line-height: 1.55;
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
  letter-spacing: 0.3px;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
 
/* Meta container */
.ma-ovz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1vw, 0.75rem);
  padding-block-start: clamp(0.4rem, 1vw, 0.6rem);
  border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 10%, transparent);
}
 
.ma-ovz-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: clamp(0.72rem, 0.65rem + 0.25vw, 0.82rem);
  color: var(--ma-off-white);
}
 
.ma-ovz-meta-tag .gb-shape svg {
  width: 0.85em;
  height: 0.85em;
  fill: currentColor;
  opacity: 0.7;
}
 
.ma-ovz-meta-tag .gb-text .gb-shape {
  display: none;
}
 
/* CTA wrapper: altijd onderaan */
.ma-ovz-cta-wrap {
  margin-block-start: auto;
  display: flex;
  justify-content: flex-end;
  padding-block-start: clamp(0.4rem, 1vw, 0.6rem);
}
 
/* CTA link — groen op zwarte kaart */
.ma-ovz-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background-color: var(--ma-accent-solid);
  color: var(--ma-accent-ink);
  padding: clamp(0.5rem, 1.5vw, 0.8rem) clamp(1rem, 2vw, 1.6rem);
  font-size: clamp(0.78rem, 0.7rem + 0.25vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
 
.ma-ovz-card:is(:hover, :focus-within) .ma-ovz-card-cta {
  background-color: var(--ma-accent-solid-hover);
  color: var(--ma-accent-ink);
}
 
/* CTA pijl-icoon */
.ma-ovz-card-cta .gb-shape svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}
 
.ma-ovz-card-cta .gb-text .gb-shape {
  display: none;
}
 
 
/* ==========================================================================
   SINGLE
   ========================================================================== */
 
.ma-sgl-root {
  width: 100%;
  max-width: 1620px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  overflow-x: hidden;
}
 
/* Nav: flex-wrap ipv media query */
.ma-sgl-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: clamp(0.6rem, 1.5vw, 1rem);
  margin-block-end: clamp(0.5rem, 1.5vw, 1rem);
  border-block-end: 1px solid var(--ma-border-strong);
}
 
.ma-sgl-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ma-ink-0);
  text-decoration: none;
  font-size: clamp(0.82rem, 0.75rem + 0.25vw, 0.9rem);
  font-weight: 500;
}
 
.ma-sgl-back:is(:hover, :focus) {
  text-decoration: underline;
}
 
.ma-sgl-back .gb-shape svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
 
.ma-sgl-back .gb-text .gb-shape {
  display: none;
}
 
.ma-sgl-next {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--ma-ink-2);
  font-size: clamp(0.75rem, 0.68rem + 0.2vw, 0.85rem);
  margin: 0;
}
 
.ma-sgl-next .gb-shape svg {
  width: 0.9em;
  height: 0.9em;
  fill: currentColor;
}
 
.ma-sgl-next .gb-text .gb-shape {
  display: none;
}
 
/* Hero */
.ma-sgl-hero {
  overflow: hidden;
  max-width: 100%;
}
 
.ma-sgl-hero-img-wrap {
  position: relative;
  overflow: hidden;
}
 
.ma-sgl-hero-media {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
 
/* Enige media query: aspect-ratio kan niet intrinsiek switchen */
@media (max-width: 44em) {
  .ma-sgl-hero-media {
    aspect-ratio: 16 / 9;
  }
}
 
.ma-sgl-badge {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 0;
  margin: clamp(0.5rem, 1.5vw, 1.25rem);
  background-color: var(--ma-accent-solid);
}
 
.ma-sgl-badge-text {
  color: var(--ma-accent-ink);
  display: block;
  padding: 0.35rem 0.65rem;
  font-size: clamp(0.62rem, 0.5rem + 0.25vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
 
.ma-sgl-hero-bar {
  background-color: var(--ma-surface-inverse);
  padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  max-width: 100%;
  box-sizing: border-box;
}
 
.ma-sgl-h1 {
  color: var(--ma-ink-inverse);
  margin: 0 0 clamp(0.25rem, 1vw, 0.6rem);
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 1.8rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.3px;
  text-wrap: pretty;
  max-width: 65ch;
}
 
.ma-sgl-hero-desc {
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
  color: color-mix(in srgb, var(--ma-white) 70%, transparent);
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.3px;
  text-wrap: pretty;
  max-width: 75ch;
}
 
/* USP header (vacature-usp-header) */
.ma-sgl-usp-header {
  font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.35rem);
  font-weight: 600;
  color: var(--ma-ink-inverse);
  margin: 0;
  padding-block: clamp(0.75rem, 2vw, 1.25rem);
  background-color: var(--ma-surface-inverse);
  padding-inline: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  max-width: 100%;
  box-sizing: border-box;
  letter-spacing: 0.3px;
  text-wrap: pretty;
}
 
/* Data strip */
.ma-sgl-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 1px;
  background-color: var(--ma-border-strong);
  margin-block: clamp(1rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--ma-border-strong);
}
 
.ma-sgl-strip-cell {
  background-color: var(--ma-surface-1);
  padding: clamp(0.6rem, 2vw, 1.1rem) clamp(0.6rem, 2vw, 1.25rem);
}
 
.ma-sgl-strip-label {
  display: block;
  font-size: clamp(0.55rem, 0.48rem + 0.2vw, 0.65rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ma-ink-2);
  margin-block-end: 3px;
}
 
.ma-sgl-strip-value {
  display: block;
  font-size: clamp(0.8rem, 0.72rem + 0.25vw, 0.9rem);
  font-weight: 500;
  color: var(--ma-ink-0);
  line-height: 1.4;
}
 
/* Content grid */
.ma-sgl-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-block-end: clamp(1.5rem, 4vw, 3rem);
}
 
/* Secties */
.ma-sgl-section {
  margin-block-end: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}
 
.ma-sgl-section-h {
  font-size: clamp(0.62rem, 0.52rem + 0.25vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ma-accent-text);
  margin-block-end: clamp(0.5rem, 1.5vw, 1rem);
  padding-block-end: 8px;
  border-block-end: 1px solid var(--ma-border-strong);
}
 
/* Lijsten */
.ma-sgl-list-reset {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.ma-sgl-list-grid {
  display: grid;
  gap: 10px;
}
 
.ma-sgl-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.55;
  letter-spacing: 0.3px;
  color: var(--ma-ink-0);
}
 
.ma-sgl-list-item .gb-shape {
  flex-shrink: 0;
  color: var(--ma-accent);
  margin-block-start: 2px;
}
 
.ma-sgl-list-item .gb-shape svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
 
.ma-sgl-list-item .gb-text .gb-shape {
  display: none;
}
 
/* Prose */
.ma-sgl-prose {
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: var(--ma-ink-0);
  text-wrap: pretty;
  max-width: 75ch;
}
 
/* Aanvullende eis */
.ma-sgl-aanvullende-eis {
  font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
  line-height: 1.55;
  letter-spacing: 0.3px;
  color: var(--ma-ink-0);
  padding-block-start: clamp(0.5rem, 1.5vw, 1rem);
  border-block-start: 1px solid var(--ma-border-strong);
  text-wrap: pretty;
  max-width: 75ch;
}
 
/* Sticky CTA */
.ma-sgl-sticky {
  position: sticky;
  inset-block-end: 0;
  background-color: var(--ma-surface-1);
  border-block-start: 1px solid var(--ma-border-strong);
  padding-block: clamp(0.6rem, 2vw, 1.1rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  z-index: 10;
}
 
.ma-sgl-sticky-info {
  display: grid;
  line-height: 1.3;
}
 
.ma-sgl-sticky-title {
  font-size: clamp(0.82rem, 0.75rem + 0.25vw, 0.95rem);
  font-weight: 600;
  color: var(--ma-ink-0);
  margin: 0;
}
 
.ma-sgl-sticky-regio {
  font-size: clamp(0.75rem, 0.68rem + 0.2vw, 0.85rem);
  color: var(--ma-ink-2);
}
 
.ma-sgl-sticky-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: min(100%, 220px);
  padding: clamp(0.65rem, 2vw, 1rem) clamp(1.25rem, 3vw, 2rem);
  background-color: var(--ma-accent-solid);
  color: var(--ma-accent-ink);
  font-size: clamp(0.85rem, 0.78rem + 0.25vw, 0.95rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
 
.ma-sgl-sticky-cta:is(:hover, :focus) {
  background-color: var(--ma-accent-solid-hover);
}
 
 
 /* ==========================================================================
    STICKY CTA — fixed bottom met scroll-driven fade
    JS toggelt .is-visible; zie /assets/js/ma-sticky-cta.js
    ========================================================================== */
 
 .ma-sticky-cta {
   position: fixed;
   inset-inline: 0;
   inset-block-end: 0;
   z-index: var(--ma-z-overlay);
 
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: clamp(0.75rem, 2vw, 1.5rem);
 
   padding-block: clamp(0.75rem, 1.5vw, 1rem);
   padding-inline: clamp(1rem, 4vw, 2rem);
 
   background-color: var(--ma-surface-inverse);
   color: var(--ma-ink-inverse);
   border-block-start: 1px solid color-mix(in srgb, var(--ma-white) 12%, transparent);
 
   opacity: 0;
   transform: translateY(100%);
   pointer-events: none;
 
   transition:
     opacity   250ms var(--ma-ease),
     transform 250ms var(--ma-ease);
 }
 
 .ma-sticky-cta.is-visible {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
 }
 
 .ma-sticky-cta-info {
   display: flex;
   flex-direction: column;
   gap: 0.15em;
   min-inline-size: 0;
 }
 
 .ma-sticky-cta-title {
   font-weight: var(--ma-weight-semibold);
   font-size: var(--ma-text-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .ma-sticky-cta-sub {
   display: flex;
   gap: clamp(0.5rem, 1.5vw, 1rem);
   font-size: var(--ma-text-xs);
   color: var(--ma-off-white);
 }
 
 .ma-sticky-cta-sub a {
   text-decoration: none;
   color: inherit;
 }
 
 .ma-sticky-cta-sub a:is(:hover, :focus-visible) {
   color: var(--ma-white);
 }
 
 /* ==========================================================================
    MIEDEMA SINGLE — FAQ (GB Pro Accordion)
    Selecteert op de structurele gb-accordion__* classes, gescoped onder
    .ma-sgl-root — werkt dus óók als de ma-faq-* global classes (nog) niet
    geregistreerd zijn in GenerateBlocks → Styles. De ma-faq-* selectors
    staan er als tweede naast, zodat registreren later niets breekt.
    ========================================================================== */
 
 .ma-sgl-root .ma-sgl-faq,
 .ma-sgl-faq {
   max-width: var(--ma-wrap-reading, 720px);
   margin-block-end: clamp(1.5rem, 4vw, 3rem);
 }
 
 .ma-sgl-root .gb-accordion__item,
 .ma-faq-item {
   border-block-end: 1px solid var(--ma-border-strong);
 }
 
 /* Toggle — GB rendert dit op de frontend als <button>, dus volledige reset */
 .ma-sgl-root .gb-accordion__toggle,
 .ma-faq-q {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   width: 100%;
   padding-block: clamp(0.75rem, 2vw, 1.1rem);
   padding-inline: 0;
   background: none;
   border: 0;
   cursor: pointer;
   text-align: left;
   font-family: inherit;
   font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.05rem);
   font-weight: 600;
   letter-spacing: 0.3px;
   line-height: 1.4;
   color: var(--ma-ink-0);
 }
 
 .ma-sgl-root .gb-accordion__toggle:is(:hover, :focus-visible),
 .ma-faq-q:is(:hover, :focus-visible) {
   color: var(--ma-accent-text);
 }
 
 /* Open item: vraag kleurt mee */
 .ma-sgl-root .gb-accordion__toggle.gb-block-is-current,
 .ma-faq-q.gb-block-is-current {
   color: var(--ma-accent-text);
 }
 
 /* Chevron-icoon in huisstijl-groen; GB wisselt zelf de open/close spans */
 .ma-sgl-root .gb-accordion__toggle-icon,
 .ma-faq-icon {
   flex-shrink: 0;
   color: var(--ma-accent);
 }
 
 .ma-sgl-root .gb-accordion__toggle-icon svg,
 .ma-faq-icon svg {
   width: 1em;
   height: 1em;
   display: block;
 }
 
 /* Antwoord */
 .ma-sgl-root .gb-accordion__content p,
 .ma-faq-a {
   font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1rem);
   line-height: 1.6;
   letter-spacing: 0.3px;
   color: var(--ma-ink-0);
   max-width: 75ch;
   text-wrap: pretty;
   margin: 0;
   padding-block-end: clamp(0.75rem, 2vw, 1.1rem);
 }