/* Agoramores — "january" theme overrides. Loaded after main.css. Every selector here is scoped to body[data-theme-id="january"]. */ /* =========================================================================== JANUARY — deep midwinter, after the holidays are over. A flat white field under a washed-out overcast sky. One bare bough overhanging the top-right corner, a thin stand of dead stalks on the drift line, a wan sun that gives no heat, and a little wind-blown snow. That is the entire cast. Restraint is the concept, not a budget: this month has roughly a third of the decorative surface October and September carry, and the empty sky between the bough and the horizon is doing as much work as anything drawn. HOW IT AVOIDS BEING DECEMBER OR FEBRUARY. December is the holidays and February is love; both of those are warm months with a bright ornamental accent on a dark ground. January inverts the ground — it is the project's coldest and lightest theme, the sky occupies four fifths of the frame, and the only saturated colour on screen is a single winterberry red used sparingly enough to read as the one live thing in a dead field. THE RED ANCHOR ON A COLD MONTH. Agoramores is red-anchored every month, and a barren January could have argued its way out of that. It does not need to: the one colour that survives an Ohio January outdoors is the rose hip and the winterberry still clinging to a leafless shrub. --jan-rose is that berry. It leads every gradient, frames the card, marks today on the calendar, carries bold text and the table headers, and is the hover colour on every link — but it is never a field, never a wash, and never more than a few hundred pixels at a time. Red anchors the month precisely BY being scarce. THE VALUE LADDER. The stated risk with a monochrome winter theme is that it collapses into pale-on-pale mush. The defence is a deliberate ten-step neutral ramp (--jan-shadow through --jan-rime) with a hard rule: everything from --jan-slate up the dark end carries text, everything from --jan-branch down the light end is scenery and never carries text. Nothing sits in the middle where it could be mistaken for either. Every accent below was measured against the page ground #e8eef2, and the WEAKEST of them is 5.69:1 — every single one clears WCAG AA body text, not just large text, so the heading gradient is safe even on an h6 at 11px where the 3:1 large-text allowance does not apply. THE COLD LINK ACCENT. --jan-ice is the one cold hue reserved for links, at 6.06:1 on the ground. Colour alone is not enough here and the numbers say so: ice against the body ink measures 2.17:1, well under the 3:1 that would let hue carry the distinction on its own. This theme used to underline prose links at rest for exactly that reason; the underline is gone now, per the standing no-underline rule (2026-08-14). It cost nothing live — main.css's link-camouflage.css already holds every link flat at rest sitewide and had been winning the cascade over this theme's underline regardless, so no reader ever saw it. The unresolved 2.17:1 gap this comment used to answer is real and is a link-camouflage-level question (every theme rests with no non-colour cue by that sheet's design), not something this theme can fix on its own — see public/link-camouflage.css before reopening it. PURE CSS. No url(), no image, no webfont, no canvas. Every branch, stalk, drift and frost needle below is a gradient, a clip-path or a box-shadow. =========================================================================== */ body[data-theme-id="january"] { /* ---- The neutral ramp ------------------------------------------------ Ten steps from near-black to rime. shadow/ink/steel/slate carry text. branch/haze/sky/drift are scenery only and are never allowed under a glyph. snow/frost/rime are grounds. THE CAST IS WARM NOW, AND THE MONTH IS STILL COLD (2026-08-16). This ramp used to be pulled a few points toward blue on every step, and the comment here argued that the blue cast was what separated "cold" from "grey". It was wrong, and the no-blue-light rule made proving it compulsory: what reads as cold in this theme is the *structure* — a flat field under four fifths of empty sky, a bare bough, dead stalks, and a value range at the light end so narrow that nothing has any modelling. None of that is a hue. The steps below are the same lightnesses on a warm axis and January is no less bleak for it. THE TOP THREE ARE RE-CUT, NOT CLAMPED. snow/frost/rime were #e8eef2, #f7fafc and #ffffff — L 0.946, 0.983, 1.000. The ceiling (L 0.929) sits below all three, so a straight clamp put the page ground, the lit drift and the rime highlight on the same value and flattened the field into one sheet of paper. They are re-cut as three real steps inside the band the ceiling leaves, with sky and drift eased down to make room, and the chroma opening slightly toward the light end so the brightest thing on screen is also the warmest. Every accent below still clears 4.5:1 on the new ground; the weakest is --jan-sun at 5.04. */ --jan-shadow: #1b1812; --jan-ink: #28241d; --jan-steel: #534d43; --jan-slate: #605b52; --jan-branch: #8d877d; --jan-haze: #b2ada2; --jan-sky: #cfc9c0; --jan-drift: #e2dace; --jan-snow: #e8dfd0; --jan-frost: #ede3d1; --jan-rime: #f2e6d2; /* ---- The accents ----------------------------------------------------- Nine hues, every one re-measured against the --jan-snow ground (#e8dfd0) on 2026-08-16. The number after each is its contrast ratio there; the floor is 4.5:1 and the weakest here is 5.04, so any of them may carry body text, a heading stop or a border. They are also spread across the wheel rather than bunched: a heading gradient built from eight colours that all sit in the same corner reads as one smudge no matter how dark it is, which is the failure this set exists to avoid. */ --jan-rose: #a31511; /* 5.95 winterberry — THE anchor */ --jan-rose-deep: #780f0e; /* 8.49 the berry in shadow */ --jan-plum: #812b2b; /* 6.87 rose hip gone over */ --jan-rust: #8a4520; /* 5.38 dead oak leaf still hanging */ --jan-sun: #6f5a1c; /* 5.04 the thin sun, tarnished brass */ --jan-pine: #3c5d3c; /* 5.63 the one evergreen on the line */ --jan-ice: #5e5835; /* 5.44 the link accent. Was glacier blue; now the tarnish on the sun, same value */ --jan-indigo: #593d22; /* 7.52 the cold hour before dusk */ --jan-violet: #623a31; /* 7.33 long winter shadow on snow */ /* ---- Scene geometry -------------------------------------------------- The horizon is derived from the field height rather than stated twice, so the drift line, the stalks standing on it and the mobile block below can never drift out of register. 0.6 is where the clip-path's average top edge lands inside the field box. */ --jan-field: clamp(5rem, 13vh, 8.5rem); --jan-horizon: calc(var(--jan-field) * 0.65); /* The bough's height is DERIVED from its width rather than stated, so the box keeps a fixed 1.53:1 aspect at every viewport. The clip-path below is a set of percentages, so a box that changes proportion shears the branch — twigs that were drawn at 40 degrees flatten toward horizontal on a wide screen and rear up toward vertical on a narrow one. Locking the aspect is what keeps the drawing a drawing. */ --jan-bough-w: min(28rem, 42vw); --jan-bough-h: calc(var(--jan-bough-w) * 0.654); /* ---- Token map ------------------------------------------------------- Every --tt-* token resolves to a real measured colour. Nothing is #000 or #fff: a placeholder here is what flattens headings, tags and eyebrows into one black slab and makes the heading gradient invisible. */ --tt-bg: var(--jan-snow); /* Link-hover paired to THIS block's ground (standing rule 2026-08-14), not the mode name — january's unmoded block is day, per the switch commentary in main.css. #e8eef2 is light: #FF465A only measures 2.86:1 here, so day takes the same-hue dark variant, #BD0014 — 5.65:1. */ --link-hover: #BC0900; --tt-bg-alt: var(--jan-drift); --tt-cyan: var(--jan-ink); --tt-cyan-soft: var(--jan-steel); --tt-yellow: var(--jan-sun); --tt-orange: var(--jan-rust); /* Bold text is red on every Agoramores month; here that is the berry, and it is the single loudest use of the anchor inside running prose. */ --tt-chartreuse: var(--jan-rose); --tt-green: var(--jan-pine); --tt-pink: var(--jan-plum); --tt-purple: var(--jan-violet); --tt-blue: var(--jan-ice); --tt-teal: var(--jan-slate); --tt-gray: var(--jan-slate); --tt-gold: var(--jan-sun); --tt-red: var(--jan-rose); --tt-breadcrumb-text: var(--jan-rose-deep); /* Daylight, and a light ground: a bloom would be a smear. Every text-shadow keyed off this token resolves to nothing, which is the intent. */ --tt-breadcrumb-glow: transparent; /* Hover/focus halo for the zodiac glyphs, and the reason --zodiac-glow is a separate token from --tt-breadcrumb-glow: that one is transparent here, so a chip keyed off it would have no affordance at all. On a near-white card a bright halo is invisible, so this month's halo is DARK — the berry's own shadow, blooming outward from the glyph. Same inversion the lava-lamp sheet needs. Cast from text-shadow on the character and drop-shadow on the moon path, so it traces the shape and can never render as a box. Never a border; the rule that consumes this lives once, in main.css. */ --zodiac-glow: rgba(120, 15, 14, 0.5); /* The engraving on the tarot card: the one text-shadow that cuts the card's numeral and the breadcrumb separators INTO its face rather than printing them on it. main.css defaults it to a black lip, which is right under a glyph on a dark card and wrong under one on frosted glass — on a pale face the lit edge of a struck stroke is the white BELOW the letter, not the black. Every light-ground theme has to state this or it inherits a smudge. */ --tt-engrave: 0 1px 0 rgba(242, 230, 210, 0.75); /* ---- Gradients ------------------------------------------------------- Red leads all three and returns inside the cycle. The structural palette (borders, rails, frames) runs rose → rust → pine → ice → indigo → rose, so every frame on the page opens and closes on the anchor. */ --tt-heading-rainbow: linear-gradient( 90deg, var(--jan-rose), var(--jan-rust), var(--jan-pine), var(--jan-ice), var(--jan-indigo), var(--jan-rose) ); --tt-heading-rainbow-vertical: linear-gradient( 180deg, var(--jan-rose), var(--jan-rust), var(--jan-pine), var(--jan-ice), var(--jan-indigo), var(--jan-rose) ); /* Two identical eight-stop cycles across the 200% background main.css sets, so headingRainbowFlow loops with no visible reset, and the sheet opens and closes on rose so the wrap point is seamless too. Rose sits at stops 1 and 6 of each cycle — red twice per revolution, red-dominant by count. Every stop clears 4.5:1 on the ground, which matters because h4/h5/h6 are set below 18.66px and get no large-text allowance. */ --tt-heading-text-rainbow: linear-gradient( 90deg, var(--jan-rose), var(--jan-rust), var(--jan-sun), var(--jan-pine), var(--jan-ice), var(--jan-rose), var(--jan-indigo), var(--jan-violet), var(--jan-rose), var(--jan-rust), var(--jan-sun), var(--jan-pine), var(--jan-ice), var(--jan-rose), var(--jan-indigo), var(--jan-violet), var(--jan-rose) ); /* ---- Type ------------------------------------------------------------ The heading face is a system stack. The project loads no webfont anywhere — no @font-face, no @import, no external link — so this costs nothing on the wire and the first paint is already the finished typography. A neo-grotesque is the point. Helvetica has no calligraphic warmth, no humanist stroke modulation and no ornament of any kind; it is the face equivalent of a bare field, and it is the reason this month reads austere rather than merely pale. It also holds up at 300 weight on a light ground, where a high-contrast face would go spindly and a slab would go heavy. It is confined to headings now (2026-08-15, user instruction). It had been set on --font-sans as well, and the text font is now locked to --font-text in main.css and shared by all fourteen themes — which this sheet loses the least by, since a neo-grotesque is the WORST of the four displaced body faces under defocus: Helvetica's apertures are nearly closed, so c, e, s and a collapse into o at the first hint of blur. Austerity survives in the heading, the ground and the empty field; it does not need the paragraph. --font-mono and --font-cursive are untouched at the token level: the brand wordmark is a locked fixture and keeps its own stack. */ --font-heading: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; --bg: var(--jan-snow); --surface: transparent; --text: var(--tt-cyan); --text-soft: var(--tt-cyan-soft); --muted: var(--tt-gray); /* The loud structural frame is the anchor; the quiet hairlines are steel, so a table rule or an input edge stays neutral instead of turning the reading surface pink. Every frame that is actually SEEN is drawn by the rainbow border-image in main.css, which is red-led, so the month still reads red at every edge. */ --border: var(--tt-red); --border-dim: rgba(96, 91, 82, 0.34); --border-teal: rgba(96, 91, 82, 0.55); background: var(--jan-snow); color: var(--tt-cyan); color-scheme: light; } /* --------------------------------------------------------------------------- THE PANE. The CRT scanline is a permanent fixture and stays a repeating-linear-gradient — it just stops being a cathode artefact and becomes the fine crystalline striation on a cold window. Two passes at complementary steep angles, the way frost facets cross on real glass. Alpha is pinned near the floor on purpose. This layer sits at z-index 5, ABOVE the text, so anything it adds is subtracted from every contrast ratio on the page. At 0.045/0.03 over a ~20% duty cycle the effective veil is under one percent and the measured ratios hold; a corner bloom was drafted here and cut, because at the alpha needed to see it the footer's muted text dropped from 5.29:1 to 3.89:1. It has to be felt and never read. --------------------------------------------------------------------------- */ body[data-theme-id="january"]::before { background: repeating-linear-gradient( 96deg, rgba(242, 230, 210, 0.045) 0 1px, transparent 1px 6px ), repeating-linear-gradient( -84deg, rgba(242, 230, 210, 0.03) 0 1px, transparent 1px 9px ); } /* --------------------------------------------------------------------------- THE SKY. Four fifths of the frame and almost nothing in it, which is the whole composition. A real January overcast is not a smooth ramp: it is a slightly heavier deck overhead thinning toward the horizon, with the light pooling low because that is where the cloud is thinnest and where the snow is throwing light back up into it. So the gradient runs DARKEST AT THE TOP and brightest just above the drift line, which is the opposite of the night skies every other month ships and is the single strongest cue that this is daylight. The sun is a disc, not a glow: a wan white circle with one soft ring off it, set high and right where it barely clears the trees in January and giving no warmth to the sky around it. It is deliberately only a step or two brighter than the cloud it sits in — a January sun you can look straight at. --------------------------------------------------------------------------- */ body[data-theme-id="january"] .night-sky { background: /* the thin sun and its one halo ring */ radial-gradient(circle 2.6rem at 76% 15%, rgba(242, 230, 210, 0.92) 0 42%, rgba(242, 230, 210, 0.26) 62%, transparent 78%), radial-gradient(circle 7.5rem at 76% 15%, rgba(242, 230, 210, 0.3), transparent 72%), /* light pooling off the snow, low and wide */ radial-gradient(ellipse 90% 34% at 50% 104%, rgba(242, 230, 210, 0.72), transparent 76%), /* the far bank of haze that swallows the treeline. Stops are spread wide and start at half height on purpose: a tighter band leaves a visible horizontal seam across the middle of an otherwise empty sky, which is the one artefact a composition this bare cannot hide. */ linear-gradient(180deg, transparent 0 52%, rgba(178, 173, 162, 0.2) 74%, rgba(178, 173, 162, 0.07) 90%, transparent 100%), /* The deck thins downward, but the LAST stops stay cool rather than running to white. The snow field below is near-white, and if the sky reaches the same value at the horizon the drift line disappears — a real whiteout, accurate and useless. Holding the sky two steps darker is what lets the field read as ground. */ linear-gradient( 180deg, #c2bdb3 0%, #c9c4bb 16%, #d0cdc4 34%, #d9d6cf 54%, #e5ded1 72%, #ebe4d7 88%, #f2e6d2 100% ); background-repeat: no-repeat; } /* --------------------------------------------------------------------------- THE TREELINE. A band standing on the drift line: dead stalks and the fine scrub of a distant leafless thicket. NOT repeating-linear-gradient. That was the first attempt and it was wrong: a repeating gradient puts every stalk at an identical interval, and what came out was a barcode — perfectly even, unmistakably machine-made, and the single most artificial thing on the page. Nothing in a field is evenly spaced. Each pass is instead ONE plain linear-gradient carrying several hand-placed hairlines at irregular offsets, tiled at a wide odd period (173 / 127 / 89 / 37px). The eye reads the irregularity inside a tile long before it notices the tile repeating, and the four periods share no factor, so the four passes never phase into alignment either. Two passes are also drawn a few degrees off vertical — 96deg and 84deg — so a share of the stalks lean, in both directions, the way dead stalks actually stand. Height and alpha both fall off with distance: the tallest pass is the nearest and darkest, the shortest is the far thicket dissolving into the haze. That is atmospheric perspective done with two numbers per layer. No z-index. That is load bearing: with z-index auto this pseudo-element paints beneath .night-sky__stars (z1) and .night-sky__aurora (z2), so the blowing snow passes IN FRONT of the stalks and the snow field BURIES their bases. Both are what actually happens, and both come free from the paint order rather than from another element. --------------------------------------------------------------------------- */ body[data-theme-id="january"] .night-sky::before { inset: auto 0 calc(var(--jan-horizon) - 0.45rem) 0; height: clamp(1.5rem, 3.6vh, 2.6rem); opacity: 1; background-image: /* near stalks — sparsest, tallest, darkest, dead upright */ linear-gradient( 90deg, transparent 0 11px, rgba(103, 97, 87, 0.54) 11px 12.4px, transparent 12.4px 43px, rgba(103, 97, 87, 0.46) 43px 44.2px, transparent 44.2px 78px, rgba(103, 97, 87, 0.5) 78px 79.5px, transparent 79.5px 121px, rgba(103, 97, 87, 0.4) 121px 122.1px, transparent 122.1px 152px, rgba(103, 97, 87, 0.48) 152px 153.3px, transparent 153.3px ), /* mid scrub, leaning one way */ linear-gradient( 96deg, transparent 0 9px, rgba(132, 126, 115, 0.42) 9px 10.1px, transparent 10.1px 37px, rgba(132, 126, 115, 0.38) 37px 38px, transparent 38px 66px, rgba(132, 126, 115, 0.44) 66px 67.2px, transparent 67.2px 94px, rgba(132, 126, 115, 0.36) 94px 95px, transparent 95px 113px, rgba(132, 126, 115, 0.4) 113px 114.1px, transparent 114.1px ), /* mid scrub, leaning the other */ linear-gradient( 84deg, transparent 0 6px, rgba(152, 147, 136, 0.36) 6px 7px, transparent 7px 29px, rgba(152, 147, 136, 0.32) 29px 29.9px, transparent 29.9px 51px, rgba(152, 147, 136, 0.38) 51px 52.1px, transparent 52.1px 74px, rgba(152, 147, 136, 0.3) 74px 74.9px, transparent 74.9px ), /* far thicket — dense, short, nearly gone into the haze */ linear-gradient( 90deg, transparent 0 4px, rgba(170, 165, 155, 0.28) 4px 4.8px, transparent 4.8px 15px, rgba(170, 165, 155, 0.24) 15px 15.7px, transparent 15.7px 27px, rgba(170, 165, 155, 0.26) 27px 27.8px, transparent 27.8px ); background-size: 173px 100%, 127px 68%, 89px 46%, 37px 26%; background-position: left bottom, 23px bottom, 61px bottom, 7px bottom; background-repeat: repeat-x; animation: none; transform: none; } /* --------------------------------------------------------------------------- THE BOUGH. One bare branch overhanging the top-right corner — the theme's only real illustration and the only place a viewer's eye has anywhere to go before the horizon. Drawn as a single clip-path polygon on a gradient-filled box, which is the same technique main.css uses for July's skyline. The polygon traces the whole silhouette in one closed loop: it walks the limb's top edge from the right edge leftward, detouring up-and-back into each of the five twigs that point upward, reaches the tip, then walks the bottom edge back rightward, detouring down-and-back into the five that point downward. Every detour returns to the main edge slightly PAST where it left, in the direction of travel, which is what keeps the loop simple and non-self-intersecting. Thickness tapers from about 6% of the box at the base to under 1% at the tip. WHAT MAKES IT A BRANCH AND NOT AN AIRCRAFT. The first draft had four long twigs at similar shallow angles hung off a straight taper, and it read unmistakably as a swept-wing jet. Three things fixed it, and all three are worth keeping if this is ever redrawn: the limb is a twelve-segment ARC and is nowhere straight; the ten twigs are at ten different angles between 26 and 72 degrees with four different lengths, two of them stubs; and the forks sit at irregular intervals instead of evenly down the limb. Regularity is what made it read as manufactured. The twig geometry was generated from a limb centreline plus an angle-and- length table rather than hand-traced, which is why the numbers below are not round. Angles were computed against the box's real 1.53:1 pixel aspect, so they are true degrees on screen and not degrees in percentage space — which is also why --jan-bough-h is derived from --jan-bough-w above and never set independently. The fill is a gradient rather than a flat silhouette, for two reasons. It is true — bare wood against a bright overcast halates and washes out toward the fine ends — and it is defensive: the thick end sits hard in the top-right corner where nothing but empty header sits, and the pale end is the part that reaches inward toward where a narrow viewport might put text. Body ink over the DARKEST point of the bough still measures 4.5:1, so even the worst overlap stays readable. Placed on .night-sky::after, which main.css does not use. z-index auto puts it behind the blowing snow, so flakes cross in front of the branch. --------------------------------------------------------------------------- */ body[data-theme-id="january"] .night-sky::after { content: ""; position: absolute; top: 0; right: 0; width: var(--jan-bough-w); height: var(--jan-bough-h); pointer-events: none; background: linear-gradient(252deg, #7c7569 0%, #8d877d 46%, #9e9990 74%, #ada9a0 100%); clip-path: polygon( /* --- top edge, right → left, detouring up into each upward twig --- */ 102% -1.35%, 95.8% 0.56%, 86.78% -7.7%, 86.65% -7.49%, 94.2% 1.06%, 92% 1.73%, 83% 5.34%, 79.72% 6.87%, 64.87% -3.66%, 64.77% -3.41%, 78.28% 7.54%, 74% 9.52%, 65% 14.47%, 60.6% 17.27%, 56.78% 6.6%, 56.6% 6.71%, 59.4% 18.04%, 56% 20.19%, 47% 26.68%, 41.5% 31.12%, 28.25% 22.79%, 28.17% 23.06%, 40.5% 31.93%, 38% 33.94%, 30% 41.33%, 25.4% 45.8%, 17% 32.45%, 16.85% 32.64%, 24.6% 46.58%, 22% 49.1%, 15% 56.21%, 9% 62.47%, /* --- the tip --- */ 4% 67.9%, 4% 68.5%, /* --- bottom edge, left → right, detouring down into each downward twig --- */ 9% 63.13%, 15% 56.99%, 16.66% 55.36%, 9.07% 63.92%, 8.96% 63.69%, 17.34% 54.69%, 22% 50.1%, 30% 42.67%, 32.55% 40.43%, 30.59% 50.47%, 30.4% 50.38%, 33.45% 39.64%, 38% 35.66%, 47% 28.92%, 51.44% 26%, 39.89% 42.44%, 39.76% 42.23%, 52.56% 25.26%, 56% 23.01%, 65% 17.93%, 70.34% 15.4%, 63.74% 31.17%, 63.58% 31.01%, 71.66% 14.78%, 74% 13.68%, 83% 10.26%, 87.25% 8.94%, 85.22% 15.07%, 85.05% 14.95%, 88.75% 8.47%, 92% 7.47%, 102% 5.35% ); } /* --------------------------------------------------------------------------- THE WEATHER. Two depths, and both of them are wind rather than snowfall. A blizzard would be busy and a gentle vertical drift would be pretty; January here is neither. What is in the air is a thin veil of fine snow being carried sideways and a ground blizzard skating across the drifts — the two things that are actually moving in a barren field in February-cold weather, and the two that read as WIND, which is the sensation the month is after. Both layers are GREY, not white. This is the counter-intuitive part and it is correct: snow silhouetted against a bright overcast sky is darker than the sky behind it, so white flakes on this ground would be literally invisible. The values are pulled from --jan-haze and its neighbours. Seamlessness. The veil translates diagonally, so EVERY gradient layer in it shares one tile size (26rem × 20rem) and the layer travels exactly that tile per loop — density comes from five flakes placed at different points inside the one tile rather than from five different tile sizes. The spindrift travels horizontally only, so there its tile WIDTHS must match (12rem) but the heights are free to differ, which is what stops the streaks from lining up into rows. Transform only: no filter, no background-position animation, no layout property. --------------------------------------------------------------------------- */ /* The high veil: fine, sparse, very slow. Roughly eight pixels a second across the screen — it should take a moment to notice that anything is moving. The box is oversized up and right because the layer travels down and left; those are the two edges that would otherwise open a gap. */ body[data-theme-id="january"] .night-sky__stars--far { inset: -22rem -28rem -2rem -2rem; opacity: 0.5; background-image: radial-gradient(circle at 12% 18%, rgba(159, 153, 142, 0.78) 0 1.1px, transparent 1.9px), radial-gradient(circle at 63% 41%, rgba(168, 163, 153, 0.66) 0 0.9px, transparent 1.6px), radial-gradient(circle at 34% 72%, rgba(159, 153, 142, 0.6) 0 1px, transparent 1.7px), radial-gradient(circle at 84% 88%, rgba(178, 173, 162, 0.54) 0 0.8px, transparent 1.5px), radial-gradient(circle at 47% 6%, rgba(168, 163, 153, 0.48) 0 0.7px, transparent 1.4px); background-size: 26rem 20rem; background-position: 0 0, 6rem 3rem, 13rem 8rem, 3rem 14rem, 19rem 11rem; background-repeat: repeat; animation: januarySnowVeil 58s linear infinite; } /* Ground blizzard: the band just above the drift line, horizontal, and six times the speed of the veil. Blown snow does not fall, it skates. The streaks are SHORT. The first pass used ellipses up to 7.5rem long at 0.44 opacity and they read as scratches ruled across the middle of the page — long, straight, perfectly parallel marks look like a damaged screen, not like weather. Capping every streak under 2.2rem, dropping the band to start at 74% so it sits below the reading column, and pulling the opacity to 0.3 turns the same layer into granular snow being pushed along the ground. The five tile HEIGHTS are deliberately unrelated so no two rows of streaks ever run together; only the WIDTHS have to agree, at 12rem, because the travel is on one axis. */ body[data-theme-id="january"] .night-sky__stars--near { inset: 74% -14rem -3rem -3rem; opacity: 0.3; background-image: radial-gradient(ellipse 1.6rem 0.075rem at 22% 26%, rgba(155, 149, 136, 0.62) 0 42%, transparent 100%), radial-gradient(ellipse 1.1rem 0.065rem at 68% 54%, rgba(166, 161, 149, 0.54) 0 42%, transparent 100%), radial-gradient(ellipse 2.2rem 0.06rem at 41% 79%, rgba(177, 172, 161, 0.5) 0 42%, transparent 100%), radial-gradient(ellipse 0.9rem 0.08rem at 87% 12%, rgba(155, 149, 136, 0.56) 0 42%, transparent 100%), radial-gradient(ellipse 1.4rem 0.07rem at 9% 62%, rgba(166, 161, 149, 0.5) 0 42%, transparent 100%); background-size: 12rem 4rem, 12rem 5.5rem, 12rem 7.5rem, 12rem 9.5rem, 12rem 6.5rem; background-position: 0 0, 3rem 1.5rem, 7rem 3rem, 1rem 5rem, 9rem 2.5rem; background-repeat: repeat; animation: januarySpindrift 5.5s linear infinite; } /* --------------------------------------------------------------------------- THE FIELD. The month's ground element, in the slot July uses for its city skyline — which is Fourth-of-July scenery and belongs to July alone. Here it is old drifted snow under a low, nearly flat horizon. The drift line is a clip-path with eighteen points across the top edge, oscillating between 28% and 42% of the box. That is a very shallow wave on purpose: the brief is a LOW FLAT horizon, and the moment the amplitude goes past about 15% it stops reading as wind-packed snow and starts reading as hills. Straight segments between closely spaced points are indistinguishable from a curve at this scale, which is why polygon() is enough and no smoothing is needed. The fill runs bright at the crest and cools toward the viewer, because the crest is catching what light there is and the near field is in its own shadow. Two soft ellipses cut the hollows between drifts. The footer sits on this surface, and its muted type measures 5.80:1 against the brightest part of it. --------------------------------------------------------------------------- */ body[data-theme-id="january"] .night-sky__aurora { display: block; z-index: 2; left: 0; right: 0; top: auto; bottom: -1px; inset-block-start: auto; height: var(--jan-field); box-shadow: none; background: /* hollows and wind-scour between the drifts */ radial-gradient(ellipse 22rem 2.4rem at 24% 104%, rgba(138, 130, 116, 0.22), transparent 72%), radial-gradient(ellipse 16rem 1.8rem at 68% 108%, rgba(138, 130, 116, 0.18), transparent 70%), /* The blue shadow immediately under the crest, where the drift undercuts. This band is what makes the horizon a LINE rather than a soft fade — a white field meeting a pale sky with nothing between them reads as an unfinished gradient. It runs cool and fairly strong for three percent of the field, then releases. */ linear-gradient(180deg, transparent 0 3%, rgba(167, 158, 142, 0.34) 9%, rgba(185, 178, 164, 0.14) 20%, transparent 38%), linear-gradient(180deg, #f2e6d2 0%, #f2e6d2 22%, #f2e6d2 58%, #ede6d9 100%); background-repeat: no-repeat; clip-path: polygon( 0 42%, 5% 39%, 11% 35%, 17% 32%, 23% 33%, 29% 37%, 35% 39%, 41% 36%, 47% 31%, 53% 28%, 59% 30%, 65% 34%, 71% 36%, 77% 33%, 83% 29%, 89% 31%, 95% 36%, 100% 39%, 100% 100%, 0 100% ); } /* Fireworks are Independence Day furniture: July theme only. The JS also refuses to spawn them off-July, so this is belt-and-braces for any burst already on screen when the theme is switched. */ body[data-theme-id="january"] .night-sky__fireworks { display: none; } /* --------------------------------------------------------------------------- THE CARD — the breadcrumb bar, which is the one element in the whole project allowed its own background. That makes it the only place a real piece of craft can be built, so this month spends its hoarfrost here rather than smearing it over the viewport where it would eat contrast from every line of text on the page. It is a pane of cold glass with rime creeping in from all four edges. Each needle pass is a repeating-linear-gradient of two stops, not one: a pure white hairline immediately followed by a thin blue-grey shadow. That pairing is the entire trick — a single white line on white glass is invisible, but a white line with a shadow beside it reads as a raised crystal with a light source. The four edges use four different periods (6/8/9/11px) so opposite edges never mirror each other, and two scattered dot passes put frost crystals out across the middle of the pane. Static. Nothing here animates; the existing sweep on ::before is the card's only motion and it is not new. --------------------------------------------------------------------------- */ body[data-theme-id="january"] .breadcrumb-nav { background: /* rime along the top edge */ repeating-linear-gradient( 90deg, rgba(242, 230, 210, 0.95) 0 1px, rgba(175, 168, 154, 0.3) 1px 1.8px, transparent 1.8px 6px ) left top / 100% 0.55rem repeat-x, /* rime along the foot */ repeating-linear-gradient( 90deg, rgba(242, 230, 210, 0.9) 0 1px, rgba(175, 168, 154, 0.26) 1px 1.7px, transparent 1.7px 9px ) left bottom / 100% 0.42rem repeat-x, /* rime up the left and right stiles */ repeating-linear-gradient( 0deg, rgba(242, 230, 210, 0.9) 0 1px, rgba(175, 168, 154, 0.26) 1px 1.7px, transparent 1.7px 8px ) left top / 0.42rem 100% repeat-y, repeating-linear-gradient( 0deg, rgba(242, 230, 210, 0.88) 0 1px, rgba(175, 168, 154, 0.24) 1px 1.6px, transparent 1.6px 11px ) right top / 0.36rem 100% repeat-y, /* crystals scattered out across the pane — two tile sizes with no common factor, so they never grid up over the instruments */ radial-gradient(circle at 30% 40%, rgba(242, 230, 210, 0.8) 0 0.8px, transparent 1.5px) 0 0 / 19px 15px repeat, radial-gradient(circle at 70% 65%, rgba(184, 178, 164, 0.34) 0 0.7px, transparent 1.4px) 7px 5px / 27px 23px repeat, /* the glass itself, lit from above */ linear-gradient( 180deg, rgba(242, 230, 210, 0.88) 0%, rgba(242, 230, 210, 0.8) 44%, rgba(242, 230, 210, 0.76) 100% ); box-shadow: inset 0 1px 0 rgba(242, 230, 210, 0.95), inset 0 -1px 0 rgba(145, 139, 126, 0.2), 0 1px 3px rgba(48, 43, 33, 0.07); } /* The existing sweep becomes a pass of pale winter light travelling across the frosted pane. Same element, same keyframe, same duration — only the colour moves off July's cyan and hotpink. */ body[data-theme-id="january"] .breadcrumb-nav::before { background: linear-gradient( 90deg, transparent, rgba(242, 230, 210, 0.62), rgba(230, 227, 217, 0.4), transparent ); } /* The brand in bare black ink on a white field, lifted by a single-pixel rime highlight underneath — letters cut into frost rather than lit from behind. It goes winterberry on hover, which is the anchor doing what the anchor does here: marking the one thing that is alive. */ body[data-theme-id="january"] .brand a { color: var(--jan-ink); text-shadow: 0 1px 0 rgba(242, 230, 210, 0.92); } body[data-theme-id="january"] .brand a:hover { color: var(--jan-rose); text-shadow: 0 1px 0 rgba(242, 230, 210, 0.92); } /* --------------------------------------------------------------------------- HEADINGS. Set the way a cold empty page wants to be set: light weight, wide tracking, no ornament, and a hairline horizon rule under every H2. The tracking is the whole idea — letterspacing is negative space, and this is a theme about negative space. The glow goes. main.css casts a cyan bloom on every heading, which is July's colour and would be a smear on a light ground in daylight. What replaces it is a zero-blur white drop-shadow one pixel down — type cut into ice. It has to be a FILTER and not a text-shadow. These headings are painted with background-clip: text and a transparent fill, so a text-shadow renders through the transparent glyph and buries the gradient under a flat slab. drop-shadow() reads the composited alpha instead and lands behind the letters, which is the same reason October uses it. The trigger selectors are stated alongside the bare elements because main.css sizes and paints those at (0,2,0) and (0,3,0), which would outrank a plain `main h2` here. */ body[data-theme-id="january"] main h1, body[data-theme-id="january"] .page-title, body[data-theme-id="january"] main h2, body[data-theme-id="january"] main h3, body[data-theme-id="january"] main h4, body[data-theme-id="january"] main h5, body[data-theme-id="january"] main h6, body[data-theme-id="january"] .markdown-page .heading-section__trigger { font-family: var(--font-heading); font-style: normal; text-shadow: none; /* `var(--heading-tint)` first: it is the site-wide per-level heading ladder from main.css, and `filter` replaces rather than accumulates, so a rule that omits it drops the ladder for this whole sheet. */ filter: var(--heading-tint) drop-shadow(0 1px 0 rgba(242, 230, 210, 0.85)); } /* H1 loses the cursive italic. A script face is a warm, handwritten, personal thing and this month is none of those; the wordmark in the header keeps it, markdown H1 does not. Light weight, a touch of tracking, sentence case — uppercase was drafted and cut because real page titles wrap to three lines under it. The size comes down because a grotesque sets considerably wider than the script it replaces. */ body[data-theme-id="january"] main h1, body[data-theme-id="january"] .page-title, body[data-theme-id="january"] .heading-section--level-1 > .heading-section__summary > .heading-section__trigger { font-weight: 300; font-size: clamp(2.2rem, 6vw, 4rem); letter-spacing: 0.005em; } /* H2 and H3 are the field markers: uppercase, tracked wide, small. Weight stays at 400 rather than dropping to 300 with H1 — at these sizes a 300-weight uppercase letterform is too thin for the heading gradient to actually show inside it, which is the same trap that made a previous month's headings read as flat blocks. */ body[data-theme-id="january"] main h2, body[data-theme-id="january"] main h3 { font-weight: 400; text-transform: uppercase; } body[data-theme-id="january"] main h2, body[data-theme-id="january"] .heading-section--level-2 > .heading-section__summary > .heading-section__trigger { font-size: clamp(1.15rem, 2.5vw, 1.7rem); letter-spacing: 0.2em; } body[data-theme-id="january"] main h3, body[data-theme-id="january"] .heading-section--level-3 > .heading-section__summary > .heading-section__trigger { font-size: clamp(0.95rem, 1.7vw, 1.16rem); letter-spacing: 0.16em; } /* The horizon rule. Every H2 sits over a full-width hairline — the typographic echo of the drift line at the foot of the page, and the one place the structural rainbow shows up inside running content. Drawn in --tt-heading-rainbow so it can never drift off the shared border palette. The trigger is a real

(the renderer emits

inside the summary), so this reaches both wrapped and bare headings with one selector. */ body[data-theme-id="january"] main h2::after { content: ""; display: block; width: 100%; height: 1px; margin-top: 0.55rem; background: var(--tt-heading-rainbow); opacity: 0.55; } /* The section rail keeps its rainbow and loses July's cyan filament glow. */ body[data-theme-id="january"] .heading-section::before { box-shadow: none; } body[data-theme-id="january"] .page-toc .page-toc__title { letter-spacing: 0.2em; } /* The eyebrow is the coldest piece of type on the page: rust caps, tracked out until it is barely a word any more. */ body[data-theme-id="january"] .eyebrow { letter-spacing: 0.34em; } /* --------------------------------------------------------------------------- LINKS. The one cold accent, and the one place this theme has to work harder than a dark one. --jan-ice measures 6.06:1 against the ground, comfortably readable. Against the BODY INK, though, it measures 2.17:1 — under the 3:1 that would let hue alone distinguish a link from the sentence around it. Prose links used to be underlined at rest to answer that gap; the underline is gone per the standing no-underline rule (2026-08-14). No live behaviour changes: link-camouflage.css holds every link flat at rest sitewide and already won that fight in the cascade, so the underline never rendered. See public/link-camouflage.css for the sitewide rest-state contract before adding a new non-colour cue here. Hover and focus go to the anchor red, and both the hotpink text-shadow and the looping linkHotpinkGlow keyframe from main.css are cancelled: daylight has no neon, and a continuous animation on hover is not something this project's motion budget spends on links. The colour swing off body ink is the hover signal now that no rule is drawn under the word. */ body[data-theme-id="january"] main a { color: var(--jan-ice); } /* Hover colour is --link-hover, standing user rule 2026-08-14: #FF465A on every theme, not the anchor red --jan-rose any more. Locked in main.css's :root; see the contrast note in DUH/rules/presentation.md before assuming it clears this ground. */ body[data-theme-id="january"] a:hover, body[data-theme-id="january"] a:focus-visible { color: var(--link-hover); text-decoration: none; text-shadow: none; animation: none; } /* Visited prose links cool off into the long-shadow violet — still 8.40:1, so a read link is quieter but never harder to read. The zodiac chips are held clear of this by the doubled .celestial-chip.celestial-chip:visited rule in main.css, which is (0,3,0) against this selector's (0,2,2). */ body[data-theme-id="january"] a:visited { color: var(--jan-violet); text-shadow: none; } /* Keyboard focus. main.css draws a 1px ring in --tt-yellow, which on this month is a dark bronze — legible, but a single hairline is thin on a bright ground. Two pixels of body ink is 13.13:1 against the page and unmistakable at a glance, which is what a focus indicator is for. The zodiac chips are NOT reached by this and must not be: their focus indicator is the glyph halo, never a ring. `a:focus-visible` here is (0,2,2) and `button:focus-visible` is (0,2,1), both under the (0,3,0) of .celestial-chip.celestial-chip:focus-visible in main.css. The explicit pin further down is the belt to that braces. */ body[data-theme-id="january"] a:focus-visible, body[data-theme-id="january"] button:focus-visible, body[data-theme-id="january"] input:focus-visible, body[data-theme-id="january"] textarea:focus-visible, body[data-theme-id="january"] select:focus-visible { outline: 2px solid var(--jan-ink); outline-offset: 3px; } /* --------------------------------------------------------------------------- SURFACES. Everything below already had a fill or a frame in main.css; each one is retuned for a light ground. Nothing gains a background it did not already have — there is one shared site background and this month does not add a second. --------------------------------------------------------------------------- */ /* Inset panels read as cleared ice: brighter than the page, with a cold hairline under the top edge so the panel sits DOWN into the surface rather than floating on it. `code` gets the fill but not the lip — an inline box fragments across line breaks and a hairline would break with it. The colour override is not optional here: main.css hardcodes `color: #eceff4` on `code`, which is invisible on a white panel. */ body[data-theme-id="january"] input, body[data-theme-id="january"] textarea, body[data-theme-id="january"] select, body[data-theme-id="january"] code, body[data-theme-id="january"] pre { background: rgba(242, 230, 210, 0.72); color: var(--jan-ink); } body[data-theme-id="january"] input, body[data-theme-id="january"] textarea, body[data-theme-id="january"] select, body[data-theme-id="january"] pre { box-shadow: inset 0 1px 0 rgba(145, 139, 126, 0.18); } /* A code block is one pane, not one per line: the fill belongs to the 
 and
   the  inside it stays clear. Stated explicitly because the surface rule
   above outranks main.css's `pre code`. */
body[data-theme-id="january"] pre code {
  background: transparent;
  box-shadow: none;
}

/* The table header is the month's biggest single field of red, and it is still
   only a bar a few lines tall. Rime type on winterberry, 7.52:1. */
body[data-theme-id="january"] th {
  background: var(--jan-rose);
  color: var(--jan-frost);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Highlighted text takes a winterberry wash rather than a yellow one — the
   anchor again, and the ink over it still measures better than 9:1. */
body[data-theme-id="january"] mark {
  background: rgba(163, 21, 17, 0.1);
  color: var(--jan-rose-deep);
  text-shadow: none;
}

/* No left rule on quotes — border-left is reserved for anchors inside ul/ol and
   is used nowhere in this file. The inset wash just moves from July's green to
   a cold slate, which reads as the shadow a raised block casts on snow. */
body[data-theme-id="january"] blockquote {
  color: var(--jan-steel);
  box-shadow: inset 1rem 0 1.4rem -1.2rem rgba(96, 91, 82, 0.55);
}

body[data-theme-id="january"] .tag {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Cards get a hairline of rime along the top edge and the faintest cold shadow
   beneath, replacing July's purple bloom. On a light ground a glow does nothing
   and a shadow does everything. */
body[data-theme-id="january"] .hero-card,
body[data-theme-id="january"] .folder-section {
  box-shadow:
    inset 0 1px 0 rgba(242, 230, 210, 0.9),
    0 1px 3px rgba(48, 43, 33, 0.06);
}

body[data-theme-id="january"] .hero-card:hover,
body[data-theme-id="january"] .folder-section:hover {
  box-shadow:
    inset 0 1px 0 rgba(242, 230, 210, 0.95),
    0 3px 10px rgba(48, 43, 33, 0.1);
}

/* Chrome selected by CLASS, never by element. `button` once reached the moon
   chip, which was a