/* Tarracobytes — a Byzantine vault: lapis ground, gold-glass tesserae,
   an inscription in gold. One committed look; no light variant.
   Golds live in the mosaic and the wordmark; emerald and garnet only
   as scattered tesserae. */
:root {
  --field:   #14203B;
  --ink:     #EFE3C2;
  --quiet:   #8E8E7A;
  --line:    #2A3554;
  --gold:    #D2A742;
  --gold-2:  #E7C368;
  --gold-3:  #A67D2C;
  --emerald: #4E7D5B;
  --garnet:  #8E3B32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2272%22%3E%3Crect%20width%3D%2272%22%20height%3D%2272%22%20fill%3D%22%23111A30%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%220.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2212.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2224.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2236.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2248.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3Crect%20x%3D%220.6%22%20y%3D%2260.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%2316223B%22%2F%3E%3Crect%20x%3D%2212.6%22%20y%3D%2260.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2224.6%22%20y%3D%2260.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2236.6%22%20y%3D%2260.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23141F38%22%2F%3E%3Crect%20x%3D%2248.6%22%20y%3D%2260.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23131E35%22%2F%3E%3Crect%20x%3D%2260.6%22%20y%3D%2260.6%22%20width%3D%2210.8%22%20height%3D%2210.8%22%20rx%3D%220.8%22%20fill%3D%22%23152139%22%2F%3E%3C%2Fsvg%3E") var(--field);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Nova", Palatino, "Book Antiqua", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold-2); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: currentColor; }
a:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; border-radius: 2px; }

h1, h2, p { margin: 0; }

/* ---- the mosaic ---- */

/* Each stone is set slightly off-true (--r) and laid one at a time (--i). */
.tessera {
  opacity: 0;
  transform: rotate(var(--r, 0deg));
  transform-origin: center;
  transform-box: fill-box;
  animation: settle 0.5s ease-out forwards;
  animation-delay: calc(var(--i) * 45ms);
}
.t-gold    { fill: var(--gold); }
.t-gold2   { fill: var(--gold-2); }
.t-gold3   { fill: var(--gold-3); }
.t-emerald { fill: var(--emerald); }
.t-garnet  { fill: var(--garnet); }

@keyframes settle {
  from { opacity: 0; transform: scale(0.55) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .tessera { animation: none; opacity: 1; }
}
.no-anim .tessera { animation: none; opacity: 1; }

/* ---- home ---- */

.home {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.wordmark {
  margin-top: 40px;
  color: var(--gold);
  font-size: clamp(22px, 5.4vw, 42px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-right: -0.3em; /* re-center: tracking adds a trailing space */
  line-height: 1.15;
}

/* Narrow screens: the inscription keeps to one line by easing its tracking. */
@media (max-width: 480px) {
  .wordmark {
    letter-spacing: 0.18em;
    margin-right: -0.18em;
  }
}

.tag {
  margin-top: 18px;
  font-size: 19px;
}

.note {
  margin-top: 8px;
  font-size: 16px;
  color: var(--quiet);
}

.contact {
  margin-top: 36px;
  font-size: 16px;
}

/* ---- shared footer ---- */

footer {
  padding: 28px 24px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--quiet);
}
footer a { color: inherit; border-bottom-color: var(--line); }
footer a:hover { color: var(--ink); }

/* ---- terms ---- */

.plaque {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  border-bottom: none;
}
.brand:hover { color: var(--gold-2); }

.plaque h1 {
  margin-top: 48px;
  color: var(--gold);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.updated {
  margin-top: 6px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--quiet);
}

.plaque h2 {
  margin-top: 32px;
  font-size: 19px;
  font-weight: 600;
}

.plaque p { margin-top: 10px; }