/* The thieves.design holding page. Flat: type, colour and space, in the borrowed Dovetail house colours.
   Junicode is open licence (SIL OFL, see fonts/Junicode-OFL.txt).
   The wordmark is a picture of the word set in Erotica Inline with the Ottoman silk fill (Met Museum object 450971,
   open access). The Erotica font file itself is not on the site. Donovan chose this on 11/14. */

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

:root {
  --calc: #ECE4CB;
  --ink: #2B2218;
  --sky-ink: #4F7570;
  --rule: rgba(43, 34, 24, .22);
  --serif: "Junicode", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--calc);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums;
}

main {
  min-height: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
  animation: arrive 420ms var(--ease) both;
}

.label {
  margin: 0 0 24px;
  color: var(--sky-ink);
  font-size: 16.5px;
  line-height: 1.2;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .12em;
  /* tracking adds space after the last letter, so pull the label back to true centre */
  margin-right: -.12em;
}

.wordmark {
  margin: 0;
  /* the type settings only show if the picture fails to load and the alt text stands in */
  font-size: clamp(64px, 17vw, 132px);
  font-weight: 400;
  line-height: 1;
}

.wordmark img {
  display: block;
  width: min(527px, 84vw);
  height: auto;
}

.line {
  margin: 32px 0 0;
  font-size: 20px;
  line-height: 1.4;
  text-wrap: balance;
}

.rule {
  width: min(240px, 60vw);
  height: 1px;
  margin: 48px 0 0;
  background: var(--rule);
}

.rule span {
  display: block;
  width: 38%;
  height: 1px;
  background: var(--ink);
}

@keyframes arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}