/* FridayFolder · the chrome, in one place.
 * ---------------------------------------------------------------------------
 * The palette, the container, the lockup, the top bar and the footer, shared by
 * every SITE page: index, privacy, terms, help and forwarding.
 *
 * WHY THIS FILE EXISTS. There is no build step here -- these are hand-written
 * static files -- so before this, "the footer" existed five times and each copy
 * drifted on its own. By the night it was counted: five different link lists, no
 * two the same; the lockup at 30px on one page and 26px on the others; footer
 * margins of 34, 40 and 56; and two different contact addresses, one of which
 * nobody was reading. None of that was carelessness. It is what duplicated CSS
 * does on its own, given a few weeks.
 *
 * TWO FAMILIES, ON PURPOSE. Site pages are documents: a wide chrome band with a
 * narrow reading column inside it. app.html and join.html are PRODUCT SURFACES,
 * phone-shaped, and app.html carries a bottom tab bar -- a 1080px header
 * floating above a 620px column would read as a bug rather than as consistency.
 * So they keep their own narrow chrome and their own stylesheet, which also owns
 * the dark palette this file has no business knowing about. That is a decision,
 * not an oversight, and it is written here so it does not get "fixed" later.
 *
 * WHAT DOES NOT BELONG HERE. Type scale, headings and page-specific layout stay
 * with their pages: index is a landing page with full-width sections and no
 * reading column at all, and forcing it through the same rules would be
 * consistency for its own sake.
 */

:root{
  --navy:#1C2A44; --panel:#33486B; --gold:#E8A23C; --midnight:#131E33;
  --cream:#FDF6EA; --warm:#FBF8F1; --border:#EFE8D8; --muted:#7C8698;
  --ok:#2F7A4F; --bad:#B4432F;
}

/* The chrome band. Header and footer span it; the reading column sits inside. */
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* The reading column. 44em keeps a line of prose near 65 characters, which is
   where it stays readable. index.html deliberately has no <main>: a landing page
   is not a document. */
main{max-width:44em;margin:0 auto;padding:26px 0 10px}

.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none}

/* gap and wrap are the base, not an index-only special: three items in a top bar do not
   fit at 390px, and the page that has three is the one that discovered it. */
nav{display:flex;justify-content:space-between;align-items:center;gap:10px 14px;
  flex-wrap:wrap;padding:22px 0}
nav a.cta{background:var(--navy);color:var(--cream);text-decoration:none;font-weight:600;
  font-size:14px;padding:10px 18px;border-radius:12px;white-space:nowrap}
nav a.cta:hover{filter:brightness(1.08)}

footer{border-top:1px solid var(--border);margin-top:56px;padding:24px 0 40px;display:flex;
  justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:13px;color:var(--muted)}
footer a{color:var(--muted)}

@media (max-width:640px){
  .wrap{padding:0 18px}
  nav{padding:16px 0}
  /* The footer is two spans in a row with space-between. On a phone there is no space to put
     between them, so the mark ended up hard against the copyright line -- "FridayFolder" and the
     sentence after it touching, with no word space between a logo and a sentence. Found on the
     landing page and fixed only there; every other page had the same bug and nobody had looked.
     Stacked and centered here for all of them; the desktop row is unchanged and was always fine. */
  footer{margin-top:40px;padding:22px 0 34px;flex-direction:column;align-items:center;
    text-align:center;gap:14px;line-height:1.7}
  footer .lockup{justify-content:center}
}