/* =============================================================================================
   The place page
   =============================================================================================
   A place, as a page that works with no JavaScript running. It borrows every token from styles.css
   and declares no colour, size, radius or duration of its own.

   The type is wider and quieter than the app's: this is something somebody reads, arriving cold
   from a search result, rather than something they operate while walking. */

body.seo-page { min-height: 100vh; }

/* The same measure as the article, or the brand sits 200px left of the headline it introduces. */
.seo-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-4);
}
.seo-brand { color: var(--accent); font-family: var(--font-display); font-size: var(--text-xl); text-decoration: none; }
.seo-tagline { color: var(--muted); font-size: var(--text-2xs); }

.seo-main { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter) var(--space-8); }

.seo-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps);
}
.seo-eyebrow:empty { display: none; }
.seo-main h1 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: var(--leading-tight);
}
.seo-heritage {
  display: inline-block;
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-3);
  color: var(--on-success);
  font-size: var(--text-2xs);
  font-weight: 700;
  background: var(--success);
  border-radius: var(--radius-full);
}

.seo-hero { margin: 0 0 var(--space-4); }
.seo-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--canvas-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.seo-hero figcaption { margin-top: var(--space-2); color: var(--muted); font-size: var(--text-2xs); line-height: var(--leading-normal); }
.seo-cap, .seo-credit { display: block; }
.seo-credit { color: var(--muted); opacity: .82; }
.seo-hero a { color: var(--accent); }

/* The one thing this page is asking for. It comes before the story, not after it, because the
   reader who wants to listen should not have to scroll past what they came to hear. */
.seo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-6); }
.seo-listen {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 0 var(--space-5);
  color: var(--on-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  background: var(--primary);
  border-radius: var(--radius-full);
}
.seo-listen:hover { background: var(--primary-soft); }
.seo-listen:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.seo-duration { color: var(--muted); font-size: var(--text-2xs); }

.pg-block { margin-bottom: var(--space-6); }
.pg-block h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 400;
}
.pg-block p { margin: 0 0 var(--space-4); color: var(--body); font-size: var(--text-md); line-height: 1.75; }
.pg-block p:last-child { margin-bottom: 0; }

.seo-sources { margin: 0; padding-left: var(--space-5); color: var(--muted); font-size: var(--text-2xs); }
.seo-sources a { color: var(--accent); }
.seo-sources li { margin-bottom: var(--space-1); }

.seo-foot {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) var(--space-8);
  border-top: 1px solid var(--line);
}
.seo-foot p { margin: 0; color: var(--muted); font-size: var(--text-2xs); line-height: var(--leading-normal); }
.seo-foot a { color: var(--accent); }