/* ═══════════════════════════════════════════════════════════════════════════
desk.css — the desk's shared sheet.
Everything that is law on every Tekmor page: the voice, the tokens, the
base, the accessibility regimes, the chapter grammar, the masthead, the
door, the footer, the print base. Cut out of www/index.html verbatim on
30 Jul 2026, because a second page is impossible without cutting the
shared part out once.
TWO THINGS IN HERE ARE MEASUREMENTS, not preferences: the token block, and
the seven Georgia faces worn to Newsreader's per-cut advance widths — the
ones that hold CLS at 0.0000. They change together and they change
invisibly. A copy of a measurement is a measurement that will be wrong,
which is the whole reason this file exists exactly once.
www carries its token values as literals BY DESIGN — it sits outside
src/index.css's single-source rule, and it never themes. Do not "fix"
that; the point of this file is that the literals now live in one place.
Instruments stay inline with the page that draws them: the record, the
morning file, the rate card, the hero and its four claim display cuts.
A conduct page has no ledger.
The for the woff2 stays in each page's , never
in here: an @font-face in a linked sheet cannot start its download until
the sheet has parsed, which is a second serial hop for nothing.
Relative urls in this file resolve against THIS file, not the document —
fonts/newsreader-display.woff2 works because desk.css sits beside
index.html at the www root. Move the sheet into a subdirectory and the
voice goes silent.
Gate: node docs/brand/tekmor-www-verify/verify.mjs — ALL GREEN.
═══════════════════════════════════════════════════════════════════════ */
/* ── The desk's voice, self-hosted. Subset carries no italic and no ō:
font-synthesis pinned off, and the word is always “a tekmor”. ── */
@font-face {
font-family: "Newsreader";
src: url("fonts/newsreader-display.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
/* Georgia, worn to Newsreader's measurements per voice and per cut, so
nothing reflows when the type arrives. Newsreader's optical-size axis
gives every rendered size its own advance widths, so each display cut
carries its own worn Georgia; line metrics are Newsreader's own 74/26,
divided by size-adjust because the engine scales overrides with it.
All values measured in the harness; it asserts CLS holds at zero. */
@font-face { font-family: "Newsreader-fb-claim64"; src: local("Georgia"); size-adjust: 101.32%; ascent-override: 73.04%; descent-override: 25.66%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader-fb-claim49"; src: local("Georgia"); size-adjust: 98.12%; ascent-override: 75.42%; descent-override: 26.50%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader-fb-claim44"; src: local("Georgia"); size-adjust: 97.06%; ascent-override: 76.24%; descent-override: 26.79%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader-fb-claim34"; src: local("Georgia"); size-adjust: 94.93%; ascent-override: 77.95%; descent-override: 27.39%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader-fb-pull40"; src: local("Georgia"); size-adjust: 97.33%; ascent-override: 76.03%; descent-override: 26.71%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader-fb-pull32"; src: local("Georgia"); size-adjust: 95.90%; ascent-override: 77.16%; descent-override: 27.11%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader-fb-pull26"; src: local("Georgia"); size-adjust: 94.82%; ascent-override: 78.04%; descent-override: 27.42%; line-gap-override: 0%; }
/* ── The data voice, self-hosted too. Same cut as the desk app ships at
public/fonts/geist-mono-var.woff2 — both written by
scripts/subset-geist-mono.py, which writes to both destinations in one run.
Keep them the same file: the site and the desk speaking different monos is
exactly what branding the mono was meant to end. SIL OFL, licence beside
it at fonts/geist-OFL.txt.
ONE fallback, not seven. Newsreader needs a worn Georgia per display cut
because its optical-size axis gives every size its own advances. Geist Mono
has NO opsz axis, so a single size-adjust is correct at every size — do not
grow this into a per-size set. `block`, not swap: the mono is a data voice
and it must not reflow the record mid-paint. ── */
@font-face {
font-family: "Geist Mono";
src: url("fonts/geist-mono-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: block;
}
@font-face { font-family: "GeistMono-fb"; src: local("SF Mono"), local("SFMono-Regular"), local("Menlo"); size-adjust: 97.06%; ascent-override: 100.5%; descent-override: 29.5%; line-gap-override: 0%; }
/* ── Tokens — the identity book's dark sheet, the full elevation ladder.
www is pinned dark; it never themes. Faint ink is decoration only. ── */
:root {
--paper: #0c110f;
--surface: #131917;
--surface-hover: #1a221f;
--float: #1d2622;
--ink: #e6edea;
--ink2: #a8b6b0;
--ink3: #8a9992;
--ink4: #4f5b55;
--line: #232c28;
--line-strong: #2e3a34;
--em: #35c085;
--em2: #5fd3a4;
--tint: #0f2b20;
--onsolid: #06130f;
--ease: cubic-bezier(0.22, 0.7, 0.2, 1);
/* The data voice, named once. The app has --font-mono in src/index.css and
one edit there moved all 788 of its call sites; this is that token for the
site. Every rule that reaches for the mono — in this sheet and in each
page's own inline block — reads --mono, so the next face change is one
line here and none anywhere else. The instruments are the reason it
matters: a page whose LABELS are Geist and whose record, file rows and rate
card are the native stack shows two monos at once, which is worse than
either alone. */
--mono: "Geist Mono", "GeistMono-fb", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--paper); color-scheme: dark; }
body {
margin: 0;
background: var(--paper);
color: var(--ink2);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
font-synthesis: none;
font-feature-settings: "tnum" 1;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
/* Judged on the mono caps at 1× and 2×, not assumed — grey AA keeps the
tracked 10px caps whole on the dark canvas at both densities. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--em); color: var(--onsolid); }
h1, h2, h3 { margin: 0; font-weight: 500; color: var(--ink); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
em, strong { font-style: normal; font-weight: inherit; color: var(--ink); }
a { color: inherit; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--em); }
a:active { color: var(--em); text-decoration-color: var(--em); }
a, summary, .btn { transition: color 150ms var(--ease), background-color 150ms var(--ease), border-color 150ms var(--ease), text-decoration-color 150ms var(--ease); }
:focus-visible { outline: 2px solid var(--em); outline-offset: 3px; border-radius: 2px; }
#main, #proof, #room, #price, #door { scroll-margin-top: 16px; }
/* Reduced motion collapses every duration globally — the book's law. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}
/* More contrast, honoured with the sheet's own steps — hairlines and the
subtle inks each lift one rung. No new values, no parallel theme. */
@media (prefers-contrast: more) {
:root { --line: #2e3a34; --line-strong: #4f5b55; --ink3: #a8b6b0; --ink4: #8a9992; }
}
.shell { max-width: 1216px; margin: 0 auto; padding-left: clamp(20px, 4vw, 32px); padding-right: clamp(20px, 4vw, 32px); }
.measure { max-width: 34em; }
.serif { font-family: "Newsreader", "Newsreader-fb-pull40", Georgia, serif; font-weight: 500; }
.mono {
font-family: "Geist Mono", "GeistMono-fb", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink3); font-weight: 400;
}
.quiet { color: var(--ink4); }
.note { color: var(--ink3); font-size: 13px; line-height: 1.6; }
.stop { color: var(--em); }
.nw { white-space: nowrap; }
/* ◆ — the model voice, drawn rather than typed, which is the app's ruling
obeyed here. Every monospace this desk would ship lacks U+25C6, and CSS
fallback is per CODEPOINT: a typed ◆ silently renders from whatever the
platform happens to supply while the label beside it stays Geist Mono, so
the brand's own mark is a different shape on every client's machine. The
path is #mk-diamond in the page's and it carries currentColor, so
the mark wears the --em below exactly as the glyph did.
The box is the measurement marks.tsx took of the glyph it replaces: ink
0.600 em square, dipping 0.030 em below the baseline. An inline replaced
element sits its bottom edge ON the baseline, so a 0.6 em box spans
−0.6 → 0 and the translate puts the ink back where it was. */
.d {
color: var(--em);
display: inline-block; width: 0.6em; height: 0.6em;
vertical-align: baseline; transform: translateY(0.03em);
}
.skip {
position: absolute; left: -9999px; top: 0; z-index: 9;
background: var(--float); color: var(--ink); padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 4px;
}
.skip:focus { left: 12px; top: 12px; }
/* ── The button — the desk's one solid control: the hero's call and the door's
mailto today, /conduct's when it lands. It stayed on the front page through
the extraction only because of where it sat in the file; the sheet was
already naming it in the transition rule above, which is what a half-done
cut looks like.
IT MUST STAY BELOW `:focus-visible`, and the reason is not the one you
would guess. The link base above is safe by specificity in every state —
`.btn` (0,1,0) over `a` (0,0,1), `.btn:hover` (0,2,0) over `a:hover`
(0,1,1) — so order cannot touch it. `:focus-visible` is (0,1,0), exactly
`.btn`'s weight, and both set border-radius: 4px here, 2px there. Nothing
but source order separates them, and this block lifted above the focus ring
gives the button a 2px corner the moment it is tabbed to. MEASURED: hoisting
it was the one sabotage the neutrality walk caught, and it caught it in the
forced-:focus-visible pass and nowhere else. ── */
.btn {
display: inline-block; background: var(--em); color: var(--onsolid);
font-weight: 600; font-size: 13.5px; line-height: 1; padding: 11px 17px; border-radius: 4px;
border: 1px solid transparent; /* the control's edge when forced colors strip the fill */
text-decoration: none;
}
.btn:hover, .btn:active { background: var(--em2); color: var(--onsolid); }
/* ── Masthead — the mock in identity §9.2, obeyed; the door as a drawn control. ── */
.mast { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-top: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.wm { display: block; height: auto; color: var(--ink); }
.mast-links { display: flex; align-items: center; gap: 24px; white-space: nowrap; }
.mast-links a { text-decoration: none; }
.mast-links a.anchor:hover { color: var(--em); }
.mast-links a.open-desk { color: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; padding: 8px 13px; }
.mast-links a.open-desk:hover, .mast-links a.open-desk:active { background: var(--float); border-color: var(--em); color: var(--ink); }
/* ── Sections — hairline, eyebrow, pull: the books' own chapter grammar. ── */
.ch { border-top: 1px solid var(--line); padding-top: clamp(56px, 8vh, 96px); padding-bottom: clamp(64px, 9vh, 112px); }
.eyebrow { margin: 0 0 20px; }
.pull {
font-family: "Newsreader", "Newsreader-fb-pull40", Georgia, serif; font-weight: 500; color: var(--ink);
font-size: 40px; line-height: 1.24; letter-spacing: -0.008em;
max-width: 26em; margin: 0;
}
.ch-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 72px); align-items: start; margin-top: clamp(32px, 5vh, 56px); }
/* ── Door ── */
.door-line {
font-family: "Newsreader", "Newsreader-fb-pull40", Georgia, serif; font-weight: 500; color: var(--ink);
font-size: clamp(32px, 3.4vw, 48px); line-height: 1.15; letter-spacing: -0.008em; margin: 0;
}
.door-cta { margin-top: 32px; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.door-mail { font-family: "Geist Mono", "GeistMono-fb", ui-monospace, Menlo, monospace; font-size: 12.5px; letter-spacing: 0.02em; color: var(--ink2); }
.signin { margin-top: 16px; }
/* ── Footer — the drawn word takes its one larger moment, then quiet. ── */
.foot { border-top: 1px solid var(--line); padding-top: 48px; padding-bottom: 56px; }
.foot-lockup .mono { display: block; margin-top: 16px; font-size: 10px; letter-spacing: 0.14em; }
.foot-row { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin-top: 40px; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--em); }
.foot-notes { text-align: right; }
.foot-notes p { margin: 0; font-size: 12.5px; color: var(--ink3); line-height: 1.7; }
/* ── The widths between — the shared half: the display ladder steps down
band by band, the chapter body uncouples, the masthead sheds its
anchors, the footer's notes come back to the left margin. Each
component's own breakpoints stay inline with the page that draws it. ── */
@media (max-width: 1279px) {
.pull { font-size: 32px; font-family: "Newsreader", "Newsreader-fb-pull32", Georgia, serif; }
}
@media (max-width: 1023px) {
.ch-body { grid-template-columns: 1fr; gap: 40px; }
.pull { font-size: 26px; font-family: "Newsreader", "Newsreader-fb-pull26", Georgia, serif; }
}
@media (max-width: 767px) {
.pull br { display: none; }
}
@media (max-width: 640px) {
.mast-links { gap: 14px; }
.mast-links a.anchor { display: none; }
.foot-notes { text-align: left; }
}
/* ── Print — the shared half: the one-colour flip, the page box, and the
grammar that survives them. Light ground, the light sheet's inks,
emerald at its light value; nav, skip-link and button off; fills are left
to the paper. Hairlines take the same one-step lift the contrast regime uses —
paper is a low-contrast medium. The page box sits in the middle band, so
each page restates its own hanging compositions for it, inline. ── */
@media print {
html { color-scheme: light; }
:root {
--paper: #ffffff; --surface: #ffffff; --surface-hover: #ffffff; --float: #ffffff;
--ink: #14201c; --ink2: #46554f; --ink3: #5f6d67; --ink4: #8a968f;
--line: #d3dcd8; --line-strong: #8a968f;
--em: #0a6c46; --em2: #08523a; --tint: #e4f2ec; --onsolid: #ffffff;
}
/* The three controls that mean nothing on paper. .btn is here and not on the
page that draws it because a class whose paint travels and whose absence
from paper does not is a class that prints as an emerald slab on the next
page until someone remembers. The record's own summary stays inline: it is
an instrument's control, and instruments stay with the page. */
.skip, .mast-links, .btn { display: none; }
a { text-decoration: none; }
.ch { padding-top: 40px; padding-bottom: 48px; }
.ch-body { margin-top: 32px; }
.foot { padding-top: 32px; padding-bottom: 24px; }
.door-cta { break-inside: avoid; }
.eyebrow, h1, h2, h3 { break-after: avoid; }
.pull br { display: inline; }
}
@page { margin: 14mm 12mm 16mm; }