/* counting-dogs-tails -- "Blackwater" identity tokens (per swamp-ops/docs/swamplink-umbrella/plan.md ยง6), same instrument-panel shell/rail/panel/badge system as wings.swamplink.com and plates.swamplink.com so the sibling sites read as one family. This site is server-rendered (no client-side view switching, no map, no calculator), so the panel is trimmed to what a thin citation site needs: headline stat blocks, question sections, figure cards, breed pages, and tables. Dark is the native Blackwater look and is the default; the light override exists for the toggle, not because it's the primary design. */ :root { --paper: #0e1214; --card: #161c1f; --well: #1b2225; --line: #263133; --rule: #33403f; --ink: #dce4e2; --dim: #7f9089; --faint: #5c6b66; /* Shallows teal marks provenance and interaction. Tannin (amber) is reserved for "read this with care": preliminary status, caveats. */ --stamp: #4fa08f; --stamp-soft: #3a7a6d; --measured: #4fa08f; --study: #6f9fe0; --industry: #a888e0; --estimate: #e8b13f; --bad: #c1554a; --field: #10161a; --hatch: rgba(232,177,63,.14); --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --display: 'Bitter', Georgia, serif; --body-font: 'Alegreya Sans', system-ui, -apple-system, sans-serif; } :root[data-theme="light"] { --paper: #f3f1ea; --card: #fbfaf5; --well: #eae6d9; --line: #ddd6c4; --rule: #b9b096; --ink: #1c1712; --dim: #5d5443; --faint: #8a8065; --stamp: #2f7d6d; --stamp-soft: #4fa08f; --measured: #2f7d6d; --study: #3a5fb0; --industry: #7d55c2; --estimate: #a8730f; --bad: #a13f34; --field: #ffffff; --hatch: rgba(168,115,15,.14); } /* Fonts load from a in the templates' , not an @import here -- an @import below other rules is invalid CSS and silently dropped. */ * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--paper); color: var(--ink); font: 15.5px/1.62 var(--body-font); } a { color: var(--stamp); } :focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; } /* Quiet family bar -- hub chrome is the template. */ .chrome { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 1rem; max-width: 1000px; margin: 0 auto; padding: 0.85rem 22px 0.7rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; } .chrome .home { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; } .chrome .home:hover { color: var(--stamp); } .chrome .home svg { width: 0.95rem; height: 0.95rem; flex: none; } .chrome nav { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 1.1rem; flex: 1; min-width: 0; margin: 0; border: 0; } .chrome nav a { color: var(--dim); text-decoration: none; white-space: nowrap; } .chrome nav a:hover { color: var(--ink); } #swampid-link { flex: none; } @media (max-width: 400px) { .chrome { gap: 0.4rem; font-size: 0.7rem; } .chrome nav { gap: 0.45rem; } .chrome .home .word { display: none; } #swampid-link { margin-left: 0.35rem !important; } } /* --------------------------------------------------------------- shell */ .shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 38px; max-width: 1000px; margin: 0 auto; padding: 0 22px 90px; align-items: start; } @media (max-width: 900px) { .shell { grid-template-columns: minmax(0, 1fr); gap: 0; } } .rail { position: sticky; top: 0; padding: 30px 0 40px; } @media (max-width: 900px) { .rail { position: relative; padding: 26px 0 4px; } } .brand { display: flex; flex-direction: column; gap: 8px; } h1 { font-family: var(--display); font-weight: 800; font-size: clamp(23px, 2.4vw, 28px); margin: 0; line-height: 1.1; letter-spacing: -0.01em; } .sub { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.02em; color: var(--estimate); margin: 0; max-width: 15ch; font-style: normal; } .spot { color: var(--dim); margin: 0; font-size: 12.5px; max-width: 34ch; line-height: 1.55; padding-top: 12px; border-top: 1px solid var(--line); } .lnk { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--stamp); border-bottom: 1px solid var(--stamp-soft); } .lnk:hover { color: var(--ink); border-bottom-color: var(--ink); } a.lnk { border-bottom: 1px solid var(--stamp-soft); text-decoration: none; } .rail nav { display: flex; flex-direction: column; margin: 26px 0 22px; border-left: 1px solid var(--line); } .rail nav a { background: none; border: 0; border-left: 2px solid transparent; margin-left: -1px; text-align: left; display: block; text-decoration: none; color: var(--dim); padding: 6px 0 6px 13px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; line-height: 1.35; } .rail nav a:hover { color: var(--ink); } .rail nav a.on { color: var(--stamp); border-left-color: var(--stamp); font-weight: 500; } @media (max-width: 900px) { .rail nav { flex-direction: row; flex-wrap: nowrap; border-left: 0; border-bottom: 1px solid var(--line); margin: 16px 0 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail nav::-webkit-scrollbar { display: none; } .rail nav a { border-left: 0; border-bottom: 2px solid transparent; margin: 0 0 -1px; padding: 13px 14px 13px 0; white-space: nowrap; flex: none; } .rail nav a.on { border-bottom-color: var(--stamp); } } .main { padding: 30px 0 0; min-width: 0; } @media (max-width: 900px) { .main { padding-top: 4px; } } /* --------------------------------------------------------------- panels */ .panel { background: var(--card); border: 1px solid var(--line); padding: 20px 22px; margin-bottom: 14px; } section.q { margin-bottom: 28px; } section.q h2 { font-family: var(--display); font-size: 19px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; } /* --------------------------------------------------------------- stats */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 4px 0 8px; } .stat { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; } .stat .figure-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .stat .figure-value { font-family: var(--display); font-weight: 800; font-size: 32px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .stat .figure-unit { font-family: var(--mono); color: var(--dim); font-size: 11.5px; } .stat .figure-subject { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.5; } .stat .stat-caveat { font-size: 11.5px; color: var(--faint); margin-top: 2px; } .stat a.stat-link { text-decoration: none; } /* -------------------------------------------------------------- badges Evidence grades. "verified" figures ink solid in the measured colour; "preliminary" ones stay dashed and hatched -- a figure this project has not fully sourced yet must look different everywhere it appears. */ .badge { font-family: var(--mono); font-size: 9.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; padding: 2px 6px; border-radius: 0; border: 1px solid; background: transparent; } .badge.verified { color: var(--measured); border-color: var(--measured); } .badge.preliminary { color: var(--estimate); border-color: var(--estimate); border-style: dashed; background: repeating-linear-gradient(45deg, transparent 0 3px, var(--hatch) 3px 4px); } /* --------------------------------------------------------- figure cards */ .figure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 800px) { .figure-grid { grid-template-columns: 1fr; } } .figure-card { background: var(--card); border: 1px solid var(--line); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; } .figure-value-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .figure-value { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .figure-unit { font-family: var(--mono); color: var(--dim); font-size: 12.5px; } .figure-subject { margin: 0; font-size: 14px; color: var(--dim); line-height: 1.5; } .figure-meta { font-size: 11.5px; font-family: var(--mono); color: var(--faint); margin-top: 4px; } .figure-meta a { color: var(--stamp-soft); } .figure-caveats { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--faint); } .figure-caveats li { margin-bottom: 2px; } /* ---------------------------------------------------------- breed page */ .breed-measure { margin: 0 0 24px; } .breed-measure h3 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin: 0 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px; } /* -------------------------------------------------------- breeds index */ .breed-list { columns: 3 220px; column-gap: 22px; } @media (max-width: 700px) { .breed-list { columns: 2 160px; } } .breed-list a { display: block; padding: 5px 0; text-decoration: none; color: var(--ink); font-size: 13.5px; break-inside: avoid; } .breed-list a .n { color: var(--faint); font-family: var(--mono); font-size: 11px; } .breed-list a:hover { color: var(--stamp); } /* --------------------------------------------------------------- tables */ table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); } th { font-family: var(--mono); color: var(--faint); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; } td.num { text-align: right; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; } .note { color: var(--faint); font-size: 13px; } .muted { color: var(--dim); font-size: 14px; margin: 0 0 16px; max-width: 72ch; } .muted a, .figure-meta a { overflow-wrap: anywhere; } h3 { margin: 0 0 5px; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } .err { color: var(--bad); font-size: 13px; margin: 10px 0 0; border-left: 2px solid var(--bad); padding-left: 10px; } .btn { background: transparent; color: var(--dim); border: 1px solid var(--rule); border-radius: 0; padding: 8px 13px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; cursor: pointer; } .btn:hover { border-color: var(--stamp); color: var(--stamp); } #theme-toggle { margin-top: 20px; width: 100%; } @media (max-width: 900px) { #theme-toggle { position: absolute; top: 28px; right: 0; width: auto; margin-top: 0; padding: 12px 13px; } } /* Build stamp. */ footer.build { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; } footer.build .sep { color: var(--line); } footer.build code { font-family: var(--mono); font-size: 11px; color: var(--dim); } footer.build .ver { color: var(--dim); font-weight: 600; } /* Family cross-link strip -- shared shape across the counting-* family, generated by swamp-ops/scripts/sync_family_strip.py in the sibling projects; hand-maintained here until this repo is wired into that generator. */ .family { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; max-width: 1000px; margin: 8px auto 0; padding: 14px 22px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--faint); } .family a { color: var(--dim); text-decoration: none; } .family a:hover { color: var(--stamp); } /* -------------------------------------------------------- disclaimer/md */ .md-body { color: var(--dim); line-height: 1.7; max-width: 68ch; } .md-body h2 { font-family: var(--display); font-size: 19px; color: var(--ink); margin: 20px 0 8px; } .md-body h2:first-child { margin-top: 0; } .md-body h3 { font-family: var(--display); font-size: 16px; color: var(--ink); margin: 18px 0 6px; text-transform: none; letter-spacing: normal; } .md-body p { margin: 0 0 12px; }