/* Lastings — shared foundation.
   Token names come from the world, never from the colour: hull, plate, durasteel,
   floodlight, haze, holo. Values are Look.md's measured set. */

@font-face {
  font-family: 'Michroma';
  src: url('fonts/Michroma-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('fonts/IBMPlexSans-Variable.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  --hull: #06070A;
  --plate: #0E1015;
  --durasteel: #1A1E26;
  --floodlight: #E6EAF0;
  --haze: #8A919E;
  --holo: #6FB7FF;
  --holo-rest: #2A4D73;

  --display: 'Michroma', system-ui, sans-serif;
  --body: 'Plex Sans', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, monospace;

  /* Apple smooth. Nothing bounces. */
  --ease: cubic-bezier(.2, .8, .2, 1);
}

:root { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hull);
  color: var(--floodlight);
  font-family: var(--body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Focus rings are always visible. 1px holo, per Look.md. */
:focus-visible {
  outline: 1px solid var(--holo);
  outline-offset: 3px;
}

/* The wordmark. Same on both pages — the one thing they share. */
.mark {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--floodlight);
  text-decoration: none;
  display: inline-block;
  /* 44px minimum hit area, padding included */
  padding: 14px 0;
}
.mark:hover { color: var(--holo); }

/* Enter: rise 8px and fade over 240ms, staggered 40ms. Six plates at most. */
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
[data-rise] {
  animation: rise 240ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  [data-rise] { animation-duration: 120ms; }
  @keyframes rise {
    from { opacity: 0; transform: none; }
    to   { opacity: 1; transform: none; }
  }
}

/* Present for screen readers and search, not drawn. Used where a canvas carries the look
   but the words still have to exist as words. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}