/*
 * Little Aura brand tokens + homepage styles.
 *
 * Palette source (Task 9, extracted with PHP+GD from the curated brand
 * images — see .superpowers/sdd/task-9-report.md for the full method):
 *   --la-accent    #a37b41  sampled from logo.png, the gold wordmark strokes.
 *   --la-accent-2  #9c86a8  sampled from logo.png, the amethyst gem accent.
 *   --la-bg        #faf6f1  a light tint of hero.jpg's dominant warm taupe
 *                  tone (#988179 / #ae9684), lightened for a readable page
 *                  background — the raw photo pixels are a studio wall, not
 *                  usable verbatim as a website background.
 *   --la-ink       #362c22  a dark warm brown, deepened from the same taupe
 *                  family, used instead of flat black for warmer text.
 *
 * Fonts are vendored locally in ../fonts/ (Assistant for body text, Frank
 * Ruhl Libre for display/headings) — no runtime CDN, works fully offline.
 */

@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("../fonts/frankruhllibre-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("../fonts/frankruhllibre-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("../fonts/frankruhllibre-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --la-bg: #faf6f1;
  --la-bg-alt: #f2e9df;
  --la-ink: #362c22;
  --la-ink-soft: #6b5f52;
  --la-accent: #a37b41;      /* gold, sampled from logo.png wordmark */
  --la-accent-deep: #7c5a2e; /* darker gold for hover/pressed states */
  --la-accent-2: #9c86a8;    /* lavender, sampled from logo.png gem accent */
  --la-card: #ffffff;
  --la-line: #e7dccd;
  --la-radius: 16px;
  --la-radius-sm: 10px;
  --la-shadow: 0 10px 30px rgba(90, 65, 35, .10);
  --la-shadow-soft: 0 4px 14px rgba(90, 65, 35, .08);
  --la-font: "Assistant", system-ui, sans-serif;
  --la-font-display: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --la-ease: cubic-bezier(.22, .61, .36, 1);
}
[x-cloak] { display: none !important; }

/* ---------- Landing homepage ---------- */
.la-home { font-family: var(--la-font); color: var(--la-ink); background: var(--la-bg); }
.la-home section { max-width: 880px; margin: 0 auto; padding: 64px 24px; }

.la-hero {
  text-align: center;
  padding: 96px 24px 84px;
  max-width: none;
  background:
    linear-gradient(180deg, rgba(250,246,241,.35), var(--la-bg) 78%),
    url("../img/hero.jpg") center 30% / cover no-repeat;
  position: relative;
}
.la-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(54,44,34,.32), rgba(54,44,34,.12) 45%, var(--la-bg) 92%);
}
.la-hero > * { position: relative; z-index: 1; }
.la-hero h1 {
  font-family: var(--la-font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 64px);
  color: #fff;
  letter-spacing: .01em;
  margin: 0 0 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.la-hero .la-tag {
  font-size: clamp(18px, 2.4vw, 22px);
  color: #fff;
  opacity: .95;
  margin: 0 0 36px;
  letter-spacing: .02em;
}
.la-cta {
  display: inline-block;
  background: var(--la-accent);
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding: 16px 40px;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(124, 90, 46, .35);
  transition: transform .25s var(--la-ease), background-color .25s var(--la-ease), box-shadow .25s var(--la-ease);
}
.la-cta:hover, .la-cta:focus-visible {
  background: var(--la-accent-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(124, 90, 46, .42);
}

.la-about, .la-stones-intro { text-align: center; }
.la-home h2 {
  font-family: var(--la-font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0 0 18px;
  color: var(--la-ink);
}
.la-home h2::after {
  content: "";
  display: block;
  width: 46px; height: 2px;
  background: var(--la-accent-2);
  margin: 16px auto 0;
}
.la-home p {
  font-size: 17px;
  line-height: 1.9;
  color: var(--la-ink-soft);
  max-width: 620px;
  margin: 0 auto;
}
.la-stones-intro { background: var(--la-bg-alt); max-width: none; }
.la-stones-intro > * { max-width: 620px; margin-inline: auto; }