:root { color-scheme: dark; }

@font-face {
  font-family: "Jost*";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jost-400-book.woff2") format("woff2");
}
@font-face {
  font-family: "Jost*";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jost-500-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Jost*";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/jost-600-semi.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Fraunces-VF-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/Fraunces-VF-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html,
body {
  margin: 0;
  font-family: "Jost*", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0f1115;
  color: #e5e7eb;
  line-height: 1.55;
}

a { color: #93c5fd; }

address { font-style: normal; color: #9ca3af; }

/* Landing-Seite: kein Scrollen, exakt Viewport-Hoehe */
html:has(body.landing),
body.landing {
  height: 100%;
  overflow: hidden;
}

.landing {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.stage {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* LeifuTech-Block (Live-Text)
   Position-Anker (top/left) ist KONSTANT 50%/50% - nur das transform
   wird animiert. Bewegung laeuft ueber translate mit vw/dvh; der
   Footer-Offset wird im calc abgezogen (Stage = Viewport minus Footer).
   contain:layout isoliert font-size-/margin-Reflows der Kinder auf den
   Block. KEIN will-change: damit der Block nicht permanent auf einem
   eigenen GPU-Layer liegt, der pro Frame wegen der Variable-Font-Glyphen
   neu rastert werden muss - genau das hatte zuvor zu Ruckeln gefuehrt. */
.leifu-block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0, 0) translate(-50%, -50%);
  width: max-content;
  max-width: 90vw;
  text-align: center;
  outline: none;
  cursor: default;
  z-index: 5;
  contain: layout;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
}

.leifu-block h1 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4.2vw, 2.4rem);
  margin: 0 0 0.5rem;
  font-weight: 450;
  font-variation-settings: "opsz" 96, "SOFT" 50, "WONK" 0, "wght" 450;
  letter-spacing: -0.005em;
  line-height: 1.05;
  white-space: nowrap;
  transition:
    font-size 480ms cubic-bezier(0.42, 0, 0.58, 1),
    margin 480ms cubic-bezier(0.42, 0, 0.58, 1),
    color 240ms ease;
}

.leifu-block .sub {
  color: #9ca3af;
  font-size: 0.95rem;
  margin: 0 0 0.4rem;
  transition:
    font-size 480ms cubic-bezier(0.42, 0, 0.58, 1),
    margin 480ms cubic-bezier(0.42, 0, 0.58, 1);
}

.leifu-block .lead {
  color: #9ca3af;
  margin: 0 auto;
  max-width: 38ch;
  font-size: 1rem;
  transition: font-size 480ms cubic-bezier(0.42, 0, 0.58, 1);
}

/* Projekt-Hover-Felder: Inline-Klammern, magnetisch.
   Je naeher der Mauszeiger der jeweiligen Ecke kommt, desto staerker
   spreizen sich die Klammern und desto heller wird die Schrift. */
.project-tile {
  position: absolute;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(229, 231, 235, 0.6);
  background: none;
  border: none;
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  outline: none;
  z-index: 2;
  white-space: nowrap;
  transition:
    color 280ms ease,
    letter-spacing 320ms ease,
    opacity 240ms ease;
}

.project-tile::before,
.project-tile::after {
  color: rgba(147, 197, 253, 0.35);
  display: inline-block;
  transition:
    color 280ms ease,
    margin 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.project-tile::before { content: "⌜"; margin-right: 0.4rem; }
.project-tile::after  { content: "⌟"; margin-left: 0.4rem; }

.project-tile:focus-visible {
  color: #f9fafb;
  letter-spacing: 0.04em;
  outline: 1px dashed rgba(147, 197, 253, 0.55);
  outline-offset: 6px;
  border-radius: 4px;
}
.project-tile:focus-visible::before,
.project-tile:focus-visible::after { color: #93c5fd; }
.project-tile:focus-visible::before { margin-right: 0.65rem; }
.project-tile:focus-visible::after  { margin-left: 0.65rem; }

.project-tile[data-pos="tl"] { top: 1.5rem; left: 1.5rem; }
.project-tile[data-pos="tr"] { top: 1.5rem; right: 1.5rem; }
.project-tile[data-pos="bl"] { bottom: 1.5rem; left: 1.5rem; }
.project-tile[data-pos="br"] { bottom: 1.5rem; right: 1.5rem; }

/* Magnetischer Sog: --proximity (0..1) und data-near (tl|tr|bl|br) werden
   per JS auf <body> gesetzt, abhaengig davon wie nah die Maus an der
   naechsten Ecke ist. Nur die Klammern der naechsten Ecke reagieren. */
body[data-near="tl"] .project-tile[data-pos="tl"],
body[data-near="tr"] .project-tile[data-pos="tr"],
body[data-near="bl"] .project-tile[data-pos="bl"],
body[data-near="br"] .project-tile[data-pos="br"] {
  color: rgba(229, 231, 235, calc(0.6 + 0.4 * var(--proximity, 0)));
  letter-spacing: calc(0.02em + 0.025em * var(--proximity, 0));
}
body[data-near="tl"] .project-tile[data-pos="tl"]::before,
body[data-near="tr"] .project-tile[data-pos="tr"]::before,
body[data-near="bl"] .project-tile[data-pos="bl"]::before,
body[data-near="br"] .project-tile[data-pos="br"]::before {
  color: rgba(147, 197, 253, calc(0.35 + 0.55 * var(--proximity, 0)));
  margin-right: calc(0.4rem + 0.3rem * var(--proximity, 0));
}
body[data-near="tl"] .project-tile[data-pos="tl"]::after,
body[data-near="tr"] .project-tile[data-pos="tr"]::after,
body[data-near="bl"] .project-tile[data-pos="bl"]::after,
body[data-near="br"] .project-tile[data-pos="br"]::after {
  color: rgba(147, 197, 253, calc(0.35 + 0.55 * var(--proximity, 0)));
  margin-left: calc(0.4rem + 0.3rem * var(--proximity, 0));
}

/* Spotlight in der naechsten Ecke. --cx/--cy = Eckposition (px),
   --proximity steuert die Sichtbarkeit. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    360px 360px at var(--cx, 50%) var(--cy, 50%),
    rgba(147, 197, 253, 0.22),
    rgba(147, 197, 253, 0.06) 45%,
    transparent 75%
  );
  opacity: var(--proximity, 0);
  transition: opacity 220ms ease;
}

body.project-open .stage::before { opacity: 0; }

/* Bubble (Projekt-Detail) */
.project-bubble {
  position: fixed;
  inset: 0;
  /* Verlauf-Mitte deckungsgleich mit Clip-Mitte (jeweils die aktive Ecke).
     So waechst/schrumpft der sichtbare Bereich konzentrisch durch die
     Farbabstufungen des Verlaufs, statt dass der Clip-Rand ueber einen
     statischen Hellpunkt drueberlaeuft (= Trichter-Impuls).
     Die Farben sind dezent: am Eck-Endpunkt nur leicht ueber dem Seiten-
     hintergrund, damit der Kollaps nicht "voll blau" wirkt. */
  background:
    radial-gradient(
      circle at var(--bx, 50%) var(--by, 50%),
      rgba(32, 39, 56, 0.95) 0%,
      rgba(20, 24, 32, 0.97) 55%,
      rgba(15, 17, 21, 1) 92%
    );
  visibility: hidden;
  pointer-events: none;
  z-index: 3;
  clip-path: circle(0% at var(--bx, 50%) var(--by, 50%));
  transition:
    clip-path 540ms cubic-bezier(0.42, 0, 0.58, 1),
    visibility 0s linear 540ms;
}

.project-bubble[data-project="leifu"]          { --bx: 0%;   --by: 0%;   }
.project-bubble[data-project="ki"]             { --bx: 100%; --by: 0%;   }
.project-bubble[data-project="app"]            { --bx: 0%;   --by: 100%; }
.project-bubble[data-project="premium-crypto"] { --bx: 100%; --by: 100%; }

body[data-open="leifu"]          .project-bubble[data-project="leifu"],
body[data-open="ki"]             .project-bubble[data-project="ki"],
body[data-open="app"]            .project-bubble[data-project="app"],
body[data-open="premium-crypto"] .project-bubble[data-project="premium-crypto"] {
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(150% at var(--bx) var(--by));
  transition:
    clip-path 540ms cubic-bezier(0.42, 0, 0.58, 1),
    visibility 0s linear 0s;
}

.bubble-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(640px, calc(100vw - 4rem));
  max-height: calc(100vh - 4rem);
  padding: 2rem 2.25rem;
  text-align: left;
  opacity: 0;
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(0.42, 0, 0.58, 1);
}

body[data-open="leifu"]          .project-bubble[data-project="leifu"]          .bubble-inner,
body[data-open="ki"]             .project-bubble[data-project="ki"]             .bubble-inner,
body[data-open="app"]            .project-bubble[data-project="app"]            .bubble-inner,
body[data-open="premium-crypto"] .project-bubble[data-project="premium-crypto"] .bubble-inner {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 320ms ease 220ms,
    transform 380ms cubic-bezier(0.42, 0, 0.58, 1) 200ms;
}

/* Inhalts-Versatz pro Projekt; app bleibt zentrierte Referenz. */
body[data-open="leifu"] .project-bubble[data-project="leifu"] .bubble-inner {
  top: 40%;
}
body[data-open="ki"] .project-bubble[data-project="ki"] .bubble-inner {
  top: 40%;
  left: 60%;
}
.project-bubble[data-project="premium-crypto"] .bubble-inner {
  left: auto;
  right: 3rem;
  width: min(500px, calc(100vw - 6rem));
  transform: translate(0, -50%) scale(0.96);
}

body[data-open="premium-crypto"] .project-bubble[data-project="premium-crypto"] .bubble-inner {
  transform: translate(0, -50%) scale(1);
}

body[data-open="premium-crypto"] .project-bubble[data-project="premium-crypto"] .bubble-header {
  justify-content: flex-end;
}

body[data-open="premium-crypto"] .project-bubble[data-project="premium-crypto"] h2 {
  text-align: left;
}


/* Subpage-Header: Pagination + Kategorie */
.bubble-inner .bubble-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #93c5fd;
  font-weight: 500;
}

.bubble-inner .bubble-num {
  font-variant-numeric: tabular-nums;
}

.bubble-inner .bubble-sep {
  color: #374151;
  font-weight: 400;
}

.bubble-inner .bubble-cat {
  color: #9ca3af;
}

.bubble-inner h2 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4.4vw, 2.7rem);
  margin: 0 0 0.7rem;
  color: #f9fafb;
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0, "wght" 500;
  letter-spacing: -0.005em;
  line-height: 1.08;
}

