/* Home background preview: reuse the existing contour layers and card effects.
 * A server-rendered html class keeps this background consistent on every page,
 * including PJAX visits. Existing hero and card interactions remain unchanged.
 */
html.field-notes-background body {
  --home-bg: #f9f8f5;
  --home-blue: rgba(134, 152, 166, .24);
  --home-orange: rgba(217, 139, 96, .18);
  --home-dot: rgba(23, 35, 51, .04);
  background:
    radial-gradient(ellipse 820px 680px at 0% 18%, var(--home-blue), transparent 80%),
    radial-gradient(ellipse 920px 760px at 100% 78%, var(--home-orange), transparent 80%),
    radial-gradient(circle, var(--home-dot) .9px, transparent 1.2px),
    var(--home-bg) !important;
  /* The base theme sets an !important background shorthand, so longhands
   * must match that priority too, otherwise the dot tile becomes page-sized. */
  background-size: 100% 100%, 100% 100%, 32px 32px !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-attachment: fixed !important;
}

/* Reuse the original SVG and both existing pseudo-elements. Two masks per
 * layer extend the map into the side gutters without extra DOM or animation. */
html.field-notes-background body::before {
  background: #8698a6;
  opacity: .15;
  -webkit-mask: url('/img/contours.svg') right -8vw top -10vh / min(58vw, 900px) auto no-repeat,
    url('/img/contours.svg') left -25vw top -12vh / min(46vw, 700px) auto no-repeat;
  mask: url('/img/contours.svg') right -8vw top -10vh / min(58vw, 900px) auto no-repeat,
    url('/img/contours.svg') left -25vw top -12vh / min(46vw, 700px) auto no-repeat;
}
html.field-notes-background body::after {
  background: #d98b60;
  opacity: .12;
  -webkit-mask: url('/img/contours.svg') left -11vw bottom -14vh / min(50vw, 760px) auto no-repeat,
    url('/img/contours.svg') right -25vw bottom -8vh / min(44vw, 680px) auto no-repeat;
  mask: url('/img/contours.svg') left -11vw bottom -14vh / min(50vw, 760px) auto no-repeat,
    url('/img/contours.svg') right -25vw bottom -8vh / min(44vw, 680px) auto no-repeat;
}
html[data-theme="dark"].field-notes-background body::before { opacity: .11; }
html[data-theme="dark"].field-notes-background body::after { opacity: .09; }

/* Keep the site's warm charcoal palette rather than introducing a new navy. */
html[data-theme="dark"].field-notes-background body {
  --home-bg: var(--cl-paper);
  --home-blue: rgba(95, 145, 185, .15);
  --home-orange: rgba(210, 135, 85, .12);
  --home-dot: rgba(180, 200, 220, .03);
}

@media (min-width: 1600px) {
  html.field-notes-background:not([data-theme="dark"]) body {
    --home-blue: rgba(134, 152, 166, .27);
    --home-orange: rgba(217, 139, 96, .21);
  }
}

@media (max-width: 768px) {
  /* Keep only the two corners on small screens; no dense lines under text. */
  html.field-notes-background body::before {
    opacity: .1;
    -webkit-mask: url('/img/contours.svg') right -24vw top 8vh / 90vw auto no-repeat;
    mask: url('/img/contours.svg') right -24vw top 8vh / 90vw auto no-repeat;
  }
  html.field-notes-background body::after {
    opacity: .08;
    -webkit-mask: url('/img/contours.svg') left -32vw bottom -3vh / 92vw auto no-repeat;
    mask: url('/img/contours.svg') left -32vw bottom -3vh / 92vw auto no-repeat;
  }
  html[data-theme="dark"].field-notes-background body::before { opacity: .085; }
  html[data-theme="dark"].field-notes-background body::after { opacity: .07; }
  html.field-notes-background body {
    --home-blue: rgba(134, 152, 166, .12);
    --home-orange: rgba(217, 139, 96, .10);
    --home-dot: rgba(23, 35, 51, .025);
    background-attachment: scroll !important;
    background-size: 100% 100%, 100% 100%, 32px 32px !important;
  }
  html[data-theme="dark"].field-notes-background body {
    --home-blue: rgba(95, 145, 185, .09);
    --home-orange: rgba(210, 135, 85, .07);
    --home-dot: rgba(180, 200, 220, .035);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.field-notes-background body { background-attachment: scroll !important; }
}