/* Elim: the stylesheet every page shares. The home page adds home.css on top of this one.

   One palette (a warm espresso black, a warm off-white, clay and parchment), one pair of
   typefaces, one header and one footer, so that moving between the home page, the legal pages,
   support and the invite page feels like one product.

   No third-party request of any kind. The two typefaces are the app's own (Newsreader for
   headlines, Inter for text; both SIL Open Font License, see /fonts/), cut down to Latin and
   served from this site. Nothing here moves for a reader who has asked their device for less
   motion. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-roman.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 400 650; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  --bg: #121110;            /* warm espresso black */
  --raise: #181614;
  --card: #1c1917;
  --line: rgba(243, 236, 226, .10);
  --line-strong: rgba(243, 236, 226, .20);

  --text: #f3ece2;          /* warm off-white */
  --body: #cfc6b9;
  --muted: #a1978b;

  --clay: #d99a79;
  --clay-soft: #e8b79a;
  --clay-ink: #1c1917;      /* text on a clay button */
  --terra: #8c5338;         /* the brand terracotta */
  --parchment: #e9dcc6;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.25rem, 4.5vw, 2.5rem);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  color: var(--body);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60rem 38rem at 88% -6%, rgba(217, 154, 121, .16), transparent 62%),
    radial-gradient(46rem 34rem at -8% 8%, rgba(140, 83, 56, .20), transparent 60%),
    var(--bg);
  background-repeat: no-repeat;
  overflow-x: clip;
}

a { color: var(--clay); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--clay-soft); }

:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 6px; }

::selection { background: rgba(217, 154, 121, .35); color: var(--text); }

.skip {
  position: absolute; left: -999px; top: .5rem; z-index: 50;
  background: var(--clay); color: var(--clay-ink); padding: .65rem 1rem; border-radius: 10px; font-weight: 600;
}
.skip:focus { left: .5rem; }

.wrap { width: 100%; max-width: 75rem; margin-inline: auto; padding-inline: var(--gutter); }

[hidden] { display: none !important; }

/* ---- Type --------------------------------------------------------------- */

h1, h2, h3 { margin: 0; color: var(--text); font-family: var(--serif); font-weight: 400; text-wrap: balance; }
h1 em, h2 em { font-style: italic; color: var(--clay); }

p { margin: 0; text-wrap: pretty; }

.eyebrow {
  margin: 0 0 1.1rem; color: var(--clay);
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

.lede { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.6; color: var(--body); max-width: 34rem; }
.muted { color: var(--muted); }

/* ---- Header ------------------------------------------------------------- */

.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(18, 17, 16, .72);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--text); text-decoration: none;
  font: 500 1.65rem/1 var(--serif); letter-spacing: -.01em;
}
.brand:hover { color: var(--text); }
.mark { width: 1.75rem; height: 1.75rem; flex: none; }
.mark-arch { fill: none; stroke: var(--clay); stroke-width: 2.4; stroke-linecap: round; }
.mark-sun { fill: var(--clay-soft); }

.top-nav { display: flex; align-items: center; gap: .25rem; font-size: .94rem; }
.top-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem;
  color: var(--muted); text-decoration: none; border-radius: 999px;
}
.top-nav a:hover, .top-nav a[aria-current="page"] { color: var(--text); }
.top-nav .top-cta {
  margin-left: .4rem; padding: 0 1rem;
  color: var(--clay-ink); background: var(--clay); font-weight: 600;
}
.top-nav .top-cta:hover { background: var(--clay-soft); color: var(--clay-ink); }
.top-nav .wide { display: none; }

@media (min-width: 46rem) { .top-nav .wide { display: inline-flex; } }

/* ---- Buttons and pills --------------------------------------------------- */

.btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px;
  font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary, .button { background: var(--clay); color: var(--clay-ink); box-shadow: 0 10px 30px -10px rgba(217, 154, 121, .55); }
.btn-primary:hover, .button:hover { background: var(--clay-soft); color: var(--clay-ink); }
.btn-ghost, .button.secondary {
  color: var(--text); border-color: var(--line-strong); background: rgba(243, 236, 226, .03); box-shadow: none;
}
.btn-ghost:hover, .button.secondary:hover {
  color: var(--text); border-color: rgba(217, 154, 121, .6); background: rgba(217, 154, 121, .08);
}

