/* Galero — marketing + legal site styles */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #F4EFE6;
  --bg-2: #ECE5D6;
  --bg-3: #E2D9C5;
  --ink: #1B1814;
  --ink-2: #4A4138;
  --ink-3: #8A7A66;
  --gold: #B8954A;
  --gold-deep: #9A6F2E;
  --rule: rgba(27, 24, 20, 0.16);
  --rule-strong: rgba(27, 24, 20, 0.4);

  --serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
  --display: 'DM Serif Display', 'EB Garamond', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1040px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

img { max-width: 100%; display: block; }

a { color: var(--gold-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout primitives ---- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; }
h1 { font-size: clamp(2.6rem, 8vw, 4.4rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 0.4em; }
h3 { font-size: 1.3rem; margin: 0 0 0.3em; }

.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---- Gilt double-border framing device (gallery placard) ---- */
.frame {
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--rule);
  background: var(--bg);
}

/* ---- Site header ---- */
.site-header { padding: 22px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }
.wordmark {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--ink);
  font-size: 1.25rem;
}
.nav-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---- Hero (split) ---- */
.hero { padding: 40px 0 72px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero-text .wordmark-xl {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  font-size: clamp(3rem, 9vw, 5rem);
  line-height: 1;
  margin: 14px 0 18px;
}
.hero-hook {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--ink-2);
  margin: 0 0 28px;
}
.hero-art img { width: 100%; height: auto; }

/* ---- App Store badge ---- */
.badge-link { display: inline-block; line-height: 0; }
.badge-link img { width: 200px; height: auto; }
.badge-link:hover { opacity: 0.9; text-decoration: none; }

/* ---- Generic section ---- */
.section { padding: 64px 0; border-top: 1px solid var(--rule); }
.section-lead { max-width: 60ch; color: var(--ink-2); font-size: 1.1rem; }

/* ---- Feature grid (how it plays / why it's lovely) ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
.feature { padding: 28px 24px; }
.feature .kicker { display: block; margin-bottom: 14px; }
.feature p { margin: 0; color: var(--ink-2); font-size: 1rem; }

/* ---- Stat ---- */
.stat-num {
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 5rem);
  color: var(--gold-deep);
  line-height: 1;
}

/* ---- Premium block ---- */
.premium { padding: 44px 36px; text-align: center; }
.premium ul {
  list-style: none; padding: 0; margin: 24px auto 0; max-width: 30ch;
  text-align: left;
}
.premium li { padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.premium li:first-child { border-top: 0; }
.premium .note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 22px; }

/* ---- Footer ---- */
.site-footer { padding: 56px 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 18px; }
.footer-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.footer-fine { font-size: 0.95rem; color: var(--ink-2); }

/* ---- Legal document (privacy) ---- */
.doc { max-width: 740px; margin: 0 auto; padding: 48px 0 72px; }
.doc h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: 0.02em; margin-bottom: 8px; }
.doc .doc-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 36px; }
.doc h2 { font-size: 1.5rem; margin-top: 40px; }
.doc p, .doc li { color: var(--ink-2); }
.doc ul { padding-left: 1.2em; }
.doc li { margin: 8px 0; }

/* ---- Scroll reveal (progressive enhancement) ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-art { order: -1; max-width: 360px; margin: 0 auto; }
  .grid-3 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto !important; }
}