/* The rail — how the side pages reach each other.

   Only the side pages carry it. The sheet has no rail by law: nothing floats
   over the field, so its two links live in the print-settings panel behind the
   registration mark (.panel-nav in style.css). Same idea, drawn into each
   surface the way that surface allows.

   Vocabulary is the house one: Karrik 400 uppercase at the Label step, a
   hairline under it, the brief strip's middot separator, controls dim until
   touched. Square corners, no pure black. */

@font-face {
  font-family: "Karrik";
  src: url("fonts/Karrik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font: 400 0.72rem/1 "Karrik", "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #262019;
  border-bottom: 1px solid rgba(38, 32, 25, 0.22);
  padding-bottom: 0.5rem;
  margin-bottom: 2.4rem;
}

/* the sheet you are on: full ink, and not a link, because you are already here */
.rail > * {
  padding: 0.6em 0;
}
.rail [aria-current="page"] {
  opacity: 1;
}
.rail a {
  color: inherit;
  opacity: 0.42;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  transition: opacity 0.2s ease-out, text-decoration-color 0.2s ease-out;
}
.rail a:hover,
.rail a:focus-visible {
  opacity: 0.95;
  text-decoration-color: currentColor;
}
.rail a:focus-visible {
  outline: 2px solid #262019;
  outline-offset: 3px;
}
.rail .sep {
  padding: 0 0.55em;
  opacity: 0.35;
}

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