/* =============================================================
   marcelzimmer.de - page styles
   Built on the Marcel Zimmer Design System.
   ============================================================= */



* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--mz-paper);
  color: var(--mz-ink);
  font-family: var(--mz-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ---------- Page chrome ---------- */

.site {
  max-width: var(--mz-container-max);
  margin: 0 auto;
  padding: 24px var(--mz-grid-margin) 64px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mz-ink);
  margin-bottom: 40px;
}

.topbar .wordmark {
  font-family: var(--mz-font-display);
  font-weight: var(--mz-weight-bold);
  font-size: var(--mz-text-md);
  letter-spacing: var(--mz-track-body);
  color: var(--mz-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.topbar .wordmark .dot {
  width: 10px; height: 10px;
  background: var(--mz-signal);
  display: inline-block;
}

.topbar nav {
  display: flex;
  gap: 24px;
}

.topbar nav a {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mz-ink);
  transition: color var(--mz-dur-fast) var(--mz-ease-linear);
}
.topbar nav a:hover { color: var(--mz-signal); }

/* ---------- Grid ---------- */

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--mz-grid-gutter);
}

/* ---------- Hero (portrait + about) ---------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  text-align: center;
}

.hero__portrait {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

.portrait-link {
  display: block;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.portrait-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portrait-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--mz-ink);
  pointer-events: none;
}

/* portrait-link hover: bewusst neutral */

.portrait-link:focus-visible {
  outline: 2px solid var(--mz-signal);
  outline-offset: 6px;
}

.hero__about {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.hero__name {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-4xl);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-tight);
  color: var(--mz-ink);
  margin: 0 0 16px;
}

.hero__label {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero__label::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--mz-ink);
  display: inline-block;
}

.hero__about p {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-sm);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-body);
  color: var(--mz-ink);
  margin: 0;
  text-wrap: balance;
}

.hero__about p + p { margin-top: 8px; }

.hero__about p.hero__lead {
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-body);
  margin-bottom: 10px;
}
.hero__about p.hero__lead + p { margin-top: 0; }

.hero__about p .accent { color: var(--mz-signal); }

/* ---------- Section header for journal ---------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--mz-ink);
  margin-bottom: 24px;
}

.section-head .idx {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-ink);
}

.section-head .meta {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
}

/* ---------- Blog cards ---------- */

.posts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.post-card {
  position: relative;
  display: block;
  border: 1px solid var(--mz-ink);
  background: var(--mz-paper);
  padding: 28px 26px 32px 26px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
}

.post-card > * {
  position: relative;
  z-index: 1;
  transition: color var(--mz-dur-base) var(--mz-ease-linear);
}

/* .post-card hover: bewusst neutral - keine Bewegung, keine Farbaenderung */
.post-card:focus-visible {
  outline: 2px solid var(--mz-signal);
  outline-offset: 2px;
}

.post-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.post-date {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
  margin: 0;
}

.post-arrow {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-md);
  color: var(--mz-mute);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--mz-dur-base) var(--mz-ease-linear),
              transform var(--mz-dur-base) var(--mz-ease-enter),
              color var(--mz-dur-base) var(--mz-ease-linear);
}


.post-title {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-2xl);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-tight);
  color: var(--mz-ink);
  margin: 0 0 14px;
  text-wrap: pretty;
}

.post-excerpt {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-md);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-body);
  color: var(--mz-ink);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.post-more {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-signal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Footer ---------- */

.hero,
.section-head,
.posts {
  /* Spiegelt die Breite der Artikel-Textspalte (9 von 12 Gridspalten) wider */
  max-width: calc(75% - 6px);
  margin-left: auto;
  margin-right: auto;
}

.site-footer {
  margin-top: 64px;
  padding-top: 24px;
  content-visibility: auto;
  contain-intrinsic-size: 1px 60px;
  border-top: 1px solid var(--mz-ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.site-footer .meta,
.site-footer a {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
  text-decoration: none;
}
.site-footer a:hover { color: var(--mz-signal); }

.site-footer .legal-links {
  display: flex;
  gap: 20px;
}
.site-footer .legal-links a {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
  text-decoration: none;
  transition: color var(--mz-dur-fast) var(--mz-ease-linear);
}
.site-footer .legal-links a:hover { color: var(--mz-signal); }

@media (max-width: 760px) {
  .site-footer {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .site-footer .meta { flex-basis: 100%; order: 1; }
  .site-footer .legal-links { order: 2; }
  .site-footer .site-url { order: 3; margin-left: auto; }
}
@media (max-width: 480px) {
  .site-footer .legal-links { flex-basis: 100%; }
  .site-footer .site-url { margin-left: 0; }
}

/* ============================================================= */
/* ---------- Single post page ---------- */
/* ============================================================= */

.post-page {
  max-width: var(--mz-container-max);
  margin: 0 auto;
  padding: 24px var(--mz-grid-margin) 64px;
}

.post-page .topbar { margin-bottom: 48px; }

.article-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--mz-grid-gutter);
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--mz-ink);
  margin-bottom: 40px;
}

.article-head__meta {
  grid-column: 1 / span 2;
}

.article-head__meta .post-date {
  margin-bottom: 8px;
}

.article-head__meta .idx {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-ink);
}

