/* K1BTC Station Log — tokens
* Dark by default. Light values exist only for print.
* Colour is oklch: two accents share lightness and chroma and differ only in hue,
* so amber and green read as the same "lamp" at two frequencies — the way a rig's
* display and its S-meter do.
*/
:root {
/* ---- surface --------------------------------------------------------- */
--bg: oklch(0.170 0.009 135); /* page. near-black with a faint olive cast */
--bg-raised: oklch(0.205 0.009 135); /* photo placeholder fill, hatch ground */
--rule: oklch(0.315 0.010 135); /* structural: year markers, band cells */
--rule-soft: oklch(0.245 0.009 135); /* the ruled lines of the log book */
/* ---- ink ------------------------------------------------------------- */
--fg: oklch(0.885 0.012 95); /* body prose */
--fg-dim: oklch(0.660 0.011 95); /* dates, secondary prose */
/* Measured, not asserted: 0.575 renders 4.38:1 on --bg, which misses the AA
floor this token is documented to sit on (decisions.md, "do not darken it
again"). 0.582 is the first step that clears 4.5:1 — 4.52:1. */
--fg-faint: oklch(0.582 0.010 95); /* labels, captions, times, empty state gutter */
/* ---- accents (2 only) ------------------------------------------------ */
--amber: oklch(0.775 0.125 75); /* section headers, links, callsign mark, 73 */
--green: oklch(0.775 0.125 152); /* QSO data lines, active bands */
--amber-hover: oklch(0.860 0.130 78);
--amber-underline: oklch(0.775 0.125 75 / 0.35);
--green-edge: oklch(0.775 0.125 152 / 0.40);
--green-select:oklch(0.775 0.125 152 / 0.28);
/* ---- type ------------------------------------------------------------ */
/* One family. No web fonts. A ham's page is monospace because a log is
column-aligned and a rig's display has no other option. Long prose is kept
to 64ch and 1.65 line-height, which is what makes mono readable at length. */
--mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
--t-body: 15px; /* log prose */
--t-data: 14px; /* station table values, Elsewhere rows */
--t-date: 13px; /* gutter date */
--t-meta: 12px; /* QSO data line, section headers */
--t-label: 11px; /* uppercase labels, times, captions, nav */
--t-micro: 10px; /* band-cell mode list */
--t-callsign: 44px;
--lh-prose: 1.65;
--ls-label: 0.12em;
--ls-head: 0.20em;
--ls-data: 0.06em;
/* ---- measure & rhythm ------------------------------------------------ */
--page-max: 900px;
--page-pad: 32px;
--gutter: 12ch; /* date column. 12ch fits YYYY-MM-DD plus air */
--gutter-gap: 28px;
--measure: 64ch; /* prose line length */
--entry-pad: 22px; /* vertical padding inside a log entry */
--section-gap:64px;
--navbar-h: 42px; /* year markers stick directly under the nav bar */
/* ---- print ----------------------------------------------------------- */
--print-bg: #ffffff;
--print-fg: #111111;
--print-dim: #5b584f;
--print-rule: #c9c6bd;
--print-body: 10pt;
--print-margin:16mm;
}
/* K1BTC Station Log — layout
* One file, no JavaScript, no web fonts.
* Everything is one of four things: a ruled row, a data pair, a band cell, or prose.
*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--fg);
font-family: var(--mono);
font-size: var(--t-body);
line-height: var(--lh-prose);
-webkit-font-smoothing: antialiased;
text-wrap: pretty;
}
a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-underline); }
a:hover { color: var(--amber-hover); border-bottom-color: currentColor; }
::selection { background: var(--green-select); }
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad) 96px; }
/* --- nav ---------------------------------------------------------------
* A 41px bar, sticky, no title and no date. It exists so a 400-entry page
* is navigable, not to announce anything. */
.nav {
position: sticky; top: 0; z-index: 5;
display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
padding: 11px 0 10px;
background: var(--bg);
border-bottom: 1px solid var(--rule-soft);
}
.nav__call { font-size: var(--t-meta); letter-spacing: 0.16em; color: var(--amber); }
.nav__links { display: flex; gap: 20px; font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; }
.nav__links a { color: var(--fg-dim); border-bottom: none; }
/* --- station -----------------------------------------------------------
* The only section that is always current, so it goes first and carries the
* page's one piece of large type: the callsign. Nothing else exceeds 16px. */
.station { padding: 56px 0 8px; }
.callsign { margin: 0; font-size: var(--t-callsign); font-weight: 500; letter-spacing: 0.06em; line-height: 1; }
.standfirst { margin: 14px 0 0; font-size: 13px; color: var(--fg-dim); max-width: 60ch; }
/* Data pairs: 13ch label column, hairline above each row. A rig info screen. */
.facts { display: grid; grid-template-columns: 13ch 1fr; margin: 40px 0 0; font-size: var(--t-data); }
.facts dt {
padding: 7px 0; border-top: 1px solid var(--rule-soft);
font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint);
}
.facts dd { margin: 0; padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.facts dt:last-of-type, .facts dd:last-of-type { border-bottom: 1px solid var(--rule-soft); }
/* Band strip: eleven cells, wrapping. Worked bands are lit green with a solid
* edge; unworked are dashed and faint. This is a band plan, read left to right
* low to high, and it stays true whether or not anyone logs anything. */
.bands { margin: 36px 0 0; }
.bands__label { font-size: var(--t-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-faint); margin-bottom: 12px; }
.bands__strip { display: flex; flex-wrap: wrap; gap: 6px; }
.band { min-width: 66px; padding: 7px 9px; text-align: center; border: 1px solid var(--green-edge); }
.band__n { font-size: 13px; color: var(--green); }
.band__m { font-size: var(--t-micro); letter-spacing: var(--ls-data); color: var(--fg-faint); }
.band--off { border: 1px dashed var(--rule); }
.band--off .band__n { color: var(--fg-faint); }
/* --- sections ----------------------------------------------------------- */
.section { padding: var(--section-gap) 0 0; }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 10px; }
.section__head h2 { margin: 0; font-size: var(--t-meta); font-weight: 500; letter-spacing: var(--ls-head); text-transform: uppercase; color: var(--amber); }
.section__note { font-size: var(--t-label); letter-spacing: var(--ls-data); color: var(--fg-faint); }
/* --- log ---------------------------------------------------------------
* The page. Every entry is the same ruled row: date gutter left, contact line
* and prose right. No cards, no shadows, no per-entry chrome — the cost of an
* entry is one hairline, which is what makes 400 of them survivable.
*
* Recency is deliberately not staged. There is no hero, no "latest", no large
* date, no relative time. The newest entry is simply the first row under the
* first year marker, and a six-month gap between it and today reads as a log
* that hasn't needed writing in, not a site that has stopped. */
.year {
position: sticky; top: var(--navbar-h); z-index: 4;
background: var(--bg); border-top: 1px solid var(--rule);
padding: 6px 0; font-size: var(--t-label); letter-spacing: var(--ls-head); color: var(--fg-faint);
}
.entry, .row {
display: grid; grid-template-columns: var(--gutter) 1fr; gap: 0 var(--gutter-gap);
border-top: 1px solid var(--rule-soft);
}
.entry { padding: var(--entry-pad) 0; }
.entry:last-child { border-bottom: 1px solid var(--rule-soft); }
.entry__date { font-size: var(--t-date); color: var(--fg-dim); }
.entry__time { font-size: var(--t-label); color: var(--fg-faint); }
/* The QSO line is the paper log's columns collapsed into one string:
band · mode · call · frequency · report. Green because it is instrument data. */
.qso { font-size: var(--t-meta); letter-spacing: var(--ls-data); color: var(--green); margin-bottom: 8px; }
.entry p { margin: 0; max-width: var(--measure); }
.entry p + p { margin-top: 14px; }
/* --- contacts table ----------------------------------------------------
* The full record. Dense, column-aligned, tabular figures. It sits below the
* written entries: the writing is the page, the table is the evidence. One
* hairline per row and nothing else per row, which is what lets it hold 1,200
* rows without becoming a scrolling cost. thead is sticky under the nav and
* repeats on every printed page. */
.qsos { padding-top: 56px; }
.qsos h3 { margin: 0; font-size: var(--t-label); font-weight: 500; letter-spacing: var(--ls-head); text-transform: uppercase; color: var(--fg-faint); }
.qsos__foot { margin: 14px 0 0; font-size: var(--t-label); color: var(--fg-faint); max-width: var(--measure); }
.qsotable { width: 100%; border-collapse: collapse; font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.qsotable th {
text-align: left; font-weight: 500; padding: 7px 12px 7px 0;
font-size: var(--t-micro); letter-spacing: var(--ls-label); text-transform: uppercase;
color: var(--fg-faint); background: var(--bg);
border-bottom: 1px solid var(--rule);
position: sticky; top: var(--navbar-h); z-index: 3;
}
.qsotable td { padding: 5px 12px 5px 0; border-bottom: 1px solid var(--rule-soft); color: var(--fg-dim); white-space: nowrap; vertical-align: baseline; }
.qsotable td:nth-child(3) { color: var(--fg); } /* the callsign */
.qsotable td:last-child { color: var(--green); padding-right: 0; text-align: right; }
/* The year row's lone td is also :last-child, so it loses to the QSL-column
rule above unless it is scoped tighter. */
.qsotable tr.qso-year td {
color: var(--fg-faint); letter-spacing: var(--ls-head); font-size: var(--t-micro);
text-align: left; padding: 16px 12px 5px 0;
border-bottom: 1px solid var(--rule);
}
.photo { margin: 18px 0 0; max-width: 520px; }
/* The markup is 
, not an inline