/*
  The reading pages: a place, a listing, the legal documents.

  Deliberately thin. `landing.css` is already loaded for its palette, its dark
  mode and its nav, and these pages are the same building as the front door —
  restating the colours here would be a second copy to drift against the first.
  Everything below is layout: a reading column, and the few components the
  landing page has no equivalent of.

  Every rule is scoped under `.doc`, which sits alongside `.lp` on the body, so
  the landing page's own bands cannot be reached by anything here and nothing
  here can reach them.
*/

.doc {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*
  The landing nav is absolutely positioned, because there it floats over a
  photograph that runs to the edges of the band. There is no photograph here,
  so it needs to take up its own space or the first heading starts underneath
  it.
*/
.doc .doc-nav {
  position: static;
  border-bottom: 1px solid var(--lp-line);
}
.doc .doc-nav .lp-brand,
.doc .doc-nav .lp-nav-links a { color: var(--lp-ink); }
.doc .doc-nav .lp-mark { background: var(--lp-green); }

.doc-main { flex: 1; }

.doc-body {
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem) 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/*
  The display face defaults to oldstyle figures, so "59 places" rendered with a
  descending 9 and a five that sits low. The landing page already hit this and
  fixed it the same way; anything numeric in this face needs it stated.
*/
.doc-body h1, .doc-hook, .doc-near-title, .doc-list-title, .doc-state-name,
.doc-evidence blockquote, .doc-body h2 { font-variant-numeric: lining-nums; }

.doc-body h1 {
  font-family: var(--lp-display);
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  line-height: 1.05;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

.doc-body h2 {
  font-family: var(--lp-display);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 1.4rem 0 0;
  text-wrap: balance;
}

.doc-body h3 {
  font-family: var(--lp-sans);
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin: 1.2rem 0 -.4rem;
}

.doc-body p { margin: 0; }
.doc-body a { color: var(--lp-sign); }

.doc-crumbs {
  font-size: .84rem;
  color: var(--lp-muted);
  display: flex;
  gap: .4rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.doc-crumbs a { color: var(--lp-muted); }

.doc-where {
  font-size: .92rem;
  color: var(--lp-muted);
  margin-top: -.6rem !important;
}

/* The reason to read on, in the display face and given room. */
.doc-hook {
  font-family: var(--lp-display);
  font-size: clamp(1.15rem, 2.6vw, 1.42rem);
  line-height: 1.4;
  color: var(--lp-ink);
  text-wrap: pretty;
}

.doc-prose {
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--lp-ink-2);
}
.doc-prose p { margin: 0 0 1rem; }

.doc-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.doc-tag {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .22rem .5rem;
  border: 1px solid var(--lp-line);
  border-radius: 2px;
  color: var(--lp-muted);
}

.doc-more {
  font-size: .95rem;
  color: var(--lp-ink-2);
  border-left: 2px solid var(--lp-sign);
  padding-left: .95rem;
}

/*
  The evidence span, which is the truthfulness claim made visible.
  Quoted rather than blended into the prose, because it is somebody else's
  sentence and the whole point is that it is verifiable against the source.
*/
.doc-evidence {
  margin: .5rem 0;
  padding: 1rem 1.15rem;
  background: var(--lp-ground-2);
  border: 1px solid var(--lp-line);
  border-radius: 3px;
}
.doc-evidence figcaption {
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-muted);
  margin-bottom: .5rem;
}
.doc-evidence blockquote {
  margin: 0;
  font-family: var(--lp-display);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--lp-ink-2);
}

.doc-source { font-size: .84rem; color: var(--lp-muted); }
.doc-source a { color: var(--lp-muted); }

/* ---- nearby, and the listings ---- */

.doc-near-list, .doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.doc-near-list li, .doc-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .1rem .8rem;
  padding: .85rem 0;
  border-top: 1px solid var(--lp-line);
}
.doc-near-list li:last-child, .doc-list li:last-child { border-bottom: 1px solid var(--lp-line); }

.doc-near-list a, .doc-list a { text-decoration: none; }
.doc-near-title, .doc-list-title {
  font-family: var(--lp-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--lp-ink);
}
.doc-near-list a:hover .doc-near-title,
.doc-list a:hover .doc-list-title { color: var(--lp-sign); }

.doc-near-miles {
  font-size: .78rem;
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.doc-near-hook, .doc-list-hook {
  grid-column: 1 / -1;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--lp-muted);
}

/*
  Stated columns rather than auto-fit, the same rule the landing page's
  interest grid follows: auto-fit orphans the last one or two, and an orphaned
  card reads as one that failed to load.
*/
.doc-states {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
@media (min-width: 34rem) { .doc-states { grid-template-columns: repeat(3, 1fr); } }

.doc-state {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .85rem;
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  background: var(--lp-ground-2);
  text-decoration: none;
}
.doc-state:hover { border-color: var(--lp-sign); }
.doc-state-name { font-family: var(--lp-display); font-weight: 600; color: var(--lp-ink); }
.doc-state-n {
  font-size: .78rem;
  color: var(--lp-muted);
  font-variant-numeric: tabular-nums;
}

.doc-cta {
  margin-top: 1.8rem;
  padding: 1.5rem 1.6rem 1.7rem;
  background: var(--lp-green);
  color: var(--lp-on-green);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: flex-start;
}
.doc-cta h2 { margin: 0; color: var(--lp-on-green); }
.doc-cta p { color: rgba(243, 239, 228, .82); font-size: .96rem; }
.doc-cta .lp-btn--solid { background: var(--lp-on-green); color: var(--lp-green); }
.doc-cta .lp-btn--solid:hover { background: #fff; }

.doc-foot {
  border-top: 1px solid var(--lp-line);
  padding: 1.8rem clamp(1.25rem, 4vw, 2rem) 2.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ---- the legal pages ---- */

/*
  Wider measure than a place page and a smaller face. A privacy policy is
  scanned for the one paragraph that answers a question, not read straight
  through, so headings and their spacing do more work here than line length.
*/
.doc-legal { max-width: 46rem; }
.doc-legal .doc-prose, .doc-legal p { font-size: .98rem; line-height: 1.7; }
.doc-legal h2 {
  padding-top: 1.4rem;
  border-top: 1px solid var(--lp-line);
  width: 100%;
}
.doc-legal ul {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: var(--lp-ink-2);
  font-size: .98rem;
  line-height: 1.6;
}
.doc-legal .doc-updated {
  font-size: .84rem;
  color: var(--lp-muted);
}
.doc-legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}
.doc-legal td:first-child { width: 22%; min-width: 7.5rem; }
.doc-legal th, .doc-legal td {
  text-align: left;
  padding: .6rem .7rem;
  border-top: 1px solid var(--lp-line);
  vertical-align: top;
}
.doc-legal thead th {
  border-top: 0;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lp-muted);
}
.doc-legal .doc-scroll { overflow-x: auto; }