/* ═══════════════════════════════════════════════════════════════
   nether.games · shared stylesheet
   Self-hosted fonts first, then brand tokens; everything below
   references them.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────── */
/* Rubik variable (weights 300-900), body text. SIL Open Font License 1.1,
   see fonts/OFL.txt. Files from @fontsource-variable/rubik 5.3.0. */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/rubik-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(fonts/rubik-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Outfit variable (weights 100-900), headings, navigation, tagline.
   SIL Open Font License 1.1, see fonts/OFL-outfit.txt.
   Files from @fontsource-variable/outfit 5.3.0. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --nether-dark:  #04010C;   /* page background */
  --nether-blue:  #0286FE;   /* accent: highlights, links, dividers, glows */
  --nether-white: #FFFFFF;   /* logo, headings, primary text on dark */

  /* Supporting greys, all ≥ AA on --nether-dark */
  --nether-text:   #C0C8D8;  /* primary body text        12.3 : 1 */
  --nether-muted:  #8A94A7;  /* soft grey-blue body copy  6.8 : 1 */
  --nether-subtle: #7A8498;  /* captions, footer, meta    5.5 : 1 */

  --nether-blue-rgb: 2, 134, 254;
  --nether-dark-rgb: 4, 1, 12;

  --nav-height: 64px;
  --font: "Rubik", system-ui, sans-serif;               /* body text */
  --font-head: "Outfit", system-ui, sans-serif;         /* headings, navigation, labels, tagline */
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 18px;
  line-height: 1.7;
  overflow-x: hidden;
  background: var(--nether-dark);
}

body {
  font-family: var(--font);
  color: var(--nether-text);
  background: var(--nether-dark);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

a { cursor: pointer; }
img, svg { display: block; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--nether-blue);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: var(--nav-height);
  background: rgba(var(--nether-dark-rgb), 0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  /* Clear space: one stem width (about ⅓ of the n's height, ≈ 11 px at
     34 px). The 8 px padding plus the bar's remaining height satisfies it. */
  padding: 8px 0;
  text-decoration: none;
}
.nav-logo img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
}

.nav-links a {
  display: inline-block;
  padding: 6px 14px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nether-muted);
  text-decoration: none;
  background-image: linear-gradient(var(--nether-blue), var(--nether-blue));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: color 0.2s, background-size 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--nether-white);
  background-size: 100% 2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nether-text);
  border-radius: 2px;
}

@media (max-width: 640px) {
  .nav { padding: 0 20px; }
  .nav-ready .nav-toggle { display: flex; }
  .nav-links {
    display: flex;
    position: absolute;
    top: var(--nav-height);
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(var(--nether-dark-rgb), 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 0;
  }
  .nav-ready .nav-links:not(.open) { display: none; }
  .nav-links a { padding: 12px 24px; }
}

/* ── Layout ────────────────────────────────────────────────── */
section { padding: 112px 0; }

/* Home sections: one full screen each on desktop, so a nav click shows
   that section alone with its content centred. */
@media (min-width: 641px) and (min-height: 640px) {
  .panel {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: var(--nav-height);
  }
}

.container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 48px;
}

@media (max-width: 640px) {
  section { padding: 88px 0; }
  .container { padding: 0 24px; }
}

/* ── Home hero ─────────────────────────────────────────────── */
.hero {
  /* The whole stack (wordmark → divider → tagline) fits above the fold,
     sitting slightly above centre. Wordmark width is capped by viewport
     width and by what the viewport height leaves room for. */
  --hero-gap: clamp(28px, 5.5vh, 50px);
  --wordmark-width: min(860px, 88vw, max(400px, (100vh - 320px) * 3.9));

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--nav-height) + 24px) 16px 16px;
}
/* Optical centring: free space splits 1:2 above and below the stack. */
.hero::before { content: ""; flex: 1 1 0; }
.hero::after  { content: ""; flex: 2 1 0; }

.hero-wordmark {
  margin-top: var(--hero-gap);
  line-height: 0;
}

/* The wordmark and its intro canvas (rules from the site kit's demo.html).
   nether-intro.js draws the canvas on top while it plays, then removes it. */
