/* THE FAMILY STRIP — the one stylesheet, served from https://www.hoodedhawk.com/family/strip.css and linked by every site. Generated from nothing: this file IS the source. Runbook 10.32. WHAT IS HERE AND WHAT IS NOT. Here: the strip's own layout, typography, marker, responsive form and print rule — everything that should look identical on all five sites. NOT here: colour, and how the strip sits in a page. Those differ per site on purpose (John, 2026-09-08: the strip takes the PAGE's own ground and ink and follows its theme, with the one warm rule as the only divider). Each site maps its own tokens onto the five variables below, which is five lines in that site's stylesheet instead of the forty this file used to cost it. .hh-strip { --strip-bg: var(--bg); the page's own ground --strip-ink: var(--fg); the page's strongest ink --strip-muted: var(--muted); the resting link colour --strip-edge: var(--rule); the crest's hairline --strip-accent: var(--gold); the one warm rule, and hover } The defaults below are a parchment/ink pair so that a site which maps nothing still renders a legible strip rather than an invisible one. EVERY RULE IS QUALIFIED WITH .hh-strip, and that is not tidiness. On Books a bare `.hh-links a` lost to `.books-reading a` further down that file, and the strip's links rendered brass on the reading site from the day it shipped. Keep the scope. */ .hh-strip { --strip-bg: #fbf8f2; --strip-ink: #1d1a16; --strip-muted: #5b554d; --strip-edge: #d9d2c5; --strip-accent: #8b6914; box-sizing: border-box; display: flex; align-items: center; gap: .5rem 1.1rem; padding: 0 1rem; height: 34px; background: var(--strip-bg); color: var(--strip-muted); border-bottom: 2px solid var(--strip-accent); /* If the links ever outgrow the width, the STRIP scrolls inside itself and the page does not. Books learned that one the hard way: a nowrap row that cannot fold makes the whole page scroll sideways, and every other surface comes along with it. */ overflow-x: auto; scrollbar-width: none; white-space: nowrap; } @media (prefers-color-scheme: dark) { .hh-strip { --strip-bg: #17150f; --strip-ink: #ece7dd; --strip-muted: #b3aca0; --strip-edge: #3d382e; --strip-accent: #c79a3f; } } .hh-strip::-webkit-scrollbar { display: none; } .hh-strip .hh-crest { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--strip-ink); flex: 0 0 auto; } .hh-strip .hh-crest img { height: 24px; width: auto; border-radius: 3px; border: 1px solid var(--strip-edge); display: block; } .hh-strip .hh-crest:hover img { border-color: var(--strip-accent); } /* The wordmark is the one line the sites were always meant to differ on: each used its own display serif. A site that wants its own sets `.hh-strip .hh-word { font-family: … }` and nothing else changes. */ .hh-strip .hh-word { font-family: Georgia, serif; font-variant-caps: small-caps; font-weight: 600; font-size: 1.02rem; letter-spacing: .05em; line-height: 1; } .hh-strip .hh-crest:hover .hh-word { color: var(--strip-accent); } .hh-strip .hh-links { display: inline-flex; align-items: center; gap: 1rem; margin-left: auto; font: 500 .68rem/1 system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; } .hh-strip .hh-links a { color: var(--strip-muted); text-decoration: none; padding: 9px 0 7px; border-bottom: 2px solid transparent; } .hh-strip .hh-links a:hover, .hh-strip .hh-links a[aria-current] { color: var(--strip-ink); border-bottom-color: var(--strip-accent); } /* WHICH SITE AM I. The markup is identical everywhere — no per-site variant — so the current site is marked in CSS from one attribute on : . strip.js sets it from the hostname when it is missing, which is how the hand-written article pages get marked without being edited individually. */ body[data-hh-site="blog"] .hh-strip .hh-links a[data-site="blog"], body[data-hh-site="coins"] .hh-strip .hh-links a[data-site="coins"], body[data-hh-site="books"] .hh-strip .hh-links a[data-site="books"], body[data-hh-site="watches"] .hh-strip .hh-links a[data-site="watches"], body[data-hh-site="toc"] .hh-strip .hh-links a[data-site="toc"] { color: var(--strip-ink); border-bottom-color: var(--strip-accent); } @media (max-width: 600px) { .hh-strip { height: 30px; padding: 0 .75rem; gap: .5rem .8rem; } .hh-strip .hh-crest img { height: 21px; } .hh-strip .hh-word { display: none; } .hh-strip .hh-links { gap: .8rem; font-size: .62rem; } .hh-strip .hh-links a { padding: 8px 0 6px; } } @media print { .hh-strip { display: none; } }