/* The site's look, shared by every page (#493): the owner's palette as tokens, the
   two typefaces, and for the pages other than the map the top bar, the cards and the
   buttons, so Account, Plans, About and the rest look like the map page they sit
   beside. The map page keeps its own stylesheet and takes the tokens and fonts from
   here. Everything below the tokens and fonts is scoped to body.page, so nothing in
   it can reach the map page.

   The site's two typefaces: Fraunces Bold for headings and names, Syne for
   everything else, chosen by the owner in the palette mixer on 2026-10-03. Both are
   SIL Open Font License 1.1, served from this box like the map library, so the page
   asks no font service for anything. Fraunces is one static cut at 700 and at its
   default optical size, the cut he saw; Syne is its variable file, 400 to 800.
   Latin and Latin Extended are separate files, so a page in plain Latin loads one. */
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/vendor/syne-latin-1.woff2?v=68b623f0e4) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/vendor/syne-latin-ext-1.woff2?v=83885b130c) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url(/vendor/fraunces-700-latin-1.woff2?v=629936f316) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;
  src:url(/vendor/fraunces-700-latin-ext-1.woff2?v=1a8ba15509) format("woff2");
  unicode-range:U+0100-024F,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--sans:"Syne",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
      --serif:"Fraunces",Georgia,"Times New Roman",serif;
  /* The palette. --brand is the ochre as chosen, for marks and fills; --accent the
     same hue taken to 4.8:1 for links and for white text on a button. --bar is the
     top bar, the darkest of the group colours. */
  --paper:#faf6f0; --card:#ffffff; --ink:#6e5d4c; --muted:#6e5d4c; --line:#e4ddd1;
  --brand:#a8743f; --accent:#986839; --bar:#3b2a1e; --on-bar:#faf6f0;
  --tint:#f4eee4; --tint2:#ece4d6;
  /* The type scale: five sizes and no others, on every page, the map page included.
     xs for axis labels and footnotes, s for secondary text and controls, m for body
     text, line names and figures, l for a plot's name and section headings, xl for
     page titles and a card's big figure. */
  --fs-xs:11px; --fs-s:13px; --fs-m:15px; --fs-l:18px; --fs-xl:24px;
  /* Corners: --r for everything with a corner (buttons, cards, inputs, panels),
     --r-s for small marks inside charts and meters. A circle stays 50%. */
  --r:9px; --r-s:2px;
  /* The line at the foot of every page. */
  --foot:16px;
  /* One shadow, for what floats over the map. Everything on the paper is set off by
     a hairline instead. */
  --float:0 1px 2px rgba(59,42,30,.08),0 6px 22px rgba(59,42,30,.16); --shadow:var(--float)}
button,input,select,textarea{font-family:inherit}
/* Syne's default figures are old-style, which suits a sentence and not a column of
   them: a report is figures, so every figure stands on the line. */
body{font-variant-numeric:lining-nums}

/* ---- The pages other than the map: body class="page". Defaults, at no more weight
   than a bare element, so a page's own rules win over them. -------------------- */
body.page{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-m)/1.55 var(--sans)}
:where(.page) h1,:where(.page) h2,:where(.page) h3{font-family:var(--serif);font-weight:700;color:var(--ink);letter-spacing:-.005em;text-wrap:balance}
/* Every link underlined, and none with a "›" after it (the owner, 2026-10-11). */
:where(.page) a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
:where(.page) main,:where(.page) .wrap{max-width:60rem;margin:0 auto;padding:28px 18px 64px}
/* A card: white on the paper, set off by a hairline. */
:where(.page) .card{background:var(--card);border-radius:var(--r);border:1px solid var(--line);padding:20px 22px;margin:0 0 16px}
:where(.page) .btn,:where(.page) button.btn,:where(.page) .btn-pri{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--card);color:var(--ink);font:600 var(--fs-s)/1 var(--sans);text-decoration:none;cursor:pointer}
:where(.page) .btn-pri{background:var(--accent);border-color:var(--accent);color:#fff}
:where(.page) input[type=text],:where(.page) input[type=email],:where(.page) input[type=password],:where(.page) input[type=search],:where(.page) input[type=url],:where(.page) select,:where(.page) textarea{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);padding:8px 10px;font:inherit}
:where(.page) input:focus,:where(.page) select:focus,:where(.page) textarea:focus{outline:2px solid var(--brand);outline-offset:1px}

/* ---- The top bar, the map page's own, on every other page. ------------------------- */
/* 82 px including its padding, as the map page's bar is: the map page sets border-box
   on everything, and without it here this bar was 92 px and its links sat 9 px lower. */
.site-bar{position:sticky;top:0;z-index:20;box-sizing:border-box;height:82px;display:flex;align-items:center;gap:28px;padding:10px 30px 0 28px;
  background:var(--paper);color:var(--bar)}
/* The watercolour (#493): the sky fades into the paper at the top and the hills
   thin out over 64 px below the bar, over the page. */
.site-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:146px;z-index:-1;pointer-events:none;
  background:url(/vendor/bar-2.webp?v=0d58a5e4ad) left top/auto 146px repeat-x}
