/* ─────────────────────────────────────────────
   Amparus — Design tokens & base styles
   ───────────────────────────────────────────── */

.amparus {
  /* Palette — warm cream + deep teal-blue + warm tan */
  --bg: #f7f3ee;
  --bg-elev: #fbf8f3;
  --bg-deep: #ece4d6;
  --ink: #1f2b33;
  --ink-soft: #3a4853;
  --muted: #6f7a82;
  --line: #e3d9c9;
  --line-soft: #efe7d8;
  --primary: #2d4a5a;
  --primary-deep: #1f3744;
  --accent: #c89968;
  --accent-soft: #e8c89d;
  --whats: #25612e;

  /* Type */
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;

  /* Density (overridable by Tweaks) */
  --pad-sec: 112px;
  --container: 1200px;

  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.amparus *, .amparus *::before, .amparus *::after { box-sizing: border-box; }
.amparus p, .amparus h1, .amparus h2, .amparus h3, .amparus h4, .amparus ul, .amparus ol { margin: 0; padding: 0; }
.amparus ul, .amparus ol { list-style: none; }
.amparus a { color: inherit; text-decoration: none; }
.amparus button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
.amparus img, .amparus svg { display: block; max-width: 100%; }

/* Typography scale */
.amparus .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.amparus .eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--accent);
}

.amparus .h-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.amparus .h-display em {
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}

.amparus .h-section {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.amparus .h-section em {
  font-style: italic;
  font-weight: 400;
  color: var(--primary);
}

.amparus .lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.amparus .body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Buttons */
.amparus .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.amparus .btn:hover { transform: translateY(-1px); }
.amparus .btn-primary { background: var(--primary); color: #fbf8f3; }
.amparus .btn-primary:hover { background: var(--primary-deep); }
.amparus .btn-whats { background: var(--whats); color: #fbf8f3; }
.amparus .btn-whats:hover { background: #1d4b24; }
.amparus .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.amparus .btn-ghost:hover { background: var(--bg-elev); }

/* Layout */
.amparus .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.amparus .section {
  padding: var(--pad-sec) 0;
}
.amparus .section.bg-deep { background: var(--bg-deep); }
.amparus .section.bg-elev { background: var(--bg-elev); }
.amparus .section.bg-ink {
  background: var(--primary-deep);
  color: #f4ede1;
}
.amparus .section.bg-ink .h-section,
.amparus .section.bg-ink .h-display { color: #f4ede1; }
.amparus .section.bg-ink .h-section em,
.amparus .section.bg-ink .h-display em { color: var(--accent-soft); }
.amparus .section.bg-ink .body,
.amparus .section.bg-ink .lede { color: #d9cfbf; }

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

/* Mobile artboard overrides — narrow, single column */
.amparus.is-mobile {
  --pad-sec: 64px;
}
.amparus.is-mobile .container { padding: 0 20px; }
.amparus.is-mobile .h-display { font-size: 40px; }
.amparus.is-mobile .h-section { font-size: 30px; }
.amparus.is-mobile .lede { font-size: 17px; }

/* Density variants — applied at root via class */
.amparus.density-cozy { --pad-sec: 84px; }
.amparus.density-airy { --pad-sec: 140px; }
.amparus.is-mobile.density-cozy { --pad-sec: 52px; }
.amparus.is-mobile.density-airy { --pad-sec: 84px; }

/* ─────────────────────────────────────────────
   Photo placeholder — subtly-striped SVG with
   monospace caption. Designed to feel like a
   real production photo slot.
   ───────────────────────────────────────────── */
.amparus .photo {
  position: relative;
  background: linear-gradient(135deg, #d8c9b2 0%, #c4b294 100%);
  overflow: hidden;
  border-radius: 4px;
}
.amparus .photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    transparent 1px,
    transparent 14px
  );
  pointer-events: none;
}
.amparus .photo .cap {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(31,43,51,0.62);
  background: rgba(247,243,238,0.78);
  padding: 4px 8px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.amparus .photo.tone-green { background: linear-gradient(135deg, #b8c7a8 0%, #99ad88 100%); }
.amparus .photo.tone-warm  { background: linear-gradient(135deg, #e0c8a8 0%, #c89968 100%); }
.amparus .photo.tone-sky   { background: linear-gradient(135deg, #b3c4cf 0%, #91a8b6 100%); }
.amparus .photo.tone-rose  { background: linear-gradient(135deg, #d8bdb0 0%, #b89890 100%); }
.amparus .photo.tone-ink   { background: linear-gradient(135deg, #4a6470 0%, #2d4a5a 100%); }
.amparus .photo.tone-ink .cap { background: rgba(31,55,68,0.65); color: rgba(244,237,225,0.85); }