.bubble-inner .lede {
  color: #e5e7eb;
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 56ch;
}

.bubble-inner .bubble-rule {
  border: none;
  border-top: 1px solid #1f2937;
  margin: 1rem 0 1.25rem;
}

/* Zweispaltige Sektionen: Nummer | Inhalt */
.bubble-inner .bubble-section {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0 1rem;
  margin: 0 0 1.15rem;
}

.bubble-inner .bubble-section:last-of-type {
  margin-bottom: 0;
}

.bubble-inner .sec-num {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  padding-top: 0.18rem;
  align-self: start;
}

.bubble-inner h3 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cbd5e1;
  margin: 0 0 0.4rem;
  font-weight: 600;
}

.bubble-inner .bubble-section > h3,
.bubble-inner .bubble-section > p,
.bubble-inner .bubble-section > ul {
  grid-column: 2;
}

.bubble-inner p {
  color: #d1d5db;
  margin: 0.35rem 0;
  max-width: 56ch;
  font-size: 0.97rem;
  line-height: 1.55;
}

.bubble-inner .bubble-section > p {
  margin: 0;
}

.bubble-inner ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 56ch;
}

.bubble-inner li {
  position: relative;
  padding-left: 1rem;
  color: #d1d5db;
  font-size: 0.97rem;
  line-height: 1.55;
  margin: 0.2rem 0;
}

