/* Base: fonts, reset, the full-screen hero box, and the reveal on load.
   Font files are subsets (see tools/subset_fonts.py). The build rewrites "../assets/fonts/" to "fonts/". */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/newsreader-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/newsreader-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../assets/fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dm-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dm-mono-latin-500.woff2") format("woff2"); }

:root {
  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --pad: clamp(16px, 3.4vw, 48px);
  --ease: cubic-bezier(.2, .75, .15, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { background: #02040B; }
body { margin: 0; font: 400 1rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; color: #EEF2FB; }
img { display: block; max-width: 100%; height: auto; }
h1, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 60; padding: 10px 14px; border-radius: 10px; background: #EEF2FB; color: #0B1226; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }

/* the hero fills the screen; the canvas is behind, the HTML (nav, words, places, cards) sits on top */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 760px) { .hero { min-height: 660px; } }
.pl-main { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.pl-main > * { pointer-events: auto; }
.pl-main:focus { outline: none; }

/* reveal on load: .r fades up, .mask > span slides up; --d (set by the .d2 .. .d8 classes) staggers them */
.hero .r { opacity: 0; }
.hero.on .r { animation: rin .9s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms + 100ms); }
@keyframes rin { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.mask { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mask > span { display: inline-block; transform: translateY(110%); }
.hero.on .mask > span { animation: mup 1s var(--ease) both; animation-delay: calc(var(--d, 0) * 70ms + 140ms); }
@keyframes mup { from { transform: translateY(110%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .r { opacity: 1; } .hero.on .r { animation: none; } .mask > span { transform: none; } .hero.on .mask > span { animation: none; } }
.no-js .hero .r { opacity: 1; }
/* the subtitle slides up without fading: text at opacity 0 is not counted as painted, and it is the only text the
   hero shows straight away, so without this the page has no Largest Contentful Paint (Lighthouse then scores 0) */
.hero .pl-sub.r { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero.on .pl-sub.r { animation-name: rsub; }
  @keyframes rsub { from { translate: 0 16px; } to { translate: 0 0; } }
}
.no-js .mask > span { transform: none; }

/* the green "open to roles" dot */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); flex: none; }
@media (prefers-reduced-motion: no-preference) { .dot { animation: ping 2.2s ease-out infinite; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } }