@layer reset, base, layout, components, utilities;

@font-face {
  font-family: 'Rubik';
  src: url('/fonts/Rubik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/fonts/SpaceMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('/fonts/SpaceMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

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

  body {
    min-height: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul,
  ol {
    list-style: none;
  }
}

@layer base {
  :root {
    color-scheme: light;

    --font-body: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-title: 'Rubik', system-ui, sans-serif;

    --color-bg-base: oklch(0.985 0.012 90);
    --color-surface-base: oklch(1 0 0);
    --color-text-base: oklch(0.22 0.015 85);
    --color-accent-base: oklch(0.55 0.22 275);

    --color-bg: var(--color-bg-base);
    --color-surface: var(--color-surface-base);
    --color-surface-muted: color-mix(in oklch, var(--color-bg), var(--color-text) 6%);
    --color-code-bg: color-mix(in oklch, var(--color-bg), var(--color-text) 7%);
    --color-text: var(--color-text-base);
    --color-muted: color-mix(in oklch, var(--color-text), var(--color-bg) 38%);
    --color-subtle: color-mix(in oklch, var(--color-text), var(--color-bg) 55%);
    --color-border: color-mix(in oklch, var(--color-text), var(--color-bg) 84%);
    --color-accent: var(--color-accent-base);
    --color-accent-contrast: oklch(0.99 0 0);
    --color-danger: oklch(0.52 0.2 25);
    --color-warning: oklch(0.58 0.15 75);

    --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
    --text-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem);
    --text-base: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
    --text-lg: clamp(1.12rem, 1.04rem + 0.4vw, 1.28rem);
    --text-xl: clamp(1.35rem, 1.2rem + 0.75vw, 1.7rem);
    --text-2xl: clamp(1.7rem, 1.45rem + 1.25vw, 2.25rem);
    --text-3xl: clamp(2.1rem, 1.7rem + 2vw, 3rem);
    --text-4xl: clamp(2.6rem, 1.9rem + 3.5vw, 4.5rem);

    --font-weight-bold: 700;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --content-width: 70rem;
    --content-width-narrow: 58rem;
    --content-width-wide: 74rem;
    --content-padding: clamp(1rem, 5vw, 3rem);

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.875rem;
    --radius-full: 9999px;

    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --color-bg-base: oklch(0.16 0.01 90);
      --color-surface-base: oklch(0.19 0.01 90);
      --color-text-base: oklch(0.93 0.01 90);
      --color-accent-base: oklch(0.78 0.12 275);
      --color-accent-contrast: oklch(0.16 0.01 90);
      --color-danger: oklch(0.78 0.13 25);
      --color-warning: oklch(0.8 0.11 75);
    }
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background: var(--color-bg);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    text-wrap: balance;
  }

  a {
    text-underline-offset: 0.18em;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
  }

  ::selection {
    color: var(--color-accent-contrast);
    background: var(--color-accent);
  }
}

@layer layout {
  .page-container {
    width: min(var(--content-width), calc(100% - 2 * var(--content-padding)));
    margin-inline: auto;
  }

  .page-container--narrow {
    width: min(var(--content-width-narrow), calc(100% - 2 * var(--content-padding)));
  }

  .page-container--wide {
    width: min(var(--content-width-wide), calc(100% - 2 * var(--content-padding)));
  }
}

