/* The page at spokenrecord.app (SPRINT-0019's page at the domain addendum, Part 3). On a wide window the picture is
   shown whole at the page's width and the words sit on the plaster wall on its left, placed and sized in the picture's
   own coordinates, so that they move and scale with it. On a narrow window, or a large text size, where the words
   would not fit the wall, they follow beneath the picture. The type is the visitor's own; nothing is downloaded. The
   colours were set from the rendered page's pixels, sixteen cases, in the builder's report. */

:root {
  color-scheme: only light;
  --ground: #3a2e24;
  --ink: #f4ede3;
}

html {
  background: var(--ground);
  color: var(--ink);
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.scene {
  container-type: inline-size;
  position: relative;
}

.picture {
  aspect-ratio: 1344 / 768;
}

.picture img {
  display: block;
  width: 100%;
  height: 100%;
}

.words {
  padding: 1.75rem 6vw 3rem;
}

h1 {
  margin: 0 0 0.45em;
  font-family: Didot, "Bodoni 72", "Times New Roman", serif;
  font-size: 2.5rem;
  font-weight: normal;
  /* Didot's capitals rise above a tighter line, out of the wall's box. */
  line-height: 1.25;
}

.line {
  margin: 0 0 0.35em;
  font-size: 1.125rem;
  line-height: 1.35;
}

.signin {
  margin: 1.1em 0 0;
  font-size: 1rem;
  line-height: 1.35;
}

.signin a {
  color: inherit;
  text-underline-offset: 0.2em;
}

/* The wall's box: 6 to 38 percent across and 18 to 50 percent down the picture. The width is in em, so that a larger
   text size moves the change to a wider window. */
@media (min-width: 56em) {
  .words {
    position: absolute;
    left: 6%;
    top: 18%;
    width: 32%;
    height: calc(32cqw * 768 / 1344);
    box-sizing: border-box;
    padding: 0;
    text-shadow: 0 0 0.6em rgb(28 20 13 / 0.6);
  }

  h1 {
    font-size: 3.6cqw;
  }

  .line {
    font-size: max(1.45cqw, 1rem);
  }

  .signin {
    font-size: max(1.3cqw, 1rem);
  }
}