/* Shared by every page here: the colour tokens, the type, the page chrome.
   Page-specific furniture stays inline in the page that uses it.

   Every colour is read out of photoprep/config.sh, which is the ink on the back
   of a real printed card. If a value is not on the card, it is not on a page. */

:root {
  /* From photoprep/config.sh:144-155 — the ink on a printed back. */
  --ink:    #1c232c;   /* BACK_INK */
  --soft:   #55616e;   /* BACK_INK_SOFT */
  --faint:  #8b97a3;   /* BACK_INK_FAINT */
  --accent: #d4552e;   /* BACK_ACCENT — "the you-were-here marker" */
  --road:   #6d7b85;   /* BACK_MAP_ROAD */
  --water:  #cfdde6;   /* BACK_MAP_WATER */
  --rule:   #d7dee4;   /* BACK_RULE_COLOR — ink on paper */

  /* Screen-only. --line is the viewer's hairline, not the card's: one is a
     rendered edge on a display, the other is printed. */
  --paper:  #fbfbfc;
  --line:   #e2e7eb;
  --card:   #fff;
  --code-bg: #f1f4f6;
  /* A depicted print is paper, so it stays paper-coloured in the dark too. */
  --stock:  #fff;
  /* Paper resting on paper: short and tight, not a soft grey card shadow —
     and photo paper is cut square, not rounded. Both match shop-web/app.css,
     because the customer sees the same object on both sites. */
  --shadow: 0 3px 5px rgba(28,35,44,.14);
  --sheet-radius: 2px;

  --display: clamp(2rem, 5.1vw, 2.85rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14171a; --ink: #e8ecef; --soft: #a8b3bd; --faint: #71808c;
    --line: #252b31; --card: #1b1f23; --code-bg: #1b2024;
    --shadow: 0 3px 6px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Avenir is what the card is set in (BACK_FONT). Named, not embedded: it
     resolves on macOS and iOS, which is most of the audience for a page about
     an iPhone app, and those readers get the page in the same face as their
     prints. Everyone else falls back to their system sans. */
  font: 400 17px/1.6 Avenir, "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-weight: 800; margin: 0; letter-spacing: -.018em; }
h1 { font-size: var(--display); line-height: 1.06; letter-spacing: -.028em; text-wrap: balance; }
h2 { font-size: 1.5rem; line-height: 1.25; }
p { margin: 1rem 0 0; max-width: 62ch; }
.lead p:first-of-type, .main > p:first-child { margin-top: 1.1rem; }
.dek { color: var(--soft); }
small, .small { font-size: .875rem; line-height: 1.5; }

/* --- Header and footer -------------------------------------------------
   The wordmark is the one decided mark: FOURBYSIX, one word, all caps, as it
   prints on the back of every card (BACK_BRAND_A). There is no logo, and the
   co-brand rings are not one — they mean "two brands", so they appear on this
   page only where a partner name sits beside ours. */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; padding: 1.75rem 0 .5rem; flex-wrap: wrap;
}
.wordmark {
  font-weight: 800; font-size: .8125rem; letter-spacing: .16em;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.topnav { display: flex; gap: 1.5rem; font-size: .9375rem; }
.topnav a { color: var(--soft); text-decoration: none; }
.topnav a:hover { color: var(--ink); }

footer { border-top: 1px solid var(--line); margin-top: 1rem; }
.footrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.25rem 2rem; flex-wrap: wrap; padding: 2rem 0 3rem;
}
.footlinks { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: .9375rem; }
.footlinks a { color: var(--soft); }
.footlinks a:hover { color: var(--ink); }
.copyright { color: var(--faint); font-size: .8125rem; }

/* --- Buttons ----------------------------------------------------------- */
.cta { margin-top: 1.75rem; }
a.btn {
  display: inline-block; text-decoration: none; padding: .9rem 1.4rem;
  border-radius: 9px; border: 1px solid var(--ink); background: var(--ink);
  color: var(--paper); font-weight: 600; font-size: .95rem;
}
a.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.cta .note { display: block; margin-top: .9rem; font-size: .875rem; color: var(--faint); max-width: 44ch; }