:root {
      --bg: #f5f0e8;
      --ink: #1a1612;
      --accent: #c84b2f;
      --rule: #c8bfad;
      --h3-bg: #1a1612;
      --h3-fg: #f5f0e8;
      --h4-bg: #e8e0d0;
      --h4-fg: #1a1612;
      --content-bg: #faf7f2;
      --indent: 1.5rem;
    }

    /* ── Accordion Base ── */
    .accordion-item {
      border-bottom: 1px solid var(--rule);
    }

    .accordion-item:first-child {
      border-top: 1px solid var(--rule);
    }

    /* ── H3 Trigger ── */
    .accordion-trigger {
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 1rem;
      font-family: inherit;
    }

    .accordion-trigger:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* H3 level */
    .level-h3>.accordion-trigger {
      padding: 1.1rem 0;
    }

    .level-h3>.accordion-trigger .trigger-label {
      font-family: "Quicksand", "Roboto", Helvetica, Arial, sans-serif;
      font-size: 1.8rem;
      color: var(--ink);
      font-weight: 500;
      flex: 1;
    }

    /* H4 level */
    .level-h4>.accordion-trigger {
      padding: 0.75rem 0 0.75rem var(--indent);
      background: #ACBB62;
    }

    .level-h4>.accordion-trigger .trigger-label {
      font-family: "Quicksand", "Roboto", Helvetica, Arial, sans-serif;

      font-size: 1.8rem;
      font-weight: 500;
      color: var(--ink);
      flex: 1;
      opacity: 0.7;
    }

    /* ── Icon ── */
    .trigger-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      position: relative;
      display: grid;
      place-items: center;
    }

    .trigger-icon::before,
    .trigger-icon::after {
      content: '';
      position: absolute;
      background: var(--ink);
      border-radius: 1px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .trigger-icon::before {
      width: 12px;
      height: 1.5px;
    }

    .trigger-icon::after {
      width: 1.5px;
      height: 12px;
    }

    .accordion-trigger[aria-expanded="true"] .trigger-icon::after {
      transform: rotate(90deg);
      opacity: 0;
    }

    .level-h3 .trigger-icon {
      order: -1;
    }

    .level-h4 .trigger-icon {
      order: 99;
    }

    /* ── Counter badge (H3 only) ── */
    .trigger-count {
      font-size: 0.7rem;
      letter-spacing: 0.05em;
      background: var(--accent);
      color: #fff;
      padding: 0.15rem 0.5rem;
      border-radius: 20px;
      font-weight: 500;
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.2s, transform 0.2s;
    }

    .accordion-trigger[aria-expanded="true"] .trigger-count {
      opacity: 1;
      transform: scale(1);
    }

    /* ── Panel ── */
    .accordion-panel {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .accordion-panel.open {
      max-height: 2000px;
    }

    /* H3 panel inner */
    .level-h3>.accordion-panel>.panel-inner {
      background: var(--content-bg);
      /* border-left: 3px solid var(--accent); */
      margin-bottom: 1rem;
    }

    /* H4 panel inner */
    .level-h4>.accordion-panel>.panel-inner {
      border-left: 1px solid var(--rule);
      margin-left: calc(var(--indent) + 0.5rem);
      padding-left: 1rem;
      margin-bottom: 0.5rem;
    }

    /* ── Content typography ── */
    .content-body {
      padding: 1.25rem 1.5rem;
    }

    .level-h4>.accordion-panel .content-body {
      padding: 0.75rem 0;
    }

    .content-body p {
      margin-bottom: 0.75rem;
      font-size: 1.6rem;
      opacity: 0.8;
    }

    .content-body p:last-child {
      margin-bottom: 0;
    }

    .content-body ul {
      margin-bottom: 0.75rem;
    }

    .content-body ul li {
      font-size: 1.6rem;
      opacity: 0.8;
      padding-left: 1rem;
      position: relative;
      margin-bottom: 0.25rem;
    }

    /* ── Nested h4 accordions live inside .panel-inner ── */
    .sub-accordion {
      margin-top: 0.25rem;
    }

    .sub-accordion .accordion-item {
      border-color: transparent;
      border-bottom: 1px solid var(--rule);
    }

    .sub-accordion .accordion-item:first-child {
      border-top: 1px solid var(--rule);
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar {
      width: 6px;
    }

    ::-webkit-scrollbar-track {
      background: var(--bg);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--rule);
      border-radius: 3px;
    }