/* CSAFIELD — the ground the paper sits on, on every page of the site.

   Loaded last, on every page, so nothing can repaint it out from under. The
   emblem is the app's own: the green disc, the brass ring, the three gold bars
   and the twin leaf. It appears twice — large in the upper right, smaller in
   the lower left — because the paper column covers the middle on a phone, and
   the margins are where the eye actually rests.

   The stack, back to front:

     1. cream, the colour of an old ledger page
     2. four washes, one to each corner
     3. contours drifting out of the north-west
     4. a green shade rising from the foot
     5. the rules, thirty pixels apart
     6. the emblem, twice
*/

html{background:#F4EFE0}

body{
  background-color:#F4EFE0;
  background-image:
    url("img/mark.svg"),
    url("img/mark.svg"),
    repeating-linear-gradient(to bottom, rgba(27,27,24,.028) 0 1px, transparent 1px 30px),
    linear-gradient(to top, rgba(11,61,46,.10), rgba(11,61,46,0) 22%),
    repeating-radial-gradient(circle at 6% -10%, rgba(201,154,44,.10) 0 1px, transparent 1px 58px),
    radial-gradient(64% 42% at 2% -8%, rgba(242,169,59,.34), rgba(242,169,59,0) 66%),
    radial-gradient(60% 40% at 104% 0%, rgba(62,142,138,.30), rgba(62,142,138,0) 66%),
    radial-gradient(56% 36% at 98% 102%, rgba(122,92,142,.20), rgba(122,92,142,0) 68%),
    radial-gradient(60% 40% at -6% 100%, rgba(196,99,63,.20), rgba(196,99,63,0) 68%);
  background-repeat:no-repeat, no-repeat, repeat, no-repeat, repeat,
                    no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:92% 3%, 4% 97%, 0 0, 0 0, 0 0,
                      0 0, 0 0, 0 0, 0 0;
  background-size:300px auto, 210px auto, auto, auto, auto,
                  auto, auto, auto, auto;
  background-attachment:fixed;
  min-height:100%;
}

/* A seal printed on the sheet. The ground emblem sits behind the paper, so on
   a phone — where the paper is nearly the whole width — it is only ever seen
   in the margins. This one is printed on the paper itself, at the head of each
   page, the way a letterhead carries a mark: faint enough to read over, and
   never in the way of a thumb. */
#app > .view{
  background-image:url("img/mark.svg");
  background-repeat:no-repeat;
  background-position:calc(100% + 12px) 6px;
  background-size:112px auto;
}
@media (min-width:900px){
  #app > .view{background-size:150px auto;background-position:calc(100% + 18px) 10px}
}

/* Surveyor's corner marks: gold on the left, teal on the right. There are
   only ever two, and they never sit over anything a thumb must hit. */
body::after{
  content:'';
  position:fixed;
  inset:9px 9px auto 9px;
  height:26px;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(#C6A15B,#C6A15B) left top/26px 1px no-repeat,
    linear-gradient(#C6A15B,#C6A15B) left top/1px 26px no-repeat,
    linear-gradient(#3E8E8A,#3E8E8A) right top/26px 1px no-repeat,
    linear-gradient(#3E8E8A,#3E8E8A) right top/1px 26px no-repeat;
  opacity:.55;
}

/* On a wide screen there is room either side of the column: the emblems move
   out into those margins and grow. */
@media (min-width:900px){
  body{
    background-position:94% 8%, 3% 92%, 0 0, 0 0, 0 0,
                        0 0, 0 0, 0 0, 0 0;
    background-size:440px auto, 300px auto, auto, auto, auto,
                    auto, auto, auto, auto;
  }
}

@media (prefers-reduced-motion:reduce){
  body{background-attachment:scroll}
}