@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-400.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/inter-500.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-600.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/newsreader-500.woff2) format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/newsreader-600.woff2) format("woff2");
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --c-paper: 250 249 247;
    --c-surface: 255 255 255;
    --c-well: 243 241 237;
    --c-edge: 232 229 224;
    --c-edge-soft: 243 241 237;
    --c-ink: 26 24 20;
    --c-body: 61 58 53;
    --c-muted: 138 133 124;
    --c-accent: 47 107 79;
    --c-gold: 232 196 104;
    --c-gold-ink: 138 109 31;
    --c-hl: 253 243 216;
    --c-info: 61 107 138;
  }
  .dark {
    --c-paper: 24 21 17;
    --c-surface: 34 30 24;
    --c-well: 42 37 30;
    --c-edge: 54 50 43;
    --c-edge-soft: 42 37 30;
    --c-ink: 237 233 226;
    --c-body: 201 196 186;
    --c-muted: 138 133 124;
    --c-accent: 111 174 140;
    --c-gold: 184 154 74;
    --c-gold-ink: 216 188 116;
    --c-hl: 58 51 34;
    --c-info: 124 165 192;
  }
  body { @apply font-sans; }
}

@layer components {
  .prose { @apply text-body leading-[1.75]; }
  .prose h1 { @apply font-serif text-3xl font-semibold text-ink mt-8 mb-4 tracking-tight; scroll-margin-top: 2rem; }
  .prose h2 { @apply font-serif text-2xl font-semibold text-ink mt-6 mb-3 tracking-tight; scroll-margin-top: 2rem; }
  .prose h3 { @apply font-serif text-xl font-semibold text-ink mt-5 mb-2; scroll-margin-top: 2rem; }
  .prose p  { @apply mb-4; }
  .prose ul { @apply list-disc pl-6 mb-4; }
  .prose ol { @apply list-decimal pl-6 mb-4; }
  .prose li { @apply mb-1; }
  .prose blockquote { @apply border-l-4 border-edge pl-4 italic text-muted my-4; }
  .prose pre  { @apply bg-well border border-edge rounded-lg p-4 my-4 text-sm whitespace-pre-wrap break-words; }
  .prose code { @apply bg-well px-1.5 py-0.5 rounded text-sm font-mono break-words; }
  .prose pre code { @apply bg-transparent border-0 p-0; }
  .prose table { @apply w-full border-collapse my-4; }
  .prose th { @apply border border-edge bg-well px-3 py-2 text-left font-semibold text-ink; }
  .prose td { @apply border border-edge px-3 py-2; }
  .prose a  { @apply text-accent underline underline-offset-2; }
  .prose strong { @apply font-bold text-ink; }
  .prose em { @apply italic; }
  .prose del { @apply line-through text-muted; }
  .prose hr { @apply border-edge my-6; }
  .prose img { @apply max-w-full rounded-lg my-4; }

  .annotation-margin { display: none; }
  @media (min-width: 1280px) {
    .annotation-margin {
      display: block;
      position: absolute;
      top: 0;
      left: 100%;
      width: 18rem;
      margin-left: 2rem;
      height: 100%;
      pointer-events: none;
    }
    .annotation-margin > * { pointer-events: auto; }
  }

  .toc-rail { display: none; }
  @media (min-width: 1280px) {
    .toc-rail.toc-visible {
      display: block;
      position: fixed;
      right: 1rem;
      top: 6rem;
      z-index: 40;
    }
  }
  .toc-ticks { @apply flex flex-col items-end gap-[7px] cursor-pointer p-2; }
  .toc-tick { @apply h-[2px] w-4 rounded bg-edge transition-all duration-150; }
  .toc-tick-h3 { @apply w-2.5; }
  .toc-tick-active { @apply bg-ink w-6; }
  .toc-panel { @apply hidden w-56 max-h-[calc(100vh-8rem)] overflow-y-auto bg-surface border border-edge rounded-xl shadow-lg shadow-ink/10 p-4; }
  .toc-rail.toc-expanded .toc-panel { display: block; }
  .toc-rail.toc-expanded .toc-ticks { display: none; }
  .toc-link { @apply block py-1 px-2 text-sm leading-snug transition-colors duration-150 text-muted hover:text-ink border-l-2 border-transparent; }
  .toc-link-h3 { @apply pl-5 text-xs; }
  .toc-active { @apply text-accent border-accent; }
}

@media print {
  nav,
  .document-view-actions,
  .toc-rail,
  .annotation-margin,
  footer {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  .prose {
    color: black !important;
  }

  .prose code,
  .prose pre {
    background: #f3f4f6 !important;
    color: black !important;
  }

  .prose a {
    color: #1d4ed8 !important;
  }

  mark[data-annotation-id] {
    background: none !important;
    border-bottom: none !important;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */