/* Alpine Topo: dusk at a trailhead. Bricolage Grotesque titles, Archivo to read, DM Mono for numbers, ember as the
   one accent, contour lines in the hero. Overrides the Journal base only while html[data-theme="topo"]. */
:root[data-theme="topo"] {
  --bg: #f1efe8; --surface: #ffffff; --ink: #1a1c1a; --muted: #5f6660; --line: #d6d3c8;
  --accent: #c2501e; --accent-soft: #f7e4d9; --warn: #8a5a12; --warn-soft: #fbf1df; --rule: transparent;
  --board: #cfcbc0; --hole: rgba(26, 28, 26, .5);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --text: "Archivo", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2'%3E%3Cpath d='M-10 40c40-20 70 10 110-5s60-30 150-5'/%3E%3Cpath d='M-10 70c50-25 80 15 120-2s60-25 140 0'/%3E%3Cpath d='M-10 105c35-15 75 20 115 5s70-30 145-2'/%3E%3Cpath d='M-10 140c45-10 70 25 120 8s65-28 140-4'/%3E%3Cpath d='M-10 178c40-18 85 18 125 2s55-22 135 3'/%3E%3Cpath d='M-10 212c50-12 75 22 118 6s70-26 142-1'/%3E%3Cellipse cx='170' cy='120' rx='28' ry='14'/%3E%3Cellipse cx='170' cy='120' rx='14' ry='6'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="topo"] {
    --bg: #0f1211; --surface: #181c1a; --ink: #ecebe5; --muted: #9ba39c; --line: #2c322e;
    --accent: #f07a3a; --accent-soft: #33211a; --warn: #e7b866; --warn-soft: #33281a;
    --board: #1d211f; --hole: rgba(0, 0, 0, .65);
  }
}
[data-theme="topo"] body { background-image: none; }
[data-theme="topo"] h1, [data-theme="topo"] h2, [data-theme="topo"] .group legend { font-family: var(--display); font-style: normal; font-variation-settings: normal; letter-spacing: -.01em; }
[data-theme="topo"] .hero h1 { font-weight: 800; font-size: clamp(42px, 11vw, 64px); text-decoration: underline 4px var(--accent); text-underline-offset: 10px; }
[data-theme="topo"] h2 { font-weight: 700; }

/* The hero: a darkened photo with contour lines rising from the bottom. */
[data-theme="topo"] .hero img { filter: brightness(.8) saturate(.9); }
[data-theme="topo"] .hero::before { background: var(--topo) 0 0 / 240px; mix-blend-mode: normal; opacity: .14;
  -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 85%); mask-image: linear-gradient(to top, #000 30%, transparent 85%); }
[data-theme="topo"] .hero::after { background: linear-gradient(to top, rgba(10,12,11,.92), rgba(10,12,11,.2) 65%); }
[data-theme="topo"] .eyebrow { color: #f07a3a; opacity: 1; }

/* Cards: an ember dot before each heading; picked rows get an ember edge. */
[data-theme="topo"] .card, [data-theme="topo"] .system { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
[data-theme="topo"] .system-head h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 10px; vertical-align: 4px; }
[data-theme="topo"] .item-top::before { display: none; }
[data-theme="topo"] .item-top { justify-content: space-between; }
[data-theme="topo"] .item:has(> input:checked) { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; margin-left: -10px; }
[data-theme="topo"] .src { font-variant: normal; letter-spacing: 0; }
[data-theme="topo"] .subtotal { color: var(--accent); font-weight: 500; }
[data-theme="topo"] .toc a { border-radius: 8px; }

/* The total bar: near-black, amount in ember, a solid ember button. */
[data-theme="topo"] .totalbar { background: #0f1211; color: #ecebe5; border-top: 1px solid #2c322e; }
[data-theme="topo"] .total-label, [data-theme="topo"] .total-split { color: #9ba39c; }
[data-theme="topo"] .total-amount { font-family: var(--mono); font-weight: 500; font-size: 30px; color: #f07a3a; }
[data-theme="topo"] .totalbar button { background: #f07a3a; border-color: #f07a3a; color: #0f1211; font-weight: 700; border-radius: 8px; }