/* The front door.
 *
 * It has one job and one control, so it is laid out like a title page rather
 * than like an application: centred, quiet, and with the button large enough
 * that nobody has to look for it.
 *
 * Same rules as everywhere else — no hover states, 44px minimum, high
 * contrast, :focus-visible styled and never removed — and they matter more
 * here than anywhere, because this is the first screen and the reader has no
 * idea yet what any of it does.
 *
 * ---------------------------------------------------------------------------
 * IT IS THE COVER OF THE BOOK, AND THE REST OF THE SITE IS THE INSIDE OF IT.
 *
 * The cloth ground and the pasted-on label are the one place this site is
 * allowed to be decorative, because it is the only page with nothing to read
 * on it. Every other page is somewhere she is working; this is the doorstep.
 *
 * THE TEXT ALL SITS ON THE LABEL, never on the cloth. That is what keeps the
 * measured contrast honest — the label is the same paper as every other page,
 * so the ink on it is the same 14.6:1 it is everywhere else. If a future
 * change moves any text onto the dark ground, its contrast has to be measured
 * again from scratch rather than assumed.
 */

.home body,
body.home {
  /* Vertically centred on a tablet held in either orientation, without
     collapsing on a short screen: min-height rather than height, so a small
     window scrolls instead of clipping the button. */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  box-sizing: border-box;

  /* BOOK CLOTH. A dark warm ground with the same grain over it as the paper
     elsewhere, so the two surfaces read as the same material family. */
  background-color: #33291f;
  background-image: var(--paper-grain);
}

/* THE LABEL PASTED ONTO THE COVER. Double-framed — a hairline inset inside a
   heavier border — which is the frame a printed label actually has, and is two
   borders rather than any image. */
body.home main {
  max-width: 30rem;
  text-align: center;
  box-sizing: border-box;
  padding: 2.75rem 2rem 2.5rem;
  background-color: var(--colour-background);
  background-image: var(--paper-grain);
  border: 2px solid #1c1610;
  /* The inset hairline, and the shadow that lifts the label off the cloth.
     Both are box-shadow so the element keeps one border and no extra markup. */
  box-shadow:
    inset 0 0 0 1px var(--colour-background),
    inset 0 0 0 3px var(--colour-rule-strong),
    0 2px 10px rgba(0, 0, 0, 0.45);
}

/* THE TITLE, AND A TRAP THAT ONLY A BROWSER SHOWED.
 *
 * Set as an engraved title: capitals, letterspaced wide, which is what makes it
 * read as a title rather than as a shout.
 *
 * The markup used to hold "Keeping the Record", to keep it on one
 * line. In capitals with this tracking it is far wider than the label, so it
 * ran straight out through the right-hand border — and because a non-breaking
 * space forbids wrapping, it did not overflow gracefully at any width. Nothing
 * in the repository could see it; it took one screenshot.
 *
 * So the spaces are ordinary now and the size is fluid. Two lines on a narrow
 * screen is what a title page does anyway. `text-wrap: balance` splits it
 * evenly where it is supported and is ignored where it is not, which is the
 * right way round. */
body.home h1 {
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  line-height: 1.25;
  margin: 0 0 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Letterspacing adds a trailing gap after the last letter, which throws a
     centred line visibly off-centre. */
  text-indent: 0.14em;
  font-weight: 600;
  text-wrap: balance;
}

/* THE ORNAMENT. A ruled line with a lozenge set into the middle of it — the
   printer's mark that separates a title from its subtitle. Drawn from two
   pseudo-elements, with no text content in either, so a screen reader has
   nothing to announce and there is nothing in the markup to explain. */
body.home h1::after {
  content: "";
  display: block;
  width: 8rem;
  height: 1px;
  margin: 1.25rem auto 0;
  background: var(--colour-rule-strong);
  position: relative;
}

body.home .lede {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--colour-text-muted);
  margin: 0 0 2.25rem;
  font-style: italic;
  position: relative;
}

/* The lozenge, sitting on the rule above. Positioned against the lede because
   it is the element that follows the rule, and a second pseudo-element on the
   heading would have to fight the first one's flow. */
body.home .lede::before {
  content: "";
  position: absolute;
  top: -1.7rem;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--colour-accent);
  transform: rotate(45deg);
  /* Paper showing through around the lozenge, so the rule appears to pass
     behind it rather than into it. */
  box-shadow: 0 0 0 4px var(--colour-background);
}

.doorway {
  margin: 0 0 2rem;
}

/* THE ONLY CONTROL ON THE PAGE. Deliberately large: it is the whole purpose of
   the screen, and a first-time visitor should not have to work out which thing
   to press.

   Set as a stamped plate — the accent ink, square corners, and the words in
   spaced capitals — so that it reads as the one thing to press without needing
   a colour anybody has to interpret. */
.sign-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  min-width: 12rem;
  padding: 0.75rem 2.5rem;
  font-family: var(--font-body);
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
  text-transform: uppercase;
  background: var(--colour-accent);
  color: var(--colour-card);
  border: 2px solid var(--colour-accent);
  border-radius: 2px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.sign-in:focus-visible {
  outline: 3px solid var(--colour-focus);
  outline-offset: 3px;
}

body.home .how {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--colour-text-muted);
  margin: 0 0 1.75rem;
}

/* The last line, set apart by a rule rather than by being made smaller and
   greyer — which is the usual way to say "this is a footnote" and is exactly
   the light-grey-on-white this project does not do. */
body.home .quiet {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colour-text-muted);
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--colour-rule);
}