.article-head h1 {
  grid-column: 3 / span 9;
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-4xl);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-display);
  color: var(--mz-ink);
  margin: 0;
  text-wrap: pretty;
}

.article {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--mz-grid-gutter);
}

.article-body {
  grid-column: 3 / span 9;
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-lg);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-loose);
  color: var(--mz-ink);
}

.article-body p {
  margin: 0 0 1em;
  text-wrap: pretty;
  hyphens: manual;
}

.article-body h2 {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-2xl);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-tight);
  margin: 1.6em 0 0.5em;
  color: var(--mz-ink);
}

.article-body blockquote {
  margin: 1.4em 0;
  padding: 0 0 0 24px;
  border-left: 2px solid var(--mz-signal);
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-xl);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-snug);
  color: var(--mz-ink);
  font-style: normal;
}

.article-body a {
  color: var(--mz-signal);
  text-decoration: underline;
  text-decoration-color: var(--mz-signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}


.article-body .lede {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-xl);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-snug);
  color: var(--mz-ink);
  margin: 0 0 2em;
}

.article-body ul,
.article-body ol {
  margin: 0 0 1.25em;
  padding: 0;
  list-style: none;
}

.article-body ul li,
.article-body ol li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 0.5em;
  line-height: var(--mz-lead-loose);
}

.article-body ul li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
}

.article-body ol {
  counter-reset: mz-ol;
}
.article-body ol li {
  counter-increment: mz-ol;
  padding-left: 36px;
}
.article-body ol li::before {
  content: counter(mz-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  color: var(--mz-signal);
}

.article-body pre {
  margin: 1.5em 0 2em;
  padding: 20px 24px;
  background: var(--mz-wash);
  border-left: 2px solid var(--mz-ink);
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-sm);
  line-height: var(--mz-lead-body);
  color: var(--mz-ink);
  overflow-x: auto;
  white-space: pre;
}

.article-body code {
  font-family: var(--mz-font-mono);
  font-size: 0.9em;
  background: var(--mz-wash);
  padding: 1px 6px;
  border: 1px solid var(--mz-hairline);
  color: var(--mz-ink);
}

.article-body pre code {
  background: transparent;
  padding: 0;
  border: 0;
  font-size: inherit;
}

.article-body figure {
  margin: 1.4em 0;
}

.article-body figure img,
.article-body figure .placeholder {
  display: block;
  width: 100%;
  border: 1px solid var(--mz-ink);
}

.article-body figure .placeholder {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(
      135deg,
      var(--mz-wash) 0 8px,
      var(--mz-hairline) 8px 9px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
}

.article-body figcaption {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--mz-hairline);
}

.article-body hr {
  border: 0;
  border-top: 1px solid var(--mz-ink);
  margin: 3em 0;
}

.callout {
  margin: 1.4em 0;
  padding: 24px 28px;
  border: 1px solid var(--mz-ink);
  background: var(--mz-paper);
  position: relative;
}

.callout::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 6px;
  height: calc(100% + 2px);
  background: var(--mz-signal);
}

.callout .callout-label {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-signal);
  margin: 0 0 8px;
}

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

.about-author {
  margin: 2.2em 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--mz-hairline);
}

.about-author .about-label {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-mute);
  margin: 0 0 16px;
}

.about-author p {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-md);
  line-height: var(--mz-lead-body);
  color: var(--mz-ink);
  margin: 0 0 8px;
  text-wrap: pretty;
}

.about-author p.about-lead {
  font-weight: var(--mz-weight-bold);
  margin-bottom: 10px;
}

.about-author p:last-child {
  margin-bottom: 0;
}

.about-author p .accent { color: var(--mz-signal); }

.article-foot {
  grid-column: 3 / span 9;
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--mz-ink);
}

