/* The listing landing page. Its own file rather than a block inside
   style.css, because that one holds the document still (html,body
   overflow:hidden) so a full-screen map cannot scroll — and a page a search
   engine indexes has to. Same palette, nothing else shared. */

:root {
  --ink: #1a1f1c;
  --ink-soft: #4b544e;
  --paper: #f6f4ee;
  --surface: #ffffff;
  --line: #e1ddd0;
  --forest: #1b4332;
  --brand: #1f8f4e;
  --brand-dark: #16703d;
  --clay: #c9743f;
  --star: #e2a033;
  --radius: 14px;
  /* How wide the map is. listing.js reads whatever the reader last dragged
     it to out of localStorage and writes it here before the first paint. */
  --mapw: 440px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; text-wrap: balance; margin: 0; }

/* ---------- The page, as a document ---------- */
/* style.css is loaded first so the header, the rail and the chips on this
   page are the app's own rules rather than a copy of them. Two things in it
   are written for a map and have to be undone here: the app pins the document
   still so a full-screen map cannot scroll, and a page a search engine reads
   has to scroll; and the app's base font-family is set without a size. */
html, body { height: auto; overflow: visible; }
body {
  font: 400 15px/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper);
}
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
/* The header and the rail are the app's, where nothing is underlined because
   nothing in them is prose — they are furniture. */
.topbar a, .rail a { text-decoration: none; }

/* The header is fixed, as it is in the app; listing.js measures it and writes
   --header-h, the same variable the app's rail hangs off. */
.lp-shell { padding-top: var(--header-h, 92px); }

/* The rail is this page's sections rather than the app's categories, but it
   is the app's rail: same width, same glyph buttons, same hover labels. */
.rail-btn.sec { font-size: 17px; }
.rail-btn.sec.active { background: var(--sage-light); border-color: var(--forest); }

/* ---------- Left the listing, right the map ---------- */
/* Google keeps a hotel's map on the right and the hotel on the left, and so
   does the app: the thing, and where the thing is, side by side rather than
   one behind the other. The map is fixed to the right edge for the whole
   scroll — it is the reason the site exists, and a map you have to scroll
   back up to find is a map you stop using. How much of the window each half
   deserves is the reader's call, so the edge between them drags. */
.lp-doc {
  margin-left: var(--rail-w);
  margin-right: var(--mapw, 440px);
  min-height: calc(100vh - var(--header-h, 92px));
  /* Queried by the inner grid below: what decides whether the contact card
     fits beside the listing is the width of this column, which depends on
     where the reader last left the map's edge — not the width of the window. */
  container-type: inline-size;
}
.lp-inner {
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 24px 46px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start;
}
@container (min-width: 700px) {
  .lp-inner { grid-template-columns: minmax(0, 1fr) 286px; }
}
.lp-art { min-width: 0; }
.lp-art h2 {
  font-size: 17px; margin: 28px 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;
  scroll-margin-top: calc(var(--header-h, 92px) + 12px);
}

.lp-mapwrap {
  position: fixed; top: var(--header-h, 92px); right: 0; bottom: 0;
  width: var(--mapw, 440px); z-index: 300;
  display: flex; flex-direction: column;
  background: #e9e6dc; border-left: 1px solid var(--line);
}
/* Nine pixels of nothing, straddling the edge. It draws a line only when the
   pointer is on it, so the layout is not carrying a visible handle for the
   99% of the time nobody is resizing anything. */
.lp-grip {
  position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; z-index: 5;
  cursor: col-resize; touch-action: none;
}
.lp-grip::after {
  content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background .12s;
}
.lp-grip:hover::after, .lp-grip:focus-visible::after, body.lp-dragging .lp-grip::after {
  background: var(--brand);
}
.lp-grip:focus-visible { outline: none; }
body.lp-dragging { cursor: col-resize; user-select: none; }
/* While the edge is moving, the map must not try to interpret the drag. */
body.lp-dragging .lp-map-box { pointer-events: none; }

/* ---------- Title block ---------- */
.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lp-tag {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  background: #eef3ef; color: var(--forest); padding: 4px 9px; border-radius: 999px;
}
/* The breadcrumb chips, as icons: one line instead of two, each still a link,
   each saying itself in full on hover. The verification chip keeps its words
   — it is the one of them a reader must not have to hover to read. */
