html { background: #000; }
body { margin: 0; background: #000; color: #e8e4dc; font: 20px/1.65 Georgia, "Times New Roman", "Iowan Old Style", serif; }
.sheet { max-width: 760px; margin: 0 auto; padding: 56px 28px 80px; }
.logo { display: block; width: 300px; max-width: 70%; margin: 0 auto 8px; }
.motto { text-align: center; font-style: italic; color: #cfc7b8; letter-spacing: .04em; margin: 0 0 6px; }
.motto b { font-style: normal; font-weight: normal; letter-spacing: .18em; text-transform: uppercase; font-size: 17px; color: #fff; }
.motto small { display: block; font-size: 19px; color: #8f887c; letter-spacing: .02em; margin-top: 2px; }
.lede { text-align: center; font-style: italic; color: #cfc7b8; font-size: 22px; margin: 34px auto 0; max-width: 640px; }
h1 { font-weight: normal; font-size: 30px; letter-spacing: .01em; color: #fff; margin: 40px 0 12px; text-align: center; }
h2 { font-weight: normal; font-size: 30px; letter-spacing: .01em; color: #fff; margin: 18px 0 12px; }
h2::before { content: "· "; color: #8f887c; }
h3 { font-weight: normal; font-size: 22px; color: #fff; margin: 28px 0 8px; letter-spacing: .02em; }
p { margin: 0 0 16px; }
strong { color: #fff; font-weight: 600; }
em { color: #cfc7b8; }
a { color: #fff; text-decoration: none; border-bottom: 1px solid #4a463f; }
a:hover { border-bottom-color: #fff; }
ul, ol { padding-left: 1.1em; margin: 0 0 16px; }
li { margin: 0 0 10px; }
code, pre { font: 17px/1.5 "SF Mono", Menlo, Consolas, monospace; color: #fff; }
pre { background: #0d0c0b; border: 1px solid #262420; padding: 14px 16px; overflow-x: auto; margin: 0 0 18px; }
code { background: #0d0c0b; padding: 1px 5px; border-radius: 3px; }
table { border-collapse: collapse; margin: 0 0 18px; width: 100%; font-size: 18px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #262420; vertical-align: top; }
th { color: #8f887c; font-weight: normal; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.wave { text-align: center; margin: 40px 0 6px; } .wave svg { max-width: 100%; height: auto; }
.rule { text-align: center; color: #8f887c; letter-spacing: .6em; margin: 44px 0; font-size: 20px; }
.last { text-align: center; font-size: 26px; font-style: italic; color: #fff; margin-top: 40px; }
.dots { text-align: center; font-size: 34px; letter-spacing: .5em; color: #fff; margin: 48px 0 0; }
.date { text-align: center; color: #fff; font-size: 26px; letter-spacing: .3em; margin: 8px 0 0; }
.date small { display: block; font-size: 20px; letter-spacing: .06em; color: #cfc7b8; margin-top: 6px; }
.colophon { text-align: center; color: #8f887c; font-size: 17px; margin-top: 60px; letter-spacing: .04em; }
/* The motto is the quiet door to the folder (Vincent, 2026-10-25): the page is the ten-second
   path, this is "own it when you care". It must not announce itself as a button -- same colour,
   same size, no underline until you are already on it. */
a.colophon { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
a.colophon:hover, a.colophon:focus { border-bottom-color: #8f887c; }
.files a { display: block; padding: 10px 0; border-bottom: 1px solid #262420; }
.files a small { color: #8f887c; margin-left: 10px; font-size: 16px; }
.note { border-left: 2px solid #4a463f; padding-left: 14px; color: #cfc7b8; }
.warn { border-left: 2px solid #c8a24a; padding-left: 14px; color: #fff; }
.wave[data-sec] { cursor: pointer; outline: none; }
.wave[data-sec]::after { content: "listen"; display: block; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #4a463f; margin-top: 4px; opacity: 0; transition: opacity .3s; }
.wave[data-sec]:hover::after, .wave.playing::after { opacity: 1; }
.wave.playing::after { content: "· · ·"; color: #8f887c; }
.hint { text-align: center; font-style: italic; color: #8f887c; font-size: 17px; margin: 18px auto 0; max-width: 560px; }
.news { margin: 44px auto 0; max-width: 420px; text-align: center; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.news label { font-style: italic; color: #cfc7b8; font-size: 22px; }
.news .news-q { font-size: 18px; margin-top: 6px; }
.news input[type=email], .news input[type=text]#news-a { width: 100%; box-sizing: border-box; background: #0d0c0b; border: 1px solid #3a3731; color: #fff; font: 19px Georgia, serif; padding: 10px 14px; border-radius: 3px; text-align: center; }
.news input:focus { outline: none; border-color: #8f887c; }
.news input[type=text]#news-a { max-width: 200px; }
.news button { margin-top: 6px; background: #fff; color: #000; border: 0; font: 15px Georgia, serif; letter-spacing: .25em; text-transform: uppercase; padding: 11px 28px; border-radius: 3px; cursor: pointer; }
.news button:hover { background: #cfc7b8; }
.news-out { min-height: 1.6em; margin: 4px 0 0; color: #fff; font-style: italic; }
.news-note { color: #6f6960; font-size: 16px; margin: 0; }

/* A QUIET TOP ROW, NOT TABS (2026-10-10, Vincent: "shall we also have a menu on top for update
   etc"). The argument for it is the RETURNING MEMBER: he must not have to scroll the whole pitch to
   reach his own wallet. The argument against tabs is the FIRST-TIME READER: he must not be asked to
   choose before he knows anything. So this is the same grey and the same letterspacing as a table
   heading -- skimmed past on the first visit, used on the second. If it ever starts competing with
   the mark for attention, it has become tabs and it is wrong. */
.nav { text-align: center; margin: 0 0 30px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.nav a { color: #8f887c; border-bottom: none; padding: 0 .45em; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav i { color: #332f2a; font-style: normal; }

/* THE KIT PHOTO (2026-10-10). A reader who has never seen one of these cannot match four words in a
   table to four objects in a box; the pigtail and the battery lead especially read as "spare bits"
   and get left in the packaging. The picture is doing work, so it sits with the list, not as
   decoration at the top. */
.kit { display: block; width: 360px; max-width: 100%; margin: 6px auto 4px; border: 1px solid #262420; background: #0d0c0b; }
.cap { text-align: center; font-style: italic; color: #8f887c; font-size: 17px; margin: 0 auto 26px; max-width: 560px; }

/* THE ONE THING TO CLICK (2026-10-10). A search link, not a product link: a search never 404s, it
   is not an affiliate, and it survives a seller going away. Styled as the page's one call to
   action, which is why there is exactly one of them per page. */
.go { text-align: center; margin: 24px 0 30px; }
.go a { display: inline-block; border: 1px solid #4a463f; border-bottom: 1px solid #4a463f; padding: 10px 28px; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: #cfc7b8; }
.go a:hover { border-color: #fff; color: #fff; }

/* THE NAME, CENTRED (Vincent, 2026-10-11). It was left-aligned body copy sitting between a centred
   photo and a centred button, so the one line a buyer has to carry to a shop read as a footnote.
   It belongs to the photo block, not to the prose. The .namesub under it answers "there is many
   right?" -- Heltec sells a dozen look-alikes (Stick, Tracker, Paper, and a WiFi Kit 32 with the
   same screen and no radio at all), and half the listings are resellers' own names: hardware/
   ORDERED.md, our four boards came as Aideepen. So the model is named here and the BAND is left to
   the section below, which already does that job properly. */
.name { text-align: center; color: #fff; font-size: 21px; margin: 4px auto 8px; max-width: 560px; }
.namesub { text-align: center; color: #8f887c; font-size: 17px; margin: 0 auto 4px; max-width: 520px; }