/* tenfold.games - a signpost, not a site.
   ==========================================

   Deliberately the same card the studio shows when JavaScript is off: dark
   ground, cream card, the studio's two faces. Someone who lands here has hit
   an address that no longer serves anything, and the point is to look like
   Tenfold Luck rather than like a parked domain, then get out of the way.

   Same tokens as the noscript card in every site's stylesheet. If those change,
   change these with them. */

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

@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/spectral-600-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Architects Daughter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/architects-daughter-400-latin.woff2") format("woff2");
}

:root {
  --ns-bg: #241d16;
  --ns-card: #f5edd6;
  --ns-ink: #40342a;
  --ns-dim: rgba(64, 52, 42, 0.6);
  --ns-line: rgba(96, 76, 52, 0.24);
  --ns-acc: #8a5a2e;
  --ns-hover: rgba(138, 90, 46, 0.08);
  --ns-font: "Spectral", Georgia, serif;
  --ns-head: "Architects Daughter", "Patrick Hand", cursive;
}

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

body {
  min-height: 100vh;
  background: var(--ns-bg);
}

.moved {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(16px, 5vw, 56px) clamp(14px, 4vw, 32px);
  color: var(--ns-ink);
  font-family: var(--ns-font);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

.moved__card {
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: clamp(26px, 5vw, 44px) clamp(20px, 5vw, 40px);
  border: 1px solid var(--ns-line);
  border-radius: 14px;
  background: var(--ns-card);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  text-align: center;
}

/* The signature mark, not the square Logo.webp: that one has a pale panel
   baked into it and sat on the cream card as a visible box. */
.moved__mark {
  width: min(260px, 70%);
  height: auto;
  margin: 0 auto 6px;
  display: block;
}

.moved__brand {
  font-family: var(--ns-head);
  font-size: clamp(24px, 5vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.moved__kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-dim);
}

.moved__lede {
  margin: 18px auto 0;
  max-width: 44ch;
  font-size: 15.5px;
}

.moved__cta {
  display: inline-block;
  margin: 24px 0 0;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--ns-acc);
  color: var(--ns-card);
  font-size: 14.5px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.moved__cta:hover,
.moved__cta:focus-visible {
  background: var(--ns-ink);
}

.moved__rule {
  margin: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--ns-line);
}

.moved__label {
  margin: 22px 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ns-dim);
}

.moved__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  list-style: none;
}

.moved__nav a {
  color: var(--ns-ink);
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--ns-line);
}

.moved__nav a:hover,
.moved__nav a:focus-visible {
  color: var(--ns-acc);
  border-bottom-color: var(--ns-acc);
}

/* Quiet, and last: it points at a person rather than at a chapter. */
.moved__founder {
  margin: 18px 0 0;
  font-size: 12px;
}

.moved__founder a {
  color: var(--ns-dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.moved__founder a:hover,
.moved__founder a:focus-visible {
  color: var(--ns-acc);
  border-bottom-color: var(--ns-acc);
}

.moved__foot {
  margin: 22px 0 0;
  font-size: 12px;
  color: var(--ns-dim);
}

:focus-visible {
  outline: 2px dashed var(--ns-acc);
  outline-offset: 3px;
  border-radius: 5px;
}