.wm{position:relative;display:block;width:var(--wordmark-width);aspect-ratio:1404/358;margin:0 auto}
.wm img{display:block;width:100%;height:100%}
.wm canvas{position:absolute;left:-4.986%;top:-12.291%;width:110.684%;height:auto;aspect-ratio:1554/430;pointer-events:none}
.wm.playing img{visibility:hidden}
/* Set by nether-intro.js before the first paint, removed as soon as the squares are drawn. */
.nether-intro-pending .wm img{visibility:hidden}

.hero-divider {
  width: 56px;
  height: 2px;
  background: var(--nether-blue);
  border-radius: 2px;
  margin: clamp(20px, 3.2vh, 30px) auto;
}

.hero-tagline {
  font-family: var(--font-head);
  font-size: clamp(18px, 2.4vw, 25px);
  font-weight: 300;
  color: var(--nether-muted);
  line-height: 1.5;
}
.hero-tagline b {
  color: var(--nether-blue);
  font-weight: 600;
}

@media (max-width: 640px) {
  /* Full-screen hero on phones too, as on desktop: About starts below the fold. */
  .hero { padding-top: calc(var(--nav-height) + 32px); }
}

/* ── Job page hero ─────────────────────────────────────────── */
.job-hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height) + 56px) 0 72px;
}

.eyebrow {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nether-muted);
  margin-bottom: 26px;
}

.job-hero-title {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(40px, 8.4vw, 82px);
  line-height: 1.06;
  letter-spacing: -1.5px;
  color: var(--nether-white);
  margin-bottom: 8px;
}

.accent {
  color: var(--nether-blue);
  font-weight: 500;
}

.job-hero .hero-divider { margin: 34px auto; }

.job-hero .hero-tagline {
  font-size: clamp(17px, 2.6vw, 21px);
  line-height: 1.65;
  max-width: 60ch;
  margin: 0 auto;
}
.job-hero .hero-tagline b { color: var(--nether-white); font-weight: 600; }

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 46px;
  margin-top: 46px;
}
.meta .k {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--nether-subtle);
  margin-bottom: 6px;
}
.meta .v { color: var(--nether-white); font-weight: 500; font-size: 16px; }

/* ── Section headings ──────────────────────────────────────── */
.section-line {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--nether-blue);
  border-radius: 2px;
  margin-bottom: 28px;
}

.section-heading,
.page-heading {
  font-family: var(--font-head);
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 300;
  color: var(--nether-white);
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}
.page-heading { margin-bottom: 40px; }

.body-text p {
  color: var(--nether-muted);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 20px;
  max-width: 66ch;
}
.body-text p:last-child { margin-bottom: 0; }
.body-text b { color: var(--nether-white); font-weight: 600; }

.subtle { color: var(--nether-subtle) !important; font-size: 16px !important; }

/* ── Lists ("–" bullet idiom) ──────────────────────────────── */
.feature-list,
.tech-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 66ch;
}
.feature-list li,
.tech-list li {
  position: relative;
  padding-left: 24px;
}
.feature-list li::before,
.tech-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--nether-blue);
  font-weight: 600;
}
.feature-list li { margin-bottom: 24px; }
.feature-list li:last-child { margin-bottom: 0; }
.feature-list li b {
  display: block;
  font-family: var(--font-head);
  color: var(--nether-white);
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 4px;
}
.feature-list li span {
  color: var(--nether-muted);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
}

.mini-label {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nether-white);
  font-weight: 600;
  margin: 40px 0 18px;
}
.tech-list li {
  margin-bottom: 12px;
  color: var(--nether-muted);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
}
.tech-list li b { color: var(--nether-text); font-weight: 600; }

/* ── Email button (contact + apply) ────────────────────────── */
.btn-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  margin-top: 26px;
  padding: 14px 28px;
  background: rgba(var(--nether-blue-rgb), 0.10);
  border: 1px solid rgba(var(--nether-blue-rgb), 0.35);
  border-radius: 6px;
  color: var(--nether-blue);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-email:hover {
  background: rgba(var(--nether-blue-rgb), 0.18);
  border-color: rgba(var(--nether-blue-rgb), 0.6);
  color: var(--nether-white);
}
.apply-note {
  margin-top: 22px;
  font-size: 15px;
  color: var(--nether-subtle);
  font-weight: 300;
  max-width: 60ch;
}

