/* ============================================================================================
   ONE CONTOUR FIELD FOR THE WHOLE SITE
   Generated art: assets/topo-ridge.svg  <-  assets-raw/topo-ridge.mjs (regenerate, never hand-edit)

   THE PROBLEM THIS REPLACES
   Every page used to carry its own copy of the background, and no two agreed: index.html tiled
   the icon at 900px, app.html at 920px, story.html at 1100px on a fixed pseudo-element, and a
   later paste appended a fourth rule at 1024px to all nine pages. Whichever won, the artwork was
   the ICON tile repeating in both directions: contour rings sliced at every tile edge, the same
   massif four or five times down a long page, and hard seams where the lines simply stopped.
   On top of that the .band sections were painted with an OPAQUE fill, so the line-work vanished
   completely for a section and then reappeared. Lines that stop, restart somewhere else and
   never join up: disjointed, exactly as described.

   THE SYSTEM THAT REPLACES IT
   1. ONE piece of art, shared by every page, in one file. Nothing is per-page any more.
   2. The art is seamless top-to-bottom (the elevation field is periodic in y), so it repeats
      down a page of any length with no visible join. The page scrolls through one continuous
      ridge system.
   3. It is drawn at 100% of the page width, so there is never a horizontal seam either.
      Below 760px it holds a fixed 760px width and centre-crops, which keeps the contour spacing
      the same on a phone as on a laptop instead of shrinking it into noise.
   4. Sections that used to be opaque blocks are now translucent washes over the same field, so
      the contours run straight through them. Their edges are hairlines, not walls.
   Result: one landscape under the whole site, at one density, in one palette.
   ============================================================================================ */

/* --- Paper tone, brightened -----------------------------------------------------------------
   Founder note, 20 August: the field was approved, but the whole page carried too much warmth
   and contrast under body copy. Every background tone moves 50% toward pure white, and the
   contour lines drop to half their contrast (stroke-opacity 0.40 -> 0.20 in the generator).
   Structure is NOT brightened: --hair, --ink, --stone and the accent colours are untouched, so
   card borders, rules and text hold exactly the weight they had.

     --paper  #FFFDF7 -> #FFFEFB      the page
     --fill   #F4F0E5 -> #FAF8F2      tinted bands and insets

   These override the per-page :root blocks because this sheet is linked after them. The site is
   light-only — there is no prefers-color-scheme or data-theme anywhere in it — so there is no
   dark variant to move. */
:root {
  --paper: #FFFEFB;
  --fill: #FAF8F2;
}

html {
  background-color: #FFFEFB;
}

body {
  background-image: url('topo-ridge.svg');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;                 /* fallback for browsers without max() */
  background-size: max(100%, 760px) auto;     /* below 760px: hold the density, centre-crop */
  background-color: #FFFEFB;
  background-attachment: scroll;              /* the field travels with the page, like terrain */
}

/* --- Tinted sections: a wash, not a lid ----------------------------------------------------
   rgba(245,242,233,.5) resolves to exactly the (brightened) --fill over the brightened paper, so
   the band reads at its intended weight — but at 50% alpha the contours below stay visible and
   the line-work crosses the boundary instead of dying at it. */
.band {
  background: rgba(245, 242, 233, 0.5);
  border-top: 1px solid rgba(229, 223, 206, 0.6);
  border-bottom: 1px solid rgba(229, 223, 206, 0.6);
}

/* Two bands in a row would otherwise draw a double hairline. */
.band + .band {
  border-top: none;
}

/* --- Insets that sit on the field ----------------------------------------------------------
   The devices table and the story photo frame were solid paper. At 88% they hold their text
   contrast (they are still 88% paper) while the field ghosts through the margins, which stops
   them reading as stickers dropped onto the page. */
.tbl-card table {
  background: rgba(255, 254, 251, 0.88);
}


/* --- Long-form legal / support pages -------------------------------------------------------
   These are dense text at 68ch. The field is the same field, but the prose column gets a soft
   paper wash so the contours never fight the body copy. It fades out at the edges rather than
   ending on a border, so the page still reads as one surface. */
.prose {
  background: rgba(255, 254, 251, 0.88);
  box-shadow: 0 0 34px 22px rgba(255, 254, 251, 0.78);
}

/* --- Sticky page headers must not smear the field -------------------------------------------
   Scoped to the nav bars that are a direct child of <body>. index.html's <header class="hero">
   is nested inside .wrap and is deliberately excluded: the hero is where the field should be
   most visible, not least. */
body > header:not(.hero) {
  background-color: rgba(255, 254, 251, 0.9);
}

/* ============================================================================================
   SHARED SITE CHROME
   Added 20 August. These two components have to look and behave the same on all nine pages, and
   the pages each carry their own hand-written nav CSS with different class names (.link/.btn on
   index, .nav-links/.btn-pill on story, .nav-links/.btn on app, .back on the legal pages). Rather
   than patch the same rule into nine <style> blocks and watch them drift the way the background
   did, both live here and are used by the same markup everywhere.
   ============================================================================================ */

/* --- Log in (persistent, right of the nav, every page) --------------------------------------
   For people who already have an account. It points at the route builder because that is the
   only thing on the web you can log INTO — the app itself is on your phone. Deliberately a ghost
   button: it must not compete with the join CTA next to it. */
.pd-login {
  display: inline-block;
  border: 1px solid var(--hair, #E5DFCE);
  color: var(--ink, #2C3327);
  background: transparent;
  text-decoration: none;
  font: 500 14px 'Saira', system-ui, sans-serif;
  padding: 9px 15px;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease;
}
.pd-login:hover { border-color: var(--terra, #C75C36); color: var(--terra, #C75C36); }
.pd-login .sep { opacity: .45; margin: 0 2px; }

/* Below 640px the nav sheds its text links on most pages; the login keeps its place but loses
   the second half of its label so it still fits beside the join button. */
@media (max-width: 640px) {
  .pd-login { padding: 8px 12px; font-size: 13px; }
  .pd-login .sep, .pd-login .what { display: none; }
}

/* --- Join: BOTH routes, always, side by side ------------------------------------------------
   House rule, founder 20 August: the site may never offer only the iPhone route. Anywhere it
   asks someone to join, iOS and Android appear together. iOS is the primary because TestFlight
   is self-serve; Android is a ghost button because it is a real email to a real person, and
   pretending otherwise would be the dishonest version. */
.pd-join {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin: 22px 0 0;
}
.pd-join a {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 22px;
  font: 600 16px/1.25 'Saira', system-ui, sans-serif;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.pd-join a small {
  display: block;
  font: 400 12px/1.4 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: .02em;
  margin-top: 3px;
  opacity: .82;
  font-weight: 400;
}
.pd-join .ios { background: var(--terra, #C75C36); color: #FFFEFB; }
.pd-join .ios:hover { background: var(--terraD, #A94A29); }
.pd-join .droid {
  border: 1px solid var(--hair, #E5DFCE);
  color: var(--ink, #2C3327);
  background: transparent;
}
.pd-join .droid:hover { border-color: var(--terra, #C75C36); color: var(--terra, #C75C36); }

/* On the dark invite card the ghost button needs its own contrast. */
.pd-join.on-dark .droid { border-color: #5A6150; color: #E8E4D6; }
.pd-join.on-dark .droid:hover { border-color: #D9A08A; color: #D9A08A; }

/* The legal/support pages put brand on the left and space-between everything else; the login and
   the back link travel together as one right-hand group. */
.navright { display: flex; align-items: center; gap: 16px; }
@media (max-width: 560px) { .navright { gap: 10px; } }