/* The Spirit of Santa Project — shared styles (extracted verbatim from the original single-file site). */
      :root {
        color-scheme: light dark;
        --bg: #f6f0e2;
        --bg-soft: #efe7d3;
        --surface: #fffdf6;
        --surface-2: #fbf7ec;
        --ink: #16323a;
        --ink-soft: #43565c;
        --ink-faint: #6d7f83;
        --teal: #11454b;
        --teal-deep: #0b2e33;
        --teal-mid: #1d5f63;
        --amber: #a97a24;
        --amber-bright: #d9a441;
        --amber-soft: #f3e3bd;
        --line: rgba(17, 69, 75, 0.18);
        --line-soft: rgba(17, 69, 75, 0.1);
        --night-1: #081e22;
        --night-2: #0e3238;
        --night-3: #14504f;
        --night-ink: #f2ead6;
        --night-soft: #c9d4c8;
        --shadow: 0 18px 50px rgba(11, 46, 51, 0.14);
        --radius: 14px;
        --serif-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
        --serif-body: "Newsreader", Georgia, "Times New Roman", serif;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #081e22;
          --bg-soft: #0a262b;
          --surface: #0e2c31;
          --surface-2: #0c272c;
          --ink: #f0e8d5;
          --ink-soft: #c3cec2;
          --ink-faint: #93a69b;
          --teal: #7fb5ac;
          --teal-deep: #dcead9;
          --teal-mid: #a8cec2;
          --amber: #d9a441;
          --amber-bright: #eec26a;
          --amber-soft: #3a2f16;
          --line: rgba(220, 234, 220, 0.2);
          --line-soft: rgba(220, 234, 220, 0.1);
          --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
        }
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: var(--serif-body);
        font-size: 19px;
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      ::selection { background: var(--amber-soft); }
      a { color: var(--teal-mid); text-decoration-thickness: 1px; text-underline-offset: 3px; }
      a:hover { color: var(--amber); }
      :focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 3px; border-radius: 2px; }
      [tabindex="-1"]:focus { outline: none; }
      h1, h2, h3, h4 { font-family: var(--serif-display); font-weight: 600; line-height: 1.12; margin: 0; color: var(--teal-deep); }
      @media (prefers-color-scheme: dark) { h1, h2, h3, h4 { color: var(--ink); } }
      p { margin: 0 0 1.1em; }
      .wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 44px); }
      .measure { max-width: 44rem; }
      .small-caps { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }

      /* ---------- header / nav ---------- */
      .site-header {
        position: sticky; top: 0; z-index: 50;
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--line-soft);
      }
      .header-in { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
      .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--teal-deep); flex-shrink: 0; }
      @media (prefers-color-scheme: dark) { .brand { color: var(--ink); } }
      .brand svg { display: block; }
      .brand-name { font-family: var(--serif-display); font-size: 1.28rem; font-weight: 700; line-height: 1.05; letter-spacing: 0.01em; }
      .brand-sub { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
      .main-nav { margin-left: auto; }
      .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
      .main-nav a {
        display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none;
        color: var(--ink-soft); font-size: 0.98rem; font-weight: 500; white-space: nowrap;
      }
      .main-nav a:hover { color: var(--teal-deep); background: var(--bg-soft); }
      .main-nav a[aria-current="page"] { color: var(--teal-deep); background: var(--amber-soft); }
      @media (prefers-color-scheme: dark) {
        .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--ink); }
      }
      .nav-toggle {
        display: none; margin-left: auto; background: none; border: 1px solid var(--line);
        border-radius: 10px; padding: 8px 12px; font: inherit; font-size: 0.95rem; color: var(--ink); cursor: pointer;
      }
      @media (max-width: 900px) {
        .nav-toggle { display: block; }
        .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
        .main-nav.open { display: block; }
        .main-nav ul { flex-direction: column; padding: 10px clamp(18px, 4vw, 44px) 16px; gap: 2px; }
        .main-nav a { padding: 11px 10px; font-size: 1.05rem; }
      }

      /* ---------- views ---------- */
      .view { display: none; }
      .view.active { display: block; animation: viewIn 0.45s ease both; }
      @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .view.active { animation: none; }
        * { transition: none !important; }
      }

      /* ---------- hero (always a night panel) ---------- */
      .hero {
        position: relative; overflow: hidden; color: var(--night-ink);
        background: linear-gradient(175deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 130%);
      }
      .hero .stars { position: absolute; inset: 0; pointer-events: none; }
      .hero-in { position: relative; padding: clamp(56px, 9vw, 110px) clamp(18px, 4vw, 44px) clamp(64px, 9vw, 116px); }
      .hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
      @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { max-width: 340px; margin: 0 auto; } }
      .hero .small-caps { color: var(--amber-bright); }
      .hero h1 { color: var(--night-ink); font-size: clamp(2.5rem, 5.4vw, 4.1rem); font-weight: 600; margin: 16px 0 20px; }
      .hero h1 em { font-style: italic; color: var(--amber-bright); }
      .hero-lede { font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--night-soft); max-width: 36rem; }
      .hero-philosophy { margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(240, 232, 213, 0.18); display: flex; flex-wrap: wrap; gap: 8px 34px; }
      .hero-philosophy span { font-family: var(--serif-display); font-style: italic; font-size: 1.18rem; color: var(--night-ink); }
      .hero-art { position: relative; }
      .hero-art svg { width: 100%; height: auto; display: block; }
      .lantern-glow { filter: drop-shadow(0 0 26px rgba(238, 194, 106, 0.55)); }

      /* ---------- buttons ---------- */
      .btn {
        display: inline-block; padding: 12px 24px; border-radius: 999px; text-decoration: none;
        font-weight: 600; font-size: 1rem; line-height: 1.2; border: 1px solid transparent; cursor: pointer; font-family: var(--serif-body);
      }
      .btn-amber { background: var(--amber-bright); color: #23180a; }
      .btn-amber:hover { background: var(--amber); color: #fff8ea; }
      .btn-ghost { border-color: rgba(240, 232, 213, 0.45); color: var(--night-ink); background: transparent; }
      .btn-ghost:hover { border-color: var(--amber-bright); color: var(--amber-bright); }
      .btn-teal { background: var(--teal); color: #fdfaf1; }
      @media (prefers-color-scheme: dark) { .btn-teal { color: #0a2226; } }
      .btn-teal:hover { background: var(--teal-mid); color: #fdfaf1; }
      .btn-outline { border-color: var(--line); color: var(--teal-deep); background: transparent; }
      @media (prefers-color-scheme: dark) { .btn-outline { color: var(--ink); } }
      .btn-outline:hover { border-color: var(--amber); color: var(--amber); }
      .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

      /* ---------- sections & layout ---------- */
      .section { padding: clamp(52px, 7vw, 92px) 0; }
      .section.alt { background: var(--bg-soft); }
      .section-head { max-width: 46rem; margin-bottom: clamp(28px, 4vw, 44px); }
      .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 10px 0 14px; }
      .section-head p { color: var(--ink-soft); font-size: 1.08rem; }
      .kicker { color: var(--amber); }
      .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4.5vw, 60px); }
      @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

      /* pathway panels (home) */
      .pathways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 30px); }
      @media (max-width: 820px) { .pathways { grid-template-columns: 1fr; } }
      .pathway {
        border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
        padding: clamp(24px, 3.4vw, 38px); display: flex; flex-direction: column; gap: 0;
      }
      .pathway h3 { font-size: 1.65rem; margin: 10px 0 10px; }
      .pathway p { color: var(--ink-soft); }
      .pathway ul { margin: 4px 0 20px; padding-left: 1.15em; color: var(--ink-soft); }
      .pathway ul li { margin-bottom: 6px; }
      .pathway .btn { margin-top: auto; align-self: flex-start; }
      .pathway .tag { color: var(--amber); }

      /* cards */
      .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(16px, 2.6vw, 26px); }
      .card {
        border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
        padding: 24px 24px 20px; display: flex; flex-direction: column; text-decoration: none; color: inherit;
        transition: border-color 0.2s ease, transform 0.2s ease;
      }
      a.card:hover { border-color: var(--amber); transform: translateY(-2px); color: inherit; }
      .card .card-tag { color: var(--amber); margin-bottom: 8px; }
      .card h3 { font-size: 1.42rem; margin-bottom: 8px; line-height: 1.2; }
      .card p { color: var(--ink-soft); font-size: 0.99rem; margin-bottom: 14px; }
      .card .card-meta { margin-top: auto; font-size: 0.88rem; color: var(--ink-faint); display: flex; justify-content: space-between; gap: 10px; }
      .card .go { color: var(--teal-mid); font-weight: 600; }

      /* library toolbar */
      .lib-toolbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 26px; }
      .lib-search { flex: 1 1 260px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 10px 18px; }
      .lib-search input { border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); width: 100%; }
      .lib-search input:focus { outline: none; }
      .lib-search:focus-within { border-color: var(--amber); }
      .chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
      .chip {
        border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
        border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 0.92rem; cursor: pointer;
      }
      .chip[aria-pressed="true"] { background: var(--teal); color: #fdfaf1; border-color: var(--teal); }
      @media (prefers-color-scheme: dark) { .chip[aria-pressed="true"] { color: #0a2226; } }
      .no-results { display: none; color: var(--ink-soft); font-style: italic; }

      /* ---------- article pages ---------- */
      .article-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(26px, 3vw, 36px); border-bottom: 1px solid var(--line-soft); margin-bottom: clamp(30px, 4vw, 48px); }
      .crumbs { font-size: 0.92rem; color: var(--ink-faint); margin-bottom: 18px; }
      .crumbs a { color: var(--ink-soft); text-decoration: none; }
      .crumbs a:hover { color: var(--amber); }
      .article-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); max-width: 22em; margin: 10px 0 16px; }
      .article-dek { font-size: 1.18rem; color: var(--ink-soft); max-width: 42rem; line-height: 1.6; }
      .article { padding-bottom: clamp(56px, 7vw, 90px); }
      .article-body { max-width: 44rem; }
      .article-body h2 { font-size: 1.85rem; margin: 1.5em 0 0.55em; }
      .article-body h3 { font-size: 1.4rem; margin: 1.4em 0 0.45em; }
      .article-body ul, .article-body ol { padding-left: 1.25em; margin: 0 0 1.2em; }
      .article-body li { margin-bottom: 0.45em; }
      .article-body li::marker { color: var(--amber); }
      .article-body blockquote {
        margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--amber-bright);
        font-family: var(--serif-display); font-size: 1.35rem; font-style: italic; line-height: 1.45; color: var(--teal-deep);
      }
      @media (prefers-color-scheme: dark) { .article-body blockquote { color: var(--ink); } }
      .article-body blockquote cite { display: block; margin-top: 8px; font-size: 0.95rem; font-style: normal; font-family: var(--serif-body); color: var(--ink-faint); }

      /* evidence labels */
      .ev {
        display: inline-block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
        padding: 3px 10px; border-radius: 999px; margin-right: 6px; vertical-align: 2px; white-space: nowrap;
      }
      .ev-doc { background: #dcead9; color: #274d2c; }
      .ev-sch { background: #f3e3bd; color: #6d4d10; }
      .ev-folk { background: #f6d9c8; color: #7c3c14; }
      .ev-open { background: #d8dee6; color: #33475e; }
      .ev-refl { background: #e6ddf0; color: #4c3866; }
      @media (prefers-color-scheme: dark) {
        .ev-doc { background: #23402a; color: #bfe0c2; }
        .ev-sch { background: #4a3a14; color: #f0d492; }
        .ev-folk { background: #4c2c16; color: #f2c39b; }
        .ev-open { background: #2c3a4a; color: #b9cadd; }
        .ev-refl { background: #372a4d; color: #d3c2ee; }
      }
      .ev-note {
        border: 1px solid var(--line-soft); background: var(--surface-2); border-radius: 10px;
        padding: 14px 18px; font-size: 0.95rem; color: var(--ink-soft); margin: 1.2em 0;
      }
      .ev-note strong { color: var(--ink); }

      /* callouts */
      .callout {
        border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
        padding: clamp(20px, 3vw, 30px); margin: 1.6em 0;
      }
      .callout h3 { font-size: 1.35rem; margin-bottom: 8px; }
      .callout p:last-child { margin-bottom: 0; }
      .callout.amber { background: var(--amber-soft); border-color: transparent; }
      @media (prefers-color-scheme: dark) { .callout.amber { color: var(--ink); } }
      .script-box {
        background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 10px;
        padding: 16px 20px; margin: 1em 0; font-style: italic;
      }
      .script-box p { margin-bottom: 0.6em; }
      .script-box p:last-child { margin-bottom: 0; }
      .script-box .who { font-style: normal; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); display: block; margin-bottom: 4px; }

      /* sources block on articles */
      .article-sources { margin-top: 3em; border-top: 1px solid var(--line-soft); padding-top: 22px; max-width: 44rem; }
      .article-sources h2 { font-size: 1.3rem; margin-bottom: 12px; }
      .article-sources ul { list-style: none; padding: 0; margin: 0; }
      .article-sources li { font-size: 0.94rem; color: var(--ink-soft); margin-bottom: 9px; padding-left: 18px; position: relative; }
      .article-sources li::before { content: "·"; position: absolute; left: 4px; color: var(--amber); font-weight: 700; }
      .related { margin-top: 2.6em; max-width: 44rem; }
      .related h2 { font-size: 1.3rem; margin-bottom: 14px; }
      .related-links { display: grid; gap: 10px; }
      .related-links a {
        display: block; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface);
        padding: 14px 18px; text-decoration: none; color: var(--ink); font-weight: 500;
      }
      .related-links a:hover { border-color: var(--amber); }
      .related-links a span { display: block; font-size: 0.88rem; color: var(--ink-faint); font-weight: 400; margin-top: 2px; }

      /* timeline */
      .timeline { position: relative; margin: 10px 0 0; padding-left: 30px; }
      .timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--amber-bright), var(--teal-mid)); opacity: 0.55; }
      .tl-item { position: relative; padding: 0 0 30px; }
      .tl-item::before { content: ""; position: absolute; left: -29px; top: 9px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 3px solid var(--amber); }
      .tl-year { font-family: var(--serif-display); font-weight: 700; font-size: 1.3rem; color: var(--amber); }
      .tl-item h3 { font-size: 1.3rem; margin: 2px 0 6px; }
      .tl-item p { color: var(--ink-soft); max-width: 42rem; margin: 0; }

      /* accordion / FAQ */
      .faq { border-top: 1px solid var(--line-soft); }
      .faq-item { border-bottom: 1px solid var(--line-soft); }
      .faq-q {
        width: 100%; background: none; border: 0; padding: 20px 34px 20px 2px; text-align: left; cursor: pointer;
        font-family: var(--serif-display); font-size: 1.32rem; font-weight: 600; color: var(--teal-deep); position: relative; line-height: 1.3;
      }
      @media (prefers-color-scheme: dark) { .faq-q { color: var(--ink); } }
      .faq-q::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 1.5rem; color: var(--amber); font-family: var(--serif-body); font-weight: 400; }
      .faq-item.open .faq-q::after { content: "–"; }
      .faq-a { display: none; padding: 0 34px 22px 2px; color: var(--ink-soft); max-width: 46rem; }
      .faq-item.open .faq-a { display: block; }
      .faq-a p:last-child { margin-bottom: 0; }

      /* printable resources */
      .printable {
        border: 1px dashed var(--amber); border-radius: var(--radius); background: var(--surface);
        padding: clamp(22px, 3vw, 32px); margin-bottom: 22px;
      }
      .printable h3 { font-size: 1.5rem; margin-bottom: 8px; }
      .printable p { color: var(--ink-soft); }
      .conv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0 20px; }
      .conv-card {
        border: 1px solid var(--line); border-radius: 10px; padding: 16px; background: var(--surface-2);
        font-family: var(--serif-display); font-size: 1.12rem; font-style: italic; line-height: 1.4; min-height: 92px;
        display: flex; align-items: center;
      }

      /* book feature band */
      .book-band { background: linear-gradient(160deg, var(--night-1), var(--night-2) 60%, var(--night-3)); color: var(--night-ink); border-radius: 20px; padding: clamp(30px, 5vw, 58px); position: relative; overflow: hidden; }
      .book-band h2, .book-band h3 { color: var(--night-ink); }
      .book-band p { color: var(--night-soft); }
      .book-cover {
        border-radius: 8px; overflow: hidden;
        border: 1px solid rgba(240, 232, 213, 0.22); box-shadow: var(--shadow);
      }
      .book-cover img { display: block; width: 100%; height: auto; }
      /* editor / placeholder flags: bold, bracketed, red — never blend into prose */
      .editor-note { color: #c1271f; font-weight: 700; }
      @media (prefers-color-scheme: dark) { .editor-note { color: #ff8a80; } }
      .book-grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
      @media (max-width: 820px) { .book-grid { grid-template-columns: 1fr; } .book-cover { max-width: 340px; margin: 0 auto; width: 100%; } }
      .fact-list { list-style: none; padding: 0; margin: 22px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px clamp(26px, 4.5vw, 60px); }
      @media (max-width: 560px) { .fact-list { grid-template-columns: 1fr; } }
      .fact-list li { border-top: 1px solid var(--line-soft); padding-top: 10px; font-size: 0.98rem; color: var(--ink-soft); }
      .fact-list li strong { display: block; color: var(--ink); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }

      /* principles */
      .principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
      .principle { border-top: 3px solid var(--amber-bright); padding-top: 14px; }
      .principle h3 { font-size: 1.3rem; margin-bottom: 6px; }
      .principle p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

      /* sources page */
      .source-group { margin-bottom: 40px; }
      .source-group h3 { font-size: 1.5rem; margin-bottom: 14px; }
      .source-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
      .source-list li { border: 1px solid var(--line-soft); background: var(--surface); border-radius: 10px; padding: 16px 20px; }
      .source-list .src-title { font-weight: 600; }
      .source-list p { margin: 4px 0 0; font-size: 0.94rem; color: var(--ink-soft); }

      /* footer */
      footer { border-top: 1px solid var(--line-soft); background: var(--bg-soft); margin-top: 0; }
      .footer-in { padding: 52px 0 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
      @media (max-width: 900px) { .footer-in { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 520px) { .footer-in { grid-template-columns: 1fr; } }
      footer h4 { font-size: 1.05rem; margin-bottom: 12px; font-family: var(--serif-body); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
      footer ul { list-style: none; padding: 0; margin: 0; }
      footer li { margin-bottom: 8px; }
      footer a { color: var(--ink-soft); text-decoration: none; font-size: 0.97rem; }
      footer a:hover { color: var(--amber); }
      .footer-note { border-top: 1px solid var(--line-soft); padding: 20px 0 30px; font-size: 0.88rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between; }
      .footer-brand p { color: var(--ink-soft); font-size: 0.97rem; max-width: 21rem; }

      .age-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 1.4em 0; }
      .age-card { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 20px 22px; }
      .age-card h3 { font-size: 1.3rem; margin-bottom: 4px; }
      .age-card .ages { color: var(--amber); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; }
      .age-card p, .age-card li { font-size: 0.97rem; color: var(--ink-soft); }
      .age-card ul { padding-left: 1.15em; margin-bottom: 0; }
      .pull { font-family: var(--serif-display); font-size: clamp(1.5rem, 2.6vw, 1.9rem); font-style: italic; line-height: 1.4; color: var(--teal-deep); max-width: 40rem; }
      @media (prefers-color-scheme: dark) { .pull { color: var(--ink); } }