/* THE INVITATION PAGE — the one surface a feed is allowed to link to.
   Its own stylesheet for the same reason store.css is: one round trip on a cold phone, over a
   webview's often-hostile network, and none of book.css's card renderers will ever be used here.
   The palette and the typeface are borrowed so the door and the book are visibly one product.

   Nothing here depends on JS having run — the layout holds with an empty <h1>, so a webview that
   blocks scripts shows a plain page rather than a broken one. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdd;
  --card: #fffdf7;
  --line: #e6dcc8;
  --ink: #3d3428;
  --ink-soft: #8a7f6c;
  --ink-mid: #6a6153;
  --terra: #c96f4a;
  --terra-deep: #a8512f;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased; line-height: 1.45;
  padding: 0 0 calc(34px + env(safe-area-inset-bottom));
}
#inv { max-width: 560px; margin: 0 auto; padding: 0 18px; }

.iv-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 0 20px; flex-wrap: wrap;
}
.iv-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.iv-brand .brand-mark { width: 36px; height: 36px; flex: none; }
/* Sofia's mark (2026-10-04): a one-colour line drawing served as a MASK, so it takes the page's ink
   (dark on cream and white, light on plum) from one file; the drawing is the PNG's alpha. */
.brand-mark { display: inline-block; background-color: var(--ink);
  -webkit-mask: url("assets/sofia_mark.png") center / contain no-repeat; mask: url("assets/sofia_mark.png") center / contain no-repeat; }
.iv-brand span { font-size: 15px; font-weight: 700; white-space: nowrap; }

/* the same picker shell as the shop and the account sheet — one control everywhere it appears */
.l1-sel { position: relative; display: inline-block; }
.l1-sel select {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 30px 8px 13px; cursor: pointer; line-height: 1.2;
}
.l1-sel select:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; }
.l1-caret {
  position: absolute; right: 12px; top: 50%; transform: translateY(-52%);
  color: var(--ink-soft); pointer-events: none; font-size: 12px;
}

h1 { font-size: 28px; line-height: 1.2; font-weight: 700; margin: 0 0 10px; letter-spacing: -.015em; }
.iv-sub { margin: 0 0 22px; font-size: 15.5px; color: var(--ink-mid); }

/* The facts, in the Margin's register: each line is checkable and none of them sells anything.
   The rule is one claim per row — a reader scanning on a phone reads the first four words. */
.iv-facts { list-style: none; margin: 0 0 24px; padding: 0; }
.iv-facts li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 11px;
  font-size: 14.5px; color: var(--ink-mid);
}
.iv-facts li::before {
  content: ""; position: absolute; left: 3px; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--terra);
}
.iv-facts b { color: var(--ink); font-weight: 600; }

.iv-ask {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 15px 13px; box-shadow: 0 1px 0 rgba(61,52,40,.05);
}
.iv-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 9px; }
/* Wraps to two rows under ~380px rather than shrinking the tap target: a 44px button that is
   360px wide is fine; a 30px one is not. */
.iv-form { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-form input {
  flex: 1 1 190px; min-width: 0; font: inherit; font-size: 16px;   /* 16px: iOS zooms below it */
  color: var(--ink); background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 11px 12px;
}
.iv-form input:focus-visible { outline: 2px solid var(--terra); outline-offset: 1px; border-color: var(--terra); }
.iv-form input.bad { border-color: #c0503a; background: #fdf1ee; }
.iv-form button {
  flex: 0 0 auto; font: inherit; font-size: 15px; font-weight: 700; color: #fff;
  background: var(--terra); border: 0; border-radius: 11px; padding: 12px 17px; cursor: pointer;
  box-shadow: 0 2px 0 rgba(61,52,40,.14); -webkit-tap-highlight-color: transparent;
}
.iv-form button:hover { background: var(--terra-deep); }
.iv-form button:active { transform: translateY(1px); box-shadow: none; }
.iv-form button[disabled] { opacity: .55; cursor: default; transform: none; }
/* The whole row is the tap target, not just the 16px box — this is read on a phone, one-handed. */
.iv-check {
  display: flex; align-items: flex-start; gap: 9px; margin: 13px 0 0;
  font-size: 13.5px; color: var(--ink-mid); cursor: pointer;
}
.iv-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--terra); flex: 0 0 auto; }
.iv-fine { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* What replaces the form once the mail is away. Same box, so nothing jumps. */
.iv-done { font-size: 14.5px; color: var(--ink-mid); margin: 0; }
.iv-done b { color: var(--ink); }
.iv-done .iv-then { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); }
.iv-err { margin: 10px 0 0; font-size: 13px; color: #a8412c; }


/* On a phone the input already fills the row, so the button wraps under it — and a half-width
   button sitting under a full-width field reads like a leftover rather than the thing to press.
   Above this the two sit side by side and the natural width is right. */
@media (max-width: 460px) {
  .iv-form button { flex: 1 1 100%; }
}
@media (max-width: 380px) {
  h1 { font-size: 25px; }
}

/* THE LESSON, FIRST (2026-08-14). This page's only action used to be an email address and it
   converted at 0 of 26. The taste is now the primary thing on it and has to look like the primary
   thing: full width, terracotta, the same weight the "I'm in" button used to carry alone. */
.iv-try { margin: 0 0 18px; }
.iv-try-go {
  display: block; width: 100%; text-align: center; text-decoration: none;
  padding: 15px 18px; border-radius: 12px;
  background: var(--terra); color: #fff;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2;
  box-shadow: 0 2px 0 rgba(61, 52, 40, .18);
}
.iv-try-go:hover { background: var(--terra-deep); }
.iv-try-go:active { transform: translateY(1px); box-shadow: none; }
.iv-try-note {
  margin: 9px 2px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-mid); text-align: center;
}
/* The seam between the two offers. A rule with the word in it, so "or" reads as a choice between
   them rather than as a heading over the second. */
.iv-or {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: 13px; color: var(--ink-mid); text-transform: lowercase;
}
.iv-or::before, .iv-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #e3ddd2);
}