:root {
  --ink: #14201a;
  --signal: #7fd41a;
  --slate: #5b665c;
  --mist: #e7eae3;
  --paper: #fafaf7;
  --ink-06: rgba(20, 32, 26, 0.06);
  --ink-10: rgba(20, 32, 26, 0.10);
  --ink-14: rgba(20, 32, 26, 0.14);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --brand-max: 1320px;
  --brand-gutter: clamp(20px, 4.5vw, 72px);
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal); color: var(--ink); }
a:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 5px; }

/* The supplied Lichen mark, reused from the homepage identity. */
.topbar .mark,
.wordmark::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='74 74 138 110'%3E%3Crect x='116' y='86' width='26' height='26' rx='6' fill='%2314201A'/%3E%3Crect x='86' y='116' width='26' height='26' rx='6' fill='%2314201A'/%3E%3Crect x='116' y='116' width='26' height='26' rx='6' fill='%2314201A'/%3E%3Crect x='146' y='116' width='26' height='26' rx='6' fill='%2314201A'/%3E%3Crect x='116' y='146' width='26' height='26' rx='6' fill='%2314201A'/%3E%3Crect x='146' y='146' width='26' height='26' rx='6' fill='%2314201A'/%3E%3Crect x='182' y='86' width='18' height='18' rx='4' fill='%237FD41A'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Product, method and about pages. */
.shell { width: 100%; max-width: var(--brand-max); padding-inline: var(--brand-gutter); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.86);
  border-bottom: 1px solid var(--ink-06);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}

.topbar .shell { min-height: 74px; }
.topbar .brand { gap: 11px; color: var(--ink); font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.topbar .mark { display: block; width: 25px; height: 25px; flex: 0 0 auto; }
.topbar .mark i { display: none; }
.topbar .nav { gap: 22px; color: var(--slate); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; }
.topbar .nav a:hover { color: var(--ink); }

.topbar .button {
  padding: 9px 17px;
  border: 1px solid var(--ink-14);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 400;
}

.topbar .button:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.hero {
  padding: clamp(96px, 11vw, 148px) 0 clamp(78px, 9vw, 120px);
  border-bottom-color: var(--ink-06);
  background: linear-gradient(145deg, var(--paper) 58%, rgba(127, 212, 26, 0.12));
}

.hero h1, h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.025em; }
.hero h1 { font-size: clamp(42px, 6.6vw, 88px); letter-spacing: -0.045em; }
.eyebrow, .label { color: var(--slate); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.20em; }
.eyebrow { display: inline-flex; align-items: center; gap: 11px; }
.eyebrow::before { width: 24px; height: 1px; background: var(--slate); content: ''; opacity: 0.55; }
.lead { color: var(--slate); line-height: 1.55; }
.button { background: var(--signal); color: var(--ink); font-family: var(--body); font-size: 16px; font-weight: 600; }
.button:hover { background: var(--signal); box-shadow: 0 14px 34px -12px rgba(127, 212, 26, 0.75); }
.cta .button { background: var(--ink); color: var(--paper); box-shadow: none; }
.section { padding-block: clamp(82px, 10vw, 132px); }
.section h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 500; }
.section.alt { background: var(--ink); }
.card, .note, table { border-color: var(--ink-10); }

.footer {
  border-top: 1px solid var(--ink-10);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.footer nav { justify-content: flex-end; }
.footer a, .footer span { color: var(--slate); }

/* Wissen overview and the six long-form articles. */
header:not(.topbar) {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--ink-06);
  background: rgba(250, 250, 247, 0.86);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}

.header-inner {
  width: 100%;
  max-width: var(--brand-max);
  min-height: 74px;
  margin: 0 auto;
  padding: 0 var(--brand-gutter);
  align-items: center;
}

.wordmark { display: flex; align-items: center; gap: 11px; color: var(--ink); font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.wordmark::before { display: block; width: 25px; height: 25px; flex: 0 0 auto; content: ''; }
.wordmark span { margin-left: 2px; color: var(--slate); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; }
.header-nav { display: flex; gap: 22px; color: var(--slate); font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; }
.header-nav a { color: var(--slate); text-decoration: none; }
.header-nav a:hover { background: transparent; color: var(--ink); }

body > main { padding-top: clamp(64px, 8vw, 100px); padding-bottom: clamp(76px, 9vw, 120px); }
body > main > .eyebrow, article > .eyebrow { display: inline-flex; align-items: center; gap: 11px; color: var(--slate); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.20em; }
body > main > h1, article > h1 { color: var(--ink); font-family: var(--display); font-size: clamp(38px, 6vw, 54px); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; }
.standfirst { color: var(--slate); font-size: clamp(18px, 2vw, 21px); line-height: 1.55; }
.article-list { gap: 14px; }

.article-card, .tldr, .toc, .akte, .pitfall, .ncard, .check, .download, .faq details {
  border-color: var(--ink-10);
  background: #fff;
}

.article-card h2, article h2, article h3, .download .dt b, .faq summary { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
.article-card:hover { border-color: var(--signal); background: #fff; }
.article-card p, .byline, .crumb, .coming { color: var(--slate); }

body > footer:not(.footer) { margin-top: 0; border-top: 1px solid var(--ink-10); background: var(--paper); }

.footer-inner {
  width: 100%;
  max-width: var(--brand-max);
  margin: 0 auto;
  padding: 38px var(--brand-gutter) 54px;
  color: var(--slate);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.footer-inner a { color: var(--slate); }

@media (max-width: 850px) {
  .topbar .nav > a:not(.button) { display: none; }
  .footer nav { justify-content: flex-start; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .wordmark span, .header-nav a:not(:last-child) { display: none; }
  .header-nav { gap: 12px; font-size: 11.5px; }
  .header-inner, .topbar .shell { min-height: 66px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}