/* ================================================================
   FIELD NOTES — the study the cabinet stands in.
   Shared by every page, loaded after the page's own styles. A deep
   bottle-green wall papered with a faint naturalist's print (ants,
   seed heads, leaves), warm lamplight falling from above, the edges
   sinking into shadow, and walnut panelling along the bottom with
   the footer set into it.
   ================================================================ */
:root {
  --wall: #1c3123;
  --wall-lo: #0e1a12;
}
html { background: var(--wall-lo); }
body {
  display: flex; flex-direction: column;
  min-height: 100vh;
  padding-bottom: 0 !important;
  background:
    /* the lamp: a warm pool high in the middle */
    radial-gradient(ellipse 75% 520px at 50% 0, rgba(255, 196, 118, 0.17), rgba(255, 196, 118, 0.05) 55%, transparent 80%),
    /* the corners of the room falling away */
    radial-gradient(ellipse 140% 100% at 50% 30%, transparent 50%, rgba(5, 10, 6, 0.55) 100%),
    url('img/wall-pattern.svg') 0 0 / 200px 200px repeat,
    var(--wall) !important;
}
body > main { width: 100%; }

/* ---- the panelling ---- */
/* margin-top auto sinks it to the floor of a short page; the side margins
   undo the body's gutter so it runs wall to wall */
.wainscot {
  margin: auto calc(-1 * clamp(8px, 3vw, 32px)) 0;
  position: relative;
  padding: 46px 16px 30px;
  /* one piece of grain stretched wall to wall: repeating the 700px tile left
     a dark seam every 700px where its edges don't match */
  background:
    var(--grain, none) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #3d2715, #2a1a0d 40%, #1f1309);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.45);
}
/* keep a gap above it even when the page is long */
body > main { margin-bottom: clamp(32px, 5vw, 64px); }
/* the chair rail: a moulded strip along the top */
.wainscot::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: linear-gradient(180deg, #6b4627, #4a3019 45%, #2b1a0c);
  box-shadow: 0 1px 0 rgba(255, 210, 150, 0.12), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.wainscot .colophon { position: relative; z-index: 1; margin: 0; }