/* ============================================================================ XYLEMIC — shared theme One source of truth for the museum's typography, palette and page chrome. Typography: DirtyLine (display) · Humane (supplementary) · Kiya (hand) · system sans (body) Palette: a coral / sky / white family. The HOMEPAGE cycles through all three (opt in with ); every other page stays on the calm, legible WHITE phase — same family, no motion. ============================================================================ */ /* ---- self-hosted display faces ---- */ @font-face{font-family:"DirtyLine";src:url(/fonts/dirtyline.woff2) format("woff2"),url(/fonts/dirtyline.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Kiya";src:url(/fonts/kiya.woff2) format("woff2"),url(/fonts/kiya.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Humane";src:url(/fonts/humane-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:"Humane";src:url(/fonts/humane-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:"Humane";src:url(/fonts/humane-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:"Humane";src:url(/fonts/humane-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;} /* Registered so the whole palette can interpolate smoothly while it cycles — foreground + accent travel WITH the background to stay readable on every hue. */ @property --bg{syntax:"";inherits:true;initial-value:#FFFFFF;} @property --fg{syntax:"";inherits:true;initial-value:#16111f;} @property --soft{syntax:"";inherits:true;initial-value:#5a5470;} @property --accent{syntax:"";inherits:true;initial-value:#a23ad6;} :root{ --maxw:1080px; /* type tokens */ --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --display:"DirtyLine",var(--sans); --supp:"Humane",var(--sans); --hand:"Kiya",ui-rounded,"Segoe Print",var(--sans); --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; /* calm static palette — the homepage's WHITE phase. Inner pages live here. */ --bg:#F7F6FB; --bg-2:#FFFFFF; --fg:#16111f; --soft:#5a5470; --accent:#a23ad6; /* back-compat aliases so existing inner-page rules keep resolving */ --fg-dim:#5a5470; --fg-dim2:#928da8; --hi:#a23ad6; --accent-2:#c44ad8; --line:rgba(22,17,40,.14); --line-2:rgba(22,17,40,.07); } /* white -> coral -> sky -> black -> white; text + accent shift in lockstep so the type stays legible on every phase (white ink + red accent carry the black phase). Starts on white so the first paint matches the calm inner-page phase (no red flash). Only applied when a page opts in via (the homepage). */ @keyframes hue{ 0%,100%{--bg:#FFFFFF;--fg:#16111f;--soft:#5a5470;--accent:#a23ad6;} /* white */ 25% {--bg:#FF8B8C;--fg:#2b0e12;--soft:#7c3a3d;--accent:#8f1f27;} /* coral */ 50% {--bg:#8BD6FF;--fg:#0c1a2b;--soft:#355770;--accent:#155a86;} /* sky */ 75% {--bg:#0b0d12;--fg:#f5f2ea;--soft:#8b93a3;--accent:#ef4135;} /* black */ } html.cycle{animation:hue 52s ease-in-out infinite;} /* ---- base ---- */ *{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;background:var(--bg);} html,body{margin:0;padding:0;min-height:100%;} body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;} a{color:inherit;} ::selection{background:var(--fg);color:var(--bg);} /* ---- shared top bar ---- */ .top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px; padding:16px clamp(16px,4vw,40px); background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);} .brand{font-family:var(--supp);font-weight:700;font-size:clamp(78px,9vw,102px);letter-spacing:.04em; color:var(--fg);text-decoration:none;line-height:1;white-space:nowrap;text-transform:uppercase;} .brand .sep{opacity:.42;} .nav-c{flex:1;display:flex;justify-content:center;gap:clamp(18px,3vw,34px);} .nav-c a{font-family:var(--supp);font-weight:500;font-size:clamp(63px,7.2vw,81px);letter-spacing:.05em; text-transform:uppercase;color:var(--fg);text-decoration:none;opacity:.82;transition:opacity .15s;white-space:nowrap;} .nav-c a:hover{opacity:1;} .nav-c a.on{opacity:1;color:var(--accent);} .nav-ask{font-family:var(--supp);font-weight:700;font-size:clamp(66px,7.5vw,87px);letter-spacing:.05em; text-transform:uppercase;color:var(--accent);text-decoration:none;white-space:nowrap;transition:opacity .15s;} .nav-ask:hover{opacity:.78;} @media(max-width:680px){ .top{flex-wrap:wrap;gap:8px 18px;} .brand{order:1;} .nav-ask{order:2;margin-left:auto;} .nav-c{order:3;flex:0 0 100%;justify-content:flex-start;gap:22px;} .nav-c a{font-size:63px;} } /* ---- shared footer ---- */ .foot{max-width:var(--maxw);margin:clamp(64px,10vh,110px) auto 0; padding:24px clamp(16px,4vw,40px) 80px;border-top:1.5px solid var(--fg); display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between; font-family:var(--sans);font-size:12px;letter-spacing:.02em;color:var(--soft);line-height:1.8;} .foot a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--soft);} .foot a:hover{color:var(--accent);border-color:var(--accent);} /* ---- preload veil: holds the first paint until the custom fonts (and the citation popover audio) have loaded, so type never flashes from fallback to webfont (FOUT). /loader.js lifts it the instant things are ready; the 6s keyframe is a failsafe for the rare case that script never runs. Pages opt in with the markup + the