/* Shared tokens for portfolio style previews. Palettes are swapped via data-palette on ; every page reads the same semantic tokens so one selector change retints the whole design. */ @import url('https://fonts.googleapis.com/css2?family=Forum&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); :root { /* Folk rosette mark (trial, 2026-07-12): 8 almond petals, open center. Used as a mask so it inherits text color wherever it replaces the ✳. */ --rosette-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -32 64 64'%3E%3Cg fill='black'%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(45)'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(90)'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(135)'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(180)'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(225)'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(270)'/%3E%3Cpath d='M0,-5C-4,-9,-5,-20,0,-30C5,-20,4,-9,0,-5Z' transform='rotate(315)'/%3E%3C/g%3E%3C/svg%3E"); } :root, :root[data-palette="voltage-plum"] { /* SANGRIA. Purples carry an essence of magenta: red raised against blue, without going all the way to the magenta-editorial scheme. */ --bg: #fbf0f5; --surface: #ffffff; --ink: #37132f; --ink-soft: #78476b; --field: #4f1c40; --on-field: #faecf4; --on-field-soft: #dcb4d0; --primary: #8a447a; --primary-deep: #6b3062; --pop: #f57a54; --pop-deep: #c1401d; /* stays RED-orange; the gold accent lives in Adriatic */ --tint: #f6dbee; --line: #e2b1d5; --night-bg: #2e0f28; --night-surface: #3e1834; --glow1: #9c4489; --glow2: #de5530; } :root[data-palette="ink-coral"] { --bg: #f8f1e5; --surface: #fffaf0; --ink: #232035; --ink-soft: #5d5876; --field: #232035; --on-field: #f6efdf; --on-field-soft: #b9b2cd; --primary: #c14724; --primary-deep: #9c371a; --pop: #f2a63b; --pop-deep: #98600a; /* AA on --bg: was #a5670c at 4.12 */ --tint: #f4ddc9; --line: #e0d3b8; --night-bg: #171429; --night-surface: #242040; --glow1: #e05637; --glow2: #6f63c4; } :root[data-palette="magenta-editorial"] { --bg: #fdf4ea; --surface: #ffffff; --ink: #33101f; --ink-soft: #75495c; --field: #9e1c56; --on-field: #fdeef2; --on-field-soft: #f2c2d3; /* AA on --field: was #eeb3c8 at 4.33 */ --primary: #b91e63; --primary-deep: #8f174c; --pop: #f2a03d; --pop-deep: #9c5c08; /* AA on --bg: was #a86608 at 4.23 */ --tint: #fadbe7; --line: #ecc3d2; --night-bg: #28091a; --night-surface: #3c1129; --glow1: #b91e63; --glow2: #f2a03d; } :root[data-palette="navy-citron"] { --bg: #f5f2e6; --surface: #fffdf4; --ink: #1f2547; --ink-soft: #575c7c; --field: #232a54; --on-field: #f2efdd; --on-field-soft: #b7bcd8; --primary: #3a4494; --primary-deep: #2b3374; --pop: #e3cd3d; --pop-deep: #756a10; /* AA on --bg: was #7d7011 at 4.46 */ --tint: #e9e6cf; --line: #d6d1b4; --night-bg: #121635; --night-surface: #1e2447; --glow1: #4a55a8; --glow2: #e3cd3d; } /* Built from her reference swatches: #007E7E / #309898 teal, #FF9F00 amber, #F4631E orange. The pink version read as Christmas, and the reason is that teal + red with nothing between them IS the Christmas pairing. Her palette avoids it by bridging with AMBER, so the dominant warm is golden rather than red. Keeping the accent on the amber-orange side of the spectrum, never the crimson end, is what holds the holiday read off. Id kept as teal-coral so saved selections still resolve. */ :root[data-palette="teal-coral"] { --bg: #f1faf9; --surface: #ffffff; --ink: #0c3536; --ink-soft: #4a7574; /* Her #007E7E is a mid-tone, not a dark: as the full-bleed band it put the soft body copy at 3.0:1. Shifted it up to --primary and darkened the band one step, which keeps the hue and fixes the contrast. */ --field: #00605f; --on-field: #e6f6f5; --on-field-soft: #a8d8d5; --primary: #007e7e; --primary-deep: #005050; --pop: #ff9f00; /* Deep GOLD, not burnt orange. It was #c44a15, near-identical to Sangria's #c1401d, so the V and N initials and the footer button looked the same in both schemes. Gold vs red-orange is the difference you actually see. */ --pop-deep: #9c6100; --tint: #cfeceb; --line: #a5d9d6; --night-bg: #063234; --night-surface: #0c4446; --glow1: #309898; --glow2: #ff9f00; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter Tight', system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Forum', serif; font-weight: 400; line-height: 1.08; margin: 0; } p { margin: 0; } a { color: var(--primary-deep); } img, svg { display: block; max-width: 100%; } :focus-visible { outline: 3px solid var(--pop-deep); outline-offset: 3px; border-radius: 2px; } /* SELECTION. Was --tint, which is one perceptual step off --bg by design: exactly what a chip wants and exactly what a highlight must not be. On Sangria it measured 1.16:1 against the page, so dragging over text looked like nothing had happened at all. --pop-deep instead, because it is already the token tuned to clear 4.5:1 on a light background, so one value covers both jobs at once: the block is obvious against the page (4.66 to 4.90 across the five palettes) and --bg text sitting on it clears AA by the same measurement. The dark bands need the opposite treatment. --pop-deep against --field runs as low as 1.43 on Magenta Editorial and 1.45 on Adriatic, so on those bands selection uses the lighter --pop (3.58 and up against the field, over the 3:1 non-text threshold) with --ink on top (6.01 and up, AA). */ ::selection { background: var(--pop-deep); color: var(--bg); } .entry-field::selection, .entry-field ::selection, footer::selection, footer ::selection { background: var(--pop); color: var(--ink); } /* .star spans render the rosette in place of their ✳ glyph: the text is clipped away and the mark is drawn from currentColor, so every existing color override keeps working. */ .star { color: var(--pop-deep); font-style: normal; display: inline-block; width: 0.92em; height: 0.92em; line-height: 1; vertical-align: -0.08em; overflow: hidden; text-indent: 200%; white-space: nowrap; background: currentColor; -webkit-mask: var(--rosette-mask) center / contain no-repeat; mask: var(--rosette-mask) center / contain no-repeat; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }