/* ============================================================
   2. Base — typography, layout primitives, navigation, footer
   ============================================================ */

body {
  background: var(--ink-900);
  color: var(--on-dark);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
}


/* ---------- Section theming ---------- */
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
}
.section--dark {
  --bg: var(--ink-900);
  --fg: var(--on-dark);
  --fg-2: var(--on-dark-2);
  --fg-3: var(--on-dark-3);
  --rule: var(--rule-dark);
  --rule-soft: var(--rule-dark-soft);
}
.section--dark-2 {
  --bg: var(--ink-800);
  --fg: var(--on-dark);
  --fg-2: var(--on-dark-2);
  --fg-3: var(--on-dark-3);
  --rule: var(--rule-dark);
  --rule-soft: var(--rule-dark-soft);
}
.section--light {
  --bg: var(--paper);
  --fg: var(--on-light);
  --fg-2: var(--on-light-2);
  --fg-3: var(--on-light-3);
  --rule: var(--rule-light);
  --rule-soft: var(--rule-light-soft);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--col-gap);
}
.stack > * + * {
  margin-top: var(--stack, 1.25rem);
}

/* ---------- Typography ---------- */
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg-2);
}
.eyebrow--blue {
  color: var(--blue-soft);
}
.eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eyebrow-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.display {
  font-size: var(--fs-h2);
  line-height: var(--lh-display);
  letter-spacing: -0.033em;
  font-weight: 500;
  text-wrap: balance;
}
.display--sm {
  font-size: var(--fs-h3);
  line-height: var(--lh-title);
  letter-spacing: -0.026em;
  font-weight: 500;
}
.display--xs {
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.display .dim {
  color: var(--fg-3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
  letter-spacing: -0.011em;
  max-width: 34ch;
}
.body {
  color: var(--fg-2);
  max-width: 62ch;
}
.body strong,
.lead strong {
  color: var(--fg);
  font-weight: 500;
}
.measure-sm {
  max-width: 46ch;
}
.measure-xs {
  max-width: 34ch;
}

.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
  line-height: 1.4;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--fg);
  max-width: 30ch;
  border-left: 1px solid var(--blue);
  padding-left: clamp(1.25rem, 2vw, 2rem);
}
.quote em {
  font-style: italic;
}

/* ---------- Links & buttons ---------- */
.link {
  color: var(--fg);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.link:hover {
  color: var(--blue-soft);
  background-size: 0% 1px;
}

.btn {
  --btn-fg: var(--ink-900);
  --btn-bg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  min-height: 48px;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-spring),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
  transition-duration: var(--dur-xs);
}
.btn--primary:hover {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--rule);
}
.btn--ghost:hover {
  border-color: var(--blue);
  --btn-fg: var(--blue-soft);
}
.section--light .btn--primary {
  --btn-bg: var(--ink-900);
  --btn-fg: #fff;
}
.section--light .btn--ghost:hover {
  --btn-fg: var(--blue-deep);
}
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-spring);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow,
.link:hover .btn__arrow,
.link:focus-visible .btn__arrow {
  transform: translateX(5px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

/* External link marker */
.ext::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.15em;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translateY(-0.1em);
  opacity: 0.7;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
  border-radius: 1px;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: #fff;
  color: var(--ink-900);
  padding: 0.75rem 1.25rem;
  border-radius: 2px;
  font-weight: 500;
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hairline rule ---------- */
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: #fff;
  transition: background-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(5, 7, 10, 0.72);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  backdrop-filter: saturate(150%) blur(18px);
  border-bottom-color: var(--rule-dark-soft);
}
.nav__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav__brand {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
}
.nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nav__role {
  font-size: 0.78em;
  letter-spacing: 0.13em;
  color: var(--on-dark-2);
}
/* The source photo is already a circle inscribed in a square, so the radius
   lands on the edge it was drawn to rather than cropping into the face. */
.nav__avatar {
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  display: block;
}
.nav__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--blue);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav--solid .nav__progress {
  opacity: 1;
}

/* ---------- Reveal ----------

   Opacity resolves before the rise does, so a block is readable while it is
   still settling — the movement reads as arrival rather than as a wait.

   No blanket `will-change`: there are around two hundred of these on the
   landing page, and permanently promoting all of them costs real GPU memory
   for no gain. reveal.js promotes each element for the length of its own
   transition and releases it afterwards. */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-rise), 0);
  transition: opacity var(--reveal-fade) var(--ease) var(--reveal-delay, 0ms),
    transform var(--reveal-dur) var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Variants, for blocks that should arrive from somewhere other than below. */
.reveal--left {
  transform: translate3d(calc(var(--reveal-rise) * -0.8), 0, 0);
}
.reveal--scale {
  transform: translate3d(0, var(--reveal-rise), 0) scale(0.985);
  transform-origin: left bottom;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--scale {
    opacity: 1;
    transform: none;
  }
}

/* Without JavaScript nothing ever adds `.is-in`, so every reveal on the site
   would stay at opacity 0 — the page would render as an empty document. The
   inline script in <head> strips this class the moment scripting is
   available, so this costs a class name and nothing else. */
html.no-js .reveal,
html.no-js .reveal--left,
html.no-js .reveal--scale {
  opacity: 1;
  transform: none;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--ink-900);
  color: var(--on-dark-2);
  border-top: 1px solid var(--rule-dark-soft);
  padding-block: 3rem 3.5rem;
  font-size: var(--fs-small);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
}
.footer__brand {
  color: #fff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 500;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer__links a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.footer__links a:hover {
  color: #fff;
}

/* ---------- Language switch ---------- */
.nav__lang {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
  line-height: 1;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}
.nav__lang:hover {
  color: #fff;
  border-color: var(--blue);
}

/* ============================================================
   Cross-document transitions

   Every page on the site opts in, so moving between the landing
   page and a case document is a dissolve rather than a white
   flash. Browsers without the API navigate exactly as before —
   there is no JavaScript fallback on purpose: a scripted fade-out
   leaves the page faded if the navigation stalls or fails.
   ============================================================ */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-out 240ms var(--ease-in) both;
}
::view-transition-new(root) {
  /* Arrives from slightly below and settles — the same gesture every
     reveal on the page uses, so a navigation reads as more of the
     same document rather than a jump to another one. */
  animation: page-in 480ms var(--ease-out) both;
}
@keyframes page-out {
  to {
    opacity: 0;
    transform: translate3d(0, -1.2vh, 0);
  }
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translate3d(0, 2.4vh, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* Keeps a credential or a name from breaking across two lines mid-phrase. */
.nowrap {
  white-space: nowrap;
}