/* Temp about page — rough and scrappy, for prototyping. The whole page reads
   in nav ink (blue) per the Figma temp-about frame; layout and components
   lean on styles.css. Loaded only by about.html. */

.about-page { color: var(--ink-1); }

/* page-load entrance — the same quiet rise as the map page's header,
   dealt top to bottom (keyframes live in styles.css) */
.about-head,
.about-page main > section,
.about-page .site-foot {
  animation: rise-in var(--t-slow) var(--ease-out) both;
}

.about-page main > section:nth-of-type(1) { animation-delay: 70ms; }
.about-page main > section:nth-of-type(2) { animation-delay: 140ms; }
.about-page main > section:nth-of-type(3) { animation-delay: 210ms; }
.about-page .site-foot { animation-delay: 280ms; }

/* Two marks off the Figma branding page (both ship as #141414 ink art):
   phones get the stacked wordmark from the logo construction, desktop gets
   the horizontal lockup. Both sit inside the blue hero. */

/* The hero palette (--hero-bg / --hero-ink / --hero-pill-line) lives in
   styles.css — the map's report confirmation wears the same pair. The
   marks are inlined SVGs filled with currentColor, so they take
   --hero-ink directly — no CSS-filter re-inking, whose sepia/saturate
   chain skewed magenta on mobile GPUs. */

/* The hero: full-bleed blue ground, white ink, mark + tagline + CTA
   centred. The full viewport on every size — the nav pill's Reports tab
   (and the CTA) are the way down to the list, no tease needed. Padded at
   the bottom so the centred stack clears the floating pill. */
.about-head {
  box-sizing: border-box;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s8) var(--s5)
    calc(var(--s5) + var(--bnav-h) + var(--s8) + env(safe-area-inset-bottom, 0px));
  background: var(--hero-bg);
  color: var(--hero-ink);
  min-height: 100vh;
  min-height: 100dvh;
}

.about-mark-stacked {
  display: block;
  width: min(250px, 70%);
  height: auto;
  margin: var(--s3) auto 0; /* a little air around it */
}

.about-mark-lockup { display: none; }

.about-head .tagline { margin-inline: auto; }

/* the CTA inverts against the hero ground */
.about-head .about-cta {
  background: var(--hero-ink);
  color: var(--hero-bg);
}

/* the ink-coloured focus ring vanishes against the hero ground */
.about-head .about-cta:focus-visible { outline-color: var(--hero-ink); }

/* the pill's hairline disappears against the hero — while the pill floats
   over it (class kept honest by about.js), the line takes the hero ink */
.about-page .bnav { transition: border-color var(--t-slow) var(--ease-out); }
.about-page.is-pill-on-hero .bnav { border-color: var(--hero-pill-line); }

/* Desktop: the lockup replaces the stack and the CTA stops stretching. */
@media (min-width: 900px) {
  .about-head {
    padding-top: var(--s10);
  }

  .about-mark-stacked { display: none; }

  .about-mark-lockup {
    display: block;
    width: min(680px, 56vw);
    height: auto;
  }

  .about-head .about-cta {
    width: auto;
    min-width: 280px;
  }
}

/* Blue take on the shared chrome. Hairlines and labels follow the page ink;
   the status fills keep their own colours — that's the data. */
.about-page .list-label {
  color: var(--ink-1);
  border-color: var(--ink-1);
}

/* View map CTA — same solid button voice as the report sheet (styles.css),
   filled with the page's blue ink. */
.about-cta {
  display: flex;
  width: 100%; /* the CTA runs the full column, edge to edge */
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: var(--s5);
  padding: 0 var(--s8);
  background: var(--ink-1);
  color: var(--on-ink);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-fast) var(--ease-out);
}

.about-cta:active { transform: scale(0.97); }

.about-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.about-body {
  margin-top: var(--s3);
  font-size: 13px;
  max-width: 44ch;
}

.about-body + .about-body { margin-top: var(--s3); }

/* ---------- live status list ----------
   The rows and the segmented status input are the shared component in
   styles.css (.rp-list / .rp-options) — the list here only sets its own
   top margin so pottery road sits inside the tease window above the pill. */
.about-page .rp-list { margin-top: var(--s4); }