@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Serif+4:ital,wght@0,300;0,400;0,600;1,300;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

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

    :root {
      --ink: #1a1a2e;
      --ink-light: #2e2e4a;
      --paper: #faf8f3;
      --paper-warm: #f2ede3;
      --accent: #c0392b;
      --accent-muted: #922b21;
      --gold: #b7860b;
      --border: #d5cfc2;
      --code-bg: #282c34;
      --note-bg: #eef2f7;
      --note-border: #3a6186;
    }

    html {
      font-size: 18px;
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--paper);
      color: var(--ink);
      font-family: 'Source Serif 4', Georgia, serif;
      font-weight: 300;
      line-height: 1.85;
      padding: 4rem 1.5rem 8rem;
    }

    .wrapper {
      max-width: 760px;
      margin: 0 auto;
    }

    /* HEADER */
    .article-head {
      border-top: 4px solid var(--ink);
      border-bottom: 1px solid var(--border);
      padding: 3rem 0 2.5rem;
      margin-bottom: 3.5rem;
    }

    .article-label {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.2rem;
    }

    h1 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: clamp(2.4rem, 6vw, 3.8rem);
      font-weight: 900;
      line-height: 1.1;
      color: var(--ink);
      margin-bottom: 1.4rem;
      letter-spacing: -0.02em;
    }

    .subtitle {
      font-size: 1.05rem;
      font-style: italic;
      color: #555;
      font-weight: 300;
      max-width: 620px;
      line-height: 1.6;
    }

    /* INDICE */
    .toc {
      background: var(--paper-warm);
      border-left: 3px solid var(--gold);
      padding: 1.6rem 2rem;
      margin: 3rem 0;
    }

    @media screen and (min-width: 768px) {
        .toc {
            margin: 0;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            min-height: 100vh;
        }
    }

    .toc-title {
      font-family: 'Playfair Display', serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 0.9rem;
    }

    .toc ol {
      padding-left: 1.4rem;
      counter-reset: none;
    }

    .toc li {
      margin-bottom: 0.35rem;
      font-size: 0.9rem;
    }

    .toc a {
      color: var(--ink-light);
      text-decoration: none;
      transition: color 0.2s;
    }

    .toc a:hover,
    .toc a.is-active {
      color: var(--accent);
    }

    .toc a.is-active {
        font-weight: 700;
    }

    /* TIPOGRAFIA */
    h2 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.85rem;
      font-weight: 700;
      color: var(--ink);
      margin: 3.5rem 0 1.2rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border);
      letter-spacing: -0.01em;
    }

    h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--ink-light);
      margin: 2.4rem 0 0.8rem;
    }

    p {
      margin-bottom: 1.4rem;
      font-size: 1rem;
    }

    strong {
      font-weight: 600;
      color: var(--ink);
    }

    em {
      font-style: italic;
      color: #444;
    }

    a {
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    ul, ol {
      margin: 0 0 1.4rem 1.6rem;
    }

    li {
      margin-bottom: 0.4rem;
    }


    /* FOOTER */
    .article-foot {
      margin-top: 5rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--border);
      font-size: 0.82rem;
      color: #888;
      font-family: 'JetBrains Mono', monospace;
    }