Dear Okroshka: a love letter to a cold soup — and a landing page that switches sides with zero JavaScript

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

What I Built

The prompt allowed "a love letter to a regional dish," so I took it
literally: Dear Okroshka is a single-page letter written to the cold
Eastern European summer soup — with a salutation, enclosed evidence (it's on
an actual Russian postage stamp), an anatomy of the bowl, a recipe you can
check off while cooking, and a sign-off.

Okroshka is my dish because of one memory: the shade of a fresh haystack at
noon during haymaking, and a jar wrapped in a thick towel — ice-cold
okroshka my mother had made at dawn, sharp kvass stinging the tongue, the
air full of dill. That memory, nearly in full, is the letter's centerpiece
on the page.

The centerpiece is the argument every okroshka household has: kvass or
kefir? The page doesn't just describe the feud — it takes sides. A native
radio group re-themes the entire page (colors, content strings, even the
recipe's first ingredient) between an amber rye world and a cool milky one.

The whole switch is CSS:

body:has(#base-kefir:checked) {
  --bg: #F5F8F2; --ink: #25322B; --accent-strong: #2C5A3A; /* …every token */
}
body:has(#base-kefir:checked) .only-kvass { display: none; }

JavaScript is optional on this page. The ~60 lines it ships add two
enhancements: scroll-reveal (gated on both an html.js class and
prefers-reduced-motion: no-preference, so no-JS and reduced-motion visitors
see everything with zero flash) and a polite role="status" announcement
when the base changes. Turn JS off and the page still re-themes, the
ingredient cards still open, the recipe still checks off.

Demo

Journey

Why the switch is a radio group, not a toggle. My first sketch was an
aria-pressed button. But neither kvass nor kefir is "off" — a switch is
the wrong mental model, and a screen reader would announce it misleadingly.
A native radio group in a fieldset gives exclusivity, arrow-key behavior and
"selected, 1 of 2" announcements for free — and it's what makes the zero-JS
theming possible at all. The accessible choice and the clever choice turned
out to be the same choice.

Accessibility was a judging criterion, so I treated it as a feature:

• Landmarks + labeled sections, one h1, no heading skips; skip link.
• Both themes' text tokens are contrast-verified: every body-text pair ≥ 4.5:1 (kvass ink 11.66:1, muted 5.97:1; kefir ink 12.48:1, muted 5.87:1).
• The ingredient explorer is native <details> — keyboard and screen-reader operable with zero ARIA bolted on. The recipe steps are real labeled checkboxes; the done-state is strikethrough + the checkbox itself, never color alone.
• Reduced motion: no reveal offsets, no smooth scroll, no theme transition.
• Forced colors (Windows High Contrast): the selected base keeps a double-border so it survives color removal.
• Lighthouse accessibility: 100.

Real photography, licensed properly. The food photos are from Wikimedia
Commons (CC BY / CC BY-SA / public domain), credited inline under each
figure and in the footer — including a matched pair of kvass and kefir cups
by the same photographer for the debate, a 2016 Russian okroshka postage
stamp, and a July 1977 photo of a street kvass barrel with its queue.
Choosing photos that share warmth turned out
to be half the design system.

No webfonts, no frameworks, no build. The type system is two stacks:
a Palatino-class serif for the letter's voice, system sans for the UI layer.
The contrast between them is the typography. One fluid clamp() scale, one
token sheet, five labeled CSS layers.

The sister entry. The gingham ribbon under the hero is a hand-off: the
same table setting exists as a pure-CSS painting — Okroshka, Ice-Cold — my entry for the CSS Art prompt.
Same dish, two languages.

Code is MIT-licensed.