/* SNAPSTORYSAVER — "INDUSTRIAL QUOTE GRAMMAR" * * Chosen by Marcus 23 Aug 2026 over the assigned direction. The world is the * stockroom: white cotton and black nylon as ground and ink, hazard diagonals as * structure, a safety-orange zip-tie tag as the one accent, and every zone labelled * with its literal quoted name. Wayfinding is reading. * * Every value below was measured, not guessed. The contrast notes are real ratios * against the ground they sit on, and they are the reason the orange splits in two: * #FF5A00 on white is 2.87:1, which fails even the large-text floor, so the accent * can be a FIELD on light ground but never TEXT on it. On black it reaches 6.21:1 * and becomes text freely. A single --orange token would have quietly shipped * unreadable links on half the site. */ :root { color-scheme: light dark; /* ---- ground and ink ---------------------------------------------------- */ --base: #F5F5F5; /* stockroom cotton */ --base-sunk: #EAEAEA; /* recessed panels, input wells */ --ink: #0D0D0D; /* nylon black 17.83:1 on base */ --concrete: #5C5C5C; /* secondary prose 6.13:1 on base */ --steel: #BDBDBD; /* rules and borders only — 1.72:1, never text */ --steel-firm: #9A9A9A; /* a rule that must be seen against a busy field */ /* ---- the tag ------------------------------------------------------------ * --orange is a fill. --orange-ink is the same accent doing a text job, and it * is a different value on purpose. Using --orange for text is the one mistake * this palette makes easy, so the names refuse it. */ --orange: #FF5A00; --orange-ink: #C24400; /* accent AS TEXT on light ground 4.67:1 */ --orange-deep: #CC4800; /* pressed state of an orange field */ --on-orange: #0D0D0D; /* label on an orange field 6.21:1 */ /* ---- hazard ------------------------------------------------------------- * Structure at large scale, and the disabled mark at small. One definition so a * disabled control and a section rule are visibly the same material. */ --hazard-a: #0D0D0D; --hazard-b: #F5F5F5; --hazard: repeating-linear-gradient( 45deg, var(--hazard-a) 0 8px, var(--hazard-b) 8px 16px); --hazard-fine: repeating-linear-gradient( 45deg, var(--hazard-a) 0 4px, var(--hazard-b) 4px 8px); /* ---- type --------------------------------------------------------------- * Three faces, each with one job. Oswald is the DIN-condensed voice the world's * board specifies — display and every label plate. Plex Mono carries data only: * filenames, dates, counts, indices. Archivo carries sentence-case prose, because * the board's ALL-CAPS body rule is written for six-word garment copy and this * site has FAQ answers and 800-word notes. The world's own hero sets its lede in * sentence case, so this is the world's rule, not a departure from it. */ --face-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif; --face-prose: 'Archivo', ui-sans-serif, system-ui, sans-serif; --face-data: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Display tops out at 6rem. Tracking floor is -0.03em; the board asks for -10 * units, which is -0.01em at these sizes — condensed caps close up fast. */ --size-hero: clamp(2.75rem, 9vw, 6rem); --size-h1: clamp(2rem, 6vw, 3.5rem); --size-h2: clamp(1.5rem, 3.5vw, 2rem); --size-h3: 1.125rem; --size-body: 1rem; --size-small: 0.8125rem; --size-plate: 0.6875rem; /* label-plate captions */ --track-display: -0.02em; --track-label: 0.09em; /* small caps need air, not tightening */ --measure: 68ch; /* ---- structure ----------------------------------------------------------- */ --rule: 2px; /* the world draws in hard rules, not shadows */ --rule-heavy: 3px; --tab: 10px; /* width of the zip-tie tab on a control */ --shell: 1180px; --gap: 1.5rem; --step-1: 0.375rem; --step-2: 0.75rem; --step-3: 1.25rem; --step-4: 2rem; --step-5: 3.25rem; --step-6: 5rem; /* One authored moment: the tag swings once when an item is taken. Everything * else changes state instantly, because a stockroom label does not animate. */ --swing: 420ms cubic-bezier(0.22, 1, 0.36, 1); --snap: 90ms linear; } /* Dark is not an inversion of the light theme, it is the same stockroom after the * fluorescents go off: nylon becomes the ground, cotton becomes the ink. The scene * that forces it is real — this tool is used one-handed on a phone, often in bed. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --base: #0D0D0D; --base-sunk: #171717; --ink: #F5F5F5; --concrete: #9A9A9A; /* 6.91:1 on ink */ --steel: #3A3A3A; --steel-firm: #565656; --orange-ink: #FF5A00; /* 6.21:1 on ink — the accent reads as text here */ --hazard-a: #F5F5F5; --hazard-b: #0D0D0D; } } :root[data-theme='dark'] { --base: #0D0D0D; --base-sunk: #171717; --ink: #F5F5F5; --concrete: #9A9A9A; --steel: #3A3A3A; --steel-firm: #565656; --orange-ink: #FF5A00; --hazard-a: #F5F5F5; --hazard-b: #0D0D0D; } /* ---- faces ---------------------------------------------------------------- */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/oswald-500.woff2') format('woff2'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/oswald-700.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/archivo-400.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/archivo-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plexmono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/plexmono-600.woff2') format('woff2'); }