/*
 * orderedsteps.app — the public site.
 *
 * SEPARATE FROM THE APP ON PURPOSE, and the separation is the whole design
 * brief. This is served from its own Worker, outside Cloudflare Access, to
 * people who have never opened Ordered and may never. The app's stylesheet is
 * built, fingerprinted and 64 kB; this is three files that a person can read.
 *
 * THE PALETTE IS TAKEN FROM THE ICON rather than from the app. The icon is a
 * stained glass window — a gold cross on jewelled panes against a dark frame —
 * and it is the one image most people will ever see of this. So the page is
 * that window: near-black ground, warm gold for anything that leads, and the
 * ink warm rather than grey, because nothing in the icon is grey.
 *
 * NO JAVASCRIPT ANYWHERE, which is a security decision before it is a
 * performance one. `_headers` sets `script-src 'none'` for this origin, so a
 * script tag added here later fails loudly in a browser rather than quietly
 * shipping. There is nothing on this site that needs one.
 *
 * THE FONTS ARE THE APP'S OWN, copied from `src/fonts` with stable names.
 * `public/legal.css` in the app settles for system serif because the app's
 * build fingerprints its faces and a hand-written page cannot name them; this
 * site has no build, so it can.
 */
@font-face {
  font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/lora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora'; font-style: italic; font-weight: 600; font-display: swap;
  src: url('/fonts/lora-600italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/crimsonpro-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/crimsonpro-600.woff2') format('woff2');
}

:root {
  --bg: #0B0906;
  --surface: #17120D;
  --surface-2: #211A13;
  --line: rgba(255, 224, 184, 0.10);
  --ink: #F6EEE2;
  --ink-2: #C3B2A0;
  --ink-3: #8A7B6C;
  --gold: #F5B24A;
  --display: 'Lora', ui-serif, Georgia, serif;
  --body: 'Crimson Pro', ui-serif, Georgia, serif;
  --gutter: 22px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); }
/* CENTRED, NOT RANGED LEFT. A 36em column of prose inside a 1000px page left
   the right half of the screen empty beside the one section that is all
   words, while the hero above and the cards below were both centred — so the
   page appeared to lose its nerve halfway down. The text itself stays
   left-aligned; it is the column that moves. */
.narrow { max-width: 36em; margin-inline: auto; }

/* --- the window above everything ------------------------------------------
   A gold wash from the top, which is what light through glass does, and the
   only place on the page with a gradient. It is behind the hero rather than an
   image of its own: an icon repeated at full width would be a logo wall. */
.hero {
  position: relative;
  padding: 72px 0 56px;
  text-align: center;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: -40% 0 auto; height: 520px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(245, 178, 74, 0.16), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }

.mark {
  width: 104px; height: 104px; border-radius: 23%;
  display: block; margin: 0 auto 22px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}

h1 {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(42px, 10vw, 62px); letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 12px;
}

.tagline {
  font-size: clamp(20px, 4.4vw, 25px); line-height: 1.4;
  color: var(--ink-2); margin: 0 auto 10px; max-width: 19em;
}
.promise {
  font-size: 18px; color: var(--ink-3); margin: 0 auto 34px; max-width: 24em;
}

/* --- the badge -------------------------------------------------------------
   APPLE'S ARTWORK IS NOT IN THIS REPOSITORY and must not be redrawn. Apple
   distributes the "Download on the App Store" badge from its marketing tools
   and its guidelines forbid recreating it, so the slot below holds a plain
   line until the real file is dropped in at /appstore-badge.svg. See
   `site/README.md` — swapping it is one file and one block of markup. */
.badge-slot {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 14px;
  border: 1px dashed var(--line); background: var(--surface);
}
.badge-slot b { font-weight: 600; color: var(--ink); font-size: 18px; }
.badge-slot span { font-size: 16px; color: var(--ink-3); }
.badge img { display: block; height: 54px; }

/* --- the screenshots ------------------------------------------------------
   A row that scrolls sideways rather than a grid that shrinks. Five phones on
   one screen are five thumbnails nobody can read; a row at a readable size,
   scrolled, is how a person looks at screenshots anywhere else. */
.shots {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px var(--gutter) 30px; margin: 0 calc(var(--gutter) * -1);
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots figure { flex: 0 0 auto; margin: 0; scroll-snap-align: center; width: 236px; }
.shots img {
  width: 100%; display: block; border-radius: 22px;
  border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
.shots figcaption {
  font-size: 15px; color: var(--ink-3); text-align: center; margin-top: 12px;
}

/* --- the sections ---------------------------------------------------------- */
section { padding: 54px 0; border-top: 1px solid var(--line); }
section:first-of-type { border-top: 0; }

/* CENTRED, LIKE THE HERO AND THE FOOT. Once the prose column was centred the
   two section headings stopped sharing a left edge — one began at the page
   gutter, the other at the inset of its column, and nothing on the page
   explained the difference. Centring both is the version where every heading
   agrees; the paragraphs and the cards under them stay ranged left, because
   centred body text is harder to read and this page has real prose in it. */
h2 {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(28px, 6vw, 36px); letter-spacing: -0.015em; line-height: 1.15;
  margin: 0 0 18px; text-align: center;
}
h3 {
  font-family: var(--display); font-weight: 600; font-size: 21px;
  letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink);
}
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 22px 24px;
}
.card p { color: var(--ink-2); font-size: 18px; margin: 0; }

