/* Agoramores — "november" theme overrides. Loaded after main.css. Every selector here is scoped to body[data-theme-id="november"]. */ /* November — Thanksgiving as a hand-drawn illustration. An ink-and-watercolour harvest sketch: warm cream paper, a pen line that wobbles, and washed colour fills that sit slightly off-register from the line that was meant to hold them, the way a two-plate print or a hurried watercolour always does. This is deliberately the opposite of October. October is hard-edged NES pixel art on a black-indigo night: flat fills, whole-pixel edges, square corners, stepped animation. November is a LIGHT theme on paper, with soft edges, uneven radii, translucent washes and slow continuous drift. Nothing about the two reads as the same hand. THE FOUR ILLUSTRATION TECHNIQUES, used everywhere below: 1. OFF-REGISTER FILL. Every drawn object is two layers — a pen outline and a colour wash — with the wash nudged a few px off the outline. On gourds that is two radial-gradients at slightly different centres; on cards and headings it is a zero-blur box-shadow / drop-shadow in a translucent wash colour. Zero blur is the point: a blur reads as a drop shadow, a hard offset reads as misprinted ink. 2. WOBBLY RADII. --nov-wobble-* give each corner a different horizontal and vertical radius, so a "rectangle" is never quite square. Values are kept modest (under 25px) so the browser never has to scale them down on a short element and turn the box into a lozenge. 3. BROKEN PEN LINES. Rules, rails and outlines are painted through a repeating-gradient mask with uneven gaps, so a straight line has the density variation of a nib running dry. Where mask-image is unsupported the line simply renders solid — a complete, correct fallback. 4. HATCHING. repeating-linear-gradient at a shallow angle, at very low alpha, standing in for pencil shading. It lives only in the shared page background, the CRT overlay and surfaces that already had a fill. PURE CSS. No url(), no images, no webfonts, no external assets of any kind. Both type stacks are system faces. MOTION. Exactly one ambient effect: two depths of leaves drifting down. It REPLACES the star drift on the elements that already carried it, so the theme adds no new continuous animation beyond what main.css already ran. Everything else — the table, the still life, the paper, the washes — is static, so the first painted frame is already the finished illustration. */ body[data-theme-id="november"] { /* ---- Ink and paper ---------------------------------------------------- Contrast measured against --nov-paper (#f3e6ce), and against --nov-kraft (#dcc5a0) for anything that lands on the breadcrumb card: ink 13.58 : 1 body copy ink-line 10.23 : 1 pen outlines ink-soft 9.23 : 1 secondary copy / td / chip labels (6.80 kraft) pencil 6.33 : 1 muted, footer, calendar numerals cranberry 6.24 : 1 ANCHOR RED (4.59 on kraft) cranberry-deep 8.87: 1 breadcrumb + time bar text (6.53 on kraft) cranberry-hot 5.92: 1 link hover / bullet star sienna 5.37: 1 eyebrow, ordered-list markers roast 6.01: 1 scrollbar, quiet frames ochre 4.71: 1 focus ring, display gradient stop gold 6.40: 1 zodiac glyphs, mark, tooltip cue (4.72 kraft) sage 5.87: 1 emphasis, tags olive 7.64: 1 stems, leaf accents plum 8.24: 1 visited links slate 6.69: 1 cool gradient stop Every one clears 4.5:1 for body text. The lowest, ochre at 4.71, is only ever used at display size or as a focus ring, where 3:1 is the bar. */ --nov-paper: #f3e6ce; --nov-paper-deep: #e8d6b6; --nov-kraft: #dcc5a0; --nov-ink: #2a1a0f; --nov-ink-line: #4a2c17; --nov-ink-soft: #513320; --nov-pencil: #6a4c30; --nov-cranberry: #a41918; --nov-cranberry-deep: #7a1210; --nov-cranberry-hot: #a72323; --nov-sienna: #a03d11; --nov-roast: #7a4a24; --nov-ochre: #8a5c04; --nov-gold: #6f4a05; --nov-sage: #4f5c2c; --nov-olive: #414a22; --nov-plum: #702b2b; --nov-slate: #534e42; /* ---- Washes ----------------------------------------------------------- Translucent, so the paper grain reads through them the way it does under real watercolour. Decorative only — nothing legible is ever set in one. */ --nov-wash-cranberry: rgba(164, 25, 24, 0.22); --nov-wash-sienna: rgba(176, 72, 28, 0.24); --nov-wash-ochre: rgba(186, 138, 30, 0.26); --nov-wash-sage: rgba(94, 107, 52, 0.22); --nov-wash-roast: rgba(122, 74, 36, 0.20); --nov-hatch: rgba(74, 44, 23, 0.055); /* ---- Wobble kit ------------------------------------------------------- A "rectangle" drawn by hand. Each corner gets a different horizontal and vertical radius (the value before and after the slash), which is what stops the eye reading a machined box. Kept under 25px on purpose: when the radii on one side sum to more than that side's length the browser scales every corner down proportionally, and on a short element like the time bar the classic 255px sketch values collapse into a lozenge. */ --nov-wobble-lg: 20px 6px 24px 7px / 7px 22px 6px 20px; --nov-wobble-lg-alt: 7px 22px 6px 20px / 20px 6px 24px 7px; --nov-wobble-md: 14px 4px 17px 5px / 5px 16px 4px 14px; --nov-wobble-sm: 9px 3px 11px 4px / 4px 10px 3px 9px; /* Off-register fill for boxed objects: hard-edged, no blur, translucent. */ --nov-offset: 6px 7px 0 var(--nov-wash-sienna); --nov-offset-alt: 5px 6px 0 var(--nov-wash-ochre); --nov-offset-hot: 3px 4px 0 var(--nov-wash-cranberry); /* ---- Illustration geometry ------------------------------------------- One drawing unit plus the two heights the harvest table is built from. The mobile block at the foot of the file scales all three together. */ --nov-scene-h: clamp(6.6rem, 15vh, 8.6rem); --nov-table-h: clamp(2.6rem, 6vh, 3.8rem); --nov-table-top: calc(var(--nov-table-h) * 0.4); --nov-table-apron: calc(var(--nov-table-h) * 0.6); --tt-bg: var(--nov-paper); /* Link-hover paired to THIS block's ground (standing rule 2026-08-14), not the mode name — november's unmoded block is its own canonical lighting. #f3e6ce is light: #FF465A only measures 2.71:1 here, so this lighting takes the same-hue dark variant, #BD0014 — 5.36:1. */ --link-hover: #BC0900; --tt-bg-alt: var(--nov-paper-deep); --tt-cyan: var(--nov-ink); --tt-cyan-soft: var(--nov-ink-soft); --tt-yellow: var(--nov-ochre); --tt-orange: var(--nov-sienna); /* Bold text is red, per the standing red bias — --tt-chartreuse is the token main.css sets `strong, b` from, so the anchor colour goes here. */ --tt-chartreuse: var(--nov-cranberry); --tt-green: var(--nov-sage); --tt-pink: var(--nov-cranberry-hot); --tt-purple: var(--nov-plum); --tt-blue: var(--nov-slate); --tt-teal: var(--nov-roast); --tt-gray: var(--nov-pencil); --tt-gold: var(--nov-gold); --tt-red: var(--nov-cranberry); --tt-breadcrumb-text: var(--nov-cranberry-deep); /* Soft, not a neon halo: this is ink bleeding a little into paper stock. */ --tt-breadcrumb-glow: rgba(122, 18, 16, 0.28); /* Hover/focus halo for the zodiac glyphs. This is a LIGHT theme and the chips sit on the kraft card, so the halo has to be DARK — a light glow on a light ground is invisible, which is the same trap the lava-lamp theme hits. A deep cranberry at 0.62 traces a glyph on #dcc5a0 as ink soaking outward. Never a border: the rule that consumes this token lives once, in main.css, and it casts from the character's own shape. */ --zodiac-glow: rgba(122, 18, 16, 0.62); /* The tarot card's engraving, and the second place this theme has to cut the other way. :root sets --tt-engrave for a DARK card — a black line below the glyph, which is where the shadow of a cut falls when the light is above it. On kraft the lit lip is the white one, and the theme was inheriting the dark value and getting a smudge under the numeral instead of a struck edge. */ --tt-engrave: 0 1px 0 rgba(242, 230, 210, 0.75); /* Structural border palette. Red leads and returns at the midpoint, so every rail, frame and divider in the theme reads red-dominant. Smooth stops rather than October's hard blocks — this is a wash, not a sprite. */ --tt-heading-rainbow: linear-gradient( 90deg, var(--nov-cranberry), var(--nov-sienna), var(--nov-ochre), var(--nov-sage), var(--nov-cranberry), var(--nov-plum), var(--nov-cranberry) ); --tt-heading-rainbow-vertical: linear-gradient( 180deg, var(--nov-cranberry), var(--nov-sienna), var(--nov-ochre), var(--nov-sage), var(--nov-cranberry), var(--nov-plum), var(--nov-cranberry) ); /* Two identical eight-stop cycles across the 200% background main.css sets, so headingRainbowFlow loops with no visible reset. Red is stop one and stop six of each cycle — twice per revolution, as the red bias requires. Every stop clears 3:1 on the paper ground (lowest is ochre at 4.71), which is the check a light theme has to run in the opposite direction from a dark one: here the danger is a stop being too PALE to read, not too dark. */ --tt-heading-text-rainbow: linear-gradient( 90deg, var(--nov-cranberry), var(--nov-sienna), var(--nov-ochre), var(--nov-sage), var(--nov-slate), var(--nov-cranberry), var(--nov-plum), var(--nov-roast), var(--nov-cranberry), var(--nov-sienna), var(--nov-ochre), var(--nov-sage), var(--nov-slate), var(--nov-cranberry), var(--nov-plum), var(--nov-roast), var(--nov-cranberry) ); /* ---- Type ------------------------------------------------------------- Both stacks are system faces. The project loads no webfonts anywhere — no @font-face, no @import, no font CDN link in main.js or any stylesheet — so this adds zero network requests and the first paint is already the finished typography. Headings take one illustrator's hand, top to bottom: Bradley Hand ships on every Mac and iOS device, Segoe Print on every Windows install since Vista, and Chalkboard / Noteworthy / Marker Felt / Segoe Script cover the gaps. Unlike September — which gave H1 a different script from H2/H3 — every heading level here is the SAME hand, because a sketchbook is lettered by one person. main.css sets H1 in --font-cursive and synthesises an italic; both are cancelled below, since a hand face already slants and doubling the slant smears it at display size. Body is NOT this sheet's decision any more (2026-08-15, user instruction). What stood here was Iowan Old Style via --font-sans, chosen deliberately against September's Palatino so the two warm months would not share a text face. That whole argument is moot: the text font is now locked to --font-text in main.css and every month shares it by design. The override and its token are gone, and November's voice lives in the hand face, the cream ground and the paper grain. --font-mono and --font-cursive are left untouched at the token level. The brand wordmark, time bar and breadcrumbs are locked fixtures. */ /* A cursive-category face — see .github/agents/style/fonts.md. Held as a sheet-local token, not in --font-cursive, because main.css spends --font-cursive on markdown H1 and this sheet wants the same hand on every heading level. */ --nov-font-hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", Chalkboard, Noteworthy, "Marker Felt", "Segoe Script", "Comic Sans MS", cursive; --font-heading: var(--nov-font-hand); --bg: var(--nov-paper); --surface: transparent; --text: var(--tt-cyan); --text-soft: var(--tt-cyan-soft); --muted: var(--tt-gray); --border: var(--nov-cranberry); --border-dim: rgba(164, 25, 24, 0.3); --border-teal: rgba(122, 74, 36, 0.6); background: var(--nov-paper); color: var(--tt-cyan); /* Light, so UA form controls, the default scrollbar and any user-agent chrome render for paper rather than for a terminal. */ color-scheme: light; } /* The CRT scanline is a permanent fixture, so it stays — it just stops being a CRT. Here it is the tooth of the paper: a shallow pen hatch crossed by the laid lines of the stock. This layer is fixed at z-index 5, ABOVE the text, so the alpha is held near the floor deliberately — it has to be felt and never read. Both passes are static. */ body[data-theme-id="november"]::before { background: repeating-linear-gradient( 52deg, transparent 0 7px, var(--nov-hatch) 7px 8px, transparent 8px 15px ), repeating-linear-gradient( 0deg, rgba(74, 44, 23, 0.03) 0 1px, transparent 1px 5px ); } /* --------------------------------------------------------------------------- THE PAPER. The shared site background becomes a sheet of warm cream stock with colour bled into it: a cranberry wash in the upper left, ochre across the top right, sage low on the left, and a broad sienna pool banked along the bottom where the table sits. Large, soft, and completely static. --------------------------------------------------------------------------- */ body[data-theme-id="november"] .night-sky { background: radial-gradient(ellipse 60% 44% at 14% 8%, rgba(164, 25, 24, 0.09), transparent 70%), radial-gradient(ellipse 52% 40% at 88% 4%, rgba(186, 138, 30, 0.13), transparent 72%), radial-gradient(ellipse 46% 38% at 6% 72%, rgba(94, 107, 52, 0.09), transparent 74%), radial-gradient(ellipse 78% 34% at 50% 104%, rgba(176, 72, 28, 0.16), transparent 76%), linear-gradient(174deg, #f2e6d0 0%, var(--nov-paper) 46%, #eddcc0 100%); } /* Paper grain plus two watercolour blooms with visible edges — the darker ring a wash leaves as it dries. Static: paper does not move, so the star drift and twinkle main.css runs on this element are switched off outright, which is one fewer continuous animation than July or October pay for. */ body[data-theme-id="november"] .night-sky::before { inset: 0; opacity: 1; background-image: radial-gradient(circle at 50% 50%, rgba(74, 44, 23, 0.055) 0 0.6px, transparent 1.1px), radial-gradient(circle at 50% 50%, rgba(122, 74, 36, 0.04) 0 0.5px, transparent 1px), radial-gradient(ellipse 15rem 11rem at 24% 30%, transparent 0 82%, rgba(176, 72, 28, 0.07) 86% 96%, transparent 100%), radial-gradient(ellipse 19rem 13rem at 79% 63%, transparent 0 84%, rgba(94, 107, 52, 0.06) 88% 97%, transparent 100%); background-size: 13px 11px, 19px 23px, auto, auto; background-position: 0 0, 7px 5px, 0 0, 0 0; background-repeat: repeat, repeat, no-repeat, no-repeat; animation: none; } /* --------------------------------------------------------------------------- FALLING LEAVES — the theme's only ambient motion, and it replaces the star drift rather than adding to it. Each leaf is one elongated radial-gradient: a soft-edged ellipse whose aspect ratio does the work a shape outline would at this size. Two depths, three tiles each. Every tile in a depth is the same HEIGHT and the layer translates exactly that height per loop, so the column restarts with no seam; the widths vary freely because the travel is vertical only. Vertical-only travel is also what keeps the elements small — a diagonal fall would need the element oversized on both axes and would roughly double the painted area for no visible gain at this alpha. Density comes from tile width: the far depth puts about ten leaves on a desktop viewport and the near depth about eleven. Transform only — no filter, no background-position animation, no blur. --------------------------------------------------------------------------- */ body[data-theme-id="november"] .night-sky__stars--far { inset: -26rem -2rem -2rem -2rem; opacity: 0.5; background-image: radial-gradient(ellipse 7px 3.5px at 27% 18%, rgba(160, 61, 17, 0.55) 0 46%, transparent 78%), radial-gradient(ellipse 4px 7px at 64% 52%, rgba(186, 138, 30, 0.5) 0 44%, transparent 76%), radial-gradient(ellipse 8px 4px at 41% 81%, rgba(164, 25, 24, 0.45) 0 44%, transparent 76%); background-size: 41rem 24rem, 57rem 24rem, 73rem 24rem; background-position: 0 0, 11rem 0, 26rem 0; background-repeat: repeat; animation: novemberLeafFar 56s linear infinite; } body[data-theme-id="november"] .night-sky__stars--near { inset: -32rem -2rem -2rem -2rem; opacity: 0.62; background-image: radial-gradient(ellipse 12px 5px at 22% 26%, rgba(160, 61, 17, 0.6) 0 42%, transparent 74%), radial-gradient(ellipse 6px 11px at 71% 58%, rgba(164, 25, 24, 0.5) 0 42%, transparent 74%), radial-gradient(ellipse 10px 6px at 46% 88%, rgba(122, 74, 36, 0.5) 0 42%, transparent 74%); background-size: 33rem 30rem, 47rem 30rem, 63rem 30rem; background-position: 0 0, 7rem 0, 19rem 0; background-repeat: repeat; animation: novemberLeafNear 38s linear infinite; } /* --------------------------------------------------------------------------- THE HARVEST TABLE. .night-sky__aurora is the shared ground element; July makes it a city skyline, October a tilled field, and November makes it the near edge of a laid table with a still life standing on it. The element itself is the wood: a top plane and a front apron, separated and capped by broken pen lines. The clip-path main.css uses for July's skyline is cleared, and no clip-path or mask replaces it — both would clip the ::before and ::after, and the gourds have to stand ABOVE the tabletop line. Instead the element is made taller than the wood and the wood is painted only into the bottom band, leaving the paper showing through above it. --------------------------------------------------------------------------- */ body[data-theme-id="november"] .night-sky__aurora { display: block; z-index: 2; left: 0; right: 0; top: auto; bottom: 0; height: var(--nov-scene-h); clip-path: none; box-shadow: none; background-color: transparent; background-image: /* The lip along the back of the tabletop. Two ink runs of different length with gaps between them: a straight line whose density varies is what a nib actually leaves, and it is the whole reason this does not read as a ruled CAD edge. */ repeating-linear-gradient( 90deg, var(--nov-ink-line) 0 29px, transparent 29px 34px, var(--nov-ink-line) 34px 71px, transparent 71px 76px ), /* The front edge, where the top meets the apron — a longer, steadier run. */ repeating-linear-gradient( 90deg, var(--nov-ink-line) 0 47px, transparent 47px 51px, var(--nov-ink-line) 51px 103px, transparent 103px 108px ), /* Grain drawn across the top plane, two weights, no common factor. */ repeating-linear-gradient( 90deg, rgba(58, 34, 16, 0.17) 0 2px, transparent 2px 19px, rgba(58, 34, 16, 0.1) 19px 20px, transparent 20px 47px ), linear-gradient(180deg, #c39456 0%, #ab7c43 100%), linear-gradient(180deg, #8d5c2f 0%, #6d4420 100%); background-size: 100% 2px, 100% 2px, 100% var(--nov-table-top), 100% var(--nov-table-top), 100% var(--nov-table-apron); background-position: left 0px bottom var(--nov-table-h), left 0px bottom var(--nov-table-apron), left 0px bottom var(--nov-table-apron), left 0px bottom var(--nov-table-apron), left 0px bottom 0; background-repeat: repeat-x, repeat-x, repeat-x, no-repeat, no-repeat; } body[data-theme-id="november"] .night-sky__aurora::before, body[data-theme-id="november"] .night-sky__aurora::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-repeat: repeat-x; } /* GOURDS AND SQUASH — the still life, drawn the way the whole theme is drawn. Each gourd is TWO layers: a pen outline and a colour wash, with the wash centred a fraction of a percent off the outline so the fill spills past the line on one side and falls short on the other. That single trick is what makes the row read as painted rather than rendered. The outline is a ring: transparent through the middle, ink from 92% to the edge. Because the interior is transparent, the wash beneath shows through it AND the paper grain shows through the wash. Every layer shares one background-size and one background-position — a tile 30rem wide by 3.4rem tall whose bottom edge is pinned to the tabletop line. Each ellipse is then centred `at X% 100%`, so its lower half falls outside the tile and is never painted: what is left is a gourd standing on the table. Stems are the same idea at a different aspect — a tall, narrow ellipse positioned above each crown with calc(). Painted back to front. */ body[data-theme-id="november"] .night-sky__aurora::before { background-image: /* front — the wide squash */ radial-gradient(2.6rem 1.5rem at 12% 100%, transparent 0 92%, var(--nov-ink-line) 92% 100%, transparent 100%), radial-gradient(2.5rem 1.45rem at 11.4% 99%, var(--nov-wash-sienna) 0 96%, transparent 100%), /* middle — the round gourd */ radial-gradient(1.85rem 1.85rem at 26% 100%, transparent 0 93%, var(--nov-ink-line) 93% 100%, transparent 100%), radial-gradient(1.78rem 1.78rem at 25.5% 98.6%, var(--nov-wash-cranberry) 0 96%, transparent 100%), /* back — the small gourd */ radial-gradient(1.15rem 1.05rem at 36% 100%, transparent 0 91%, var(--nov-ink-line) 91% 100%, transparent 100%), radial-gradient(1.1rem 1rem at 35.6% 99%, var(--nov-wash-ochre) 0 95%, transparent 100%), /* stems */ radial-gradient(0.1rem 0.4rem at 12% calc(100% - 1.5rem), var(--nov-olive) 0 82%, transparent 100%), radial-gradient(0.09rem 0.34rem at 26% calc(100% - 1.85rem), var(--nov-olive) 0 82%, transparent 100%); background-size: 30rem 3.4rem; background-position: left 1.5rem bottom var(--nov-table-h); } /* WHEAT AND FALLEN LEAVES, on a 41rem tile against the gourds' 30rem one so the two rows never line up into wallpaper. The sheaf is three thin vertical strokes with two grain heads over them; a stalk drawn as an angled linear-gradient would band the whole tile instead of standing where it was put, so every stroke here is a narrow ellipse. The two leaves lie flat on the tabletop, which is why they are wide and shallow. */ body[data-theme-id="november"] .night-sky__aurora::after { background-image: radial-gradient(0.07rem 1.2rem at 61% 100%, rgba(138, 92, 4, 0.85) 0 78%, transparent 100%), radial-gradient(0.06rem 1.45rem at 63% 100%, rgba(138, 92, 4, 0.75) 0 78%, transparent 100%), radial-gradient(0.07rem 1.05rem at 65% 100%, rgba(138, 92, 4, 0.8) 0 78%, transparent 100%), radial-gradient(0.2rem 0.42rem at 63% calc(100% - 1.5rem), rgba(138, 92, 4, 0.7) 0 72%, transparent 100%), radial-gradient(0.18rem 0.36rem at 61% calc(100% - 1.24rem), rgba(160, 61, 17, 0.6) 0 72%, transparent 100%), radial-gradient(0.6rem 0.22rem at 82% 99%, var(--nov-wash-cranberry) 0 60%, transparent 74%), radial-gradient(0.5rem 0.2rem at 88% 99%, var(--nov-wash-sage) 0 60%, transparent 74%); background-size: 41rem 2.6rem; background-position: left 9rem bottom var(--nov-table-h); } /* Fireworks are Independence Day furniture: July theme only. The JS also refuses to spawn them off-July, so this is belt-and-braces for a burst already alive. */ body[data-theme-id="november"] .night-sky__fireworks { display: none; } /* The brand keeps its locked cursive stack and its float; only the ink changes. July's yellow neon would vanish on cream, so the wordmark is written in cranberry with a hard, unblurred sienna offset behind it — the same off-register fill every drawn object in this theme carries. */ body[data-theme-id="november"] .brand a { color: var(--nov-cranberry); text-shadow: 0.045em 0.055em 0 var(--nov-wash-sienna); } body[data-theme-id="november"] .brand a:hover { color: var(--nov-cranberry-deep); text-shadow: 0.03em 0.038em 0 var(--nov-wash-ochre); } /* --------------------------------------------------------------------------- HEADINGS — lettered by hand, in one hand, at every level. --------------------------------------------------------------------------- */ body[data-theme-id="november"] main h1, body[data-theme-id="november"] .page-title, body[data-theme-id="november"] main h2, body[data-theme-id="november"] main h3, body[data-theme-id="november"] main h4, body[data-theme-id="november"] main h5, body[data-theme-id="november"] main h6, body[data-theme-id="november"] .markdown-page .heading-section__trigger { font-family: var(--nov-font-hand); /* main.css synthesises an italic on H1; a hand face already slants, and doubling the slant smears it at display size. */ font-style: normal; font-weight: 700; letter-spacing: 0.005em; /* July casts a cyan bloom here, which would be a grey smudge on cream. The off-register plate replaces it. It has to be a filter rather than a text-shadow: these letters are painted with background-clip:text, and a text-shadow renders in the TEXT phase — on top of the clipped background — which would bury the whole gradient under a flat block. A zero-blur drop-shadow() reads the composited alpha instead and lands behind them. */ 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. The plate follows it so the sienna stays sienna rather than being hue-rotated with the wash. */ filter: var(--heading-tint) drop-shadow(2px 3px 0 var(--nov-wash-sienna)); /* Slower than July's 5.4s. A wash creeps; it does not scroll. */ animation-duration: 8.5s; } /* Hand faces set wide and tall for their point size, so every display level comes down. The trigger selectors are stated explicitly because main.css sizes those at (0,3,0) and would otherwise outrank a bare `main h2`. */ body[data-theme-id="november"] main h1, body[data-theme-id="november"] .page-title, body[data-theme-id="november"] .heading-section--level-1 > .heading-section__summary > .heading-section__trigger { font-size: clamp(2.1rem, 5.6vw, 3.6rem); } body[data-theme-id="november"] main h2, body[data-theme-id="november"] .heading-section--level-2 > .heading-section__summary > .heading-section__trigger { font-size: clamp(1.45rem, 3.4vw, 2.1rem); } body[data-theme-id="november"] main h3, body[data-theme-id="november"] .heading-section--level-3 > .heading-section__summary > .heading-section__trigger { font-size: clamp(1.12rem, 2.2vw, 1.4rem); } /* A short stroke ruled under every H2, drawn through the same broken-pen mask as the section rails and painted in the structural --tt-heading-rainbow, so it stays inside the shared border palette. Left-aligned rather than centred: this is a margin note in a sketchbook, not a menu board. */ body[data-theme-id="november"] main h2::after { content: ""; display: block; width: min(11rem, 44%); height: 3px; margin: 0.42rem 0 0; background: var(--tt-heading-rainbow); opacity: 0.85; -webkit-mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 1) 0 27px, rgba(0, 0, 0, 0.35) 27px 31px, rgba(0, 0, 0, 1) 31px 64px, rgba(0, 0, 0, 0.6) 64px 68px ); mask-image: repeating-linear-gradient( 90deg, rgba(0, 0, 0, 1) 0 27px, rgba(0, 0, 0, 0.35) 27px 31px, rgba(0, 0, 0, 1) 31px 64px, rgba(0, 0, 0, 0.6) 64px 68px ); } /* The section rail and the table-of-contents accent become pen strokes ruled down the margin: same rainbow, broken by a vertical mask, and with July's cyan bloom removed — a glow makes no sense on paper. Collapse behaviour, the hover/focus reveal and the rail's span are all untouched. */ body[data-theme-id="november"] .heading-section::before, body[data-theme-id="november"] .page-toc::before { width: 3px; box-shadow: none; -webkit-mask-image: repeating-linear-gradient( 180deg, rgba(0, 0, 0, 1) 0 21px, rgba(0, 0, 0, 0.3) 21px 26px, rgba(0, 0, 0, 1) 26px 53px, rgba(0, 0, 0, 0.55) 53px 57px ); mask-image: repeating-linear-gradient( 180deg, rgba(0, 0, 0, 1) 0 21px, rgba(0, 0, 0, 0.3) 21px 26px, rgba(0, 0, 0, 1) 26px 53px, rgba(0, 0, 0, 0.55) 53px 57px ); } body[data-theme-id="november"] .page-toc .page-toc__title { color: var(--nov-cranberry-deep); } /* --------------------------------------------------------------------------- Links. main.css leaves `a` at the body colour and distinguishes it only on hover; on paper that used to not be enough, so prose links rested in cranberry under a wavy pen underline. The underline is gone per the standing no-underline rule (2026-08-14). Nothing rendered at rest changes by dropping it — link-camouflage.css already holds every link flat at rest sitewide and was already winning the cascade over the rest-state rule below, so the wavy line never painted there. It DID paint on hover, where camouflage's rest-only selector stops matching and this rule's own specificity governed unopposed; that live instance is removed below along with it. None of this can reach the zodiac chips: they live in the header, not in main, and main.css pins them at (0,2,0) with the doubled .celestial-chip class, which outranks the (0,1,2) selectors below either way. --------------------------------------------------------------------------- */ body[data-theme-id="november"] main a { color: var(--nov-cranberry); } /* Hover is the nib pressing harder: colour alone now, since no rule is drawn under the word in any state. The letters still pick up the same off-register offset the rest of the theme uses. July's looping hotpink keyframe is cancelled — a link is not allowed to run a continuous animation, and a pen stroke does not pulse. Hover colour is --link-hover, standing user rule 2026-08-14: #FF465A on every theme, not --nov-sienna any more. Locked in main.css's :root. */ body[data-theme-id="november"] a:hover, body[data-theme-id="november"] a:focus-visible { color: var(--link-hover); text-shadow: 0.035em 0.045em 0 var(--nov-wash-ochre); text-decoration-line: none; animation: none; } body[data-theme-id="november"] a:visited { color: var(--nov-plum); text-shadow: none; } /* NOVEMBER AT NIGHT — colour-blindness fallback (2026-08-14, task #38). The resting prose-link colour at night is --nov-cranberry, #f2545c (coral-red), and the hover swing is --link-hover, #FF465A (rose-red) — same red family. A Brettel-style LMS simulation collapses the two to near-identical tones under BOTH protanopia (Delta-E76 ~1.6) and deuteranopia (~3.1): to a red-green colorblind reader the hover swing is effectively invisible here, worse than any other theme checked. The day lighting (base, unmoded block above) is unaffected — its cranberry is dark enough that the pair still separates (~16-18). The existing single-offset "ink pressing harder" shadow is real but only 26% alpha at a ~1-2px offset, too faint to rely on alone. A currentColor text-shadow stroke on top of it adds a shape/edge cue that does not depend on hue discrimination, so it survives the simulation, and — unlike font-weight — does not reflow text. */ body[data-theme-id="november"][data-mode="night"] a:hover, body[data-theme-id="november"][data-mode="night"] a:focus-visible { text-shadow: 0.035em 0.045em 0 var(--nov-wash-ochre), -1px -1px 0 currentColor, 1px -1px 0 currentColor, -1px 1px 0 currentColor, 1px 1px 0 currentColor; } body[data-theme-id="november"] .eyebrow { color: var(--nov-sienna); letter-spacing: 0.28em; text-shadow: none; } /* A highlighter swipe, not a filled box: the wash is a gradient banked into the lower two thirds of the line, so it reads as a pen dragged across the words rather than a surface behind them. main.css strips mark's UA background; this is putting a text highlight back, which is what the element means — it is not a new card, shell or section background. */ body[data-theme-id="november"] mark { padding: 0 0.14em; background: linear-gradient( 180deg, transparent 0 22%, var(--nov-wash-ochre) 26%, rgba(186, 138, 30, 0.34) 92%, transparent 98% ); color: var(--nov-ink); text-shadow: none; } /* No left rule on quotes — left borders are reserved for list anchors. The inset wash moves from July's green to sage, and the type turns to match the marginal-aside feel. */ body[data-theme-id="november"] blockquote { color: var(--nov-ink-soft); font-style: italic; box-shadow: inset 1.1rem 0 1.6rem -1.2rem var(--nov-wash-sage); } /* --------------------------------------------------------------------------- DRAWN OBJECTS vs RULED GUIDES. main.css paints every structural border with `border-image: var(--tt-heading-rainbow) 1`, and border-image is drawn over the border box IGNORING border-radius — so a wobbly radius and a rainbow border-image cannot coexist on the same element. The theme splits them on a line that reads as intentional rather than as a compromise: RULED GUIDES keep the rainbow border-image, because they are meant to be straight: hr, table, th/td rules, the .hero divider, the section rails, the H2 stroke, the theme-name preview. DRAWN OBJECTS take a pen outline and a wobbly radius instead: cards, tags, code, pre, inputs, the sitemap link, the time bar, images, and the breadcrumb card. Using the `border` SHORTHAND is what resets border-image back to none, which is the same move October makes on its inputs and code. The pen is one colour — --nov-ink-line — because a person draws with one pen. Red is not missing from these: it is in the wash offset behind every one of them, in the frame around the two featured objects, and in every hover state. --------------------------------------------------------------------------- */ body[data-theme-id="november"] input, body[data-theme-id="november"] textarea, body[data-theme-id="november"] select, body[data-theme-id="november"] code, body[data-theme-id="november"] pre { border: 1px solid var(--nov-ink-line); border-radius: var(--nov-wobble-sm); background-color: rgba(232, 214, 182, 0.62); color: var(--nov-ink); } /* Pencil shading inside the code panel — the one place hatching is allowed on a content surface, because 
 already carried a fill in main.css and gains
   no new background here. Inline  is deliberately left flat: an inline
   box fragments across line breaks and the hatch would break with it. */
body[data-theme-id="november"] pre {
  border-radius: var(--nov-wobble-md);
  background-image: repeating-linear-gradient(
    52deg,
    transparent 0 9px,
    var(--nov-hatch) 9px 10px,
    transparent 10px 19px
  );
  box-shadow: var(--nov-offset-alt);
}

/* One pane of paper, not one per line: the fill and the hatch belong 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="november"] pre code {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
}

/* Buttons are selected BY CLASS, never as bare `button`. The strip in the
   breadcrumb bar ran mixed — seven  signs beside a