/*
Theme Name: London Pavement Geology V2
Theme URI: https://londonpavementgeology.co.uk/
Description: Child theme for the 2026 redesign. Adds the new home page and cascades the
             refreshed styling across the site. Parent theme is untouched, so reverting
             is a matter of switching back to LondonPavementGeologyTheme.
Author: Livetech
Version: 0.36.1
Template: LondonPavementGeologyTheme
*/

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  --lpg-blue:#3e73a4;
  --lpg-green:#3f7d20;
  --lpg-grey:#7f7f7f;
  --lpg-ink:#23262a;
  --lpg-mute:#69707a;
  --lpg-rule:#e2e5e8;
  --lpg-deep:#141e26;
  --lpg-deeper:#0d151b;
  --lpg-sand:#f7f5f0;
  --lpg-gold:#c9962f;
  --cup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h12v6a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4V8z'/%3E%3Cpath d='M16 9h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3Cpath d='M5 21h11'/%3E%3C/svg%3E");
  /* geological timescale (ICS) — reused as the accent palette */
  --ics-precam:#e07ba8; --ics-camb:#7fa056; --ics-ordo:#00a88f;
  --ics-sil:#b3e1b6;    --ics-dev:#cb8c37;  --ics-carb:#67a599;
  --ics-perm:#f04028;   --ics-tri:#9d5db0;  --ics-jur:#34b2c9;
  --ics-cret:#7fc64e;   --ics-ceno:#fd9a52;
}

/* =====================================================================
   1b. HEADER (site-wide) — see the V2 HEADER block in functions.php
   ===================================================================== */
/* the shared shell (top bar, footer) on the same content edge as the header's
   Bootstrap container, so the whole page has one left margin */
.lpg-shell{max-width:1170px;margin:0 auto;padding:0 15px}