.bubble-inner li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #93c5fd;
}

/* Subpage-Footer: Disclaimer / Hinweis */
.bubble-inner .bubble-foot {
  margin-top: 1.3rem;
  padding-top: 0.8rem;
  border-top: 1px solid #1f2937;
}

.bubble-inner .bubble-foot p {
  font-size: 0.8rem;
  color: #9ca3af;
  margin: 0;
  max-width: 56ch;
}

/* Leifu-Peek: aufrecht in der linken unteren Ecke versteckt. Bild ist
   horizontal nach links UND vertikal nach unten verschoben, sodass nur
   die rechte Seite des Haars (oberer rechter Bildbereich) am linken
   Rand reinguckt und die Schultern unter dem Viewport-Boden liegen.
   Beim Hover kippt Leifu im Uhrzeigersinn um seine "linke Hueftecke"
   (transform-origin 0% 100%) ins Bild rein. */
.leifu-peek {
  position: fixed;
  left: 0;
  bottom: 0;
  transform-origin: 0% 100%;
  transform: translate(-72%, 32%) rotate(0deg);
  width: clamp(140px, 20vw, 380px);
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.55));
  transition:
    transform 720ms cubic-bezier(0.34, 1.15, 0.42, 1),
    opacity 420ms ease,
    visibility 0s linear 720ms;
}