@layer components {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-6);
  }

  .logo-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
  }

  .logo-image {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .logo-text {
    display: grid;
    font-family: var(--font-title);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .menu-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .menu-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
  }

  .menu-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
  }

  .menu-icon--close,
  .nav-menu {
    display: none;
  }

  .nav-menu {
    position: fixed;
    inset: 5.5rem var(--content-padding) auto;
    z-index: 10;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .nav-list {
    display: grid;
    gap: var(--space-3);
  }

  .nav-link {
    display: block;
    padding: var(--space-2) 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
  }

  .nav-link:hover,
  .nav-link--active {
    color: var(--color-text);
  }

  .nav-link--active {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
  }

  .site-header:has(.menu-toggle:checked) .menu-icon--open {
    display: none;
  }

  .site-header:has(.menu-toggle:checked) .menu-icon--close,
  .site-header:has(.menu-toggle:checked) .nav-menu {
    display: block;
  }

  .site-footer {
    margin-block-start: var(--space-20);
    border-block-start: 1px solid var(--color-border);
  }

  .footer-inner {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-10);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .footer-links,
  .legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
  }

  .site-footer a {
    transition: color var(--transition-fast);
  }

  .site-footer a:hover {
    color: var(--color-text);
  }

  .home-page,
  .articles-page {
    display: grid;
    gap: var(--space-10);
  }

  .intro {
    max-width: 52rem;
    padding-block: var(--space-12) var(--space-4);
  }

  .eyebrow {
    margin-block-end: var(--space-3);
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .home-page h1,
  .podcast-page h1 {
    font-size: var(--text-4xl);
    letter-spacing: -0.05em;
  }

  .intro-text,
  .intro-copy {
    max-width: 44rem;
    margin-block-start: var(--space-5);
    color: var(--color-muted);
    font-size: var(--text-lg);
    text-wrap: pretty;
  }

  .section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .section-heading h2 {
    font-size: var(--text-xl);
  }

  .section-heading a,
  .page-header a,
  .buy-link,
  .book-section a {
    color: var(--color-accent);
    text-decoration: underline;
    transition: color var(--transition-fast);
  }

  .section-heading a,
  .page-header a {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .section-heading a:hover,
  .page-header a:hover {
    color: var(--color-text);
  }

  .articles-section,
  .articles-list {
    display: grid;
    gap: var(--space-6);
  }

  .article-card {
    position: relative;
    display: grid;
    overflow: clip;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast), translate var(--transition-fast);
  }

  .article-card:hover,
  .article-card:has(.article-link:focus-visible) {
    border-color: var(--color-accent);
    translate: 0 -1px;
  }

  .article-card-thumbnail {
    width: 100%;
    height: clamp(10rem, 50vw, 14rem);
    object-fit: cover;
  }

  .article-card-content {
    display: grid;
    align-content: center;
    gap: var(--space-2);
    padding: var(--space-5);
  }

  .article-date,
  .article-meta,
  .article-label,
  .course-label,
  .youtube-banner__label {
    color: var(--color-subtle);
    font-size: var(--text-xs);
  }

  .article-card-title {
    font-size: var(--text-lg);
  }

  .article-link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .article-link:focus-visible {
    outline: none;
  }

  .article-summary,
  .article-card-summary {
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-wrap: pretty;
  }

  .page-header {
    max-width: 50rem;
    padding-block: var(--space-10) var(--space-2);
  }

  .page-header h1,
  .book-page h1,
  .impressum-page h1,
  .privacy-page .page-title,
  .error-page h1,
  .article h1 {
    font-size: var(--text-3xl);
    letter-spacing: -0.04em;
  }

  .page-header p {
    color: var(--color-muted);
    font-size: var(--text-lg);
    text-wrap: pretty;
  }

  .podcast-page,
  .error-page {
    display: grid;
    gap: var(--space-8);
    padding-block: var(--space-10) var(--space-20);
    text-align: center;
  }

  .podcast-header {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
  }

  .podcast-logo {
    width: clamp(7rem, 20vw, 12rem);
    height: clamp(7rem, 20vw, 12rem);
    object-fit: contain;
  }

  .platform-list {
    display: grid;
    gap: var(--space-3);
    justify-self: center;
  }

  .platform-list a {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: border-color var(--transition-fast), color var(--transition-fast);
  }

  .platform-list a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  .book-page,
  .impressum-page {
    display: grid;
    gap: var(--space-10);
    padding-block: var(--space-10) var(--space-20);
  }

  .book-header {
    display: grid;
    gap: var(--space-6);
  }

  .book-image {
    width: min(100%, 16rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .book-description,
  .book-section p,
  .impressum-page p,
  .error-page p {
    color: var(--color-muted);
    text-wrap: pretty;
  }

  .book-description {
    margin-block-start: var(--space-4);
    font-size: var(--text-lg);
  }

  .buy-link {
    display: inline-block;
    margin-block-start: var(--space-5);
  }

  .book-section,
  .impressum-page section {
    display: grid;
    gap: var(--space-4);
  }

  .book-section h2,
  .impressum-page h2 {
    font-size: var(--text-xl);
  }

  .impressum-page {
    text-align: center;
  }

  .privacy-page {
    width: min(var(--content-width-narrow), calc(100% - 2 * var(--content-padding)));
    margin-block: var(--space-12) var(--space-20);
    margin-inline: auto;
    color: var(--color-muted);
    line-height: 1.85;
  }

  .privacy-page .page-title {
    margin-block-end: var(--space-8);
    color: var(--color-text);
  }

  .privacy-page .section-title-lg {
    margin-block: var(--space-10) var(--space-4);
    color: var(--color-text);
    font-size: var(--text-2xl);
  }

  .privacy-page .section-title-md {
    margin-block: var(--space-8) var(--space-3);
    color: var(--color-text);
    font-size: var(--text-xl);
  }

  .privacy-page .section-title-sm {
    margin-block: var(--space-5) var(--space-2);
    color: var(--color-text);
    font-size: var(--text-lg);
  }

  .privacy-page p + p,
  .privacy-page dd + dt {
    margin-block-start: var(--space-4);
  }

  .privacy-page a,
  #content a {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .privacy-page ul {
    list-style: disc;
    margin-inline-start: var(--space-6);
  }

  .error-page {
    place-content: center;
    min-height: 60vh;
  }

  .article {
    margin-block: var(--space-8) var(--space-20);
  }

  .article-header {
    display: grid;
    gap: var(--space-5);
    margin-block-end: var(--space-10);
  }

  .article-thumbnail {
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 18rem;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .article h1 {
    letter-spacing: -0.05em;
  }

  .youtube-banner,
  .infobox,
  .x-post,
  .course-ad,
  .related-article-link {
    display: grid;
    gap: var(--space-5);
    margin-block: var(--space-8);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .infobox {
    border-inline-start-width: 3px;
  }

  .infobox--info {
    border-inline-start-color: var(--color-accent);
  }

  .infobox--warning {
    border-inline-start-color: var(--color-warning);
  }

  .infobox--danger {
    border-inline-start-color: var(--color-danger);
  }

  .infobox h4,
  .youtube-banner h3,
  .course-ad h5,
  .related-article h5 {
    font-size: var(--text-lg);
  }

  .youtube-banner__link {
    position: relative;
    display: block;
    overflow: clip;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-md);
  }

  .youtube-banner__thumbnail,
  .course-thumbnail,
  .related-article .article-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .youtube-banner__play {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    color: var(--color-accent-contrast);
    background: var(--color-accent);
    border-radius: var(--radius-full);
    translate: -50% -50%;
  }

  .youtube-banner__thumbnail {
    height: 100%;
    transition: scale var(--transition-base), opacity var(--transition-base);
  }

  .youtube-banner__link:hover .youtube-banner__thumbnail {
    scale: 1.02;
    opacity: 0.82;
  }

  .course-content {
    display: grid;
    gap: var(--space-2);
  }

  .course-ad p,
  .infobox p,
  .infobox li,
  .x-post__content,
  #content :where(p, ul, ol, blockquote) {
    color: var(--color-muted);
  }

  .course-ad a,
  .related-article-link:hover,
  .x-post__link {
    color: var(--color-accent);
    text-decoration: underline;
  }

  .related-article-link {
    transition: border-color var(--transition-fast);
  }

  .related-article-link:hover {
    border-color: var(--color-accent);
  }

  .related-article,
  .course-ad {
    display: grid;
    gap: var(--space-5);
  }

  .x-post header {
    display: flex;
    gap: var(--space-4);
    align-items: center;
  }

  .x-post__author-image {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: var(--radius-full);
  }

  .x-post h3 {
    font-size: var(--text-base);
  }

  .x-post__content {
    font-style: italic;
  }

  .x-post__content p + p {
    margin-block-start: var(--space-4);
  }

  #content {
    font-size: var(--text-base);
    line-height: 1.85;
  }

  #content > * + * {
    margin-block-start: var(--space-6);
  }

  #content :where(h2, h3, h4) {
    max-width: 42rem;
    margin-block-start: var(--space-12);
    color: var(--color-text);
    letter-spacing: -0.03em;
  }

  #content h2 {
    font-size: var(--text-2xl);
  }

  #content h3 {
    font-size: var(--text-xl);
  }

  #content h4 {
    font-size: var(--text-lg);
  }

  #content :where(ul, ol),
  .infobox :where(ul, ol) {
    padding-inline-start: var(--space-6);
  }

  #content ul,
  .infobox ul {
    list-style: disc;
  }

  #content ol,
  .infobox ol {
    list-style: decimal;
  }

  #content li + li {
    margin-block-start: var(--space-3);
  }

  #content strong {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
  }

  #content :where(p, li) code {
    padding: 0.08em 0.35em;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.9em;
  }

  #content pre:has(code) {
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-5);
    overflow-x: auto;
    background: var(--color-code-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
  }

  #content pre code {
    font-family: var(--font-body);
    background: transparent;
  }

  #content pre.shiki {
    background: var(--color-code-bg) !important;
  }

  @media (prefers-color-scheme: dark) {
    #content .shiki span {
      color: var(--shiki-dark) !important;
      background-color: transparent !important;
      font-style: var(--shiki-dark-font-style) !important;
      font-weight: var(--shiki-dark-font-weight) !important;
      text-decoration: var(--shiki-dark-text-decoration) !important;
    }

    #content pre.shiki {
      color: var(--shiki-dark) !important;
      background: var(--color-code-bg) !important;
    }
  }

  #content blockquote {
    padding: var(--space-5);
    border-inline-start: 3px solid var(--color-accent);
    background: var(--color-surface);
    border-radius: var(--radius-md);
  }

  #content blockquote > * + * {
    margin-block-start: var(--space-4);
  }

  #content img {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 28rem;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  #content hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--space-12);
  }

  #content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
  }

  #content th,
  #content td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
  }

  @media (width >= 42rem) {
    .article-card {
      grid-template-columns: 15rem 1fr;
      align-items: center;
    }

    .article-card-thumbnail {
      height: 10rem;
    }
  }

  @media (width >= 44rem) {
    .book-header {
      grid-template-columns: 16rem 1fr;
      align-items: center;
    }

    .related-article,
    .course-ad {
      grid-template-columns: minmax(12rem, 33%) 1fr;
      align-items: center;
    }
  }

  @media (width >= 48rem) {
    .logo-image {
      width: 3.75rem;
      height: 3.75rem;
    }

    .logo-text {
      font-size: var(--text-xl);
    }

    .menu-button {
      display: none;
    }

    .nav-menu {
      display: block;
      position: static;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
    }

    .nav-list {
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    #content pre:has(code) {
      margin-inline: 0;
    }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .hidden {
    display: none;
  }
}