:root{--jf-bg:#fff;--jf-ink:#111;--jf-hair:#111;color-scheme:light}
html[data-theme="dark"]{--jf-bg:#111;--jf-ink:#f2f2f0;--jf-hair:#f2f2f0;color-scheme:dark;background:#fff;filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] img:not([src*="asterisk"]):not([src*="qmark"]),html[data-theme="dark"] video,html[data-theme="dark"] canvas,html[data-theme="dark"] iframe,html[data-theme="dark"] picture,
html[data-theme="dark"] .mk,html[data-theme="dark"] .cvsec .section-head::after,html[data-theme="dark"] [style*="background-image"]{filter:invert(1) hue-rotate(180deg)}
html[data-theme="dark"] .cvsec .section-head::before{filter:none}
.jf-theme{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:2147482000;
  display:inline-flex;align-items:center;gap:6px;font:400 10px/1 "Space Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  color:#111;background:#fff;border:1px solid #111;padding:7px 9px 6px;cursor:pointer;border-radius:0}
.jf-theme::before{content:"";width:11px;height:11px;background:url(/assets/img/asterisk-cutout-512.png) center/contain no-repeat}
.jf-theme:hover,.jf-theme:focus-visible{background:#111;color:#fff;outline:none}
.jf-theme:hover::before,.jf-theme:focus-visible::before{filter:invert(1)}
@media print{.jf-theme{display:none}}

/* 2026-10-23 JF: cards identical to light mode in dark */
html[data-theme="dark"] .card{filter:invert(1) hue-rotate(180deg)}html[data-theme="dark"] .card img,html[data-theme="dark"] .card video,html[data-theme="dark"] .card canvas,html[data-theme="dark"] .card iframe,html[data-theme="dark"] .card picture,html[data-theme="dark"] .card .mk,html[data-theme="dark"] .card [style*="background-image"]{filter:none!important}

/* DRAFT cards-sun: connector layer */
.cards>.sun-lines{position:absolute;left:0;top:0;z-index:0;pointer-events:none;overflow:visible}
html[data-theme="dark"] .cards>.sun-lines{filter:invert(1) hue-rotate(180deg)}

/* 2026-10-24 decks page on phones (JF): bio/CV card first, full width, in Solitaire; theme toggle in the layout row */
@media (max-width:720px){#table[data-spread="s"] .cards>[data-id="cv"]{order:-1!important}/* JF 2026-10-24: CV same size as other squares (was grid-column:1/-1) */}
.jf-theme.jf-theme-inrow{position:static!important;right:auto!important;bottom:auto!important;margin-left:10px;align-self:center}
@media (max-width:720px){#spreads{flex-wrap:wrap;justify-content:center;row-gap:8px}}

/* 2026-10-24 decks page phones: SHUFFLE replaces the four layout buttons (<=720px); iPad/desktop unchanged */
#spreads .sh-btn{display:none}
@media (max-width:720px){#spreads button[data-k]{display:none!important}#spreads .sh-btn{display:inline-block}#spreads{flex-wrap:nowrap}}

/* lol mark (transparent black) turns white with the page in dark mode (JF 2026-10-24 10:01 PM) */
html[data-theme="dark"] img[src*="lol-mark"][src*="-clear"]{filter:none!important}

/* 2026-10-25 3:20 PM JF: phones: NEW AGE + SHOP featured top row; Xombi a step apart (own row, extra gap, right column so not under NEW AGE); desktop unchanged */
@media (max-width:720px){
#table .cards>[data-id="new-age"]{order:-30!important}
#table .cards>[data-id="store"]{order:-29!important}
#table[data-spread] .cards>[data-id="cv"],#table .cards>[data-id="cv"]{order:-20!important}
#table .cards>[data-id="syssss"]{order:-19!important}
#table .cards>[data-id="graphics"]{order:-18!important}
#table .cards>[data-id="xombi"]{order:-17!important}
}
/* 2026-10-25 3:23 PM JF: swap Xombi and Sound Sysss on phones */
/* 2026-10-25 3:26 PM JF: tight phone spacing to minimize scrolling (no extra gap after row 1) */
@media (max-width:720px){#table.table{padding-top:4px}#table .cards{row-gap:20px!important}}
/* 2026-10-25 3:28 PM JF: phones: Live Shows up to row 2 right; right column shifts down; left column unchanged */
@media (max-width:720px){
#table[data-spread] .cards>[data-id="new-age"],#table .cards>[data-id="new-age"]{order:-40!important}
#table[data-spread] .cards>[data-id="store"],#table .cards>[data-id="store"]{order:-39!important}
#table[data-spread] .cards>[data-id="cv"],#table .cards>[data-id="cv"]{order:-38!important}
#table[data-spread] .cards>[data-id="feed"],#table .cards>[data-id="feed"]{order:-37!important}
#table[data-spread] .cards>[data-id="graphics"],#table .cards>[data-id="graphics"]{order:-36!important}
#table[data-spread] .cards>[data-id="syssss"],#table .cards>[data-id="syssss"]{order:-35!important}
#table[data-spread] .cards>[data-id="instagram"],#table .cards>[data-id="instagram"]{order:-34!important}
#table[data-spread] .cards>[data-id="xombi"],#table .cards>[data-id="xombi"]{order:-33!important}
#table[data-spread] .cards>[data-id="hi-freqs"],#table .cards>[data-id="hi-freqs"]{order:-32!important}
#table[data-spread] .cards>[data-id="health-club"],#table .cards>[data-id="health-club"]{order:-31!important}
#table[data-spread] .cards>[data-id="felli"],#table .cards>[data-id="felli"]{order:-30!important}
#table[data-spread] .cards>[data-id="gallery"],#table .cards>[data-id="gallery"]{order:-29!important}
}

@media (max-width:720px){
#table[data-spread] .cards>[data-id="instagram"],#table .cards>[data-id="instagram"]{order:-36!important}
#table[data-spread] .cards>[data-id="graphics"],#table .cards>[data-id="graphics"]{order:-34!important}
#table[data-spread] .cards>[data-id="gallery"],#table .cards>[data-id="gallery"]{order:-32!important}
#table[data-spread] .cards>[data-id="hi-freqs"],#table .cards>[data-id="hi-freqs"]{order:-29!important}
}

@media (max-width:720px){
#table[data-spread] .cards>[data-id="hi-freqs"],#table .cards>[data-id="hi-freqs"]{order:-31!important}
#table[data-spread] .cards>[data-id="health-club"],#table .cards>[data-id="health-club"]{order:-29!important}
}