/* utility bar above the masthead */
.lpg-topbar{background:var(--lpg-deeper);color:#fff}
.lpg-topbar .lpg-shell{
  display:flex;align-items:center;gap:20px;
  padding:9px 15px;font-size:12.5px;flex-wrap:wrap;
}
.lpg-topbar .lead{color:#b9cdda}
.lpg-topbar .links{margin-left:auto;display:flex;gap:18px}
.lpg-topbar a{color:#cfe0ec;text-decoration:none}
.lpg-topbar a:hover{color:#fff;text-decoration:underline}

/* the logo is a link home; the Street SVG is 322x100 with no built-in padding */
/* flex, not inline-block: an inline box keeps a 6px descender slot under the
   image, which showed up as 26px of clear space above the logo and 32 below */
header .lpg-brand{display:flex;line-height:0}
header .lpg-brand:focus-visible{outline:2px solid var(--lpg-blue);outline-offset:3px}
header img.lpg-logo{width:330px;height:auto;max-width:100%}
/* the masthead row becomes a flex row so the landscape lockup is not squeezed
   into the 3-of-12 column it inherited from the old portrait logo */
/* Masthead spacing. Three left edges disagreed: the logo sat on the Bootstrap
   content edge (143px at 1440), the nav's first label 24px right of it, and the
   hero copy 19px left of it. Everything is now pulled to the container edge.
   Vertically the logo had no clear space at all above it and 5px below; the
   brand rule is tile height / 4, and the tile is 102px tall here. */
header .row{display:flex;align-items:center;flex-wrap:wrap;padding:26px 0}
header .lpg-brand-col{float:none;width:auto;flex:0 0 auto}
header .lpg-mast-col{float:none;width:auto;flex:1 1 320px}
/* the nav list carries 7px of collapse padding plus 17px on the first link,
   which put the word "Explore" 24px right of the logo. Pulled back so the
   label starts on the same edge, without flattening the link padding that
   draws the active item's background. */
@media (min-width:768px){ header .navbar-nav{margin-left:-24px} }
@media (max-width:480px){ header img.lpg-logo{width:230px} }

/* masthead: logo left, search + CTA right, tagline beneath them */
header .lpg-mast-col{
  display:flex;align-items:center;justify-content:flex-end;
  gap:16px;flex-wrap:wrap;
}
header .lpg-mast-col .social{order:3;margin:0 !important}
header .lpg-mast-col .tagline{
  order:4;flex:0 0 100%;text-align:right;margin:4px 0 0;
}
header .lpg-mast-col .tagline{
  /* the parent theme paints this as a blue block; inside the new masthead it
     is just a quiet line of text under the search box */
  background:none !important;padding:0 !important;border:0 !important;
  width:auto !important;float:none !important;
}
header .lpg-mast-col .tagline p{
  margin:0;font-size:12px;color:#6c7780 !important;
  background:none !important;padding:0 !important;text-align:right;
}
@media (max-width:991px){ header .lpg-mast-col .tagline p{text-align:left} }
header .lpg-mast-right{
  order:2;margin-left:auto;display:flex;align-items:center;gap:12px;
}

/* the search box is wired straight to the site's own search:
   /search-locations/?search_field=TERM&search_submit=Search */
.lpg-search{display:flex;align-items:center;margin:0}
.lpg-search input[type=search]{
  width:290px;max-width:42vw;border:1px solid #d6dde3;border-right:none;
  border-radius:40px 0 0 40px;padding:10px 8px 10px 18px;font-size:14px;
  color:#333;background:#fbfbfc;outline:none;
}
.lpg-search input[type=search]:focus{
  border-color:var(--lpg-blue);box-shadow:0 0 0 3px rgba(77,144,205,.15);
}
.lpg-search button{
  border:1px solid #d6dde3;border-left:none;border-radius:0 40px 40px 0;
  background:#fbfbfc;color:#5a6a76;font-size:13px;font-weight:700;
  padding:10px 18px;cursor:pointer;
}
.lpg-search button:hover{background:#eef3f7;color:#22303a}
.lpg-mast-cta{
  background:var(--lpg-green);color:#fff !important;text-decoration:none;
  font-weight:700;font-size:14px;padding:11px 18px;border-radius:4px;
  white-space:nowrap;
}
.lpg-mast-cta:hover{background:#356a1b;text-decoration:none}

/* the nav band goes full width, its links stay on the centre column */
header > .container:last-of-type{width:100%;max-width:none;padding:0}
header > .container:last-of-type .navbar{margin-bottom:0;border-radius:0;border:none}
header > .container:last-of-type .navbar-collapse,
header > .container:last-of-type .navbar-header{
  max-width:1140px;margin-left:auto;margin-right:auto;padding:0 7px;
}

@media (max-width:991px){
  header .lpg-mast-col{justify-content:flex-start}
  header .lpg-mast-right{margin-left:0;flex-wrap:wrap}
  header .lpg-mast-col .tagline{text-align:left}
}
@media (max-width:600px){
  .lpg-search input[type=search]{width:auto;flex:1 1 auto;max-width:none}
  .lpg-topbar .lead{display:none}
  .lpg-topbar .links{margin-left:0}
}

/* =====================================================================
   2. SITE-WIDE CASCADE
   Deliberately restrained: type, links, buttons, tables, nav.
   Layout of inner pages is left alone in this first pass.
   ===================================================================== */
body{
  color:var(--lpg-ink);
  -webkit-font-smoothing:antialiased;
}
body, p, li, td, th, dd, dt, input, select, textarea, button{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4{letter-spacing:-.4px}

a{color:var(--lpg-blue)}
a:hover,a:focus{color:#2f6c9f}

/* nav bar: keep the parent's structure, refresh the finish */
.navbar-inverse,
.navbar-default{
  background-color:#1a1a1a !important;
  border-color:#1a1a1a !important;
  border-radius:0;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a{
  color:#e8e8e8 !important;
  font-weight:700;
  font-size:14px;
  padding:15px 17px;
}
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover{
  background-color:#333 !important;
  color:#fff !important;
}
.navbar-inverse .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .current-menu-item > a,
.navbar-default .navbar-nav > .current-menu-item > a{
  background-color:var(--lpg-green) !important;
  color:#fff !important;
}
/* dropdowns, for the 4-item nav */
.navbar-nav .dropdown-menu{
  background:#2b2b2b;
  border:none;border-top:2px solid var(--lpg-blue);
  border-radius:0;padding:0;min-width:236px;
  box-shadow:0 8px 18px rgba(0,0,0,.28);
}
.navbar-nav .dropdown-menu > li > a{
  color:#e2e2e2;padding:11px 16px;font-size:13px;
  border-bottom:1px solid #383838;white-space:normal;
}
.navbar-nav .dropdown-menu > li:last-child > a{border-bottom:none}
.navbar-nav .dropdown-menu > li > a:hover{background:var(--lpg-blue);color:#fff}

/* buttons */
.btn-primary,
input[type=submit].btn-primary{
  background-color:var(--lpg-green);
  border-color:var(--lpg-green);
  font-weight:700;
}
.btn-primary:hover{background-color:#4d9527;border-color:#4d9527}

/* data tables (geo sites, search) */
table.dataTable thead th{
  background:#f4f6f7;
  border-bottom:2px solid var(--lpg-rule) !important;
  font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:#5b6470;
}
table.dataTable tbody tr:hover{background:#f6f9fb}

/* =====================================================================
   3. HOME PAGE  (scoped to body.home so nothing else is affected)
   ===================================================================== */
body.home .lpg-hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(140deg,#16222c 0%,#101a22 55%,#0b1319 100%);
}
body.home .lpg-hero .glow{
  position:absolute;width:680px;height:680px;right:-140px;top:-210px;border-radius:50%;
  background:radial-gradient(circle,rgba(77,144,205,.26),transparent 68%);
}
body.home .lpg-hero .inner{
  position:relative;z-index:2;max-width:1170px;margin:0 auto;padding:56px 15px 54px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  gap:46px;align-items:center;
}
body.home .lpg-kicker{
  display:inline-block;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:700;color:#0d151b;background:var(--lpg-gold);
  padding:6px 12px;border-radius:3px;margin:0 0 20px;
}
body.home .lpg-hero h1{
  font-size:46px;line-height:1.07;margin:0 0 18px;font-weight:700;
  letter-spacing:-1.2px;color:#fff;
}
body.home .lpg-hero h1 em{font-style:normal;color:#7fd39a}
body.home .lpg-hero .lede{font-size:17.5px;color:#c3d2dc;margin:0 0 30px;max-width:46ch}
body.home .lpg-stats{
  display:flex;margin:0 0 30px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
body.home .lpg-stat{padding:17px 28px 17px 0;margin-right:28px;border-right:1px solid rgba(255,255,255,.12)}
body.home .lpg-stat:last-child{border-right:none;margin-right:0}
body.home .lpg-stat b{display:block;font-size:32px;line-height:1;font-weight:700;letter-spacing:-1px}
body.home .lpg-stat span{font-size:11.5px;color:#93a8b6;text-transform:uppercase;letter-spacing:.09em}
body.home .lpg-btns{display:flex;gap:12px;flex-wrap:wrap}
body.home .lpg-btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:4px;border:2px solid transparent;transition:.14s;
}
body.home .lpg-btn-p{background:var(--lpg-green);color:#fff}
body.home .lpg-btn-p:hover{background:#4d9527;color:#fff}
body.home .lpg-btn-s{border-color:#556e80;color:#fff}
body.home .lpg-btn-s:hover{background:rgba(255,255,255,.1);color:#fff}
/* hero slider: six record photographs plus the collection mapped */
body.home .lpg-slider{position:relative;border-radius:10px;overflow:hidden;
  box-shadow:0 22px 48px rgba(0,0,0,.45);background:#0b1319}
body.home .lpg-slides{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:1/1}
body.home .lpg-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
body.home .lpg-slide.is-on{opacity:1;pointer-events:auto;z-index:1}
body.home .lpg-slide a{display:block;position:absolute;inset:0;color:#fff;text-decoration:none}
body.home .lpg-slide img{width:100%;height:100%;object-fit:cover;display:block}
body.home .lpg-slide .cap{position:absolute;left:0;right:0;bottom:0;padding:54px 18px 46px;
  background:linear-gradient(to top,rgba(8,14,19,.94) 0%,rgba(8,14,19,.72) 55%,rgba(8,14,19,0) 100%);
  display:flex;flex-direction:column;gap:3px;line-height:1.3}
body.home .lpg-slide .cap b{font-size:18px;font-weight:700}
body.home .lpg-slide .cap .wh{font-weight:400;color:#b9c7d1}
body.home .lpg-slide .cap .st{font-size:15px;color:#8ff0ab;font-weight:700}
body.home .lpg-slide .cap .ag{font-size:12.5px;color:#b9c7d1}
body.home .lpg-slide .cap .go{font-size:12.5px;font-weight:700;color:#fff;margin-top:6px;opacity:.85}
body.home .lpg-slide a:hover .cap .go,body.home .lpg-slide a:focus-visible .cap .go{text-decoration:underline;opacity:1}
body.home .lpg-slide a:focus-visible{outline:3px solid #8ff0ab;outline-offset:-3px}

/* the inset: the same record's close-up of the stone, so the slide shows both
   the building and the material it is made of. Sourced from the record's geoN
   images at the medium size (~35-60KB) because it renders at about 190px. */
body.home .lpg-slide .det{position:absolute;right:16px;top:16px;width:37%;z-index:2;
  aspect-ratio:1/1;border-radius:7px;overflow:hidden;border:2px solid rgba(255,255,255,.82);
  box-shadow:0 10px 24px rgba(0,0,0,.5);line-height:0}
body.home .lpg-slide .det img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(var(--z,1));transform-origin:var(--o,center)}
body.home .lpg-slide .det b{position:absolute;left:0;right:0;bottom:0;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;line-height:1;padding:6px 0 7px;text-align:center;
  background:linear-gradient(to top,rgba(8,14,19,.88),rgba(8,14,19,0))}
@media (max-width:520px){ body.home .lpg-slide .det{width:42%;right:12px;top:12px} }

/* the last slide is the dot map: every record plotted, regenerated from the
   record coordinates on a 72-column grid with one circle per occupied cell and
   its radius scaled by how many records fall there, so London reads as a mass
   and Scotland, Wales and Cornwall stay legible. Cells of 40+ take .d-hi. */
body.home .lpg-slide-map a{background:linear-gradient(165deg,#16222c,#0b1319);
  display:flex;align-items:center;gap:22px;padding:24px 24px 56px}
body.home .lpg-slide-map svg{flex:0 0 auto;height:100%;width:auto;display:block;
  filter:drop-shadow(0 0 26px rgba(103,215,138,.26))}
/* the caption sits beside the map rather than over it: the map is portrait and
   the slide is square, so a single centred column left two dead margins */
body.home .lpg-slide-map .cap{position:static;flex:1 1 auto;padding:0;background:none}
body.home .lpg-slide-map .cap .ag{margin-top:2px}
body.home .lpg-slide-map .d-uk{fill:#5bbf7a;opacity:.72}
body.home .lpg-slide-map .d-hi{fill:#8ff0ab}
body.home .lpg-slide-map a:hover .d-uk{opacity:.95}
body.home .lpg-slider-ui{position:absolute;left:0;right:0;bottom:10px;z-index:2;display:flex;align-items:center;
  justify-content:center;gap:10px}
body.home .lpg-slider-ui button{background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:50%;
  width:30px;height:30px;font:700 15px/1 system-ui,sans-serif;cursor:pointer;padding:0;transition:background .15s}
body.home .lpg-slider-ui button:hover,body.home .lpg-slider-ui button:focus-visible{background:rgba(255,255,255,.32);outline:0}
body.home .lpg-sdots{list-style:none;margin:0;padding:0;display:flex;gap:7px}
body.home .lpg-sdots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.38)}
body.home .lpg-sdots button[aria-current="true"]{background:#8ff0ab;width:22px;border-radius:5px}
@media (prefers-reduced-motion:reduce){ body.home .lpg-slide{transition:none} }

body.home .lpg-sec{padding:48px 0}
body.home .lpg-sec.alt{background:var(--lpg-sand)}
/* one content edge for the whole page: the Bootstrap container the header and
   nav already sit in is 1170 wide with 15px gutters, so the home sections use
   the same and everything lines up down the left */
body.home .lpg-sec .inner{max-width:1170px;margin:0 auto;padding:0 15px}
body.home .lpg-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;flex-wrap:wrap}
body.home .lpg-head h2{font-size:26px;margin:0;font-weight:700}
body.home .lpg-head .lede{color:var(--lpg-mute);margin:7px 0 0;font-size:15.5px;max-width:62ch}
body.home .lpg-more{margin-left:auto;font-size:13.5px;font-weight:700;text-decoration:none}

/* era strip — each tile is a canned search */
body.home .lpg-eras{display:grid;grid-template-columns:repeat(auto-fit,minmax(166px,1fr));gap:10px}
body.home .lpg-era{
  border-radius:6px;padding:14px;text-decoration:none;display:flex;flex-direction:column;
  gap:2px;min-height:126px;transition:.14s;
}
body.home .lpg-era:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.2)}
body.home .lpg-era .e-name{font-size:14px;font-weight:700}
body.home .lpg-era .e-age{font-size:10.5px;opacity:.66}
body.home .lpg-era .e-stone{font-size:12.5px;margin-top:8px;font-weight:700;opacity:.9}
body.home .lpg-era .e-n{margin-top:auto;font-size:23px;font-weight:700;letter-spacing:-.8px;line-height:1}
body.home .lpg-era .e-n em{font-style:normal;font-size:10.5px;font-weight:400;opacity:.68;display:block;margin-top:2px}
body.home .lpg-era.thin{outline:1px dashed rgba(0,0,0,.28);outline-offset:-4px}
body.home .lpg-erafoot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11px;color:var(--lpg-mute);margin:10px 0 0}

/* stone tiles */
body.home .lpg-stones{display:grid;grid-template-columns:repeat(auto-fill,minmax(198px,1fr));gap:14px}
body.home .lpg-stone{
  border-radius:7px;padding:16px 16px 18px;text-decoration:none;display:block;
  border:1px solid rgba(0,0,0,.09);transition:.15s;
}
body.home .lpg-stone:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.17)}
body.home .lpg-stone b{display:block;font-size:15px;font-weight:700;line-height:1.25}
body.home .lpg-stone i{font-style:normal;display:block;font-size:11.5px;opacity:.7;margin-top:4px}
body.home .lpg-stone .n{display:block;font-size:26px;font-weight:700;letter-spacing:-.9px;margin-top:13px;line-height:1}
body.home .lpg-stone .wb{display:block;height:4px;border-radius:3px;background:rgba(0,0,0,.12);margin-top:9px;overflow:hidden}
body.home .lpg-stone .wb em{display:block;height:100%;border-radius:3px}

/* doors */
body.home .lpg-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
body.home .lpg-door{
  position:relative;border-radius:8px;overflow:hidden;text-decoration:none;color:#fff;
  min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  background:linear-gradient(165deg,#243440,#141e26);transition:.16s;
}
body.home .lpg-door::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--ac)}
body.home .lpg-door:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(0,0,0,.24);color:#fff}
body.home .lpg-door .clock{font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ac);margin-bottom:9px}
/* the parent theme capitalises every heading, which is fine for "Studying
   Geology" but turns a sentence into "Go Back A Few Hundred Million Years" */
body.home .lpg-door h3{font-size:19.5px;margin:0 0 9px;font-weight:700;color:#fff;
  text-transform:none}
body.home .lpg-door p{font-size:13.5px;color:#b9c7d1;margin:0 0 13px}
body.home .lpg-door .go{font-size:13px;font-weight:700;color:#8ff0ab}
/* the middle door is a list of stones: the card is a div so each row can be a
   link; hover on the card is kept, and the rows get their own */
body.home .lpg-door-list{justify-content:flex-start}
body.home .lpg-door-list:hover{transform:none;box-shadow:none}
body.home .lpg-door-stones{list-style:none;margin:0 0 12px;padding:0;font-variant-numeric:tabular-nums}
body.home .lpg-door-stones li{border-top:1px solid rgba(255,255,255,.08)}
body.home .lpg-door-stones li:first-child{border-top:0}
body.home .lpg-door-stones a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:5px 0;color:#dfe7ec;text-decoration:none;font-size:13.5px}
body.home .lpg-door-stones a:hover span{color:#fff;text-decoration:underline}
body.home .lpg-door-stones b{color:var(--ac);font-weight:700;font-size:13px}
body.home .lpg-door-list .go{margin-top:auto}
body.home .lpg-door-list .go:hover{text-decoration:underline}

/* card three: the figures a researcher wants, not a sentence about them */
body.home .lpg-door-figs{list-style:none;margin:0 0 12px;padding:0;
  font-variant-numeric:tabular-nums}
body.home .lpg-door-figs li{display:flex;align-items:baseline;gap:10px;padding:5px 0;
  border-top:1px solid rgba(255,255,255,.08)}
body.home .lpg-door-figs li:first-child{border-top:0}
body.home .lpg-door-figs b{color:var(--ac);font-size:17px;min-width:62px}
body.home .lpg-door-figs span{font-size:13px;color:#b9c7d1}

/* card one: the invitation, then whatever the browser is willing to tell us */
body.home .lpg-door-near{justify-content:flex-start}
body.home .lpg-door-near:hover{transform:none;box-shadow:none}
body.home .lpg-door-near .near-ask p{font-size:13.5px;color:#b9c7d1;margin:0 0 14px}
body.home .lpg-door-near .near-note{font-size:11.5px;color:#8fa3b1;margin:10px 0 0}
body.home .lpg-door-near .near-fall p{font-size:13.5px;color:#b9c7d1;margin:0 0 8px}
body.home .lpg-door-near .near-h{font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ac);margin:0 0 8px}
/* the parent theme sets a bare button{width:10%;height:45px;background:peru},
   so every property here has to be stated rather than inherited */
body.home .lpg-door-near .near-go{
  width:auto;height:auto;display:inline-block;background:var(--ac);color:#12181d;
  border:0;border-radius:5px;padding:11px 18px;font:700 14px/1 inherit;
  font-family:inherit;white-space:nowrap;cursor:pointer;transition:filter .15s;
}
body.home .lpg-door-near .near-go:hover{filter:brightness(1.08)}
body.home .lpg-door-near .near-go:disabled{opacity:.65;cursor:default}
body.home .lpg-door-near .near-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* the record name can be long, and the stone sits under it as a second line */
body.home .lpg-door-stones a em{display:block;font-style:normal;font-size:11.5px;
  color:#8fa3b1;margin-top:1px}
body.home .lpg-door-stones a span{min-width:0}
body.home .lpg-door-near .lpg-door-stones a{align-items:flex-start}
body.home .lpg-door-near .lpg-door-stones b{white-space:nowrap;padding-top:1px}

/* places */
body.home .lpg-places{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
body.home .lpg-place{
  border:1px solid var(--lpg-rule);border-radius:8px;padding:19px;text-decoration:none;
  background:#fff;transition:.14s;display:block;
}
body.home .lpg-place:hover{border-color:var(--lpg-blue);transform:translateY(-3px)}
body.home .lpg-place b{display:block;font-size:30px;font-weight:700;letter-spacing:-.9px;line-height:1;color:var(--lpg-ink)}
body.home .lpg-place span{font-size:13px;color:var(--lpg-mute);display:block;margin:6px 0 12px}
body.home .lpg-bar{height:6px;border-radius:4px;background:#eceef0;overflow:hidden}
body.home .lpg-bar i{display:block;height:100%;background:var(--lpg-blue);border-radius:4px}

/* leaderboard */
body.home .lpg-list{border:1px solid var(--lpg-rule);border-radius:8px;overflow:hidden;background:#fff}
body.home .lpg-list a{display:flex;gap:14px;align-items:center;padding:14px 18px;
  border-bottom:1px solid var(--lpg-rule);text-decoration:none;font-size:15px;color:var(--lpg-ink)}
body.home .lpg-list a:last-child{border-bottom:none}
body.home .lpg-list a:hover{background:#f6f9fb}
body.home .lpg-list .r{font-weight:700;color:#fff;background:var(--lpg-blue);width:26px;height:26px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 auto}
body.home .lpg-list .r.g{background:var(--lpg-gold);color:#12181d}
body.home .lpg-list .w{margin-left:auto;display:flex;align-items:center;gap:12px}
body.home .lpg-list .w .b{width:108px;height:7px;background:#eceef0;border-radius:4px;overflow:hidden}
body.home .lpg-list .w .b i{display:block;height:100%;background:var(--lpg-green)}
body.home .lpg-list .c{font-size:12.5px;color:var(--lpg-mute);min-width:76px;text-align:right}

/* extremes */
body.home .lpg-ends{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
body.home a.lpg-end{text-decoration:none;transition:transform .14s,box-shadow .14s}
body.home a.lpg-end:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
body.home a.lpg-end:hover h3{text-decoration:underline}
body.home .lpg-end{
  border-radius:8px;padding:26px;color:#fff;min-height:190px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(160deg,#2b3b47,#151f27);
}
body.home .lpg-end::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--ac)}
body.home .lpg-end .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ac);font-weight:700}
body.home .lpg-end h3{margin:9px 0 7px;font-size:23px;color:#fff}
body.home .lpg-end p{margin:0;font-size:13.5px;color:#c2d0d9}

/* closing cta */
body.home .lpg-cta{background:linear-gradient(120deg,#356418,#22400e);color:#fff;padding:46px 0}
body.home .lpg-cta .inner{max-width:1170px;margin:0 auto;padding:0 15px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap}
body.home .lpg-cta h2{margin:0 0 6px;font-size:26px;color:#fff}
body.home .lpg-cta p{margin:0;color:#d8ecc9;font-size:15.5px}
body.home .lpg-cta .lpg-btn-w{background:#fff;color:#2e5c16;margin-left:auto}

@media (max-width:980px){
  body.home .lpg-hero .inner{grid-template-columns:1fr}
  body.home .lpg-hero h1{font-size:32px}
  body.home .lpg-doors,body.home .lpg-ends{grid-template-columns:1fr}
  body.home .lpg-places{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   4. ABOUT PAGE — data credit block (see functions.php)
   ===================================================================== */
.lpg-credit{
  display:flex;gap:22px;align-items:flex-start;
  margin:34px 0 8px;padding:24px 26px;
  background:#f6f8fa;border:1px solid var(--lpg-rule,#e3e8ec);
  border-left:4px solid var(--lpg-green);border-radius:4px;
}
.lpg-credit-side{flex:0 0 auto}
.lpg-credit-photo{
  display:block;width:92px;height:92px;border-radius:50%;object-fit:cover;
}
.lpg-credit-mono{
  display:flex;align-items:center;justify-content:center;
  background:#dfe6eb;color:#5a6a76;
  font-size:27px;font-weight:700;letter-spacing:.06em;
}
.lpg-credit-body{flex:1 1 auto;min-width:0}
.lpg-credit-role{
  margin:0 0 2px;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--lpg-green);
}
.lpg-credit-body h3{margin:0 0 10px;font-size:22px;font-weight:700}
.lpg-credit-body p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
.lpg-credit-links{margin:12px 0 0 !important;font-size:14px;font-weight:700}
.lpg-credit-links a{color:var(--lpg-blue);text-decoration:none}
.lpg-credit-links a:hover{text-decoration:underline}

@media (max-width:600px){
  .lpg-credit{flex-direction:column;gap:14px;padding:20px}
  .lpg-credit-photo{width:74px;height:74px}
}

/* =====================================================================
   5. ABOUT PAGE — the two profiles (page content uses .lpg-people)
   Dave and Ruth get identical cards. Ruth has no photograph yet, so her
   portrait slot renders an "RS" monogram at exactly the same size; when a
   photo arrives, replace the <span class="lpg-person-photo lpg-person-mono">
   in the page content with an <img class="lpg-person-photo">.
   ===================================================================== */
.lpg-people{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:22px 0 34px;
}
.lpg-person{
  background:#f6f8fa;border:1px solid var(--lpg-rule);
  border-top:3px solid var(--lpg-green);border-radius:4px;padding:22px 24px;
}
.lpg-person .lpg-person-photo{
  display:block;width:104px;height:104px;border-radius:50%;
  object-fit:cover;object-position:center top;margin:0 0 14px;float:none;
}
.lpg-person .lpg-person-mono{
  display:flex;align-items:center;justify-content:center;
  background:#dfe6eb;color:#5a6a76;font-size:30px;font-weight:700;letter-spacing:.06em;
}
.lpg-person .lpg-person-role{
  margin:0 0 2px !important;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--lpg-green);
}
.lpg-person h3{margin:0 0 12px !important;font-size:22px;font-weight:700}
.lpg-person p{margin:0 0 11px;font-size:14.5px;line-height:1.62}
.lpg-person p:last-child{margin-bottom:0}

@media (max-width:760px){
  .lpg-people{grid-template-columns:1fr;gap:18px}
}

/* =====================================================================
   6. COMMON FOOTER (markup built in functions.php)
   ===================================================================== */
.lpg-foot{
  background:var(--lpg-deeper);color:#b6c6d1;font-size:14px;
  /* the parent theme pins a fixed height on <footer> for its sticky-footer
     layout, which clipped this taller footer to 97px. */
  height:auto !important;min-height:0 !important;
}
.lpg-foot a{text-decoration:none}
.lpg-foot .foot-main{
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:48px;
  max-width:1170px;margin:0 auto;padding:44px 15px 38px;
}
.lpg-foot .foot-brand img{width:250px;height:auto;max-width:100%;display:block}
.lpg-foot .foot-brand .strap{margin:16px 0 0;color:#8fa3b1;font-size:14px}
.lpg-foot .foot-coffee{margin:20px 0 0}
.lpg-foot .foot-coffee a{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 17px;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  color:#dce6ec;font-size:13.5px;font-weight:600;letter-spacing:.01em;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.lpg-foot .foot-coffee a:hover{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5);color:#fff;
}
.lpg-foot .foot-coffee .cup{width:16px;height:16px;flex:0 0 auto;opacity:.92}
.lpg-foot .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.lpg-foot .foot-cols h3{
  margin:0 0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;font-weight:700;
}
.lpg-foot .foot-cols a{display:block;color:#a9bcc8;padding:4px 0;font-size:14px}
.lpg-foot .foot-cols a:hover{color:#fff;text-decoration:underline}

/* funder logos: every mark on its own white tile, because the set runs from
   white-on-black to fine Victorian line art and will not line up otherwise */
.lpg-foot .foot-partners{background:#f4f6f8;padding:22px 0 18px}
.lpg-foot .foot-partners .lpg-shell{max-width:1170px;margin:0 auto;padding:0 15px}
.lpg-foot .plabel{
  margin:0 0 14px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:#6a7277;font-weight:700;
}
/* grid, not flex: seven tiles wrapped 6+1 and left an orphan on row two.
   auto-fit keeps them on one row at desktop and reflows evenly when narrow. */
.lpg-foot .foot-partners ul{
  list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
}
.lpg-foot .foot-partners li{min-width:0}
.lpg-foot .foot-partners a{
  /* 74px, not 60: the Curry Fund and Geological Society marks are fine
     Victorian line art and turn to mush below about 70px. */
  height:74px;width:100%;background:#fff;border:1px solid #e4e8ec;border-radius:3px;
  display:flex;align-items:center;justify-content:center;padding:8px 12px;
  transition:border-color .14s,box-shadow .14s;
}
.lpg-foot .foot-partners a:hover{border-color:#c2ccd4;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.lpg-foot .foot-partners img{
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;display:block;
}
.lpg-foot .anon{margin:14px 0 0;font-size:12.5px;color:#6a7279}

.lpg-foot .foot-legal{background:#080e13;padding:14px 0;font-size:12.5px;color:#6e7f8a}
.lpg-foot .foot-legal .lpg-shell{
  max-width:1140px;margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.lpg-foot .foot-legal p{margin:0}
.lpg-foot .foot-legal .right{display:flex;gap:18px;flex-wrap:wrap}
.lpg-foot .foot-legal a{color:#8ea6b4}
.lpg-foot .foot-legal a:hover{color:#fff;text-decoration:underline}

@media (max-width:860px){
  .lpg-foot .foot-main{grid-template-columns:1fr;gap:32px;padding:34px 15px 28px}
  .lpg-foot .foot-cols{grid-template-columns:1fr 1fr;gap:22px}
  .lpg-foot .foot-legal .lpg-shell{flex-direction:column;gap:8px}
}
@media (max-width:520px){
  .lpg-foot .foot-cols{grid-template-columns:1fr}
  .lpg-foot .foot-brand img{width:210px}
  .lpg-foot .foot-partners ul{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   7. COOKIE CONSENT (see the COOKIE CONSENT block in functions.php)
   ===================================================================== */
.lpg-cc{
  position:fixed;left:0;right:0;bottom:0;z-index:99999;
  background:#0d151b;color:#cfdae2;border-top:3px solid var(--lpg-green);
  box-shadow:0 -4px 20px rgba(0,0,0,.3);
}
.lpg-cc-in{
  max-width:1140px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.lpg-cc p{margin:0;font-size:13.5px;line-height:1.55;flex:1 1 420px}
.lpg-cc a{color:#8fc7ea}
.lpg-cc a:hover{color:#fff}
.lpg-cc-btns{display:flex;gap:10px;flex:0 0 auto}
.lpg-cc button{
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:10px 18px;border-radius:4px;border:1px solid transparent;
}
/* accept and reject are given equal visual weight on purpose: consent has
   to be as easy to refuse as it is to give */
.lpg-cc button.yes{background:var(--lpg-green);color:#fff}
.lpg-cc button.yes:hover{background:#356a1b}
.lpg-cc button.no{background:transparent;color:#cfdae2;border-color:#4a5b67}
.lpg-cc button.no:hover{background:#1d2a33;color:#fff}

/* the change-your-mind control, sitting in the footer legal bar */
.lpg-cc-reset{
  background:none;border:0;padding:0;margin:0;font:inherit;font-size:12.5px;
  color:#8ea6b4;cursor:pointer;text-align:left;
}
.lpg-cc-reset:hover{color:#fff;text-decoration:underline}

@media (max-width:600px){
  .lpg-cc-in{padding:14px 18px;gap:14px}
  .lpg-cc-btns{width:100%}
  .lpg-cc button{flex:1 1 auto}
}

/* =====================================================================
   8. POLICY PAGES — tables in the privacy and cookie policies
   ===================================================================== */
.lpg-tbl{
  width:100%;border-collapse:collapse;margin:18px 0 24px;font-size:14px;
  display:block;overflow-x:auto;
}
.lpg-tbl thead th{
  text-align:left;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:#5a6a76;font-weight:700;padding:9px 12px;
  border-bottom:2px solid var(--lpg-rule);white-space:nowrap;
}
.lpg-tbl td{
  padding:10px 12px;border-bottom:1px solid var(--lpg-rule);
  vertical-align:top;line-height:1.55;
}
.lpg-tbl tbody tr:nth-child(odd){background:#f7f9fa}
.lpg-tbl code{
  font-size:12.5px;background:#eef2f5;padding:1px 5px;border-radius:3px;
  color:#2c3a45;white-space:nowrap;
}
.lpg-tbl td:first-child{font-weight:600}

/* policy pages read better with a measure and clear headings */
.page-id-448 article h3,
.page-id-362 article h3,
.page-id-481 article h3,
.page-id-485 article h3{
  margin:30px 0 10px;font-size:19px;font-weight:700;letter-spacing:-.2px;
}

/* =====================================================================
   9. SUPPORT PAGE
   ===================================================================== */
.lpg-lead{font-size:17.5px;line-height:1.62;color:#2b353d}
.lpg-note{
  margin:22px 0 26px;padding:15px 18px;
  background:#fbf7ec;border:1px solid #e6d9b8;border-left:4px solid #c9a94f;
  border-radius:4px;
}
.lpg-note p{margin:0;font-size:14.5px;line-height:1.6;color:#4a412c}

/* =====================================================================
   10. RECORD PAGES — /location/{id}-{slug}/
   ---------------------------------------------------------------------
   Rendered by the parent theme's geo/location_details.php, which cannot
   be opened in the Theme File Editor, so the heading block is injected
   in the output buffer and everything else is done from here.
   ===================================================================== */

/* The Categories sidebar is the map's legend. On a single record it is
   noise, so the content column takes the full width. */
body.page-template-page-map-details .row.no-gutters > aside{display:none}
body.page-template-page-map-details .row.no-gutters > aside + div[class*="col-"]{
  width:100%;float:none;
}

/* "Location Details" is replaced by a real h1 (see lpg_v2_record_head). */
body.page-template-page-map-details .row.no-gutters > aside + div h2{display:none}

/* one shared measure for every band of the page */
body.page-template-page-map-details .lpg-rec-head,
body.page-template-page-map-details dl.details,
body.page-template-page-map-details .row.gallery,
body.page-template-page-map-details .lpg-backmap,
body.page-template-page-map-details #popup,
body.page-template-page-map-details #popup + span{
  max-width:1140px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
}

/* ---- 10a. the heading block ---- */
.lpg-rec-head{padding-top:30px;padding-bottom:2px}
.lpg-rec-crumb{
  margin:0 0 13px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#6b7881;font-weight:600;
}
.lpg-rec-crumb a{color:#6b7881;text-decoration:none}
.lpg-rec-crumb a:hover{color:var(--lpg-ink);text-decoration:underline}
.lpg-rec-crumb span{margin:0 7px;opacity:.5}
.lpg-rec-head h1{
  margin:0;font-size:36px;line-height:1.14;font-weight:700;
  letter-spacing:-.7px;color:var(--lpg-ink);
}
.lpg-rec-sub{margin:11px 0 0;font-size:19px;line-height:1.45;color:#54636e}
.lpg-rec-pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:18px 0 0;padding:0}
.lpg-rec-pills li{
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:5px 12px;border-radius:999px;background:#eef2f5;color:#3c4a55;
}
.lpg-rec-pills li.cat{
  display:inline-flex;align-items:center;gap:7px;padding-left:11px;
  background:#fff;border:1px solid var(--lpg-rule);
}
.lpg-rec-pills li.cat::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--c,#8a97a1);
}
/* the five map-pin colours, so the pill matches the pin */
.lpg-rec-pills li.cat-igneous{--c:#61d514}
.lpg-rec-pills li.cat-metamorphic{--c:#f32e8d}
.lpg-rec-pills li.cat-sedimentary{--c:#203f99}
.lpg-rec-pills li.cat-fossil{--c:#f16421}
.lpg-rec-pills li.cat-structure{--c:#00a69c}

/* ---- 10b. map and photograph ---- */
/* The map keeps its own height. Forcing it taller left Google serving
   only the static fallback image — no tiles, no zoom controls. Leave it
   alone; match the photograph to it instead. */
/* Only the photograph column. :not(:has(#map_canvas)) keeps every one of
   these declarations out of the map: styling the images inside it broke
   the tile layer, and width:100% collapsed its static image to 2px. Do
   not simplify this selector. */
body.page-template-page-map-details .row.no-gutters > aside + div > .row.no-gutters > div[class*="col-"]:not(:has(#map_canvas)) img{
  width:100% !important;height:250px;object-fit:cover;
  border-radius:10px;display:block;border:1px solid var(--lpg-rule);
}
body.page-template-page-map-details .row.no-gutters > aside + div > .row.no-gutters{
  max-width:1140px;margin:0 auto;padding:22px 14px 0;
}
body.page-template-page-map-details .row.no-gutters > aside + div > .row.no-gutters > div[class*="col-"]{
  padding-left:10px;padding-right:10px;
}

/* ---- 10c. "Back to Map" — a link, not a blue slab ---- */
/* Was an <h6> styled as a big blue slab, which broke the heading order.
   lpg_v2_a11y() turns it into <p class="lpg-backmap">. */
body.page-template-page-map-details .lpg-backmap{
  margin-top:26px;margin-bottom:14px;font-size:13px;
  font-weight:600;letter-spacing:.03em;text-transform:uppercase;
}
body.page-template-page-map-details .lpg-backmap a{
  color:var(--lpg-green) !important;text-decoration:none;
}
body.page-template-page-map-details .lpg-backmap a:hover{text-decoration:underline}

/* ---- 10d. the field list ---- */
body.page-template-page-map-details dl.details{
  display:grid;grid-template-columns:240px 1fr;margin-top:0;margin-bottom:0;
}
body.page-template-page-map-details dl.details:first-of-type{
  border-top:1px solid var(--lpg-rule);
}
body.page-template-page-map-details dl.details dt,
body.page-template-page-map-details dl.details dd{
  margin:0;border-bottom:1px solid var(--lpg-rule);padding:12px 0;
}
body.page-template-page-map-details dl.details dt{
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#5a6a76;font-weight:700;line-height:1.9;
}
body.page-template-page-map-details dl.details dd{
  font-size:16px;line-height:1.55;color:var(--lpg-ink);
}

/* ---- 10e. the photograph strip ---- */
body.page-template-page-map-details .row.gallery{margin-top:30px}
body.page-template-page-map-details .gallery > div{padding:0 8px 16px}
body.page-template-page-map-details .gallery [class^="small-image"]{
  height:150px !important;border-radius:8px;border:1px solid var(--lpg-rule);
  /* object-fit for the real <img> tags lpg_v2_record_photos() builds;
     background-size for any span that has not been converted. */
  width:100%;display:block;object-fit:cover;
  background-size:cover !important;background-position:center !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
body.page-template-page-map-details .gallery a:hover [class^="small-image"]{
  transform:translateY(-2px);box-shadow:0 7px 20px rgba(17,26,34,.17);
}

/* ---- 10f. suggest an edit, and the submitter credit ---- */
body.page-template-page-map-details #popup{
  display:block;margin-top:14px;font-size:14.5px;font-weight:600;
  color:var(--lpg-green);text-decoration:none;cursor:pointer;
  /* a <button> sizes to its content, where the old <a> filled the row,
     so it needs an explicit width or the shared auto margins centre it */
  width:100%;background:none;border:0;font-family:inherit;text-align:left;
}
body.page-template-page-map-details #popup:hover{text-decoration:underline}
body.page-template-page-map-details #popup:focus-visible{
  outline:3px solid var(--lpg-green);outline-offset:3px;
}
body.page-template-page-map-details #popup + span{
  display:block;margin-top:10px;margin-bottom:44px;
  font-size:13.5px;color:#687782;
}

@media (max-width:767px){
  .lpg-rec-head h1{font-size:27px}
  .lpg-rec-sub{font-size:17px}
  body.page-template-page-map-details dl.details{grid-template-columns:1fr}
  body.page-template-page-map-details dl.details dt{
    padding-bottom:0;border-bottom:0;line-height:1.6;
  }
  body.page-template-page-map-details dl.details dd{padding-top:3px}
  body.page-template-page-map-details .row.no-gutters > aside + div > .row.no-gutters > div[class*="col-"]:not(:has(#map_canvas)) img{
    height:230px !important;
  }
}

/* =====================================================================
   11. SUBMIT FORM — required-field markers
   ===================================================================== */
.lpg-req{
  color:#c0392b;font-weight:700;text-decoration:none;border:0;
  font-size:1.05em;line-height:1;cursor:help;
}
.lpg-reqkey{
  margin:0 0 20px;padding:11px 15px;font-size:14px;line-height:1.55;
  color:#4a545d;background:#f4f7f9;border:1px solid var(--lpg-rule);
  border-left:3px solid #c0392b;border-radius:4px;
}
.lpg-reqkey .lpg-req{margin:0 1px}

/* The parent theme hard-codes an inline color:#F00 on the guidance line in
   the submission form. Pure red on white is 4.0:1 — below AA. Overriding the
   inline style needs !important; the attribute selector keeps it to that one
   span rather than every span in the form. */
#incident-add #frm span[style*="#F00"],
#incident-add #frm span[style*="#f00"]{color:#c0392b !important}
.lpg-bmc{margin:24px 0 30px}
.lpg-bmc-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;border-radius:8px;
  background:#536ede;color:#fff !important;text-decoration:none;
  font-size:16px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
  transition:background .15s ease,transform .12s ease;
}
.lpg-bmc-btn::before{
  content:"";width:18px;height:18px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--cup) center/contain no-repeat;mask:var(--cup) center/contain no-repeat;
}
.lpg-bmc-btn:hover{background:#4258c9;transform:translateY(-1px);color:#fff !important}
.lpg-bmc-btn:focus-visible{outline:3px solid #1b2b6b;outline-offset:2px}

/* =====================================================================
   12. ACCESSIBILITY UTILITIES
   ===================================================================== */

/* Visually hidden but available to screen readers. Used for the labels
   lpg_v2_a11y() adds to the Suggest an Edit form, which is designed with
   placeholders only. */
.lpg-vh{
  position:absolute !important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* The dialog's close control is now a <button> around the original
   image, so it needs the button chrome removing. */
#popupContact #close{
  background:none;border:0;padding:0;cursor:pointer;line-height:0;
}
#popupContact #close:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* The Send control in the dialog is now a <button>, so it needs the
   original link styling rather than browser button chrome. */
#popupContact #submitmail{
  font:inherit;cursor:pointer;
}

/* A visible focus ring everywhere, since the parent theme has none. */
a:focus-visible,button:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--lpg-blue);outline-offset:2px;
}

/* =====================================================================
   13. MAP INFO WINDOW — /geo-sites/
   ---------------------------------------------------------------------
   The marker pop-up was a bare <table width='400'> of three rows inside
   Google's default bubble: the building name, the stone, and a small
   blue "Click for full details" link, with a 48px close button sitting
   in a 48px header strip above it all. It read as a 2014 debug panel.

   Two halves to this. The CARD is ours — the markup is rewritten in
   lpg_v2_map_infowindow() — and the BUBBLE is Google's chrome, which
   can only be reached through its own class names.

   A caution about those class names: .gm-style-iw-c, -iw-d, -iw-chr
   and .gm-ui-hover-effect are Google's internals, not a public API.
   They have been stable for years and every Maps styling guide uses
   them, but a Maps JS release could rename them. If the pop-up ever
   goes back to looking like Google's default, that is what happened —
   nothing here breaks the map, it just stops applying.
   ===================================================================== */

/* ---- 13a. the bubble ---- */
.gm-style .gm-style-iw-c{
  padding:0 !important;
  border-radius:14px !important;
  box-shadow:0 10px 34px rgba(10,20,28,.24), 0 2px 6px rgba(10,20,28,.10) !important;
  max-width:312px !important;
}

/* Google reserves a scrolling area and a 48px header strip for the
   close button. The card sets its own padding, so both are collapsed. */
.gm-style .gm-style-iw-d{
  overflow:hidden !important;
  max-height:none !important;
  padding:0 !important;
}
.gm-style .gm-style-iw-chr{
  height:0 !important;min-height:0 !important;
  position:absolute;top:0;right:0;z-index:2;
}
.gm-style .gm-style-iw-ch{display:none !important}

/* ---- 13b. the close button ---- */
/* The close button now floats over a photograph, so it gets its own
   disc rather than relying on the card being white behind it. */
.gm-style .gm-ui-hover-effect{
  width:30px !important;height:30px !important;
  top:8px !important;right:8px !important;
  margin:0 !important;padding:0 !important;
  border-radius:50%;opacity:1;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 1px 4px rgba(10,20,28,.28);
  transition:background-color .15s ease;
}
.gm-style .gm-ui-hover-effect:hover{background:#fff !important}
.gm-style .gm-ui-hover-effect:focus-visible{
  opacity:1;outline:3px solid var(--lpg-blue);outline-offset:1px;
}
.gm-style .gm-ui-hover-effect > span{
  width:15px !important;height:15px !important;margin:7px !important;
}

/* ---- 13c. the card ---- */
.lpg-iw{font-family:inherit;color:var(--lpg-ink)}

/* The record's main photograph, cropped to a banner. The height is set
   here rather than left to the image, so Google sizes the bubble
   correctly before the file has loaded instead of jumping when it
   arrives. object-position sits slightly above centre because these are
   mostly buildings. */
.lpg-iw-photo{
  display:block;width:100%;height:108px;
  object-fit:cover;object-position:50% 45%;
  background:#e8ecef;
  border-radius:14px 14px 0 0;
}
.lpg-iw-body{
  padding:14px 17px 15px;
  /* room for the close button so a long name never runs under it */
  padding-right:44px;
}
/* No photo (the file 404d and onerror removed the img): the card still
   needs its top corners clear of the pill. */
.lpg-iw-body:first-child{padding-top:15px}
.lpg-iw-cat{
  margin:0 0 7px !important;
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lpg-mute);
}
.lpg-iw-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.lpg-iw-title{
  /* the parent theme puts a 1px #333 rule under every h3 */
  margin:0 !important;border:0 !important;padding:0 !important;
  font-size:17px;line-height:1.28;font-weight:700;color:var(--lpg-ink);
}
.lpg-iw-stone{
  margin:4px 0 0 !important;
  font-size:14px;line-height:1.4;color:var(--lpg-mute);
}
.lpg-iw-cta{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:13px;padding:8px 15px;
  background:var(--lpg-green);color:#fff !important;
  border-radius:7px;text-decoration:none !important;
  font-size:13.5px;font-weight:700;line-height:1;
  transition:background-color .15s ease;
}
.lpg-iw-cta:hover,.lpg-iw-cta:focus{background:#356a1b;color:#fff !important}
/* Google moves focus into the bubble when it opens, so on a plain mouse
   click the browser was drawing its own heavy black outline:5px auto
   around the button. Replaced with a ring in the site's own colours,
   and suppressed entirely when the focus did not come from the
   keyboard. */
.lpg-iw-cta:focus{
  outline:none !important;
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--lpg-blue);
}
.lpg-iw-cta:focus:not(:focus-visible){box-shadow:none}
.lpg-iw-arrow{
  font-size:15px;line-height:1;
  transition:transform .15s ease;
}
.lpg-iw-cta:hover .lpg-iw-arrow{transform:translateX(2px)}

@media (max-width:480px){
  .gm-style .gm-style-iw-c{max-width:250px !important}
  .lpg-iw-photo{height:94px}
  .lpg-iw-body{padding:12px 15px 13px;padding-right:40px}
  .lpg-iw-title{font-size:16px}
}

/* =====================================================================
   14. SEARCH RESULTS — /search-locations/
   ---------------------------------------------------------------------
   The results arrived as a default DataTables table: two columns of
   flat 14px text, alternating stripes, and a second column that was
   the same words — "Click for full details" — repeated once per row.
   The controls above it were unstyled browser defaults, including a
   360px-wide "Show entries" select.

   The row markup is rebuilt in lpg_v2_list_pages(), which turns the
   building name itself into the link and demotes the second column to
   a chevron pointing at the same place. This styles that, the table
   around it, and DataTables' own furniture.

   Class names beginning .dataTables_ are DataTables 1.13's own. They
   have been stable across the whole 1.x line, but they are the
   library's, not ours.
   ===================================================================== */

/* ---- 14a. the page heading ---- */
/* The parent theme renders headings inline-block with a 1px #333 rule
   under them, which on a promoted <h1> reads as a stray underline
   floating above the page. */
body.page-template-page-search-results h1,
body.page-template-page-submit-a-location h1{
  display:block;border:0;padding:0;
  margin:0 0 4px;
  font-size:28px;line-height:1.2;font-weight:700;color:var(--lpg-ink);
}

@media (max-width:767px){
  body.page-template-page-search-results h1,
  body.page-template-page-submit-a-location h1{font-size:23px}
}

/* ---- 14b. the toolbar above the table ---- */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  font-size:13.5px;color:var(--lpg-mute);padding-bottom:14px;
}
.dataTables_wrapper .dataTables_length select{
  width:auto;min-width:74px;height:34px;
  margin:0 6px;padding:0 8px;
  border:1px solid var(--lpg-rule);border-radius:6px;
  background:#fff;color:var(--lpg-ink);font-size:13.5px;
}
.dataTables_wrapper .dataTables_filter input{
  width:210px;height:34px;
  margin-left:8px;padding:0 11px;
  border:1px solid var(--lpg-rule);border-radius:6px;
  background:#fff;color:var(--lpg-ink);font-size:14px;
}
.dataTables_wrapper .dataTables_filter input:focus{
  outline:none;border-color:var(--lpg-blue);
  box-shadow:0 0 0 3px rgba(62,115,164,.18);
}

/* ---- 14bb. line the table up with the heading ----
   The template drops the table into col-md-10 col-md-offset-1, so it
   sat inset by one grid column from the <h1> above it. */
body.page-template-page-search-results .col-md-10.col-md-offset-1{
  width:100%;margin-left:0;
}

/* The content column butts straight up against the Categories sidebar
   with no gutter at all — the heading always did, and the table now
   does too because it is aligned with the heading. This is the gap
   that should have been there. */
@media (min-width:768px){
  body.page-template-page-search-results .col-sm-9,
  body.page-template-page-submit-a-location .col-sm-9{padding-left:32px !important}
}

/* ---- 14c. the table ---- */
#example{width:100% !important;border-collapse:collapse}

#example thead th{
  padding:0 0 9px !important;
  border-bottom:2px solid var(--lpg-rule) !important;
  background:none !important;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--lpg-mute);
  text-align:left;
}
#example thead th:last-child{text-align:right;padding-right:4px !important}
#example thead th:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:-3px}

/* DataTables stripes off — a hairline per row reads better and lets the
   hover state do the work of showing which row you are on.
   NOTE: 1.13 draws both the stripe and its own hover as a 9999px inset
   box-shadow on the CELL, not as a background, so background:none does
   nothing on its own. The shadow has to go first. */
#example.dataTable > tbody > tr > *,
#example.dataTable > tbody > tr:hover > *{box-shadow:none !important}
#example tbody tr,
#example tbody tr.odd,
#example tbody tr.even{background:none !important}
#example tbody td{
  padding:0 !important;border:0 !important;
  border-bottom:1px solid var(--lpg-rule) !important;
  background:none !important;vertical-align:middle;
}
/* The whole row is already one big hit area — the name link fills the
   first cell and the chevron link fills the second, verified at 100%
   coverage across the row. What it lacked was the affordance: nothing
   told you so until the pointer was over the name itself. Now hovering
   anywhere on the row lights the row, underlines the name and moves
   the chevron, and :focus-within does the same for the keyboard. */
#example tbody tr:hover td,
#example tbody tr:focus-within td{background:#f2f6f8 !important}
#example tbody tr:hover .lpg-res-name,
#example tbody tr:focus-within .lpg-res-name{
  color:var(--lpg-blue);text-decoration:underline;
}
#example tbody tr:hover .lpg-res-thumb{filter:brightness(1.05)}
#example tbody tr:last-child td{border-bottom:0 !important}

/* ---- 14d. the row itself ---- */
.lpg-res-link{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px 11px 4px;
  text-decoration:none !important;color:inherit;
}

/* The record's own photograph. Sized in the markup as well as here so
   the rows do not jump as lazily-loaded images arrive, and left in
   place rather than collapsed when a file is missing, so the text
   column stays aligned all the way down. */
.lpg-res-thumb{
  display:block;flex:0 0 auto;
  width:72px;height:54px;
  object-fit:cover;object-position:50% 45%;
  border-radius:6px;background:#e5e9ec;
}
.lpg-res-thumb.is-empty{background:#eef1f3}
.lpg-res-text{display:block;min-width:0}
.lpg-res-name{
  display:block;
  font-size:15.5px;line-height:1.3;font-weight:600;color:var(--lpg-ink);
}
.lpg-res-link:hover .lpg-res-name,
.lpg-res-link:focus .lpg-res-name{color:var(--lpg-blue);text-decoration:underline}
.lpg-res-stone{
  display:block;margin-top:2px;
  font-size:13.5px;line-height:1.35;color:var(--lpg-mute);
}

/* Third line: category, nearest station, geological age. The values come
   from the database in lpg_v2_list_pages() — the results template never
   printed them, though its own query had already fetched them.

   Deliberately display:block with an inline-block dot rather than flex:
   the line is assembled from text nodes carrying their own " · "
   separators, and in a flex container each of those becomes its own
   anonymous flex item, which mangles the spacing. */
.lpg-res-meta{
  display:block;margin-top:4px;
  font-size:12.5px;line-height:1.35;color:var(--lpg-mute);
}
.lpg-res-dot{
  display:inline-block;width:8px;height:8px;
  border-radius:50%;margin-right:6px;vertical-align:1px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.lpg-res-link:focus-visible{
  outline:3px solid var(--lpg-blue);outline-offset:-3px;border-radius:4px;
}

/* The chevron. Its own link so the right-hand side of the row is
   clickable, but out of the tab order and hidden from screen readers —
   the name link beside it already goes to the same place. */
/* The chevron fills its cell absolutely rather than at a fixed height,
   because the row height now depends on how many of the three text
   lines a record actually has. */
#example tbody td:last-child{position:relative}
.lpg-res-go{
  display:block;position:absolute;
  top:0;right:0;bottom:0;left:0;
  text-decoration:none !important;
}
.lpg-res-go::after{
  content:"";position:absolute;top:50%;right:8px;
  width:8px;height:8px;margin-top:-4px;
  border-right:2px solid #aeb7bd;border-bottom:2px solid #aeb7bd;
  transform:rotate(-45deg);
  transition:border-color .15s ease, right .15s ease;
}
#example tbody tr:hover .lpg-res-go::after{
  border-color:var(--lpg-green);right:5px;
}

/* ---- 14e. the pager and the count ---- */
.dataTables_wrapper .dataTables_info{
  padding-top:16px;font-size:13px;color:var(--lpg-mute);
}
.dataTables_wrapper .dataTables_paginate{padding-top:14px}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  min-width:34px;padding:6px 10px !important;margin:0 2px !important;
  border:1px solid transparent !important;border-radius:6px !important;
  background:none !important;
  color:var(--lpg-ink) !important;
  font-size:13.5px;line-height:1.2;cursor:pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#eef1f3 !important;border-color:var(--lpg-rule) !important;
  color:var(--lpg-ink) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--lpg-blue) !important;
  border-color:var(--lpg-blue) !important;
  color:#fff !important;font-weight:700;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  background:none !important;border-color:transparent !important;
  color:#a9b1b7 !important;cursor:default;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible{
  outline:3px solid var(--lpg-blue);outline-offset:1px;
}

/* DataTables sets color:#333 !important on the pager buttons, and its
   stylesheet is emitted in the body — after this one — so a matching
   class chain loses on source order. The wrapper's id wins.
   Without this the current page was dark ink on the blue fill: 3.03:1,
   under AA. With it, white on blue is 5.01. */
#example_wrapper .dataTables_paginate .paginate_button,
#example_wrapper .dataTables_paginate .paginate_button:hover{
  color:var(--lpg-ink) !important;
}
#example_wrapper .dataTables_paginate .paginate_button.current,
#example_wrapper .dataTables_paginate .paginate_button.current:hover{
  color:#fff !important;
}
#example_wrapper .dataTables_paginate .paginate_button.disabled,
#example_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  color:#a9b1b7 !important;
}

@media (max-width:600px){
  .dataTables_wrapper .dataTables_filter input{width:100%;margin:6px 0 0}
  .dataTables_wrapper .dataTables_filter{float:none;text-align:left}
  .dataTables_wrapper .dataTables_length{float:none}
  .lpg-res-name{font-size:15px}
  .lpg-res-link{gap:11px;padding:10px 12px 10px 2px}
  .lpg-res-thumb{width:56px;height:42px}
  .lpg-res-meta{font-size:12px}
  #example thead th:last-child{width:34px}
}

/* =====================================================================
   15. BROWSABLE INDEX — /browse/
   ---------------------------------------------------------------------
   Markup built in functions.php (see the BROWSABLE INDEX block). Three
   views share this section: the hub (A-Z grid plus category cards), a
   letter page and a category page (both a long list of records).

   The body class lpg-browse-page is added by the child theme rather
   than relying on page-id-490, because the page will have a different
   id on production.

   The list deliberately reuses the visual language of the search
   results in section 14 — same name size, same muted meta line, same
   category dot — so a reader who arrives from either route sees one
   site rather than two.
   ===================================================================== */

/* ---- 15a. headings ---- */
/* Parent theme renders headings inline-block with a 1px rule under
   them, which reads as a stray floating underline. */
body.lpg-browse-page article h1{
  display:block;border:0;padding:0;
  margin:0 0 6px;
  font-size:28px;line-height:1.2;font-weight:700;color:var(--lpg-ink);
  text-transform:none;
}

/* No sidebar on this template, so the 9-column article leaves a quarter
   of the container empty. The A-Z grid and the listing both want it. */
@media (min-width:768px){
  body.lpg-browse-page article[class*="col-"]{width:100%}
}
body.lpg-browse-page article h2.lpg-bh{
  display:block;border:0;padding:0;
  margin:28px 0 12px;
  font-size:13px;line-height:1.2;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--lpg-mute);
}

@media (max-width:767px){
  body.lpg-browse-page article h1{font-size:23px}
}

.lpg-bcrumb{margin:0 0 12px;font-size:13px;color:var(--lpg-mute)}
.lpg-bcrumb a{
  color:var(--lpg-mute);text-decoration:none;
  border-bottom:1px solid var(--lpg-rule);
}
.lpg-bcrumb a:hover,
.lpg-bcrumb a:focus{color:var(--lpg-blue);border-bottom-color:var(--lpg-blue)}
.lpg-bcrumb span{margin:0 8px;color:#b8bfc5}

.lpg-btot{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--lpg-mute)}
.lpg-btot strong{color:var(--lpg-ink);font-weight:700}

.lpg-bmore{margin:26px 0 0;font-size:14px;color:var(--lpg-mute)}
.lpg-bi-none{margin:20px 0 0;font-size:15px;color:var(--lpg-mute)}

/* ---- 15b. the A-Z grid ---- */
.lpg-bz ul{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));
  gap:8px;margin:0;padding:0;list-style:none;
}
.lpg-bz a,
.lpg-bz-off{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;min-height:58px;
  border:1px solid var(--lpg-rule);border-radius:8px;background:#fff;
  font-size:19px;line-height:1;font-weight:700;
  text-decoration:none !important;color:var(--lpg-ink);
}
.lpg-bz a:hover{border-color:var(--lpg-blue);background:#f4f8fb;color:var(--lpg-blue)}
.lpg-bz a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-bz-n{font-size:11.5px;font-weight:500;color:var(--lpg-mute)}
.lpg-bz a:hover .lpg-bz-n{color:var(--lpg-blue)}
.lpg-bz a.lpg-bz-on{background:var(--lpg-blue);border-color:var(--lpg-blue);color:#fff}
.lpg-bz a.lpg-bz-on .lpg-bz-n{color:#eaf1f7}
.lpg-bz-off{background:var(--lpg-sand);color:var(--lpg-mute);font-weight:600}

/* ---- 15c. the category cards ---- */
.lpg-bc ul{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
  gap:10px;margin:0;padding:0;list-style:none;
}
.lpg-bc-a{
  display:grid;grid-template-columns:12px 1fr;gap:2px 9px;align-items:center;
  padding:13px 15px;
  border:1px solid var(--lpg-rule);border-radius:9px;background:#fff;
  text-decoration:none !important;
}
.lpg-bc-a:hover{border-color:var(--lpg-blue);background:#f4f8fb}
.lpg-bc-a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-bc-dot{
  width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.lpg-bc-name{font-size:15.5px;line-height:1.25;font-weight:600;color:var(--lpg-ink)}
.lpg-bc-n{grid-column:2;font-size:12.5px;line-height:1.3;color:var(--lpg-mute)}
.lpg-bc-a:hover .lpg-bc-name{color:var(--lpg-blue)}
.lpg-bc-a.lpg-bc-on{border-color:var(--lpg-blue);box-shadow:inset 0 0 0 1px var(--lpg-blue)}

/* ---- 15d. the list itself ---- */
.lpg-bl{
  margin:22px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--lpg-rule);
}
.lpg-bi{border-bottom:1px solid var(--lpg-rule)}
.lpg-bi-a{
  display:block;padding:12px 14px 12px 3px;
  text-decoration:none !important;color:inherit;
}
.lpg-bi-a:hover{background:#f6f9fb}
.lpg-bi-a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:-3px}
.lpg-bi-name{
  display:block;
  font-size:15.5px;line-height:1.3;font-weight:600;color:var(--lpg-ink);
}
.lpg-bi-a:hover .lpg-bi-name,
.lpg-bi-a:focus .lpg-bi-name{color:var(--lpg-blue);text-decoration:underline}
.lpg-bi-sub{
  display:block;margin-top:2px;
  font-size:13.5px;line-height:1.35;color:var(--lpg-mute);
}
.lpg-bi-meta{
  display:block;margin-top:4px;
  font-size:12.5px;line-height:1.35;color:var(--lpg-mute);
}
.lpg-bi-dot{
  display:inline-block;width:8px;height:8px;
  border-radius:50%;margin-right:6px;vertical-align:1px;
  box-shadow:0 0 0 2px rgba(255,255,255,.9);
}
.lpg-bi-sep{margin:0 7px;color:#b8bfc5}

/* ---- 15e. pagination ---- */
.lpg-bp{margin:22px 0 0}
.lpg-bp ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.lpg-bp a,
.lpg-bp-on{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 11px;
  border:1px solid var(--lpg-rule);border-radius:6px;background:#fff;
  font-size:14px;line-height:1;text-decoration:none !important;color:var(--lpg-ink);
}
.lpg-bp a:hover{border-color:var(--lpg-blue);background:#f4f8fb;color:var(--lpg-blue)}
.lpg-bp a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-bp-on{
  background:var(--lpg-blue);border-color:var(--lpg-blue);
  color:#fff;font-weight:700;
}

@media (max-width:600px){
  .lpg-bz ul{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px}
  .lpg-bz a,.lpg-bz-off{min-height:50px;font-size:17px}
  .lpg-bc ul{grid-template-columns:1fr 1fr}
  .lpg-bi-name{font-size:15px}
  .lpg-bi-meta{font-size:12px}
}

/* ---- 15f. axis pills on the hub ---- */
.lpg-bpills{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.lpg-bpills a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;
  border:1px solid var(--lpg-rule);border-radius:999px;background:#fff;
  font-size:13.5px;line-height:1.2;
  text-decoration:none !important;color:var(--lpg-ink);
}
.lpg-bpills a:hover{border-color:var(--lpg-blue);background:#f4f8fb;color:var(--lpg-blue)}
.lpg-bpills a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-bpill-n{
  font-size:11.5px;color:var(--lpg-mute);
  font-variant-numeric:tabular-nums;
}
.lpg-bpills a:hover .lpg-bpill-n{color:var(--lpg-blue)}
.lpg-bpill-all{
  border-style:dashed !important;
  color:var(--lpg-blue) !important;font-weight:600;
}

/* ---- 15g. an axis index: /browse/stone/, /browse/near/ etc ---- */
/* Multi-column flow, not a grid: with a grid every row is as tall as
   its tallest group, so a 54-item C beside a 7-item A left a hole the
   height of the difference. Columns balance instead. */
.lpg-bx{
  margin:18px 0 0;
  column-width:268px;column-gap:38px;
}
.lpg-bx-g{break-inside:avoid;page-break-inside:avoid}
body.lpg-browse-page article h2.lpg-bx-h{
  display:block;padding:0 0 5px;
  margin:20px 0 2px;
  border:0;border-bottom:2px solid var(--lpg-ink);
  font-size:14px;line-height:1.2;font-weight:700;
  letter-spacing:.04em;color:var(--lpg-ink);
}
.lpg-bx-g:first-child h2.lpg-bx-h{margin-top:0}
.lpg-bx-g ul{margin:0;padding:0;list-style:none}
.lpg-bx-g li{border-bottom:1px solid var(--lpg-rule)}
.lpg-bx-g a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:7px 2px;
  font-size:14px;line-height:1.35;
  text-decoration:none !important;color:var(--lpg-ink);
}
.lpg-bx-g a:hover{color:var(--lpg-blue)}
.lpg-bx-g a:hover .lpg-bx-v{text-decoration:underline}
.lpg-bx-g a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:-3px}
.lpg-bx-n{
  flex:0 0 auto;
  font-size:12px;color:var(--lpg-mute);
  font-variant-numeric:tabular-nums;
}

/* ---- 15h. other ways to browse ---- */
.lpg-bw{margin:34px 0 0;padding-top:20px;border-top:1px solid var(--lpg-rule)}
body.lpg-browse-page article .lpg-bw h2.lpg-bh{margin-top:0}
.lpg-bw ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lpg-bw a{
  display:inline-block;padding:8px 14px;
  border:1px solid var(--lpg-rule);border-radius:7px;background:#fff;
  font-size:13.5px;line-height:1.3;
  text-decoration:none !important;color:var(--lpg-ink);
}
.lpg-bw a:hover{border-color:var(--lpg-blue);background:#f4f8fb;color:var(--lpg-blue)}
.lpg-bw a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}

@media (max-width:600px){
  .lpg-bx{grid-template-columns:1fr;gap:0}
  .lpg-bpills a{font-size:13px;padding:6px 11px}
}

/* =====================================================================
   16. SHARE THIS FIND — the share unit on record pages
   ---------------------------------------------------------------------
   Markup built in lpg_v2_record_share(). It sits inside .lpg-rec-head,
   under the category pills, because that is the moment the page has
   just delivered its point: this wall is a Jurassic sea floor, and the
   reader is probably standing near it.

   Text labels, not brand logos. The site carries no icon font and no
   third-party assets by design (see section 22 in the handover), and
   labelled pills read better on a page that is otherwise text-forward.
   ===================================================================== */

.lpg-rec-share{
  margin:22px 0 0;padding:16px 18px 14px;
  border:1px solid var(--lpg-rule);border-radius:11px;
  background:var(--lpg-sand);
}
.lpg-rec-share-lead{
  margin:0 0 12px;
  font-size:14.5px;line-height:1.5;color:#54636e;
}
.lpg-rec-share-hook{color:var(--lpg-ink);font-weight:700}

.lpg-rec-share-btns{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;padding:0;list-style:none;
}
/* The parent theme's elements.css carries a bare-element rule:
   button{width:10%;height:45px;background-color:peru;font-family:Raleway}
   which squashed the two <button>s to 30px and wrapped their labels
   over four lines while the <a>s beside them were fine. width, height,
   white-space and font are therefore declared here rather than left to
   the default -- do not remove them. The class beats the element
   selector on specificity, so no !important is needed. */
.lpg-sh{
  display:inline-flex;align-items:center;gap:7px;
  width:auto;height:auto;flex:0 0 auto;
  padding:8px 14px;
  border:1px solid var(--lpg-rule);border-radius:999px;
  background:#fff;color:var(--lpg-ink);
  font:inherit;font-size:13.5px;line-height:1.2;font-weight:600;
  white-space:nowrap;
  text-decoration:none !important;cursor:pointer;
}
.lpg-sh:hover{border-color:var(--lpg-blue);background:#f4f8fb;color:var(--lpg-blue)}
.lpg-sh:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-sh-go{
  border-color:var(--lpg-green);background:var(--lpg-green);color:#fff;
}
.lpg-sh-go:hover{
  border-color:#2f6417;background:#2f6417;color:#fff;
}
.lpg-sh-go svg{flex:0 0 auto}

.lpg-rec-share-status{
  margin:10px 0 0;min-height:1.2em;
  font-size:13px;line-height:1.3;color:var(--lpg-green);font-weight:600;
}

@media (max-width:600px){
  .lpg-rec-share{padding:14px 14px 12px;border-radius:10px}
  .lpg-rec-share-lead{font-size:14px}
  .lpg-sh{padding:9px 13px;font-size:13px}
}

/* ---- 16a. the message, collapsed ---- */
.lpg-rec-share-more{margin:10px 0 0}
.lpg-rec-share-more > summary{
  display:inline-block;cursor:pointer;
  font-size:13px;line-height:1.3;color:#54636e;
  text-decoration:underline;text-underline-offset:2px;
}
.lpg-rec-share-more > summary:hover{color:var(--lpg-blue)}
.lpg-rec-share-more > summary:focus-visible{
  outline:3px solid var(--lpg-blue);outline-offset:2px;
}
.lpg-rec-share-msg{
  margin:10px 0 2px;padding:12px 14px;
  border-left:3px solid var(--lpg-rule);
  font-size:14px;line-height:1.55;color:#3c4a55;
}
.lpg-rec-share-url{
  display:inline-block;margin-top:4px;
  font-size:12.5px;color:var(--lpg-mute);word-break:break-all;
}

/* =====================================================================
   17. PROSE PAGES — /further-reading/, /useful-links/, /about/,
       /a-little-history…/, /mobileapp/, /contact/ and the policies
   ---------------------------------------------------------------------
   Every one of these uses the parent theme's default page template,
   which had no typographic treatment. Measured before this section:
   14px copy on an 848px measure (about 145 characters a line) at 1.43
   line-height, a 20px weight-500 <h1> with a hairline rule under the
   text, and a quarter of the container empty because the template has
   no sidebar.

   The fix is ordinary book typography: reclaim the empty column, then
   cap the MEASURE rather than the column. That is why there is white
   space to the right of the paragraphs -- it is the measure doing its
   job, not a layout fault.

   Structural changes that CSS could not make -- the <br> runs, the
   stray <hr>, the empty paragraphs -- are in lpg_v2_prose().
   ===================================================================== */

/* ---- 17a. layout ---- */
/* No sidebar on this template, so the article takes the full container
   and the text is held to a measure instead. */
@media (min-width:768px){
  body.page-template-default article[class*="col-"]{width:100%;float:none}
}
body.page-template-default article{padding-top:38px;padding-bottom:18px}

body.page-template-default article > *{max-width:72ch}
/* Things that are not running text keep the full width. */
body.page-template-default article > table,
body.page-template-default article > div,
body.page-template-default article > center,
body.page-template-default article > img,
body.page-template-default article > figure{max-width:none}
/* Citations are long; they get a wider measure than prose. */
body.page-template-default article > ul.lpg-refs{max-width:88ch}

/* ---- 17b. the page title ---- */
/* Was inline-block with border-bottom, so the rule ran under the words
   and stopped. */
/* text-transform:none matters: the parent theme capitalises every
   heading, which turned "The Survey of London" into "The Survey Of
   London" and would do the same to "A little history about this
   project". Ruth's own capitalisation is the correct one. */
body.page-template-default article > h1,
body.page-template-default article > h3,
body.page-template-default article h2.lpg-prose-h{
  text-transform:none;
}
body.page-template-default article > h1{
  display:block;border:0;padding:0;
  margin:0 0 24px;
  font-size:34px;line-height:1.14;font-weight:700;
  letter-spacing:-.4px;color:var(--lpg-ink);
}

/* ---- 17c. body copy ---- */
body.page-template-default article,
body.page-template-default article p,
body.page-template-default article li,
body.page-template-default article td,
body.page-template-default article th{
  font-size:17px;line-height:1.65;color:#2f373d;
}
body.page-template-default article > p{margin:0 0 19px}
body.page-template-default article > p:first-of-type{margin-top:0}

/* ---- 17d. the subheads ---- */
/* These pages use <p><strong>…</strong></p> as a heading. It is styled
   as one rather than rewriting content Ruth maintains by hand. The
   h2.lpg-prose-h is the same thing promoted to a real heading by
   lpg_v2_prose() when it led a <br> run. */
body.page-template-default article > p > strong:only-child,
body.page-template-default article > p > b:only-child,
body.page-template-default article h2.lpg-prose-h{
  display:block;
  font-size:19px;line-height:1.3;font-weight:700;
  letter-spacing:-.1px;color:var(--lpg-ink);
}
body.page-template-default article > p:has(> strong:only-child),
body.page-template-default article > p:has(> b:only-child){margin:36px 0 13px}
body.page-template-default article h2.lpg-prose-h{
  border:0;padding:0;margin:36px 0 13px;max-width:72ch;
}
body.page-template-default article > h1 + p:has(> strong:only-child){margin-top:0}

/* ---- 17e. h3, used on the policy pages ---- */
body.page-template-default article > h3{
  display:block;border:0;padding:0;
  margin:32px 0 11px;
  font-size:20px;line-height:1.25;font-weight:700;color:var(--lpg-ink);
}

/* ---- 17f. links ---- */
/* #3e73a4 measured 4.6:1 on white. This is 6:1, and underlined, since
   a bare colour change is not a link indicator on its own. Raw URLs are
   used as link text on these pages, hence overflow-wrap. */
body.page-template-default article p a,
body.page-template-default article li a{
  color:#2f6390;
  text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:#9dbad3;
  overflow-wrap:anywhere;
}
body.page-template-default article p a:hover,
body.page-template-default article li a:hover{
  color:var(--lpg-ink);text-decoration-color:currentColor;
}

/* ---- 17g. ordinary lists ---- */
body.page-template-default article > ul:not(.lpg-refs),
body.page-template-default article > ol{margin:0 0 19px;padding-left:24px}
body.page-template-default article > ul:not(.lpg-refs) li,
body.page-template-default article > ol li{margin:0 0 8px}

/* ---- 17h. the reference list ---- */
/* Hanging indent, so a citation that wraps is obviously one entry, and
   a rule between entries so the eye can find the boundaries. Built by
   lpg_v2_prose() out of an 85-<br> paragraph. */
.lpg-refs{
  margin:0 0 30px;padding:0;list-style:none;
}
.lpg-refs li{
  padding:9px 0 9px 28px;text-indent:-28px;
  border-bottom:1px solid var(--lpg-rule);
  font-size:15.5px;line-height:1.5;color:#3c4750;
}
.lpg-refs li:first-child{padding-top:2px}
.lpg-refs li:last-child{border-bottom:0}

@media (max-width:767px){
  body.page-template-default article{padding-top:26px}
  body.page-template-default article > h1{font-size:26px;margin-bottom:18px}
  body.page-template-default article,
  body.page-template-default article p,
  body.page-template-default article li{font-size:16px;line-height:1.6}
  body.page-template-default article > p > strong:only-child,
  body.page-template-default article > p > b:only-child,
  body.page-template-default article h2.lpg-prose-h{font-size:17.5px}
  body.page-template-default article > h3{font-size:18px}
  .lpg-refs li{padding-left:20px;text-indent:-20px;font-size:15px}
}

/* ---- 17i. headings nested inside content divs ---- */
/* /a-little-history…/ and /about/ wrap their sections in <div>, so the
   headings are not direct children of <article> and missed 17b-17e. */
body.page-template-default article h2:not(.lpg-prose-h),
body.page-template-default article div h3{
  display:block;border:0;padding:0;
  text-transform:none;
  color:var(--lpg-ink);
}
body.page-template-default article h2:not(.lpg-prose-h){
  margin:34px 0 12px;
  font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.2px;
}
body.page-template-default article div h3{
  margin:30px 0 11px;
  font-size:20px;line-height:1.25;font-weight:700;
}

/* 17j WAS a display:block/content:"" hack on <br> to fake paragraph
   spacing. It was removed: the trick is unreliable -- a <br> has no
   block box, so the margin had no effect in Chrome -- and the real
   problem was structural. Runs of soft breaks that are actually
   sentences now become real paragraphs in lpg_v2_prose_para(), which
   needs no CSS at all. */

/* ---- 17k. paragraphs nested inside content divs ---- */
/* /a-little-history…/ and /about/ wrap their body copy in <div>, so
   "article > p" missed it: those paragraphs kept the parent theme's
   10px margin and ran to the full 875px column while the top of the
   same page sat at a 72ch measure. Applied to every <p> in the article
   instead, with the child theme's own components opted out because they
   carry their own layout. */
body.page-template-default article p{
  max-width:72ch;
  margin:0 0 19px;
}
body.page-template-default article > p:first-of-type{margin-top:0}
body.page-template-default article .lpg-people p,
body.page-template-default article .lpg-credit p,
body.page-template-default article .lpg-tbl p,
body.page-template-default article table p{
  max-width:none;
  margin:0 0 10px;
}

/* ---- 17l. bare <div> used as a paragraph ---- */
/* /a-little-history…/ writes each paragraph of Dave's and Ruth's story
   as an unclassed <div>, not a <p>. They therefore had margin 0 and no
   measure, so three consecutive sentences ran together at the full 1140
   px column width while the top of the same page sat at 72ch.
   :not([class]) is what keeps this off .lpg-people, .lpg-credit and any
   other component that carries its own layout. */
body.page-template-default article > div:not([class]){
  max-width:72ch;
  margin:0 0 19px;
}
body.page-template-default article > div:not([class]):empty{display:none}

/* ---- 17m. the pointer to Ruth's walks page ---- */
.lpg-walks-note{
  margin:0 0 4px !important;
  padding:12px 15px;
  border-left:3px solid var(--lpg-green);
  background:var(--lpg-sand);
  font-size:15px;line-height:1.5;
}

/* =====================================================================
   18. RUTH'S WALKS PAGE — /ruth-siddalls-urban-geology-walks/
   ---------------------------------------------------------------------
   Markup in lpg_v2_walks_widgets(). The page keeps the prose typography
   of section 17 for its intro, then breaks out of the measure for the
   card grids -- the intro is for reading, the cards are for scanning.

   Accent colours come from the ICS timescale tokens already in section
   1, passed in as --ac per card, so this page belongs to the same
   palette as the home page era table and the category dots.
   ===================================================================== */

body.lpg-walks-page article > .lpg-walks{max-width:none}
.lpg-walks{margin:0}

/* ---- 18a. the intro keeps a reading measure ---- */
.lpg-w-lede{max-width:66ch}
.lpg-w-lede p{margin:0 0 17px}
.lpg-w-lede p:first-child{font-size:19px;line-height:1.55;color:var(--lpg-ink)}

/* ---- 18b. section headings ---- */
body.lpg-walks-page article h2.lpg-w-h{
  display:block;border:0;padding:0;
  margin:38px 0 15px;max-width:none;
  font-size:13px;line-height:1.2;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--lpg-mute);
}

/* ---- 18c. the number strip ---- */
.lpg-w-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin:26px 0 0;padding:0;list-style:none;
  background:var(--lpg-rule);
  border:1px solid var(--lpg-rule);border-radius:10px;overflow:hidden;
}
.lpg-w-stats li{background:#fff;padding:17px 18px}
.lpg-w-stats b{
  display:block;
  font-size:29px;line-height:1.05;font-weight:700;
  letter-spacing:-.5px;color:var(--lpg-ink);
}
.lpg-w-stats span{
  display:block;margin-top:5px;
  font-size:12.5px;line-height:1.35;color:var(--lpg-mute);
}

/* ---- 18d. region cards ---- */
.lpg-w-regions{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:11px;margin:0;padding:0;list-style:none;
}
.lpg-w-regions a{
  display:block;height:100%;
  padding:15px 16px 16px;
  border:1px solid var(--lpg-rule);border-top:3px solid var(--ac,var(--lpg-blue));
  border-radius:9px;background:#fff;
  text-decoration:none !important;
}
.lpg-w-regions a:hover{border-color:var(--lpg-blue);background:#f6f9fb}
.lpg-w-regions a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-w-n{
  display:block;
  font-size:25px;line-height:1;font-weight:700;
  letter-spacing:-.5px;color:var(--lpg-ink);
}
.lpg-w-t{
  display:block;margin-top:6px;
  font-size:15px;line-height:1.3;font-weight:600;color:var(--lpg-ink);
}
.lpg-w-d{
  display:block;margin-top:5px;
  font-size:13px;line-height:1.4;color:var(--lpg-mute);
}

/* ---- 18e. the five picks ---- */
.lpg-w-picks{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:12px;margin:0;padding:0;list-style:none;
}
.lpg-w-picks a{
  display:flex;flex-direction:column;height:100%;
  padding:16px 17px 15px;
  border:1px solid var(--lpg-rule);border-radius:10px;
  background:var(--lpg-sand);
  text-decoration:none !important;
}
.lpg-w-picks a:hover{border-color:var(--lpg-green);background:#f2f6ee}
.lpg-w-picks a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-w-no{
  display:inline-block;align-self:flex-start;
  padding:2px 8px;margin-bottom:9px;
  border-radius:999px;background:var(--lpg-deep);
  font-size:11px;font-weight:700;letter-spacing:.05em;color:#fff;
}
/* .lpg-w-pt, not .lpg-w-h: the section headings already own that name
   and a card title is not a section heading. */
.lpg-w-picks .lpg-w-pt{
  display:block;margin:0 0 7px;
  font-size:16.5px;line-height:1.3;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--lpg-ink);
}
.lpg-w-p{
  display:block;flex:1 1 auto;
  font-size:13.5px;line-height:1.45;color:#54636e;
}
.lpg-w-go{
  display:block;margin-top:12px;
  font-size:13px;font-weight:700;color:var(--lpg-green);
}
.lpg-w-picks a:hover .lpg-w-go{color:#2f6417}

/* ---- 18f. the two-up ---- */
.lpg-w-two{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
}
.lpg-w-half{
  padding:19px 20px;
  border:1px solid var(--lpg-rule);border-radius:10px;background:#fff;
}
.lpg-w-half-a{border-left:4px solid var(--ics-jur)}
.lpg-w-half-b{border-left:4px solid var(--lpg-green)}
body.lpg-walks-page article .lpg-w-half h3{
  display:block;border:0;padding:0;
  margin:0 0 9px;
  font-size:17px;line-height:1.3;font-weight:700;
  text-transform:none;color:var(--lpg-ink);
}
.lpg-w-half p{margin:0 0 11px;font-size:14.5px;line-height:1.55;color:#54636e}
.lpg-w-half-go{margin:0 !important;font-weight:700}
.lpg-w-half-go a{font-size:14px}

/* ---- 18g. her terms ---- */
.lpg-w-terms{
  margin:32px 0 0;padding:18px 20px;
  border:1px solid #e0d9c6;border-radius:10px;
  background:#fbf7ec;
}
body.lpg-walks-page article .lpg-w-terms h3{
  display:block;border:0;padding:0;
  margin:0 0 8px;
  font-size:15px;line-height:1.3;font-weight:700;
  text-transform:none;color:var(--lpg-ink);
}
.lpg-w-terms p{margin:0;font-size:14.5px;line-height:1.6;color:#4a4433}

/* ---- 18h. her own pages ---- */
.lpg-w-links ul{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));
  gap:9px;margin:0;padding:0;list-style:none;
}
.lpg-w-links a{
  display:block;padding:13px 15px;
  border:1px solid var(--lpg-rule);border-radius:8px;background:#fff;
  text-decoration:none !important;
}
.lpg-w-links a:hover{border-color:var(--lpg-blue);background:#f4f8fb}
.lpg-w-links a:focus-visible{outline:3px solid var(--lpg-blue);outline-offset:2px}
.lpg-w-lt{display:block;font-size:14.5px;font-weight:600;color:var(--lpg-blue)}
.lpg-w-ld{display:block;margin-top:3px;font-size:12.5px;color:var(--lpg-mute)}

@media (max-width:600px){
  .lpg-w-stats{grid-template-columns:1fr 1fr}
  .lpg-w-stats b{font-size:24px}
  .lpg-w-lede p:first-child{font-size:17.5px}
  body.lpg-walks-page article h2.lpg-w-h{margin-top:30px}
}


   /* LPG map-control width fix (2 Oct 2026): parent theme's bare button{width:10%} squashed Google's Map/Satellite buttons */
   .gm-style button{width:auto}