.site-bar .site-brand{display:inline-flex;align-items:center;margin-right:0;text-decoration:none;flex:none}
.site-bar .site-brand img{display:block;height:72px;width:auto}
@media (max-width:1100px){.site-bar .site-brand img{height:60px}}
.site-bar .site-sp{flex:1}
/* The search box, as on the map page: in the middle of the bar, as wide as it can be. */
.site-bar .site-search{flex:1 1 auto;max-width:600px;min-width:240px;margin:0 auto}
.site-bar .site-search[hidden]{display:none}
.site-bar .site-search input{width:100%;height:42px;box-sizing:border-box;padding:0 12px 0 36px;border-radius:var(--r);
  border:1px solid rgba(59,42,30,.14);font:var(--fs-m)/1 var(--sans);color:var(--bar);outline:none;
  background:rgba(255,255,255,.8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7166' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5'/%3E%3C/svg%3E") no-repeat 12px 50%/16px}
.site-bar .site-search input:focus{background-color:#fff;border-color:var(--brand)}
.site-bar .site-search input::placeholder{color:var(--muted)}
.site-bar .site-nav{margin-left:auto}
.site-bar .site-nav{display:flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r);background:rgba(255,255,255,.66);overflow-x:auto;scrollbar-width:none;min-width:0}
.site-bar .site-nav::-webkit-scrollbar{display:none}
.site-bar .site-nav a,.site-bar .site-nav button{flex:none;background:none;border:0;border-radius:var(--r);padding:9px 13px;
  font:600 var(--fs-m)/1.5 var(--sans);color:var(--bar);text-decoration:none;cursor:pointer;white-space:nowrap}
.site-bar .site-nav a:hover,.site-bar .site-nav button:hover,.site-bar .site-nav a.on{color:var(--bar);background:#fff}
.site-bar .site-nav .quiet{color:#6e5d4c}
.site-bar .site-nav form{display:inline;margin:0}
.site-bar .site-plan{flex:none;display:flex;align-items:center;height:36px;padding:0 14px;font-weight: 400;border:1px solid rgba(59,42,30,.28);
  border-radius:var(--r);font:var(--fs-s) var(--sans);color:#6e5d4c;background:rgba(255,255,255,.66);text-decoration:none;white-space:nowrap}
.site-bar .site-plan b{color:var(--accent);font-weight:600;margin-right:4px}
.site-bar .site-plan[hidden]{display:none}
@media (max-width:640px){.site-bar .site-search{display:none}.site-bar{height:64px;gap:10px;padding:0 10px 0 14px}.site-bar::before{height:93px;background-size:auto 93px}.site-bar .site-brand img{height:52px}.site-bar .site-plan{display:none}}

/* Lining figures on every page, the map page included. A page's own `body { font: ... }`
   is a shorthand, and a shorthand resets font-variant-numeric; `html body` outweighs
   a bare `body` wherever it is written. */
html body{font-variant-numeric:lining-nums}

/* On a phone the bar's links are a menu under a button (#493): they do not fit in
   one row, and links that scroll sideways hide Account and Sign out. */
.site-bar .site-menu{display:none}
@media (max-width:640px){
  .site-bar .site-menu{display:block;flex:none;background:rgba(255,255,255,.7);border:0;border-radius:var(--r);
    padding:8px 12px;font:600 var(--fs-s)/1 var(--sans);color:var(--bar);cursor:pointer;text-decoration:none}
  .site-bar .site-nav{display:none;position:absolute;top:72px;right:8px;min-width:200px;flex-direction:column;
    align-items:stretch;gap:0;padding:6px;background:var(--paper);border-radius:0 0 var(--r) var(--r);box-shadow:var(--float)}
  .site-bar .site-nav.open{display:flex}
  .site-bar .site-nav a,.site-bar .site-nav button{padding:12px;font-size:var(--fs-m);text-align:left;width:100%}
}

/* ---- The line at the foot of every page, the map page's included (the owner,
   2026-10-12): the map's credits on the left where there is a map, and the links
   of FOOTER_LINKS in web/app.py on the right, one text line high. ---------------- */
.sitefoot{flex:none;margin:0;display:flex;align-items:center;gap:24px;height:var(--foot);line-height:var(--foot);padding:0 14px;box-sizing:border-box;
  background:rgba(250,246,240,.92);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--muted);white-space:nowrap}
.sitefoot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.sitefoot a:hover{color:var(--accent)}
.sf-cred,.sf-legal{min-width:0;overflow-x:auto;scrollbar-width:none}
.sf-cred::-webkit-scrollbar,.sf-legal::-webkit-scrollbar{display:none}
.sf-cred{flex:1 1 auto;display:flex;align-items:center;gap:6px}
.sf-legal{flex:0 1 auto;display:flex;gap:14px}
.sf-esri[hidden]{display:none}
.sf-legal{margin-left:auto}
.sitefoot [hidden]{display:none}
body.page{padding-bottom:calc(var(--foot) + 24px)}
body.page .sitefoot{position:fixed;left:0;right:0;bottom:0;z-index:20}
/* On a wide screen nothing is cut: the map's credits are a licence term and "Cancel
   contracts here" must be reachable on every page, so where both do not fit on one
   line the line wraps to two rather than hiding either. At 1400 px they did not fit
   and the OpenStreetMap credit was cut off. */
@media (min-width:861px){
  .sitefoot{height:auto;min-height:var(--foot);flex-wrap:wrap;column-gap:24px;row-gap:0}
  .sf-cred,.sf-legal{flex:0 1 auto;overflow:visible;flex-wrap:wrap;white-space:nowrap}
  .sf-legal{column-gap:14px}}