.lp-tag.ico {
  width: 28px; height: 28px; padding: 0; display: inline-grid; place-items: center;
  font-size: 15px; line-height: 1; border-radius: 9px; text-transform: none;
}
a.lp-tag { color: var(--forest); }
a.lp-tag:hover { background: #e3ece5; text-decoration: none; }
.lp-tag.v-verified { background: #e3f2e9; color: var(--brand-dark); }
.lp-tag.v-approx { background: #fdf1e4; color: var(--clay); }
.lp-tag.v-unverified { background: #f1efe8; color: var(--ink-soft); }
.lp-art h1 { font-size: 30px; line-height: 1.15; }
/* The tick, on the title. Sized off the title so it scales with it, and set
   on the baseline rather than floating beside it. Green when somebody called
   the owner, clay when the place is real but nobody has. */
.lp-tick {
  display: inline-grid;
  place-items: center;
  vertical-align: 2px;
  width: .62em;
  height: .62em;
  margin-left: .2em;
  padding: 0;
  border: none;
  background: transparent;
  /* A button does not inherit the type around it, and these are em units —
     without this the tick resolves against the browser's 13.33px default and
     comes out half the size it was drawn for. */
  font-size: inherit;
  cursor: help;
}
.lp-tick svg { width: 100%; height: 100%; }
.lp-tick .vtick-svg { fill: currentColor; }
.lp-tick .vtick-mark { fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.lp-tick.v-verified { color: var(--brand); }
.lp-tick.v-approx { color: var(--clay); }
.lp-price { font-size: 22px; font-weight: 700; color: var(--forest); margin: 8px 0 0; }
.lp-addr { color: var(--ink-soft); margin: 6px 0 0; }
.lp-stars { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 14px; }
.lp-star { color: var(--star); letter-spacing: 1px; }

.lp-biz {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 12px; color: var(--ink);
}
.lp-biz:hover { text-decoration: none; border-color: var(--brand); }
.lp-biz img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.lp-biz b { display: block; font-size: 14px; }
.lp-biz i { font-style: normal; font-size: 12px; color: var(--ink-soft); }

/* ---------- Photographs ---------- */
.lp-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.lp-shots a { border-radius: 10px; overflow: hidden; background: #e8e5dc; }
.lp-shots a:first-child { grid-column: span 3; }
.lp-shots img { width: 100%; height: 150px; object-fit: cover; }
.lp-shots a:first-child img { height: 320px; }

/* ---------- Facts ---------- */
.lp-facts { width: 100%; border-collapse: collapse; font-size: 14px; }
.lp-facts th, .lp-facts td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.lp-facts th { width: 38%; font-weight: 500; color: var(--ink-soft); }
.lp-desc p { margin: 0 0 10px; }
.lp-links { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px;
}
/* An icon beside every outward link, so the eye can tell "this leaves the
   site" from "this is another page of it" without reading the words. */
.lp-ico { width: 14px; height: 14px; flex: none; opacity: .75; }

/* ---------- The (i), as a real popup rather than a title attribute ---------- */
.lp-i {
  width: 17px; height: 17px; flex: none; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font: 600 11px/1 'Inter', sans-serif;
  cursor: help; padding: 0;
}
.lp-i:hover { border-color: var(--brand); color: var(--brand-dark); }
.lp-i.find { width: 22px; height: 22px; cursor: pointer; display: grid; place-items: center; }
.lp-i.find svg { width: 12px; height: 12px; }
.lp-tip {
  position: fixed; z-index: 1300; max-width: 320px; background: var(--surface);
  color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
  box-shadow: 0 10px 30px rgba(17, 41, 31, .18);
}

/* ---------- Ratings ---------- */
.lp-rate { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.lp-rate-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; }
.lp-big { text-align: center; }
.lp-big b { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 40px; line-height: 1; color: var(--forest); }
.lp-big span { display: block; font-size: 11.5px; color: var(--ink-soft); }
.lp-big i { display: block; font-style: normal; font-size: 12px; margin-top: 4px; color: var(--ink-soft); }
.lp-big.none b { color: var(--line); }
.lp-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; margin: 0; font-size: 13px; }
.lp-bars dt { color: var(--ink-soft); white-space: nowrap; }
.lp-bars dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.lp-bar { flex: 1; height: 6px; background: #eceade; border-radius: 999px; overflow: hidden; }
.lp-bar i { display: block; height: 100%; background: var(--star); }
.lp-bars dd b { width: 26px; text-align: right; font-size: 12.5px; }

.lp-form { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lp-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px 20px; }
.lp-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-q-label { font-size: 13px; color: var(--ink-soft); }
/* Radios, so every option is visible at once and nothing has to be opened. */
.lp-starset { display: flex; flex-direction: row-reverse; flex: none; }
.lp-starset label { cursor: pointer; }
.lp-starset input { position: absolute; opacity: 0; width: 0; height: 0; }
.lp-starset span { font-size: 20px; line-height: 1; color: #dcd8cb; padding: 0 1px; }
.lp-starset label:hover span,
.lp-starset label:hover ~ label span,
.lp-starset input:checked ~ span,
.lp-starset label:has(input:checked) span,
.lp-starset label:has(input:checked) ~ label span { color: var(--star); }
.lp-starset input:focus-visible ~ span { outline: 2px solid var(--brand); border-radius: 3px; }

.lp-form textarea, .lp-field input, .lp-field textarea {
  width: 100%; margin-top: 10px; font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; resize: vertical;
}
.lp-form textarea:focus, .lp-field input:focus { outline: none; border-color: var(--brand); }
.lp-form-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.lp-msg { font-size: 12.5px; color: var(--ink-soft); }
.lp-msg.bad { color: #b4452c; }
.lp-msg.good { color: var(--brand-dark); }

.lp-btn {
  display: inline-block; background: var(--brand); color: #fff; border: 1px solid var(--brand);
  font: 600 13.5px 'Inter', sans-serif; padding: 9px 16px; border-radius: 999px; cursor: pointer;
}
.lp-btn:hover { background: var(--brand-dark); text-decoration: none; }
.lp-btn.ghost { background: var(--surface); color: var(--forest); border-color: var(--line); }
.lp-btn.ghost:hover { background: #f3f6f3; border-color: var(--brand); }

.lp-reviews { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.lp-reviews li { padding: 9px 0; border-bottom: 1px solid #f0eee6; font-size: 13.5px; }
.lp-reviews li:last-child { border-bottom: 0; }
.lp-reviews b { margin: 0 7px 0 7px; }
.lp-who { font-weight: 600; }
.lp-reviews time { color: var(--ink-soft); font-size: 12px; margin-left: 7px; }
.lp-reviews p { margin: 4px 0 0; color: var(--ink-soft); }
.lp-elsewhere { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.lp-elsewhere span { margin-left: 8px; }

/* ---------- Contact, and what is near it ---------- */
/* The map used to be the first card in this column and is now the right half
   of the screen, so what is left is the card a reader acts on. It sticks: on
   a long listing the telephone number should not be three screens back up. */
.lp-side { display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: calc(var(--header-h, 92px) + 20px); }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.lp-card h2 { font-size: 15px; margin: 0 0 10px; }
.lp-cname { margin: 0; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
/* Who is behind the number: owner, builder, dealer or a named business. The
   tick on it is not the listing's — it is the one check that is about this
   person, that somebody here reached them on this number. */
.lp-who {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: #f1efe8;
  border-radius: 999px;
  padding: 3px 8px;
  cursor: help;
}
.lp-who.ok { background: #e3f2e9; color: var(--brand-dark); }
.lp-who svg { width: 11px; height: 11px; }
.lp-cnum { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
/* The sentence that stands where a number would: it has to read as a
   decision somebody made, not as a field that failed to fill. */
.lp-cnum.hidden-num {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-soft);
}
.lp-cnum.hidden-num .lp-ico { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 1px; }
.lp-cbtns { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.lp-own, .lp-posted { margin: 9px 0 0; font-size: 12.5px; }
.lp-own a { display: inline-flex; align-items: center; gap: 7px; }
.lp-posted { color: var(--ink-soft); }
.lp-report { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--line); }
.lp-report button {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink-soft); padding: 0;
}
.lp-report button svg { width: 16px; height: 16px; }
.lp-report button:hover { color: var(--forest); border-color: var(--brand); }

.lp-near { list-style: none; margin: 0; padding: 0; }
.lp-near li { border-bottom: 1px solid #f0eee6; }
.lp-near li:last-child { border-bottom: 0; }
.lp-near a { display: flex; gap: 9px; align-items: center; padding: 8px 0; color: var(--ink); }
.lp-near a:hover { text-decoration: none; }
.lp-near a:hover b { color: var(--brand-dark); }
.lp-near img { width: 54px; height: 42px; border-radius: 7px; object-fit: cover; flex: none; }
.lp-near b { display: block; font-size: 13px; font-weight: 600; }
.lp-near i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }

/* The map is fixed to the right edge, so the footer has to stop where it
   starts rather than running underneath it. */
.lp-foot {
  margin-left: var(--rail-w); margin-right: var(--mapw, 440px);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: center;
  padding: 22px 20px 34px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
  align-items: center;
}
.lp-foot a { display: inline-flex; align-items: center; gap: 6px; }
.lp-foot svg { width: 13px; height: 13px; }

/* ---------- The one popup, opaque white ---------- */
.lp-modal { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; background: rgba(17, 41, 31, .42); padding: 20px; }
.lp-modal[hidden] { display: none; }
.lp-modal-box {
  width: 100%; max-width: 440px; background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(17, 41, 31, .3); overflow: hidden;
}
.lp-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.lp-modal-head h3 { font-size: 16px; }
.lp-modal-head button { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.lp-modal-body { padding: 16px; }
/* Radios, never a dropdown: the list of what can be wrong is short and every
   line of it should be readable without opening anything. */
.lp-opts { display: grid; gap: 2px; }
.lp-opts label { display: flex; gap: 9px; align-items: center; padding: 7px 9px; border-radius: 9px; cursor: pointer; font-size: 13.5px; }
.lp-opts label:hover { background: #f3f6f3; }
.lp-opts input { accent-color: var(--brand); }
.lp-field { margin-top: 12px; }

/* ---------- The poster's own profiles ---------- */
/* Icons, not four more lines of text: the glyph is read faster than the word,
   and these belong in the contact card because that is what they are. */
.lp-social { display: flex; gap: 8px; margin: 11px 0 0; }
.lp-social a {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink-soft);
}
.lp-social svg { width: 17px; height: 17px; }
.lp-social a:hover { color: var(--forest); border-color: var(--sage); text-decoration: none; }

/* ---------- A note to yourself ---------- */
.lp-note {
  margin: 12px 0 0; padding: 9px 11px; border-radius: 10px;
  background: #fffbea; border: 1px solid #efe0ad;
  font-size: 13px; line-height: 1.5; white-space: pre-wrap;
}
.lp-report { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-report button.on { color: var(--clay); font-weight: 600; }
.lp-check { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; cursor: pointer; }
.lp-check input { accent-color: var(--brand); }

@media (max-width: 960px) {
  /* No room for two columns side by side, so the map stops being a column
     and becomes the band above the listing — first on the page, because it
     is the reason the page is worth opening. The rail lies down into a strip
     under the header, and scrolls away with the page rather than sticking:
     a second fixed bar costs fifty pixels of a phone screen. */
  .lp-doc, .lp-foot { margin: 0; }
  .lp-side { position: static; }
  .lp-inner { padding: 16px 16px 40px; }
  .lp-art h1 { font-size: 24px; }
  .lp-shots a:first-child img { height: 220px; }
  .lp-shots img { height: 110px; }
  .lp-rate-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .lp-shell { display: flex; flex-direction: column; }
  .lp-mapwrap {
    position: static; width: auto; height: 260px; order: -1;
    border-left: 0; border-bottom: 1px solid var(--line);
  }
  .lp-grip { display: none; }
  .rail.rail-left {
    position: static; flex-direction: row; width: 100%; height: auto; gap: 4px;
    padding: 6px 12px; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--line); order: -2;
  }
  .rail-cap { margin: 0 4px; align-self: center; }
}

@media (max-width: 620px) {
  .search-wrap, .place-wrap { display: none; }
}

/* ---------- The map ---------- */
.lp-map-box { flex: 1 1 auto; min-height: 0; background: #e9e6dc; }
.lp-map-box noscript { display: grid; place-items: center; height: 100%; font-size: 13px; }
/* Leaflet draws its own white boxes; they have to sit under the header and
   the one popup, never over them. */
.lp-map-box .leaflet-pane,
.lp-map-box .leaflet-control { z-index: 1; }
/* Not .lp-pin: style.css already owns that name for the pin in the header's
   place button, and two rules under one name is one of them losing. */
.lp-mk {
  display: grid; place-items: center; width: 30px; height: 30px; font-size: 15px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 50%;
  box-shadow: 0 2px 6px rgba(17, 41, 31, .25);
}
.lp-mk.here { border-color: var(--brand); background: #eaf7ef; transform: scale(1.15); }
.lp-mapopen {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px; font-size: 12.5px; font-weight: 600;
  border-top: 1px solid var(--line); background: var(--surface);
}
.lp-mapopen svg { width: 14px; height: 14px; }
.lp-mapopen:hover { background: #f3f6f3; text-decoration: none; }

/* ---------- The searches, behind the ⌕ ---------- */
.lp-finds { display: grid; gap: 2px; }
.lp-finds a {
  display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink);
}
.lp-finds a:hover { background: #f3f6f3; text-decoration: none; }
.lp-finds b { font-weight: 600; color: var(--forest); flex: none; min-width: 92px; }
.lp-finds i { font-style: normal; font-size: 12px; color: var(--ink-soft); }

/* ---------- A project's page, and a place's page ---------- */
/* The same document shell a listing's page uses, plus the one thing those
   pages have that a listing does not: a discussion. Questions with answers
   under them, and a plain thread beside them. */

.lp-blurb { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 10px 0 0; }

.lp-docs { list-style: none; margin: 10px 0 0; padding: 0; }
.lp-docs li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lp-docs li:last-child { border-bottom: 0; }
.ld-k {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface);
  border-radius: 5px;
  padding: 2px 6px;
}
.lp-docs i { font-style: normal; color: var(--ink-soft); font-size: 12px; }

.lp-faq { margin: 10px 0 14px; }
.lp-faq details {
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}
.lp-faq summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::before { content: '+ '; color: var(--ink-soft); }
.lp-faq details[open] summary::before { content: '– '; }
.lp-faq p { margin: 7px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- The discussion ---------- */
.pf-ul { list-style: none; margin: 0 0 12px; padding: 0; }
.pf-item {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;          /* opaque, never translucent */
  padding: 10px 12px;
  margin-bottom: 8px;
}
.pf-item.reply {
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0;
  margin: 8px 0 0;
  padding: 2px 0 2px 11px;
}
.pf-who { display: flex; align-items: baseline; gap: 8px; }
.pf-who b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pf-who i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.pf-q { margin: 5px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.pf-body { margin: 5px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.pf-reply {
  margin-top: 7px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: 600 12px 'Inter', sans-serif;
  color: var(--ink-soft);
  text-decoration: underline;
}
.pf-reply:hover { color: var(--forest); }
.pf-replies { list-style: none; margin: 4px 0 0; padding: 0; }

.pf-ask {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: flex-start;
  margin: 0 0 20px;
}
.pf-ask input, .pf-ask textarea {
  flex: 1 1 100%;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 500 13px 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.pf-ask input:focus, .pf-ask textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.pf-replybox { margin: 8px 0 0; }
.pf-msg { align-self: center; font-size: 12px; color: var(--clay); }

.lp-acts { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; }
.cb-form { display: flex; flex-direction: column; gap: 9px; }
.cb-form input {
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 500 13px 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
}
.cb-form input:focus { outline: 2px solid var(--sage); outline-offset: 1px; }

/* ---------- The newspaper cutting a transcribed profile came from ----------
   Its own figure with its own caption, because that caption is the only
   thing on the page that describes this image — and three hundred cuttings
   captioned alike are one page to a crawler, not three hundred. */
.lp-clip { margin: 26px 0; max-width: 560px; }
.lp-clip a { display: block; }
.lp-clip img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.lp-clip figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.lp-clip-lock {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 22px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--wash, #f4f7f4);
}
.lp-clip-lock b { font-size: 14px; }
.lp-clip-lock span { font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.lp-clip-lock .btn-primary { margin-top: 4px; text-decoration: none; }

/* Sign in with Google in the small sign-in modal. */
.lp-google { display: block; text-align: center; margin-bottom: 10px; }
.lp-or { text-align: center; font-size: 12px; color: var(--ink-soft); margin: 0 0 10px; }