/* ── Job cards (home) ──────────────────────────────────────── */
.job-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 16px;
}

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 28px;
  border: 1px solid rgba(var(--nether-blue-rgb), 0.25);
  border-radius: 10px;
  background: rgba(var(--nether-blue-rgb), 0.05);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.job-card:hover {
  background: rgba(var(--nether-blue-rgb), 0.11);
  border-color: rgba(var(--nether-blue-rgb), 0.6);
  transform: translateY(-2px);
}

.job-card-text { min-width: 0; }
.job-card-title {
  display: block;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  color: var(--nether-white);
  margin-bottom: 6px;
}
.job-card-desc {
  display: block;
  font-size: 15px;
  font-weight: 300;
  color: var(--nether-muted);
  line-height: 1.6;
  max-width: 46ch;
}
.job-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.job-tag {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nether-blue);
  padding: 5px 12px;
  border: 1px solid rgba(var(--nether-blue-rgb), 0.35);
  border-radius: 999px;
  white-space: nowrap;
}
.job-card-arrow {
  color: var(--nether-blue);
  flex-shrink: 0;
  transition: transform 0.2s;
}
.job-card:hover .job-card-arrow { transform: translateX(4px); }

@media (max-width: 640px) {
  .job-card { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ── Privacy / text pages ──────────────────────────────────── */
.page { padding: calc(var(--nav-height) + 72px) 0 96px; }
.page .container { max-width: 720px; }

.privacy-block h3 {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--nether-white);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 36px;
  margin-bottom: 10px;
}
.privacy-block p,
.privacy-block ul li {
  font-size: 16px;
  color: var(--nether-subtle);
  line-height: 1.8;
}
.privacy-block p { margin-bottom: 8px; }
.privacy-block a { color: var(--nether-blue); text-decoration: none; }
.privacy-block a:hover { text-decoration: underline; }
.privacy-block ul { list-style: none; padding: 0; margin-top: 8px; }
.privacy-block ul li {
  padding-left: 18px;
  position: relative;
  margin-bottom: 12px;
}
.privacy-block ul li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--nether-blue);
}
.privacy-block ul li b { color: var(--nether-text); }
.privacy-updated {
  margin-top: 40px;
  font-size: 13px;
  color: var(--nether-subtle);
}

/* ── Footer ──────────────────────────────────────────────────
   One row: the n on the left, social icons (or the back link) in
   the centre, legal text on the right. The two outer columns are
   equal, so the centre item sits on the page's centre line. */
footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 22px 40px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 36px; /* the icon height, so pages without icons get the same bar */
}

.footer-logo {
  display: flex;
  justify-self: start;
}
.footer-logo img { height: 22px; width: auto; display: block; }

.social-links {
  display: flex;
  gap: 12px;
  list-style: none;
}
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--nether-blue);
  background: rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}
.social-links a:hover { background: rgba(var(--nether-blue-rgb), 0.18); }
/* YouTube play triangle: a class rather than an inline style attribute, so the
   Content-Security-Policy in _headers can keep style-src to 'self'. */
.social-links .yt-play { fill: var(--nether-dark); }

/* Legal text. Everything in the footer's text shares one size and one line
   height and sits on one baseline, so the link and the copyright line up. */
.footer-meta {
  display: flex;
  align-items: baseline;
  justify-self: end;
  gap: 22px;
}
.footer-links {
  display: flex;
  gap: 22px;
  list-style: none;
}
.footer-links,
.footer-copyright,
.back-link {
  font-size: 13px;
  line-height: 20px;
  color: var(--nether-subtle);
}
.footer-links a { color: inherit; }
.footer-links a,
.back-link {
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover,
.back-link:hover { color: var(--nether-white); }

@media (max-width: 640px) {
  footer { padding: 28px 20px; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .footer-logo { display: none; }
  .footer-meta { justify-self: center; }
}

/* ── Reveal animation ──────────────────────────────────────── */
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.reveal-pending { opacity: 1; transform: none; }
}