/* The share and landing pages: /e (an event), /s (a Space), /get, and the
   worker-rendered /u profile card and its fallback. One stylesheet so they
   stay one design (the audit-tail ledger asked for it, 2026-08).

   The 2.0 look, the same tokens as index.html: warm paper by default, warm
   coal when the phone is dark (LIGHT_COLORS / COLORS in lib/theme.ts), the
   mural wordmark from /mural.js, Manrope for words and Archivo Black only for
   the mark. Anything drawn on a photo or a flyer keeps its coal values in
   both schemes. Each page also inlines its first-paint background so it can
   never flash the wrong ground before this file lands. */

:root {
  color-scheme: light dark;
  --bg: #F3EFE8;
  --surface: #FFFDF9;
  --surface-alt: #EFEAE2;
  --text: #1A1715;
  --text-sub: #6F6B64;
  --hairline: rgba(128, 124, 118, 0.30);
  --hairline-strong: rgba(128, 124, 118, 0.45);
  /* SHADOW.flyerPaper / flyerCoal in lib/styles.ts */
  --flyer-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1715;
    --surface: #221F1C;
    --surface-alt: #2A2622;
    --text: #E8E6DE;
    --text-sub: #8E8B84;
    --flyer-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.hide { display: none !important; }

/* The brand inside a sentence (site/faq.html's .brand): Archivo Black at 92%
   of the running size, so the period reads as part of the mark. */
.brand {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: -0.02em;
}

.wrap {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.wrap.center { justify-content: center; }

/* The wordmark: the letters as a mask over the mural, a new seed every
   visit. The typed mark stands in until the script draws, and the svg stays
   hidden until Archivo Black lands (.wm-ready), so it never flashes in the
   fallback face. */
.top { display: flex; align-items: center; margin-bottom: 24px; min-height: 40px; }
.mark {
  display: block;
  width: 104px;
  font-size: 32px;
  line-height: 0;
  text-decoration: none;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.mark.hero { width: min(240px, 64%); font-size: 74px; margin: 0 auto; }
.mark svg { width: 100%; height: auto; display: block; overflow: visible; }
.wm-fallback {
  font-family: 'Archivo Black', 'Arial Black', sans-serif;
  font-size: 1em;
  letter-spacing: -0.03em;
  line-height: 1;
}
.js .mark svg { opacity: 0; transition: opacity 0.6s ease; }
.wm-ready .mark svg { opacity: 1; }

/* A flyer: an event cover at its own shape (4:5 for a beau. pick, the 2.2
   banner for everyone else, as on the app's event page), on the flyer
   shadow. With no cover the mural stands in, on coal, seeded by the id so
   the same event always gets the same art. */
.flyer {
  position: relative;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #1A1715;
  box-shadow: var(--flyer-shadow);
  margin-bottom: 20px;
}
.flyer.pick { aspect-ratio: 4 / 5; }
.flyer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.flyer .fill { position: absolute; inset: 0; }
.flyer .fill svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.flyer .fill .shapes { opacity: 0.85; }
/* On-photo chrome keeps its coal values in both schemes. */
.flyer .pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(26, 23, 21, 0.55);
  border: 1px solid rgba(232, 230, 222, 0.22);
  color: #E8E6DE;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-sub);
  margin-bottom: 6px;
}
.title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.meta { font-size: 15px; font-weight: 500; color: var(--text-sub); }
.meta.strong { color: var(--text); font-weight: 600; }
.meta + .meta { margin-top: 2px; }
.prose {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
}
.prose.sub { color: var(--text-sub); }

/* The one primary action: ink on paper, bone on coal (the site's pill). */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  margin-top: 32px;
  padding: 0 28px;
  border-radius: 100px;
  background: var(--text);
  color: var(--bg);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.cta:active { opacity: 0.85; }
.note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-sub);
  text-align: center;
}
.note a { color: var(--text-sub); }

.state { padding: 72px 0; text-align: center; color: var(--text-sub); }
.state .title { color: var(--text); font-size: 22px; margin-bottom: 8px; }

footer {
  padding: 28px var(--gutter) 24px;
  text-align: center;
  color: var(--text-sub);
  font-size: 12px;
}
footer a { color: var(--text-sub); text-decoration: none; margin: 0 6px; }

@media (prefers-reduced-motion: reduce) {
  .js .mark svg { transition: none; }
}