/* Finnian Langham — 2026.
   Two anchors: the intro sits top-left, the meta groups bottom-right.
   Everything else is a token: one padding scale and one type scale,
   restated at the mobile / tablet / desktop breakpoints. */

@font-face {
  font-family: 'Alte Haas Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/AlteHaasGroteskRegular.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  --bg: #000;
  --fg: #fff;
  --muted: #949494;

  /* Mobile. Overridden at the breakpoints below. */
  --pad: 24px;

  --fs-name: 34px;
  --fs-role: 20px;
  --fs-meta: 16px;

  --lh-tight: 1.18;
  --lh-meta: 1.45;

  --gap-intro: 2px;
  --gap-meta-group: 4px;
  --gap-meta: 30px;
}

/* Tablet */
@media (min-width: 640px) {
  :root {
    --pad: 48px;
    --fs-name: 48px;
    --fs-role: 26px;
    --fs-meta: 20px;
    --gap-meta: 36px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --pad: 80px;
    --fs-name: 60px;
    --fs-role: 30px;
    --fs-meta: 24px;
    --gap-meta: 44px;
  }
}

/* Wide desktop — only the frame grows, type holds. */
@media (min-width: 1600px) {
  :root {
    --pad: 112px;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Alte Haas Grotesk', Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Fades in once the texture is decoded, so there is no flash of a bare
     canvas and no jump if WebGL never starts. */
  opacity: 0;
  transition: opacity 1.2s ease;
}

#bg.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #bg {
    transition: none;
  }
}

/* The one full-height frame: intro pinned top, meta pinned bottom-right. */
.screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--pad);
}

.intro {
  display: flex;
  flex-direction: column;
  gap: var(--gap-intro);
}

.intro__name {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.intro__role {
  margin: 0;
  font-size: var(--fs-role);
  line-height: var(--lh-tight);
}

.meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-meta);
  text-align: right;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}

.meta__group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-meta-group);
  max-width: 100%;
}

.meta__label,
.meta__links {
  margin: 0;
}

.meta__label {
  color: var(--muted);
}

/* Wrapping happens between links, never inside a name. */
.meta__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 0.55em;
}

.meta__sep {
  color: var(--muted);
}

.meta__link {
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap; /* names wrap as a unit, never mid-name */
  transition: opacity 0.25s ease;
}

.meta__link:hover {
  opacity: 0.6;
}

.meta__link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.5);
  outline-offset: 6px;
  border-radius: 2px;
}

::selection {
  background: rgba(255, 255, 255, 0.15);
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  .meta__link {
    transition: none;
  }
}

@media print {
  #bg {
    display: none;
  }
  html,
  body {
    background: #fff;
    color: #000;
  }
  .meta__link {
    color: #000;
  }
}