/* The one claim the whole site rests on, so it gets the gold edge the app
   gives a verse. */
.keystone {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 2px solid var(--gold); border-radius: 14px;
  padding: 24px 26px;
}
.keystone p { color: var(--ink-2); }
.keystone strong { color: var(--ink); font-weight: 600; }

a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* --- the close ------------------------------------------------------------
   The page now ends on the verse it is named out of, so the foot is the last
   thing read rather than a row of small print under the last thing read. It
   is centred and given room for that reason. */
/* THE SPACE ABOVE THE BUTTONS IS DELIBERATE AND IT IS LARGE. At 40px they
   sat close enough to the rule to read as attached to the section above
   rather than as the start of the foot, which is the opposite of what a rule
   is for. A divider only divides if both sides have room. */
footer {
  border-top: 1px solid var(--line); padding: 72px 0 64px;
  color: var(--ink-3); font-size: 17px; text-align: center;
}
/* Targets rather than words in a sentence. Someone at the foot of this page
   looking for the privacy policy is looking for a thing to press. */
.foot-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* A BORDER OF ITS OWN RATHER THAN `--line`. That token is for dividers and is
   faint by design; at 10% it left these reading as underlined words with some
   padding. A control has to look like a control before it is pressed. */
.foot-links a {
  display: inline-block; padding: 11px 26px; border-radius: 999px;
  border: 1px solid rgba(255, 224, 184, 0.22); background: var(--surface-2);
  color: var(--ink); text-decoration: none; font-size: 17px;
}
.foot-links a:hover { border-color: var(--gold); color: var(--gold); }

/* --- the verse, as the launch screen leaves it -----------------------------
 *
 * THE APP ALREADY HAS AN ANSWER FOR THIS AND IT IS WORTH COPYING. The splash
 * sets the same line of Psalm 119 in the reading face, gold, with the
 * reference small and uppercase beneath — and a light sweep that ends with
 * the whole verse lit. See `.splash-verse` in `src/styles.css`.
 *
 * THE SWEEP IS NOT COPIED, ONLY WHERE IT ENDS. On the launch screen the
 * animation is the moment; at the foot of a page nobody is arriving, so
 * motion there would be decoration asking to be noticed. What transfers is
 * the settled state: gold, glowing faintly, in the body serif rather than the
 * display italic, so it reads as something quoted rather than as another
 * heading.
 *
 * Tokens are copied rather than imported, as everything on this site is — the
 * app fingerprints its stylesheet and a hand-written page cannot name it. If
 * the app's gold moves, this does not follow.
 */
.scripture {
  margin: 44px auto 0; max-width: 20em;
  font-family: var(--body); font-style: normal;
  font-size: 22px; line-height: 1.45;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(245, 178, 74, 0.25);
}
.scripture span {
  display: block; margin-top: 14px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); text-shadow: none;
}
.rights { font-size: 14px; color: var(--ink-3); margin: 30px 0 0; }

/* --- the legal pages, which share this sheet ------------------------------- */
.doc { max-width: 34em; margin: 0 auto; padding: 56px var(--gutter) 40px; }
.doc h1 { font-size: clamp(34px, 8vw, 44px); text-align: left; margin-bottom: 6px; }
.doc h2 { font-size: 24px; margin: 38px 0 10px; text-align: left; }
.doc .sub { color: var(--ink-2); margin: 0 0 6px; }
.doc .asof { color: var(--ink-3); font-size: 16px; margin: 0 0 32px; }
.doc ul { padding-left: 1.15em; margin: 0 0 18px; }
.doc li { margin: 0 0 10px; }
.doc strong { font-weight: 600; }
.doc .lede {
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 2px solid var(--gold); border-radius: 12px;
  padding: 18px 20px; margin: 0 0 30px;
}
.doc .lede p:last-child { margin-bottom: 0; }
.home {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-2); text-decoration: none; font-size: 17px; margin-bottom: 26px;
}
.home img { width: 26px; height: 26px; border-radius: 7px; }
.home:hover { color: var(--ink); }

@media (max-width: 560px) {
  body { font-size: 18px; }
  .hero { padding: 54px 0 40px; }
  section { padding: 44px 0; }
}