.article-foot a {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  letter-spacing: var(--mz-track-label);
  text-transform: uppercase;
  color: var(--mz-ink);
  text-decoration: none;
  transition: color var(--mz-dur-fast) var(--mz-ease-linear);
}
.article-foot a:hover { color: var(--mz-signal); }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .site, .post-page { padding-left: 32px; padding-right: 32px; }
  .hero, .section-head, .posts { max-width: 100%; }
  .topbar { margin-bottom: 44px; }
  .topbar .wm-long { display: none; }
  .article-head__meta { grid-column: 1 / span 12; }
  .article-head h1    { grid-column: 1 / span 12; font-size: var(--mz-text-3xl); margin-top: 24px; }
  .article-body, .article-foot { grid-column: 1 / span 12; }
}

@media (max-width: 560px) {
  .site, .post-page { padding-left: 20px; padding-right: 20px; padding-bottom: 64px; }
  .topbar nav { gap: 16px; }
  .post-card { padding: 24px 22px 26px; }
  
  .post-title { font-size: var(--mz-text-xl); }
  .article-head h1 { font-size: var(--mz-text-2xl); }
  .article-body { font-size: var(--mz-text-md); }
  .portrait-link { max-width: 200px; }
}


/* =============================================================
   Marcel Zimmer Design System - Tokens
   Black · White · Red. Swiss-influenced, editorial, typographic.
   ============================================================= */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/fonts/inter-900.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/jetbrains-mono-500.woff2') format('woff2'); }


:root {
  /* ---------- Color - core ---------- */
  --mz-ink:        #000000;
  --mz-paper:     #FFFFFF;
  --mz-signal:    #FF0000;  /* the only accent */

  /* ---------- Color - neutrals (minimal set) ---------- */
  --mz-wash:      #F4F4F4;  /* subtle surface */
  --mz-hairline:  #E5E5E5;  /* 1px divider */
  --mz-mute:      #737373;  /* caption text */
  --mz-scrim:     rgba(0, 0, 0, 0.6); /* modal scrim */

  /* ---------- Color - semantic ---------- */
  --mz-fg:             var(--mz-ink);
  --mz-fg-muted:       var(--mz-mute);
  --mz-fg-inverse:     var(--mz-paper);
  --mz-bg:             var(--mz-paper);
  --mz-bg-subtle:      var(--mz-wash);
  --mz-bg-inverse:     var(--mz-ink);
  --mz-border:         var(--mz-ink);
  --mz-border-subtle:  var(--mz-hairline);
  --mz-accent:         var(--mz-signal);
  --mz-focus:          var(--mz-signal);

  --mz-state-success:  var(--mz-ink);   /* status is expressed with copy, not color */
  --mz-state-warning:  var(--mz-ink);
  --mz-state-error:    var(--mz-signal);
  --mz-state-info:     var(--mz-ink);

  /* ---------- Type - families ----------
     Inter (Google Fonts) is the canonical display + body face.
     JetBrains Mono (Google Fonts) is the canonical mono.
     Both free, both loaded at the top of this file.
  */
  --mz-font-display: 'Inter', Helvetica, Arial, sans-serif;
  --mz-font-body:    'Inter', Helvetica, Arial, sans-serif;
  --mz-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ---------- Type - scale ---------- */
  --mz-text-2xs:  11px;
  --mz-text-xs:   12px;
  --mz-text-sm:   14px;
  --mz-text-md:   16px;  /* body default */
  --mz-text-lg:   18px;
  --mz-text-xl:   22px;
  --mz-text-2xl:  28px;
  --mz-text-3xl:  40px;
  --mz-text-4xl:  56px;
  --mz-text-5xl:  80px;
  --mz-text-6xl:  120px;
  --mz-text-7xl:  180px; /* hero, rare */

  /* ---------- Type - weights ---------- */
  --mz-weight-regular:  400;
  --mz-weight-medium:   500;
  --mz-weight-semibold: 600;
  --mz-weight-bold:     700;
  --mz-weight-black:    900;

  /* ---------- Type - tracking ---------- */
  --mz-track-display: -0.03em;
  --mz-track-body:    -0.01em;
  --mz-track-label:    0.08em;  /* for ALL-CAPS labels */
  --mz-track-mono:     0em;

  /* ---------- Type - leading ---------- */
  --mz-lead-display: 1.00;
  --mz-lead-tight:   1.10;
  --mz-lead-snug:    1.25;
  --mz-lead-body:    1.45;
  --mz-lead-loose:   1.65;

  /* ---------- Spacing scale (8px base) ---------- */
  --mz-space-0:   0px;
  --mz-space-1:   4px;
  --mz-space-2:   8px;
  --mz-space-3:  12px;
  --mz-space-4:  16px;
  --mz-space-5:  24px;
  --mz-space-6:  32px;
  --mz-space-7:  48px;
  --mz-space-8:  64px;
  --mz-space-9:  96px;
  --mz-space-10:128px;
  --mz-space-11:192px;

  /* ---------- Radii (kept minimal) ---------- */
  --mz-radius-none: 0px;
  --mz-radius-sm:   2px;  /* inputs, buttons */
  --mz-radius-md:   4px;  /* modals, rare */
  /* No pills. No 999px. */

  /* ---------- Borders ---------- */
  --mz-border-hair:    1px solid var(--mz-border-subtle);
  --mz-border-strong:  1px solid var(--mz-border);
  --mz-border-accent:  1px solid var(--mz-accent);

  /* ---------- Shadows (used sparingly - modals only) ---------- */
  --mz-shadow-none:   none;
  --mz-shadow-modal:  0 12px 40px rgba(0, 0, 0, 0.12);

  /* ---------- Motion ---------- */
  --mz-dur-instant:  80ms;
  --mz-dur-fast:    150ms;
  --mz-dur-base:    240ms;
  --mz-dur-slow:    400ms;
  --mz-ease-enter:  cubic-bezier(0.2, 0, 0, 1);
  --mz-ease-exit:   cubic-bezier(0.4, 0, 1, 1);
  --mz-ease-linear: linear;

  /* ---------- Layout ---------- */
  --mz-grid-cols:      12;
  --mz-grid-gutter:    24px;
  --mz-grid-margin:    80px;
  --mz-container-max:  1440px;
  --mz-content-max:    954px;  /* entspricht 9 von 12 Spalten im Blogpost-Grid */
}

