/* The holding page: the letter direction at its smallest. Bone's own tokens,
   the studio's own faces, nothing from anywhere else. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/jost-86989f50.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-400-c0879324.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-600-6d25a6d1.woff2) format("woff2"); }

[hidden] { display: none !important; }

html { background: var(--paper); color: var(--ink); }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font: 400 16px/1.6 "Inter", system-ui, sans-serif;
}
.letter {
  max-width: 34rem;
  margin: 0 auto;
  padding: 48px 24px;
}
.from {
  font: 500 11px/1.4 "Jost", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 32px;
}
h1 {
  font: 400 32px/1.2 "Jost", system-ui, sans-serif;
  margin: 0 0 24px;
}
p { margin: 0 0 16px; color: var(--ink-2); }
a { color: var(--ink); text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.contact { margin-top: 24px; }
.sign { margin-top: 32px; color: var(--ink); }
.mark { display: block; margin: 16px 0 48px; opacity: 0.85; }
[data-theme="dark"] .mark { filter: invert(1); }
.foot { font-size: 13px; color: var(--ink-3); }
.foot a { color: var(--ink-3); }