/* Singularity Guild
   One page: the name in the centre and one small line at the foot.
   Two inks on black. One family in its two cuts: the display cut for the
   name, the text cut for the small line. Nothing moves. */

@font-face {
  font-family: "Libre Caslon Display";
  src: url("/fonts/libre-caslon-display-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Libre Caslon Text";
  src: url("/fonts/libre-caslon-text-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #f4f4f4;    /* the name */
  --quiet: #909090;  /* the small line; 6.5:1 on black */

  /* Every size grows smoothly from a 360 px phone to a 2,560 px monitor and
     stops at both ends. */
  --name: clamp(1.625rem, 1.1rem + 2.2vw, 4rem);
  --small: clamp(0.8125rem, 0.775rem + 0.17vw, 1rem);
  --edge: clamp(1.25rem, 0.96rem + 1.3vw, 3rem);

  /* The space set after each capital. */
  --name-track: 0.2em;
  --small-track: 0.14em;

  color-scheme: dark;
}

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

html {
  background: #000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  /* The name takes all the height the small line leaves, and is centred in
     it. That holds the name above the true centre of the screen by half the
     height of the foot, which is where a single line looks centred. */
  display: grid;
  grid-template-rows: 1fr auto;
  background: #000;
  color: var(--ink);
  font-family: "Libre Caslon Text", "Adobe Caslon Pro", "Big Caslon", "Hoefler Text", Baskerville, Georgia, "Times New Roman", serif;
  font-size: var(--small);
  line-height: 1.5;
  text-align: center;
  font-kerning: normal;
  font-synthesis: none;
  /* Exact glyph positions, so the tracking is even at every size. */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 0 var(--edge);
}

.name {
  margin: 0;
  font-family: "Libre Caslon Display", "Big Caslon", "Adobe Caslon Pro", "Hoefler Text", Baskerville, Georgia, "Times New Roman", serif;
  font-size: var(--name);
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: var(--name-track);
  /* Tracking puts its space after every letter, the last one on a line
     included, which would leave the letters half a space left of centre.
     The same space in front puts them back. */
  padding-left: var(--name-track);
}

/* Two lines on a narrow screen, one line from 480 px up. The size of the
   name is chosen so that each arrangement fits where it is used. */
.name span {
  display: block;
}

@media (min-width: 30em) {
  .name span {
    display: inline;
  }
}

footer {
  padding: 0 var(--edge) var(--edge);
}

.small {
  margin: 0;
  color: var(--quiet);
  text-transform: uppercase;
  letter-spacing: var(--small-track);
  padding-left: var(--small-track); /* as for the name */
}

/* The one link on the site: the way home from the page for a wrong address.
   Its box is made large enough for a thumb and even on both sides of the
   letters, so the focus outline sits square round them. The margins give
   back exactly what the padding takes, so the line is where it would be
   without a link. */
.small a {
  display: inline-block;
  padding: 1em 1em 1em calc(1em + var(--small-track));
  margin: -1em 0 -1em calc(-1 * var(--small-track));
  color: inherit;
  text-decoration: none;
}

.small a:hover {
  color: var(--ink);
}

.small a:focus-visible {
  color: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 0;
}

::selection {
  background: var(--ink);
  color: #000;
}