.leifu-peek img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

body[data-open="leifu"] .leifu-peek {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 720ms cubic-bezier(0.34, 1.15, 0.42, 1),
    opacity 420ms ease 260ms,
    visibility 0s linear 0s;
}

body[data-open="leifu"] .leifu-peek:hover,
body[data-open="leifu"] .leifu-peek:focus-visible {
  transform: translate(-12%, 4%) rotate(14deg);
}

/* PROJECT-OPEN: Tiles ausblenden */
body.project-open .project-tile {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* LeifuTech-Block: klein in der gegenueberliegenden Ecke (ueber der Bubble). */
body.project-open .leifu-block {
  max-width: 28ch;
  cursor: pointer;
  z-index: 5;
}

body.project-open .leifu-block h1 { font-size: 1.15rem; margin: 0 0 0.15rem; color: #e5e7eb; }
body.project-open .leifu-block .sub { font-size: 0.78rem; margin: 0 0 0.35rem; }
body.project-open .leifu-block .lead { font-size: 0.78rem; max-width: none; margin: 0; }

body.project-open .leifu-block:hover h1,
body.project-open .leifu-block:focus-visible h1 { color: #f9fafb; }

/* Open-States: top/left bleiben fix bei 50%/50%, das transform schiebt
   den Block in die jeweilige Ziel-Ecke. Footer-Halbhoehe ~1.2rem wird
   bei der vertikalen Achse abgezogen, damit der Block in der Stage-Ecke
   (nicht in der Viewport-Ecke) landet. */
body[data-open="leifu"] .leifu-block { /* tl -> br */
  transform:
    translate(calc(50vw - 2.5rem), calc(50dvh - 2.5rem - 1.2rem))
    translate(-100%, -100%);
  text-align: right;
}
body[data-open="ki"] .leifu-block { /* tr -> bl */
  transform:
    translate(calc(-50vw + 2.5rem), calc(50dvh - 2.5rem - 1.2rem))
    translate(0, -100%);
  text-align: left;
}
body[data-open="app"] .leifu-block { /* bl -> tr */
  transform:
    translate(calc(50vw - 2.5rem), calc(-50dvh + 2.5rem + 1.2rem))
    translate(-100%, 0);
  text-align: right;
}
body[data-open="premium-crypto"] .leifu-block { /* br -> tl */
  transform:
    translate(calc(-50vw + 2.5rem), calc(-50dvh + 2.5rem + 1.2rem))
    translate(0, 0);
  text-align: left;
}

/* Footer */
.landing > footer {
  padding: 0.85rem 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  border-top: 1px solid #1f2937;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  background: rgba(15, 17, 21, 0.6);
}

.landing > footer a {
  color: #9ca3af;
  text-decoration: none;
  margin: 0 0.75rem;
}

.landing > footer a:hover { color: #e5e7eb; }

/* Schmale Fenster/Tablet: Tile-Labels umbrechen statt rechts abschneiden */
@media (max-width: 820px) {
  .project-tile {
    white-space: normal;
    max-width: 40vw;
    line-height: 1.2;
  }
  .project-tile[data-pos="tr"],
  .project-tile[data-pos="br"] { text-align: right; }
}

/* Mobile */
@media (max-width: 520px) {
  .leifu-block { width: min(32ch, 92vw); }
  .leifu-block h1 { font-size: clamp(1.4rem, 6.5vw, 1.85rem); white-space: normal; }
  .leifu-block .sub { font-size: 0.85rem; margin-bottom: 1rem; }
  .leifu-block .lead { font-size: 0.9rem; }

  .project-tile {
    font-size: 0.72rem;
    padding: 0.85rem 0.85rem;
    gap: 0.4rem;
    max-width: 42vw;
    min-height: 44px;
    display: inline-block;
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .project-tile::before { margin-right: 0.2rem; }
  .project-tile::after { margin-left: 0.2rem; }

  .project-tile[data-pos="tl"],
  .project-tile[data-pos="tr"] { top: 1rem; }
  .project-tile[data-pos="bl"],
  .project-tile[data-pos="br"] { bottom: 1rem; }
  .project-tile[data-pos="tl"],
  .project-tile[data-pos="bl"] { left: 1rem; text-align: left; }
  .project-tile[data-pos="tr"],
  .project-tile[data-pos="br"] { right: 1rem; text-align: right; }

  /* Eck-Hero auf Mobile entschlacken: nur der Schriftzug bleibt, Adresse
     raus (steht im Footer/Impressum), damit nichts mit dem Bubble-Inhalt
     ueberlappt. Schriftzug darf umbrechen. */
  body.project-open .leifu-block {
    max-width: 58vw;
  }
  body.project-open .leifu-block h1 { font-size: 0.98rem; white-space: normal; }
  body.project-open .leifu-block .sub,
  body.project-open .leifu-block .lead { display: none; }

  /* Bubble-Inhalt auf Mobile zentriert und volle Breite: die Desktop-
     Versaetze (left:60%, top:40%, right:3rem) wuerden den Text aus dem
     Bild schieben, daher hier zuruecksetzen. */
  .project-bubble .bubble-inner {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 2rem) !important;
    padding: 1.25rem 1.1rem;
    transform: translate(-50%, -50%) scale(0.96) !important;
  }
  body[data-open] .project-bubble:not([aria-hidden="true"]) .bubble-inner {
    transform: translate(-50%, -50%) scale(1) !important;
  }
  .bubble-inner h2 {
    font-size: clamp(1.5rem, 7vw, 2rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .bubble-inner .lede { font-size: 1rem; }
  .bubble-inner .lede,
  .bubble-inner p,
  .bubble-inner ul,
  .bubble-inner li {
    max-width: 100%;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Sektionen mobil einspaltig */
  .bubble-inner .bubble-section {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0.95rem;
  }
  .bubble-inner .bubble-section > h3,
  .bubble-inner .bubble-section > p,
  .bubble-inner .bubble-section > ul {
    grid-column: 1;
  }
  .bubble-inner .sec-num {
    padding-top: 0;
    margin-bottom: 0.15rem;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .leifu-block,
  .leifu-block h1,
  .leifu-block .sub,
  .leifu-block .lead,
  .project-tile,
  .project-tile::before,
  .project-tile::after,
  .stage::before,
  .project-bubble,
  .bubble-inner {
    transition-duration: 1ms !important;
  }
}

/* Article-Seiten (Impressum / Datenschutz) - normales Scroll-Verhalten */
.article {
  max-width: 48rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.article h1 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4.8vw, 2.9rem);
  font-weight: 500;
  font-variation-settings: "opsz" 72, "SOFT" 50, "WONK" 0, "wght" 500;
  letter-spacing: -0.005em;
  line-height: 1.12;
  margin: 0 0 1.5rem;
}

.article h2 {
  font-size: 1.05rem;
  margin: 2rem 0 0.5rem;
  color: #f3f4f6;
}

.article p,
.article li {
  color: #9ca3af;
  margin: 0.5rem 0;
}

.article ul { padding-left: 1.25rem; }

.article nav { margin-bottom: 2rem; }

.article nav a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.9rem;
}

.article nav a:hover { color: #e5e7eb; }

.article footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #1f2937;
  font-size: 0.85rem;
}

.article footer a {
  color: #9ca3af;
  text-decoration: none;
  margin-right: 1rem;
}

.article footer a:hover { color: #e5e7eb; }