.pill {
  display: inline-flex; align-items: center; gap: .6rem; margin: 0;
  padding: .5rem 1rem; border-radius: 999px;
  color: var(--parchment); font-size: .86rem; line-height: 1.3; font-weight: 500;
  background: rgba(217, 154, 121, .08);
  border: 1px solid rgba(217, 154, 121, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.pill-dot { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--clay); box-shadow: 0 0 0 0 rgba(217, 154, 121, .5); }
.pill-quiet { color: var(--muted); background: transparent; border-color: var(--line-strong); box-shadow: none; }

/* ---- Footer --------------------------------------------------------------- */

.foot { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .25)); }
.foot-in {
  display: grid; gap: 2.4rem 1.5rem; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); /* the mail address needs the wider one */
  padding-block: clamp(2.8rem, 6vw, 4.2rem) calc(clamp(2.8rem, 6vw, 4.2rem) + env(safe-area-inset-bottom));
}
.foot-brand { grid-column: 1 / -1; display: grid; gap: 1rem; justify-items: start; }
.foot-brand p:not(.pill) { color: var(--muted); max-width: 22rem; }
.foot-h { margin: 0 0 .8rem; color: var(--text); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.foot-col a { display: inline-block; padding: .3rem 0; color: var(--muted); text-decoration: none; font-size: .94rem; }
.foot-col a:hover { color: var(--clay-soft); text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 52rem) {
  .foot-in { grid-template-columns: 1.7fr 1fr 1.2fr 1fr; gap: 2rem; }
  .foot-brand { grid-column: auto; }
}

/* ---- Reading pages: privacy, terms, support, the invite page, 404 ---------------- */

.page main {
  max-width: 46rem; margin-inline: auto;
  padding: clamp(2.6rem, 6vw, 5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}

.page main h1 { font-size: clamp(2.4rem, 1.4rem + 3.8vw, 4.1rem); line-height: 1.04; letter-spacing: -.026em; margin: 0 0 .9rem; }
.page main h2 {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.018em;
  margin: 3.2rem 0 .5rem; padding-top: 2.2rem; border-top: 1px solid var(--line);
}
.page main h3 { margin: 2rem 0 .1rem; font: 600 1.02rem/1.4 var(--sans); letter-spacing: 0; color: var(--text); }

.page main .eyebrow { margin-bottom: 1.2rem; }
.page main .meta { margin: 0 0 1.8rem; color: var(--muted); font-size: .95rem; }
.page main .lede { margin: 1.2rem 0; max-width: none; }

.page main p, .page main li { margin: .85rem 0; line-height: 1.72; }
.page main li { margin: .55rem 0; }
.page main strong { color: var(--text); font-weight: 600; }
.page main ul, .page main ol { padding-left: 1.4rem; }
.page main li::marker { color: var(--clay); }

/* The cards: the short version, the note, the invite code */
.page main .panel, .page main .summary, .page main .note {
  margin: 2rem 0; padding: .6rem 1.5rem; border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(24rem 12rem at 0% 0%, rgba(217, 154, 121, .09), transparent 70%),
    linear-gradient(180deg, rgba(243, 236, 226, .035), rgba(243, 236, 226, .01)),
    var(--raise);
}
.page main .panel > :first-child, .page main .summary > :first-child, .page main .note > :first-child { margin-top: 1rem; }
.page main .panel > :last-child, .page main .summary > :last-child, .page main .note > :last-child { margin-bottom: 1rem; }
.page main .summary h2 { border: 0; margin: 1.1rem 0 .3rem; padding: 0; font-size: 1.7rem; }
.page main .note { border-color: rgba(217, 154, 121, .38); }

.page main table { width: 100%; margin: 1.6rem 0; border-collapse: collapse; font-size: .95rem; }
.page main th, .page main td { text-align: left; vertical-align: top; padding: .8rem 1rem .8rem 0; border-bottom: 1px solid var(--line); line-height: 1.55; }
.page main th { color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.page main td:first-child { color: var(--text); font-weight: 500; }

/* Frequently asked questions */
.page main details { border-top: 1px solid var(--line); }
.page main details:last-of-type { border-bottom: 1px solid var(--line); }
.page main summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  color: var(--text); font-weight: 600; line-height: 1.45;
}
.page main summary::-webkit-details-marker { display: none; }
.page main summary::after {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem;
  border-radius: 50%; border: 1px solid var(--line-strong); color: var(--clay); font-weight: 400; font-size: 1.15rem; line-height: 1;
}
.page main details[open] > summary::after { content: "\2212"; }
.page main summary:hover { color: var(--clay-soft); }
.page main summary:focus-visible { outline-offset: 2px; }
.page main details p { margin: 0 0 1.3rem; max-width: 40rem; }

/* The invite page */
.page main .code-card { text-align: center; padding: 1.6rem 1.4rem 1.8rem; border: 1px dashed rgba(217, 154, 121, .45); background: rgba(0, 0, 0, .3); }
.page main .code-card > .muted { font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin: 0; }
.page main .code {
  font: 600 clamp(1.7rem, 8.5vw, 2.7rem)/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .1em; color: var(--text); margin: .5rem 0 1.4rem; user-select: all; word-break: break-all;
}
.page main .actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
.page main .status { min-height: 1.5rem; margin: 1rem 0 0; color: var(--muted); font-size: .95rem; }
.page main .steps { padding-left: 0; list-style: none; counter-reset: step; }
.page main .steps li { counter-increment: step; position: relative; margin: 1rem 0; padding-left: 2.6rem; }
.page main .steps li::before {
  content: counter(step); position: absolute; left: 0; top: .12rem;
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  font-size: .78rem; font-weight: 600; color: var(--clay); border: 1px solid rgba(217, 154, 121, .5);
}

/* ---- Motion: only for a reader who has not asked for less ---------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .button, .top-nav a, .foot-col a, .page summary { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
  .btn:active, .button:active { transform: translateY(1px); }
}

/* ---- Print: plain black on white, no chrome ------------------------------------ */

@media print {
  .top, .skip, .foot-col { display: none; }
  body { background: #fff; color: #000; }
  .page, .page * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .page a { text-decoration: underline; }
  h1, h2, h3 { color: #000; }
}