/* Light and dark (2026-10-11). He, of the black: "the black backgroudn is bad", then after the preview: "charcoal for
   dark mode and cream for light mode". Dark is the site as it was on charcoal #1d2022 (set in m.html's :root); light
   is below. m-theme.js picks one from the device's setting, or the nav's sun and moon. */

/* light: the dark and the cream swap places (the type goes ink, the cream footer goes charcoal), and the light accents
   step down to darker shades of themselves so they read on cream: blue #1a86c0, tan #a06a3c, sky #2f8a8a, lime
   #5a8a12, yellow #b07d00. Pink stays as it is. (The first preview flipped the page with one invert filter; a filter
   can't make the site's pink, which came out purple.) Colours the scripts set inline are caught by their value. */
html[data-theme="light"] { --bg: #f4f1ea; --white: #090b0c; color-scheme: light; }
html[data-theme="light"] .nav nav a[style*="#22a9e0"] { --hc: #1673a5 !important; }
html[data-theme="light"] .nav nav a[style*="#ce9a6d"] { --hc: #936237 !important; }
html[data-theme="light"] .nav nav a[style*="#9bc53d"] { --hc: #4e7810 !important; }

/* the landing: its four words and their drawings */
html[data-theme="light"] .sites { color: #1a86c0; }
html[data-theme="light"] .sites svg.frame rect, html[data-theme="light"] .sites svg.frame line { stroke: #090b0c; }
html[data-theme="light"] .sites svg.frame circle { fill: #090b0c; }
html[data-theme="light"] .sites .bar { background: #e3ded2; }
html[data-theme="light"] .sites .ripple { border-color: #1a86c0; }
html[data-theme="light"] .team { color: #a06a3c; }
html[data-theme="light"] .sys { color: #2f8a8a; }
html[data-theme="light"] .sys svg.circuit rect, html[data-theme="light"] .sys svg.circuit path { stroke: #2f8a8a; }
html[data-theme="light"] .sys svg.circuit circle { fill: #2f8a8a; }
html[data-theme="light"] .sys .caret { background: #2f8a8a; }
html[data-theme="light"] .sys .scan { background: #2f8a8a; box-shadow: 0 0 18px 4px rgba(47, 138, 138, .4); }
html[data-theme="light"] .next { color: #5a8a12; }
html[data-theme="light"] .some .lead { color: rgba(9, 11, 12, .7); }
/* the scroll line and its handle */
html[data-theme="light"] .trail path { stroke: #5a8a12; }
html[data-theme="light"] .pull { color: #4e7810; }

/* colours the scripts set inline ("sometimes I"'s endings, the About's lit words): their darker shades */
html[data-theme="light"] [style*="color: rgb(34, 169, 224)"] { color: #1673a5 !important; }
html[data-theme="light"] [style*="color: rgb(206, 154, 109)"] { color: #936237 !important; }
html[data-theme="light"] [style*="color: rgb(152, 205, 205)"] { color: #297777 !important; }
html[data-theme="light"] [style*="color: rgb(155, 197, 61)"] { color: #4e7810 !important; }
html[data-theme="light"] [style*="color: rgb(255, 210, 63)"] { color: #8e6500 !important; }
html[data-theme="light"] [style*="color: rgb(255, 255, 255)"] { color: #090b0c !important; }   /* systems' flash */

/* brands: the label, a pointed-at name's colour, MetEngine's white mark (it would vanish on cream) */
html[data-theme="light"] .b-title { color: #090b0c; }
html[data-theme="light"] .b-item[style*="#22a9e0"] { --bc: #1a86c0 !important; }
html[data-theme="light"] .b-item[style*="#ce9a6d"] { --bc: #a06a3c !important; }
html[data-theme="light"] .b-item[style*="#98cdcd"] { --bc: #2f8a8a !important; }
html[data-theme="light"] .b-item[style*="#9bc53d"] { --bc: #5a8a12 !important; }
html[data-theme="light"] .b-item[style*="#ffd23f"] { --bc: #b07d00 !important; }
html[data-theme="light"] .b-logo[src*="metengine"] { filter: invert(1); }

/* the work: the title, the rules and the small type; the lit rows keep their bright bands, dark words on them */
html[data-theme="light"] .w-title { color: #b07d00; }
html[data-theme="light"] .w-nx { color: #5a8a12; }
html[data-theme="light"] .w-yours .w-meta { color: #4e7810; }
html[data-theme="light"] .w-list { border-top-color: rgba(9, 11, 12, .14); }
html[data-theme="light"] .w-row { border-bottom-color: rgba(9, 11, 12, .14); }
html[data-theme="light"] .w-meta { color: rgba(9, 11, 12, .62); }
html[data-theme="light"] .w-go { color: rgba(9, 11, 12, .45); }
html[data-theme="light"] .w-media { background: #e3ded2; }

/* the contact: paper tags on darker green strings; the x tag lights in ink (its colour is the cream), its icon ink */
html[data-theme="light"] .string { background: linear-gradient(rgba(90, 138, 18, 0), #5a8a12 min(90px, 60%)); }
html[data-theme="light"] .c-tag { background: #fbfaf6; border-color: rgba(9, 11, 12, .16); }
html[data-theme="light"] .c-tag::before { background: #f4f1ea; box-shadow: inset 0 0 0 2px #5a8a12; }
html[data-theme="light"] .hang.on .c-tag[style*="#f4f1ea"] { background: #090b0c; border-color: #090b0c; color: #f4f1ea; }
html[data-theme="light"] .hang.on .c-tag[style*="#f4f1ea"] .t-ico svg > g { fill: #f4f1ea; }
html[data-theme="light"] .hang:not(.on) .c-tag[style*="#f4f1ea"] .t-ico .glyph { filter: brightness(0); }

/* the footer the other way round: a charcoal panel (dark mode's colour) with cream on it, keys a shade lighter */
html[data-theme="light"] .foot { background: #1d2022; --ink: #f4f1ea; }
html[data-theme="light"] .f-key { background: #2c3235; }

/* the sun and the moon in the nav: the sun in dark mode (to go light), the moon in light mode */
.mode { align-self: center; display: inline-grid; place-items: center; box-sizing: content-box; width: 20px; height: 20px; padding: 9px; margin: -9px -9px -9px -3px;
  border: 0; background: none; color: var(--white); cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.mode svg { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
html[data-theme="light"] .mode .sun, html:not([data-theme="light"]) .mode .moon { opacity: 0; transform: rotate(-90deg) scale(.3); }
@media (hover: hover) { .mode:hover { transform: rotate(24deg); } }
.mode:focus-visible { outline: 2px solid currentColor; outline-offset: 0; border-radius: 50%; }
/* the switch itself: the new colours wipe in as a circle out of the button (m-theme.js), nothing else crossfades */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* small text in the accents on cream, at shades that pass 4.5:1 (the audit's item 6: the stepped-down accents measured
   3.2 to 4.0 on small text): the nav's hover colours, "pull me", the "sometimes I" endings and the About's lit words
   (caught by value above), and the small pink. The big words keep their shades: large text needs 3:1 */
html[data-theme="light"] a.talk, html[data-theme="light"] .w-cta { color: #d00a7c; }

/* light mode leftovers (the audit's item 11): Cleopetra's mark is one near-white (#e4fffe) and vanished on cream, so it
   goes dark as MetEngine's does; the paper plane's pale end washed out on its paper tag, so it's deeper; and ABR's band
   takes the title's yellow, so the work shows one yellow, not a dark one over a bright one (ink on it: 5.6:1) */
html[data-theme="light"] .b-logo[src*="cleopetra"] { filter: invert(1); }
html[data-theme="light"] .hang:not(.on) .c-tag .t-ico .g-plane { filter: brightness(.78) saturate(1.5); }
html[data-theme="light"] .w-row[style*="#ffd23f"] { --gc: #b07d00 !important; }

/* touch screens: the nav's links, the sun and moon, and "back to top" catch a finger 44 px tall (they were 34 to 38;
   the audit's item 12). Only the area that takes the tap grows: nothing moves */
@media (pointer: coarse) {
  html .nav nav a { padding: 13px 8px; margin: -13px -8px; }   /* (html: m.html's own rule comes later) */
  .mode { padding: 12px; margin: -12px -12px -12px -6px; }
  .f-top { padding: 14px 8px; margin: -14px -8px; }
}