/* Shared across every page: reset, base typography, color tokens. */

* { box-sizing: border-box; }

:root {
  --accent1: #4ea8ff;
  --accent2: #a855f7;
  /* Reading measure. Space Grotesk averages ~8.3px per glyph at 17px while the
     ch unit is the 10.9px "0", so 78ch was rendering ~103 characters per line.
     56ch lands around 74 - inside the comfortable 45-75 range. */
  --measure: 56ch;
}

body {
  margin: 0;
  background: oklch(0.16 0.02 255);
  color: oklch(0.97 0.008 255);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.display { font-family: 'Archivo Black', 'Arial Black', sans-serif; text-transform: uppercase; }

/* ---------- nav: shared by the home page and every case-study page ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 20px clamp(20px, 5vw, 64px);
  background: oklch(0.16 0.02 255 / 0.7);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid oklch(0.97 0.008 255 / 0.1);
}
.nav-inner {
  max-width: 1440px; margin: 0 auto;
  /* Three equal-weight slots so the centre group is optically centred on the page,
     rather than pushed off-centre by whatever sits on the left and right. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(16px, 3vw, 36px);
}
.nav-inner > :first-child { justify-self: start; }
.nav-inner > :last-child  { justify-self: end; }
.mark {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px; letter-spacing: 0.02em;
}
.navlinks { display: flex; gap: clamp(16px, 3vw, 36px); }
.navlinks a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0.8; transition: opacity 0.2s, color 0.2s;
}
.navlinks a:hover { opacity: 1; color: var(--accent1); }
.back {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.75; transition: opacity 0.2s, color 0.2s; white-space: nowrap;
}
.back:hover { opacity: 1; color: var(--accent1); }

/* Narrow screens: the three-slot grid has no room, so wrap the nav into a
   centred row instead of squeezing the columns. */
@media (max-width: 640px) {
  .nav-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .nav-inner > :first-child, .nav-inner > :last-child { justify-self: auto; }
}

/* Text available to screen readers but not shown: used where an icon carries the
   meaning on its own. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- keyboard focus ---------- */
/* Without a visible ring, keyboard users cannot tell where they are (WCAG 2.4.7).
   :focus-visible keeps it off for mouse clicks. */
a:focus-visible,
label:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent1);
  outline-offset: 3px;
}
/* Skip-link targets receive focus programmatically and shouldn't show a ring. */
#top:focus, #main:focus { outline: none; }

/* ---------- skip link ---------- */
/* Same clip technique as .visually-hidden, rather than left:-9999px, which
   breaks in RTL and is otherwise the only hidden-content idiom on the site not
   already shared. */
.skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  z-index: 100;
}
.skip:focus {
  width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal;
  position: absolute; left: 12px; top: 12px; padding: 10px 16px;
  background: var(--accent1); color: oklch(0.16 0.02 255);
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---------- reduced motion ---------- */
/* Site-wide. The home page additionally offers a manual toggle. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    /* fall off any scroll timeline, so the collapsed duration above applies */
    animation-timeline: auto !important;
  }
  /* and hold the page still across navigations */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Shown only on paper (the portfolio URL on the résumé). */
.print-only { display: none; }

/* ---------- 404 ---------- */
.notfound { max-width: 720px; margin: 0 auto; padding: clamp(70px, 16vh, 160px) clamp(20px, 5vw, 64px); text-align: center; }
.notfound .notfound-code { font-size: clamp(4rem, 18vw, 9rem); line-height: 1; margin: 0 0 14px; color: var(--accent1); }
.notfound h1 { font-size: clamp(1.4rem, 4vw, 2rem); margin: 0 0 16px; }
.notfound p { font-size: 17px; line-height: 1.7; color: oklch(0.82 0.015 250); margin: 0 auto 32px; max-width: 46ch; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.notfound-links a {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 2px solid oklch(0.97 0.008 255); padding: 12px 20px;
}
.notfound-links a:hover { border-color: var(--accent1); color: var(--accent1); }

/* ---------- cross-document view transitions ---------- */
/* Opts every page in. Browsers without support just navigate normally. */
@view-transition { navigation: auto; }