@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@300;400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;1,6..72,300&display=swap");

:root {
  --site-ink: #06100f;
  --site-paper: #e9eee4;
  --site-acid: #c8ff68;
  --site-aqua: #72ead5;
  --site-lav: #b6a7ff;
  --site-blue: #66e8ff;
  --site-line: rgba(233,238,228,.17);
  --site-header-height: 78px;
  --site-sans: Manrope, Arial, sans-serif;
  --site-mono: "DM Mono", monospace;
  --site-serif: Newsreader, Georgia, serif;
}
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
body[data-site-page] { font-family: var(--site-sans); padding-top: var(--site-header-height); }
body[data-site-page="home"] { padding-top: 0; }
.site-header, .site-header * { box-sizing: border-box; }
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 90; width: 100%; max-width: none;
  height: var(--site-header-height); margin: 0; padding: 0 clamp(20px,3vw,48px);
  display: flex; align-items: center; justify-content: space-between; gap: 25px;
  color: var(--site-paper); background: rgba(6,16,15,.94);
  border: 0; border-bottom: 1px solid var(--site-line);
  backdrop-filter: blur(16px); mix-blend-mode: normal;
}
.site-header a { color: inherit; text-decoration: none; border: 0; }
.site-header .site-home {
  display: inline-flex; align-items: baseline; flex: 0 0 auto;
  font: 400 28px/1 var(--site-sans); letter-spacing: -.08em; padding: 7px 0;
}
.site-header .site-home span { color: var(--site-acid); margin-left: 3px; }
.site-header .site-navigation {
  display: flex; align-items: center; justify-content: flex-end; gap: clamp(2px,.4vw,8px);
  padding: 0; margin: 0; height: auto;
}
.site-header .site-navigation a {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  min-height: 40px; padding: 9px 7px; margin: 0; border: 1px solid transparent; border-radius: 5px;
  font: 400 clamp(10px,.86vw,12px)/1.4 var(--site-mono);
  letter-spacing: .01em; text-transform: uppercase;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.site-header .site-navigation a[aria-current] {
  color: var(--site-blue); border-bottom-color: var(--site-blue); background: rgba(38,189,255,.06);
}
.site-header .site-navigation a:hover,
.site-header .site-navigation a:focus-visible {
  color: var(--site-blue); background: rgba(38,189,255,.13); border-color: rgba(76,218,255,.65);
  box-shadow: 0 0 18px rgba(38,189,255,.2); text-shadow: 0 0 10px rgba(65,211,255,.55);
}
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--site-blue); outline-offset: 3px; }
.site-header .site-menu-toggle {
  display: none; border: 1px solid var(--site-line); border-radius: 5px;
  background: transparent; color: var(--site-paper); cursor: pointer;
  min-height: 44px; padding: 9px 13px; font: 400 12px var(--site-mono); text-transform: uppercase;
}
.site-menu-toggle span { margin-left: 10px; color: var(--site-aqua); }
body[data-site-page] .skip-link { z-index: 100; }
body[data-site-page] .eyebrow { font-family: var(--site-mono); }
body[data-site-page]:not([data-site-page="home"]) h1,
body[data-site-page]:not([data-site-page="home"]) h2 { font-family: var(--site-sans); font-weight: 300; letter-spacing: -.055em; }
body[data-site-page] h1 em, body[data-site-page] h2 em { font-family: var(--site-serif); font-weight: 300; color: var(--site-lav); }
body[data-site-page="arcade"] {
  --bg: var(--site-ink); --cream: var(--site-paper); --muted: #abbeb6;
  --blue: var(--site-aqua); --line: var(--site-line); --yellow: var(--site-acid);
  --sans: var(--site-sans); --mono: var(--site-mono);
  background: radial-gradient(ellipse at 85% 5%,#142824 0,transparent 45%),var(--site-ink);
}
[data-site-page="arcade"] .intro-copy > p,
[data-site-page="arcade"] .origin-copy > p { font-family: var(--site-sans); color: #b9c8c1; }
[data-site-page="arcade"] .intro-copy > .intro-lead { color: var(--site-paper); }
[data-site-page="arcade"] .arcade-intro h1 { font-weight: 300; }
[data-site-page="arcade"] .arcade-machine { background: rgba(17,36,30,.78); }
[data-site-page="arcade"] .text-link { color: var(--site-acid); }
[data-site-page="cheeky"] main { padding-top: 50px; }
[data-site-page="cheeky"] blockquote { font-family: var(--site-serif); }
[data-site-page="agent"] em { font-family: var(--site-serif); }
[data-site-page="agent"] .eyebrow { font-family: var(--site-mono); }
[data-site-page="murmuration"] .game-shell { height: calc(100svh - var(--site-header-height)); }
[data-site-page="murmuration"] .game-shell:fullscreen { height: 100svh; }
[data-site-page="murmuration"] .title-card .home-link { display: none; }
[data-site-page="murmuration"] .controls { border-radius: 14px; background: rgba(6,16,15,.9); border-color: var(--site-line); color: var(--site-paper); }
[data-site-page="murmuration"] .controls :is(label,button,span,input,output) { color: var(--site-paper); }
[data-site-page="murmuration"] .controls input { accent-color: var(--site-acid); }
[data-site-page="murmuration"] .controls button:hover,
[data-site-page="murmuration"] .controls button:focus-visible { color: var(--site-blue); background: #26bdff20; }
[data-site-page="murmuration"] .controls button:focus-visible { outline: 2px solid var(--site-blue); }
[data-site-page="murmuration"] .dusk-mode .title-card,
[data-site-page="murmuration"] .dusk-mode .title-card p { color: var(--site-paper); text-shadow: 0 1px 12px #0004; }
.cv-page body[data-site-page] { box-sizing: border-box; }
.references-page [data-site-page] .cv-toolbar { top: var(--site-header-height); }
[data-site-page="crossword"] .topbar .site-mark { display: none; }
[data-site-page="missing"] { padding: calc(var(--site-header-height) + 2rem) 2rem 2rem; }

@media (max-width: 1199px) {
  :root { --site-header-height: 68px; }
  .site-header { gap: 16px; }
  .site-header.site-menu-ready .site-menu-toggle { display: inline-flex; align-items: center; }
  .site-header .site-navigation {
    position: absolute; top: calc(100% - 1px); left: 0; right: 0; padding: 16px 20px 24px;
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px;
    max-height: calc(100svh - var(--site-header-height)); overflow-y: auto;
    background: #091713; border-bottom: 1px solid var(--site-line); box-shadow: 0 20px 35px #0006;
  }
  .site-header .site-navigation a { font-size: 12px; min-height: 44px; padding: 12px; }
  .site-header.site-menu-ready:not([data-menu-open]) .site-navigation { display: none; }
  .site-header:not(.site-menu-ready) { position: relative; height: auto; align-items: start; }
  .site-header:not(.site-menu-ready) .site-navigation { position: static; width: 100%; }
}
@media (max-width: 580px) {
  .site-header .site-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .site-header .site-navigation a { font-size: 11px; padding: 11px 9px; }
  [data-site-page="cheeky"] main { padding-top: 34px; }
}
@media (max-width: 700px) {
  [data-site-page="murmuration"] .controls { width: calc(100vw - 24px); padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .site-navigation a { transition: none; }
}
@media print {
  .site-header { display: none !important; }
  body[data-site-page] { padding-top: 0; }
}