/* =============================================================
   Base element styles - "semantic" tokens as classes.
   Use .mz-h1, .mz-body, etc., or the raw tag inside .mz-prose.
   ============================================================= */

.mz-display,
.mz-h0 {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-7xl);
  font-weight: var(--mz-weight-black);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-display);
  color: var(--mz-fg);
}

.mz-h1 {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-5xl);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-display);
  color: var(--mz-fg);
}

.mz-h2 {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-3xl);
  font-weight: var(--mz-weight-bold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-tight);
  color: var(--mz-fg);
}

.mz-h3 {
  font-family: var(--mz-font-display);
  font-size: var(--mz-text-2xl);
  font-weight: var(--mz-weight-semibold);
  letter-spacing: var(--mz-track-display);
  line-height: var(--mz-lead-tight);
  color: var(--mz-fg);
}

.mz-h4 {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-xl);
  font-weight: var(--mz-weight-semibold);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-snug);
  color: var(--mz-fg);
}

.mz-lede {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-xl);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-snug);
  color: var(--mz-fg);
}

.mz-body {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-md);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-body);
  color: var(--mz-fg);
}

.mz-small {
  font-family: var(--mz-font-body);
  font-size: var(--mz-text-sm);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-body);
  line-height: var(--mz-lead-body);
  color: var(--mz-fg-muted);
}

.mz-caption {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-mono);
  line-height: var(--mz-lead-snug);
  color: var(--mz-fg-muted);
}

.mz-label {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-xs);
  font-weight: var(--mz-weight-medium);
  letter-spacing: var(--mz-track-label);
  line-height: var(--mz-lead-snug);
  text-transform: uppercase;
  color: var(--mz-fg);
}

.mz-mono {
  font-family: var(--mz-font-mono);
  font-size: var(--mz-text-sm);
  font-weight: var(--mz-weight-regular);
  letter-spacing: var(--mz-track-mono);
  line-height: var(--mz-lead-body);
  color: var(--mz-fg);
}

/* ---------- Link ----------
   Default: clearly a link - ink text with a subtle grey underline.
   Hover:   text + underline switch to signal red.
   Visited: muted grey, still underlined.
*/
.mz-link {
  color: var(--mz-fg);
  text-decoration: underline;
  text-decoration-color: var(--mz-mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--mz-dur-fast) var(--mz-ease-linear),
              text-decoration-color var(--mz-dur-fast) var(--mz-ease-linear);
}
.mz-link:hover {
  color: var(--mz-signal);
  text-decoration-color: var(--mz-signal);
}
.mz-link:visited {
  color: var(--mz-mute);
  text-decoration-color: var(--mz-mute);
}
.mz-link:focus-visible {
  outline: 2px solid var(--mz-focus);
  outline-offset: 2px;
}

/* ---------- Focus ring default ---------- */
.mz-focusable:focus-visible {
  outline: 2px solid var(--mz-focus);
  outline-offset: 2px;
}

/* ---------- Utility: red dot ---------- */
.mz-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: var(--mz-signal);
  vertical-align: middle;
}