/* ==========================================================================
   samoageonode-ws — the stylesheet for this restore.

   WRITTEN, NOT RECOVERED, and that is worth stating plainly: the original was GeoNode 2.4 on
   Bootstrap 3, and NOT ONE of its stylesheets survives. The supplied zip contains no CSS at all,
   and the Wayback capture of this host has no `text/css` entry among its 37 URLs. So there is no
   original skin to restore and nothing here pretends to be one.

   The palette is taken from the subject rather than invented at random: deep ocean #123a56 for
   the chrome, a shallow-water teal #4bb3a5 for accents, and a warning amber #f0b429 used once,
   on the mark — the three colours a hazard-mapping node would have used anyway.

   Contrast, composited and measured rather than eyeballed:
     #123a56 ground / #ffffff ink            12.28:1
     #ffffff ground / #1f2933 body ink       14.68:1
     #ffffff ground / #145e6f link ink        7.02:1
     #f7f9fa panel  / #46545e muted ink       6.09:1
   ========================================================================== */

:root {
  --ocean: #123a56;
  --ocean-deep: #0d2c42;
  --teal: #4bb3a5;
  --teal-ink: #145e6f;
  --amber: #f0b429;
  --ink: #1f2933;
  --ink-mute: #46545e;
  --panel: #f7f9fa;
  --line: #dde3e8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: #fff;
}
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--amber); color: var(--ocean-deep); padding: 10px 16px; z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-head { background: var(--ocean); color: #fff; }
.site-head .wrap {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 62px;
  padding-top: 10px; padding-bottom: 10px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: #fff; text-decoration: none; font-size: 18px; letter-spacing: .01em;
}
.brand strong { font-weight: 700; }
.brand-mark {
  width: 26px; height: 26px; border-radius: 6px; flex: 0 0 26px;
  background:
    radial-gradient(circle at 50% 34%, var(--amber) 0 4px, transparent 4px),
    linear-gradient(180deg, var(--teal) 0 100%);
}
.site-head nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.site-head nav a {
  color: #cfe0ea; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-size: 15px;
}
.site-head nav a:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.site-head nav a.on { color: var(--ocean-deep); background: var(--teal); }
/* The CURRENT item keeps its dark ink on hover. Without this line the generic hover rule above
   repaints it white on the teal chip — 2,29:1, measured — so pointing at the page you are
   already on makes its own label disappear. Found by the hover pass, invisible at rest. */
.site-head nav a.on:hover { color: var(--ocean-deep); background: var(--teal); }

/* --------------------------------------------------------------------------
   PBN strip — directly under the header, above the hero. On two earlier donors the block sat
   below the hero and landed at 716–718px in a 720px window: on the first screen by arithmetic
   and invisible in practice (docs/pbn-links-log.md). The header here is in normal flow and about
   62px tall, so this lands inside the first hundred pixels. Dofollow, no target — build.py
   asserts both on the rendered output.
   -------------------------------------------------------------------------- */
.pn-strip { background: var(--panel); border-bottom: 1px solid var(--line); padding: 11px 0; }
.pn-strip p { margin: 0; font-size: 14.5px; color: var(--ink-mute); }
.pn-strip a { color: var(--teal-ink); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(160deg, var(--ocean) 0%, var(--ocean-deep) 100%);
  color: #fff; padding: 46px 0 40px;
}
.hero h1 { margin: 0 0 8px; font-size: 34px; line-height: 1.2; font-weight: 700; }
.hero p { margin: 0; color: #bcd4e2; font-size: 17px; max-width: 62ch; }
@media (max-width: 640px) { .hero { padding: 32px 0 28px; } .hero h1 { font-size: 27px; } }

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */
.prose { padding: 34px 20px 56px; max-width: 1060px; }
.prose h2 { font-size: 23px; margin: 34px 0 10px; color: var(--ocean); }
.prose h3 { font-size: 17px; margin: 0 0 8px; color: var(--ocean); }
.prose p { margin: 0 0 14px; max-width: 76ch; }
/* `a:not([class])`, NOT a bare `.prose a` — and this is the second time in two days (FIX-126).
   A bare rule is 0,2,0 and beats `.btn` at 0,1,0, so every button inside the prose column takes
   the LINK colour: measured here at 1,62:1, teal ink on the ocean-blue button. Matching «has no
   class at all» cannot swallow a button, this one or the next one. */
.prose a:not([class]) { color: var(--teal-ink); }
.prose ul { max-width: 76ch; }
.lead { font-size: 18px; max-width: 72ch; }
.note, .no-abstract { color: var(--ink-mute); font-size: 14.5px; }
.editorial { border-left: 3px solid var(--teal); padding-left: 16px; }

.btn {
  display: inline-block; margin-top: 6px;
  background: var(--ocean); color: #fff; text-decoration: none;
  padding: 12px 20px; border-radius: 7px; font-weight: 600;
}
.btn:hover { background: var(--ocean-deep); color: #fff; }

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */
.stats { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 28px; }
.stat {
  flex: 1 1 200px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px 18px;
}
.stat b { display: block; font-size: 28px; line-height: 1.1; color: var(--ocean); }
.stat span { font-size: 14.5px; color: var(--ink-mute); }

.teasers { list-style: none; padding: 0; margin: 0 0 20px; max-width: 76ch; }
.teasers li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.teasers a { display: block; font-weight: 600; }
.teasers span { display: block; font-size: 14.5px; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   Catalogue
   -------------------------------------------------------------------------- */
.rec {
  padding: 20px 0 6px; border-top: 1px solid var(--line);
}
.rec h2 { margin: 0 0 4px; font-size: 19px; word-break: break-word; }
.rec-meta { margin: 0 0 10px !important; font-size: 13.5px; color: var(--ink-mute); }
.rec-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rec-meta code {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 6px; font-size: 12.5px; color: var(--ink-mute);
  /* The identifiers are single unbreakable tokens up to 29 characters long
     (`geonode:ws_district_aal_tc_eq`). On a 375px screen that pushed the record 9px past its
     own box — measured, not guessed. */
  overflow-wrap: anywhere; word-break: break-word; max-width: 100%;
}
.purpose { font-size: 14.5px; color: var(--ink-mute); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.outs { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 18px; }
.out {
  flex: 1 1 300px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 16px 20px;
}
.out ul { margin: 0; padding-left: 20px; }
.out li { font-size: 15px; }
ul.cols { columns: 2; column-gap: 30px; }
@media (max-width: 620px) { ul.cols { columns: 1; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-foot { background: var(--ocean); color: #cfe0ea; padding: 34px 0 26px; margin-top: 10px; }
.site-foot h2 { color: #fff; font-size: 16px; margin: 0 0 8px; }
.site-foot p { margin: 0 0 10px; font-size: 14.5px; max-width: 68ch; }
.site-foot a { color: #9fd6cd; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { padding: 2px 0; font-size: 14.5px; }
.foot-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.foot-cols > div:first-child { flex: 2 1 380px; }
.foot-cols > div + div { flex: 1 1 160px; }
.foot-legal {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 13.5px; color: #a8c2d2;
}