/* "Horse Farm" look (Deirdre): deep earth colours - barn red, saddle leather, hay and pasture green - with a sundown hill-and-fence strip across the top,
   grass along the bottom and the farm picture (horse, barn, fence) on the sign-in card. Text stays dark on light cards (or light on dark) so it is easy to read.
   System fonts only: no outside files load. */
:root { --bg:#eadfca; --top:#c9ad82; --ink:#2b1f16; --muted:#645241; --card:#f8f0e0; --line:#c9ae84;
        --accent:#7a2a1f; --onaccent:#fff4e4; --title:#5a1f16; --nobg:#f3dccf; --yesbg:#dfe6cf; --shadow:rgba(60,30,20,.30);
        --title-font:Rockwell,"Roboto Slab","Cambria","Georgia",serif; --title-weight:700; --title-size:2rem; --login-title-size:2.3rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) {
        --bg:#1a1410; --top:#33241b; --ink:#f3e6cf; --muted:#cdb999; --card:#261d17; --line:#4c3b2d;
        --accent:#dc9a4e; --onaccent:#2a160a; --title:#f0cf94; --nobg:#3b2220; --yesbg:#26341f; --shadow:rgba(0,0,0,.55); } }
@media (max-width: 480px) { :root { --title-size:1.5rem; } }
h1 { letter-spacing:.02em; text-shadow:0 .08rem .25rem rgba(122,42,31,.25); }
body { background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23b8794a' stop-opacity='.85'/><stop offset='.6' stop-color='%23e9b074' stop-opacity='.5'/><stop offset='1' stop-color='%23f6e7c8' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='200' fill='url(%23s)'/><circle cx='900' cy='108' r='44' fill='%23fff0c4' opacity='.8'/><path d='M0 138 C160 118 320 152 520 136 S860 112 1200 140 L1200 200 L0 200Z' fill='%23724a3c' opacity='.26'/><path d='M0 164 C190 146 360 180 580 162 S920 146 1200 166 L1200 200 L0 200Z' fill='%232f4a32' opacity='.28'/><g stroke='%234a2e1e' stroke-width='5' fill='none' opacity='.26'><path d='M0 168 C190 152 360 184 580 168 S920 152 1200 170'/><path d='M0 181 C190 165 360 197 580 181 S920 165 1200 183'/></g><g fill='%234a2e1e' opacity='.26'><rect x='90' y='156' width='7' height='36'/><rect x='330' y='160' width='7' height='36'/><rect x='570' y='156' width='7' height='36'/><rect x='810' y='154' width='7' height='36'/><rect x='1050' y='158' width='7' height='36'/></g></svg>") top center / 100% 11rem no-repeat,
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 80 C200 56 400 102 640 74 S1000 46 1200 78 L1200 120 L0 120Z' fill='%23506b3a' opacity='.34'/><path d='M0 100 C220 80 420 116 660 98 S1020 78 1200 102 L1200 120 L0 120Z' fill='%23324a2a' opacity='.34'/></svg>") bottom center / 100% 5rem no-repeat fixed,
  linear-gradient(180deg, var(--top) 0, var(--bg) 18rem) no-repeat, var(--bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body { background:
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='xMidYMax slice'><defs><linearGradient id='s' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23603a2a' stop-opacity='.85'/><stop offset='.6' stop-color='%23402619' stop-opacity='.5'/><stop offset='1' stop-color='%231a1410' stop-opacity='0'/></linearGradient></defs><rect width='1200' height='200' fill='url(%23s)'/><circle cx='900' cy='108' r='40' fill='%23f2c58a' opacity='.45'/><path d='M0 138 C160 118 320 152 520 136 S860 112 1200 140 L1200 200 L0 200Z' fill='%23140f0c' opacity='.55'/><path d='M0 164 C190 146 360 180 580 162 S920 146 1200 166 L1200 200 L0 200Z' fill='%230f1a12' opacity='.6'/></svg>") top center / 100% 11rem no-repeat,
  linear-gradient(180deg, var(--top) 0, var(--bg) 18rem) no-repeat, var(--bg); } }

/* the farm picture, very soft, in the bottom-right corner behind everything */
body::before { content:""; position:fixed; z-index:-1; pointer-events:none; right:-5vw; bottom:-4vh; width:min(62vw, 520px); aspect-ratio:1;
  background:url("plumeria.webp") center / contain no-repeat; opacity:.15; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) body::before { opacity:.10; } }
@media (min-width: 1100px) { body::before { width:min(36vw, 620px); } }
/* on the sign-in card: the picture, a little larger than a flower would be */
.login .flower { width:7rem; right:-.2rem; top:-3.2rem; transform:rotate(0); }