/* The iron filings nav: a row of links on a pale sheet strewn with iron filings, drawn on a canvas under the words. */
:root {
  --page: #ffffff;          /* the page */
  --sheet: #f3f0e9;         /* the sheet the filings lie on */
  --sheet-edge: #e2ddd2;    /* the edge of the sheet */
  --filing: #23211e;        /* the iron filings */
  --ink: #161513;           /* the current link, and the one pointed at */
  --muted: #6d685f;         /* the other links */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Instrument Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

/* the sheet: the filings are drawn on the canvas behind the links */
.ff {
  position: relative;
  display: grid;
  place-items: center;
  width: min(860px, 100%);
  height: clamp(300px, 40vw, 360px);
  border-radius: 22px;
  background: var(--sheet);
  box-shadow:
    inset 0 0 0 1px var(--sheet-edge),
    0 1px 2px rgba(40, 32, 20, 0.06),
    0 18px 40px -22px rgba(40, 32, 20, 0.28);
  overflow: hidden;
  font-size: clamp(15px, 2.25vw, 23px);
  isolation: isolate;
}

.ff__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* a layer of its own: redrawn every frame without repainting the sheet, its shadow and the words */
  will-change: transform;
}

.ff__list {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(4px, 2.4vw, 30px);
  margin: 0;
  padding: 0 8px;
  list-style: none;
  will-change: transform;
}

.ff__link {
  display: block;
  padding: 14px clamp(5px, 0.9vw, 10px);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 560;
  letter-spacing: -0.012em;
  text-decoration: none;
  white-space: nowrap;
  /* a halo the colour of the sheet keeps every word clear of the filings around it */
  text-shadow:
    0 0 2px var(--sheet),
    0 0 6px var(--sheet),
    0 0 12px var(--sheet);
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.ff__word {
  display: inline-block;
}

.ff__link[aria-current='page'] {
  color: var(--ink);
}

@media (hover: hover) {
  .ff__link:hover {
    color: var(--ink);
  }
}

.ff__link:active {
  color: var(--ink);
}

.ff__link:focus {
  outline: none;
}

.ff__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .ff__link {
    transition: color 0.2s ease;
  }
}