@font-face {
      font-family: "Fraunces";
      src: url("fontes/fraunces-latin.woff2") format("woff2");
      font-display: swap;
    }

    @font-face {
      font-family: "Instrument Sans";
      src: url("fontes/instrument-sans-latin.woff2") format("woff2");
      font-display: swap;
    }

    :root {
      --bg: #0a0a0d;
      --bg-2: #111019;
      --paper: #0a0a0d;
      --paper-2: #111019;
      --card: #111019;
      --ink: #f4f2ea;
      --ink-2: #a8a496;
      --ink-3: #736f64;
      --line: rgba(245,242,234,.1);
      --gold: #d4af37;
      --gold-2: #f0d572;
      --gold-glow: #f7e08a;
      --gold-deep: #e6c869;
      --link: var(--gold-deep);
      --link-hover: var(--gold-glow);
      --display: "Fraunces", Georgia, serif;
      --sans: "Instrument Sans", system-ui, sans-serif;
      --max: min(1200px, calc(100% - 48px));
      --read: min(72ch, calc(100% - 48px));
    }

    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f4f1ea;
        --bg-2: #eae3d6;
        --paper: #f4f1ea;
        --paper-2: #eae3d6;
        --card: #fdfbf5;
        --ink: #16130d;
        --ink-2: #565149;
        --ink-3: #8a8476;
        --line: rgba(22,19,13,.12);
        --gold: #c19a2e;
        --gold-2: #e0bd4e;
        --gold-glow: #f2d571;
        --gold-deep: #a9821f;
        --link-hover: #16130d;
      }
    }

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

    html {
      scroll-behavior: smooth;
      background: var(--bg);
    }

    body {
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 18px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    ::selection {
      background: var(--gold);
      color: var(--bg);
    }

    a {
      color: var(--link);
      text-decoration-thickness: 1px;
      text-underline-offset: .18em;
    }

    a:hover,
    a:focus {
      color: var(--link-hover);
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -.02em;
      font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
      font-variant-ligatures: none;
    }

    p,
    li {
      color: var(--ink-2);
    }

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

    .top-line {
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--gold-glow));
    }

    .wrap {
      width: var(--max);
      margin-inline: auto;
    }

    .site-header {
      border-bottom: 1px solid var(--line);
      background: var(--bg);
    }

    .nav {
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      color: var(--ink);
      text-decoration: none;
    }

    .brand img {
      width: auto;
      height: 38px;
    }

    .bn {
      display: flex;
      flex-direction: column;
      font-family: var(--display);
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -.01em;
      line-height: 1;
    }

    .bn b {
      color: var(--ink);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .02em;
    }

    .bn i {
      margin-top: 3px;
      color: var(--gold-deep);
      font-size: 11px;
      font-style: normal;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .26em;
    }

    .doc-meta {
      text-align: right;
    }

    .doc-title {
      color: var(--ink-3);
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .hero {
      width: var(--read);
      margin-inline: auto;
      padding: 58px 0;
    }

    .kick {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
      color: var(--gold-deep);
      font-size: 13px;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    .kick::before {
      content: "";
      width: 28px;
      height: 1.5px;
      background: var(--gold);
      flex: none;
    }

    .updated {
      margin-top: 4px;
      color: var(--ink-3);
      font-size: 13px;
    }

    .preambulo {
      max-width: 62ch;
      padding: 28px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .preambulo p {
      font-family: var(--sans);
      font-size: clamp(1.05rem, 1.2vw, 1.2rem);
      line-height: 1.6;
    }

    .preambulo p:first-child {
      margin-bottom: 14px;
      color: var(--ink);
    }

    .preambulo p:last-child {
      color: var(--ink-2);
    }

    .layout {
      width: var(--max);
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(220px, 300px) minmax(0, 72ch);
      justify-content: center;
      gap: 58px;
      align-items: start;
      padding-bottom: 96px;
    }

    .toc {
      position: sticky;
      top: 24px;
      padding: 24px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .toc .kick {
      margin-bottom: 18px;
      font-size: 12px;
    }

    .toc ol {
      display: grid;
      gap: 10px;
      padding-left: 1.2rem;
      font-size: 15px;
      line-height: 1.45;
    }

    .toc li {
      color: var(--ink-3);
    }

    .content {
      min-width: 0;
    }

    section {
      padding: 44px 0;
      border-top: 1px solid var(--line);
      scroll-margin-top: 32px;
    }

    section:first-child {
      padding-top: 0;
    }

    h2 {
      margin-bottom: 26px;
      color: var(--ink);
      font-size: clamp(1.55rem, 2.6vw, 2.15rem);
    }

    section p {
      margin-bottom: 18px;
    }

    ul,
    ol {
      margin: 0 0 24px;
      padding-left: 1.35rem;
    }

    li {
      margin-bottom: 10px;
      padding-left: .2rem;
    }

    li::marker {
      color: var(--gold-deep);
    }

    section p:last-child,
    section li:last-child {
      margin-bottom: 0;
    }

    .contact-box {
      padding: 24px;
      background: var(--card);
      border: 1px solid var(--line);
    }

    .site-footer {
      border-top: 1px solid var(--line);
      background: var(--bg-2);
      padding: 36px 0;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: var(--ink-3);
      font-size: 14px;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .footer-brand img {
      width: auto;
      height: 30px;
    }

    .footer-meta {
      text-align: right;
    }

    .footer-rights {
      margin-top: 4px;
      font-size: 13px;
      color: var(--ink-3);
    }

    @media (max-width: 900px) {
      .layout {
        grid-template-columns: 1fr;
        gap: 36px;
      }

      .toc {
        position: static;
        width: var(--read);
        margin-inline: auto;
      }

      .content {
        width: var(--read);
        margin-inline: auto;
      }
    }

    @media (max-width: 640px) {
      :root {
        --max: min(1200px, calc(100% - 28px));
        --read: min(72ch, calc(100% - 28px));
      }

      body {
        font-size: 17px;
      }

      .nav,
      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }

      .nav {
        justify-content: center;
        padding: 20px 0;
      }

      .doc-meta,
      .footer-meta {
        text-align: left;
      }

      .hero {
        padding: 40px 0;
      }

      .layout {
        padding-bottom: 64px;
      }

      section {
        padding: 36px 0;
      }
    }

    .doc-list {
      list-style: none;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid var(--line);
    }

    .doc-list li {
      margin: 0;
      padding: 22px 0;
      border-top: 1px solid var(--line);
    }

    .doc-list a {
      color: var(--ink);
      font-weight: 600;
    }

    .doc-list p {
      margin-top: 6px;
      color: var(--ink-2);
    }