/* Bloom — shared styles
   Plain CSS, no build step, no external requests, no fonts to fetch.
   Light/dark via prefers-color-scheme. */

/* ---- Raw palette — taken from the app's Theme.swift, not eyeballed ---- */
:root {
  --paper: #F2EDE1;      /* aged passport paper */
  --paper-2: #F6F2E8;    /* a lifted surface on the paper */
  --ink: #3D3B36;        /* engraved line + text */
  --hairline-raw: #D8D2C2;
  --amber: #FFB857;      /* the glow, rgb(255,184,87) */
  --amber-core: #FFDE9E; /* the hot centre of a glow */
  --amber-ink: #B57A22;  /* amber dark enough to read as text on paper */
  --night: #14161C;      /* the map at night */
  --night-2: #1D2029;
}

/* ---- Semantic tokens: light (default) ---- */
:root {
  --bg: var(--paper);
  --surface: var(--paper-2);
  --text: var(--ink);
  --text-soft: rgba(61, 59, 54, 0.66);
  --text-faint: rgba(61, 59, 54, 0.44);
  --hairline: var(--hairline-raw);
  --accent: var(--amber-ink);
  --stamp-ink: var(--ink);
  --glow-1: rgba(255, 184, 87, 0.22);
  --glow-2: rgba(255, 222, 158, 0.16);
  --shadow-soft: 0 14px 40px -20px rgba(61, 59, 54, 0.32);
  --radius: 14px;
}

/* ---- Semantic tokens: dark — the app's map at night.
       Not an inversion: amber is allowed to behave like a light source. ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--night);
    --surface: rgba(255, 255, 255, 0.035);
    --text: #EDE6D6;
    --text-soft: rgba(237, 230, 214, 0.62);
    --text-faint: rgba(237, 230, 214, 0.40);
    --hairline: rgba(237, 230, 214, 0.13);
    --accent: var(--amber);
    --stamp-ink: #E6DECB;
    --glow-1: rgba(255, 184, 87, 0.20);
    --glow-2: rgba(255, 222, 158, 0.12);
    --shadow-soft: 0 18px 50px -24px rgba(0, 0, 0, 0.7);
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Two soft lamps bleeding into the paper. Warmth, not neon. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46rem 34rem at 18% 8%, var(--glow-1), transparent 62%),
    radial-gradient(38rem 30rem at 88% 30%, var(--glow-2), transparent 60%);
}

.page { position: relative; z-index: 1; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }
.wrap--narrow { max-width: 42rem; }

a { color: inherit; }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Hero ---- */
.hero {
  text-align: center;
  padding: 5.5rem 0 3.25rem;
}

.appicon {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  display: block;
  margin: 0 auto 1.6rem;
  box-shadow: var(--shadow-soft);
}

.wordmark {
  margin: 0;
  font-size: clamp(2.9rem, 9vw, 4.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  font-variant: small-caps;
  line-height: 1.05;
}
.wordmark .dot { color: var(--accent); }

.tagline {
  margin: 1rem auto 0;
  max-width: 30ch;
  font-size: clamp(1.15rem, 3.4vw, 1.4rem);
  color: var(--text-soft);
  line-height: 1.45;
}
.tagline em { font-style: normal; color: var(--accent); }

.badge-row { margin-top: 2.2rem; }
.asbadge { height: 54px; width: auto; display: block; margin: 0 auto; }
.asbadge--white { display: none; }
@media (prefers-color-scheme: dark) {
  .asbadge--black { display: none; }
  .asbadge--white { display: block; }
}

/* ---- Three cards ---- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  padding: 1rem 0 3.5rem;
}
@media (max-width: 46rem) {
  .features { grid-template-columns: 1fr; }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.4rem;
}
/* The corner number is set like a passport stamp's serial. */
.card__num {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-bottom: 0.6rem;
}
.card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.card p { margin: 0; color: var(--text-soft); font-size: 0.98rem; }

/* ---- Motif strip: the proof that the stamps are drawn, not clip art ---- */
.motifs { padding: 0 0 3.75rem; }
.motifs h2 {
  text-align: center;
  font-size: 1.05rem;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--text-soft);
  margin: 0 0 1.9rem;
}
.motif-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.1rem;
}
@media (max-width: 52rem) { .motif-row { grid-template-columns: repeat(4, 1fr); row-gap: 1.7rem; } }

.motif { text-align: center; color: var(--stamp-ink); }
.motif svg { width: 100%; height: auto; max-width: 74px; display: block; margin: 0 auto 0.5rem; }
.motif span {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.09em;
  font-size: 0.76rem;
  color: var(--text-faint);
}

/* ---- Quiet block ---- */
.quiet {
  border-top: 1px solid var(--hairline);
  padding: 2.75rem 0 1rem;
  max-width: 44rem;
  margin: 0 auto;
}
.quiet h2 {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  font-variant: small-caps;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: var(--text-soft);
}
.quiet p { margin: 0 0 0.9rem; color: var(--text-soft); }
.quiet p:last-child { margin-bottom: 0; }
.quiet strong { color: var(--text); font-weight: 600; }

/* ---- Long-form pages (support / privacy) ---- */
.doc { padding: 4rem 0 1rem; }
.doc h1 {
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
}
.doc .sub { color: var(--text-faint); margin: 0 0 2.6rem; }
.doc h2 {
  font-size: 1.08rem;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  margin: 2.2rem 0 0.5rem;
}
.doc p, .doc li { color: var(--text-soft); }
.doc a { color: var(--accent); }

.topmark {
  display: inline-block;
  padding: 1.6rem 0 0;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--text-faint);
}
.topmark:hover { color: var(--text); }

/* ---- Footer ---- */
.foot {
  border-top: 1px solid var(--hairline);
  margin-top: 3.5rem;
  padding: 1.5rem 0 3rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }
.foot .sep { padding: 0 0.55rem; }

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}