/* ---- Brand colours: change these 4 lines to match your logo exactly ---- */
    :root {
      --brand:      #008dd2;   /* deep maroon  */
      --brand-dark: #005e8c;
      --accent:     #008dd2;   /* brass gold   */
      --tint:       #faf3f1;   /* soft blush   */
      --ink:        #2a2226;
      --muted:      #6d6167;
    }
    body { font-family: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); line-height: 1.75; font-size: 1.05rem; }
    h1, h2, h3, h4 { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; color: var(--brand-dark); line-height: 1.2; }
    h2 { font-size: 2.1rem; margin-top: 3rem; margin-bottom: 1rem; font-weight: 700; }
    h3 { font-size: 1.6rem; font-weight: 700; }
    a { color: var(--brand); }
    a:hover { color: var(--accent); }

    .navbar { background: var(--brand-dark); }
    .navbar-brand, .navbar .nav-link { color: #fff !important; }
    .navbar-brand { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.6rem; font-weight: 700; letter-spacing: .5px; }
    .navbar .nav-link:hover { color: var(--accent) !important; }

    .hero { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; padding: 4.5rem 0 4rem; }
    .hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; }
    .hero .lead { color: #f3e6e2; max-width: 46rem; }
    .hero .meta { color: #e2c9c3; font-size: .95rem; }
    .breadcrumb a { color: #e9d3ce; text-decoration: none; }
    .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: #e9d3ce; }

    .btn-brand { background: var(--accent); border-color: var(--accent); color: #211a16; font-weight: 700; }
    .btn-brand:hover { background: #a37a30; border-color: #a37a30; color: #fff; }
    .btn-outline-brand { border: 2px solid var(--brand); color: var(--brand); font-weight: 700; }
    .btn-outline-brand:hover { background: var(--brand); color: #fff; }

    .article-body { max-width: 46rem; }
    .toc { background: var(--tint); border-left: 4px solid var(--accent); border-radius: .25rem; padding: 1.25rem 1.5rem; }
    .toc a { text-decoration: none; }
    .toc li { margin-bottom: .3rem; }

    .pick { border: 1px solid #ead9d5; border-top: 4px solid var(--brand); border-radius: .35rem; padding: 1.5rem; margin-bottom: 1.75rem; background: #fff; }
    .pick.top-pick { border-top-color: var(--accent); background: var(--tint); }
    .pick .rank { font-family: "Cormorant Garamond", Georgia, serif; font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; }
    .tag { display: inline-block; background: var(--tint); color: var(--brand); border: 1px solid #e5cfca; border-radius: 2rem; padding: .1rem .75rem; font-size: .85rem; margin: 0 .35rem .35rem 0; }
    .top-pick .tag { background: #fff; }

    .table thead th { background: var(--brand); color: #fff; border-color: var(--brand); }
    .table-responsive { border: 1px solid #ead9d5; border-radius: .35rem; }

    .callout { background: var(--brand-dark); color: #fff; border-radius: .5rem; padding: 2rem; }
    .callout h2, .callout h3 { color: #fff; margin-top: 0; }

    .accordion-button:not(.collapsed) { background: var(--tint); color: var(--brand-dark); }
    .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(184,137,58,.35); }

    .side-card { background: var(--tint); border-radius: .5rem; padding: 1.5rem; }
    footer { background: var(--brand-dark); color: #e2c9c3; }
    footer a { color: #fff; }
    .small-note { font-size: .9rem; color: var(--muted); }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }