/*
 * The inner pages' looks (components/looks.js), one per section, each on a live starfield (.lk-sky):
 *   <html data-look="control" [data-tint="green"]>   the mission files: Mission control
 *   <html data-look="nebula-dusk">                   the website pages: Nebula, Dusk
 *   <html data-look="galaxy">                        the game pages: Galaxy
 */
.lk-sky { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* the backgrounds sit on <html>, with <body> clear, so the scenery behind the page (z-index -1) shows */
[data-look] body, .proj-page[data-look] body { background: transparent; }
[data-look] main { overflow-x: clip; } /* scenery round the content never widens the page */
[data-look] { background: radial-gradient(90% 60% at 50% -10%, #0b1124, transparent 70%) fixed, #02030a; }

/* Work (the mission files): Mission control. Consoles, brackets, a clock counting the mission's elapsed time */
[data-look="control"] { background: radial-gradient(80% 50% at 50% 0%, rgb(20 40 60 / 0.6), transparent 70%), #02050a; }
.lk-met { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 0 0 1.6rem; padding: 0.7rem 1rem; border: 1px solid rgb(159 232 255 / 0.25); border-radius: 0.5rem; background: rgb(4 14 24 / 0.75); font: 400 0.66rem/1.3 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--hud-dim); }
.lk-met b { margin-left: 0.5rem; color: var(--hud); font-weight: 400; font-variant-numeric: tabular-nums; }
.lk-dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 8px #7dffb0; vertical-align: 0.05rem; }
[data-look="control"] .mf-entry, [data-look="control"] .proj-facts, [data-look="control"] .proj-next, [data-look="control"] .proj-hire {
  position: relative; border-color: rgb(159 232 255 / 0.22); border-radius: 0.3rem; background: linear-gradient(rgb(159 232 255 / 0.03), transparent 40%), rgb(4 12 22 / 0.8);
  box-shadow: inset 0 0 40px rgb(159 232 255 / 0.04); }
[data-look="control"] .mf-entry::before, [data-look="control"] .mf-entry::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: 2px solid var(--hud); opacity: 0.7; }
[data-look="control"] .mf-entry::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
[data-look="control"] .mf-entry::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
[data-look="control"] .mf-entry__n { color: #7dffb0; text-shadow: 0 0 10px rgb(125 255 176 / 0.6); }
[data-look="control"] .mf-entry__line { font: 400 0.72rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hud); }
[data-look="control"] .proj-facts { padding: 0 1rem; }
[data-look="control"] .mf-title { text-shadow: 0 0 30px rgb(159 232 255 / 0.25); }
[data-look="control"] .cat { font: 400 0.7rem/1.3 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--hud); }
/* PlusMove's file: the same control room, lit in PlusMove's green */
[data-look="control"][data-tint="green"] { --hud: #5ff0c4; --hud-dim: rgb(95 240 196 / 0.55);
  background: radial-gradient(80% 50% at 50% 0%, rgb(6 120 88 / 0.42), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgb(6 214 160 / 0.08), transparent 70%), #010805; }
[data-tint="green"] .lk-met { border-color: rgb(6 214 160 / 0.3); background: rgb(2 18 12 / 0.75); }
[data-look="control"][data-tint="green"] .mf-entry, [data-look="control"][data-tint="green"] .proj-facts, [data-look="control"][data-tint="green"] .proj-next, [data-look="control"][data-tint="green"] .proj-hire {
  border-color: rgb(6 214 160 / 0.26); background: linear-gradient(rgb(6 214 160 / 0.04), transparent 40%), rgb(2 16 11 / 0.82); box-shadow: inset 0 0 40px rgb(6 214 160 / 0.05); }
[data-look="control"][data-tint="green"] .mf-title { text-shadow: 0 0 30px rgb(6 214 160 / 0.3); }

/* Games: Galaxy. A spiral galaxy turning in the game's own colour (looks.js) */
[data-look="galaxy"] { background: radial-gradient(60% 50% at 75% 35%, color-mix(in srgb, var(--game-accent, #f2c46d) 16%, transparent), transparent 70%), #02030a; }
[data-look="galaxy"] .gm-media { box-shadow: 0 0 0 1px color-mix(in srgb, var(--game-accent, #f2c46d) 40%, transparent), 0 40px 120px -40px var(--game-accent, #f2c46d); }
[data-look="galaxy"] .proj-card, [data-look="galaxy"] .proj-next, [data-look="galaxy"] .proj-hire { border-color: color-mix(in srgb, var(--game-accent, #f2c46d) 30%, transparent); background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--game-accent, #f2c46d) 14%, transparent), transparent 60%), rgb(8 8 20 / 0.75); }
[data-look="galaxy"] .cat, [data-look="galaxy"] .wo-tag { color: var(--game-accent, var(--gold)); }
[data-look="galaxy"] .gm-gallery img { border-radius: 0.8rem; }

/* Freelance (the website pages): Nebula, Dusk. A dim, desaturated nebula in the site's own colours, with
   Webb-spiked stars (looks.js); white headings with the site's colour as a glow, frosted panels */
[data-look="nebula-dusk"] { background: #04030a; }
[data-look="nebula-dusk"] .proj-screen { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 50px 140px -40px var(--lk-s1, var(--gold)); }
/* the glow behind the picture spills past the page column: let it, rather than cut it off in a straight line  */
[data-look="nebula-dusk"] main { overflow-x: visible; }
[data-look="nebula-dusk"] .proj-title { background: linear-gradient(100deg, #fff 20%, var(--lk-s1, var(--gold)) 70%, var(--lk-s2, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-look="nebula-dusk"] .proj-h { background: linear-gradient(100deg, #fff 40%, var(--lk-s1, var(--gold))); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-look="nebula-dusk"] .cat { color: var(--lk-s1, var(--gold)); }
[data-look="nebula-dusk"] .proj-card, [data-look="nebula-dusk"] .proj-next, [data-look="nebula-dusk"] .proj-hire, [data-look="nebula-dusk"] .proj-facts {
  border: 1px solid rgb(255 255 255 / 0.13); border-radius: 1.4rem; background: rgb(14 12 30 / 0.38); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08); }
[data-look="nebula-dusk"] .proj-facts { padding-inline: 0.6rem; }
[data-look="nebula-dusk"] .proj-facts div + div { border-left-color: rgb(255 255 255 / 0.1); }
[data-look="nebula-dusk"] .proj-card__n { color: var(--lk-s1, var(--hud)); }
[data-look="nebula-dusk"] .proj-title, [data-look="nebula-dusk"] .proj-h { background: none; color: #fff; }
[data-look="nebula-dusk"] .proj-title { text-shadow: 0 0 40px color-mix(in srgb, var(--lk-s1, var(--gold)) 45%, transparent); }
[data-look="nebula-dusk"] .proj-lede, [data-look="nebula-dusk"] .proj-sec > p:not(.cat), [data-look="nebula-dusk"] .proj-card p { color: rgb(243 239 226 / 0.94); }
[data-look="nebula-dusk"] .proj-card, [data-look="nebula-dusk"] .proj-next, [data-look="nebula-dusk"] .proj-hire, [data-look="nebula-dusk"] .proj-facts { background: rgb(8 7 20 / 0.74); }
@media (max-width: 56rem) {
  [data-look="nebula-dusk"] .proj-facts div, [data-look="nebula-dusk"] .proj-facts div + div { border-top-color: rgb(255 255 255 / 0.1); padding-left: 0.6rem; }
}