/* sharats.com — landing page styles.
   Palette, type, and component treatments mirror the HEDIS prototype
   (hedis-quality-measures-project/app.py) so the landing page, demo pages,
   and prototypes read as one site. */

:root {
  --brand-dark: #141413;
  --brand-light: #faf9f5;
  --brand-mid-gray: #b0aea5;
  --brand-light-gray: #e8e6dc;
  --brand-orange: #d97757;
  --brand-blue: #6a9bcc;
  --brand-green: #788c5d;

  /* WCAG-AA-safe accent for buttons and links (same as the prototype). */
  --accent-strong: #a85530;
  --accent-strong-hover: #8a4526;
  --text-muted: #6b6862;
  --border-subtle: rgba(20, 20, 19, 0.2);

  --font-heading: 'Poppins', Arial, sans-serif;
  --font-body: 'Lora', Georgia, serif;

  --max-width: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--brand-light);
  color: var(--brand-dark);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--brand-dark);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent-strong);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }





/* ---------- Layout ---------- */

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}


/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 2.25rem;
  align-items: center;
  padding: 1rem 0 2rem;
}

.hero-photo {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--brand-light-gray);
  border: 4px solid var(--brand-light-gray);
  box-shadow: 0 1px 3px rgba(20, 20, 19, 0.08);
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.monogram {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 4rem;
  color: var(--brand-orange);
  letter-spacing: 0.02em;
}


/* Now carries the full About copy rather than a one-line pitch, so it is set
   smaller and allowed the full width of the column. The 34em cap is gone: it
   was narrower than the grid track and would have forced extra lines. */
.lede {
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  /* Deliberately smaller than before: at 0.95rem/0.65rem these read as the
     loudest thing on a page whose point is the copy next to the photo. */
  font-size: 0.8rem;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { text-decoration: none; }


/* The only button treatment on the page: all three share this outline so none
   of them competes for attention. The class name is kept rather than renamed
   to .btn so the markup stays explicit about which treatment is applied. */
.btn-secondary {
  background-color: transparent;
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.btn-secondary:hover {
  border-color: var(--accent-strong-hover);
  color: var(--accent-strong-hover);
  background-color: rgba(168, 85, 48, 0.08);
}




/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  border-top: 1px solid var(--brand-light-gray);
  font-family: var(--font-heading);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: left;
  }
  .hero-photo { width: 160px; height: 160px; }
  .monogram { font-size: 3rem; }
}