/* =========================================================================
   fammoore.com — the Moore family portal
   House style: understated, classic, "royal household". Loden green + cream
   + antique gold. Cormorant (serif) display, Manrope (sans) body — with
   system fallbacks so it runs offline.
   ========================================================================= */
:root {
  /* maps to the canonical Moore tokens in brand.css */
  --green:      var(--moore-green);   /* Loden green */
  --green-deep: #2a2d20;              /* local: darker hero green */
  --green-soft: #4a4f39;              /* local: mid green */
  --cream:      var(--moore-cream);   /* beige ground */
  --cream-2:    var(--moore-cream-2);
  --paper:      var(--moore-paper);
  --gold:       var(--moore-gold);    /* one true gold */
  --gold-bright:var(--moore-gold-bright);
  --gold-deep:  var(--moore-gold-deep);
  --gold-grad:  var(--moore-gold-grad);
  --ink:        var(--moore-ink);
  --muted:      var(--moore-muted);
  --line:       var(--moore-line);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow: 0 24px 60px -30px rgba(20, 24, 16, .6), 0 4px 14px -8px rgba(20,24,16,.25);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink); font-size: 18px; line-height: 1.6;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--cream-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--cream) 0%, #e8dfc8 100%);
  min-height: 100vh; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}

/* ---------- landing ---------- */
.hero {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(28px, 6vw, 80px) 20px; gap: 8px;
}
.crest { width: clamp(140px, 26vw, 230px); height: auto; filter: drop-shadow(0 10px 22px rgba(20,24,16,.22)); }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--green-soft); margin: 18px 0 2px;
}
h1.family {
  font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 9vw, 84px);
  line-height: 1; margin: 6px 0 4px; letter-spacing: .5px; color: var(--green);
}
.family .of { font-style: italic; color: var(--green); }
/* gold is for the special words: the family name "Moore", and the people —
   "Junior", "Daddy". Used sparingly, it stays distinguished. */
.family .moore, .topbar b .moore, .gilt {
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 600;
}
.tagline { font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.6vw, 25px); color: var(--green-soft); margin: 6px 0 26px; max-width: 30ch; }
.rule { width: 64px; height: 2px; background: var(--gold); opacity: .6; border: 0; margin: 8px auto 28px; }

.btn {
  font-family: var(--sans); font-weight: 700; font-size: 18px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 16px 34px;
  border-radius: 999px; border: 0; transition: transform .12s, box-shadow .25s, background .2s;
}
.btn-login { background: linear-gradient(180deg, var(--green-soft), var(--green)); color: var(--cream); box-shadow: 0 14px 30px -14px rgba(42,45,32,.9); }
.btn-login:hover { box-shadow: 0 18px 40px -16px rgba(42,45,32,.95); transform: translateY(-1px); }
.btn-login .key { color: var(--gold-bright); }
.btn-green { background: linear-gradient(180deg, var(--green-soft), var(--green)); color: var(--cream); box-shadow: 0 12px 26px -14px rgba(42,45,32,.85); }
.btn-green:hover { box-shadow: 0 16px 34px -16px rgba(42,45,32,.95); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--green); border: 2px solid var(--line); }
.btn-ghost:hover { border-color: var(--gold); }
.btn:active { transform: translateY(1px) scale(.99); }

.footer { text-align: center; color: var(--muted); font-size: 13px; padding: 22px; font-family: var(--mono); letter-spacing: .04em; }
.footer .dot { color: var(--gold); margin: 0 8px; }

/* ---------- dashboard ---------- */
.topbar {
  display: flex; align-items: center; gap: 14px; padding: 16px clamp(18px, 4vw, 44px);
  background: rgba(42, 45, 32, .97); color: var(--cream); position: sticky; top: 0; z-index: 10;
  border-bottom: 3px solid; border-image: var(--gold-grad) 1;
}
.topbar .mark { width: 40px; height: 40px; flex: none; }
.topbar b { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--cream); }
.topbar .who { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream); border: 1px solid rgba(239,231,211,.35); padding: 5px 12px; border-radius: 999px; }

.wrap { max-width: 860px; margin: 0 auto; width: 100%; padding: clamp(24px, 5vw, 48px) clamp(18px, 4vw, 28px) 80px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--green-soft); margin: 0 0 8px; }
h2.title { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 6vw, 46px); line-height: 1.08; margin: 0 0 12px; color: var(--green); }
.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--green-soft); margin: 0 0 26px; }

.section-label { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--green-soft); font-weight: 600; margin: 34px 0 12px; }

.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow); margin-bottom: 18px;
}
.toolcard { display: flex; gap: 18px; align-items: center; }
.toolcard .badge {
  flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  font-size: 30px; background: linear-gradient(180deg, #4a4f39, var(--green)); color: var(--gold-bright);
}
.toolcard .grow { flex: 1; min-width: 0; }
.toolcard h3 { font-family: var(--serif); font-size: 25px; margin: 0 0 3px; color: var(--green); }
.toolcard p { margin: 0; color: var(--muted); font-size: 16px; }
.toolcard .go { flex: none; }

.mission { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.mission:first-of-type { border-top: 0; }
.mission .n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-weight: 600; font-size: 14px; background: var(--cream); color: var(--green); border: 1px solid var(--gold); }
.mission .m-body b { display: block; color: var(--green); margin-bottom: 2px; }
.mission .m-body span { color: var(--muted); font-size: 16px; }
.mission .m-body .daddy { color: var(--gold); font-weight: 700; }

.note { background: linear-gradient(180deg, #fff8ec, #f6ecd6); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: 12px; padding: 14px 16px; margin: 16px 0; font-size: 16px; color: var(--green-soft); }
.note b { color: var(--gold); }

@media (max-width: 540px) {
  .toolcard { flex-direction: column; align-items: flex-start; }
  .toolcard .go { width: 100%; }
  .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .001ms !important; } }