/* DulyHandled — shared brand stylesheet
 * Refs: docs/DULYHANDLED-BRAND.md (§3 identity, §4 voice, §5 palette)
 *
 * Palette:
 *   Primary accent  Amber Gold    #d4a853
 *   Accent (dim)    Amber Soft    #c49a45
 *   Success         Sage Green    #7a9a6a
 *   Alert           Signal Red    #e85040
 *   Ink (on light)  Deep Night    #1a1520
 *   Paper (light)   Warm Ivory    #fafaf7  (page bg; #ece8df on-dark text)
 *   Surface dark    Deep Plum     #1e1a28
 *   Bg dark         Deep Night    #0b0a0d
 *
 * Type:
 *   Display   Source Serif 4     (hero + major H1)
 *   Body      Plus Jakarta Sans  (300, 400, 500, 600, 700)
 */

:root {
  --duly-gold:        #d4a853;
  --duly-gold-dark:   #b88c36;
  --duly-gold-soft:   #c49a45;
  --duly-sage:        #7a9a6a;
  --duly-sage-soft:   #a8c099;
  --duly-red:         #e85040;
  --duly-ink:         #1a1520;
  --duly-ink-soft:    #2a2434;
  --duly-paper:       #fafaf7;
  --duly-ivory:       #ece8df;
  --duly-plum:        #1e1a28;
  --duly-night:       #0b0a0d;
  --duly-muted:       #6b6b6b;
  --duly-muted-dark:  #9590a0;
  --duly-subtle:      #e8e5dc;
  --duly-subtle-dark: #2a2535;
  --max-width:        920px;
  --max-read:         720px;
  --font-display:     "Source Serif 4", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-body:        "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--duly-paper);
  color: var(--duly-ink);
  font-family: var(--font-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

/* ---------- Accent bar + header ---------- */

.accent-bar {
  height: 3px;
  background: var(--duly-gold);
}

header.site {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--duly-subtle);
  background: var(--duly-paper);
}

header.site .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

a.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--duly-ink);
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  line-height: 1;
}

a.brand .mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

a.brand .word .d { font-weight: 700; }
a.brand .word .h { font-weight: 300; }

nav.site a {
  text-decoration: none;
  color: var(--duly-muted);
  font-size: 0.95rem;
  margin-left: 1.5rem;
  transition: color 0.15s ease-out;
}
nav.site a:hover { color: var(--duly-ink); }

/* ---------- Hero (dark luxury-concierge feel) ---------- */

section.hero {
  background: var(--duly-night);
  color: var(--duly-ivory);
  padding: 5rem 1.5rem 6rem;
  position: relative;
}

section.hero .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 820px) {
  section.hero .inner { grid-template-columns: 1.2fr 1fr; gap: 4rem; }
}

section.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--duly-gold);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
  font-weight: 500;
}

section.hero .kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--duly-gold);
}

section.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
  color: var(--duly-ivory);
}

section.hero h1 em {
  color: var(--duly-gold);
  font-style: italic;
  font-weight: 400;
}

section.hero p.lede {
  color: var(--duly-ivory);
  opacity: 0.82;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 0 2rem;
}

section.hero .visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

section.hero .visual .mark-large {
  width: min(280px, 100%);
  aspect-ratio: 1;
  background: var(--duly-plum);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(212, 168, 83, 0.15),
    0 30px 60px -15px rgba(0, 0, 0, 0.6);
}

section.hero .visual .mark-large svg {
  width: 55%;
  height: 55%;
}

/* ---------- Content blocks ---------- */

main {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

main.wide { max-width: var(--max-width); }

main h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

main .lede {
  color: var(--duly-muted);
  margin: 0 0 2rem;
  font-size: 1.05rem;
}

main h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 3rem 0 1rem;
  letter-spacing: -0.01em;
}

main h3 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.5rem;
  font-weight: 600;
}

main p, main li {
  font-size: 1rem;
  margin: 0 0 0.75rem;
}

main ul, main ol {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

main strong { font-weight: 600; }

main a {
  color: var(--duly-gold-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease-out;
}
main a:hover { color: var(--duly-ink); }

main .updated {
  display: inline-block;
  background: var(--duly-subtle);
  color: var(--duly-muted);
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 2rem;
  font-weight: 500;
}

/* ---------- Feature grid (how it works) ---------- */

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1rem 0 0;
}

@media (min-width: 640px) {
  .features { grid-template-columns: 1fr 1fr; }
}

.feature {
  background: #fff;
  border: 1px solid var(--duly-subtle);
  border-radius: 14px;
  padding: 1.5rem;
}

.feature .marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(212, 168, 83, 0.12);
  color: var(--duly-gold-dark);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.feature h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}

.feature p {
  color: var(--duly-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- Handled status indicators (sage green) ---------- */

.status-handled {
  color: var(--duly-sage);
  font-weight: 600;
}

.status-attention {
  color: var(--duly-gold-dark);
  font-weight: 600;
}

/* ---------- CTA button ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--duly-gold);
  color: var(--duly-ink);
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease-out;
  min-height: 44px;
}
.cta:hover {
  background: var(--duly-gold-dark);
  color: #fff;
  transform: translateY(-1px);
}

.cta.secondary {
  background: transparent;
  color: var(--duly-ivory);
  border: 1px solid rgba(236, 232, 223, 0.3);
}
.cta.secondary:hover {
  background: rgba(236, 232, 223, 0.08);
  color: var(--duly-ivory);
  transform: none;
}

/* ---------- Contact block ---------- */

.contact-block {
  background: #fff;
  border: 1px solid var(--duly-subtle);
  border-radius: 14px;
  padding: 2rem;
  margin-top: 1rem;
}

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

footer.site {
  border-top: 1px solid var(--duly-subtle);
  padding: 2rem 1.5rem;
  color: var(--duly-muted);
  font-size: 0.9rem;
  background: var(--duly-paper);
}
footer.site .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}
footer.site .brand-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
footer.site .brand-line svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}
footer.site a {
  color: var(--duly-muted);
  text-decoration: none;
  margin-left: 1.25rem;
  transition: color 0.15s ease-out;
}
footer.site a:hover { color: var(--duly-ink); }
footer.site a:first-child { margin-left: 0; }

@media (max-width: 480px) {
  nav.site a { margin-left: 1rem; font-size: 0.9rem; }
  footer.site .inner { flex-direction: column; align-items: flex-start; }
  footer.site a { margin-left: 0; margin-right: 1rem; }
}